/* ==========================================================================
   components.css — v2 shared library (foundation F)
   Shell (skip, header "sảnh", mode tabs, mobile menu, footer, toast) ·
   section & hero shells · HUD bits · chips · buttons (incl. SẮP MỞ CỔNG) ·
   signature components (.mode-card .feature .statband .target .timeline .pass
   .tiles .deploy-cta .next-page .candid) · cards/callouts/memo/exit-box ·
   tabs · accordion · Discord mock kit · dogtag · forms.
   Page builders: DO NOT edit — scope overrides in assets/css/pages/<id>.css.
   ========================================================================== */

/* ── Icons ── */
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:square;stroke-linejoin:miter;flex:none;display:inline-block;vertical-align:-.125em}
.i--sm{width:var(--icon-sm);height:var(--icon-sm)}
.i--md{width:var(--icon-md);height:var(--icon-md)}
.i--lg{width:var(--icon-lg);height:var(--icon-lg)}
.i--xl{width:var(--icon-xl);height:var(--icon-xl)}
.i--thin{stroke-width:1.25}
.i--fill{fill:currentColor}
.emblem{width:32px;height:32px;color:var(--text);flex:none}
.emblem--mono{--emblem-slot:currentColor}

/* ==========================================================================
   SHELL
   ========================================================================== */
.skip{position:fixed;left:var(--s-4);top:var(--s-2);z-index:var(--z-skip);
  background:var(--accent);color:var(--on-accent);padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;
  font-weight:700;text-decoration:none;border-radius:var(--radius);transform:translateY(-200%)}
.skip:focus,.skip:focus-visible{transform:none;outline:none;box-shadow:var(--ring);color:var(--on-accent)}

/* ── header "sảnh" (lobby bar): fixed, transparent over the hero, scrim after 40 px ── */
.site-head{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);height:var(--header-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur-state) var(--ease-out),border-color var(--dur-state) var(--ease-out)}
.site-head::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgb(11 13 12 / .82), rgb(11 13 12 / .4) 60%, transparent);
  transition:opacity var(--dur-state) var(--ease-out)}
.site-head.is-scrolled{background:var(--scrim);border-bottom-color:var(--line)}
.site-head.is-scrolled::before{opacity:0}
.site-head__bar{display:flex;align-items:center;gap:var(--s-4);height:100%}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0;color:var(--text);text-decoration:none;flex:0 1 auto}
.brand:hover{color:var(--text)}
.brand__mark{width:30px;height:30px;color:var(--text);flex:none}
.brand__text{display:flex;flex-direction:column;min-width:0;gap:3px}
.brand__name{font:700 .9375rem/1.1 var(--ff-display);font-stretch:80%;letter-spacing:.01em;white-space:nowrap}
.brand__sep{color:var(--accent)}
.brand__badge{font:500 var(--fs-micro)/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--khaki);white-space:nowrap}
.brand__badge-long{display:none}
@media (min-width:1280px){ .brand__badge-long{display:inline} }
@media (max-width:399px){ .brand__name{white-space:normal} }

/* mode-tab nav (≥ 1024) */
.site-nav{display:none;margin-inline:auto;height:100%}
.site-nav__list{display:flex;height:100%;gap:0}
.site-nav__link{position:relative;display:flex;align-items:center;gap:7px;height:100%;min-height:44px;padding:0 9px;
  color:var(--text-2);text-decoration:none;white-space:nowrap;
  font:600 .8125rem/1 var(--ff-display);font-stretch:85%;letter-spacing:.05em;text-transform:uppercase;
  transition:color var(--dur-hover) var(--ease-out)}
.site-nav__code{font:500 var(--fs-micro)/1 var(--ff-mono);letter-spacing:0;color:var(--text-3);display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-hover) var(--ease-out)}
.site-nav__link::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--line-strong);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms var(--ease-expo)}
.site-nav__link:hover{color:var(--text)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--text)}
.site-nav__link[aria-current="page"]::after{background:var(--accent);transform:scaleX(1)}
.site-nav__link[aria-current="page"] .site-nav__code{color:var(--accent)}
.site-nav__link[aria-current="page"] .site-nav__code::before{content:"";width:5px;height:5px;background:var(--accent)}
.site-nav__link:focus-visible{outline-offset:-4px}
.site-head__cta.btn{flex:none;display:none;min-height:44px;padding:0 16px;font-size:var(--fs-small)}
.menu-btn{display:none;margin-left:auto;flex:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;
  background:rgb(11 13 12 / .6);color:var(--text);border:1px solid var(--line-strong);font:600 var(--fs-small)/1 var(--ff-body);
  transition:border-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.menu-btn:hover{border-color:var(--accent);color:var(--accent)}
.menu-btn .i{width:20px;height:20px}
html.js .menu-btn{display:inline-flex}
@media (max-width:419px){
  .menu-btn{padding:0;width:44px;justify-content:center}
  .menu-btn span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .brand__name{font-size:.875rem}
}
@media (min-width:640px){ .site-head__cta.btn{display:inline-flex;margin-left:auto} html.js .menu-btn{margin-left:0} }
@media (min-width:1024px){
  .site-nav{display:block}
  .site-head__cta.btn{margin-left:0}
  html.js .menu-btn{display:none}
}
/* short brand "Delta Force VN | Cộng Đồng" (header, 1024–1279 only): the full name stays for assistive tech */
.brand__vn-short{display:none}
@media (min-width:1024px) and (max-width:1279px){
  /* compact lobby bar: one-line brand (never a line starting with "|"), inline small codes, tighter tabs */
  .site-head .brand__name{white-space:nowrap}
  .site-head .brand__vn{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-head .brand__vn-short{display:inline}
  .site-head .brand__text{gap:2px}
  .site-head__bar{gap:var(--s-3)}
  .site-nav__link{padding:0 6px;gap:5px;font-size:.75rem;letter-spacing:.03em}
  .site-nav__link::after{left:6px;right:6px}
  .site-nav__code{display:inline;font-size:.6875rem}
  .site-nav__link[aria-current="page"] .site-nav__code::before{display:none}
  .site-head__cta.btn{padding:0 12px}
}
@media (min-width:1280px){
  .site-nav__link{padding:0 12px;font-size:.875rem;gap:8px}
  .site-nav__link::after{left:12px;right:12px}
  .brand__name{font-size:1rem}
}
/* no JS: the nav wraps under the brand (no menu needed) */
@media (max-width:1023px){
  html.no-js .site-head{position:relative;height:auto;background:var(--bg-1)}
  html.no-js .site-head::before{display:none}
  html.no-js .site-head__bar{flex-wrap:wrap;padding-block:8px}
  html.no-js .site-head__cta.btn{display:inline-flex;margin-left:auto}
  html.no-js .site-nav{display:block;flex-basis:100%;order:3;height:auto;border-top:1px solid var(--line)}
  html.no-js .site-nav__list{flex-wrap:wrap;height:auto}
  html.no-js .site-nav__link{height:44px}
  html.no-js .hero{padding-top:clamp(40px, 6vh, 96px)}
}

/* ── full-screen mobile menu (mode list) ── */
.mmenu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;
  background:var(--bg-0);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity 200ms var(--ease-out)}
.mmenu::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 45% at 85% 10%, var(--fog-amber), transparent 70%),radial-gradient(60% 40% at 10% 95%, var(--fog-intel), transparent 70%)}
.mmenu.is-open{opacity:1}
.mmenu__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:var(--header-h);padding-inline:var(--gutter);background:var(--bg-0);border-bottom:1px solid var(--line)}
.mmenu__title{padding:var(--s-5) var(--gutter) var(--s-2);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.mmenu__list{padding:0 var(--gutter)}
.mmenu__item{opacity:0;translate:0 14px;transition:opacity 320ms var(--ease-out),translate 420ms var(--ease-expo);transition-delay:calc(60ms + var(--i,0) * 40ms)}
.mmenu.is-open .mmenu__item{opacity:1;translate:0 0}
.mmenu__link{position:relative;display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;
  min-height:72px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.mmenu__code{grid-row:1 / span 2;font:400 2rem/1 var(--ff-stencil);color:var(--text-3)}
.mmenu__name{font:800 1.625rem/1.05 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em}
.mmenu__desc{grid-column:2;font-size:var(--fs-small);line-height:1.4;color:var(--text-2)}
.mmenu__go{grid-column:3;grid-row:1 / span 2;color:var(--text-3)}
.mmenu__go .i{width:22px;height:22px}
.mmenu__link:hover .mmenu__name,.mmenu__link:hover .mmenu__go{color:var(--accent)}
.mmenu__link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
.mmenu__link[aria-current="page"] .mmenu__code{color:var(--accent)}
.mmenu__here{display:inline-block;margin-inline-start:8px;padding:3px 6px;vertical-align:.3em;font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.08em;color:var(--on-accent);background:var(--accent)}
.mmenu__link--cta .mmenu__name{color:var(--accent)}
.mmenu__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom,0px))}
.mmenu__badge{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--khaki)}
html.menu-open,html.menu-open body{overflow:hidden}

