/* Hallmark · shape: Feature Stack on a results sheet, refined from the 2026-11-09 audit (11 sections to 7, a live strip, the close holds the sign-up) · genre: editorial · theme: Sport (by request) · redesign: full
 * hero: Stage over a duotone pitch, the app's own reel beside the text (/), Long Document (/server.html, /eula.html, /privacy.html, /404.html) · nav: edge-aligned, the FC ONLINE Jackpot Hunter lockup · footer: letter close · imagery: the app's reel (its own screen recording and win shot, names blurred), the tier table capture, the Bi Lắc jackpot medal (Garena's own, by the owner's choice, credited), a 23 s intro clip, library 1, duotone ink paper · signature: the reel, a real round spun into a real grand · job: sign up, the form in the close · body face: Be Vietnam Pro for Albert Sans, which has no Vietnamese glyphs
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, the audit found a mailto action, no share card and unreadable phone charts; the close now posts a real sign-up, the head carries og tags and every chart has a phone cut */
/* Hallmark · dropped #tai, mailto:support@fcojackpothunter.app?subject=%C4%90%C4%83ng%20k%C3%BD%20beta · the audit found the beta mailto does nothing without a mail app; nav, hero and plans now point to the sign-up form at #dang-ky */
/* Hallmark · dropped app-tiers.png · the reel leads the hero now; the same capture, cropped to its tier table as app-tiers-table.png, sits beside the odds chart */
/* Hallmark · dropped price-h, pro-why-h, start-h · the audit merged the Pro points and the prices into the Pro plan and the three steps into the FAQ */
/* Hallmark · dropped "Pro: chi ít, săn thông minh" · its points now sit in the Pro plan as four plain lines */
/* Hallmark · dropped "Bớt FC quay phí" · now the Pro plan line "Bớt lượt quay muộn" */
/* Hallmark · dropped "Chiến lược từ dữ liệu thật" · now the Pro plan line "Mốc theo dữ liệu thật" */
/* Hallmark · dropped "Giá Pro" · the two prices head the Pro plan itself */
/* Hallmark · dropped "Bắt đầu trong 3 bước" · the steps answer the FAQ "Bắt đầu thế nào?" */
/* Hallmark · reworded "2,9%" and "1,9%" to "Mốc theo dữ liệu thật" · detailed figures the owner keeps for Pro */
/* Hallmark · dropped 21:22, 22%, 2%, 35% · 21:22 was the live board's clock at the record; the rest are the detailed figures the owner keeps for Pro, and 15 đến 35% now sits in the Pro feature list */
/* Hallmark · reworded "Treo 24/7 trên VPS, điều khiển bằng điện thoại" to "Treo 24/7 trên VPS" · 58 names a nine-word head; the lead keeps the phone */
/* Hallmark · reworded "Lite và Pro" to "Miễn phí 2 tài khoản" · the finish review asked the plans head to lead with its fact */
/* Hallmark · reworded "App canh hũ FC Online 24/7 và tự quay khi hũ chạm mốc bạn đặt, cho nhiều tài khoản cùng lúc." to "Tự quay khi hũ chạm mốc bạn đặt, cho nhiều tài khoản." · 58 asks the hero for one short sentence */
/* Hallmark · waive 59 · the live strip sits on the hero's ink under a hairline rule · Hũ đang chạy is the scoreboard under the hero's reel, read as one band with it */
/* Hallmark · waive 78 · Long Document pages /server.html /eula.html /privacy.html /404.html · numbered legal clauses and the VPS setup steps carry annotation heads, not section heads */
/* Hallmark · waive 77 · prose held at a 72ch measure on the document pages · Điều khoản sử dụng, Chính sách riêng tư and Treo 24/7 trên VPS read as Jackpot Hunter documents, not landing sections */
/* Hallmark · reworded "App chỉ chọn thời điểm" to "Canh hũ 24/7 thay bạn" · the owner asked for headings on what the app does for the player */
/* Hallmark · reworded "Tự quay đúng mốc, giữ đúng ngân sách" to "Săn jackpot, khỏi thức canh hũ" · the owner asked for a headline built on the app's main jobs, without the budget line */
/* Hallmark · dismissed 77 · each document page is one Long Document, not a landing strip, so it has no section count */
/* Hallmark · waive 44c · Long Document pages /server.html /eula.html /privacy.html /404.html open on their title and first paragraph · Điều khoản sử dụng, Chính sách riêng tư and Treo 24/7 trên VPS have no Jackpot Hunter hero to fill the screen */
/* Hallmark · dismissed 25 · .part p and .fig p hold one or two sentences beside a figure or a title, a caption measure from 28ch */
@import url("./tokens.css?v=20261109h");
@import url("./base.css?v=20261109h");

