/* VanBanCheck website. Tokens: P3 "Tinh chỉnh", owner-approved 26/10/2026 (ux/design/p3), scaled up for reading on the web.
   Layout: a dark navy title bar as in the App, then sections that alternate white paper and the cool grey "desk" the App
   puts document pages on, inside one 1160px column. Tool pages (kích hoạt, quản trị, máy thử) use one narrow column and
   draw a card only around the step being worked on. Light only, on purpose: the App, its screenshots and printed
   administrative documents are all light. */
:root {
  color-scheme: light;

  --desk: #EDEFF3;
  --paper: #FFFFFF;
  --paper-2: #F6F7FA;
  --paper-3: #EDF0F4;
  --line: #DCE0E7;
  --line-2: #C6CCD6;
  --line-3: #AEB6C2;

  --ink: #161D2B;
  --ink-2: #4F5868;
  --ink-3: #646C7A;
  --doc-ink: #111111;

  --rail: #1B2333;
  --rail-2: #2A3650;
  --rail-ink: #B4BED0;
  --rail-line: #2E384B;

  --accent: #1A5A99;
  --accent-2: #12456F;
  --accent-tint: #E8F0F8;
  --accent-line: #A9C6E0;
  --sel: #D6E5F5;

  --err: #B42318;
  --err-tint: #FCEBE9;
  --err-line: #EDB9B2;
  --err-ink: #8E1C12;
  --warn: #8A5406;
  --warn-tint: #FBF2E3;
  --warn-line: #E5CC9B;
  --warn-ink: #74460A;
  --sugg: #0E6E63;
  --sugg-tint: #E7F2F0;
  --sugg-line: #A8CFC9;
  --sugg-ink: #0B574E;
  --nc: #5B6472;
  --nc-tint: #EFF1F4;

  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-doc: "Times New Roman", Times, "Noto Serif", "Liberation Serif", serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;

  --fs-cap: 12.5px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 19px;
  --fs-h2: clamp(24px, 2.6vw, 30px);
  --fs-h1: clamp(31px, 4.2vw, 46px);

  --r: 6px;
  --r2: 10px;
  --pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-pop: 0 4px 12px rgba(16, 24, 40, .12), 0 2px 4px rgba(16, 24, 40, .06);
  --shadow-sheet: 0 1px 2px rgba(16, 24, 40, .10), 0 10px 28px rgba(16, 24, 40, .10);
  --ease: cubic-bezier(.2, 0, 0, 1);

  --wrap: 1160px;
  --gutter: 16px;
  --header-h: 60px;
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/1.6 var(--font-ui);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.25; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.012em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.006em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 16px; }
p, ul, ol, dl, figure { margin: 0; }
code, kbd { font-family: var(--font-mono); font-size: .92em; }
kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 4px; background: var(--paper-2); color: var(--ink); font-size: 13px; line-height: 1.5;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
/* A field only bots fill in (Sales/FormGuard.cs): off screen, not display:none, which simple bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.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;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--paper); padding: 8px 12px; border-radius: var(--r); }
.skip-link:focus { top: 8px; }

/* Windows animations off -> no motion, unless the viewer turned it on for this site (data-motion="on", see _MotionInit). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.grow { flex: 1 1 auto; min-width: 0; }
.eyebrow { font-size: var(--fs-cap); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.ic { flex: none; }

/* ---------- Demo bar (every page) ---------- */
.demo-bar { background: var(--warn-tint); border-bottom: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 13.5px; line-height: 1.45; }
.demo-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-block: 7px; }
.demo-bar strong { letter-spacing: .05em; }
.demo-bar nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; }
.demo-bar a { color: var(--warn-ink); font-weight: 600; }
.demo-bar .clock { font-weight: 700; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--rail); color: var(--rail-ink); }
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.005em; }
.brand:hover { color: var(--paper); }
.brand-mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r);
  background: var(--accent); color: var(--paper); font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.brand-sub { padding-left: 10px; border-left: 1px solid var(--rail-line); color: var(--rail-ink); font-weight: 400; font-size: 14.5px; }