/* ── footer ── */
.site-foot{position:relative;z-index:4;background:var(--bg-1);border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-7);
  font-size:var(--fs-small);line-height:1.55;color:var(--text-2)}
.site-foot__grid{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .site-foot__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
@media (min-width:1024px){ .site-foot__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)} }
.site-foot .brand__mark{color:var(--text-2)}
.site-foot .brand__name,.site-foot .brand__badge{white-space:normal}
.site-foot__updated{margin-top:var(--s-3);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.site-foot__nav-title{margin-bottom:var(--s-2);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.site-foot__pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
.site-foot__pages a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--text-2);text-decoration:none}
.site-foot__pages a:hover{color:var(--accent)}
.site-foot__pages a[aria-current="page"]{color:var(--text)}
.site-foot__pages span{font:500 var(--fs-micro)/1 var(--ff-mono);color:var(--text-3)}
.site-foot__pages a[aria-current="page"] span{color:var(--accent)}
.site-foot__tools{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.site-foot__legal{grid-column:1 / -1;padding-top:var(--s-5);border-top:1px solid var(--line);max-inline-size:110ch;color:var(--text-2)}
.site-foot__legal strong{color:var(--text);font-weight:600}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);
  inline-size:max-content;max-inline-size:min(480px, calc(100vw - 2 * var(--s-4)));
  transform:translate(-50%,12px);opacity:0;visibility:hidden;pointer-events:none;
  padding:12px 16px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  box-shadow:var(--shadow-pop);font:500 var(--fs-small)/1.5 var(--ff-body);
  transition:opacity var(--dur-exit) var(--ease-in),transform var(--dur-exit) var(--ease-in),visibility 0s linear var(--dur-exit)}
.toast.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;
  transition:opacity var(--dur-state) var(--ease-out),transform var(--dur-state) var(--ease-out),visibility 0s}
.toast:empty{display:none}
.toast a{color:var(--accent);font-weight:600;margin-inline-start:.4em;display:inline-block;padding-block:4px}

/* ── icon button & motion toggle ── */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;flex:none;padding:0 10px;
  color:var(--text-2);background:transparent;border:1px solid var(--line-strong);
  transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.icon-btn .i{width:20px;height:20px}
