/* Hallmark · shape: Workbench, the tool in the hero · genre: atmospheric · theme: Midnight (by request) · job: try · draw: manual
 * hero: Stage, the form beside a live figure · nav: edge-aligned wordmark, three anchors, one action · footer: hairline mast with the placeholders · imagery: none, the product itself · signature: a real countdown set in the expanded cut, ticking on the first screen
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: E, Vietnamese stacked marks under a light expanded cut; heads opened to line-height 1.1 and checked at 300 and 400 */
/* Owner rules over the theme: wide frame (24–48px gutters, no narrow cap), justified multi-line paragraphs, one Midnight face only for this release */
/* Hallmark · waive 39b · button.row is a full-width list entry holding an idea and its time, not a marketing control · the six idea rows on hairlines are the section itself */
/* Hallmark · dismissed 49 · each long label is a full-width row button that wraps on a phone by design; nowrap would push the time past the edge */
/* Hallmark · dismissed 58 · Vietnamese is monosyllabic, so counts run far above English: the head is 39 characters and the FAQ was asked for by the brief */
/* Hallmark · answered F22 · the owner asked for justified paragraphs on every width; Vietnamese has no hyphenation dictionary, so text-wrap: pretty and wide measures keep word gaps even */

/* ---------- Theme Midnight (Hallmark, MIT): khối :root giữ nguyên ---------- */
:root {
  --color-paper: oklch(14% 0.048 264); --color-paper-2: oklch(18.5% 0.052 264); --color-paper-3: oklch(23% 0.055 264);
  --color-ink: oklch(95% 0.016 250); --color-ink-2: oklch(88% 0.05 245); --color-muted: oklch(73% 0.04 256);
  --color-rule: oklch(29% 0.058 264); --color-rule-2: oklch(40% 0.06 262);
  --color-accent: oklch(80% 0.11 230); --color-accent-2: oklch(58% 0.1 236); --color-accent-ink: oklch(16% 0.05 264); --color-focus: oklch(84% 0.12 228);
  --font-display: "Mona Sans", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display); --font-outlier: var(--font-display);
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px;
  --shadow-card: 0 24px 48px -24px oklch(6% 0.04 264 / 0.7);
  --tracking-display: -0.015em; --display-weight: 300; --display-stretch: 125%;
}

/* ---------- Thang chung (Hallmark scaffold) và điều chỉnh của demnguoc.vn ---------- */
:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2rem, 3.2vw + 0.75rem, 3.5rem); --text-display: clamp(2.5rem, 4.6vw + 1rem, 5.25rem);
  --text-section: clamp(1.875rem, 2.2vw + 1rem, 3.25rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  /* Quy tắc của chủ site: khung gần sát mép, lề 24–48px trên máy tính, 16px trên điện thoại hẹp. */
  --gutter: clamp(16px, 2.5vw + 8px, 48px);
  --gap-columns: clamp(16px, 2vw, 32px);
  --section-gap: clamp(72px, 7vw + 40px, 144px);
  --head-line: 1.1;
  --z-modal: 400;
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-lg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}
main { flex: 1 0 auto; }
main:focus { outline: none; }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--color-rule-2); }
a:hover { text-decoration-color: var(--color-accent); }

h1, h2, h3 { margin: 0; font-family: var(--font-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1, h2 {
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display);
  line-height: var(--head-line);
  font-synthesis: none;
}
h1 { font-size: var(--text-display); max-width: 18ch; }
h2 { font-size: var(--text-section); max-width: 22ch; }
h3 { font-size: var(--text-title); font-weight: 500; line-height: 1.3; }

/* Đoạn nhiều dòng canh đều hai lề, kể cả trên điện thoại. */
p { margin: 0; text-align: justify; text-wrap: pretty; hyphens: manual; }
p:not([class]) { max-width: 68ch; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 52ch; }

dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

.container { width: 100%; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); text-decoration: none;
}
.skip:focus-visible { top: var(--space-md); }

/* Chế độ: trang chủ hoặc trang xem đồng hồ (hash bắt đầu bằng số phiên bản). */
.is-view .home-only { display: none !important; }
html:not(.is-view) .view-only { display: none !important; }

.settle { animation: settle var(--dur-long) var(--ease-out) both; }
@keyframes settle { from { opacity: 0.6; } }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill);
  background: none; color: var(--color-ink);
  font: 500 var(--text-md)/1.2 var(--font-body); font-stretch: 100%;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn--secondary { border-color: var(--color-rule-2); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn--secondary[aria-pressed="true"] { background: var(--color-paper-3); }

/* ---------- Đầu trang ---------- */
.site-head__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
}
.wordmark {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-size: var(--text-lg); letter-spacing: var(--tracking-display); line-height: 1.2;
  text-decoration: none; padding-block: var(--space-xs);
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); order: 3; width: 100%; }
.site-nav a, .site-foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: transparent;
}
.site-nav a:hover, .site-foot__nav a:hover { text-decoration-color: var(--color-accent); }
.site-head__action { margin-left: auto; min-height: 44px; padding-inline: var(--space-md); }
@media (min-width: 48rem) {
  .site-nav { order: 0; width: auto; margin-left: auto; }
  .site-head__action { margin-left: 0; }
  .is-view .site-head__action { margin-left: auto; }
}

