/* =========================================================
   HEADER kiểu bản Home (.hdr)
   - Trong suốt trên tab video, đặc + mờ nền khi sang tab khác (.scrolled)
   - Gạch chân chạy khi rê / mục đang xem
   - Điện thoại: menu tròn mở rộng từ nút ☰
   Chiều cao = --hdr (do main.js tính) để các tab bên dưới căn đúng.
   ========================================================= */
.hdr {
  --hv-cyan: #29e3ff; --hv-tech: "Chakra Petch", "Saira Semi Condensed", sans-serif;
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr, 75px); min-height: 56px;
  display: flex; align-items: center; gap: 24px; padding: 0 clamp(16px, 4vw, 56px);
  color: #fff; transition: background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled { background: rgba(11,14,23,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,.12); }
.hdr__logo { flex: none; display: flex; align-items: center; }
.hdr__logo img { height: clamp(28px, 2.6vw, 42px); width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.hdr__nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); margin-left: auto; font: 500 14px/1 var(--hv-tech); letter-spacing: .12em; text-transform: uppercase; }
.hdr__nav a { position: relative; padding: 8px 0; color: #cfd6ee; white-space: nowrap; transition: color .2s; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c-key, #f76821); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.77,0,.18,1); }
.hdr__nav a:hover, .hdr__nav a.is-active { color: #fff; }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.hdr__nav-cta { display: none; }
.hdr__btn {
  flex: none; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
  padding: 10px 20px; font: 700 13px/1 var(--hv-tech); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--c-key, #f76821); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color .3s, transform .2s;
}
.hdr__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: translateX(-101%) skewX(-20deg); transition: transform .45s cubic-bezier(.77,0,.18,1); }
.hdr__btn:hover { color: var(--c-key, #f76821); }
.hdr__btn:hover::before { transform: none; }
.hdr__btn:active { transform: scale(.96); }
.hdr__burger { display: none; position: relative; z-index: 2; width: 40px; height: 40px; margin-left: auto; }
.hdr__burger span { position: absolute; left: 8px; right: 8px; height: 2px; background: #fff; transition: .3s; }
.hdr__burger span:nth-child(1) { top: 13px; } .hdr__burger span:nth-child(2) { top: 19px; right: 16px; } .hdr__burger span:nth-child(3) { top: 25px; }
.nav-open .hdr__burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-open .hdr__burger span:nth-child(2) { opacity: 0; }
.nav-open .hdr__burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 1023px), (orientation: portrait) {
  .hdr__btn { display: none; }
  .hdr__burger { display: block; }
  .hdr__nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 26px; margin: 0;
    font-size: 22px; background: rgba(11,14,23,.97);
    clip-path: circle(0 at calc(100% - 36px) 34px); transition: clip-path .6s cubic-bezier(.77,0,.18,1); visibility: hidden;
  }
  .nav-open .hdr__nav { clip-path: circle(150% at calc(100% - 36px) 34px); visibility: visible; }
  .hdr__nav-cta { display: inline-flex; margin-top: 10px; padding: 14px 30px !important; background: var(--c-key, #f76821); color: #fff !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  .hdr__nav-cta::after { display: none; }
  .nav-open .hdr__nav a { animation: navIn .5s cubic-bezier(.16,1,.3,1) both; }
  .nav-open .hdr__nav a:nth-child(2) { animation-delay: .05s; } .nav-open .hdr__nav a:nth-child(3) { animation-delay: .1s; }
  .nav-open .hdr__nav a:nth-child(4) { animation-delay: .15s; } .nav-open .hdr__nav a:nth-child(5) { animation-delay: .2s; } .nav-open .hdr__nav a:nth-child(6) { animation-delay: .25s; }
}
@keyframes navIn { from { opacity: 0; translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .hdr__nav { transition: none; } .nav-open .hdr__nav a { animation: none; } }

/* gỡ style .nav-link cũ của style.css cho menu mới */
.hdr__nav a.nav-link { position: relative; left: auto; top: auto; height: auto; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #cfd6ee; display: inline-block; }
.hdr__nav a.nav-link:hover, .hdr__nav a.nav-link.is-active { color: #fff; }
.hdr__nav a.nav-link::after { left: 0; right: auto; bottom: 0; top: auto; width: 100%; height: 2px; background: var(--c-key, #f76821); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.77,0,.18,1); }
.hdr__nav a.nav-link:hover::after, .hdr__nav a.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1023px), (orientation: portrait) {
  /* backdrop-filter làm menu fixed bị kẹt trong header -> bỏ khi mở menu */
  .nav-open .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-bottom-color: transparent; }
  .nav-open .hdr__logo { position: relative; z-index: 2; }
}