/* ═══════════════════════════════════════════════════════════════
   HEADBAR 2 LỚP DÙNG CHUNG (chuẩn Diatalent) - tách từ các trang tĩnh
   để trang con (du-an-detail, privacy...) đồng nhất mà khỏi nhân bản CSS.
   Cặp với: auth-nav.js (dt-subnav + dropdown Diatalentor + trạng thái đăng nhập)
   + nav-sheet.css/js (menu mobile). Headbar LUÔN nền tối sapphire mọi theme.
   ═══════════════════════════════════════════════════════════════ */
nav#topnav{position:sticky;top:0;z-index:40;background:#FFFFFF;padding-top:env(safe-area-inset-top);transition:box-shadow .28s var(--ease)}
nav#topnav.scrolled{box-shadow:0 14px 34px -18px rgba(2,12,30,.6)}
.nav-util{background:#FFFFFF;overflow:hidden;max-height:56px;transition:max-height .25s ease}
.nav-util .wrap{display:flex;align-items:center;justify-content:flex-end;height:40px;max-width:1280px;margin:0 auto;padding:0 40px}
.nav-util .util-right{display:flex;align-items:center;gap:10px}
.nav-util a{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:12px;color:rgba(0,0,0,.6);white-space:nowrap;text-decoration:none;padding:8px 12px;border-radius:6px;transition:color .15s,background .15s}
.nav-util a:hover{color:#000;background:rgba(0,0,0,.05)}
.nav-util a.nav-reg{font-weight:700;color:#EA580C;background:transparent;border:2px solid rgba(251,146,60,.6);border-radius:6px;padding:6px 14px}
.nav-util a.nav-reg:hover{background:#F97316;border-color:#F97316;color:#FFFFFF}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 8px;font-size:13px;font-weight:700;line-height:1;background:transparent;border:none;border-radius:6px;cursor:pointer;color:rgba(0,0,0,.6);transition:background .15s,color .15s}
.nav-toggle:hover{background:rgba(0,0,0,.05);color:#000}
.lang-btn{border:1px solid rgba(0,0,0,.18)}
.nav-main{background:#FFFFFF;position:relative}
.nav-main .wrap{display:flex;align-items:center;gap:16px;height:73px;position:relative;max-width:1280px;margin:0 auto;padding:0 40px}
.brand{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.4px;display:inline-flex;align-items:center;gap:7px;color:#151515;text-decoration:none}
.brand .d{filter:drop-shadow(0 2px 8px rgba(96,178,232,.55));transition:transform .3s var(--ease-back),filter .3s}
.brand:hover .d{transform:rotate(-6deg) scale(1.1);filter:drop-shadow(0 4px 14px rgba(143,210,247,.85))}
.nav-menu{display:flex;align-items:center;gap:6px;flex:1;margin-left:22px}
.nav-menu a:not(.btn){position:relative;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:17.6px;letter-spacing:.05em;color:#505050;padding:9px 12px;border-radius:8px;white-space:nowrap;transition:color .15s;text-decoration:none}
.nav-menu a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2.5px;border-radius:99px;background:linear-gradient(90deg,#5BB3F0,#3FD9A0);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.nav-menu a:not(.btn):hover{color:#151515}
.nav-menu a:not(.btn):hover::after{transform:scaleX(.45)}
.nav-menu a:not(.btn).active{color:#151515;font-weight:700}
.nav-menu a:not(.btn).active::after{transform:scaleX(1)}
.nav-side{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:16px;border-left:1px solid #ECECEC}
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:14px;flex:none}
.nav-main .nav-actions .btn.primary{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:0;background:#151515;color:#FFFFFF;border-radius:8px;padding:10px 20px;box-shadow:none;transition:background .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.nav-main .nav-actions .btn.primary:hover{background:#2a2a2a;transform:none;box-shadow:none}
@media (max-width:560px){ .nav-util .wrap,.nav-main .wrap{padding:0 16px} .nav-util .util-right{gap:7px} .nav-util a{padding:7px 10px} }
nav#topnav.scrolled .nav-util{max-height:0}

/* ═══ ĐỒNG BỘ NỀN ĐẦU TRANG: sapphire TỐI như trang chủ (Mercury) - áp mọi theme ═══ */
nav#topnav, nav#topnav .nav-util, nav#topnav .nav-main{background:#0C1A31}
.brand{color:#EAF1FB}
.nav-util a{color:rgba(190,203,220,.72)}
.nav-util a:hover{color:#EAF1FB;background:rgba(150,195,235,.08)}
.nav-util a.nav-reg{color:#EAF1FB;background:transparent;border:1px solid rgba(150,195,235,.12)}
.nav-util a.nav-reg:hover{color:#EAF1FB;background:rgba(150,195,235,.08);border-color:rgba(190,203,220,.72)}
.nav-toggle{color:#EAF1FB}
.nav-toggle:hover{background:rgba(150,195,235,.08);color:#EAF1FB}
.lang-btn{color:rgba(190,203,220,.72);border:1px solid rgba(150,195,235,.12)}
.lang-btn:hover{color:#EAF1FB}
.nav-burger{color:#EAF1FB;border-color:rgba(150,195,235,.2)}
.nav-menu a:not(.btn){color:rgba(190,203,220,.72)}
.nav-menu a:not(.btn):hover{color:#EAF1FB}
.nav-menu a:not(.btn).active{color:#EAF1FB}
.nav-side{border-left-color:rgba(150,195,235,.12)}
.nav-main .nav-actions .btn.primary{background:#1A63B0;color:#FFFFFF}
.nav-main .nav-actions .btn.primary:hover{background:#1A63B0;opacity:.92}
@media (max-width:860px){
  nav#topnav .nav-menu{background:#0C1A31;border-bottom-color:rgba(150,195,235,.12)}
  .nav-side{border-top-color:rgba(150,195,235,.12)}
}