/* =========================================================================
   KIOSK TRA CỨU THỦ TỤC HÀNH CHÍNH – BẢN DEMO
   Khung thiết kế chuẩn: 1920 × 1080 px (màn 32" ngang 16:9, scale 100%)
   Lưới: lề 24 px · 12 cột × 134 px · rãnh 24 px · bội số 8 px
   ========================================================================= */

/* ---------- Phông chữ nhúng sẵn (chạy được khi không có mạng) ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: block;
  src: url("../fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: block;
  src: url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: block;
  src: url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: block;
  src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: block;
  src: url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: block;
  src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: block;
  src: url("../fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: block;
  src: url("../fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); }

/* ---------- Token thiết kế ---------- */
:root {
  /* Màu theo tài liệu đặc tả (Light Mode bắt buộc) */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --ink: #0F172A;          /* 17.1:1 trên nền trắng */
  --ink-2: #334155;        /* 10.4:1 */
  --muted: #475569;        /*  7.2:1 trên --bg */
  --line: #E2E8F0;
  --line-2: #CBD5E1;
  --wash: #F1F5F9;

  --primary: #1D4ED8;      /* chữ trắng 6.7:1 */
  --primary-press: #1E40AF;
  --primary-50: #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --plate: #1E3A8A;        /* biển số quầy – màu bảng chỉ dẫn sảnh */
  --focus: #93C5FD;

  --warn: #D97706;         /* chỉ dùng cho viền, biểu tượng */
  --warn-ink: #92400E;     /* chữ cảnh báo 6.4:1 trên --warn-bg */
  --warn-bg: #FEF3C7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --ok-ink: #166534;       /* 6.5:1 trên --ok-bg */
  --ok-bg: #DCFCE7;
  --ok: #16A34A;

  /* Kiểu chữ */
  --font: "Be Vietnam Pro", "Inter", "Roboto", "Noto Sans", system-ui, sans-serif;
  --fs-display: 60px;
  --fs-h1: 30px;
  --fs-h2: 26px;
  --fs-label: 22px;
  --fs-body: 20px;
  --fs-small: 18px;
  --fs-caption: 16px;

  /* Khoảng cách – bội số 8 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;

  /* Bo góc & bóng */
  --r-btn: 12px;
  --r-card: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-pop: 0 24px 64px rgba(15, 23, 42, .28), 0 4px 12px rgba(15, 23, 42, .12);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
}