.nav { display: none; gap: 2px; margin-left: 14px; }
.nav a, .header-link {
  padding: 8px 11px; border-radius: var(--r); color: var(--rail-ink); text-decoration: none; font-size: 15px;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.nav a:hover, .header-link:hover { background: var(--rail-2); color: var(--paper); }
.nav a[aria-current="page"] { background: var(--rail-2); color: var(--paper); }
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-actions .header-link { display: none; }
.mnav { position: relative; }
.mnav > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--rail-line); border-radius: var(--r); color: var(--paper); cursor: pointer; font-size: 15px;
}
.mnav > summary::-webkit-details-marker { display: none; }
.mnav-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 2 * var(--gutter)));
  display: grid; gap: 2px; padding: 8px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r2); box-shadow: var(--shadow-pop);
}
.mnav-panel a { padding: 10px 12px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.mnav-panel a:hover, .mnav-panel a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-2); }
@media (min-width: 1000px) {
  .nav { display: flex; }
  .header-actions .header-link { display: inline-flex; }
  .mnav { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r); font: 600 15px/1.2 var(--font-ui); text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-2); color: var(--paper); }
.btn-secondary { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { background: var(--paper-2); border-color: var(--line-3); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-tint); color: var(--accent-2); }
.btn-danger { background: var(--paper); border-color: var(--err-line); color: var(--err); }
.btn-danger:hover { background: var(--err-tint); color: var(--err-ink); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }
.on-rail.btn-secondary { background: transparent; border-color: var(--rail-line); color: var(--paper); }
.on-rail.btn-secondary:hover { background: var(--rail-2); color: var(--paper); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Pills, notes, markers ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 1px 10px; border: 1px solid var(--line-2);
  border-radius: var(--pill); background: var(--paper); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pill-ok { background: var(--sugg-tint); border-color: var(--sugg-line); color: var(--sugg-ink); }
.pill-warn { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); }
.pill-err { background: var(--err-tint); border-color: var(--err-line); color: var(--err-ink); }
.pill-info { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-2); }
.pill-neutral { background: var(--nc-tint); border-color: var(--line-2); color: var(--ink-2); }
.pill-demo { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); letter-spacing: .03em; }

.note { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: var(--r); font-size: 15px; line-height: 1.5; }
.note > .ic { margin-top: 2px; }
.note > div { min-width: 0; display: grid; gap: 4px; }
.note-info { background: var(--accent-tint); border-color: var(--accent-line); color: var(--ink); }
.note-info > .ic { color: var(--accent); }
.note-warn { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); }
.note-err { background: var(--err-tint); border-color: var(--err-line); color: var(--err-ink); }
.note-ok { background: var(--sugg-tint); border-color: var(--sugg-line); color: var(--sugg-ink); }
.note strong { font-weight: 700; }

.mk { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.mk-err .mk-shape { fill: var(--err); }
.mk-warn .mk-shape { fill: var(--warn); }
.mk-sugg .mk-shape { fill: var(--sugg); }
.mk .mk-glyph { stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; fill: none; }

/* ---------- Sections ---------- */
.section { padding-block: 56px; }
.section-desk { background: var(--desk); }
.section-head { display: grid; gap: 10px; max-width: 68ch; margin-bottom: 28px; }
.section-head .lead { font-size: 17px; }
@media (min-width: 900px) {
  .section { padding-block: 80px; }
}
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; }
  .split-flip > :first-child { order: 2; }
}
.checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks li > .ic { color: var(--sugg); margin-top: 3px; }
.steps { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: step; }
.steps > li::before {
  content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent-2); font-weight: 700; font-size: 14px;
}
.steps > li > div { display: grid; gap: 4px; min-width: 0; }

/* ---------- Hero ---------- */
.hero { background: var(--desk); border-bottom: 1px solid var(--line); }
.hero > .wrap { display: grid; gap: 44px; align-items: center; padding-block: 44px 56px; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.hero-copy h1 { max-width: 17ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-2); font-size: var(--fs-sm); }
.hero-facts span { display: inline-flex; align-items: center; gap: 6px; }
.hero-facts .ic { color: var(--accent); }
@media (min-width: 1000px) {
  .hero > .wrap { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; padding-block: 72px 88px; }
}