.icon-btn--plain{border-color:transparent}
.motion-toggle .motion-toggle__on{display:none}
.motion-toggle[aria-pressed="true"] .motion-toggle__off{display:none}
.motion-toggle[aria-pressed="true"] .motion-toggle__on{display:inline}
.motion-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.sec{position:relative;isolation:isolate;padding-block:var(--section-y);background-color:var(--bg-0)}
.sec--band{background-color:var(--bg-1)}
.sec--tight{padding-block:calc(var(--section-y) * .6)}
.sec--line{border-top:1px solid var(--line)}
.sec > .wrap{position:relative;z-index:2}
.sec-head{max-inline-size:52rem;margin-bottom:clamp(40px, 2.4vw + 28px, 72px)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .kicker{justify-content:center}
.sec-title{font-size:var(--fs-h2)}
.sec-lede{margin-top:var(--s-4);max-inline-size:40ch;font-size:var(--fs-lead);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.sec-head--center .sec-lede{margin-inline:auto}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:var(--s-4);
  font:500 var(--fs-label)/1.35 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.kicker__code{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums slashed-zero;white-space:pre}
.kicker__line{flex:0 0 40px;height:1px;background:var(--line-strong)}
.kicker .i{width:16px;height:16px;color:var(--accent)}

/* ==========================================================================
   HERO SHELL — .hero (≈ 78svh) / .hero--full (100svh)
   <section class="hero hero--full"> <div class="hero__bg" aria-hidden="true">…</div>
     <div class="wrap hero__inner"> kicker · h1.hero__title · p.hero__sub · .hero__ctas · .hero__candid </div></section>
   ========================================================================== */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:78vh;min-height:78svh;overflow:clip;background:var(--bg-0);
  padding-top:calc(var(--header-h) + clamp(40px, 7vh, 104px));padding-bottom:clamp(48px, 8vh, 112px)}
.hero--full{min-height:100vh;min-height:100svh}
.hero--center{justify-content:center}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__bg > .terrain{position:absolute;inset:0}
.hero__grid{position:absolute;inset:0;
  background-image:linear-gradient(90deg, var(--grid) 1px, transparent 1px),linear-gradient(var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 78%)}
.hero__shade{position:absolute;inset:0;background:
  linear-gradient(180deg, transparent 55%, var(--bg-0) 100%),
  linear-gradient(90deg, rgb(11 13 12 / .72) 0%, rgb(11 13 12 / .25) 55%, transparent 80%)}
.hero__inner{position:relative;z-index:2;inline-size:100%}
.hero__kicker{color:var(--text)}
.hero__kicker .kicker__code{color:var(--accent)}
/* phones: a long kicker wraps its own text beside the code instead of dropping the code onto an orphan line */
@media (max-width:639px){.hero__kicker{flex-wrap:nowrap;align-items:flex-start;text-wrap:balance}.hero__kicker .kicker__code{flex:none}}
.hero__title{font-size:var(--fs-h1);max-inline-size:18ch}
.hero--full .hero__title{font-size:var(--fs-h1-home);max-inline-size:17ch}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{margin-top:var(--s-5);max-inline-size:40ch;font-size:var(--fs-lead);font-weight:500;line-height:1.5;color:var(--text);text-wrap:pretty}
.hero__ctas{margin-top:var(--s-6)}
.hero__candid{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:6px 10px;margin-top:var(--s-5);
  font:500 var(--fs-micro)/1.5 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.hero__candid .i{flex:none;width:14px;height:14px;margin-top:.2em;color:var(--khaki)}
.hero__visual{position:relative;min-width:0}
.hero__readout{position:absolute;top:calc(var(--header-h) + 18px);right:var(--gutter);z-index:2;display:none;
  font:500 var(--fs-micro)/1.6 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:right}
.hero__readout b{color:var(--accent);font-weight:700}
@media (min-width:1024px){ .hero__readout{display:block} }
/* the terrain pause toggle owns the hero's top-right corner (terrain.css) → a readout sits just under it */
.hero:has(> .terrain-toggle:not([hidden])) .hero__readout{top:calc(var(--header-h) + 72px)}
.hero__cue{display:none;align-items:center;gap:8px;margin-top:var(--s-7);font:500 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hero__cue .i{width:16px;height:16px}
@media (min-height:700px){ .hero--full .hero__cue{display:inline-flex} }
@media (min-width:1024px){
  .hero--split .hero__inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7);align-items:end}
  .hero--split.hero--vcenter .hero__inner{align-items:center}
}
.hero--split .hero__visual{margin-top:var(--s-7)}
@media (min-width:1024px){ .hero--split .hero__visual{margin-top:0} }

/* HUD corner brackets (decorative, absolutely positioned): <span class="hud-corners" aria-hidden="true"></span> */
.hud-corners{--hc:rgb(233 231 223 / .32);--arm:22px;position:absolute;inset:var(--hc-inset,16px);pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--hc),var(--hc)) top left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) top right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top right / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) bottom left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) bottom right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) bottom right / 2px var(--arm);
  background-repeat:no-repeat}
.hud-corners--accent{--hc:var(--accent)}
.hero > .hud-corners{inset:calc(var(--header-h) + 8px) var(--s-3) var(--s-3)}
@media (max-width:767px){ .hero > .hud-corners{display:none} }

/* HUD frame on a box (.hud / .hud--4 / .hud--snap) — kept from v1 */
.hud{position:relative;--hud-c:var(--line-strong)}
.hud::before,.hud::after{content:"";position:absolute;width:var(--bracket-arm);height:var(--bracket-arm);pointer-events:none;border:0 solid var(--hud-c)}
.hud::before{top:-1px;left:-1px;border-top-width:var(--bracket-w);border-left-width:var(--bracket-w)}
.hud::after{bottom:-1px;right:-1px;border-bottom-width:var(--bracket-w);border-right-width:var(--bracket-w)}
.hud--4,.hud--snap{position:relative;--hud-c:var(--line-strong)}
.hud--4::before,.hud--snap::before{content:"";position:absolute;inset:-1px;pointer-events:none;width:auto;height:auto;border:0;
  background:
    linear-gradient(var(--hud-c),var(--hud-c)) top left / var(--bracket-arm) var(--bracket-w), linear-gradient(var(--hud-c),var(--hud-c)) top left / var(--bracket-w) var(--bracket-arm),
    linear-gradient(var(--hud-c),var(--hud-c)) top right / var(--bracket-arm) var(--bracket-w), linear-gradient(var(--hud-c),var(--hud-c)) top right / var(--bracket-w) var(--bracket-arm),
    linear-gradient(var(--hud-c),var(--hud-c)) bottom left / var(--bracket-arm) var(--bracket-w), linear-gradient(var(--hud-c),var(--hud-c)) bottom left / var(--bracket-w) var(--bracket-arm),
    linear-gradient(var(--hud-c),var(--hud-c)) bottom right / var(--bracket-arm) var(--bracket-w), linear-gradient(var(--hud-c),var(--hud-c)) bottom right / var(--bracket-w) var(--bracket-arm);
  background-repeat:no-repeat}
.hud.hud--4::after,.hud.hud--snap::after{content:none}
.hud--snap::before{inset:-6px;transition:inset var(--dur-hover) var(--ease-snap)}
.hud--snap:hover::before,.hud--snap:focus-within::before,.hud--snap:focus-visible::before,
.hud--snap[aria-selected="true"]::before,.hud--snap[aria-current]::before,.hud--snap.is-selected::before{inset:-1px}
.hud--snap[aria-selected="true"],.hud--snap.is-selected{--hud-c:var(--accent)}
.hud--accent{--hud-c:var(--accent)}

.tickline{position:relative;display:block;height:1px;background:rgb(233 231 223 / .35);margin-inline:calc(var(--tick) / 2)}
.tickline::before,.tickline::after{content:"";position:absolute;top:calc(var(--tick) / -2 + .5px);width:var(--tick);height:var(--tick);background:var(--text)}
.tickline::before{left:calc(var(--tick) / -2)}
.tickline::after{right:calc(var(--tick) / -2)}

.stamp{display:inline-block;padding:6px 12px 4px;border:2px solid currentColor;color:var(--khaki);
  font:400 clamp(1rem,.9rem + .4vw,1.25rem)/1.2 var(--ff-stencil);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transform:rotate(-4deg);pointer-events:none;user-select:none;border-radius:var(--radius)}
.stamp--danger{color:var(--danger)}
.stamp--ok{color:var(--ok)}
.memo .stamp,.on-paper .stamp{color:var(--stamp);mix-blend-mode:multiply}

.keycap{display:inline-flex;align-items:center;min-height:1.75em;padding:1px 7px 0;
  font:500 .8125rem/1.3 var(--ff-mono);letter-spacing:0;color:var(--text);white-space:nowrap;
  background:var(--surface);border:1px solid var(--line-strong);border-bottom-width:3px;border-radius:3px;vertical-align:.08em}
.keycap--xl{padding:.18em .42em .12em;font-size:clamp(3rem,2rem + 5vw,7rem);font-weight:700;line-height:1;border-width:2px 2px 8px;border-radius:10px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:0 30px 60px -30px rgb(0 0 0 / .9)}
.cut{clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}