/* ---------- Hero và form tạo ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg) var(--space-xl);
}
.hero__text { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 34rem);
    grid-template-areas: "text form" "preview form";
    grid-template-rows: auto 1fr;
    column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
    row-gap: var(--space-xl);
    padding-top: var(--space-xl);
  }
  .hero__text { grid-area: text; }
  .maker { grid-area: form; }
  .preview { grid-area: preview; align-self: end; }
}

.maker {
  display: grid; gap: var(--space-lg); align-content: start; align-self: start;
  padding: clamp(var(--space-md), 2.5vw, var(--space-xl));
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.maker__noscript { color: var(--color-ink); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field-group { display: grid; gap: var(--space-xs); }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 24rem) { .field-pair { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-md); } }
.field__echo { font-size: var(--text-sm); color: var(--color-ink-2); }
.field label, .seg legend {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); line-height: 1.4;
}
.field__optional { font-weight: 400; color: var(--color-muted); }
.field input, .field select {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card);
  background: var(--color-paper); color: var(--color-ink);
  font-size: var(--text-md);
  outline: 2px solid transparent; outline-offset: 1px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.field input::placeholder { color: var(--color-muted); opacity: 1; }
.field input:hover, .field select:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.field select { appearance: none; padding-right: var(--space-xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.field select option, .field select optgroup { background: var(--color-paper-2); color: var(--color-ink); }
.field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.85; }
.field__hint { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.field__error { font-size: var(--text-sm); color: var(--color-error); line-height: 1.5; font-weight: 500; }
.field__error .btn { min-height: 40px; margin-top: var(--space-xs); padding-inline: var(--space-md); font-size: var(--text-sm); }

.seg { display: grid; gap: var(--space-xs); }
.seg__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
@media (min-width: 30rem) { .seg__options { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; } }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.3; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.seg label:hover { background: var(--color-paper-3); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.maker__note { font-size: var(--text-sm); color: var(--color-ink-2); padding-left: var(--space-sm); border-left: 2px solid var(--color-rule-2); }
.maker__submit { display: grid; gap: var(--space-xs); }
.maker__submit .btn { width: 100%; }
.maker__status { font-size: var(--text-sm); color: var(--color-ink-2); min-height: 0; }
.maker__status:empty { display: none; }
.maker__status[data-tone="error"] { color: var(--color-error); }
.maker__privacy { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Đồng hồ ---------- */
.clock-wrap { container-type: inline-size; min-width: 0; }
.clock {
  --cells: 4;
  --fig-max: 6.5rem;
  display: grid;
  grid-template-columns: repeat(var(--cells), minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.clock[data-cells="3"] { --cells: 3; }
.clock[data-cells="1"] { --cells: 1; }
@container (max-width: 34rem) {
  .clock[data-cells="4"] { --cells: 2; }
}
@container (max-width: 22rem) {
  .clock[data-cells="3"] { --cells: 1; }
}
.clock__cell { container-type: inline-size; display: flex; align-items: baseline; gap: 0.4em; min-width: 0; }
.fig {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(2.25rem, 9vw, 5rem);
  font-size: min(var(--fig-max), 46cqi);
  white-space: nowrap;
}
.fig .d { display: inline-block; width: 0.71em; text-align: center; }
.clock__cell[data-digits="3"] .fig { font-size: min(var(--fig-max), 33cqi); }
.clock__cell[data-digits="4"] .fig { font-size: min(var(--fig-max), 25cqi); }
.clock__cell[data-digits="5"] .fig { font-size: min(var(--fig-max), 20cqi); }
.clock[data-cells="1"] .fig { font-size: min(var(--fig-max), 30cqi); }
.unit { font-stretch: 100%; font-weight: 400; font-size: var(--text-md); color: var(--color-ink-2); white-space: nowrap; }
.clock__ended {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display); line-height: var(--head-line);
  font-size: var(--text-display-s); text-align: left;
}

/* ---------- Xem trước ---------- */
.preview { display: grid; gap: var(--space-lg); min-width: 0; margin: 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.preview__title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display); line-height: var(--head-line); font-size: var(--text-title);
}
.preview__hint { font-size: var(--text-sm); color: var(--color-muted); }
html:not(.js) .preview { display: none; }