/* A page of a công văn, set in Times New Roman as NĐ 30 requires, with the App's markings. */
.sheet-stage { position: relative; min-width: 0; }
.sheet {
  position: relative; padding: 30px 26px 34px 34px; background: var(--paper); box-shadow: var(--shadow-sheet);
  border-radius: 2px; color: var(--doc-ink); font: 13.5px/1.42 var(--font-doc);
}
.sheet-tag { position: absolute; top: 10px; right: 12px; font: 600 11.5px/1 var(--font-ui); color: var(--ink-3); letter-spacing: .04em; }
.sheet-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 10px; text-align: center; }
.sheet-head > div { display: grid; gap: 2px; align-content: start; }
.sheet .caps { text-transform: uppercase; }
.sheet .b { font-weight: 700; }
.sheet .i { font-style: italic; }
.sheet-rule { justify-self: center; width: 46%; height: 0; border-top: 1px solid var(--doc-ink); margin: 2px 0 6px; }
.sheet-rule-wide { width: 62%; }
.sheet-meta { font-size: 13px; }
.sheet-to { margin-top: 18px; text-align: center; }
.sheet-body { margin-top: 12px; text-align: justify; text-indent: 1.27cm; }
.sheet-blank { margin-top: 8px; color: var(--sugg); font: 12px/1.3 var(--font-ui); display: flex; gap: 6px; align-items: center; }
.flag-err { text-decoration: underline wavy var(--err); text-decoration-thickness: 1.4px; text-underline-offset: 3px; }
.flag-warn { text-decoration: underline dashed var(--warn); text-decoration-thickness: 1.4px; text-underline-offset: 3px; }
.findings {
  position: relative; margin-top: 16px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r2); box-shadow: var(--shadow-pop); display: grid; gap: 10px;
}
.findings-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.findings ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.finding { display: flex; gap: 10px; padding: 8px 10px; border-radius: var(--r); font-size: 14.5px; line-height: 1.4; }
.finding > div { display: grid; gap: 2px; min-width: 0; }
.finding small { color: var(--ink-3); font-size: 12.5px; }
.finding.is-current { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
.fix-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.cmp { display: grid; gap: 1px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); min-width: 92px; }
.cmp span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmp b { font-size: 14px; }
.sheet .qh { font-size: .93em; }
@media (min-width: 640px) {
  .findings { width: min(390px, 86%); margin: -72px -12px 0 auto; }
  .sheet { padding-bottom: 100px; }
}

/* ---------- Product proof blocks ---------- */
.facts-strip { border-bottom: 1px solid var(--line); background: var(--paper); }
.facts-strip .wrap { display: flex; flex-wrap: wrap; gap: 10px 32px; padding-block: 18px; color: var(--ink-2); font-size: 15px; }
.facts-strip span { display: inline-flex; align-items: center; gap: 8px; }
.facts-strip .ic { color: var(--accent); }

.groups { display: grid; gap: 16px; }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.group { display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.group h3 { display: flex; gap: 10px; align-items: center; }
.group h3 .ic { color: var(--accent); }
.group > p { color: var(--ink-2); font-size: 15px; }
.group ul { list-style: none; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }

.shot { border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sheet); }
.shot img { width: 100%; }
.shot-caption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.shot-narrow { max-width: 380px; margin-inline: auto; }

.duo { display: grid; gap: 16px; }
@media (min-width: 800px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo > div { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r2); background: var(--paper); border: 1px solid var(--line); }
.duo h3 { display: flex; gap: 10px; align-items: center; }
.duo h3 .ic { color: var(--accent); }