:root {
  --nav-h: 72px;
  --on-ink: var(--color-paper);
  --on-ink-2: color-mix(in oklab, var(--color-paper) 80%, var(--color-ink));
  --ink-scrim: color-mix(in oklab, var(--color-ink) 86%, transparent);
  --ink-scrim-2: color-mix(in oklab, var(--color-ink) 45%, transparent);
  --shot-line: color-mix(in oklab, var(--color-paper) 18%, transparent);
  --card-line: color-mix(in oklab, var(--color-ink) 10%, transparent);
  --chart-10x: oklch(52% 0.16 262); /* validated with the 50x green on paper: CVD ΔE 27.5 */
  --chart-50x: var(--color-accent-deep);
  /* The logo's red (img favicon.svg #e5312b), stepped for text: on paper and on ink. */
  --color-brand: oklch(53% 0.2 28);
  --color-brand-on-ink: oklch(71% 0.17 27);
  --field-line: color-mix(in oklab, var(--color-paper) 45%, transparent);
  --field-fill: color-mix(in oklab, var(--color-paper) 7%, var(--color-ink));
}

h1, h2, h3 { text-transform: uppercase; line-height: 1.06; }
a:hover { text-decoration-color: var(--color-accent-deep); }
::selection { background: var(--color-accent); color: var(--color-ink); }
.mono { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Chrome */
.nav { position: absolute; inset: 0 0 auto; z-index: var(--z-raised); color: var(--on-ink); }
.nav--doc { position: static; color: var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; }
.wordmark img { width: 40px; height: 40px; flex-shrink: 0; }
.wordmark__txt { display: grid; font: var(--display-weight) var(--text-xl)/0.92 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.wordmark__txt > span:first-child { font-size: 0.62em; letter-spacing: 0.06em; color: var(--color-brand); }
.nav:not(.nav--doc) .wordmark__txt > span:first-child { color: var(--color-brand-on-ink); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a:not(.btn) { color: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__links a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Controls: the volt block and its bordered pair */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: var(--display-weight) var(--text-lg)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 84%, var(--color-paper)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--line:hover { background: var(--color-paper-2); }
.btn--on-ink { background: transparent; color: var(--on-ink); border-color: var(--on-ink); }
.btn--on-ink:hover { background: color-mix(in oklab, var(--color-paper) 12%, transparent); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-md); }
.ink :focus-visible, .nav:not(.nav--doc) :focus-visible { outline-color: var(--color-accent); }

/* Hero: the app's own reel on the pitch */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(100dvh, 760px); padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl); background: var(--color-ink); color: var(--on-ink); }
.hero__photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__photo[data-slot]:has(> img) { outline: 0; }
.hero__photo > img { object-position: 50% 30%; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--ink-scrim) 0%, var(--ink-scrim) 38%, var(--ink-scrim-2) 76%, transparent), linear-gradient(to top, var(--ink-scrim), transparent 45%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: none; font-size: clamp(2.75rem, 4.6vw + 1rem, 5.5rem); line-height: 1.04; }
.hero .lead { max-width: 40ch; color: var(--on-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); scroll-margin-top: var(--space-3xl); }
.hero__note { font-size: var(--text-sm); color: var(--on-ink-2); max-width: 60ch; }
.reel { position: relative; margin: 0; display: grid; gap: var(--space-sm); justify-self: end; width: min(100%, 620px); }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--color-ink); outline: var(--rule-hair) solid var(--shot-line); outline-offset: -1px; }
.reel__medal { position: absolute; top: calc(var(--space-xl) * -1); right: calc(var(--space-md) * -1); z-index: 2; width: 112px; height: auto; }
.reel__ctl { flex-shrink: 0; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--shot-line); border-radius: var(--radius-card); background: var(--ink-scrim); color: var(--on-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.reel__ctl:hover { background: var(--color-ink); }
.reel__ctl:active { transform: translateY(1px); }
.reel__ctl:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.reel figcaption { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--on-ink-2); }

