/* Merakos — layout: một cột nội dung rộng 1180px; hero 2 cột (lời mời | vòm xanh chứa scorecard);
   motif xuyên suốt là hình vòm của logo "m" (bo tròn nửa trên), dùng cho khung, phễu và nhãn bước. */
:root {
  --cream: #F8F7F4;      /* nền, lấy từ banner */
  --paper: #FFFFFF;      /* bề mặt nổi */
  --sand: #EFEDE7;       /* bề mặt phụ */
  --ink: #13182E;        /* chữ, navy của wordmark */
  --muted: #5D6278;
  --line: #E3E0D8;
  --blue: #3754F5;       /* xanh logo */
  --blue-deep: #2337D0;
  --blue-soft: #E7EAFE;
  --on-blue: #FFFFFF;
  --brand: #3754F5;      /* xanh logo, cố định ở cả hai theme */
  --on-brand: #FFFFFF;
  --night: #121735;      /* dải tối */
  --on-night: #EEF0FA;
  --on-night-muted: #A9AFCC;
  --good: #117A51;  --good-soft: #DCF1E7;
  --ok: #9A5F0C;    --ok-soft: #F7EAD2;
  --poor: #B53A26;  --poor-soft: #F8E0DA;
  --na: #767C90;    --na-soft: #ECEBE7;
  --focus: #3754F5;
  --shadow: 0 1px 2px rgba(19,24,46,.05), 0 12px 32px -18px rgba(19,24,46,.25);

  --font-display: "Outfit", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 4.2vw, 2.9rem);
  --step-4: clamp(2.6rem, 6.4vw, 4.6rem);

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --wrap: 1180px;
  --read: 64ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #0C0F21; --paper: #141932; --sand: #1A2040; --ink: #EDEFF8; --muted: #A0A6C2; --line: #262C4B;
    --blue: #6B84FF; --blue-deep: #8C9EFF; --blue-soft: #1C2452; --on-blue: #0C0F21;
    --night: #070915; --on-night: #EDEFF8; --on-night-muted: #9AA0BE;
    --good: #4FC797; --good-soft: #13332A; --ok: #E6AA4E; --ok-soft: #3A2B14;
    --poor: #F27C66; --poor-soft: #3E1F1A; --na: #9096AC; --na-soft: #22273E;
    --focus: #8C9EFF;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cream: #0C0F21; --paper: #141932; --sand: #1A2040; --ink: #EDEFF8; --muted: #A0A6C2; --line: #262C4B;
  --blue: #6B84FF; --blue-deep: #8C9EFF; --blue-soft: #1C2452; --on-blue: #0C0F21;
  --night: #070915; --on-night: #EDEFF8; --on-night-muted: #9AA0BE;
  --good: #4FC797; --good-soft: #13332A; --ok: #E6AA4E; --ok-soft: #3A2B14;
  --poor: #F27C66; --poor-soft: #3E1F1A; --na: #9096AC; --na-soft: #22273E;
  --focus: #8C9EFF;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
  font-weight: 700;
}
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.caption { font-size: var(--step--1); color: var(--muted); }
.accent { color: var(--blue); }