.cta-band { background: var(--rail); color: var(--rail-ink); }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding-block: 44px; }
.cta-band h2 { color: var(--paper); }
.cta-band p { max-width: 56ch; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-price { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.plan-per { font-size: 14px; color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { color: var(--sugg); margin-top: 3px; }
.plan li.no .ic { color: var(--ink-3); }
.plan .btn { margin-top: auto; }
.mini-plans { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); overflow: hidden; }
.mini-plans a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.mini-plans a:first-child { border-top: 0; }
.mini-plans a:hover { background: var(--paper-2); }
.mini-plans b { font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .row-head { font-weight: 600; color: var(--ink); }
.table-compare td:first-child { width: 26%; font-weight: 600; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .label { font-weight: 600; font-size: 15px; }
.hint { font-size: 13.5px; color: var(--ink-3); }
.input {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: 16px/1.4 var(--font-ui);
}
textarea.input { min-height: 96px; resize: vertical; }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--sel); }
.input.mono { font-family: var(--font-mono); letter-spacing: .03em; }
.input-key { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.input[aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err-ink); font-size: 14px; }
.field-ok { color: var(--sugg-ink); font-size: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.choice {
  position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--paper); cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--line-3); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-tint); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice b { font-size: 15px; }
.choice span { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.segmented { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--paper-2); flex-wrap: wrap; }
.segmented a, .segmented label { padding: 7px 14px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.segmented a[aria-current="page"], .segmented label:has(input:checked) { background: var(--paper); color: var(--accent-2); box-shadow: var(--shadow-card); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Layout for buying ---------- */
.checkout { display: grid; gap: 28px; padding-block: 36px 72px; }
@media (min-width: 980px) {
  .checkout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .checkout aside { position: sticky; top: calc(var(--header-h) + 20px); }
}
.progress { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; color: var(--ink-3); }
.progress li { display: inline-flex; align-items: center; gap: 8px; }
.progress li::before { content: attr(data-n); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; }
.progress li.is-done { color: var(--sugg-ink); }
.progress li.is-done::before { background: var(--sugg-tint); border-color: var(--sugg-line); }
.progress li.is-current { color: var(--ink); font-weight: 600; }
.progress li.is-current::before { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.summary { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper-2); }
.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv-left dd { text-align: left; }
.total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.pay { display: grid; gap: 24px; }
@media (min-width: 760px) and (max-width: 979px), (min-width: 1180px) { .pay { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.qr { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.qr img { width: 210px; height: 210px; image-rendering: pixelated; }
.qr-small img { width: 168px; height: 168px; }
.stamp {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 12px;
  border: 2px solid var(--err); border-radius: var(--r); background: var(--paper); color: var(--err); font-weight: 800;
  letter-spacing: .08em; font-size: 15px;
}
.copy-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.copy-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.copy-list > div:first-child { border-top: 0; }
.copy-list span { font-size: 13px; color: var(--ink-3); grid-column: 1 / -1; }
.copy-list b { font-size: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.copy-list .hot { color: var(--accent-2); font-family: var(--font-mono); font-size: 18px; letter-spacing: .04em; }

.keybox {
  padding: 14px 18px; border: 1px dashed var(--accent-line); border-radius: var(--r2); background: var(--accent-tint);
  color: var(--accent-2); font: 600 clamp(17px, 3.4vw, 24px)/1.3 var(--font-mono); letter-spacing: .06em; overflow-wrap: anywhere;
}
.codebox {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
  font: 13px/1.45 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; max-height: 9em; overflow-y: auto;
}
.machine-code {
  display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 14px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper-2); font: 15px/1.5 var(--font-mono); color: var(--ink); justify-content: start;
}
.machine-code .prefix { grid-column: 1 / -1; color: var(--ink-3); font-size: 13px; }

/* ---------- Docs ---------- */
.page-head { background: var(--desk); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: grid; gap: 12px; padding-block: 40px 36px; }
.page-head .lead { font-size: 17px; }
.docs { display: grid; gap: 28px; padding-block: 36px 80px; }
@media (min-width: 1000px) {
  .docs { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
  .toc { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
}
.toc { display: grid; gap: 8px; font-size: 15px; min-width: 0; }
.toc ol { list-style: none; padding: 0; display: grid; gap: 1px; }
.toc a { display: block; padding: 6px 10px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.toc a:hover { background: var(--paper-2); color: var(--ink); }
.prose { max-width: 74ch; min-width: 0; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 52px; padding-top: 4px; font-size: 25px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 30px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose .table-wrap, .prose .note, .prose .shot { margin-top: 18px; }
.prose .ui { font-weight: 600; }
.prose .steps { padding-left: 0; }
.prose .steps > li + li { margin-top: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 40px; }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px; padding: 16px 2px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 2px 18px; color: var(--ink-2); display: grid; gap: 10px; max-width: 72ch; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group h2 { font-size: 21px; margin-bottom: 12px; }

.draft-banner { background: var(--warn-tint); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--r); padding: 12px 16px; font-size: 15px; }

/* ---------- Activation site and tools ---------- */
.kh-main { background: var(--desk); padding-block: 28px 72px; min-height: 70vh; }
.kh-main .wrap { max-width: 760px; display: grid; gap: 20px; }
.panel { display: grid; gap: 18px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow-card); min-width: 0; }
@media (max-width: 520px) { .panel { padding: 18px; } }
.panel-head { display: grid; gap: 6px; }
.panel-quiet { background: var(--paper-2); box-shadow: none; }
.tasks { display: grid; gap: 10px; }
@media (min-width: 640px) { .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--paper); color: var(--ink); text-decoration: none;
}
.task:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--ink); }
.task .ic { grid-row: span 2; color: var(--accent); margin-top: 2px; }
.task b { font-size: 15.5px; }
.task span { font-size: 14px; color: var(--ink-2); }
.result-head { display: flex; gap: 12px; align-items: flex-start; }
.result-head .ic { margin-top: 2px; }
.result-ok .result-head .ic { color: var(--sugg); }
.result-err .result-head .ic { color: var(--err); }
.result-warn .result-head .ic { color: var(--warn); }
.result-head h2 { font-size: 21px; }
.sub-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.admin-head { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.admin-head .wrap { display: grid; gap: 14px; padding-top: 26px; }
.admin-tabs { display: flex; gap: 2px; overflow-x: auto; }
.admin-tabs a { padding: 10px 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; font-size: 15px; }
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a[aria-current="page"] { color: var(--accent-2); border-color: var(--accent); }
.admin-body { display: grid; gap: 20px; padding-block: 28px 72px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form .input { min-height: 34px; padding: 5px 10px; font-size: 14.5px; width: auto; flex: 1 1 180px; }

.mail { border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.mail + .mail { margin-top: 10px; }
.mail summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 16px; cursor: pointer; list-style: none; }
.mail summary::-webkit-details-marker { display: none; }
.mail summary b { overflow-wrap: anywhere; }
.mail summary span { font-size: 13.5px; color: var(--ink-3); }
.mail summary .pill { justify-self: end; font-size: 12.5px; }
.mail-body { padding: 0 16px 16px; display: grid; gap: 12px; }
.mail-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.55 var(--font-ui); color: var(--ink); }
.mail-frame { display: block; width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--r); background: var(--desk); }
.mail-text > summary { display: inline-block; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent-2); }
.mail-text[open] > summary { margin-bottom: 10px; }
.mail-text pre { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); font-size: 14px; }

.machine { display: grid; gap: 16px; }
.machine-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.machine-top h2 { font-size: 20px; display: flex; gap: 10px; align-items: center; }
.machine-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .machine-grid { grid-template-columns: 190px minmax(0, 1fr); } }
.machine-block { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.machine-block h3 { font-size: 15px; }
.status-line { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r); border: 1px solid; }
.status-ok { background: var(--sugg-tint); border-color: var(--sugg-line); color: var(--sugg-ink); }
.status-warn { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn-ink); }
.status-err { background: var(--err-tint); border-color: var(--err-line); color: var(--err-ink); }
.status-info { background: var(--accent-tint); border-color: var(--accent-line); color: var(--ink); }
.status-line small { font-size: 13.5px; opacity: .92; }

/* ---------- Footer ---------- */
.site-footer { background: var(--rail); color: var(--rail-ink); font-size: 15px; }
.site-footer .cols { display: grid; gap: 28px; padding-block: 48px 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-footer h4 { margin-bottom: 12px; color: var(--paper); font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--rail-ink); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer .seller { display: grid; gap: 4px; font-size: 14px; }
.footer-base { border-top: 1px solid var(--rail-line); }
.footer-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 16px; font-size: 13.5px; }
.kh-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; font-size: 14px; }