/* Hũ đang chạy: the live strip under the hero */
.live { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--shot-line); }
.live__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--space-md) var(--gap-columns); align-items: center; }
.live__head { display: grid; gap: var(--space-3xs); }
.live__head h2 { font-size: var(--text-2xl); }
.live__head p { font-size: var(--text-sm); color: var(--on-ink-2); }
.live__pool { display: flex; align-items: baseline; gap: var(--space-xs); font: var(--display-weight) clamp(3.5rem, 7vw, 7rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.live__pool small { font-size: var(--text-xl); color: var(--on-ink-2); }
.live__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap-columns); margin: 0; }
.live__stats > div { display: grid; gap: var(--space-3xs); align-content: start; padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--shot-line); }
.live__stats > div[hidden] { display: none; }
.live__stats dt { font-size: var(--text-sm); color: var(--on-ink-2); }
.live__stats dd { margin: 0; display: grid; gap: var(--space-3xs); }
.live__stats b { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.live__stats small { font-size: var(--text-sm); color: var(--on-ink-2); }
.live__status { font-size: var(--text-sm); color: var(--on-ink-2); }
@media (max-width: 60rem) { .live__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .live__stats { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .live__in { grid-template-columns: minmax(0, 1fr); } .live__stats { grid-auto-flow: row; gap: var(--space-md); } }

/* Product captures: real pixels, never the duotone */
.shot { margin: 0; display: grid; justify-items: center; gap: var(--space-sm); }
.shot > img { display: block; width: 100%; max-width: 380px; height: auto; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--card-line); outline-offset: -1px; }
.shot figcaption { font-size: var(--text-sm); color: var(--color-muted); text-align: center; max-width: 40ch; }

/* Sections */
.sec { padding-top: var(--section-gap); }
.sec--tight { padding-top: var(--section-gap-s); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / 7; }
.head .lead { grid-column: 8 / 13; color: var(--color-muted); }
.head--next { margin-top: var(--section-gap-s); }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 60rem) { .head h2, .head .lead { grid-column: 1 / -1; } }

/* Charts: the round and the grands, static SVG from scripts/site-charts/build.mjs */
.round { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 420fr); gap: var(--gap-columns); align-items: start; border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-lg); }
.round figure, .hist { margin: 0; position: relative; }
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.chart--m { display: none; }
@media (max-width: 40rem) { .chart--d { display: none; } .chart--m { display: block; } }
.ch-grid { stroke: var(--color-rule); stroke-width: 1; }
.ch-tick { fill: var(--color-muted); font-size: 12px; }
.ch-line { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-ref { stroke: var(--color-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.ch-ref--ink { stroke: var(--color-ink); }
.ch-ref-l { fill: var(--color-muted); font-size: 12px; }
.ch-note { fill: var(--color-ink); font-size: 13px; font-weight: 500; }
.ch-zoom { fill: color-mix(in oklab, var(--color-accent) 45%, transparent); }
.ch-s10 { fill: var(--chart-10x); stroke: var(--color-paper); stroke-width: 2; }
.ch-s50 { fill: var(--chart-50x); stroke: var(--color-paper); stroke-width: 2; }
.ch-mini { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2; }
.ch-grand { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 2; }
.ch-bar { fill: var(--color-ink-2); transition: fill var(--dur-micro) var(--ease-out); }
.ch-bar--hi { fill: var(--chart-50x); }
.ch-hit { fill: transparent; }
.ch-mark { cursor: default; }
.ch-mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ch-mark:hover .ch-bar, .ch-mark:focus-visible .ch-bar { fill: var(--chart-10x); }
.ch-mark:focus-visible .ch-s10, .ch-mark:focus-visible .ch-s50, .ch-mark:focus-visible .ch-grand, .ch-mark:focus-visible .ch-mini, .ch-mark:focus-visible .ch-hit { stroke: var(--color-focus); stroke-width: 3; }
.ch-cross { stroke: var(--color-muted); stroke-width: 1; }
.ch-tip { position: absolute; z-index: var(--z-tooltip); pointer-events: none; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-card); background: var(--color-ink); color: var(--on-ink); font-size: var(--text-sm); white-space: nowrap; transform: translate(-50%, calc(-100% - var(--space-xs))); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: var(--space-md) 0 0; padding: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.lg { display: inline-flex; align-items: center; gap: var(--space-xs); }
.lg::before { content: ""; width: 12px; height: 12px; flex-shrink: 0; border: 2px solid var(--color-paper); outline: 1px solid var(--color-rule); }
.lg--10::before { background: var(--chart-10x); border-radius: 2px; }
.lg--50::before { background: var(--chart-50x); border-radius: 50%; }
.lg--mini::before { background: var(--color-paper); border: 2px solid var(--color-ink); border-radius: 50%; outline: 0; }
.lg--grand::before { background: var(--color-accent); border: 2px solid var(--color-ink); transform: rotate(45deg) scale(0.85); outline: 0; }
.round__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }
.hist { border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-lg); margin-bottom: var(--space-sm); }
.hist figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }
@media (max-width: 60rem) { .round { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* Quay ở mốc dễ nổ hơn: the trend beside the tier table */
.odds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: end; }
.odds__main { grid-column: 1 / 9; display: grid; gap: var(--space-md); }
.odds__main .lead { max-width: 52ch; color: var(--color-muted); }
.odds__main .hist { margin-top: var(--space-lg); }
.odds__shot { grid-column: 9 / 13; }
@media (max-width: 60rem) { .odds__main, .odds__shot { grid-column: 1 / -1; } }

/* Xem app săn một vòng: the intro clip on the ink band */
.reel-band.sec { margin-top: var(--section-gap); padding-block: var(--space-3xl); }
.reel-band h2 { margin-bottom: var(--space-xl); }
.reel-band .clip figcaption { color: var(--on-ink-2); }
.clip { margin: 0; display: grid; gap: var(--space-sm); }
.clip video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--color-ink); }
.clip figcaption { font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }

