/* Design token — nguồn sự thật về màu/bo/vùng chạm cho trang công khai.
   Giá trị trích từ docs/05-dac-ta-giao-dien-kiosk.md §3. Không chép hex vào template (ui-guidelines R1).
   --red được ghi đè theo màu của từng đơn vị trong layout.eta. */
:root {
  /* Nền trang ấm lên cho cùng nhiệt độ màu với dải đất — xem bảng màu đất bên dưới. */
  --bg: #f7f5f1;
  --paper: #ffffff;
  /* Nền nhạt sau ô ảnh của thẻ liên kết: 33 logo bộ ngành phần lớn nền trắng, đặt thẳng lên thẻ
     trắng thì ảnh "trôi" không thấy ranh giới. Trích từ bản gốc (--paper-alt). */
  --paper-alt: #f2ece0;
  --ink: #262626;
  /*
   * Ba giá trị dưới đây ĐẬM HƠN bản gốc trong docs/05 §3, vì giá trị gốc không đạt tương phản 4.5:1
   * theo guardrail CHẶN R4 khi ghép với nền tương ứng:
   *   --ink-soft #6B6B6B trên --border = 4.21 → #5F5F5F = 5.04
   *   --success  #2F7A5E trên --success-bg = 4.46 → #2A6E54 = 5.25
   *   --warn     #9A6A12 trên --warn-bg = 4.13 → #8A5E0F = 4.97
   * Badge mức độ là chỗ DUY NHẤT nói người dân có phải đến quầy hay không, và người dùng chính là
   * người cao tuổi — nên chọn theo R4 thay vì giữ nguyên 1:1 bảng màu. Cùng tông, chỉ tối hơn vài bậc.
   */
  --ink-soft: #5f5f5f;
  /*
   * ⚠️ BẢNG MÀU ĐẤT — bám Cổng Dịch vụ công Quốc gia (2026-09-09, theo yêu cầu).
   *
   * Đo trên `vpcp.dichvucong.gov.vn`: nav và dải hero `#ce7a58`, chân trang `#903938`, nút chính
   * `#ffc251` CHỮ ĐEN, chữ chính `#1e2f41`.
   *
   * 🔴 MỘT chỗ CỐ Ý KHÔNG chép: `#ce7a58` với chữ trắng chỉ đạt **3,21:1**, tức trang quốc gia đang
   * trượt chuẩn 4,5:1 ở đúng thanh điều hướng. R4 của dự án là guardrail CHẶN và người dùng chính là
   * người cao tuổi ở khoảng cách 60–80cm, nên tối đi 18% → `#9d5d43` = **5,15:1**. Mắt thường gần như
   * không phân biệt được hai màu; máy đo thì phân biệt.
   *
   * Tên biến giữ nguyên `--red*` dù màu nay là nâu đất: chúng xuất hiện ở ~200 chỗ trong 6 file CSS và
   * ở `layout.eta` (nơi màu của từng đơn vị ghi đè `--red`). Đổi tên là một diff khổng lồ không mang
   * thêm thông tin nào — vai trò của biến không đổi, chỉ giá trị đổi.
   */
  --red: #9d5d43;
  /*
   * 🔄 2026-09-10 — thôi chép `#903938` của chân trang cổng quốc gia.
   *
   * `#903938` có hue **0,7°**: mắt đọc ra ĐỎ GẠCH, không phải nâu. Và vì `--red-dark` KHÔNG bao giờ bị
   * đơn vị ghi đè (chỉ `--red`/`--on-red` được tiêm ở `layout.eta`), nó là mảng đỏ **duy nhất mà việc
   * đổi màu chủ đạo trong CSDL không chữa được** — đáy dải header, nền chân trang, mọi tiêu đề `h2`.
   * Người dùng báo "deploy xong vẫn còn nhiều màu đỏ" chính là thứ này.
   *
   * Nay DẪN XUẤT từ `--red` thay vì cố định: đơn vị chọn màu nào thì hai đầu dải header luôn cùng họ.
   * Trước đây đỉnh dải lấy từ CSDL còn đáy là hằng số, nên một đơn vị còn màu đỏ cũ cho ra dải
   * đỏ-tươi→đỏ-gạch, còn đơn vị đã sang nâu cho ra nâu→đỏ-gạch. Cả hai đều sai họ màu.
   *
   * Trộn về `#1a0f08` (nâu gần đen) chứ không về `#000`: pha với đen thuần làm màu xỉn mất sắc ấm.
   * Giá trị tĩnh `#784732` bên trên là bản đã tính sẵn cho `--red` mặc định — trình duyệt không hiểu
   * `color-mix` vẫn có một màu nâu đúng, thay vì rơi vào giá trị vô hiệu làm MẤT nền chân trang.
   *
   * ⚠️ Đo lại khi đổi tỉ lệ: `--red-dark` là nền của chân trang (chữ trắng + link `--gold`). Ở 72%
   * với `--red` mặc định: trắng **7,65:1**, vàng nghệ **4,77:1** — cả hai qua R4. Mọi chỗ dùng
   * `--red-dark` KHÁC đều là chữ/viền trên nền sáng, nên tối đi chỉ làm tương phản tăng.
   */
  --red-dark: #784732;
  --red-soft: #f7efe9;
  --red-border: #e6d3c7;
  /*
   * Vàng nghệ của cổng quốc gia. LUÔN đi với chữ đậm `--gold-ink` (13,1:1) — chữ trắng trên nền này chỉ
   * đạt 1,6:1, và đó là lỗi hay gặp nhất khi ai đó dùng màu vàng làm nền nút.
   */
  --gold: #ffc251;
  /* Xanh Zalo cho khối hỗ trợ ở trang chủ. Chữ trắng trên nền này đạt 5,1:1. */
  --zalo: #0068ff;
  --zalo-dark: #0050c8;
  --gold-ink: #3d2314;
  --gold-dark: #e0a231;
  /* Xanh mực của cổng quốc gia — dùng cho chân trang phụ và chữ trên nền sáng ấm. */
  --ink-deep: #1e2f41;
  /* Nền giấy ấm, thay cho `#fafaf9` lạnh, để cả trang cùng một nhiệt độ màu với dải đất. */
  --paper-warm: #f7f1e8;
  --success: #2a6e54;
  --success-bg: #e3f2ea;
  --warn: #8a5e0f;
  --warn-bg: #fbeed9;
  --border: #e7e4e0;
  --radius: 18px;
  --tap-min: 78px;

  /*
   * ⚠️ THANG CHỮ — thêm 2026-09-11. Trước đó dự án có **25 cỡ px riêng biệt** và 63% dồn trong dải
   * 12–15px: 12 · 12,5 · 13 · 13,33 · 13,5 · 14 · 14,5 · 15. Chênh 0,17px thì không ai nhìn ra, nhưng
   * cái giá thì có thật và có hai mặt:
   *
   * 1. Không có SÀN. Chữ nhỏ nhất người dân phải đọc là `.rail-text small` **12px** ("375 thủ tục"),
   *    trong khi người dùng chính là người cao tuổi đứng cách màn 60–80cm.
   * 2. A+/A− phải liệt kê từng lớp một trong `kiosk.css` — và lớp nào bị quên thì đứng yên vĩnh viễn,
   *    im lặng. Đo thật trước bản vá: bấm A+ ở `/danh-ba` không một chữ nào nhúc nhích.
   *
   * Sáu bậc, đáy là 14px. `--fs-xs` VỪA là bậc nhỏ nhất VỪA là sàn — cùng loại ràng buộc với
   * `--tap-min`, và đặt cạnh nhau ở đây là cố ý.
   *
   * 🔴 `kiosk.css` KHAI LẠI đúng sáu biến này bên trong `.content` với hệ số `--fs`. Nhờ vậy A+/A−
   * chạm tới mọi chữ nội dung mà KHÔNG đụng header/rail/chân trang — đúng phạm vi `docs/05` §6 chốt.
   * Hệ quả: từ nay **chữ nội dung phải khai bằng token**, viết số px thẳng là tự loại mình khỏi A+.
   */
  --fs-xs: 14px;
  --fs-sm: 15px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;

  /*
   * Chrome trang QUẢN TRỊ — nhóm trung tính dùng chung cho shell admin. Trang công khai không dùng
   * tới, nhưng giữ chung một nguồn sự thật về token (ui-guidelines R1) thay vì rải hex trong admin.css.
   * Bóng đổ dùng đen trung tính (không phải màu thương hiệu) nên đặt sẵn giá trị ở đây, component chỉ
   * tham chiếu var(); hiệu ứng mờ theo màu đỏ dùng color-mix để khỏi chép mã màu.
   */
  --ink-strong: #1b1b1b;
  --surface-sunk: #f3f2f0;
  --shadow-sm: 0 1px 2px rgb(23 23 23 / 6%), 0 1px 3px rgb(23 23 23 / 7%);
  --shadow-md: 0 8px 24px rgb(23 23 23 / 8%), 0 2px 8px rgb(23 23 23 / 6%);
  --radius-sm: 10px;
  --radius-md: 14px;
}