/* Copy feedback */
[data-copy].is-copied { color: var(--sugg-ink); border-color: var(--sugg-line); background: var(--sugg-tint); }

.mk-nc .mk-shape { fill: var(--nc); }
@media (max-width: 479px) { .brand-sub { display: none; } }
@media (min-width: 480px) { .kh-header .header-actions .header-link { display: inline-flex; } }
.mnav > summary .label { display: none; }
@media (min-width: 420px) { .mnav > summary .label { display: inline; } }
.file-btn { position: relative; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan h2 { font-size: 19px; }

/* Plan picker on the order form: one row per plan, so five plans never leave an empty slot. */
.choice-list { display: grid; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--paper); overflow: hidden; }
.choice-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; font-size: 15.5px; }
.choice-row:first-child { border-top: 0; }
.choice-row:hover { background: var(--paper-2); }
.choice-row:has(input:checked) { background: var(--accent-tint); }
.choice-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.choice-row b { font-weight: 600; }
.choice-row .price { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The three "kiểm tra gì" cards share title, text and list rows, so their lists start on one line. */
@media (min-width: 900px) {
  .groups { grid-template-rows: auto auto auto; }
  .group { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
}

/* Grid children may shrink below their content width, so wide tables scroll inside .table-wrap instead of widening the page. */
:where(.split, .checkout, .admin-body, .docs, .duo, .groups, .pay, .machine-grid, .tasks) > * { min-width: 0; }
.kh-main .wrap > * { min-width: 0; }

/* Short pages: keep the footer at the bottom of the window. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.machine-grid > .qr { align-self: start; }

/* ---------- Motion (P3 D3: short, and off when Windows turns animations off) ---------- */
/* Page-to-page transition on the same site: the header and the demo bar stay put, the page content fades up.
   Browsers without cross-document view transitions simply navigate. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.demo-bar { view-transition-name: demo-bar; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* The header gains a shadow once the page scrolls under it. */
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-lift linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
}
@keyframes header-lift { to { box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } }

/* Page titles settle in on load. */
.page-head .wrap > * { animation: rise .6s var(--ease) both; }
.page-head .wrap > :nth-child(2) { animation-delay: .06s; }
.page-head .wrap > :nth-child(3) { animation-delay: .12s; }
.page-head .wrap > :nth-child(4) { animation-delay: .18s; }

/* Questions open smoothly where the browser can animate to height: auto. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq summary::after { transition: transform .25s var(--ease); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-2); }

/* Cards answer the pointer. */
.plan, .task, .group, .duo > div, .panel-hover {
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.plan:hover, .group:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 24, 40, .09); border-color: var(--accent-line); }
.task:hover { transform: translateY(-2px); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(26, 90, 153, .26); }
.btn { transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:active { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"])::view-transition-old(*), :root:not([data-motion="on"])::view-transition-new(*), :root:not([data-motion="on"])::view-transition-group(*) { animation: none !important; }
}

/* ---------- Guide figures, zoom ---------- */
.guide-fig { display: grid; gap: 10px; margin: 22px 0 8px; min-width: 0; }
.guide-fig img, .guide-fig .app-mock { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--paper); box-shadow: var(--shadow-sheet); }
.guide-fig-narrow { max-width: 460px; }
.guide-fig figcaption { font-size: 13.5px; color: var(--ink-3); }
.fig-pair { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 720px) { .fig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.fig-pair .guide-fig { margin: 0; }
.zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r2); transition: transform .2s var(--ease); }
.zoom:hover { transform: translateY(-2px); }
.lightbox { max-width: min(1280px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(14, 21, 34, .78); }
.lightbox img { display: block; max-width: min(1280px, 94vw); max-height: 86vh; width: auto; height: auto; border-radius: var(--r2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: var(--paper); }
.lightbox p { margin-top: 10px; color: #E6EBF3; font-size: 14px; text-align: center; }
.lightbox-close {
  position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-pop);
}
.lightbox[open] { animation: rise .25s var(--ease) both; }

/* Activation window of version 2.3, drawn in HTML for the guide. */
.app-mock { overflow: hidden; font-size: 13.5px; }
.app-mock-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 12.5px; }
.app-mock-bar .brand-mark, .app-mock-head .brand-mark { width: 18px; height: 18px; border-radius: 4px; font-size: 8px; }
.app-mock-x { margin-left: auto; color: var(--ink-3); }
.app-mock-body { display: grid; place-items: center; padding: 28px 16px; background: var(--paper-3); }
.app-mock-card { display: grid; gap: 12px; width: min(520px, 100%); padding: 22px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); box-shadow: var(--shadow-pop); }
.app-mock-head { display: flex; gap: 12px; align-items: center; }
.app-mock-head .brand-mark { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.app-mock-head div { display: grid; }
.app-mock-head b { font-size: 17px; }
.app-mock-head > div > span, .app-mock-text span { color: var(--ink-2); font-size: 12.5px; }
.app-mock-title { font-size: 16px; }
.app-mock-option { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); }
.app-mock-option:first-of-type { border-color: var(--accent-line); background: var(--accent-tint); }
.app-mock-text { display: grid; gap: 2px; }
.app-mock-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app-mock-input { flex: 1 1 200px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font: 12.5px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--ink); }
.app-mock .btn { pointer-events: none; }
.app-mock-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.app-mock-link { color: var(--accent); }

