/* Shared design tokens + site navigation bar, loaded by every page (landing and modules).
   Palette is the single source of truth: Tailwind reads these vars via @theme inline (tailwind/input.css). */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap&subset=vietnamese");

:root{
  --navy-950:#060e1c;
  --navy-900:#0a1729;
  --navy-800:#10223d;
  --navy-700:#1e3a5f;
  --navy-600:#2a5080;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --sky-400:#38bdf8;
  --sky-300:#7dd3fc;
  --surface:#f4f7fb;
  --card:#ffffff;
  --line:#e2e8f0;
  --ink:#0f172a;
  --muted:#475569;
  --danger:#dc2626;
  --font-head:"Lexend","Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- site bar (shared across modules) ---------- */
.site-bar{
  position:sticky;top:0;z-index:50;
  background:rgba(6,14,28,.92);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(125,211,252,.12);
  font-family:var(--font-body);
}
.site-bar .in{max-width:1120px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:16px}
.site-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.site-brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-600),var(--sky-400));color:#fff}
.site-links{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.site-links::-webkit-scrollbar{display:none}
.site-links a{color:#cbd5e1;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:background-color .2s,color .2s}
.site-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.site-links a[aria-current="page"]{background:rgba(56,189,248,.14);color:var(--sky-300)}
.site-links a:focus-visible,.site-brand:focus-visible{outline:2px solid var(--sky-400);outline-offset:2px}
@media (max-width:640px){
  .site-brand .txt{display:none}
  .site-links a{font-size:13px;padding:8px 9px}
  .site-links a.home{display:none}
}