/*
 * Bản dẫn xuất của `--red-dark` — tách ra `@supports` thay vì khai hai lần liên tiếp trong `:root`.
 *
 * Lý do phải làm đúng cách này: biến tuỳ biến nhận MỌI chuỗi token lúc phân tích cú pháp, nên trình
 * duyệt không hiểu `color-mix` vẫn nhận declaration thứ hai và ghi đè bản tĩnh — rồi mới hỏng lúc thay
 * thế vào `background: var(--red-dark)`, và hỏng ở đó nghĩa là thuộc tính thành "không đặt": chân trang
 * MẤT NỀN, chữ trắng trên nền trắng. `@supports` hỏi trước, nên bản tĩnh mới thật sự là bản dự phòng.
 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --red-dark: color-mix(in srgb, var(--red) 72%, #1a0f08);
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/*
 * Cột dọc chiếm trọn chiều cao khung nhìn, `main` co giãn — để CHÂN TRANG luôn nằm ở đáy.
 *
 * Đo trước bản vá ở kiosk 900px: `/danh-ba` của một đơn vị mới có 1 cán bộ kết thúc ở y=743, còn lại
 * **157px nền trơn** phía dưới chân trang. Trang trông như bị cắt dở. Chín trang module đều gặp, vì
 * chúng là những trang hay rỗng nhất lúc đơn vị vừa mở.
 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  /* Chỉ khai font ĐANG TỰ LƯU. Trước đây stack còn 'Inter' nhưng nó không bao giờ được dùng tới
     (Be Vietnam Pro đứng trước và luôn có), mà lại có thể bắt phải một bản Inter cài sẵn trên máy
     người dùng và cho ra chữ khác ý đồ thiết kế. */
  font-family: 'Nunito', system-ui, sans-serif;
  line-height: 1.45;
}

