/* Hallmark · shape: Manifesto · genre: playful · theme: Squeeze (deal 2/3, seed qua-web-zalo-linh-3fac·7fe66531·2026-11-10·r0) · brand: Thợ Đụng (spec 2026-11-10) · job: book · draw: d5dd02
 * hero: Counter · nav: masthead · footer: statement · imagery: none, the owner's mascot Tư Trâu as the one character moment · signature: the fixed price of the job you pick, set huge in the booking card
 * axes: dark/rounded-sans/warm · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the slogan alone is a promise; the card proves it with a real fixed price before anyone books */
/* Hallmark · waive 80 · Tư Trâu peeks over the booking card, one img · the buffalo is the owner's own mascot from the Thợ Đụng brand kit, not a stand-in picture */
/* Hallmark · dismissed 58 · the price list is the material: 37 priced jobs, one tab of 8 to 11 rows on screen at a time; the page total counts every tab */
/* Hallmark · dismissed render · the file:// pass blocks web fonts; the localhost shots show Baloo 2 and Be Vietnam Pro loaded */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- controls ---------- */
.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-bar) solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1.2 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: translate var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; translate: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--block { width: 100%; min-height: 52px; font-size: var(--text-lg); }
.card .btn:focus-visible, .card a:focus-visible { outline-color: var(--color-card-ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } .btn:active { translate: none; } }

.fill { padding: 0 var(--space-2xs); border: 1px dashed var(--color-muted); border-radius: var(--space-2xs); color: var(--color-muted); white-space: nowrap; }

/* ---------- nav: masthead ---------- */
.mast { border-bottom: var(--rule-bar) solid var(--color-rule); }
.mast__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); min-height: 80px; }
.mast__links { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.mast__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.mast__links a:hover { background: var(--color-paper-2); }
.mast__links a:active { background: var(--color-paper-3); }
.mast__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mast__logo { display: block; border-radius: var(--space-xs); }
.mast__logo img { width: auto; height: 48px; }
.mast__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.mast__act { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); }
.mast__tel { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); white-space: nowrap; }
.mast__act .btn { min-height: 44px; }

