/* 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; }

/* 6. Feedback 3 — LỖI ACTIVE MENU (padding): ở breakpoint 1300–1499px, .menu-link
      bị ép padding:9px 4px (để 6 mục vừa 1 hàng). 4px ngang quá ít nên pill item
      ĐANG XEM bị TEXT DÍNH SÁT VIỀN.
      Cách cũ (margin âm bù bề rộng) làm 2 pill cạnh nhau ĐÈ NHAU khi hover mục kế
      item active -> BỎ. Nay dùng PADDING THẬT (pill = padding-box, không thể đè):
      đo tại 1300px menu rộng ~559px, chữ ~469px => tối đa ~7px/bên nếu áp đều.
      -> mục thường 6px; mục active 10px (cố định, chỉ 1, vẫn còn dư chỗ). Không
      margin âm nên KHÔNG đè; không đổi padding khi hover nên KHÔNG giật. */
@media (min-width:1300px) and (max-width:1499px){
  header.nav .menu-link{ padding-inline:6px !important; }
  header.nav .menu-link.active{ padding-inline:10px !important; }
}