/* ═══════════════════════════════════════════════════════════════════
   Sinh trắc vân tay — bản web cho DEX Deutsch Experten
   Mobile-first: mọi quy tắc mặc định là cho màn hình hẹp, mở rộng dần
   bằng min-width. Bảng màu lấy từ scripts/report_spec.py để giao diện
   app và nội dung báo cáo là MỘT hệ, không chắp vá.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#002060;         /* xanh chủ đạo, trùng PALETTE.ink của báo cáo */
  --accent:#0b57d0;
  --sky:#8fc4f0;
  --gold:#d4af37;
  --danger:#b3261e;
  --muted:#8a94a6;
  --paper:#fff;
  --bg:#eef2f7;
  --line:#dfe6f0;
  --radius:14px;
  --shadow:0 2px 18px rgba(0,32,96,.08);
  --shadow-lg:0 12px 40px rgba(0,32,96,.16);
  --font:'Be Vietnam Pro','Segoe UI',Roboto,Arial,sans-serif;
  --tap:48px;            /* vùng chạm tối thiểu trên mobile */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Thuộc tính `hidden` của HTML chỉ đặt `display:none` ở mức user-agent, nên BẤT KỲ
   quy tắc display nào của ta (vd. .loading{display:flex}) cũng thắng nó. Không có
   dòng này, lớp phủ "Đang tạo báo cáo" và lightbox hiện đè kín trang ngay từ lúc
   tải — đã dính đúng lỗi đó, chỉ lộ ra khi chụp màn hình chứ test DOM không thấy. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  /* 16px là mức nhỏ nhất — dưới mức này iOS tự phóng to khi focus input,
     và người lớn tuổi (phụ huynh) đọc rất mệt. */
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}

.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:620px}
@media(min-width:768px){ .wrap{padding:0 24px} }

/* ── Màn hình: chỉ một cái hiện tại mỗi lúc ─────────────────────── */
.screen{display:none}
.screen.is-active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Thanh trên ──────────────────────────────────────────────────── */
.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:40}
.topbar-in{max-width:1120px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff}
.brand-mark{background:var(--gold);color:#3a2c00;font-weight:800;font-size:13px;
  padding:4px 8px;border-radius:6px;letter-spacing:.5px}
.brand-text{font-weight:700;font-size:15px;white-space:nowrap}
.topnav{margin-left:auto;display:flex;gap:4px}
.topnav a{color:#d6e4fb;text-decoration:none;font-size:14px;
  padding:9px 12px;border-radius:8px;white-space:nowrap}