/* ---------- hero: Counter ---------- */
.hero { display: grid; align-items: center; min-height: calc(100dvh - 82px); padding-block: var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero h1 { max-width: none; font-size: clamp(2.75rem, 4.6vw + 1rem, 5.5rem); line-height: 1.04; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-muted); max-width: 34ch; font-weight: 500; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* the one raised surface: the booking card */
.booking { position: relative; }
.booking__mascot { position: absolute; z-index: var(--z-raised); top: 0; right: var(--space-lg); width: 104px; translate: 0 -52%; pointer-events: none; }
.card { position: relative; padding: var(--space-xl) var(--space-xl) var(--space-lg); background: var(--color-card); color: var(--color-card-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card__title { max-width: 12ch; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; }
.card form { display: grid; gap: var(--space-sm); }
.card__title + * { margin-top: var(--space-xs); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field > label, .field > legend, .seg > legend { padding: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-card-ink); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.seg > legend { margin-bottom: var(--space-xs); width: 100%; }
.seg--quiet > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-card-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.seg label:hover { background: var(--color-card-2); }
.seg input:checked + label { background: var(--color-card-ink); border-color: var(--color-card-ink); color: var(--color-card); }
.seg input:focus-visible + label { outline: 2px solid var(--color-card-ink); outline-offset: 2px; }
.seg input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-card-rule); border-radius: var(--radius-control); background: var(--color-card); color: var(--color-card-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 2px; }
.input:hover { border-color: var(--color-card-muted); }
.input:focus-visible { outline-color: var(--color-card-ink); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-card-2); }
select.input { appearance: none; padding-right: var(--space-2xl); background-image: linear-gradient(45deg, transparent 50%, var(--color-card-ink) 50%), linear-gradient(135deg, var(--color-card-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; text-overflow: ellipsis; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }

/* the signature: the fixed price, set huge */
.quote { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg) var(--space-md); border-radius: var(--radius-control); background: var(--color-card-2); }
.quote__fig { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-xs); font: var(--display-weight) clamp(2.75rem, 2.4vw + 1.5rem, 4rem)/1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: lining-nums tabular-nums; }
.quote__unit { font-size: var(--text-xl); letter-spacing: 0; }
.quote__meta { font-size: var(--text-sm); color: var(--color-card-muted); font-weight: 500; }
.quote__meta b { color: var(--color-card-ink); font-weight: 600; }
.help { min-height: 1lh; font-size: var(--text-sm); font-weight: 500; color: var(--color-card-muted); }
.help[data-state="error"] { color: var(--color-error); }
.help[data-state="ok"] { color: var(--color-success); font-weight: 600; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- sticky booking bar ---------- */
.bar { position: fixed; z-index: var(--z-sticky); inset-inline: 0; bottom: 0; background: var(--color-paper-3); border-top: var(--rule-bar) solid var(--color-rule); padding-block: var(--space-sm); padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom)); }
.bar__row { display: flex; align-items: center; gap: var(--space-md); }
.bar__job { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__job b { color: var(--color-ink); font: var(--display-weight) var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; margin-right: var(--space-xs); }
.bar .btn { min-height: 48px; }
.js .bar.is-away { visibility: hidden; opacity: 0; }
.js .bar { transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
@media (prefers-reduced-motion: reduce) { .js .bar { transition: none; } }

/* ---------- sections ---------- */
body { padding-bottom: var(--space-3xl); font-weight: 500; }
.sec { padding-block: var(--section-gap) 0; }
.sec--price { padding-top: var(--section-gap-s); }
.sec--terms { padding-block: var(--section-gap) var(--section-gap-s); }
.sec--close { padding-block: var(--section-gap-l) var(--section-gap); }
.band { padding-block: var(--section-gap-s); }
.band--deep { background: var(--color-paper-3); color: var(--color-ink); margin-top: var(--section-gap); }
.band--lift { background: var(--color-paper-2); color: var(--color-ink); }
.lead { color: var(--color-muted); }

/* price list: head beside a switcher of rows */
.price { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.price__head { position: sticky; top: var(--space-xl); }
.price__head .lead { margin-top: var(--space-lg); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.tabs [role="tab"] { min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out); }
.tabs [role="tab"]:hover { background: var(--color-paper-2); }
.tabs [role="tab"]:active { translate: 0 1px; }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tabs [role="tab"][aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.rows:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--space-xs); }
.rows ul { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-rule); }
.rows + .rows { margin-top: var(--space-2xl); }
.js .rows + .rows { margin-top: 0; }
.rows__nhom { margin-bottom: var(--space-md); font-size: var(--text-title); }
.js .rows__nhom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 11rem auto; align-items: center; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row__ten { font-weight: 600; font-size: var(--text-lg); line-height: 1.3; min-width: 0; }
.row__bh { font-size: var(--text-sm); color: var(--color-muted); }
.row__gia { text-align: right; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.row__gia small { font: 600 var(--text-sm)/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.row__gia--hoi { font: 600 var(--text-md)/1.2 var(--font-body); color: var(--color-ink-2); white-space: normal; }
.row__pick { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out); }
.row__pick:hover { background: var(--color-paper-2); }
.row__pick:active { translate: 0 1px; }
.row__pick:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* the promise, set as a statement on the deeper band */
.promise__line { max-width: 18ch; font: var(--display-weight) var(--text-display)/1.04 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.promise__sub { margin-top: var(--space-xl); max-width: 50ch; }

/* plain terms as rows */
.terms { margin: var(--space-2xl) 0 0; border-top: var(--rule-bar) solid var(--color-rule); }
.term { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.term dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: -0.01em; }
.term dd { margin: 0; font-size: var(--text-lg); color: var(--color-muted); }

/* one figure at statement size */
.fig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.fig__num { font: var(--display-weight) clamp(4.5rem, 8.5vw, 9.5rem)/0.9 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.fig__num span { font-size: 0.32em; letter-spacing: -0.01em; margin-left: var(--space-xs); }
.fig__text p { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lg); }
.fig__text .btn { margin-top: var(--space-xl); }

/* the close: hours, area, contacts and the booking again */
.close { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.facts { margin: var(--space-2xl) 0 0; display: grid; gap: var(--space-lg); }
.fact dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.fact dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.fact a { text-decoration-color: var(--color-accent); }
.fact a:hover { text-decoration-thickness: 2px; }
.close__mascot { width: 200px; margin-top: var(--space-2xl); }
.book--full { display: grid; gap: var(--space-md); }
.book--full .field > label, .book--full .seg > legend { color: var(--color-ink-2); }
.book--full .seg label { border-color: var(--color-rule); color: var(--color-ink); }
.book--full .seg label:hover { background: var(--color-paper-2); }
.book--full .seg input:checked + label { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.book--full .seg input:focus-visible + label { outline-color: var(--color-focus); }
.book--full .input { background: var(--color-paper-3); border-color: var(--color-muted); color: var(--color-ink); }
.book--full .input:hover { border-color: var(--color-ink); }
.book--full .input:focus-visible { outline-color: var(--color-focus); }
.book--full .input[aria-invalid="true"] { border-color: var(--color-error-2); }
.book--full select.input { background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.book--full select.input option, .book--full select.input optgroup { background: var(--color-card); color: var(--color-card-ink); }
.book--full .quote { background: var(--color-paper-2); }
.book--full .quote__meta { color: var(--color-muted); }
.book--full .quote__meta b { color: var(--color-ink); }
.book--full .help { color: var(--color-muted); }
.book--full .help[data-state="error"] { color: var(--color-error-2); }
.book--full .help[data-state="ok"] { color: var(--color-ink); }
.book--full .btn--primary:focus-visible { outline-color: var(--color-focus); }
.input--area { min-height: 112px; padding-block: var(--space-sm); resize: vertical; line-height: 1.5; }

/* footer: one closing sentence, the links beneath */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule); }
.foot__line { max-width: 22ch; font: var(--display-weight) var(--text-display-s)/1.05 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: var(--color-rule); }
.foot__links a:hover { text-decoration-color: var(--color-accent); }
.foot__legal { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .mast__row { grid-template-columns: auto minmax(0, 1fr); min-height: 64px; }
  .mast__links, .mast__tel { display: none; }
  .mast__logo img { height: 40px; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-3xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero__acts { margin-top: var(--space-lg); }
  .price, .fig, .close { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .price__head { position: static; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ten ten" "bh bh" "gia pick"; row-gap: var(--space-xs); }
  .row__ten { grid-area: ten; } .row__bh { grid-area: bh; } .row__gia { grid-area: gia; text-align: left; } .row__pick { grid-area: pick; }
  .term { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .fig__num { white-space: normal; }
  .close__mascot { width: 160px; }
}
@media (max-width: 40rem) {
  .card { padding: var(--space-lg) var(--space-md); }
  .booking__mascot { width: 104px; right: var(--space-md); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .seg:not(.seg--wrap) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .seg label { justify-content: center; }
  .bar__job b { font-size: var(--text-lg); }
  .tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row__ten { font-size: var(--text-md); }
}