/* ---------- Nền tảng & khóa thao tác hệ điều hành ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0F172A; /* vùng viền khi xem demo trên màn khác 16:9 */
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;       /* tắt bôi đen văn bản */
  -webkit-touch-callout: none;                         /* tắt menu chạm giữ (iOS) */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;                           /* tắt chạm đúp phóng to */
  overscroll-behavior: none;                            /* tắt vuốt quay lại */
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; }
img, svg { display: block; }
.ico { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 22px; height: 22px; }
.ico--lg { width: 36px; height: 36px; }
svg use { pointer-events: none; }
:focus { outline: none; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Sân khấu 1920 × 1080 (tự co giãn khi xem demo) ---------- */
.viewport { position: fixed; inset: 0; overflow: clip; }
.stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  background: var(--bg);
  transform-origin: 0 0;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1));
  overflow: clip;
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* ---------- Màn hình & chuyển cảnh ---------- */
.screen {
  position: absolute; inset: 0;
  display: grid;
  opacity: 0; visibility: hidden;
  transform: translateX(40px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.stage[data-dir="back"] .screen:not(.is-active) { transform: translateX(-40px); }
.screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- Nút bấm ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 0 var(--s3);
  border-radius: var(--r-btn);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:active { background: var(--primary-press); }
.btn--outline { background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary-200); }
.btn--outline:active { background: var(--primary-50); }
.btn--ghost { background: var(--wash); color: var(--ink); }
.btn--ghost:active { background: var(--line); }
.btn--danger-outline { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 2px #FCA5A5; }
.btn--ok { background: var(--ok-bg); color: var(--ok-ink); }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn--h72 { min-height: 72px; }
.btn--h76 { min-height: 76px; }
.btn--h88 { min-height: 88px; }
.btn--util { min-height: 64px; font-size: var(--fs-small); padding: 0 20px; }

/* Gợn sóng phản hồi chạm */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .22;
  transform: scale(0); animation: ripple 560ms var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Biểu trưng (giữ chỗ cho logo chính thức) ---------- */
.emblem {
  width: 72px; height: 72px; border-radius: 18px;
  background: var(--plate); color: #fff;
  display: grid; place-items: center; flex: none;
}
.emblem svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emblem--sm { width: 56px; height: 56px; border-radius: 14px; }
.emblem--sm svg { width: 32px; height: 32px; }

/* =========================================================================
   MÀN 0 – MÀN HÌNH CHỜ
   ========================================================================= */
.screen--attract {
  grid-template-rows: auto 1fr auto auto;
  padding: var(--s6) var(--s8) var(--s6);
  cursor: pointer;
}
.attract-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.drift { position: absolute; border-radius: 50%; background: var(--primary); opacity: .05; }
.drift--1 { width: 1100px; height: 1100px; left: -380px; top: -520px; animation: drift1 48s ease-in-out infinite alternate; }
.drift--2 { width: 760px; height: 760px; right: -260px; bottom: -360px; opacity: .06; animation: drift2 56s ease-in-out infinite alternate; }
.drift--3 { width: 420px; height: 420px; right: 380px; top: -160px; opacity: .04; animation: drift3 40s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(220px, 140px); } }
@keyframes drift2 { to { transform: translate(-260px, -120px); } }
@keyframes drift3 { to { transform: translate(-180px, 220px); } }

.attract-head { position: relative; display: flex; align-items: center; gap: var(--s3); }
.attract-org { font-size: var(--fs-small); color: var(--muted); }
.attract-center { font-size: 28px; font-weight: 700; color: var(--plate); line-height: 1.25; }
.attract-clock { margin-left: auto; font-size: var(--fs-label); font-weight: 500; color: var(--ink-2); }

.attract-main { position: relative; align-self: center; text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.attract-title { font-size: var(--fs-display); font-weight: 700; line-height: 1.22; letter-spacing: .005em; color: var(--ink); }
.attract-sub { font-size: 26px; color: var(--muted); max-width: 1200px; text-wrap: balance; }
.attract-steps { display: grid; grid-template-columns: repeat(3, 440px); gap: var(--s4); margin-top: var(--s4); }
.attract-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; row-gap: 16px;
  align-items: center; text-align: left;
  padding: 28px 32px;
  background: var(--surface); border-radius: 20px;
  box-shadow: inset 0 0 0 2px var(--line);
  animation: stepGlow 9s var(--ease) infinite;
}
.attract-step:nth-child(2) { animation-delay: 3s; }
.attract-step:nth-child(3) { animation-delay: 6s; }
@keyframes stepGlow {
  0%, 30%, 100% { box-shadow: inset 0 0 0 2px var(--line); transform: none; }
  6%, 24% { box-shadow: inset 0 0 0 3px var(--primary); transform: translateY(-6px); }
}
.attract-step__num {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--plate); color: #fff; font-size: 24px; font-weight: 700;
}
.attract-step__icon { width: 52px; height: 52px; justify-self: end; color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.attract-step__text { grid-column: 1 / -1; font-size: var(--fs-label); font-weight: 600; line-height: 1.35; }

.attract-touch { position: relative; justify-self: center; width: 132px; height: 132px; display: grid; place-items: center; }
.attract-touch__label { position: relative; justify-self: center; margin-top: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--primary); }
.touch-hand { width: 56px; height: 56px; color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: tap 2.4s var(--ease) infinite; }
.touch-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--primary); opacity: 0; animation: ring 2.4s var(--ease) infinite; }
.touch-ring--2 { animation-delay: .5s; }
@keyframes ring { 0% { transform: scale(.4); opacity: .5; } 80%, 100% { transform: scale(1); opacity: 0; } }
@keyframes tap { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(8px) scale(.94); } 30% { transform: translateY(0); } }

/* =========================================================================
   MÀN 1 – TRANG CHỦ  (80 · 180 · 776 · 44)
   ========================================================================= */
.screen--home { grid-template-rows: 80px 180px 1fr 44px; }

.topbar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__name { font-size: var(--fs-label); font-weight: 700; color: var(--plate); }
.topbar__clock { margin-left: auto; margin-right: var(--s1); font-size: var(--fs-small); color: var(--muted); }

.home-search { display: grid; justify-items: center; align-content: center; gap: var(--s2); }
.searchfield {
  position: relative; overflow: hidden;
  width: 1344px; height: 76px;
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 2px var(--primary), 0 6px 20px rgba(29, 78, 216, .12);
  font-size: var(--fs-label); color: var(--muted); text-align: left;
  transition: transform var(--t-fast);
}
.searchfield .ico { color: var(--primary); }
.searchfield:active { transform: scale(.995); }
.quickchips { display: flex; align-items: center; gap: var(--s2); }
.quickchips__label { font-size: var(--fs-small); color: var(--muted); }
.quickchips__list { display: flex; gap: var(--s2); }
.chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-2);
  transition: background-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.chip:active { background: var(--primary-50); }
.chip.is-on { background: var(--primary-50); box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }

.home-cols {
  display: grid; grid-template-columns: 3fr 2fr; gap: var(--s3);
  padding: 0 var(--s3) var(--s2);
  min-height: 0;
}
.home-top, .home-cats { display: flex; flex-direction: column; min-height: 0; }
.section-title { font-size: var(--fs-h2); font-weight: 600; line-height: 48px; margin-bottom: var(--s1); }