/* ==========================================================================
   CHIPS & CONFIG VALUES
   ========================================================================== */
.chip{--c:var(--text-2);--cb:var(--surface);
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;max-inline-size:100%;
  font:500 var(--fs-micro)/1.35 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c);background:var(--cb);border:1px solid currentColor;border-radius:var(--radius);vertical-align:middle}
.chip .i{width:14px;height:14px}
.chip--ok{--c:var(--ok);--cb:var(--ok-bg)}
.chip--plan{--c:var(--plan);--cb:var(--plan-bg)}
.chip--proposal{--c:var(--khaki);--cb:var(--khaki-bg);border-style:dashed}
.chip--gated{--c:var(--gated);--cb:var(--gated-bg)}
.chip--target{--c:var(--target);--cb:var(--target-bg)}
.chip--mock{--c:var(--intel);--cb:var(--intel-bg);border-style:dashed}
.chip--intel{--c:var(--intel);--cb:var(--intel-bg)}
.chip--danger{--c:var(--danger);--cb:var(--danger-bg)}
.chip--candid{--c:var(--steel);--cb:var(--steel-bg)}
.chip--code{--c:var(--accent);--cb:var(--accent-tint);font-variant-numeric:tabular-nums slashed-zero}
.chip--role{--c:var(--text);--cb:var(--surface-2);text-transform:none;letter-spacing:0;border-color:var(--line-strong)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}

/* unfilled config value — subtle, never a loud pill:  <span data-cfg="ownerName" class="cfg-empty">đang cập nhật</span> */
.cfg-empty{color:var(--text-3);font-style:normal;text-decoration:underline dashed var(--line-strong) 1px;text-underline-offset:.28em}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:10px;row-gap:2px;
  min-height:48px;padding:8px 22px;border:1px solid transparent;border-radius:var(--radius);
  font:600 1rem/1.25 var(--ff-body);text-decoration:none;text-align:left;touch-action:manipulation;
  transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.btn:active:not([aria-disabled="true"]):not(:disabled){transform:translateY(1px)}
.btn .i{width:20px;height:20px}
.btn__label{min-width:0}
.btn__arrow{transition:translate 220ms var(--ease-expo)}
.btn:hover .btn__arrow{translate:4px 0}
.btn__sub{flex-basis:100%;font:500 var(--fs-micro)/1.35 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.btn:has(.btn__sub){justify-content:flex-start;padding-block:9px}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);overflow:hidden;isolation:isolate}
.btn--primary:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--on-accent)}
.btn--primary:focus-visible{outline:none;box-shadow:var(--ring)}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .42) 50%,transparent 70%);transform:translateX(-120%)}
.btn--primary.is-sweeping::after{animation:cd-sweep 1.4s linear 2}
@keyframes cd-sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.btn--secondary{background:rgb(17 20 18 / .72);color:var(--text);border-color:var(--line-strong)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent);padding-inline:10px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.btn--ghost:hover{color:var(--accent-hi)}
.btn--lg{min-height:56px;padding:12px 28px;font-size:1.0625rem}
.btn--sm{min-height:44px;padding:6px 14px;font-size:var(--fs-small)}
.btn--block{inline-size:100%}
/* SẮP MỞ CỔNG — a CTA whose config value is still empty. Still a real link (→ lien-he.html).
   Reads as "coming soon", never as disabled: solid raised surface, solid amber frame, amber lock + amber chip,
   full-contrast label, same height as .btn--primary. */
.btn.btn--gate{background:var(--surface-2);background-image:none;color:var(--text);border:1px solid var(--accent)}
.btn.btn--gate:hover{background:rgb(255 159 28 / .12);border-color:var(--accent-hi);color:var(--text)}
.btn.btn--gate:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:none}
.btn.btn--gate::after{content:none}
.btn--gate .i{color:var(--accent)}
.btn__gate{display:none}
.btn--gate .btn__gate{display:inline-flex;align-items:center;padding:4px 7px 3px;border-radius:var(--radius);
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);white-space:nowrap}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (max-width:479px){ .btn-row > .btn{inline-size:100%} }

/* ==========================================================================
   SIGNATURE COMPONENTS
   ========================================================================== */

/* ── .mode-card — tall lobby "mode select" card ──
   <div class="mode-grid"><a class="mode-card" href="nguoi-choi.html">
     <span class="mode-card__bg" aria-hidden="true"></span>
     <span class="mode-card__top"><span class="mode-card__code">01</span><span class="mode-card__tag">CHẾ ĐỘ</span></span>
     <span class="mode-card__art" aria-hidden="true"><svg class="i"><use href="#i-gamepad-2"/></svg></span>
     <span class="mode-card__title">Người chơi</span><span class="mode-card__value">Lên kèo nhanh, chơi an toàn</span>
     <span class="mode-card__cta">VÀO<svg class="i"><use href="#i-arrow-right"/></svg></span></a></div> */
.mode-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px, 76%);gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter) 18px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.mode-grid > *{scroll-snap-align:start}
@media (min-width:640px){ .mode-grid{grid-auto-columns:minmax(260px, 46%)} }
@media (min-width:1024px){ .mode-grid{grid-auto-flow:row;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));overflow:visible;margin-inline:0;padding:0;gap:20px} }
.mode-card{--hc:var(--line-strong);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;
  min-height:clamp(360px, 18vw + 230px, 480px);padding:22px 22px 0;overflow:hidden;
  color:var(--text);text-decoration:none;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 45%, var(--bg-1) 100%);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-card);
  transition:transform 300ms var(--ease-expo),border-color var(--dur-hover) var(--ease-out)}
.mode-card::before{content:"";position:absolute;inset:10px;z-index:1;pointer-events:none;--arm:16px;
  background:
    linear-gradient(var(--hc),var(--hc)) top left / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top left / 2px var(--arm),
    linear-gradient(var(--hc),var(--hc)) top right / var(--arm) 2px, linear-gradient(var(--hc),var(--hc)) top right / 2px var(--arm);
  background-repeat:no-repeat;transition:inset 200ms var(--ease-snap)}
.mode-card__bg{position:absolute;inset:0;z-index:-1;opacity:.45;transition:opacity 300ms var(--ease-out);
  background:
    repeating-radial-gradient(circle at 72% 34%, transparent 0 17px, rgb(111 211 232 / .075) 17px 18px),
    radial-gradient(70% 45% at 70% 32%, rgb(255 159 28 / .12), transparent 70%)}
