/* ============================================================
.site-header Shieldix — CSS riêng cho thanh menu trên cùng
   Tách từ assets/site-v2.css để trang chủ dùng chung được
   partials/nav-v2.html. Nạp cả site-v2.css vào trang chủ thì
   reset toàn cục của nó (* { margin:0 }, h1-h4, p, section...)
.site-header sẽ phá bố cục Tailwind,
.site-header nên chỉ lấy đúng phần header.

   File này KHÔNG có reset và KHÔNG đụng gì ngoài .site-header.
   Sửa menu thì sửa ở partials/nav-v2.html,
.site-header sửa hình thức thì sửa
   ở đây VÀ ở assets/site-v2.css (hai nơi,
.site-header đến khi gộp được).
   ============================================================ */

/* Biến màu khai trong phạm vi .site-header chứ không đặt ở :root,
.site-header để trang nào
   nạp file này cũng chạy đúng mà không ghi đè bảng màu sẵn có của trang. */
.site-header {
  --line: #1A2D47;
  --line-strong: #2A415C;
  --text: #E2E8F0;
  --muted: #94A3B8;
  --cyan: #00D4FF;
  --surface: #0D1B2A;
  --bg-alt: #081221;
  --radius: 10px;
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .5);
  --grad: linear-gradient(100deg, #00D4FF 0%, #3BA3DB 55%, #5FC5C5 100%);
}

/* Trang chủ nạp Tailwind, mà Tailwind cũng có utility .container với hành vi
.site-header khác hẳn (max-width đổi theo breakpoint,
.site-header không canh giữa,
.site-header không padding).
   Khai lại trong phạm vi header; hai lớp nên thắng utility cùng tên. */