.toplist { display: grid; grid-auto-rows: 96px; gap: var(--s2); }
.toprow {
  position: relative; overflow: hidden; width: 100%; height: 96px;
  display: grid; grid-template-columns: 56px 1fr auto 32px; align-items: center; gap: 20px;
  padding: 0 var(--s3) 0 20px;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  text-align: left;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.toprow:active { box-shadow: inset 0 0 0 2px var(--primary); transform: scale(.995); }
.toprow__rank {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary);
  font-size: 26px; font-weight: 700;
}
.toprow__name { font-size: var(--fs-label); font-weight: 600; line-height: 1.3; }
.toprow__chev { color: var(--line-2); }

.counter-tag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 10px;
  background: var(--plate); color: #fff;
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
}
.counter-tag b { font-size: 22px; font-variant-numeric: tabular-nums; }

.cat-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--s2); margin-bottom: var(--s2); min-height: 0; }
.cat {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 12px;
  padding: 20px var(--s3);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  text-align: left;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.cat:active { box-shadow: inset 0 0 0 2px var(--primary); transform: scale(.99); }
.cat__icon { width: 44px; height: 44px; color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat__title { font-size: var(--fs-label); font-weight: 600; line-height: 1.3; }
.cat__desc { font-size: var(--fs-caption); color: var(--muted); }

/* Thanh nguồn dữ liệu */
.srcbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 0 var(--s3);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-caption); color: var(--muted);
}
.srcbar__help { display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================================
   ĐẦU TRANG MÀN CON (96 px)
   ========================================================================= */
.subhead {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--s2);
  padding: 0 var(--s3);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.subhead .btn { min-width: 160px; }
.subhead__title { min-width: 0; padding: 0 var(--s1); }
.subhead__title h1 {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.subhead__title p { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================================
   CUỘN NỘI DUNG + NÚT ▲ ▼ (bắt buộc theo đặc tả)
   ========================================================================= */
.scrollwrap { position: relative; display: grid; grid-template-columns: 1fr 64px; gap: var(--s2); min-height: 0; }
.scrollarea { overflow-y: auto; min-height: 0; scrollbar-width: none; overscroll-behavior: contain; scroll-behavior: smooth; }
.scrollarea::-webkit-scrollbar { display: none; }
.scrollrail { display: grid; grid-template-rows: 64px 1fr 64px; gap: 12px; justify-items: center; min-height: 0; }
.scrollrail.is-hidden { visibility: hidden; }
.railbtn {
  position: relative; overflow: hidden;
  width: 64px; height: 64px; border-radius: var(--r-btn);
  display: grid; place-items: center; align-content: center;
  background: var(--surface); color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary-200);
  font-size: 14px; font-weight: 600; line-height: 1;
  transition: opacity var(--t-fast), background-color var(--t-fast);
}
.railbtn .ico { width: 30px; height: 30px; stroke-width: 2.5; }
.railbtn:active { background: var(--primary-50); }
.railbtn.is-end { opacity: .35; }
.railtrack { position: relative; width: 16px; border-radius: var(--r-pill); background: var(--line); }
.railthumb { position: absolute; left: 0; right: 0; top: 0; min-height: 48px; border-radius: var(--r-pill); background: var(--muted); transition: top 120ms linear; }

/* =========================================================================
   MÀN 3 – DANH SÁCH THEO NHÓM / CƠ QUAN
   ========================================================================= */
.screen--list { grid-template-rows: 96px 96px 1fr 44px; }
.filterbar { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); }
.filterbar__label { font-size: var(--fs-small); color: var(--muted); margin-right: var(--s1); display: inline-flex; gap: 8px; align-items: center; }
.filterbar__count { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.scrollwrap--list { padding: 0 var(--s3) var(--s2); }
.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: 4px 4px var(--s3); }
.pcard {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; gap: 14px;
  min-height: 196px; padding: var(--s3);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  text-align: left;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.pcard:active { box-shadow: inset 0 0 0 2px var(--primary); transform: scale(.995); }
.pcard__name { font-size: var(--fs-label); font-weight: 700; line-height: 1.3; }
.pcard__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-2); }
.pcard__meta { display: inline-flex; align-items: center; gap: 8px; }
.pcard__meta .ico { color: var(--muted); }
.pcard__foot { display: flex; gap: 8px; flex-wrap: wrap; align-self: end; }
.group-title { grid-column: 1 / -1; font-size: var(--fs-h2); font-weight: 600; margin-top: var(--s2); display: flex; align-items: center; gap: 12px; }
.group-title .ico { color: var(--primary); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 600; white-space: nowrap;
  background: var(--wash); color: var(--ink-2);
}
.pill .ico { width: 18px; height: 18px; }
.pill--blue { background: var(--primary-50); color: var(--primary); }
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }

.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--s2); padding: var(--s8) var(--s4); text-align: center; color: var(--muted); }
.empty .ico { width: 64px; height: 64px; color: var(--line-2); stroke-width: 1.5; }
.empty h3 { font-size: var(--fs-h2); color: var(--ink); font-weight: 600; }