/*
 * `--on-red`: màu chữ đọc được trên nền màu chủ đạo, do `readableInk` tính ở máy chủ và tiêm vào
 * `:root` (xem `layout.eta`). Mặc định trắng cho màu đỏ gốc. Viết cứng `#fff` ở đây là để cán bộ chọn
 * một màu sáng thì chữ tụt dưới ngưỡng tương phản 4,5:1 của R4 — trên MỌI trang, không ai báo.
 */
.site-header {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: var(--on-red, #fff);
  /*
   * 8px, không phải 14px.
   *
   * Chiều cao header do phần tử CAO NHẤT trong nó quyết định: ở kiosk là cụm A−/A+/⌂ 78px (R2, đã đổi
   * 24px chiều cao để lấy nó, không được hạ lại), ở chế độ thường là ô logo 54px. Đệm dọc là phần DUY
   * NHẤT cắt được mà không đụng vùng chạm nào — và header ĐƯỢC GHIM, nên mỗi pixel ở đây là một pixel
   * người dân mất trên mọi trang, ở mọi vị trí cuộn.
   *
   * Đo ở 1400×900: kiosk 110→98px, chế độ thường 86→74px.
   */
  padding: 8px 26px;
  display: flex;
  align-items: center;
  /*
   * `flex-start`, không phải `space-between`: cụm công cụ (chữ chạy tên hệ thống, hotline, kiosk) đứng
   * SÁT tên đơn vị thay vì bị đẩy ra mép phải. ≤720px không ảnh hưởng: `.brand` có `flex-grow: 1` ở đó
   * nên vẫn tự đẩy cụm công cụ sang phải.
   */
  justify-content: flex-start;
  gap: 16px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
  /*
   * Nét vàng nghệ dưới header — dấu hiệu dễ nhận nhất của Cổng DVC Quốc gia, và là chỗ DUY NHẤT màu
   * vàng được dùng làm mảng lớn mà không kèm chữ, nên không vướng ngưỡng tương phản.
   */
  border-bottom: 4px solid var(--gold);
  /*
   * GHIM header ở MỌI kích thước — `docs/05` §điểm ngắt đã đặc tả điều này cho ≤640px, nhưng nó cần cho
   * kiosk hơn cả điện thoại: người dân cuộn danh sách 133 thủ tục của một phòng ban là mất luôn nút "⌂"
   * (đường "làm lại từ đầu" duy nhất), mất đồng hồ và mất A+/A−. Bản gốc không bao giờ rơi vào cảnh đó
   * vì nó khoá cả khung và chỉ cho vùng nội dung cuộn.
   *
   * Dùng `sticky` chứ không dựng lại thành khung `overflow:hidden` như bản gốc: cả trang vẫn cuộn bình
   * thường (giữ được deep-link và phím Home/End), mà không mất thanh công cụ khỏi tầm mắt.
   */
  position: sticky;
  top: 0;
  z-index: 40;
}

/*
 * Chân trang. Bản gốc có ở 6/8 trang; nó là đường liên hệ duy nhất còn trong tầm mắt sau khi người dân
 * cuộn hết một danh sách dài.
 */
.site-footer {
  margin-top: 18px;
  /*
   * MỘT HÀNG khi còn chỗ ngang, không xếp chồng.
   *
   * Tên đơn vị và các đường liên hệ là hai mẩu chữ ngắn; ở màn 1400px chúng chiếm chưa tới nửa bề
   * ngang mà vẫn ăn hai dòng, tức đổi 26px chiều cao lấy chỗ trống hai bên. Đo ở 1400×900: 118→62px.
   *
   * `flex-wrap` giữ nguyên nếp cũ cho màn hẹp: ≤640px hai mẩu không đủ chỗ nên tự xuống hai dòng.
   */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 22px;
  /*
   * Dải nâu đỏ đặc, chữ trắng — đúng chân trang của Cổng DVC Quốc gia (`#903938`, đo được 7,43:1 với
   * chữ trắng). Trước đây chân trang là nền sáng chữ xám: nó chìm vào trang và người dân cuộn hết danh
   * sách xong không thấy đâu là điểm dừng. Một dải đặc kết thúc trang dứt khoát hơn hẳn.
   *
   * Đệm dọc mỏng đi được vì `.footer-links a` đã tự cao 44px (R2) — dải vẫn dày 62px, chữ không sát mép.
   */
  padding: 8px 26px 10px;
  background: var(--red-dark);
  color: #fff;
  font-size: var(--fs-xs);
  text-align: center;
}

/* Không còn lề dưới: cùng hàng thì `gap` lo khoảng cách, khác hàng thì 44px của link đã đủ thoáng. */
.footer-name {
  margin: 0;
  font-weight: 600;
}

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
}