/* ---------- Brand ---------- */
.mark { display: inline-block; width: 1.9em; height: auto; color: var(--blue); flex: none; }
.mark svg { display: block; width: 100%; height: auto; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1;
  color: var(--ink); text-decoration: none; letter-spacing: -0.035em;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark .mark { width: 40px; }
.wordmark small {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); padding: 5px 9px; border: 1px solid var(--line);
  border-radius: 999px; margin-left: 4px; white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 21; background: var(--cream);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding-block: 14px; flex-wrap: wrap;
}
.nav { display: flex; gap: 4px 6px; flex-wrap: wrap; align-items: center; }
.nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.97rem;
  padding: 8px 12px; border-radius: 999px;
}
.nav a:not(.btn):hover { background: var(--sand); }
@media (max-width: 640px) { .nav a.hide-sm { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: 700 1rem/1.1 var(--font-body); letter-spacing: -0.005em;
  border-radius: 999px; border: 2px solid var(--blue);
  background: var(--blue); color: var(--on-blue);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--blue) 70%, transparent);
}
.btn:hover { transform: translateY(-1px); background: var(--blue-deep); border-color: var(--blue-deep); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.quiet { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.quiet:hover { border-color: var(--ink); background: var(--paper); }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 0.92rem; }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Sections ---------- */
section.band { padding-block: clamp(64px, 9vw, 112px); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 52px); max-width: var(--read); }
.section-head .lede { max-width: 52ch; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero .wrap {
  display: grid; gap: clamp(36px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero-badge {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow);
}
.hero-badge .mark { width: 30px; }
.hero h1 .stuck { color: var(--blue); position: relative; white-space: nowrap; }
.hero h1 .stuck::after {
  content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: -0.05em; height: 0.16em;
  border-radius: 999px; background: var(--blue-soft); z-index: -1;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 0.95rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof span::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%233754F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Vòm xanh chứa scorecard */
.stage { position: relative; min-width: 0; padding: 0 0 12px; }
.stage-arch {
  position: relative; background: var(--brand); color: var(--on-brand);
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  padding: clamp(84px, 11vw, 120px) clamp(18px, 4vw, 40px) clamp(22px, 4vw, 40px);
  overflow: hidden; isolation: isolate;
}
.stage-arch::before {
  /* vòng cung đồng tâm mờ, gợi hình logo */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background:
    radial-gradient(circle at 50% 100%, transparent 0 34%, var(--paper) 34% 34.6%, transparent 34.6% 48%, var(--paper) 48% 48.6%, transparent 48.6% 62%, var(--paper) 62% 62.6%, transparent 62.6%);
}
.stage canvas {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(7,10,30,.75);
  transform: rotate(-1.5deg);
}
.float-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink); border-radius: 999px; padding: 10px 16px 10px 10px;
  font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow); border: 1px solid var(--line);
  white-space: nowrap;
}
.float-chip .dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.72rem/1 var(--font-mono); background: var(--good-soft); color: var(--good);
}
.float-chip small { display: block; font: 500 0.72rem/1.2 var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.float-chip.one { left: -6px; top: 4%; }
.float-chip.two { right: -12px; bottom: 58px; }
.float-chip.two .dot { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .float-chip.one { left: 0; }
  .float-chip.two { right: 0; }
}
@media (max-width: 520px) { .float-chip { display: none; } }

/* Dải chỉ số */
.metric-strip { border-block: 1px solid var(--line); background: var(--paper); }
.metric-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
  padding-block: 18px;
}
.metric-strip .label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.metric-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.metric-strip li { font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; padding: 6px 14px; border-radius: 999px; background: var(--sand); }