.mode-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mode-card__code{font:400 clamp(2.5rem,2rem + 1vw,3.25rem)/1 var(--ff-stencil);color:var(--text-3);transition:color var(--dur-hover) var(--ease-out)}
.mode-card__tag{font:500 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.mode-card__art{flex:1 1 auto;display:grid;place-items:center;min-height:120px;color:var(--text);transition:color var(--dur-hover) var(--ease-out),translate 400ms var(--ease-expo)}
.mode-card__art .i{width:clamp(72px, 4vw + 40px, 104px);height:clamp(72px, 4vw + 40px, 104px);stroke-width:1.1}
.mode-card__title{font:800 clamp(1.75rem,1.3rem + 1.1vw,2.5rem)/1.02 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.005em}
.mode-card__value{margin-top:8px;min-height:2.9em;font-size:.9375rem;line-height:1.45;color:var(--text-2)}
.mode-card__cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  margin:20px -22px 0;padding:0 22px;min-height:52px;border-top:1px solid var(--line);
  font:700 .875rem/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  transition:color 200ms var(--ease-out)}
.mode-card__cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateX(-101%);transition:transform 340ms var(--ease-expo)}
.mode-card__cta .i{width:20px;height:20px;transition:translate 300ms var(--ease-expo)}
.mode-card:hover,.mode-card:focus-visible{border-color:var(--accent);--hc:var(--accent)}
.mode-card:hover::before,.mode-card:focus-visible::before{inset:5px}
.mode-card:hover .mode-card__bg,.mode-card:focus-visible .mode-card__bg{opacity:1}
.mode-card:hover .mode-card__code,.mode-card:focus-visible .mode-card__code{color:var(--accent)}
.mode-card:hover .mode-card__art,.mode-card:focus-visible .mode-card__art{color:var(--accent);translate:0 -4px}
.mode-card:hover .mode-card__cta,.mode-card:focus-visible .mode-card__cta{color:var(--on-accent)}
.mode-card:hover .mode-card__cta::before,.mode-card:focus-visible .mode-card__cta::before{transform:none}
.mode-card:hover .mode-card__cta .i,.mode-card:focus-visible .mode-card__cta .i{translate:4px 0}
.mode-card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media (hover:hover){ .mode-card:hover{transform:translateY(-4px)} }

/* ── .feature — alternating visual / text block ── */
.feature{display:grid;gap:clamp(28px, 3vw, 64px);align-items:center;min-width:0}
@media (min-width:1024px){
  .feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .feature--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .feature--flip .feature__text{order:2}
  .feature--even{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.feature + .feature{margin-top:clamp(80px, 9vw, 160px)}
.feature__text{min-width:0}
.feature__title{font:800 clamp(2rem,1.4rem + 2vw,3.25rem)/1.05 var(--ff-display);font-stretch:75%;letter-spacing:-.003em;text-wrap:balance;max-inline-size:16ch}
.feature__body{margin-top:var(--s-4);max-inline-size:36ch;font-size:var(--fs-lead);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.feature__chips{margin-top:var(--s-5)}
.feature__cta{margin-top:var(--s-5)}
.feature__visual{position:relative;isolation:isolate;min-width:0;display:grid;place-items:center;min-height:clamp(260px, 22vw + 120px, 460px);
  padding:clamp(16px, 2.4vw, 40px);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(70% 70% at 60% 35%, rgb(255 159 28 / .08), transparent 70%), radial-gradient(60% 60% at 20% 90%, rgb(111 211 232 / .06), transparent 70%), var(--bg-1)}
.feature__visual > *{position:relative;z-index:1;max-inline-size:100%}
.feature__visual--bare{background:none;border:0;padding:0;min-height:0}

/* ── .tiles — value tiles grid (icon + title + one line) ── */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:768px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .tiles{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))} }
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(20px, 2vw, 32px);background:var(--bg-0)}
.sec--band .tile{background:var(--bg-1)}
.tile__icon{display:grid;place-items:center;width:48px;height:48px;color:var(--accent);border:1px solid var(--line-strong);background:var(--surface)}
.tile__icon .i{width:24px;height:24px}
.tile__title{font:700 1.125rem/1.3 var(--ff-body);color:var(--text)}
.tile__text{font-size:.9375rem;line-height:1.5;color:var(--text-2)}

/* ── .statband — 3–4 huge stencil numbers ──
   <div class="statband"><div class="statband__item statband__item--key">
     <p class="statband__num"><span data-count="1025">1.025</span></p><p class="statband__label">bài kiểm thử tự động đạt</p></div>…</div> */