.spec { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.spec > div { display: grid; grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.spec dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.spec dd { color: var(--color-ink); }

/* ---------- Phần nội dung ---------- */
.section { padding-block: var(--section-gap); }
.section + .section { padding-top: 0; }
.band { background: var(--color-paper-2); color: var(--color-ink); }
.band .section { padding-block: var(--section-gap); }
.section__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.section__head p { color: var(--color-ink-2); max-width: 60ch; }
@media (min-width: 64rem) {
  .section__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
}
.section__source { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }

.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rows > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); align-items: baseline;
  width: 100%; padding: var(--space-md) var(--space-sm);
  border: 0; border-radius: var(--radius-card); background: none; color: inherit; text-align: left;
}
button.row { cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
button.row:hover { background: var(--color-paper-2); }
button.row:focus-visible { outline-offset: -2px; }
.row__title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  letter-spacing: var(--tracking-display); font-size: var(--text-xl); line-height: 1.25;
}
.row__meta { color: var(--color-ink-2); }
.row__aside { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.rows--static .row { grid-template-columns: minmax(0, 1fr) auto; }
.rows--static .row__title { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--space-lg); }
  .rows--static .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(4rem, auto); }
  .rows--static .row__title { grid-column: auto; }
  .row__aside { text-align: right; }
}
.band button.row:hover { background: var(--color-paper-3); }
/* Màn hình rất rộng: chia danh sách thành hai cột thay vì kéo một dòng dài hết khung. */
@media (min-width: 100rem) {
  .rows { columns: 2; column-gap: var(--space-2xl); }
  .rows > li { break-inside: avoid; }
}
html:not(.js) button.row { cursor: default; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); }
.steps li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.steps h3 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); font-size: var(--text-xl); line-height: var(--head-line); }
.steps p { color: var(--color-ink-2); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.faq { border-top: var(--rule-hair) solid var(--color-rule); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline;
  padding: var(--space-md) var(--space-sm); cursor: pointer; list-style: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--color-paper-2); }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__item summary::after { content: "+" / ""; font-size: var(--text-xl); line-height: 1; color: var(--color-ink-2); }
.faq__item[open] summary::after { content: "\2212" / ""; }
.faq__item h3 { font-size: var(--text-lg); }
.faq__item p { color: var(--color-ink-2); padding: 0 var(--space-sm) var(--space-lg); }

.end { display: grid; gap: var(--space-lg); align-items: end; }
.end h2 { max-width: 16ch; }
.end__action { display: grid; gap: var(--space-md); justify-items: start; }
.end__action p { color: var(--color-ink-2); }
@media (min-width: 64rem) { .end { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); } }

/* ---------- Trang xem đồng hồ ---------- */
.view { padding-block: var(--space-lg) var(--section-gap); }
.view__stage { display: grid; gap: var(--space-xl); align-content: start; }
.view__title { max-width: 24ch; }
.view__title.is-long { font-size: var(--text-display-s); }
.view__title:focus { outline: none; }
.clock--view { --fig-max: 10.5rem; }
.meter-row { display: grid; gap: var(--space-xs); max-width: 60rem; }
.meter { height: 2px; background: var(--color-rule-2); }
.meter > span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--color-accent); }
.meter-row__label { font-size: var(--text-sm); color: var(--color-muted); }
.spec--view { max-width: 60rem; }
.view__local { color: var(--color-ink-2); max-width: 60rem; }
.view__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.view__actions .btn { padding-inline: var(--space-sm); }
@media (min-width: 40rem) {
  .view__actions { display: flex; flex-wrap: wrap; }
  .view__actions .btn { padding-inline: var(--space-lg); }
}
.view__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.view__status:empty { display: none; }
.view__status[data-tone="error"] { color: var(--color-error); }
.view__manual { display: grid; gap: var(--space-2xs); max-width: 60rem; }
.view__manual label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.view__manual input { min-height: 48px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); width: 100%; }
.view__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }

/* Toàn màn hình: Fullscreen API, hoặc phủ kín trang khi máy không hỗ trợ. */
.view__stage.is-full {
  position: fixed; inset: 0; z-index: var(--z-modal);
  overflow: auto;
  align-content: center;
  padding: var(--gutter);
  background: var(--color-paper);
}
.view__stage:fullscreen { position: static; overflow: auto; align-content: center; padding: var(--gutter); background: var(--color-paper); }
.view__stage.is-full .clock--view { --fig-max: min(40vh, 22rem); }
.view__stage.is-full .view__actions > :not([data-fullscreen]),
.view__stage.is-full .view__note,
.view__stage.is-full .view__status,
.view__stage.is-full .view__manual { display: none; }

.broken { display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-2xl) var(--section-gap); }
.broken p { color: var(--color-ink-2); max-width: 60ch; }

/* ---------- Chân trang ---------- */
.site-foot { border-top: var(--rule-hair) solid var(--color-rule); }
.site-foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.site-foot__brand { display: grid; gap: var(--space-xs); justify-items: start; }
.site-foot__brand .wordmark { color: var(--color-ink); }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); align-content: start; }
.site-foot__contact { display: grid; gap: var(--space-xs); align-content: start; }
.site-foot__contact > div { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.site-foot__contact dt { font-weight: 500; color: var(--color-ink-2); }
.site-foot__credit { align-self: end; }
.site-foot__credit a { color: var(--color-ink-2); }
@media (min-width: 64rem) {
  .site-foot__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); }
  .site-foot__credit { grid-column: 1 / -1; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
}
.fill {
  padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 0;
  color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Trang 404 ---------- */
.notfound { display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-2xl) var(--section-gap); }
.notfound p { color: var(--color-ink-2); max-width: 60ch; }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}