/* ---------- Phễu: vòm đồng tâm ---------- */
.funnel-wrap { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.rainbow { position: relative; aspect-ratio: 2 / 1.18; max-width: 520px; width: 100%; justify-self: center; }
.rainbow .ring {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  border-radius: 999px 999px 0 0; display: flex; justify-content: center; padding-top: 4.5%;
  font: 700 clamp(0.7rem, 1.6vw, 0.82rem)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.rainbow .r1 { width: 100%; height: 100%; background: var(--blue-soft); color: var(--blue); }
.rainbow .r2 { width: 70%; height: 70%; background: color-mix(in srgb, var(--blue) 45%, var(--blue-soft)); color: var(--on-blue); }
.rainbow .r3 { width: 40%; height: 40%; background: var(--blue); color: var(--on-blue); padding-top: 9%; }
.rainbow-base { height: 2px; background: var(--line); max-width: 520px; width: 100%; justify-self: center; margin-top: -2px; }
.tiers { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.tier {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.tier .swatch { grid-row: span 3; width: 34px; height: 22px; border-radius: 999px 999px 0 0; margin-top: 4px; }
.tier:nth-child(1) .swatch { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.tier:nth-child(2) .swatch { background: color-mix(in srgb, var(--blue) 45%, var(--blue-soft)); }
.tier:nth-child(3) .swatch { background: var(--blue); }
.tier .who { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tier h3 { font-size: 1.3rem; }
.tier p { color: var(--muted); }
.tier .cost { justify-self: start; margin-top: 6px; font: 700 0.78rem/1 var(--font-mono); letter-spacing: .06em; padding: 6px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); }
.tier:nth-child(3) .cost { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 900px) { .funnel-wrap { grid-template-columns: 1fr; } }

/* ---------- Quy trình ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.steps li { position: relative; display: grid; gap: 10px; justify-items: start; counter-increment: step; }
.steps .badge {
  width: 56px; height: 56px; border-radius: 999px 999px 14px 14px; background: var(--paper); border: 2px solid var(--blue);
  display: grid; place-items: center; font: 800 1.35rem/1 var(--font-display); color: var(--blue); position: relative; z-index: 1;
}
.steps li:last-child .badge { background: var(--blue); color: var(--on-blue); }
.steps .badge::before { content: counter(step); }
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .steps::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .steps li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .steps .badge { grid-row: span 2; }
}

/* ---------- Chỉ số đo ---------- */
.metric-cols { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; align-content: start; box-shadow: var(--shadow); }
.metric-col header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-col h3 { font-size: var(--step-2); }
.metric-col .kind { font: 700 0.74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); background: var(--blue-soft); padding: 7px 11px; border-radius: 999px; }
.metric-col dl { margin: 0; display: grid; gap: 0; }
.metric-col .row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.metric-col dt { font: 600 0.88rem/1.4 var(--font-mono); color: var(--ink); }
.metric-col dd { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .metric-cols { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .metric-col .row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Dải tối: cam kết ---------- */
.night { background: var(--night); color: var(--on-night); position: relative; overflow: hidden; isolation: isolate; }
.night::after {
  content: ""; position: absolute; z-index: -1; width: 620px; height: 310px; right: -120px; bottom: -40px;
  border-radius: 999px 999px 0 0; border: 70px solid rgba(107,132,255,.12); border-bottom: 0;
}
.night .eyebrow { color: #8C9EFF; }
.night h2 { color: var(--on-night); }
.night .lede { color: var(--on-night-muted); }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promises li { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.promises .icon { width: 40px; height: 26px; border-radius: 999px 999px 0 0; border: 6px solid #6B84FF; border-bottom: 0; }
.promises strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.promises span { color: var(--on-night-muted); }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .promises { grid-template-columns: 1fr; } }

/* ---------- Apply ---------- */
.apply-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; }
.apply-aside { display: grid; gap: 22px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.next-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.next-list li::before { content: ""; width: 28px; height: 18px; margin-top: 4px; border-radius: 999px 999px 0 0; background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.next-list strong { display: block; font-weight: 700; }
.next-list span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 960px) { .apply-grid { grid-template-columns: 1fr; } .apply-aside { position: static; } }

/* ---------- Forms ---------- */
.form-shell {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 4vw, 40px); display: grid; gap: 26px; box-shadow: var(--shadow); min-width: 0;
}
.form-group { display: grid; gap: 16px; }
.form-group + .form-group { padding-top: 24px; border-top: 1px solid var(--line); }
.group-title { font: 700 0.76rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fields { display: grid; gap: 18px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label, .field legend { font-weight: 650; font-size: 0.95rem; }
.field .hint { font-size: var(--step--1); color: var(--muted); }
.req { color: var(--blue); }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 500 1rem/1.4 var(--font-body); color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
textarea { min-height: 120px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 4px var(--blue-soft); background: var(--paper); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--poor); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 18px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--cream); cursor: pointer; font-weight: 650;
  transition: border-color .15s ease, background .15s ease;
}
.choice span:hover { border-color: var(--blue); }
.choice input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--on-blue); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.97rem; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue); }
.error-text { color: var(--poor); font-size: var(--step--1); font-weight: 650; }
.error-text:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); }
.form-foot p { color: var(--muted); font-size: var(--step--1); max-width: 40ch; }

.notice { border-radius: 14px; padding: 14px 16px; display: grid; gap: 3px; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); font-size: 0.95rem; }
.notice.warn { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.notice.bad { background: var(--poor-soft); border-color: color-mix(in srgb, var(--poor) 45%, transparent); }
.notice strong { font-weight: 700; }

.success { display: grid; gap: 14px; justify-items: start; padding-block: 12px; }
.success .mark { width: 64px; }
.success h3 { font-size: var(--step-2); }
.success p { color: var(--muted); max-width: 48ch; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; transition: border-color .15s ease; }
.faq details[open] { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-block: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%235D6278' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; }

/* ---------- CTA cuối ---------- */
.cta-arch {
  background: var(--brand); color: var(--on-brand); border-radius: 999px 999px var(--r-lg) var(--r-lg);
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 64px) clamp(36px, 5vw, 56px);
  display: grid; gap: 20px; justify-items: center; text-align: center; position: relative; overflow: hidden; isolation: isolate;
}
.cta-arch h2 { color: var(--on-brand); max-width: 16ch; }
.cta-arch p { color: color-mix(in srgb, var(--on-brand) 82%, transparent); max-width: 46ch; font-size: var(--step-1); }
.cta-arch .mark { width: 72px; color: var(--on-brand); opacity: .95; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.good { color: var(--good); background: var(--good-soft); }
.chip.ok { color: var(--ok); background: var(--ok-soft); }
.chip.poor { color: var(--poor); background: var(--poor-soft); }
.chip.na { color: var(--na); background: var(--na-soft); }
.tag-sample { font: 700 0.68rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--poor); border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 8px; vertical-align: middle; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font: 600 0.72rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--sand); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--blue-soft) 45%, transparent); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
td a { font-weight: 700; font-family: var(--font-display); font-size: 1.08rem; text-decoration: none; color: var(--ink); }
td a:hover { color: var(--blue); }
.sub { display: block; color: var(--muted); font-size: var(--step--1); }
.rank { font: 800 1.1rem/1 var(--font-display); color: var(--muted); width: 2.5rem; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-block: 32px; color: var(--muted); font-size: var(--step--1); }
.site-footer .wordmark { font-size: 1.25rem; }
.site-footer .wordmark .mark { width: 32px; }
.site-footer a { color: var(--muted); }
.foot-links { display: flex; gap: 8px 22px; flex-wrap: wrap; }