.statband{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
@media (min-width:1024px){ .statband{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:28px} }
.statband--3{--cols:3}
.statband__item{position:relative;min-width:0;padding-top:var(--s-5);border-top:1px solid var(--line-strong)}
.statband__item::before{content:"";position:absolute;top:-2px;left:0;width:36px;height:3px;background:var(--text-3)}
.statband__item--key::before{background:var(--accent)}
.statband__num{font:400 clamp(2.75rem, 1.2rem + 4.4vw, 7rem)/.92 var(--ff-stencil);letter-spacing:-.01em;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.statband__item--key .statband__num{color:var(--accent)}
.statband__num small{font-size:.42em;letter-spacing:0;margin-inline-start:.1em}
.statband__label{margin-top:var(--s-3);font:600 1rem/1.35 var(--ff-body);color:var(--text)}
.statband__sub{margin-top:4px;font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
[data-count]{font-variant-numeric:tabular-nums}

/* ── .target — "MỤC TIÊU" tile ── */
.target{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 24px;
  background:linear-gradient(180deg, var(--surface), var(--bg-1));border:1px solid var(--line)}
.target::after{content:"";position:absolute;top:18px;right:18px;width:26px;height:26px;border:1px solid rgb(224 192 99 / .45);border-radius:50%;
  background:radial-gradient(circle, var(--target) 0 2px, transparent 2.5px),linear-gradient(rgb(224 192 99 / .45),rgb(224 192 99 / .45)) center / 1px 100% no-repeat,linear-gradient(90deg,rgb(224 192 99 / .45),rgb(224 192 99 / .45)) center / 100% 1px no-repeat}
.target__tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 8px;
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--target);background:var(--target-bg);border:1px solid currentColor}
.target__tag .i{width:14px;height:14px}
.target__value{margin-top:6px;font:400 var(--fs-stat-sm)/1 var(--ff-stencil);color:var(--target);white-space:nowrap}
.target__value small{font:800 .38em/1 var(--ff-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;margin-left:.2em}
.target__op{font:800 .6em/1 var(--ff-display);vertical-align:.2em;margin-right:.08em;-webkit-text-stroke:.03em currentColor}   /* ≥ < > weighted like the stencil digits */
.target__name{font:600 1rem/1.4 var(--ff-body);color:var(--text)}

/* ── .timeline — horizontal track (vertical < 1024) ──
   <div class="timeline" style="--n:4"><div class="timeline__rail" aria-hidden="true"><span class="timeline__fill" style="--fill:.25" data-reveal="line"></span></div>
     <ol class="timeline__list"><li class="timeline__node is-done"><p class="timeline__when">Tuần 0</p><h3 class="timeline__title">…</h3><p class="timeline__body">…</p></li>…</ol></div> */
.timeline{position:relative;padding-left:30px;min-width:0}
.timeline__rail{position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline__fill{position:absolute;left:0;top:0;width:2px;height:calc(var(--fill,1) * 100%);background:var(--accent)}
.timeline__list{display:grid;gap:var(--s-6);list-style:none;margin:0;padding:0}
.timeline__node{position:relative;min-width:0}
.timeline__node::before{content:"";position:absolute;left:-30px;top:.25em;width:14px;height:14px;background:var(--bg-0);border:2px solid var(--line-strong)}
.sec--band .timeline__node::before{background:var(--bg-1)}
.timeline__node.is-done::before{background:var(--accent);border-color:var(--accent)}
.timeline__node.is-now::before{border-color:var(--accent);box-shadow:0 0 0 5px rgb(255 159 28 / .18)}
.timeline__when{font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.timeline__title{margin-top:6px;font:800 clamp(1.375rem,1.1rem + .9vw,1.875rem)/1.1 var(--ff-display);font-stretch:75%}
.timeline__body{margin-top:6px;font-size:.9375rem;line-height:1.5;color:var(--text-2);max-inline-size:32ch}
html.motion-ok .timeline__fill.rv-pre{scale:1 0;transform-origin:50% 0}
@media (min-width:1024px){
  .timeline{padding-left:0;padding-top:44px}
  .timeline__rail{left:0;right:0;top:6px;bottom:auto;width:auto;height:2px}
  .timeline__fill{height:2px;width:calc(var(--fill,1) * 100%)}
  .timeline__list{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s-5)}
  .timeline__node::before{left:0;top:-44px}
  html.motion-ok .timeline__fill.rv-pre{scale:0 1;transform-origin:0 50%}
}

/* ── .pass — season-pass track (base; lo-trinh extends it) ── */
.pass{position:relative;display:grid;gap:var(--s-4);min-width:0}
@media (min-width:1024px){ .pass{grid-template-columns:var(--pass-cols, repeat(3,minmax(0,1fr)));gap:0} }
.pass__tier{position:relative;min-width:0;padding:clamp(20px, 2vw, 32px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--line-strong)}
@media (min-width:1024px){ .pass__tier + .pass__tier{border-left:0} }
.pass__tier.is-done{border-top-color:var(--ok)}
.pass__tier.is-next{border-top-color:var(--accent);border-top-style:dashed}
.pass__tier.is-gated{border-top-color:var(--gated)}
.pass__label{font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.pass__title{margin-top:8px;font:800 clamp(1.5rem,1.2rem + 1vw,2.25rem)/1.05 var(--ff-display);font-stretch:75%}
.pass__list{margin-top:var(--s-4);display:grid;gap:10px;list-style:none;padding:0}
.pass__list li{position:relative;padding-left:18px;font-size:.9375rem;line-height:1.45;color:var(--text)}
.pass__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--line-strong)}
.pass__tier.is-done .pass__list li::before{background:var(--ok)}
.pass__here{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 6px;font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent);white-space:nowrap}
.pass__here .i{width:14px;height:14px}

/* ── .deploy-cta — full-bleed CTA band ── */
.deploy-cta{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(96px, 11vw, 176px);background:var(--bg-0);border-top:1px solid var(--line);text-align:center}
.deploy-cta__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.deploy-cta__bg > .terrain{position:absolute;inset:0}
.deploy-cta__floor{position:absolute;left:-40%;right:-40%;bottom:-2px;height:62%;
  background-image:linear-gradient(90deg, rgb(255 159 28 / .16) 1px, transparent 1px),linear-gradient(rgb(255 159 28 / .16) 1px, transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg, #000 10%, transparent 85%);mask-image:linear-gradient(0deg, #000 10%, transparent 85%)}
.deploy-cta__beam{position:absolute;left:50%;top:0;bottom:0;width:min(60vw, 520px);translate:-50% 0;
  background:radial-gradient(50% 70% at 50% 100%, rgb(255 159 28 / .22), transparent 70%)}
.deploy-cta--ok .deploy-cta__beam{background:radial-gradient(50% 70% at 50% 100%, rgb(124 203 139 / .24), transparent 70%)}
.deploy-cta--ok .deploy-cta__floor{background-image:linear-gradient(90deg, rgb(124 203 139 / .15) 1px, transparent 1px),linear-gradient(rgb(124 203 139 / .15) 1px, transparent 1px)}
.deploy-cta__inner{position:relative;z-index:1}
.deploy-cta .kicker{justify-content:center}
.deploy-cta__title{margin-inline:auto;max-inline-size:18ch;font-size:clamp(2.25rem, 1.2rem + 3.9vw, 5rem);line-height:1.02}
.deploy-cta__sub{margin:var(--s-5) auto 0;max-inline-size:44ch;font-size:var(--fs-lead);line-height:1.5;color:var(--text-2)}
.deploy-cta .btn-row{justify-content:center;margin-top:var(--s-6)}
.deploy-cta__note{margin-top:var(--s-5);font:500 var(--fs-micro)/1.5 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.deploy-cta--left{text-align:left}
.deploy-cta--left .kicker,.deploy-cta--left .btn-row{justify-content:flex-start}
.deploy-cta--left .deploy-cta__title,.deploy-cta--left .deploy-cta__sub{margin-inline:0}

/* ── .next-page — "CHẶNG TIẾP THEO" (generated by build.js) ── */
.next-page{position:relative;z-index:4;padding-block:clamp(48px, 6vw, 96px) clamp(64px, 8vw, 128px);background:var(--bg-0)}
.next-page__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px var(--s-5);
  min-height:200px;padding:clamp(24px, 3vw, 48px);color:var(--text);text-decoration:none;
  background:linear-gradient(100deg, var(--surface) 0%, var(--bg-1) 70%);border:1px solid var(--line-strong);
  transition:border-color var(--dur-hover) var(--ease-out)}
.next-page__card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 480ms var(--ease-expo)}
.next-page__kicker{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font:500 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.next-page__kicker::before{content:"";width:8px;height:8px;background:var(--accent)}
.next-page__kicker b{color:var(--accent);font-weight:700}
.next-page__ghost{position:absolute;right:calc(clamp(64px, 4vw + 40px, 104px) + clamp(24px, 3vw, 48px) + var(--s-5));bottom:-.18em;   /* left of the arrow box, never under it */
  z-index:-1;pointer-events:none;
  font:400 clamp(9rem, 6rem + 12vw, 18rem)/1 var(--ff-stencil);color:rgb(233 231 223 / .045)}
.next-page__name{display:block;font:800 clamp(2.5rem, 1.5rem + 3.8vw, 5rem)/1 var(--ff-display);font-stretch:75%;text-transform:uppercase}
.next-page__teaser{display:block;margin-top:10px;max-inline-size:48ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-2)}
.next-page__go{display:grid;place-items:center;width:clamp(64px, 4vw + 40px, 104px);aspect-ratio:1;color:var(--accent);border:1px solid var(--accent);
  transition:background-color 240ms var(--ease-out),color 240ms var(--ease-out)}
.next-page__go .i{width:42%;height:42%;transition:translate 320ms var(--ease-expo)}
.next-page__card:hover,.next-page__card:focus-visible{border-color:var(--accent);color:var(--text)}
.next-page__card:hover::after,.next-page__card:focus-visible::after{transform:none}
.next-page__card:hover .next-page__go,.next-page__card:focus-visible .next-page__go{background:var(--accent);color:var(--on-accent)}
.next-page__card:hover .next-page__go .i,.next-page__card:focus-visible .next-page__go .i{translate:5px 0}
.next-page__card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* ── .candid — one-line honesty strip ── */
.candid{display:flex;align-items:flex-start;gap:12px;max-inline-size:72ch;padding:14px 18px;
  color:var(--text);background:var(--steel-bg);border-left:3px solid var(--steel);font-size:.9375rem;line-height:1.5}
.candid > .i{width:20px;height:20px;margin-top:2px;color:var(--steel)}
.candid__label{margin-inline-end:6px;font:700 var(--fs-micro)/1.5 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ==========================================================================
   CARDS · CALLOUTS · MEMO · EXIT BOX
   ========================================================================== */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);min-width:0;
  padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
.card__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.card__kicker .i{width:16px;height:16px}
.card__title{font:700 clamp(1.0625rem,1rem + .3vw,1.25rem)/1.35 var(--ff-body);color:var(--text)}
.card__body{color:var(--text-2);font-size:.9375rem;line-height:1.55}
.card__body > * + *{margin-top:var(--s-3)}
.card__foot{margin-top:auto;padding-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}
.card--link{border-color:var(--line-strong);text-decoration:none;transition:border-color var(--dur-hover) var(--ease-out),transform 280ms var(--ease-expo)}
a.card--link:hover,.card--link:focus-within{border-color:var(--accent);color:var(--text)}
@media (hover:hover){ a.card--link:hover{transform:translateY(-3px)} }
.card--dashed{border:1px dashed var(--line-strong);background:var(--bg-1)}

.callout{--c:var(--line-strong);--cl:var(--text-2);position:relative;min-width:0;
  padding:var(--s-4) var(--s-5);background:var(--surface);border:1px solid var(--c);border-left-width:4px;border-radius:var(--radius);color:var(--text)}
.callout__label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s-2);
  font:700 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cl)}
