/* ============================================================
   BAIKA · Mission Control design system (shared)
   Charcoal #131A26 · cam đất #E8843B + vàng #F2A65A · kem #F4EFE6
   ============================================================ */
:root{
 --bg-0:#0C1119;--bg-1:#131A26;--bg-2:#1B2433;--bg-3:#222C3D;
 --ink:#F4EFE6;--ink-soft:#C9C2B5;--ink-mute:#857F73;
 --orange:#E8843B;--gold:#F2A65A;--fire:linear-gradient(135deg,#E8843B,#F2A65A);
 --on-fire:#1A0F06;
 --glow:rgba(232,132,59,.4);--glow-soft:rgba(232,132,59,.16);
 --line:rgba(244,239,230,.1);--line-2:rgba(244,239,230,.2);--line-soft:rgba(244,239,230,.05);
 --glass:rgba(27,36,51,.58);--glass-2:rgba(34,44,61,.78);
 --success:#6FBF8E;--warn:#F2A65A;--danger:#E2674B;
 --r:18px;--r-sm:12px;--r-lg:26px;
 --display:"Chakra Petch",sans-serif;--body:"Inter",sans-serif;--mono:"JetBrains Mono",monospace;
 --shadow:0 28px 70px -32px rgba(0,0,0,.7);--shadow-glow:0 18px 50px -22px rgba(232,132,59,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;background:var(--bg-1)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:.01em;color:var(--ink)}

/* ---------- depth layers (fixed background stack) ---------- */
.bg-base{position:fixed;inset:0;z-index:-5;background:
 radial-gradient(1200px 700px at 82% -6%,rgba(232,132,59,.22),transparent 58%),
 radial-gradient(900px 620px at 4% 8%,rgba(242,166,90,.12),transparent 56%),
 radial-gradient(800px 800px at 60% 110%,rgba(232,132,59,.1),transparent 60%),
 linear-gradient(180deg,var(--bg-0),var(--bg-1) 45%,var(--bg-0))}
.bg-grid{position:fixed;inset:0;z-index:-4;opacity:.5;pointer-events:none;
 background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
 background-size:54px 54px;
 mask-image:radial-gradient(130% 110% at 50% 0%,#000 28%,transparent 84%);
 -webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 28%,transparent 84%)}
.orb{position:fixed;border-radius:50%;filter:blur(70px);z-index:-3;pointer-events:none;opacity:.5;will-change:transform}
.orb.a{width:520px;height:520px;background:radial-gradient(circle,rgba(232,132,59,.5),transparent 68%);top:-120px;right:-80px;animation:drift 22s ease-in-out infinite}
.orb.b{width:440px;height:440px;background:radial-gradient(circle,rgba(242,166,90,.34),transparent 68%);bottom:6%;left:-120px;animation:drift 28s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-46px)}}
#fx{position:fixed;inset:0;z-index:-2;pointer-events:none}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 26px;position:relative;z-index:1}
section{padding:70px 0;position:relative}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);max-width:1220px;margin:0 auto}

/* ---------- type accents ---------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--fire);display:inline-block}
.grad{background:var(--fire);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);margin:16px 0 14px;font-weight:600}
.sec-head p{color:var(--ink-soft);font-size:16px}

/* ---------- glass surface ---------- */
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r)}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;border:none;cursor:pointer;border-radius:11px;padding:11px 18px;transition:transform .15s,box-shadow .25s,background .2s,border-color .2s;display:inline-flex;align-items:center;gap:8px;justify-content:center;position:relative}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-primary{background:var(--fire);color:var(--on-fire);font-weight:700;box-shadow:0 12px 30px -12px var(--glow)}
.btn-primary:hover{box-shadow:0 18px 40px -12px var(--glow),0 0 0 1px rgba(255,255,255,.2) inset}
.btn-ghost{background:rgba(244,239,230,.04);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(244,239,230,.09);border-color:var(--gold)}
.btn-lg{padding:15px 26px;font-size:14px;border-radius:13px}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
.spinner{width:15px;height:15px;border:2px solid rgba(26,15,6,.3);border-top-color:var(--on-fire);border-radius:50%;animation:spin .7s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.is-loading .spinner{display:inline-block}

/* ---------- form fields ---------- */
.field{margin-bottom:17px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:500;color:var(--ink-soft);margin-bottom:7px;text-transform:uppercase}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:14.5px;color:var(--ink);padding:12px 14px;border-radius:11px;border:1px solid var(--line-2);background:rgba(12,17,25,.5);transition:.2s;outline:none}
.field input::placeholder{color:var(--ink-mute)}
.field select option{background:var(--bg-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,132,59,.16)}
.field.invalid input,.field.invalid select{border-color:var(--danger);box-shadow:0 0 0 3px rgba(226,103,75,.14)}
.field .err{font-size:12px;color:var(--danger);margin-top:5px;display:none}
.field.invalid .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:99px;border:1px solid var(--line-2);background:rgba(244,239,230,.04);cursor:pointer;transition:.15s;user-select:none;color:var(--ink-soft)}
.chip:hover{border-color:var(--gold)}
.chip.sel{background:var(--fire);color:var(--on-fire);font-weight:500;border-color:transparent}
.field.invalid .chips{outline:1.5px solid rgba(226,103,75,.4);outline-offset:4px;border-radius:8px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--ink-mute);margin:8px 0 20px}
.consent input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--orange)}

