/* ===== Reset chung nhẹ ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Roboto', sans-serif;
  background: #fff; color: #222;
  overflow-x: hidden; scroll-behavior: smooth; height: 100%;
}

/* Biến chiều cao header để smooth-scroll bù khoảng */
:root { --header-h: 0px; }

/* ===== Header chung ===== */
.header-wrapper { background: #fff; }
.header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 30px 0; max-width: 1440px; margin: 0 auto;
}
.container { margin-left: auto; margin-right: auto; max-width: 1440px; padding: 0 1.5rem; }

.logo img { height: 40px; cursor: pointer; }

/* Cột phải */
.header-right { display: flex; flex-direction: column; align-items: flex-end; flex: 1; }
.top-bar-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 6px; }
.language, .mobile-language { font-size: 12px; font-weight: 700; cursor: pointer; }

/* Nút hamburger */
.menu-toggle {
  display: none; font-size: 40px; background: none; border: none; cursor: pointer;
  position: absolute; top: 0; right: 0; padding: 4px 14px; z-index: 3;
}

/* ===== Desktop nav ===== */
.nav { display: flex; gap: 24px; font-weight: 700; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: #000; position: relative; }

/* Submenu (hover) */
.with-submenu { position: relative; }
.submenu {
  position: absolute; top: 100%; left: -50px; min-width: 180px;
  background: transparent; box-shadow: 0 1px 1px rgba(0,0,0,.1);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: all .3s ease; z-index: 999; display: flex; flex-direction: column; pointer-events: none;
}
.with-submenu:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.submenu a { padding: 10px 20px; text-decoration: none; font-weight: 400; }
.submenu a:hover { background: #f5f5f5; }

/* ===== Mobile nav overlay ===== */
.mobile-nav {
  display: none; flex-direction: column; padding: 100px 0;
  position: fixed; inset: 0; width: 100%; height: 100vh;
  overflow-y: auto; z-index: 2;
  background: rgba(240,243,246,.98);
}
.mobile-nav.show { display: flex; }

.mobile-nav a,
.mobile-nav button {
  display: flex; justify-content: space-between; align-items: center;
  background: #f1f4f7; color: #111; border: none; padding: 14px 16px;
  width: 100%; font-size: 15px; cursor: pointer; text-decoration: none;
}
.toggle-icon { font-size: 18px; }
.mobile-nav .mobile-submenu { display: none; flex-direction: column; background: #fff; }
.mobile-submenu.show { display: flex; }
.mobile-submenu a {
  padding: 12px 20px; font-size: 14px; color: #333; text-decoration: none; border-bottom: 1px solid #eee; background: #fff;
}
.mobile-nav-item.open .toggle-icon { content: '−'; }

/* ===== Breakpoints chung ===== */
@media (max-width: 768px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .language { display: none; }
  .header { flex-direction: column; align-items: flex-start; }
  .top-bar-right { justify-content: space-between; width: 100%; }
  .header-right { width: 100%; align-items: flex-start; }
}