.callout__label .i{width:18px;height:18px}
.callout__body{font-size:var(--fs-body);line-height:1.6;color:var(--text)}
.callout__body > * + *{margin-top:var(--s-3)}
.callout--note{--c:var(--line-strong);--cl:var(--text-2);border-left-width:1px}
.callout--safe,.exit-box{--c:var(--ok);--cl:var(--ok);background:var(--ok-bg)}
.callout--commit{--c:var(--text);--cl:var(--text)}

.memo{--memo-under:var(--bg-0);position:relative;max-inline-size:560px;min-width:0;
  padding:22px 24px 24px 36px;color:var(--paper-ink);border-radius:0;box-shadow:var(--shadow-memo);
  background:linear-gradient(90deg, transparent 17px, rgb(168 38 31 / .5) 17px 18px, transparent 18px), var(--paper)}
.sec--band .memo{--memo-under:var(--bg-1)}
.memo::after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;
  background:linear-gradient(225deg, var(--memo-under) 50%, var(--paper-2) 50%);box-shadow:-1px 1px 2px rgb(0 0 0 / .18)}
.memo__hd{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding-bottom:8px;margin-bottom:14px;padding-right:18px;
  border-bottom:1.5px solid var(--paper-ink);font:700 var(--fs-micro)/1.35 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink-2)}
.memo__body{font:400 1rem/1.6 var(--ff-body);color:var(--paper-ink)}
.memo__body > * + *{margin-top:12px}
.memo__body strong{color:var(--paper-ink)}
.memo a{color:var(--paper-ink);text-decoration-color:var(--paper-amber)}
.memo .stamp{position:absolute;right:18px;bottom:18px}

.exit-box{position:relative;padding:var(--s-5);border:1px solid var(--c);border-left-width:4px;border-radius:var(--radius);color:var(--text)}
.exit-box__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.exit-box__title .i{width:18px;height:18px}
.exit-box__list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:4px}
.ext-link{display:inline-block;min-height:44px;padding-block:10px;line-height:1.5;
  color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;min-width:0}
.ext-link .i{width:16px;height:16px;margin-inline-start:4px}
.ext-link__hint{font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.04em;color:var(--text-3);text-decoration:none;display:inline-block;margin-inline-start:8px}
p .ext-link,li .ext-link:not(.exit-box__list .ext-link){min-height:0;padding-block:0;display:inline}

/* ==========================================================================
   TABS (WAI-ARIA, automatic activation) · ACCORDION
   ========================================================================== */
.tabs{min-width:0}
.tabs__list{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:stretch;margin-bottom:var(--s-6)}
.tabs__tab{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;text-align:left;
  background:var(--surface);color:var(--text-2);border:1px solid var(--line-strong);border-radius:var(--radius);font:600 var(--fs-small)/1.3 var(--ff-body);
  transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.tabs__tab .i{width:20px;height:20px}
.tabs__tab:hover{color:var(--text);border-color:var(--text-2)}
.tabs__tab::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 200ms var(--ease-out)}
.tabs__tab[aria-selected="true"]{background:var(--surface-3);color:var(--text);border-color:var(--accent)}
.tabs__tab[aria-selected="true"]::after{transform:scaleX(1)}
.tabs__panel{min-width:0}
.tabs__panel:focus-visible{outline-offset:6px}
.tabs__panel-title{margin-bottom:var(--s-4)}
html.no-js .tabs__list{display:none}
html.no-js .tabs__panel + .tabs__panel{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line)}
@media (max-width:767px){ .tabs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }

.acc{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);min-width:0}
.acc + .acc{margin-top:var(--s-2)}
.acc__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:12px var(--s-5);
  list-style:none;font:600 1.0625rem/1.4 var(--ff-body);color:var(--text)}
.acc__sum::-webkit-details-marker{display:none}
.acc__sum::marker{content:""}
.acc__sum:hover{color:var(--accent)}
.acc__sum > span{min-width:0}
.acc__caret{width:22px;height:22px;flex:none;color:var(--text-2);transition:transform 200ms var(--ease-out)}
.acc[open] > .acc__sum .acc__caret{transform:rotate(180deg)}
.acc[open] > .acc__sum{border-bottom:1px solid var(--line)}
.acc__body{padding:var(--s-4) var(--s-5) var(--s-5);color:var(--text-2)}
.acc__body > * + *{margin-top:var(--s-3)}
.acc-list{max-inline-size:52rem}