/* Lite và Pro: every feature, in the two plans */
.plans { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: stretch; }
.plan { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-card); }
.plan--lite { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
.plan h3 { font-size: var(--text-3xl); }
.plan__price { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.plan__price span { font: var(--display-weight) clamp(2.5rem, 2vw + 1.5rem, 3.5rem)/0.95 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.plan--pro .plan__price { color: var(--on-ink-2); }
.plan--pro .plan__price span { color: var(--on-ink); }
.plan__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); }
.plan__deal { font-size: var(--text-sm); color: var(--color-accent); }
.gain { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; }
.gain li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--shot-line); color: var(--on-ink-2); }
.gain b { font-weight: 500; color: var(--on-ink); }
.plan__all { border-top: var(--rule-hair) solid var(--shot-line); }
.plan__all summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; font-weight: 500; cursor: pointer; list-style: none; }
.plan__all summary::-webkit-details-marker { display: none; }
.plan__all summary svg { flex-shrink: 0; width: 20px; height: 20px; transition: transform var(--dur-short) var(--ease-out); }
.plan__all[open] summary svg { transform: rotate(45deg); }
.plan__all summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.feat { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; }
.feat li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.feat b { font-size: var(--text-md); font-weight: 500; color: var(--color-ink); }
.plan__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-sm) var(--space-md); }
.plan__groups h4 { margin: 0 0 var(--space-xs); padding-bottom: var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-accent); font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; }
.plan__groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--on-ink-2); }
@media (max-width: 60rem) { .plans, .plan__groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .plan__prices { grid-template-columns: minmax(0, 1fr); } }

/* Under the plans: payment, and the action */
.price-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }
.price-foot p { color: var(--color-muted); max-width: 70ch; }