/* =========================================================================
   MÀN 4 – CHI TIẾT THỦ TỤC (20 – 55 – 25)
   ========================================================================= */
.screen--detail { grid-template-rows: 96px 1fr 44px; }
.detail {
  display: grid; grid-template-columns: 20fr 55fr 25fr; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s2);
  min-height: 0;
}

/* Cột trái – tab */
.detail__tabs { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; }
.tabs { display: grid; grid-auto-rows: 120px; gap: var(--s2); }
.tab {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: var(--s2);
  padding: 0 20px;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.3; text-align: left;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base);
}
.tab__num {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary); font-weight: 700;
  transition: background-color var(--t-base), color var(--t-base);
}
.tab[aria-selected="true"] { background: var(--primary); color: #fff; box-shadow: 0 10px 24px rgba(29, 78, 216, .28); }
.tab[aria-selected="true"] .tab__num { background: #fff; color: var(--primary); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 16px; height: 32px; margin-top: -16px;
  background: var(--bg); clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.readiness {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: var(--s3);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.readiness__label { font-size: var(--fs-small); color: var(--muted); }
.readiness__value { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.readiness__value small { font-size: 24px; color: var(--muted); font-weight: 600; }
.bar { height: 16px; border-radius: var(--r-pill); background: var(--wash); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.bar__fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--primary); transition: width 600ms var(--ease); }
.bar__fill.is-full { background: var(--ok); }
.readiness__hint { font-size: var(--fs-caption); color: var(--muted); }
.readiness__help { margin-top: auto; display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-caption); color: var(--ink-2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.readiness__help .ico { color: var(--primary); }

/* Cột giữa – nội dung */
.panel {
  display: grid; grid-template-rows: 80px 1fr; min-height: 0;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  padding: 0 var(--s3) var(--s3) var(--s4);
}
.panel__head { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); margin-right: 80px; }
.panel__head h2 { font-size: var(--fs-h2); font-weight: 700; }
.panel__head p { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.panel .scrollwrap { padding-top: var(--s3); }
.tabpane { display: grid; gap: var(--s2); padding: 2px 2px var(--s2); max-width: 900px; }
.tabpane.is-entering { animation: paneIn var(--t-base) var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } }

/* Tab 1 – Checklist */
.doc {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: start;
  padding: 20px var(--s3) 20px 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.doc.is-checked { background: var(--primary-50); box-shadow: inset 0 0 0 2px var(--primary-200); }
.check {
  position: relative; overflow: hidden;
  width: 64px; height: 64px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: inset 0 0 0 3px var(--line-2);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.check svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.check path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 280ms var(--ease) 60ms; }
.doc.is-checked .check { background: var(--primary); box-shadow: none; }
.doc.is-checked .check path { stroke-dashoffset: 0; }
.doc__body { display: grid; gap: 10px; padding-top: 4px; }
.doc__name { font-size: var(--fs-label); font-weight: 600; line-height: 1.35; }
.doc__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.doc__note { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.doc__aside { padding-top: 0; }
.doc__aside .btn { min-height: 64px; font-size: var(--fs-small); padding: 0 20px; }

.hintline {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: var(--r-btn);
  background: var(--wash); color: var(--ink-2); font-size: var(--fs-small);
}
.hintline .ico { color: var(--primary); }

/* Tab 2 – Các bước */
.legend { display: flex; gap: var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.legend i { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.dot-citizen { background: var(--primary); }
.dot-agency { background: var(--muted); }

.stepper { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: var(--s3) 0 var(--s1); }
.stepper__line { position: absolute; top: calc(var(--s3) + 27px); height: 6px; border-radius: 3px; background: var(--line); }
.stepper__fill { position: absolute; inset: 0; width: 0; border-radius: 3px; background: var(--primary); transition: width 900ms var(--ease) 120ms; }
.stepper.is-drawn .stepper__fill { width: 100%; }
.stepper__item { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 0 8px; }
.stepper__dot {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 6px var(--surface);
  transform: scale(.6); opacity: 0;
  transition: transform 360ms var(--ease), opacity 360ms var(--ease);
}
.stepper.is-drawn .stepper__dot { transform: none; opacity: 1; }
.stepper__dot--citizen { background: var(--primary); }
.stepper__dot--agency { background: var(--muted); }
.stepper__label { font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; color: var(--ink-2); }

.steplist { display: grid; gap: var(--s2); margin-top: var(--s1); }
.stepcard {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding: 20px var(--s3) 20px 20px; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stepcard--citizen { box-shadow: inset 4px 0 0 var(--primary), inset 0 0 0 1px var(--line); }
.stepcard--agency { background: var(--wash); box-shadow: inset 4px 0 0 var(--muted); }
.stepcard__num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 22px; color: #fff; }
.stepcard__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stepcard__title { font-size: var(--fs-label); font-weight: 600; }
.stepcard__text { margin-top: 6px; color: var(--ink-2); }

/* Tab 3 – Mẫu đơn */
.formcard {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start;
  padding: var(--s3); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
.formcard__icon { width: 72px; height: 88px; border-radius: 10px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; }
.formcard__icon .ico { width: 40px; height: 40px; stroke-width: 1.6; }
.formcard__name { font-size: var(--fs-label); font-weight: 600; line-height: 1.35; }
.formcard__code { font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }
.formcard__actions { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.formcard__actions .btn { font-size: var(--fs-small); }

/* Tab 4 – Pháp lý */
.legal { display: grid; gap: var(--s3); }
.legal__block h3 { font-size: var(--fs-label); font-weight: 600; margin-bottom: 10px; display: flex; gap: 12px; align-items: center; }
.legal__block h3 .ico { color: var(--primary); }
.legal__block p, .legal__block li { color: var(--ink-2); max-width: 840px; }
.legal__list { display: grid; gap: 10px; }
.legal__list li { position: relative; padding-left: 28px; }
.legal__list li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-200); }
.legal__docs li::before { display: none; }
.legal__docs li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-btn); background: var(--wash); }
.legal__docs .ico { color: var(--muted); margin-top: 2px; }
.legal__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.fact { padding: 18px 20px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--line); }
.fact dt { font-size: var(--fs-caption); color: var(--muted); }
.fact dd { font-size: var(--fs-body); font-weight: 500; margin-top: 4px; }

/* Đánh giá nhanh – đặt cuối nội dung để đủ vùng chạm 64 px */
.feedback {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s2); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-2);
}
.feedback p { margin-right: auto; }
.feedback .btn { font-size: var(--fs-small); min-height: 64px; }

/* Cột phải – thẻ hành động */
.detail__action { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; }
.plate {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  background: var(--plate); color: #fff;
  box-shadow: 0 12px 28px rgba(30, 58, 138, .28);
}
.plate__top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s2); padding: 18px var(--s3) 14px; }
.plate__label { font-size: var(--fs-small); font-weight: 600; opacity: .88; }
.plate__no { font-size: 96px; font-weight: 700; line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plate__zone { display: grid; justify-items: end; gap: 6px; padding-bottom: 8px; }
.plate__zone b { font-size: 34px; line-height: 1; }
.plate__zone span { font-size: var(--fs-caption); opacity: .88; }
.plate__qms { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, .12); }
.plate__qms div { padding: 10px var(--s3) 12px; }
.plate__qms div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
.plate__qms dt { font-size: var(--fs-caption); opacity: .88; }
.plate__qms dd { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.plate::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; left: -160px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
}
.screen--detail.is-active .plate::after { animation: sheen 1.1s var(--ease) .35s 1; }
@keyframes sheen { to { left: 120%; } }

.qmsline {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--r-btn);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); line-height: 1.4;
}
.qmsline .ico { color: var(--primary); }
.qmsline b { color: var(--plate); }