.footer-links a {
  /* Trên nền nâu đỏ đặc: vàng nghệ đạt 5,4:1, đỏ thì gần như tàng hình. */
  color: var(--gold);
  text-decoration: none;
  /* R2: chân trang cũng là vùng chạm — số hotline ở kiosk phải bấm được bằng ngón tay. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
}

.brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  /*
   * Sàn bề rộng: không có nó, tên đơn vị bị các phần tử `flex-shrink: 0` bên cạnh (chữ chạy, hotline,
   * cụm kiosk) ép còn ~60px và xuống dòng TỪNG CHỮ ở khoảng 900–1100px (iPad Pro 13", Surface Pro 13").
   * ≤720px được ghi đè bên dưới (`min-width: 0` + `flex-basis: 140px`).
   */
  flex: 0 1 auto;
  min-width: 260px;
}

.logo-box {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * NGOẠI LỆ DUY NHẤT của sàn `--fs-xs` trong chrome, và có lý do: đây không phải nội dung cho người dân
 * mà là lời nhắc cho CÁN BỘ ("LOGO ĐƠN VỊ"), chỉ hiện khi đơn vị chưa tải logo lên. Nó phải vừa trong ô
 * 54px cạnh tên đơn vị; nâng lên 14px là tràn ô. Tải logo xong thì nó biến mất vĩnh viễn.
 */
.logo-placeholder {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--red);
  text-align: center;
  line-height: 1.2;
}