/* The close: the statement beside the beta sign-up, on the ink band */
.ink { background: var(--color-ink); color: var(--on-ink); }
.close { margin-top: var(--section-gap); padding-block: var(--space-3xl); scroll-margin-top: 0; }
.close__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.close__words { grid-column: 1 / 7; display: grid; gap: var(--space-lg); }
.close__line { max-width: 16ch; font: var(--display-weight) clamp(2.75rem, 4vw + 1rem, 5rem)/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.close__words p:last-child { max-width: 46ch; font-size: var(--text-lead); color: var(--on-ink-2); }
.signup { grid-column: 8 / 13; display: grid; gap: var(--space-md); }
.signup h2 { font-size: var(--text-3xl); }
.signup__lead, .signup__fine { color: var(--on-ink-2); }
.signup__fine { font-size: var(--text-sm); }
.signup a { color: var(--on-ink); text-decoration-color: var(--color-accent); }
.signup__form { display: grid; gap: var(--space-md); }
.signup__form[hidden] { display: none; }
.signup__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.signup__form .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--text-sm); color: var(--on-ink-2); }
.field input, .field select { min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--field-line); border-radius: var(--radius-card); background: var(--field-fill); color: var(--on-ink); font: inherit; }
.field input::placeholder { color: var(--on-ink-2); opacity: 0.7; }
.field input:hover, .field select:hover { border-color: var(--on-ink-2); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.signup__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.signup__msg { flex: 1 1 16rem; font-size: var(--text-sm); color: var(--color-accent); }
.signup__msg.is-bad { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--color-error); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (max-width: 60rem) { .close__words, .signup { grid-column: 1 / -1; } }

/* Câu hỏi thường gặp */
.faq__head { grid-column: 1 / 5; align-self: start; }
.faq__head h2 { max-width: 10ch; }
.faq__list { grid-column: 5 / 13; border-top: var(--rule-bar) solid var(--color-rule-2); }
.faq__list details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-md); font-size: var(--text-lg); font-weight: 500; line-height: 1.35; cursor: pointer; list-style: none; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.faq__list details[open] summary svg { transform: rotate(45deg); color: var(--color-ink); }
.faq__list summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.2em; }
.faq__list details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 60rem) { .faq__head, .faq__list { grid-column: 1 / -1; } }

/* Footer: a letter close */
.foot { margin-top: var(--section-gap); padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
.doc + .foot { margin-top: var(--section-gap-s); }
.foot--flush { margin-top: 0; border-top: 0; } /* after the ink close: the band meets the footer */
.foot__in { display: grid; gap: var(--space-xl); }
.foot__sign { display: grid; gap: var(--space-xs); }
.foot__sign p { color: var(--color-muted); }
.foot__mail { font: 500 clamp(1.25rem, 4.6vw, 2.5rem)/1.1 var(--font-body); letter-spacing: -0.02em; color: var(--color-ink); text-decoration-color: var(--color-accent-deep); white-space: nowrap; min-width: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); list-style: none; margin: 0; padding: 0; }
.foot__links a { color: var(--color-ink); }
.foot__small { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot__small a { color: var(--color-ink-2); }

/* Documents: the VPS guide and the two legal pages */
.doc { padding-top: var(--space-3xl); }
.doc__body { max-width: 72ch; }
.doc h1 { font-size: clamp(2.5rem, 4vw + 1rem, 4.25rem); max-width: 18ch; margin-bottom: var(--space-lg); }
.doc h2 { font-size: var(--text-2xl); max-width: none; margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.doc p, .doc li { line-height: 1.7; color: var(--color-ink-2); }
.doc p + p { margin-top: var(--space-md); }
.doc .lead { color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.doc .note { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); font-size: var(--text-sm); }
.doc .note + .note, .doc .lead + .note { margin-top: var(--space-md); }
.doc ul, .doc ol { padding-left: var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.doc li { min-width: 0; }
.doc ol > li::marker { font-weight: 600; color: var(--color-ink); }
.doc code { padding: 0 var(--space-2xs); border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); font: 500 0.9em var(--font-outlier); }
.doc pre { margin: var(--space-sm) 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); color: var(--on-ink); overflow-x: auto; }
.doc pre code { padding: 0; background: none; color: inherit; font-size: var(--text-sm); }
.doc a { color: var(--color-ink); text-decoration-color: var(--color-accent-deep); }
.doc .cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border-radius: var(--radius-card); background: var(--color-ink); }
.doc .cmd pre { margin: 0; padding: 0; background: none; white-space: pre-wrap; word-break: break-all; }
.doc .cmd .btn { text-decoration: none; }
.doc__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); }
.doc__close p { margin: 0; color: var(--color-ink-2); }
.doc__close .btn { text-decoration: none; }
@media (max-width: 40rem) { .doc .cmd { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); } .doc .cmd .btn { justify-self: start; } }
.doc b, .doc strong { font-weight: 500; color: var(--color-ink); }

@media (max-width: 60rem) {
  .hero { min-height: auto; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
  .reel { justify-self: stretch; width: 100%; }
  .reel__medal { top: calc(var(--space-md) * -1); left: calc(var(--space-xs) * -1); right: auto; width: 64px; } /* over the game art, clear of the pool panel */
}
@media (max-width: 23.4rem) { .wordmark__txt { display: none; } }
@media (max-width: 40rem) { .nav__links a:not(.btn) { display: none; } .hero__scrim { background: linear-gradient(to bottom, var(--ink-scrim), var(--ink-scrim) 100%); } }