/* ==========================================================================
   BASE v2 — reset, chữ, khung, nguyên tử. Mọi giá trị đến từ tokens.css.
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0; background:var(--nuoc-2); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:.22em; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--mona-pink); color:#fff; }

h1,h2,h3,h4{ margin:0; color:var(--text-strong); text-wrap:balance; font-weight:var(--fw-black); line-height:var(--lh-heading); letter-spacing:-.015em; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:1.25; letter-spacing:-.01em; }
p{ margin:0 0 var(--s-4); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:var(--fs-lead); color:var(--text-muted); max-width:54ch; }
.muted{ color:var(--text-muted); }
.small{ font-size:var(--fs-sm); }
.strong{ color:var(--text-strong); font-weight:var(--fw-semi); }
.display{ font-size:var(--fs-display); }
.grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

.kicker{ display:inline-flex; align-items:center; gap:var(--s-3); font-family:var(--font-mono); font-size:var(--fs-kicker); font-weight:var(--fw-bold); letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--sinh-hoc-2); }
.kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--sinh-hoc); box-shadow:0 0 12px var(--sinh-hoc); }
.on-light .kicker{ color:var(--mona-violet); }
.on-light .kicker::before{ background:var(--mona-violet); box-shadow:none; }
.kicker--plain::before{ display:none; }
.kicker .sep{ opacity:.45; }
.depth{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; color:var(--ngoc); margin-bottom:var(--s-2); text-transform:uppercase; }

.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2*var(--gutter), var(--wrap-narrow)); margin-inline:auto; }
.sec{ position:relative; padding-block:var(--sec-pad); color:var(--text); }
.sec > .wrap, .sec > .wrap--narrow{ position:relative; z-index:2; }
.sec-head{ max-width:66ch; margin-bottom:var(--s-7); }
.sec-head .kicker{ margin-bottom:var(--s-4); }
.sec-head h2{ margin-bottom:var(--s-4); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.btn{ --btn-bg:var(--grad-cta); --btn-fg:#fff; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3); min-height:56px; padding:0 var(--s-6); background:var(--btn-bg); color:var(--btn-fg); font-weight:var(--fw-bold); font-size:1rem; border:0; border-radius:var(--r-pill); cursor:pointer; text-decoration:none !important; box-shadow:0 14px 34px -12px rgba(255,90,140,.7); transition:transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), filter var(--d-fast); position:relative; overflow:hidden; }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(255,90,140,.85); filter:saturate(1.1); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.btn--ghost{ --btn-bg:rgba(255,255,255,.06); --btn-fg:var(--text-strong); box-shadow:none; border:1px solid var(--line-strong); backdrop-filter:blur(8px); }
.btn--ghost:hover{ box-shadow:none; background:rgba(255,255,255,.12); }
.on-light .btn--ghost{ --btn-bg:rgba(255,255,255,.6); }
.btn--lg{ min-height:64px; padding-inline:var(--s-7); font-size:1.08rem; }
.btn--block{ width:100%; }
.btn .arrow{ transition:transform var(--d-fast) var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

.pill{ display:inline-flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; padding:.55rem 1rem; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--text-strong); background:var(--card); backdrop-filter:blur(10px); }
.pill .dot{ width:8px; height:8px; border-radius:50%; background:#42e39a; box-shadow:0 0 0 4px rgba(66,227,154,.2); }
.pill .sep{ opacity:.4; }

.bar{ position:relative; display:inline-block; vertical-align:middle; height:1em; min-width:6ch; border-radius:4px; overflow:hidden; color:transparent; user-select:none; background:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 6px, rgba(255,255,255,.05) 6px 12px); border:1px solid var(--line-strong); }
.bar--w{ min-width:14ch; } .bar--s{ min-width:5ch; }
.bar[data-peek]::before{ content:attr(data-peek); position:absolute; inset:0; display:flex; align-items:center; padding-inline:.6em; font-family:var(--font-mono); font-size:.7em; letter-spacing:.08em; text-transform:uppercase; color:var(--sinh-hoc-2); background:var(--nuoc-3); clip-path:inset(0 100% 0 0); transition:clip-path var(--d-base) var(--ease-out); }
.bar[data-peek]:hover::before, .bar[data-peek]:focus-visible::before{ clip-path:inset(0 0 0 0); }
.stamp{ display:inline-grid; place-items:center; padding:.35em .8em; border:3px solid var(--sinh-hoc); border-radius:12px; color:var(--sinh-hoc); font-weight:var(--fw-black); font-size:clamp(1.2rem,3vw,2rem); letter-spacing:.06em; text-transform:uppercase; line-height:1; transform:rotate(-6deg); box-shadow:var(--glow-coral); }
.stamp--sm{ font-size:1rem; border-width:2px; }

.porthole{ position:relative; border-radius:50%; overflow:hidden; aspect-ratio:1; background:var(--nuoc-3); box-shadow:0 0 0 10px rgba(255,255,255,.08), 0 0 0 12px rgba(255,255,255,.18), var(--shadow), inset 0 0 60px rgba(0,0,0,.5); }
.porthole img{ width:100%; height:100%; object-fit:cover; }
.porthole::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.28), transparent 45%), radial-gradient(100% 100% at 50% 100%, rgba(30,10,70,.5), transparent 60%); pointer-events:none; }

[data-reveal]{ --reveal-delay:0ms; }
html.no-js [data-reveal], html.reveal-off [data-reveal]{ opacity:1 !important; transform:none !important; }
html:not(.has-gsap) [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity var(--d-slow) var(--ease-out) var(--reveal-delay), transform var(--d-slow) var(--ease-out) var(--reveal-delay); }
html:not(.has-gsap) [data-reveal].is-in{ opacity:1; transform:none; }