.facts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facttile { padding: 14px 16px; border-radius: var(--r-btn); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.facttile__k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--muted); }
.facttile__k .ico { width: 20px; height: 20px; }
.facttile__v { font-size: var(--fs-label); font-weight: 700; line-height: 1.3; margin-top: 6px; }
.facttile--ok { background: var(--ok-bg); box-shadow: none; }
.facttile--ok .facttile__k, .facttile--ok .facttile__v { color: var(--ok-ink); }

.qrcard {
  display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center;
  padding: 16px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  margin-top: auto;
}
.qrbox { position: relative; width: 200px; height: 200px; padding: 12px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.qrbox svg { width: 100%; height: 100%; }
.qrbox::before, .qrbox::after { content: ""; position: absolute; width: 28px; height: 28px; border: 4px solid var(--primary); }
.qrbox::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.qrbox::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.qrcard__text { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.qrcard__text b { display: block; font-size: var(--fs-body); color: var(--ink); margin-bottom: 6px; }

/* =========================================================================
   LỚP PHỦ / HỘP THOẠI
   ========================================================================= */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.overlay--dim { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.overlay--top { z-index: 40; }
.overlay > * { transform: translateY(24px) scale(.97); transition: transform var(--t-base) var(--ease); }
.overlay.is-open > * { transform: none; }

.sheet { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-pop); overflow: hidden; }
.sheet__head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.sheet__head h2 { font-size: var(--fs-h2); font-weight: 700; }
.sheet__head .btn { margin-left: auto; }

.dialog {
  width: 960px; padding: var(--s6);
  background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-pop);
  display: grid; gap: var(--s3);
}
.dialog__icon { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; }
.dialog__icon .ico { width: 44px; height: 44px; }
.dialog__icon--ok { background: var(--ok-bg); color: var(--ok-ink); }
.dialog__icon--warn { background: var(--warn-bg); color: var(--warn); }
.dialog__title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.25; }
.dialog__text { font-size: var(--fs-body); color: var(--ink-2); }
.dialog__actions { display: flex; gap: var(--s2); margin-top: var(--s1); }
.missing { display: grid; gap: 10px; }
.missing li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-btn); background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--warn); }
.missing .ico { color: var(--warn); margin-top: 2px; }
.nextsteps { display: grid; gap: 10px; counter-reset: ns; }
.nextsteps li { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-btn); background: var(--wash); }
.nextsteps li::before { counter-increment: ns; content: counter(ns); width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; }