/* ---------- toasts ---------- */
.toasts{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{min-width:260px;max-width:360px;padding:14px 16px;border-radius:13px;background:var(--glass-2);backdrop-filter:blur(20px);border:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;gap:11px;align-items:center;animation:fade .3s;font-size:13.5px;font-weight:500}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- reveal (scroll) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- pills / flags (shared with admin) ---------- */
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:4px 11px;border-radius:99px;font-weight:500}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}


/* ---------------------------------
   LOGO INTRO ANIMATIONS
--------------------------------- */
.brand .mark, .sb-brand .mark {
  background: transparent !important;
  box-shadow: none !important;
}
.brand .mark::after { display: none !important; }

.baika-brand-logo { perspective: 1000px; }
.baika-brand-logo .hex {
  transform-origin: center;
  animation: hexIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.baika-brand-logo .hex-1 { animation-delay: 0.1s; }
.baika-brand-logo .hex-2 { animation-delay: 0.2s; }
.baika-brand-logo .hex-3 { animation-delay: 0.3s; }
.baika-brand-logo .hex-4 { animation-delay: 0.4s; }
@keyframes hexIn {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.baika-brand-logo .loop {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawLoop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.baika-brand-logo .loop-top { animation-delay: 0.4s; }
.baika-brand-logo .loop-bottom { animation-delay: 0.6s; }
@keyframes drawLoop { to { stroke-dashoffset: 0; } }
.baika-brand-logo .highlight {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLoop 1.5s ease forwards;
}
.baika-brand-logo .hl-1 { animation-delay: 0.8s; }
.baika-brand-logo .hl-2 { animation-delay: 1.0s; }
.baika-brand-logo .logo-sphere {
  transform-origin: 48px 52px;
  animation: spherePop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both, spherePulse 3s ease-in-out 1.6s infinite alternate;
}
.baika-brand-logo .sphere-glare {
  transform-origin: 48px 52px;
  animation: spherePop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}
@keyframes spherePop {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes spherePulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8)); }
}
.baika-brand-logo:hover .logo-sphere {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1));
  transition: all 0.3s ease;
}
.baika-brand-logo:hover .hex {
  stroke: #FBBF24;
  transition: stroke 0.3s ease;
}

/* ===== LOGO ĐỘNG GỐC ===== */
:root { --emblem: url("/logo-emblem.png"); }

.logo-stage {
  position:relative; width:62px; height:62px;
  display:flex; align-items:center; justify-content:center;
}
.logo-halo {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(251,191,36,0.55), transparent 66%);
  filter:blur(5px);
  animation: logoHalo 3s ease-in-out infinite;
}
.logo-wave {
  position:absolute; top:8px; left:8px; width:46px; height:46px;
  border-radius:50%; border:1.5px solid rgba(245,158,11,0.55);
  transform-origin:50% 50%;
  animation: logoWave 3s ease-out infinite;
}
.logo-wave2 { border-color:rgba(245,158,11,0.45); animation-delay:1.5s; }

.brand-ring  { position:absolute; inset:0; transform-origin:50% 50%; animation: bSpin 16s linear infinite; }
.brand-ring2 { position:absolute; inset:0; transform-origin:50% 50%; animation: bSpinR 11s linear infinite; }

.logo-img {
  position:relative; display:block; width:46px; height:auto;
  filter:drop-shadow(0 2px 9px rgba(251,191,36,0.45)) hue-rotate(195deg) saturate(1.5) brightness(1.2);
  animation: logoFloat 5s ease-in-out infinite; will-change:transform;
}
.logo-charge {
  position:absolute; top:8px; left:8px; width:46px; height:46px; pointer-events:none;
  -webkit-mask:var(--emblem) center/contain no-repeat; mask:var(--emblem) center/contain no-repeat;
  background:radial-gradient(circle at 50% 45%, rgba(245,158,11,0.75), transparent 58%);
  mix-blend-mode:screen;
  animation: logoCharge 2.6s ease-in-out infinite;
}
.logo-sweep {
  position:absolute; top:8px; left:8px; width:46px; height:46px; pointer-events:none;
  -webkit-mask:var(--emblem) center/contain no-repeat; mask:var(--emblem) center/contain no-repeat;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.9) 50%, transparent 62%);
  background-size:280% 100%; mix-blend-mode:screen;
  animation: logoSweep 3.8s ease-in-out infinite;
}
.logo-orbit { position:absolute; inset:0; transform-origin:50% 50%; animation: logoOrbit 5s linear infinite; }
.logo-orbit > span {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#FBBF24;
  box-shadow:0 0 9px 2px rgba(245,158,11,0.9);
}

.logo-stage:hover .logo-img   { animation-duration:2.4s; }
.logo-stage:hover .logo-sweep { animation-duration:1.4s; }

@keyframes logoFloat  { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-2px) scale(1.03); } }
@keyframes logoHalo   { 0%,100% { opacity:0.4; transform:scale(0.92); } 50% { opacity:0.85; transform:scale(1.1); } }
@keyframes logoWave   { 0% { transform:scale(0.62); opacity:0.75; } 100% { transform:scale(1.55); opacity:0; } }
@keyframes logoCharge { 0%,100% { opacity:0.22; } 50% { opacity:0.72; } }
@keyframes logoSweep  { 0% { background-position:170% 0; } 56%,100% { background-position:-170% 0; } }
@keyframes logoOrbit  { to { transform:rotate(360deg); } }
@keyframes bSpin      { to { transform:rotate(360deg); } }
@keyframes bSpinR     { to { transform:rotate(-360deg); } }