/* nav-sync.css — đồng bộ header toàn site 5S Media — 2026-07 */

/* 1. Compact menu 1300–1499px (index.html chuẩn) */
@media (min-width:1300px) and (max-width:1499px){
  .menu{ gap:0; }
  .menu-link{ padding:9px 4px; font-size:13px; }
  .menu-link .mlink-ic{ display:none; }
}

/* 2. Fix sub-pages dùng position:absolute cho menu ở 1300px+ */
@media (min-width:1300px){
  .menu{ position:static !important; transform:none !important;
         flex:1; justify-content:center; margin:0; }
}

/* 3. Fix giai-phap pages: old .nav .bar (0-2-0) ghi đè new .bar (0-1-0)
      Rule này có specificity 0-3-1 — thắng cả hai */
header.nav .nav-shell .bar{ padding:9px; max-width:none; margin:0; }

/* 4. Xổ menu (mega panel): nền TRẮNG ĐẶC — chống hero bleed-through làm chữ chìm
      (feedback 5S 02/07: "background đậm hơn để thấy được text, không bị chìm").
      header.nav .mega = 0-2-0 thắng .mega inline (0-1-0). Áp đồng bộ toàn site. */
header.nav .mega{
  background:#ffffff !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid rgba(20,23,51,.10) !important;
  box-shadow:0 30px 70px -24px rgba(31,38,90,.55), 0 2px 8px -2px rgba(31,38,90,.18) !important;
}
/* nhãn nhóm + item chữ đủ đậm để đọc rõ trên nền trắng đặc */
header.nav .mega .mega-head b{ color:#5a4b78 !important; }
header.nav .mega .mega-list a{ color:#1a1d2e !important; }
header.nav .mega .mega-list a:hover{ color:#137EE8 !important; }

/* 5. Solid header cho trang có hero SÁNG (body.page-solidnav) — luôn nền trắng đặc bất kể scroll
      Specificity body.page-solidnav header.nav = (0,2,2) thắng header.nav:not(.scrolled) = (0,2,1)
      Áp: dich-vu.html, giai-phap.html (light-gradient hero). */
body.page-solidnav header.nav{
  background-color:#fff !important;
  box-shadow:0 1px 16px -8px rgba(20,23,51,.28) !important;
}
body.page-solidnav header.nav .nav-shell{ padding-top:7px; padding-bottom:7px; }
body.page-solidnav header.nav .bar{
  background:transparent !important; border-color:transparent !important;
  border-radius:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.page-solidnav header.nav .logo-img{ filter:none !important; height:38px; }
body.page-solidnav header.nav .menu-link{ color:var(--tx-mut) !important; background:transparent !important; }
body.page-solidnav header.nav .menu-link:hover,
body.page-solidnav header.nav .menu-item.open .menu-link,
body.page-solidnav header.nav .menu-link.active{ color:var(--blue) !important; background:rgba(19,126,232,.08) !important; }
body.page-solidnav header.nav .icon-btn{ color:var(--ink) !important; background:rgba(20,23,51,.05) !important; border-color:var(--g-brd-2) !important; }
body.page-solidnav header.nav .icon-btn:hover{ background:rgba(20,23,51,.1) !important; }
body.page-solidnav header.nav .burger{ background:rgba(20,23,51,.05) !important; border-color:var(--g-brd-2) !important; }
body.page-solidnav header.nav .burger span,
body.page-solidnav header.nav .burger span::before,
body.page-solidnav header.nav .burger span::after{ background:var(--ink) !important; }