/* Hết phiên */
.dialog--timeout { justify-items: center; text-align: center; }
.dialog--timeout .dialog__actions { width: 100%; }
.countdown { position: relative; width: 140px; height: 140px; }
.countdown svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown__track { fill: none; stroke: var(--danger-bg); stroke-width: 10; }
.countdown__bar { fill: none; stroke: var(--danger); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; }
.countdown__bar.is-running { animation: countdown 10s linear forwards; }
@keyframes countdown { to { stroke-dashoffset: 326.7; } }
.countdown__num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 52px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }

/* Thông báo nhanh */
.toast {
  position: absolute; left: 50%; bottom: 72px; z-index: 50;
  transform: translate(-50%, 24px); opacity: 0;
  max-width: 1100px; padding: 20px 32px; border-radius: var(--r-card);
  background: var(--ink); color: #fff; font-size: var(--fs-body); font-weight: 500;
  box-shadow: var(--shadow-pop);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   MÀN 2 – TÌM KIẾM & BÀN PHÍM ẢO (540 / 540)
   ========================================================================= */
.overlay--search { display: grid; grid-template-rows: 540px 540px; place-items: stretch; background: var(--bg); }
.overlay--search > * { transform: translateY(32px); }
.search-top { display: grid; grid-template-rows: 76px 1fr; gap: var(--s2); padding: var(--s3) 288px var(--s2); min-height: 0; }
.search-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); }
.search-input {
  position: relative; display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); border-radius: var(--r-card);
  background: var(--surface); box-shadow: inset 0 0 0 3px var(--primary), 0 6px 20px rgba(29, 78, 216, .12);
  font-size: 28px; font-weight: 600;
}
.search-input .ico { color: var(--primary); }
.search-input__text { white-space: pre; }
.search-input__ph { position: absolute; left: 84px; font-size: var(--fs-label); font-weight: 400; color: var(--muted); pointer-events: none; }
.search-input.has-text .search-input__ph { display: none; }
.caret { width: 3px; height: 38px; margin-left: 2px; background: var(--primary); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.search-results { display: grid; grid-auto-rows: 72px; gap: 8px; align-content: start; min-height: 0; overflow: hidden; }
.result {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); border-radius: var(--r-btn);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  animation: resultIn 220ms var(--ease) both;
}
.result:nth-child(2) { animation-delay: 30ms; } .result:nth-child(3) { animation-delay: 60ms; }
.result:nth-child(4) { animation-delay: 90ms; } .result:nth-child(5) { animation-delay: 120ms; }
@keyframes resultIn { from { opacity: 0; transform: translateY(8px); } }
.result:active { box-shadow: inset 0 0 0 2px var(--primary); }
.result__name { font-size: var(--fs-label); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result__name mark { background: var(--primary-100); color: inherit; border-radius: 4px; padding: 0 2px; }
.result__field { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.search-msg { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.search-msg .ico { width: 48px; height: 48px; color: var(--primary); stroke-width: 1.6; }
.search-msg h3 { font-size: var(--fs-label); font-weight: 600; }
.search-msg p { color: var(--muted); font-size: var(--fs-small); }
.search-msg .btn { margin-left: auto; }

.search-bottom {
  display: grid; grid-template-rows: 80px 1fr; gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s3);
  background: #E9EEF5; border-top: 1px solid var(--line-2);
}
.autostrip { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0 288px; overflow: hidden; }
.autostrip__label { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.autostrip .chip { background: var(--surface); }
.autostrip .chip b { color: var(--primary); }

.kbd-zone { display: grid; grid-template-columns: 1fr 1344px 1fr; gap: var(--s3); min-height: 0; }
.kbd-side { display: flex; align-items: flex-end; justify-content: center; }
.kbd { display: grid; grid-template-rows: repeat(4, 88px); gap: 12px; }
.kbd__row { display: grid; grid-template-columns: repeat(20, 1fr); gap: 12px; }
.key {
  position: relative; overflow: hidden;
  grid-column: span 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 3px 0 var(--line-2), inset 0 0 0 1px var(--line-2);
  font-size: 32px; font-weight: 600; line-height: 1;
  transition: transform 80ms, box-shadow 80ms, background-color 80ms;
}
.key:active, .key.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 var(--line-2), inset 0 0 0 2px var(--primary); background: var(--primary-50); }
.key--half { grid-column: span 1; visibility: hidden; }
.key--wide { grid-column: span 3; font-size: var(--fs-label); }
.key--space { grid-column: span 10; font-size: var(--fs-small); color: var(--muted); }
.key--go { grid-column: span 4; background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--plate); font-size: var(--fs-label); }
.key--go:active { background: var(--primary-press); }
.key--side { width: 240px; height: 184px; flex-direction: column; font-size: 28px; }
.key--side span { font-size: var(--fs-small); }

/* =========================================================================
   POPUP 5 – CHẾ ĐỘ CHỤP ẢNH (nền trắng tinh, chữ đen tuyền, không cuộn)
   ========================================================================= */
.photo {
  width: 1600px; height: 920px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 20px;
  padding: 28px 40px;
  background: #FFFFFF; color: #000000;
  border-radius: 20px; box-shadow: var(--shadow-pop);
}
.photo__hint { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-radius: 12px; background: #F1F5F9; font-size: 24px; font-weight: 600; }
.photo__hint .ico { width: 36px; height: 36px; }
.photo__body { display: grid; grid-template-columns: 1fr 260px; gap: 36px; min-height: 0; overflow: hidden; }
.photo__main { display: grid; grid-template-rows: auto auto 1fr; gap: 20px; min-height: 0; font-size: var(--photo-fs, 26px); line-height: 1.4; }
.photo__name { font-size: 40px; font-weight: 700; line-height: 1.2; }
.photo__facts { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border: 3px solid #000; border-radius: 14px; }
.photo__facts > div { padding: 12px 20px; }
.photo__facts > div + div { border-left: 3px solid #000; }
.photo__facts dt { font-size: 20px; font-weight: 600; }
.photo__facts dd { font-size: 30px; font-weight: 700; line-height: 1.25; }
.photo__docs h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.photo__docs ul { columns: 2; column-gap: 40px; }
.photo__docs li { break-inside: avoid; padding: 4px 0 4px 34px; position: relative; }
.photo__docs li::before { content: ""; position: absolute; left: 0; top: .32em; width: 22px; height: 22px; border: 3px solid #000; border-radius: 5px; }
.photo__docs small { font-size: .8em; font-weight: 600; }
.photo__side { display: grid; align-content: start; justify-items: center; gap: 12px; text-align: center; font-size: 20px; font-weight: 600; }
.photo__side .qrbox { width: 240px; height: 240px; box-shadow: none; border: 3px solid #000; }
.photo__side .qrbox::before, .photo__side .qrbox::after { display: none; }
.photo__foot { display: flex; justify-content: center; }
.photo__foot .btn { min-width: 420px; background: #000; color: #fff; font-size: 26px; }

/* =========================================================================
   POPUP 6 – SƠ ĐỒ CHỈ ĐƯỜNG
   ========================================================================= */
.sheet--map { width: 1600px; height: 920px; display: grid; grid-template-rows: auto 1fr; }
.map { display: grid; grid-template-columns: 1fr 440px; gap: var(--s4); padding: var(--s3) var(--s4) var(--s4); min-height: 0; }
.map__svg { width: 100%; height: 100%; border-radius: var(--r-card); background: var(--wash); }
.map__svg .zone { fill: #fff; stroke: var(--line-2); stroke-width: 2; }
.map__svg .zone-label { font: 600 22px var(--font); fill: var(--muted); }
.map__svg .ctr { fill: var(--primary-50); stroke: var(--primary-200); stroke-width: 2; }
.map__svg .ctr-label { font: 600 18px var(--font); fill: var(--primary); text-anchor: middle; }
.map__svg .ctr.is-target { fill: var(--plate); stroke: var(--plate); }
.map__svg .ctr-label.is-target { fill: #fff; font-size: 22px; }
.map__svg .corridor { fill: none; stroke: #fff; stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; }
.map__svg .route { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 20; animation: march 900ms linear infinite; }
@keyframes march { to { stroke-dashoffset: -22; } }
.map__svg .you-dot { fill: var(--danger); stroke: #fff; stroke-width: 5; }
.map__svg .you-ring { fill: none; stroke: var(--danger); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: youPulse 1.8s var(--ease) infinite; }
@keyframes youPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.map__svg .you-label { font: 700 22px var(--font); fill: var(--danger); text-anchor: middle; }
.map__svg .door { fill: var(--muted); }
.map__svg .door-label { font: 600 16px var(--font); fill: var(--muted); text-anchor: middle; }
.dirs { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; }
.dirs__target { padding: 20px var(--s3); border-radius: var(--r-card); background: var(--plate); color: #fff; }
.dirs__target small { display: block; font-size: var(--fs-caption); opacity: .88; }
.dirs__target b { font-size: 40px; line-height: 1.15; }
.dirs ol { display: grid; gap: 12px; counter-reset: dir; }
.dirs li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-btn); background: var(--wash); font-size: var(--fs-small); font-weight: 500; }
.dirs li::before { counter-increment: dir; content: counter(dir); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; }
.dirs .btn { margin-top: auto; }
.dirs__note { font-size: var(--fs-caption); color: var(--muted); }

/* =========================================================================
   POPUP 7 – TRA CỨU TIẾN ĐỘ (không dùng CCCD)
   ========================================================================= */
.sheet--progress { width: 1440px; max-height: 1010px; }
.progress { display: grid; grid-template-columns: 1fr 96px 1.2fr; padding: var(--s3) var(--s6) var(--s4); align-items: start; }
.progress__or { align-self: stretch; display: grid; place-items: center; position: relative; color: var(--muted); font-weight: 600; font-size: var(--fs-small); }
.progress__or::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); }
.progress__or span { position: relative; background: var(--surface); padding: 12px 0; }
.progress__col h3 { font-size: var(--fs-label); font-weight: 700; margin-bottom: var(--s2); display: flex; align-items: center; gap: 12px; }
.progress__col h3 .ico { color: var(--primary); }
.progress__qr { display: grid; justify-items: center; gap: var(--s2); text-align: center; color: var(--ink-2); font-size: var(--fs-small); }
.progress__qr .qrbox { width: 260px; height: 260px; }
.privacy { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin-top: var(--s3); border-radius: var(--r-btn); background: var(--ok-bg); color: var(--ok-ink); font-size: var(--fs-caption); font-weight: 500; }
.codefield { height: 76px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-card); box-shadow: inset 0 0 0 3px var(--primary); font-size: 40px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.codefield.is-empty { color: var(--muted); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 72px; gap: 12px; margin-top: var(--s2); }
.numpad .key { grid-column: auto; }
.numpad .key--fn { font-size: var(--fs-small); color: var(--ink-2); }
.progress__go { margin-top: var(--s2); }
.progress__hint { margin-top: 12px; font-size: var(--fs-caption); color: var(--muted); }
.receipt { margin-top: 12px; padding: 16px var(--s3); border-radius: var(--r-card); box-shadow: inset 0 0 0 2px var(--line); display: grid; gap: 8px; animation: paneIn var(--t-base) var(--ease); }
.receipt__row { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-small); }
.receipt__row span { color: var(--muted); }
.receipt__row b { text-align: right; }
.receipt--none { box-shadow: inset 0 0 0 2px var(--warn); background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }

/* =========================================================================
   XEM MẪU ĐƠN – song song mẫu trắng / mẫu điền minh họa
   ========================================================================= */
.sheet--form { width: 1760px; height: 1000px; display: grid; grid-template-rows: auto 1fr; }
.formview__bar { display: flex; gap: 12px; }
.seg { display: inline-flex; padding: 6px; border-radius: 16px; background: var(--wash); gap: 6px; }
.seg .btn { min-height: 64px; font-size: var(--fs-small); background: transparent; }
.seg .btn[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.formview { display: flex; justify-content: center; align-items: flex-start; gap: var(--s4); padding: var(--s3); background: #E2E8F0; overflow: hidden; }
.paper {
  position: relative; flex: none;
  width: 600px; height: 849px; padding: 48px 52px;
  background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  transform-origin: top center; transform: scale(var(--z, 1));
  transition: transform var(--t-base) var(--ease);
  font-size: 15px; line-height: 1.6; color: #111;
}
.paper__tag { position: absolute; top: 14px; right: 14px; }
.paper__nation { text-align: center; font-weight: 700; font-size: 15px; }
.paper__motto { text-align: center; font-weight: 600; font-size: 15px; }
.paper__motto::after { content: ""; display: block; width: 180px; height: 1px; background: #111; margin: 4px auto 0; }
.paper__title { text-align: center; font-weight: 700; font-size: 19px; margin: 26px 0 18px; }
.paper__to { margin-bottom: 14px; }
.paper__field { display: flex; gap: 6px; margin: 6px 0; }
.paper__field span:first-child { white-space: nowrap; }
.paper__fill { flex: 1; border-bottom: 1.5px dotted #64748B; min-height: 24px; color: var(--primary); font-family: "Segoe Print", "Comic Sans MS", var(--font); font-weight: 600; }
.paper__sign { display: flex; justify-content: flex-end; margin-top: 30px; text-align: center; }
.paper__sign div { width: 240px; }
.paper__note {
  position: absolute; right: -236px; display: flex; gap: 6px; align-items: center;
  width: 220px; padding: 6px 10px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 2px var(--warn);
  font: 600 14px/1.3 var(--font);
}
.paper__note::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right-color: var(--warn); }
.paper__field { position: relative; }
.paper__wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 700 64px var(--font); color: rgba(29, 78, 216, .06); transform: rotate(-28deg); }
.zoombar { display: inline-flex; gap: 8px; margin-left: var(--s2); }
.zoombar .btn { min-width: 64px; padding: 0; }

/* ---------- Giảm chuyển động khi hệ thống yêu cầu ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stepper__dot { transform: none; opacity: 1; }
  .stepper__fill { width: 100%; }
}