/* ---------- Articles on thể thức (huong-dan/the-thuc-…, cach-trinh-bay-cong-van, loi-the-thuc-thuong-gap) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-cap); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); text-decoration: underline; }

/* Tables of values: headings may wrap, and cells get tighter on a phone so three columns fit a 375 px screen. */
.table-fit th { white-space: normal; }
@media (max-width: 560px) {
  .table-fit { font-size: 14px; }
  .table-fit th, .table-fit td { padding: 8px 10px; }
}
.table-size td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .is-ok { color: var(--sugg-ink); font-weight: 600; white-space: nowrap; }
.table .is-bad { color: var(--err-ink); font-weight: 600; white-space: nowrap; }
.table code { font-size: 14px; white-space: nowrap; }
.table-pair { display: grid; gap: 14px; margin-top: 18px; }
.prose .table-pair .table-wrap { margin-top: 0; }
@media (min-width: 720px) { .table-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* A few lines of a document, set in the font NĐ 30 asks for. */
.doc-sample { display: grid; gap: 2px; justify-items: start; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--doc-ink); font: 15.5px/1.45 var(--font-doc); }
.doc-center { justify-items: center; text-align: center; }
.doc-small { font-size: 14px; }
.doc-sample .pad { padding-left: 3.6em; }

/* One fault: what it looks like, the rule, how to fix it in Word. */
.fault { display: grid; gap: 4px 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper-2); }
.fault dt { font-size: var(--fs-cap); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.fault dd { margin: 0 0 10px; min-width: 0; }
.fault dd:last-child { margin-bottom: 0; }
.prose .fault ol, .prose .fault ul { margin: 0; padding-left: 20px; }
@media (min-width: 720px) {
  .fault { grid-template-columns: 140px minmax(0, 1fr); row-gap: 12px; }
  .fault dt { padding-top: 3px; }
  .fault dd { margin: 0; }
}
.fault-app { font-size: 15px; color: var(--ink-2); }
.fault-app b { color: var(--ink); }

/* The closing box, the other articles, the legal basis. */
.guide-cta { display: grid; gap: 12px; margin-top: 48px; padding: 22px 24px; border: 1px solid var(--accent-line); border-radius: var(--r2); background: var(--accent-tint); }
.prose .guide-cta h2, .prose .guide-next h2 { margin: 0; padding: 0; font-size: 21px; }
.guide-next { display: grid; gap: 12px; margin-top: 36px; }
.prose .guide-next ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.prose .guide-next li + li { margin-top: 0; }
.guide-next li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); }
.guide-next li a { font-weight: 600; }
.guide-next li span { font-size: var(--fs-sm); color: var(--ink-2); }
.guide-source { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }

