/* 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 {
  --bg: #fafaf9;
  --paper: #ffffff;
  --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;
  --red: #c8102e;
  --red-dark: #8e0e20;
  --red-soft: #fdebed;
  --red-border: #f3d3d8;
  --success: #2a6e54;
  --success-bg: #e3f2ea;
  --warn: #8a5e0f;
  --warn-bg: #fbeed9;
  --border: #e7e4e0;
  --radius: 18px;
  --tap-min: 78px;

  /*
   * 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;
}

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

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

body {
  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: 'Be Vietnam Pro', system-ui, sans-serif;
  line-height: 1.45;
}

.site-header {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: #fff;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

.brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.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;
}

.logo-placeholder {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--red);
  text-align: center;
  line-height: 1.2;
}

.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.brand .slogan {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: #fbd9de;
}

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

.hotline-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

main {
  padding: 26px 30px 40px;
}

.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;
}

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

  .brand {
    flex: 1 1 100%;
    gap: 10px;
  }

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

  .brand h1 {
    font-size: 12px;
  }

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

/* Màn rất 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). */
@media (max-width: 420px) {
  .hotline-chip span {
    display: none;
  }

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

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

  .brand .slogan {
    display: none;
  }
}