/* ---------- Banner mẫu ---------- */
.sample-banner { background: var(--poor-soft); color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--poor) 40%, transparent); }
.sample-banner .wrap { padding-block: 9px; font-size: var(--step--1); }
.sample-banner strong { color: var(--poor); }

/* ---------- Trang scorecard ---------- */
.page-pad { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.score-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 960px) { .score-layout { grid-template-columns: 1fr; } }
.score-canvas { display: grid; gap: 12px; min-width: 0; }
.score-frame { background: var(--brand); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.score-canvas canvas { width: 100%; height: auto; display: block; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 16px; min-width: 0; box-shadow: var(--shadow); }
.panel h2 { font-size: var(--step-2); }
.panel.blue { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.panel.blue h2 { color: var(--on-brand); }
.panel.blue .caption { color: color-mix(in srgb, var(--on-brand) 80%, transparent); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0; align-items: center; margin: 0; }
.kv dd + dd { padding-left: 16px; }
.kv dt, .kv dd { padding-block: 11px; border-top: 1px solid var(--line); }
.kv dt { font-family: var(--font-mono); font-size: 0.86rem; color: var(--muted); }
.kv dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.toast { font-size: var(--step--1); color: var(--good); font-weight: 650; min-height: 1.4em; }

/* ---------- Leaderboard hero ---------- */
.board-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.board-head .section-head { margin-bottom: 0; }
.board-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; min-width: 7.5rem; }
.stat b { display: block; font: 800 1.6rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.stat span { font: 600 0.7rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Admin ---------- */
.admin-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; padding-block: 28px 64px; }
@media (max-width: 1000px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-side { display: grid; gap: 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 90px); min-width: 0; }
@media (max-width: 1000px) { .admin-side { position: static; } }
.verdict-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verdict-big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); }
.reasons { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; }
pre.out { margin: 0; padding: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; font: 500 0.8rem/1.55 var(--font-mono); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto; }
.metric-inputs { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .metric-inputs { grid-template-columns: 1fr; } }
.metric-inputs .field label { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- Hub ---------- */
.hub-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card { display: grid; gap: 10px; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; }
.hub-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.hub-card .path { font: 600 0.8rem/1 var(--font-mono); color: var(--blue); }
.hub-card p { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .stage canvas { transform: none; }
}