/* ==========================================================================
   DISCORD MOCK KIT (.mock / .dc-*) — our tokens only, tag "MINH HOẠ"
   ========================================================================== */
.mock{position:relative;min-width:0;margin:0;padding:var(--s-4);background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  font-size:var(--fs-small);line-height:1.5;box-shadow:var(--shadow-card)}
.mock__tag{position:absolute;top:-1px;right:-1px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;
  font:700 var(--fs-micro)/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--intel);background:var(--intel-bg);border:1px dashed var(--intel)}
.mock__tag .i{width:12px;height:12px}
.mock__status{margin-top:var(--s-3);padding:8px 10px;border-top:1px solid var(--line);font:500 var(--fs-small)/1.45 var(--ff-body);color:var(--text);min-height:2.4em}
.mock__status:empty{display:none}
.mock__note{margin-top:var(--s-2);font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.04em;color:var(--text-3)}
.dc-chan{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 90px 10px 0;margin-bottom:var(--s-3);border-bottom:1px solid var(--line);
  font:600 var(--fs-small)/1.3 var(--ff-body);color:var(--text);overflow-wrap:anywhere}
.dc-chan__hash{font-family:var(--ff-mono);color:var(--text-3);font-weight:500}
.dc-msg{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start}
.dc-msg + .dc-msg{margin-top:var(--s-4)}
.dc-msg > :not(.dc-ava):not(.dc-alias){grid-column:2}
.dc-ava,.dc-alias{grid-row:1 / span 3;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text-2)}
.dc-ava .i{width:22px;height:22px}
.dc-alias{font:700 .75rem/1 var(--ff-mono);color:var(--text)}
.dc-alias--sm{width:28px;height:28px;grid-row:auto}
.dc-author{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;color:var(--text)}
.dc-app{display:inline-flex;align-items:center;padding:1px 5px;font:700 .75rem/1.2 var(--ff-mono);letter-spacing:.04em;color:var(--on-accent);background:var(--intel);border-radius:var(--radius)}
.dc-text{color:var(--text)}
.dc-embed{--e:var(--line-strong);min-width:0;padding:12px 14px;background:var(--surface-2);border-left:4px solid var(--e);border-radius:var(--radius)}
.dc-embed > * + *{margin-top:var(--s-2)}
.dc-embed--accent{--e:var(--accent)}
.dc-embed--danger{--e:var(--danger)}
.dc-embed--ok{--e:var(--ok)}
.dc-embed__title{font:700 var(--fs-small)/1.35 var(--ff-body);color:var(--text)}
.dc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:var(--s-3)}
.dc-fields > div{min-width:0}
.dc-fields dt{font:600 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2)}
.dc-fields dd{margin:2px 0 0;color:var(--text);overflow-wrap:anywhere}
.dc-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;
  background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);font:600 var(--fs-small)/1.2 var(--ff-body);
  transition:background-color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out)}
.dc-btn:hover{border-color:var(--accent)}
.dc-btn:active{transform:translateY(1px)}
.dc-btn .i{width:16px;height:16px}
.dc-btn--go{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.dc-btn--go:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.dc-btn--go:focus-visible{outline:none;box-shadow:var(--ring)}
.dc-btn--danger{background:var(--danger-bar);color:#fff;border-color:var(--danger-bar)}
.dc-btn--ghost{background:transparent;border-color:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.dc-btn[aria-pressed="true"]{background:var(--surface-3);border-color:var(--accent)}
.dc-voice{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dc-voice > li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:36px;padding:6px 8px;border-radius:var(--radius);color:var(--text)}
.dc-voice > li .i{width:16px;height:16px;color:var(--text-2)}
.dc-voice__meta{margin-inline-start:auto;font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.04em;color:var(--text-2)}
.dc-chanlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dc-chanlist__cat{padding:10px 8px 4px;font:700 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.dc-chanlist__item{display:flex;align-items:center;gap:6px;min-height:36px;padding:4px 8px;color:var(--text);border-radius:var(--radius);overflow-wrap:anywhere}
.dc-chanlist__item.is-active{background:var(--surface-2)}
.dc-kill{border:1px solid var(--danger);background:var(--danger-bg);min-width:0}
.dc-kill__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:var(--danger-bar);color:#fff;
  font:700 var(--fs-label)/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase}
.dc-kill__bar .i{width:18px;height:18px}
.dc-kill__body{padding:10px 12px;color:var(--text)}
.dc-kill__body > * + *{margin-top:var(--s-2)}
.redact{display:inline-flex;align-items:center;justify-content:center;min-inline-size:6.5ch;min-height:1.35em;padding:0 6px;vertical-align:-.1em;
  background:#050709;border-radius:1px;font:500 var(--fs-micro)/1.3 var(--ff-mono);letter-spacing:.04em;color:var(--text-3)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{display:inline-grid;place-items:center;width:44px;height:44px;font:700 .8125rem/1 var(--ff-mono);color:var(--text);
  background:var(--surface-2);border:1px solid var(--line-strong)}
.slot--open{color:var(--accent);background:transparent;border:1px dashed var(--accent)}
.slot--you{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}

/* ==========================================================================
   DOGTAG · FORMS
   ========================================================================== */
.dogtag{position:relative;min-width:0;max-inline-size:36rem;padding:var(--s-5) var(--s-5) var(--s-5) 56px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));border:1px solid var(--line-strong);border-radius:18px}
.dogtag::before{content:"";position:absolute;left:18px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;
  background:var(--bg-0);border:1px solid var(--line-strong);box-shadow:inset 0 1px 2px rgb(0 0 0 / .6)}
.dogtag__title{margin-bottom:var(--s-3);font:700 var(--fs-label)/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.dogtag dl,dl.dogtag{display:grid;gap:10px}
.dogtag dl > div,dl.dogtag > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-width:0}
@media (min-width:560px){ .dogtag dl > div,dl.dogtag > div{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s-3);align-items:baseline} }
.dogtag dt{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.dogtag dd{margin:0;font-family:var(--ff-mono);font-size:var(--fs-small);min-width:0;overflow-wrap:anywhere}

.field{display:grid;gap:6px;min-width:0}
.field__label{font:600 var(--fs-small)/1.4 var(--ff-body);color:var(--text)}
.input{min-height:44px;inline-size:100%;padding:10px 12px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);font:400 var(--fs-body)/1.4 var(--ff-body)}
.input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* controls that need JS */
html.no-js [data-acc-toggle],html.no-js [data-motion-toggle],html.no-js .menu-btn,html.no-js [data-copy],html.no-js [data-copy-target],html.no-js [data-copy-cfg]{display:none !important}