.site-header .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ---------- Header ---------- */
/* site-v2.css có quy tắc toàn cục a:hover { text-decoration: underline }.
.site-header Các mục menu và dropdown đã tự tắt,
.site-header riêng liên kết logo thì chưa nên rê chuột
   vào chữ SHIELDIX là hiện gạch chân. Tắt cho toàn bộ header,
.site-header trong này không
   có chỗ nào cần gạch chân. Hai lớp (0,
.site-header 2,
.site-header 1) nên thắng a:hover (0,
.site-header 1,
.site-header 1). */
.site-header a:hover { text-decoration: none; }
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(5, 11, 20, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.site-header .nav-wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
/* Slogan dưới chữ SHIELDIX. Cỡ chữ để ở đây (trước đây nằm trong thuộc tính
   style của thẻ) để khổ hẹp còn thu nhỏ lại được cho vừa thanh header. */
.site-header .brand img { height: 48px; width: auto; }
.site-header .nav-links { display: flex; gap: 26px; align-items: center; list-style: none; }
.site-header .nav-links > li { position: relative; }
.site-header .nav-links a { color: var(--text); font-weight: 500; font-size: 15px; white-space: nowrap; }
.site-header .nav-links a:hover { color: var(--cyan); text-decoration: none; }
.site-header .nav-links a.active { color: var(--cyan); font-weight: 700; }
.site-header .spacer { flex: 1; }
.site-header .nav-cta { display: flex; gap: 12px; align-items: center; }

/* Nút đổi ngôn ngữ. Bỏ khung nền bao ngoài: header đã có logo + tagline,
.site-header 5 mục nav và 2 nút,
.site-header thêm một hộp nữa là quá dày. */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.site-header .lang-btn { padding: 4px 9px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; background: none; border: 0; color: #6E8098;
  transition: background .2s, color .2s; }
.site-header .lang-btn:hover { color: var(--text); }
.site-header .lang-btn.active { background: rgba(0, 212, 255, .12); color: var(--cyan); }
.site-header .lang-switch::after { content: ""; width: 1px; height: 18px; background: var(--line); margin: 0 4px 0 10px; }

/* "Đăng nhập" hạ xuống dạng link chữ, chỉ còn "Bắt đầu ngay" là nút đặc */
.site-header .btn-login { white-space: nowrap; padding: 9px 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.site-header .btn-login:hover { color: var(--cyan); text-decoration: none; }
.site-header .btn-start { white-space: nowrap; padding: 10px 22px; border-radius: 99px; background: var(--grad); color: #03101C; font-size: 14px; font-weight: 700; }
.site-header .btn-start:hover { filter: brightness(1.1); text-decoration: none; }

/* Dropdown */
.site-header .dropdown-menu {
  display: none; position: absolute; top: 100%; left: -16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 300px; z-index: 60;
}
.site-header .nav-links li:hover .dropdown-menu,
.site-header .nav-links li:focus-within .dropdown-menu { display: block; }
.site-header .dropdown-menu a { display: block; padding: 9px 14px; border-radius: 6px; font-size: 14px; }
.site-header .dropdown-menu a:hover { background: var(--bg-alt); text-decoration: none; }
/* Mục đang mở: .nav-links a.active ở trên chỉ đổi màu chữ trực tiếp, mà chữ
   chính của mục con nằm trong <strong> có màu riêng, nên phải tô thêm. */
.site-header .dropdown-menu a.active { background: rgba(0, 212, 255, .10); }
.site-header .dropdown-menu a.active strong { color: var(--cyan); }
.site-header .dropdown-menu a strong { display: block; color: var(--text); }
.site-header .dropdown-menu a span { font-size: 12.5px; color: var(--muted); }

/* Mobile nav */
.site-header .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-header .nav-toggle svg { width: 26px; height: 26px; stroke: var(--text); }

/* Ba vạch gập lại thành dấu X khi menu mở. transform-box: fill-box để mỗi vạch
   xoay quanh tâm của chính nó, không phải gốc toạ độ của cả khung SVG. */
.site-header .nav-toggle path { transform-box: fill-box; transform-origin: center;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .14s ease; }
.site-header .nav-toggle[aria-expanded="true"] .vach-tren { transform: translateY(6px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] .vach-giua { opacity: 0; transform: scaleX(.4); }
.site-header .nav-toggle[aria-expanded="true"] .vach-duoi { transform: translateY(-6px) rotate(-45deg); }

/* Hai nút bản sao trong menu mobile: khổ rộng đã có bản gốc bên phải header */
.site-header .nav-mobile-cta { display: none; }
/* Nền mờ nằm ngoài <header> nên không lấy được tiền tố .site-header.
   Chỉ dùng cho menu mobile; khổ rộng tắt hẳn. */
.nav-backdrop { display: none; }

/* Người bật "giảm chuyển động" thì đóng/mở tức thì, không trượt */
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links, .site-header .nav-links.open, .nav-backdrop { transition: none; }
}

/* nav 5 mục + nút VI/EN + 2 nút CTA + logo có tagline cần >=1136px (đo thực
   tế), dưới mức này chuyển menu mobile */
@media (max-width: 1160px) {
  /* Menu mobile là bảng trượt bên phải chứ không phủ kín bề ngang: chừa lại
     một dải nội dung bên trái để người dùng thấy mình vẫn đang ở trang cũ và
     bấm ra đó là đóng. */
  /* Dùng absolute chứ không fixed: .site-header có backdrop-filter nên nó là
     containing block của mọi con position:fixed, đặt fixed vào đây thì
     top/right/bottom tính theo khung header cao 72px, panel bị bóp còn 0.
     Header là sticky nên absolute vẫn dính theo màn hình khi cuộn.
     Panel luôn nằm trong bố cục (không display:none) để trượt ra/vào được;
     lúc đóng thì visibility:hidden cho khỏi bắt phím Tab và chuột. */
.site-header .nav-links { display: flex; position: absolute; top: 72px; left: 0; right: auto;
    width: min(320px, 78vw); height: calc(100vh - 72px); height: calc(100dvh - 72px);
    background: var(--surface);
    flex-direction: column; align-items: stretch; gap: 0; padding: 14px 20px 24px;
    border-right: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 60;
    /* menu (kèm 10 mục dropdown) cao hơn màn hình; không có 2 dòng này thì
       Pháp lý / Blog / Liên hệ ở cuối danh sách không bấm tới được */
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    /* visibility đổi ngay khi mở, nhưng lúc đóng phải chờ trượt xong mới ẩn */
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .24s; }
.site-header .nav-links.open { transform: none; visibility: visible;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
  /* z-index 45: trên nội dung trang, dưới header (z-index 50) để thanh header
     và panel menu bên trong nó vẫn nổi lên trên lớp mờ. */
  .nav-backdrop { display: block; position: fixed; inset: 72px 0 0; z-index: 45;
    background: rgba(5, 11, 20, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s linear .24s; }
  body.nav-dang-mo .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .24s ease; }
  /* Nút "lên đầu trang" có z-index 90 nên nổi cả trên panel menu; mở menu thì
     giấu đi cho gọn (trang đang khoá cuộn, nút cũng chẳng để làm gì). */
  body.nav-dang-mo #back-to-top { display: none; }
  /* Khoá cuộn nền để ngón tay vuốt trong menu không kéo trang phía sau */
  body.nav-dang-mo { overflow: hidden; }
.site-header .nav-links a { display: block; padding: 11px 4px; font-size: 16px; }
.site-header .dropdown-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; background: transparent; }
.site-header .nav-toggle { display: block; }
  /* Chỉ giấu bản trên thanh ngang; bản sao trong menu vẫn hiện */
  .site-header .nav-cta .btn-login { display: none; }

  /* Hai nút ghim ở đáy panel: danh sách 10 mục dài hơn màn hình, để trôi theo
     nội dung thì phải cuộn xuống mới thấy nút. sticky giữ chúng luôn nằm
     trong tầm mắt, nền đặc để chữ bên dưới không lộ qua. */
  /* Chọn qua .nav-links > để thắng quy tắc .nav-links > li { position: relative }
     ở trên, nếu không position:sticky bị ghi đè và nút vẫn trôi theo danh sách. */
  .site-header .nav-links > .nav-mobile-cta { display: flex; flex-direction: column; gap: 10px;
    position: sticky; bottom: -24px; margin-top: auto; padding: 18px 0 24px;
    border-top: 1px solid var(--line); background: var(--surface); }
  .site-header .nav-mobile-cta .btn-login { display: block; text-align: center;
    padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 99px;
    color: var(--text); font-size: 15px; font-weight: 600; }
  /* Khoảng 640–1160px thanh ngang vẫn còn nút "Bắt đầu ngay", bản sao trong
     menu để dành cho khổ hẹp hơn (bật ở @media 640 bên dưới). */
  .site-header .nav-mobile-cta .btn-start { display: none; text-align: center;
    padding: 12px 16px; border-radius: 99px; font-size: 15px; }
}

/* Thanh header cần 593px mới xếp đủ logo (218) + hamburger (42) + VI/EN (85)
   + "Bắt đầu ngay" (133) + khoảng cách. Dưới mức đó phải bớt dần, nếu không
   cả trang bị kéo trượt ngang trên điện thoại. */
@media (max-width: 640px) {
  .site-header .nav-cta .btn-start { display: none; }
  .site-header .nav-mobile-cta .btn-start { display: block; }
}

/* Khổ điện thoại: logo là một ảnh trọn bộ nên chỗ thiếu bù bằng cách hạ chiều
   cao logo, bóp khoảng cách và bỏ vạch ngăn cạnh nút VI/EN. */
@media (max-width: 440px) {
  .site-header .container { padding: 0 14px; }
  .site-header .nav-wrap { gap: 10px; }
  .site-header .brand img { height: 38px; }
  .site-header .nav-toggle { padding: 8px 2px; }
  .site-header .lang-switch::after { display: none; }
  .site-header .lang-btn { padding: 4px 7px; }
}

/* Máy hẹp nhất (iPhone SE 320px) phải hạ logo thêm một nấc nữa mới đủ chỗ */
@media (max-width: 360px) {
  .site-header .brand img { height: 33px; }
}

/* ============================================================
   Nút liên hệ nổi (partials/nut-lien-he-v2.html)
   Gọi hotline + chat Zalo, cố định ở góc dưới bên phải mọi trang.
   Để trong file này chứ không phải site-v2.css vì header-v2.css là
   file CSS duy nhất mà cả 59 trang (kể cả blog và trang pháp lý)
   đều nạp — giống lý do partials/nav-v2.html nằm chung ở đây.
   ============================================================ */

/* Biến màu khai trong phạm vi .nut-noi, không đặt ở :root, để không
   ghi đè bảng màu riêng của blog và các trang pháp lý. */
.nut-noi {
  --nn-zalo: #0068FF;
  --nn-goi: #00A86B;
  --nn-vien: rgba(255, 255, 255, .16);
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

.nut-noi-nut {
  display: flex; align-items: center; justify-content: flex-end;
  height: 52px; border-radius: 26px; padding: 0 14px;
  color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 600;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif; line-height: 1;
  border: 1px solid var(--nn-vien); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nut-noi-nut:hover { text-decoration: none; color: #fff; transform: translateY(-2px); }
.nut-noi-nut:focus-visible { outline: 3px solid #00D4FF; outline-offset: 3px; }
.nut-noi-zalo { background: var(--nn-zalo); }
.nut-noi-zalo:hover { background: #0057D9; box-shadow: 0 8px 24px rgba(0, 104, 255, .45); }
.nut-noi-goi { background: var(--nn-goi); }
.nut-noi-goi:hover { background: #009159; box-shadow: 0 8px 24px rgba(0, 168, 107, .45); }

/* Ô icon rộng 26px theo icon Zalo (icon điện thoại 24px tự canh giữa trong đó) */
.nut-noi-hinh { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; }
.nut-noi-hinh svg { display: block; }

/* Lúc nghỉ nhãn bị bóp về 0 nhưng vẫn nằm trong cây trợ năng (không dùng
   display:none / visibility:hidden), nên trình đọc màn hình đọc được tên nút. */
.nut-noi-nhan {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .25s ease, opacity .2s ease, margin-right .25s ease;
  margin-right: 0;
}
/* Chỉ mở nhãn trên máy có chuột thật. Máy cảm ứng không có trạng thái hover:
   chạm vào là đi luôn, mở ra chỉ làm nút giật một nhịp trước khi chuyển trang. */
@media (hover: hover) and (pointer: fine) {
  .nut-noi-nut:hover .nut-noi-nhan,
  .nut-noi-nut:focus-visible .nut-noi-nhan {
    max-width: 180px; opacity: 1; margin-right: 10px;
  }
}

/* Nút "lên đầu trang" (assets/site-v2.css, 12 trang có) mặc định ở
   bottom:32px right:24px, đúng chỗ ngăn xếp này đứng. Đẩy nó lên trên:
   2 nút 52px + khe 12px + đáy 24px = 140px, cộng khoảng thở thành 152px.
   Nút đó rộng 48px còn nút liên hệ rộng 52px, cùng right:24px thì lệch trục
   dọc 2px, nên đẩy thêm 2px cho thẳng hàng.
   Khai ở đây được vì header-v2.css luôn nạp SAU site-v2.css. */
#back-to-top { bottom: 152px; right: 26px; }

@media (max-width: 560px) {
  .nut-noi { right: 16px; bottom: 16px; gap: 10px; }
  .nut-noi-nut { height: 48px; border-radius: 24px; padding: 0 12px; }
  /* Lặp lại quy tắc của site-v2.css cho khổ này rồi cộng chiều cao ngăn xếp:
     2 nút 48px + khe 10px + đáy 16px = 122px, làm tròn lên 134px. Khổ này nút
     liên hệ cũng 48px nên cùng right:16px là đã thẳng trục. */
  #back-to-top { bottom: 134px; right: 16px; }
}

/* Mở menu mobile là khoá cuộn trang, ngăn xếp nút che mất phần cuối
   danh sách menu nên giấu đi cho gọn — cùng cách xử lý với #back-to-top. */
@media (max-width: 1160px) {
  body.nav-dang-mo .nut-noi { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nut-noi-nut, .nut-noi-nhan { transition: none; }
}