/*
 * Tên 20px + khẩu hiệu 16px ≈ 51px, vẫn nằm trong ô logo 54px — nên chiều cao header (được ghim, mỗi
 * pixel là một pixel người dân mất trên mọi trang) KHÔNG đổi. Lên 24px/18px là header cao thêm ~5px.
 */
.brand h1 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
}

.brand .slogan {
  margin: 2px 0 0;
  font-size: var(--fs-base);
  font-style: italic;
  /*
   * Sắc ấm của nền đất, không phải sắc hồng của đỏ cũ.
   *
   * ⚠️ Đã phải NHẠT ĐI sau khi đo: bản đầu `#f0d9c6` chỉ đạt **3,79:1** trên điểm sáng nhất của
   * gradient header (`--red #9d5d43`) — trượt R4. Header là GRADIENT nên ca xấu nhất là đỉnh dải,
   * không phải đáy; đo ở đáy (`--red-dark`, 5,46) là tự lừa mình. `#f9f0e8` = 4,57:1.
   */
  color: #f9f0e8;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/*
 * ⚠️ Lớp phủ ĐEN, không phải phủ trắng.
 *
 * Bản cũ phủ trắng 14% — với màu đỏ đậm trước đây thì vẫn đọc được, nhưng trên nền đất sáng hơn
 * () nó làm nhạt nền đi và chữ trắng tụt còn **3,90:1**, trượt R4. Phủ đen làm ngược lại:
 * nền tối đi, chữ trắng dễ đọc hơn, mà chip vẫn tách khỏi header. Đo ở ĐỈNH gradient (ca xấu nhất).
 */
.hotline-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(0 0 0 / 16%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

/*
 * "Tên hệ thống" chạy chữ ở góc phải header. Băng qua bằng `translateX(-50%)` trên track nhân đôi nội
 * dung — cách duy nhất chạy liên tục không giật ở điểm nối, không cần JS đo bề rộng chữ.
 *
 * `width: auto` — bề rộng theo nội dung (track nhân đôi chữ nên khung rộng bằng cả hai bản sao). Không
 * còn trần cố định: chuỗi dài sẽ đẩy `.hotline-chip` và cụm kiosk; ≤720px khối này đã bị ẩn nên ngân sách
 * bề rộng ở các mốc 720/560px bên dưới không bị ảnh hưởng.
 */
.system-marquee {
  overflow: hidden;
  min-width: 0;
}

.system-marquee-track {
  display: flex;
  width: max-content;
  gap: 60px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: #f9f0e8;
  white-space: nowrap;
  animation: system-marquee 14s linear infinite;
}

@keyframes system-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /*
     * Track chứa ĐÚNG hai bản sao giống hệt nhau, cách nhau một khoảng `gap` — dịch đúng 50% bề rộng
     * track là dịch đúng một bản sao (kể cả khoảng gap của nó), nên điểm nối liền mạch, không giật.
     */
    transform: translateX(-50%);
  }
}

/* Chớp/lăn chữ liên tục gây khó chịu cho người dùng nhạy cảm chuyển động — tắt hẳn animation (R4). */
@media (prefers-reduced-motion: reduce) {
  .system-marquee-track {
    animation: none;
    gap: 0;
  }

  /* Bản sao thứ hai chỉ tồn tại để nối liền vòng lặp — không hoạt ảnh thì không cần, ẩn đi khỏi lặp lại. */
  .system-marquee-track span:nth-child(2) {
    display: none;
  }
}