/* First page of a công văn, drawn in HTML so its words stay text. The page keeps the A4 ratio and its padding is the
   NĐ 30 margins of a 210 mm page (left 30, right 15, top and bottom 20); every size follows the page width (cqi), so the
   drawing shrinks like a picture on a phone instead of widening it. Not to the scale of the real letters. */
.cv-figure { max-width: 560px; margin-inline: auto; }
.cv-map { container-type: inline-size; }
.cv-page {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 210 / 297; padding: 9.5cqi 7.1cqi 9.5cqi 14.3cqi;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px; box-shadow: var(--shadow-sheet);
  color: var(--doc-ink); font: 12px/1.3 var(--font-doc); font-size: max(8.5px, 2.4cqi);
}
.cv-margin { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--accent-2); font: 600 10px/1.1 var(--font-ui); font-size: max(8px, 1.8cqi); white-space: nowrap; }
.cv-margin-top, .cv-margin-bottom { left: 14.3cqi; right: 7.1cqi; height: 9.5cqi; }
.cv-margin-top { top: 0; }
.cv-margin-bottom { bottom: 0; }
.cv-margin-left, .cv-margin-right { top: 9.5cqi; bottom: 9.5cqi; }
.cv-margin-left { left: 0; width: 14.3cqi; }
.cv-margin-right { right: 0; width: 7.1cqi; }
.cv-margin-left > span, .cv-margin-right > span { writing-mode: vertical-rl; }
.cv-margin-left > span { transform: rotate(180deg); }
.cv-area { flex: 1; display: flex; flex-direction: column; gap: 3cqi; padding: 2.4cqi 1.6cqi 1.6cqi; outline: 1px dashed var(--accent-line); }
/* Two columns, three rows: the issuer (2) beside the national title (1), the number (3) on the line of the place and date (4). */
.cv-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3cqi 2.4cqi; align-items: start; text-align: center; }
.cv-box { position: relative; display: grid; gap: .25em; justify-items: center; padding: 1.8cqi 1.2cqi 1.2cqi; border: 1px dashed var(--line-3); border-radius: 3px; }
.cv-o {
  position: absolute; top: 0; left: 1cqi; transform: translateY(-55%); padding: .2em .45em; border-radius: var(--pill);
  background: var(--accent); color: var(--paper); font: 700 10px/1 var(--font-ui); font-size: max(8px, 1.7cqi); white-space: nowrap;
}
.cv-caps { text-transform: uppercase; }
.cv-b { font-weight: 700; }
.cv-i { font-style: italic; }
.cv-under { border-bottom: 1px solid currentColor; padding-bottom: .15em; }
.cv-rule { width: 40%; border-top: 1px solid currentColor; margin-top: .15em; }
.cv-to { justify-items: start; padding-left: 4cqi; }
.cv-body { flex: 1; align-content: start; justify-items: stretch; gap: 1.6cqi; text-align: left; }
.cv-body span { text-indent: 1.5em; }
.cv-body i { display: block; height: .45em; border-radius: 2px; background: var(--line); }
.cv-body i:first-of-type { margin-left: 1.5em; }
.cv-body i:last-child { width: 62%; }
.cv-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4cqi; align-items: start; }
.cv-recv { justify-items: start; text-align: left; font-size: .86em; }
.cv-recv .cv-b { font-size: 1.1em; }
.cv-sign { min-height: 22cqi; align-content: start; }
.cv-sign .cv-note { color: var(--ink-3); font: italic .9em/1.2 var(--font-doc); padding-block: 1.4cqi; }