.topnav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-cta{background:rgba(255,255,255,.14);color:#fff!important}
@media(max-width:400px){ .brand-text{display:none} }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  background:linear-gradient(155deg,#002060 0%,#0b3f9e 55%,#0b57d0 100%);
  color:#fff;padding:44px 0 52px;position:relative;overflow:hidden
}
/* Hoạ tiết vân tay mờ — gợi chủ đề mà không cần tải ảnh nền nặng. */
.hero::after{
  content:"";position:absolute;right:-70px;top:-40px;width:320px;height:320px;
  border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 9px,rgba(255,255,255,.09) 9px 11px);
}
.hero-in{max-width:1120px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
.eyebrow{margin:0 0 10px;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.hero h1{margin:0 0 14px;font-size:29px;line-height:1.24;font-weight:800;max-width:16em}
.lede{margin:0 0 26px;font-size:17px;color:#dce8fb;max-width:34em}
.hero-actions{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.hero-note{margin:0;font-size:14px;color:#cfe0f8;background:rgba(255,255,255,.1);
  padding:11px 14px;border-radius:10px;border-left:3px solid var(--gold);max-width:40em}
@media(min-width:640px){
  .hero{padding:60px 0 68px}
  .hero h1{font-size:41px}
  .lede{font-size:18.5px}
  .hero-actions{flex-direction:row;flex-wrap:wrap}
}
@media(min-width:1024px){ .hero h1{font-size:47px} }

/* ── Nút ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:12px 22px;border-radius:10px;border:1.5px solid transparent;
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;
  transition:transform .12s,box-shadow .18s,background .18s;text-align:center
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:14px 26px;font-size:17px;min-height:54px}
.btn-primary{background:var(--gold);color:#3a2c00;box-shadow:0 4px 16px rgba(212,175,55,.4)}
.btn-primary:hover{background:#e2c04a;box-shadow:0 6px 22px rgba(212,175,55,.5)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
/* Trên nền sáng, nút ghost phải đổi màu chữ nếu không sẽ trắng-trên-trắng. */
.wrap .btn-ghost,.report-bar .btn-ghost{color:var(--accent);border-color:var(--accent)}
.wrap .btn-ghost:hover,.report-bar .btn-ghost:hover{background:#eaf1fd}
.linkish{background:none;border:0;color:var(--accent);font:inherit;font-size:15px;
  cursor:pointer;padding:8px 2px;text-decoration:underline;min-height:auto}

/* ── 3 bước ──────────────────────────────────────────────────────── */
.steps{list-style:none;margin:32px 0;padding:0;display:grid;gap:14px}
@media(min-width:768px){ .steps{grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0} }
.steps li{background:var(--paper);border-radius:var(--radius);padding:22px 20px;
  box-shadow:var(--shadow);position:relative}
.steps-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:11px}
.steps h3{margin:0 0 5px;font-size:17px}
.steps p{margin:0;color:#5a6579;font-size:15px}

/* ── Bài viết giới thiệu (luồng 5 bước dẫn tới tư vấn lộ trình) ──── */
.pitch{margin:0 0 40px}
.pitch>h2{margin:0 0 6px;font-size:24px;line-height:1.3}
@media(min-width:768px){ .pitch>h2{font-size:29px} }
.pitch-flow{display:grid;gap:14px;margin:22px 0 26px}
@media(min-width:768px){ .pitch-flow{grid-template-columns:1fr 1fr;gap:18px} }
.pitch-step{background:var(--paper);border-radius:var(--radius);padding:20px 18px;
  box-shadow:var(--shadow);border-top:3px solid var(--accent)}
/* Bước cuối (lời mời) trải hết chiều ngang để kết luồng cho dứt khoát. */
@media(min-width:768px){ .pitch-step:last-child{grid-column:1/-1} }
.pitch-step h3{margin:0 0 7px;font-size:17.5px;line-height:1.35}
.pitch-step p{margin:0;color:#5a6579;font-size:15px;line-height:1.66}
/* Khối "nói cho rõ": phải nổi bật ngang phần quảng cáo, không phải dòng chữ nhỏ
   giấu dưới chân trang — đây là chỗ giữ cho cả trang trung thực. */
.pitch-honest{background:#fff8e6;border:1px solid #f0d9a0;border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 26px;
  font-size:14.5px;color:#6b5b3e;line-height:1.68}
.pitch-cta{background:linear-gradient(150deg,var(--ink),var(--accent));color:#fff;
  border-radius:var(--radius);padding:28px 22px;text-align:center}
.pitch-cta h3{margin:0 0 9px;font-size:21px;color:#fff;line-height:1.32}
.pitch-cta p{margin:0 auto 20px;max-width:44em;font-size:15.5px;color:#dce8fb;line-height:1.66}
.pitch-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Nút ghost trên nền xanh đậm: viền trắng, nếu không sẽ chìm hẳn. */
.pitch-cta .btn-ghost{border-color:rgba(255,255,255,.65);color:#fff;background:transparent}

/* ── Thẻ quyền riêng tư ─────────────────────────────────────────── */
.privacy-card{background:#e8f5ee;border:1px solid #b9dfc9;border-left:5px solid #2a9d8f;
  border-radius:var(--radius);padding:20px;margin:0 0 40px}
.privacy-card h2{margin:0 0 8px;font-size:17px;color:#14614f}
.privacy-card p{margin:0;font-size:15px;color:#245c4d}

/* ── Card / form ─────────────────────────────────────────────────── */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 18px;margin-bottom:24px}
@media(min-width:768px){ .card{padding:28px} }
.card h2{margin:0 0 6px;font-size:20px}
.muted{color:#5a6579;font-size:15px;margin:0 0 18px}

.crumbs{padding:18px 0 4px}
.progress{height:6px;background:#dbe4f0;border-radius:99px;overflow:hidden;margin-bottom:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--sky));
  border-radius:99px;transition:width .35s}
.step-label{margin:0 0 18px;font-size:13.5px;color:var(--muted);font-weight:600;
  letter-spacing:.3px;text-transform:uppercase}

label{display:block;font-size:14.5px;font-weight:700;color:#40506e;margin:16px 0 6px}
.req{color:var(--danger)}
input[type=text],input[type=date],input[type=search],select{
  width:100%;padding:13px 14px;border:1.5px solid #cfd8e6;border-radius:10px;
  font:inherit;font-size:16px;background:#fff;color:var(--ink);min-height:var(--tap)
}
input:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(11,87,208,.16)}
input[aria-invalid=true]{border-color:var(--danger)}
.row2{display:grid;gap:0}
@media(min-width:560px){ .row2{grid-template-columns:1fr 1fr;gap:16px} }
.err{color:var(--danger);font-size:14px;margin:6px 0 0;font-weight:600}
.hint{color:var(--muted);font-size:13.5px;margin:6px 0 0;line-height:1.5}

.check{display:flex;gap:11px;align-items:flex-start;margin:22px 0 0;
  font-weight:400;font-size:15px;color:#40506e;line-height:1.55;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.form-actions{margin-top:24px}
.form-actions .btn{width:100%}
@media(min-width:560px){ .form-actions .btn{width:auto} }

/* ── Bảng 10 ngón ────────────────────────────────────────────────── */
/* Hai hàng 5 cột = đúng hình dạng hai bàn tay, nên khách nhìn là biết ngay ô nào
   là ngón nào mà không phải đọc nhãn. Dưới 640px xuống 5 cột hẹp vẫn giữ được
   ẩn dụ bàn tay; chỉ khi quá chật (<400px) mới rơi xuống 3 cột. */
.hands{display:grid;gap:10px;grid-template-columns:repeat(5,1fr);margin:0 0 16px}
.hand-label{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:6px 0 0}
.hand-label:first-child{margin-top:0}

/* Ô ngón là <div role="button">, KHÔNG phải <button>: bên trong có ảnh + nhiều
   khối chữ, và nút "bỏ chọn" lồng bên trong — HTML cấm <button> trong <button>. */
.finger{background:#fff;border:2px solid var(--line);border-radius:11px;
  padding:7px;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  text-align:center;transition:border-color .18s,box-shadow .18s}
.finger:hover{border-color:var(--accent)}
.finger:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.finger[data-filled=true]{border-color:var(--accent);background:#f7faff}
.finger-name{font-size:12px;font-weight:700;color:#40506e;line-height:1.25}
/* Trần chiều cao: 3/4 trên màn rộng cho ô cao gần 300px, cả bảng dài hơn hai
   màn hình và nút "Tạo báo cáo" trôi mãi dưới đáy. Ảnh mẫu chỉ cần đủ nhận ra
   dạng vân, không cần to. */
/* Chiều cao cố định thay vì aspect-ratio: ô giãn hết chiều ngang của cột nên
   tỉ lệ 3/4 cho ô cao ~300px trên màn rộng — cả bảng dài hơn hai màn hình và
   nút "Tạo báo cáo" trôi mãi dưới đáy. Ảnh dùng object-fit:cover nên không méo. */
.finger-slot{position:relative;height:124px;border-radius:7px;overflow:hidden;
  background:#f2f5fa;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){ .finger-slot{height:74px} }
.finger-slot img{width:100%;height:100%;object-fit:cover;display:block}
.finger-empty{font-size:22px;color:#b9c7dc;font-weight:400;line-height:1}
.finger-code{font-size:12px;font-weight:800;color:var(--accent);line-height:1.2}
/* Cho xuống 2 dòng rồi mới cắt: tên chủng đa số dài ("Vân xoáy kép dạng móc"),
   ép một dòng thì ô nào cũng cụt thành "Vân xoáy kép d…" — vô nghĩa. */
.finger-type{font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.finger-none{font-size:11.5px;color:#9fadc0}

/* Khổ hẹp: thu gap + padding chứ KHÔNG đổi số cột. Rơi xuống 3 cột là hai ngón
   cuối bị đẩy sang hàng khác, mất hẳn ẩn dụ bàn tay — trên 390px (iPhone 12-15,
   khổ phổ biến nhất) trông như hai nhóm rời rạc.
   PHẢI đặt SAU các quy tắc .finger-* ở trên: cùng độ đặc hiệu (0,1,0) nên quy
   tắc đứng sau thắng, @media không tự cộng thêm điểm nào. */
@media(max-width:560px){
  .hands{gap:6px}
  .finger{padding:5px;gap:4px;border-width:1.5px;border-radius:9px}
  .finger-name{font-size:10.5px}
  .finger-code{font-size:11px}
  .finger-none{font-size:9.5px}
  /* Cột chỉ ~60px: tên chủng nào cũng cụt thành "Vân xoáy…", ba ô khác chủng
     nhìn y hệt nhau. Mã chủng (WC/WD) đã phân biệt đủ, nên bỏ tên đi —
     tên đầy đủ vẫn đọc được qua aria-label và trong hộp thư viện. */
  .finger-type{display:none}
}

.hands-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.hands-count{margin:0;font-size:14.5px;color:var(--muted)}
.hands-count strong{color:var(--ink)}

/* ── Chủng chính ─────────────────────────────────────────────────── */
.primary-box{background:#f7faff;border:1px solid #d6e2f4;border-radius:var(--radius);
  padding:16px 18px;margin:0 0 4px}
.primary-box label{display:block;font-weight:700;margin:0 0 8px;font-size:15px}
.primary-box select{width:100%;max-width:420px}
.primary-box .hint{margin:8px 0 0}

/* ── Hộp thư viện chủng ──────────────────────────────────────────── */
.picker{position:fixed;inset:0;z-index:60;background:rgba(10,22,45,.62);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:768px){ .picker{align-items:center;padding:24px} }
.picker[hidden]{display:none}
.picker-box{background:var(--bg);width:100%;max-width:1000px;max-height:92vh;
  border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:768px){ .picker-box{border-radius:16px;max-height:88vh} }
.picker-head{display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:#fff;border-bottom:1px solid var(--line);flex:none}
.picker-head strong{display:block;font-size:16.5px;line-height:1.3}
.picker-head .muted{font-size:13.5px}
/* Khối tiêu đề giãn ra để đẩy hai nút sang phải. KHÔNG dùng margin-left:auto
   trên nút: #picker-clear có thể đang hidden (ngón chưa chọn), lúc đó không còn
   gì đẩy .picker-x và nó tụt về sát tiêu đề. */
.picker-head > div:first-child{flex:1;min-width:0}
#picker-clear{flex:none;font-size:14px}
.picker-x{flex:none;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:24px;line-height:1;cursor:pointer;font-family:inherit}
.picker-x:hover{background:#f2f5fa}
.picker-body{padding:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ── Bộ lọc ──────────────────────────────────────────────────────── */
.filters{margin:0 0 18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{border:1.5px solid #cfd8e6;background:#fff;color:#40506e;border-radius:99px;
  padding:9px 15px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;min-height:42px}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Lưới chủng ──────────────────────────────────────────────────── */
/* auto-fill + minmax nhỏ để màn rộng xếp được 4-5 thẻ/hàng thay vì 2 thẻ kéo dài.
   Trên 360px vẫn đủ chỗ cho 2 cột (mỗi thẻ ~150px) — hợp lý để so ảnh cạnh nhau. */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
@media(min-width:768px){ .grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px} }
/* .tile là <div role="button"> chứ KHÔNG phải <button>: nút zoom bên trong cũng
   là một nút, mà HTML cấm lồng <button> trong <button> — trình duyệt sẽ tự đóng
   thẻ ngoài sớm và đẩy toàn bộ .tile-body ra ngoài thẻ (lưới mất sạch tên chủng,
   đã dính đúng lỗi này). Dùng div nên cũng không phải chống UA stylesheet nữa. */
.tile{background:#fff;border:2px solid var(--line);border-radius:12px;overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;align-items:stretch;
  text-align:left;padding:0;margin:0;font:inherit;color:inherit;width:100%;
  transition:border-color .18s,box-shadow .18s,transform .12s}
.tile:focus-visible,.tile-zoom:focus-visible{outline:3px solid var(--accent);
  outline-offset:2px}
.tile:hover{border-color:var(--sky);box-shadow:var(--shadow);transform:translateY(-2px)}
.tile[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
/* Ảnh mẫu ~300x400 (dọc). Khoá tỉ lệ VÀ trần chiều cao: chỉ dùng aspect-ratio,
   khi cột grid rộng ra (desktop) thẻ bị kéo cao lênh khênh, phần chữ trôi xuống
   tận đáy và lưới trông vỡ. max-height giữ thẻ luôn cân đối ở mọi bề rộng. */
.tile-img{position:relative;background:#f2f5fa;aspect-ratio:3/4;
  max-height:230px;overflow:hidden}
.tile-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.tile-noimg{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted);font-size:13.5px;text-align:center;padding:10px}
.tile-zoom{position:absolute;right:7px;bottom:7px;background:rgba(0,32,96,.72);color:#fff;
  border:0;border-radius:7px;width:34px;height:34px;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;line-height:1}
.tile-body{padding:11px 12px 13px}
.tile-code{font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--muted)}
.tile-name{font-size:15px;font-weight:700;margin:2px 0 6px;line-height:1.32}
.tile-group{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:99px;color:#fff}
.tile-caveat{margin:8px 0 0;font-size:12.5px;color:#8a5a00;background:#fff6e0;
  padding:7px 9px;border-radius:7px;line-height:1.45}
.empty{text-align:center;color:var(--muted);padding:36px 0;font-size:15px}

/* ── Thanh chọn dính đáy ────────────────────────────────────────── */
.sticky-bar{position:sticky;bottom:0;z-index:30;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(0,32,96,.13);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom))}
.sticky-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px}
.sticky-info{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.sticky-info img{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:#f2f5fa}
.sticky-info strong{display:block;font-size:14.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-info span{font-size:12.5px;color:var(--muted)}
.sticky-bar .btn{flex:none}
@media(max-width:420px){ .sticky-bar .btn{padding:12px 16px;font-size:15px} }

/* ── Báo cáo ─────────────────────────────────────────────────────── */
.report-bar{position:sticky;top:0;z-index:35;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(0,32,96,.07)}
.report-bar-in{max-width:1120px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.report-bar-actions{margin-left:auto;display:flex;gap:9px}
.report-bar .btn{min-height:44px;padding:10px 16px;font-size:15px}
@media(max-width:520px){
  .report-bar-actions{width:100%;margin-left:0}
  .report-bar-actions .btn{flex:1}
}
/* Báo cáo do engine Python sinh, có CSS riêng — bọc trong host để không
   rò rỉ style ra ngoài và ngược lại. */
.report-host{background:#fff}
.report-host iframe{width:100%;border:0;display:block;min-height:70vh}

.cta-final{background:linear-gradient(150deg,#002060,#0b57d0);color:#fff;
  border-radius:var(--radius);padding:30px 22px;margin:32px 0 44px;text-align:center}
.cta-final h2{margin:0 0 10px;font-size:23px}
.cta-final p{margin:0 auto 22px;color:#dce8fb;font-size:16px;max-width:44em}
.cta-row{display:flex;flex-direction:column;gap:11px;align-items:center}
.cta-row .btn{width:100%;max-width:340px}
@media(min-width:600px){
  .cta-final{padding:40px 32px}
  .cta-row{flex-direction:row;justify-content:center}
  .cta-row .btn{width:auto}
}

/* ── Lớp phủ tải ─────────────────────────────────────────────────── */
.loading{position:fixed;inset:0;background:rgba(0,32,96,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:90;padding:20px}
.loading-box{background:#fff;border-radius:var(--radius);padding:30px 34px;text-align:center;
  box-shadow:var(--shadow-lg);max-width:340px}
.loading-box p{margin:16px 0 0;font-weight:700;font-size:15.5px}
.spinner{width:44px;height:44px;margin:0 auto;border:4px solid #dbe4f0;
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .spinner{animation-duration:2s}
  .screen.is-active{animation:none}
}

/* ── Xem ảnh lớn ─────────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;background:rgba(0,16,42,.94);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:22px}
.lightbox figure{margin:0;max-width:min(94vw,760px);text-align:center}
.lightbox img{max-height:78vh;width:auto;margin:0 auto;border-radius:10px;
  background:#fff;image-rendering:auto}
.lightbox figcaption{color:#fff;margin-top:14px;font-size:15.5px;font-weight:600}
.lightbox-x{position:absolute;top:14px;right:16px;width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;
  line-height:1;cursor:pointer}
.lightbox-x:hover{background:rgba(255,255,255,.28)}

/* ── Chân trang ──────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#c8d6ee;padding:28px 0 34px;margin-top:auto}
.foot p{margin:0 0 7px;font-size:14.5px}
.foot .muted{color:#93a9cc;font-size:13.5px}
.foot a{color:#d6e4fb}

/* ── In: chỉ in nội dung báo cáo ─────────────────────────────────── */
@media print{
  .topbar,.report-bar,.foot,.cta-final,.sticky-bar,.loading,.lightbox{display:none!important}
  body{background:#fff}
  .report-host iframe{min-height:0}
}