/*
 * Ẩn ở màn hẹp — `width: auto` không có trần, và tên hệ thống dài (vd "Trung tâm Hành chính Điện tử
 * Phường …") đẩy `.site-header` tràn ngang trên MỌI trang ở khoảng 721–900px (không riêng `≤720px`):
 * `.header-tools` không co (`flex-shrink: 0`) và `.site-header` chỉ được `flex-wrap` ở `≤720px`, nên
 * khoảng giữa đó không có lưới an toàn nào. Ngưỡng 900px khớp mốc kiosk đã chốt ở `docs/05` §4
 * ("> 900px" mới đủ chỗ cho rail 230px) — không phải số tự chọn.
 */
@media (max-width: 900px) {
  .system-marquee {
    display: none;
  }
}

main {
  padding: 26px 30px 40px;
  /* Đẩy chân trang xuống đáy khung nhìn khi nội dung ngắn — xem chú thích ở `body`. */
  flex: 1 0 auto;
}

/*
 * ⭐ NỀN HOA VĂN ĐÔNG SƠN — phủ TOÀN TRANG, thêm 2026-09-18 theo yêu cầu.
 *
 * Trước đó hoa văn là một thẻ `<img>` nằm trong dải hero, tức chỉ hiện ở **một mảng nhỏ giữa trang**.
 * Người dùng chỉ ra đúng chỗ đó và dẫn chiếu trang đăng nhập của dự án ChamDiemTP: mặt trống khổng lồ
 * tràn khỏi mép, chim lạc bay ngang, cả hai nằm sau MỌI thứ chứ không nằm trong một cái hộp.
 *
 * `position: fixed` làm ba việc cùng lúc:
 *   1. Phủ trọn khung nhìn, không phụ thuộc chiều cao tài liệu của từng trang.
 *   2. Đứng yên khi cuộn — hoa văn là nền của ỨNG DỤNG, không phải của một khối nội dung.
 *   3. 🔴 Đưa phần tử RA KHỎI dòng chảy. `body` là `display: flex`, nên một `::before` tĩnh sẽ thành
 *      **flex item** và chen thêm một hàng vào bố cục. Đây là ràng buộc người dùng đặt ra —
 *      "background không ảnh hưởng gì tới bố cục" — nên nó phải đúng bằng cấu trúc, không bằng may rủi.
 *
 * `z-index: -1` đặt lớp này **trên nền của `body` nhưng dưới mọi nội dung** (thứ tự vẽ của CSS: nền cha
 * → con z-index âm → nội dung). Thẻ nội dung có nền đặc (`.rail-item`, `.proc-row`, `.utility-card`) tự
 * che nó, nên hoa văn chỉ hiện ở các khoảng hở — đúng nghĩa "nền".
 *
 * ⚠️ **0,18 là trần, và đây là con số phải tính chứ không chọn theo mắt.** Chữ có thể rơi đúng lên một
 * điểm ảnh ĐẶC HOÀN TOÀN của hoa văn, nên phải lấy ca xấu nhất đó làm chuẩn: mực `#9D5D43` alpha 255
 * chồng lên `--bg`. Với `--ink-soft` (chữ nhạt nhất đặt thẳng lên nền — `.rail-label`, `.quick-label`,
 * `.hero-sub`):
 *
 *   0,10 → 5,18   ·   0,14 → 4,91   ·   **0,18 → 4,67**   ·   0,20 → 4,54   ·   0,22 → 4,42 ✗
 *
 * Qua được ca này thì qua ở mọi chỗ khác: chữ nội dung `--ink` đạt 11,07 và luôn nằm trên thẻ giấy đặc.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../img/trong-dong.png'), url('../img/chim-lac.png'),
    url('../img/chim-lac.png');
  background-repeat: no-repeat;
  /* Mặt trống CĂN GIỮA khung nhìn (theo yêu cầu 2026-09-22 — trước đó lệch phải); hai chim lạc
     bay chéo ở hai góc đối nhau để mắt có đường dẫn qua trang. */
  background-position:
    center center,
    right 4% top 14%,
    left 2% bottom 8%;
  background-size:
    900px 900px,
    380px auto,
    300px auto;
  opacity: 0.18;
}

