/* Trang quét CCCD — mobile-first, nút >= 48px, dùng biến màu của /shared/style.css */
[hidden] { display: none !important; }
.mock-banner { background: var(--danger); color: var(--danger-fg); text-align: center; padding: 4px; font-weight: 700; }
.steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.steps li { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.steps li.on { background: var(--primary); }
h2 { font-size: 1.25rem; margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-weight: 600; }
.field .err, .err { color: var(--danger); font-size: 0.9375rem; margin: 0; }
.field.bad input, .field.bad select { border-color: var(--danger); border-width: 2px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) { .row > button { width: auto; } }
.big { font-size: 1.125rem; font-weight: 700; padding: 14px 12px; }
.privacy { font-weight: 700; margin: 0; }
.guest { border-left: 6px solid var(--border); }
.guest.st-ok { border-left-color: #2e7d32; }
.guest.st-xem { border-left-color: #ef6c00; }
.guest.st-khong { border-left-color: #c62828; }
.guest.st-loi { border-color: var(--danger); border-width: 2px; border-left-width: 6px; }
.guest.bad { outline: 2px solid var(--danger); }
.guest-head { display: flex; flex-direction: column; gap: 2px; text-align: left; align-items: flex-start; background: none; border: 0; padding: 0; width: 100%; min-height: 48px; }
.guest-head strong { font-size: 1.0625rem; overflow-wrap: anywhere; }
.guest-addr { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.badge-ok { background: #c8e6c9; color: #1b5e20; }
.badge-xem { background: #ffe0b2; color: #7a3d00; }
.badge-khong { background: #ffcdd2; color: #8e1a1a; }
@media (prefers-color-scheme: dark) {
  .badge-ok { background: #1b5e20; color: #e8f5e9; }
  .badge-xem { background: #7a3d00; color: #fff3e0; }
  .badge-khong { background: #8e1a1a; color: #ffebee; }
}
.edit { border-top: 1px solid var(--border); padding-top: 12px; }
.alert { border: 2px solid var(--danger); border-radius: 10px; padding: 12px; }
.ok-box { border: 2px solid #2e7d32; border-radius: 10px; padding: 16px; text-align: center; }
.ok-box h2 { margin-bottom: 4px; }
.sticky-bar { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
#toast-host { pointer-events: none; }
#toast-host .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* nằm trên thanh nút dính, không che nút Tiếp */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
h2:focus { outline: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.modal { width: 100%; max-width: 420px; }