/*
 * Cỡ chữ NỀN của vùng nội dung, và là điểm neo của A+/A−.
 *
 * `kiosk.css` khai lại `--fs-base` (cùng năm biến còn lại) bên trong chính bộ chọn này, nên mọi chữ
 * KẾ THỪA trong `.content` tự phóng theo — kể cả những lớp không khai cỡ riêng (`.proc-name`,
 * `.person-name`, `.doc-title`). Trước bản vá chúng kế thừa 16px từ `body`, nằm ngoài mọi luật phóng
 * chữ, nên tên cán bộ và tiêu đề văn bản KHÔNG BAO GIỜ to lên dù bấm A+ ba lần.
 */
.content {
  font-size: var(--fs-base);
}

.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  max-width: 760px;
}

.card h2 {
  margin-top: 0;
  color: var(--red-dark);
}

.notice {
  border-left: 7px solid var(--red);
}

.muted {
  color: var(--ink-soft);
}

.steps {
  padding-left: 20px;
}

.steps li {
  margin-bottom: 6px;
}

/*
 * Điện thoại: mặt trống 900px trên màn 375px là một mảng nâu chiếm cả màn hình. Thu nhỏ và bỏ bớt
 * một con chim — chỗ trống trên màn hẹp không đủ cho hai con mà không đâm vào nhau.
 */
@media (max-width: 640px) {
  body::before {
    background-image: url('../img/trong-dong.png'), url('../img/chim-lac.png');
    background-position:
      right -150px center,
      left -30px bottom 6%;
    background-size:
      460px 460px,
      260px auto;
  }
}

@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
  }

  /*
   * `1 1 140px`, KHÔNG phải `1 1 100%`.
   *
   * `100%` ép tên đơn vị chiếm trọn một dòng, nên chip hotline LUÔN phải xuống hàng thứ hai — header
   * 110px trên màn cao 812px, và nó được ghim nên mất hẳn. Với cơ số 140px, tên đơn vị co lại rồi
   * xuống dòng BÊN TRONG ô của nó, chip ở nguyên hàng đầu. Đo ở 375×812: 110→62px.
   *
   * `flex-wrap` của header vẫn giữ, và nó vẫn còn việc: ở chế độ kiosk cụm A−/A+/⌂ + đồng hồ + chip
   * rộng 464px, vượt xa chỗ còn lại, nên chúng tự rơi xuống hàng dưới đúng như trước.
   */
  .brand {
    flex: 1 1 140px;
    min-width: 0;
    gap: 10px;
  }

  .logo-box {
    width: 40px;
    height: 40px;
  }

  .brand h1 {
    font-size: var(--fs-xs);
  }

  /* Giữ cỡ cũ ở điện thoại: ngân sách chiều cao header 62px ở đây đã đo với khẩu hiệu 14px. */
  .brand .slogan {
    font-size: var(--fs-xs);
  }

  main {
    padding: 16px 14px 28px;
  }
}

/*
 * Màn hẹp: bỏ nhãn chữ của chip hotline, giữ lại SỐ — thứ người dân thật sự cần (docs/05 §4).
 *
 * 🔄 Ngưỡng 420 → 560px. Với nhãn đủ, chip rộng 277px; cộng cơ số 140px của `.brand` là 425px, vượt
 * chỗ còn lại của mọi màn dưới ~560px ⇒ chip rơi xuống hàng hai và header lại cao 107px. Đo ở **430px**
 * (iPhone Pro Max — cỡ màn thật, rất phổ biến): 107→62px. Bỏ nhãn thì chip còn 133px và vừa một hàng.
 */
@media (max-width: 560px) {
  .hotline-chip span {
    display: none;
  }

  .hotline-chip {
    padding: 8px 10px;
  }
}

@media (max-width: 380px) {
  .brand h1 {
    font-size: var(--fs-xs);
  }

  .brand .slogan {
    display: none;
  }
}