/* ============================================================
   IIKANZI VISA — design system (bám app TG2)
   Tokens: indigo #4f6ef7 · nền #f3f4f7 · thẻ trắng viền #e7eaf2
   Mobile-first + responsive desktop (cột giữa max 760px).
   ============================================================ */
:root{
  --brand:#4f6ef7; --brand-2:#5b7df8; --brand-soft:#eef2ff;
  --bg:#f3f4f7; --card:#fff; --line:#e7eaf2; --line-soft:#f1f3f8;
  --ink:#1f2937; --ink-2:#65748f; --ink-3:#9aa3b2;
  --ok:#10b981; --ok-soft:#e7f7f0;
  --shadow:0 2px 10px rgba(21,31,56,.06);
  --shadow-lg:0 8px 24px rgba(21,31,56,.12);
  --page:760px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  /* Font UI (chuyên nghiệp, hợp giấy tờ/hành chính) vs font THÂN THIỆN (hướng dẫn) */
  /* Font toàn app: Be Vietnam Pro (đẹp, không "bầu" — chữ tròn trước là do Nunito, đã bỏ). */
  --font-ui:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
  --font-friendly:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  color:var(--ink); background:var(--bg);
  min-height:100vh; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
button,input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}
/* Phần HƯỚNG DẪN / đọc-hiểu dùng font THÂN THIỆN (Nunito tròn, dễ gần) */
.sheet-body,.intro-wrap,.note-box,.scan-note,.up-legend{font-family:var(--font-friendly)}

/* ---------- App shell ---------- */
.app{max-width:var(--page);margin:0 auto;min-height:100vh;position:relative}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);
  color:#fff; box-shadow:0 2px 12px rgba(79,110,247,.22);
  padding:calc(var(--safe-top) + 14px) 16px 14px;
}
.hdr-row{display:flex;align-items:center;gap:10px;min-height:34px}
.hdr-back{
  flex:0 0 auto;width:36px;height:36px;border:none;background:transparent;
  color:#fff;border-radius:50%;font-size:22px;font-weight:700;cursor:pointer;display:none;
  align-items:center;justify-content:center;transition:background .15s;
}
.hdr-back:hover{background:rgba(255,255,255,.15)}
.hdr.has-back .hdr-back{display:flex}
.hdr-titles{flex:1 1 auto;min-width:0}
.hdr-brand{font-size:17px;font-weight:700;letter-spacing:.6px;line-height:1.15}
/* header trạm: chữ IN HOA + căn giữa (back trái · stepper phải giữ nguyên) */
.hdr-center .hdr-titles{text-align:center}
.hdr-center .hdr-brand{text-transform:uppercase;letter-spacing:.8px}
/* header màn LỘ TRÌNH (viewCase mobile + case2 desktop): IN HOA + căn GIỮA ổn định
   mọi bề rộng bằng lưới [back 36] [tiêu đề 1fr] [đệm 36] — không lệch trái/phải khi co màn. */
.hdr-casehead .hdr-row{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:10px}
.hdr-casehead .hdr-titles{text-align:center;min-width:0}
.hdr-casehead .hdr-brand{text-transform:uppercase;letter-spacing:.8px}
.hdr-sub{font-size:11.5px;opacity:.9;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-badge{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.3px;
  background:rgba(255,255,255,.2);padding:4px 9px;border-radius:999px;white-space:nowrap;
}
/* bước N/tổng ở header trạm — không viền nền, dạng stepper gọn (số hiện tại nổi) */
.hdr-step{flex:0 0 auto;display:flex;align-items:baseline;gap:1px;color:#fff;align-self:center;line-height:1}
.hdr-step .hs-n{font-size:20px;font-weight:700;letter-spacing:.2px}
.hdr-step .hs-t{font-size:12.5px;font-weight:600;opacity:.72}
/* progress line trong header (màn Lộ trình) */
.hdr-prog{display:flex;align-items:center;gap:9px;margin-top:11px}
.hdr-prog .bar{flex:1;height:7px;background:rgba(255,255,255,.28);border-radius:99px;overflow:hidden}
.hdr-prog .fill{height:100%;background:#fff;border-radius:99px;transition:width .35s ease}
.hdr-prog .num{font-size:12px;font-weight:700;flex:0 0 auto}

/* ---------- Body ---------- */
.body{padding:16px 16px calc(28px + var(--safe-bot))}
.sec-label{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--ink-3);margin:2px 4px 9px;text-transform:uppercase}

/* Disclaimer 本人申請 */
.disc{
  font-size:11.5px;color:var(--ink-2);background:#fbfcff;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;margin-bottom:14px;line-height:1.5;
}
.disc b{color:var(--brand);font-weight:700}

/* ---------- Resume card (Hồ sơ đang làm) ---------- */
.resume{
  display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:13px 14px;margin-bottom:16px;box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .15s,transform .1s;
}
.resume:hover{border-color:var(--brand)}
.resume:active{transform:scale(.995)}
.resume .r-ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:24px}
.resume .r-mid{flex:1;min-width:0}
.resume .r-k{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.3px}
.resume .r-t{font-size:14.5px;font-weight:700;color:var(--ink);margin:2px 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume .r-bar{height:7px;background:#eef0f5;border-radius:99px;overflow:hidden}
.resume .r-fill{height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:99px}
.resume .r-go{flex:0 0 auto;color:var(--brand);font-size:22px}

/* ---------- Home grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 12px 15px;text-align:center;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .15s,transform .1s,box-shadow .15s;display:flex;flex-direction:column;
  align-items:center;min-height:150px;justify-content:center;
}
.tile:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tile:active{transform:translateY(0)}
.tile.is-primary{border:2px solid var(--brand)}
.tile.is-soon{opacity:.62;cursor:default;box-shadow:none}
.tile.is-soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.tile .t-ic{font-size:34px;line-height:1;margin-bottom:9px}
.tile .t-vi{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.2}
.tile .t-ja{font-size:11px;color:var(--ink-2);margin-top:3px;font-weight:600}
.tile .t-tag{
  position:absolute;top:9px;right:9px;font-size:9px;font-weight:700;letter-spacing:.3px;
  background:#eef0f5;color:var(--ink-3);padding:3px 7px;border-radius:999px;
}
.tile.is-primary .t-tag{background:var(--ok-soft);color:var(--ok)}
.tile .t-badge{
  margin-top:8px;font-size:10.5px;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:999px;padding:3px 10px;
}

/* dải TG1→TG2 */
.soon-strip{
  margin-top:12px;background:#fbfcff;border:1px dashed #cbd5e1;border-radius:16px;
  padding:14px;text-align:center;color:#475569;
}
.soon-strip .s-t{font-size:13.5px;font-weight:700}
.soon-strip .s-tag{font-size:10px;font-weight:700;color:var(--ink-3);margin-left:6px;letter-spacing:.4px}

/* ---------- Lộ trình: TRỤC uốn lượn ở giữa + trạm THẲNG 2 CỘT + nét nối bắt đúng trục ---------- */
.tl{position:relative;padding:6px 0 12px}
/* trục dọc uốn lượn — vẽ bằng SVG (JS) đi qua tâm các chấm */
.tl-spine{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
/* mỗi trạm = 1 hàng; 2 nửa 50% → mốc canh thẳng thành 2 cột trái/phải */
.tl-item{position:relative;z-index:1;display:flex;align-items:center;min-height:74px;width:100%;
  border:none;background:transparent;font-family:inherit;cursor:pointer;padding:0}
.tl-half{flex:0 0 50%;display:flex;align-items:center;gap:9px;min-width:0}
.tl-half.l{justify-content:flex-end}
.tl-half.r{justify-content:flex-start}
.tl-half.l .tl-name{text-align:right}
.tl-half.r .tl-name{text-align:left}
/* nét nối cố định từ mốc ra trục (mép 50%) — luôn bắt đúng trục */
/* MÀU: xong = xanh header (brand) · đang làm = xanh lá (ok) · chưa động = xám */
.tl-conn{flex:0 0 26px;height:3px;background:#cfd8e6}
.tl-item.done .tl-conn{background:var(--brand)}
.tl-item.current .tl-conn{background:var(--ok)}
.tl-circle{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:22px;background:#e8edf5;box-shadow:0 4px 0 #d3ddf6;transition:transform .1s;z-index:2}
/* Trạm CHƯA làm (todo): icon phủ mờ (xám + trong) cho lắng xuống — anh Tướng thích kiểu này.
   done/current/goal/intro override filter:none bên dưới nên vẫn đầy màu rõ nét. */
.tl-circle .tl-ico{line-height:1;filter:grayscale(.8);opacity:.5}
.tl-item:active .tl-circle{transform:translateY(2px)}
.tl-circle.done{background:linear-gradient(135deg,var(--brand-2),var(--brand));box-shadow:0 4px 0 #3a55d8}
.tl-circle.current{background:var(--ok);box-shadow:0 4px 0 #0c8f66}
.tl-circle.done .tl-ico,.tl-circle.current .tl-ico{filter:none;opacity:1}
.tl-circle.goal{width:46px;height:46px;border-radius:14px;background:#fbbf24;box-shadow:0 4px 0 #d99a08}
.tl-circle.goal .tl-ico{filter:none;opacity:1}
.tl-item.active .tl-circle{outline:3px solid #c7d2fe;outline-offset:2px}
.tl-check{position:absolute;right:-4px;bottom:-4px;width:19px;height:19px;border-radius:50%;background:#fff;
  color:var(--brand);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tl-name{flex:1 1 auto;min-width:0}
.tl-name b{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:1.25}
.tl-qual{display:block;font-size:10.5px;font-style:italic;font-weight:600;color:var(--ink-2);line-height:1.2;margin-top:1px}
/* nút giao trên trục — CHẤM TRÒN NHỎ ĐẶC (giống web) */
.tl-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;
  background:#c2cee0;box-shadow:0 0 0 2px #fff;z-index:3}
.tl-item.current .tl-dot{background:var(--ok)}
.tl-item.done .tl-dot{background:var(--brand)}
.tl-item.goal .tl-dot{background:#f0a90a}
/* trạm MỞ ĐẦU (🧭 điểm xuất phát) — tím, viền nét đứt; căn GIỮA trục, ở ĐẦU, KHÔNG nét nối */
.tl-item.tl-lead,.tl-item.tl-tail{flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:auto;gap:6px}
.tl-item.tl-lead{padding:2px 0 14px}
.tl-item.tl-tail{padding:14px 0 4px}
.tl-lead-box{display:flex;flex-direction:column;align-items:center;gap:7px}
.tl-item.tl-lead .tl-name,.tl-item.tl-tail .tl-name{flex:0 0 auto;text-align:center}
.tl-item.tl-lead .tl-name b,.tl-item.tl-tail .tl-name b{font-size:12.5px}
/* Ẩn chấm trục ở node ĐẦU (Bắt đầu) & CUỐI (Tải file) — trục nối vào MÉP vòng tròn,
   KHÔNG có chấm nổi lên giữa icon (giữ layout để drawSpine vẫn tính đúng vị trí). */
.tl-item.tl-lead .tl-dot,.tl-item.tl-tail .tl-dot{visibility:hidden}
.tl-item.tl-lead .tl-dot{top:auto;bottom:29px}
.tl-item.tl-tail .tl-dot{top:29px;bottom:auto}
.tl-circle.intro{background:#f1ecff;border:2px dashed #8b5cf6;box-shadow:0 4px 0 #d9ccf7}
.tl-circle.intro .tl-ico{filter:none;opacity:1}
.tl-item.intro .tl-dot{background:#8b5cf6}
/* đã bấm "Bắt đầu" → node tô đặc + ✓ (hoàn thành), trục đoạn này chuyển màu */
.tl-circle.intro.is-done{background:linear-gradient(135deg,#a78bfa,#8b5cf6);border-style:solid;box-shadow:0 4px 0 #6d43d6}
.tl-circle.intro.is-done .tl-ico{filter:none;opacity:1}
.tl-item.intro .tl-check{color:#7c3aed}
/* ICON minh hoạ trạm (assets/icons/*.webp) trong vòng tròn rail — nền trắng, phủ kín, bo tròn.
   Trạm chưa làm: icon hơi lắng (xám nhẹ); done/current: đầy màu rõ nét (giống emoji trước đây). */
.tl-circle.has-img{background:#fff;padding:8px;overflow:hidden}
.tl-circle .tl-ic-img{width:100%;height:100%;object-fit:contain;display:block;
  filter:grayscale(.35);opacity:.9;transition:filter .15s}
.tl-circle.done .tl-ic-img,.tl-circle.current .tl-ic-img,.tl-circle.intro.is-done .tl-ic-img,
.tl-item.active .tl-circle .tl-ic-img{filter:none;opacity:1}
/* Node "Bắt đầu" (intro) có viền nét đứt 2px → bù padding ít hơn 2px để icon BẰNG các node khác. */
.tl-circle.intro.has-img{border-color:#c4b5fd;padding:6px}

/* ---------- Desktop 2 khung: trái lộ trình · phải chi tiết ---------- */
.pane{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.pane-hd{padding:12px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center}
.pane-badge{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:4px 11px}
.pane-bd{padding:16px}
.pane-bd .cta-bar{position:static;margin-top:16px;padding:0;background:none}
.pane-empty{padding:54px 26px;text-align:center;color:var(--ink-2)}
.pane-empty .pe-ic{font-size:44px}
.pane-empty .pe-t{font-size:15.5px;font-weight:700;color:var(--ink);margin-top:12px}
.pane-empty .pe-d{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.55}

/* ---------- Trạm cuối: các tính năng xuất đơn ---------- */
.exp-grid{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.exp-tile{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font-family:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;
  box-shadow:var(--shadow);transition:border-color .15s,transform .1s}
.exp-tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.exp-tile:active{transform:translateY(0)}
.exp-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:24px}
.exp-mid{flex:1;min-width:0}
.exp-t{font-size:14.5px;font-weight:700;color:var(--ink)}
.exp-d{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.exp-go{flex:0 0 auto;color:var(--ink-3);font-size:20px}

.progress-mini{display:flex;align-items:center;gap:10px;margin-top:14px}
.progress-mini .pm-bar{flex:1;height:8px;background:#eef0f5;border-radius:99px;overflow:hidden}
.progress-mini .pm-fill{height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));border-radius:99px}
.progress-mini .pm-num{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--brand)}

/* ---------- Station screen ---------- */
.st-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.st-head .h-ic{flex:0 0 auto;width:50px;height:50px;border-radius:15px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:27px}
/* thẻ cư trú: icon đầu trạm dùng ẢNH thẻ thật — cao bằng 3 hàng chữ bên cạnh, khung thẻ ngang */
.st-head{gap:20px}
.st-head .h-ic-card{height:64px;width:auto;aspect-ratio:1.585 / 1;border-radius:10px;
  background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-lg)}
.st-head .h-ic-card img,.st-head .h-ic-card svg{width:100%;height:100%;object-fit:cover;display:block}
/* Ô GIỮ CHỖ ảnh minh hoạ (trạm chưa có ảnh thật): cùng cỡ ô thẻ, viền nét đứt + emoji mờ,
   sau này anh Tướng khai img cho trạm là ảnh thật thay vào ô này. */
.st-head .h-ic-card.is-ph{background:#f6f7fb;border-style:dashed;box-shadow:none;
  display:flex;align-items:center;justify-content:center}
.st-head .h-ph-emo{font-size:30px;line-height:1;opacity:.55}
/* Ô header dùng ICON minh hoạ (trạm chưa có ảnh 見本): ô VUÔNG nền trắng, icon nằm gọn (contain). */
.st-head .h-ic-card.is-icon{aspect-ratio:1/1;background:#fff;border-style:solid;
  box-shadow:var(--shadow-lg);padding:9px;display:flex;align-items:center;justify-content:center}
.st-head .h-ic-card.is-icon .h-ic-illus{width:100%;height:100%;object-fit:contain;display:block}
/* màn RẤT hẹp (≤360px): thu ảnh + gap để 3 dòng chữ không bị gãy */
@media(max-width:360px){ .st-head{gap:13px} .st-head .h-ic-card{height:54px} }
.st-head .h-mid{flex:1;min-width:0}
.st-head .h-vi{font-size:17px;font-weight:700;color:var(--ink);line-height:1.2}
/* Tên giấy dài: cân dòng (text-wrap:balance) để xuống dòng gọn, không cắt xấu giữa cụm (vd "Giấy chứng minh / quan hệ") */
.st-head .h-vi,.tile .t-vi,.tl-name b,.sheet-ttl .stt-vi{text-wrap:balance}
.st-head .h-qual{font-size:12.5px;font-style:italic;font-weight:600;color:var(--ink-2);margin-top:2px}
.st-head .h-ja{font-size:12px;color:var(--ink-2);margin-top:2px}
/* nút ? mở hướng dẫn giấy tờ */
.h-help{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--brand);
  background:#fff;color:var(--brand);font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:background .15s,transform .1s}
.h-help:hover{background:var(--brand-soft)}
.h-help:active{transform:scale(.92)}

/* ① ô thêm / cập nhật ảnh (thay dropzone ở trạm giấy) */
.upbox{background:var(--card);border:1.5px dashed #b9c4e8;border-radius:16px;padding:22px 16px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:14px}
.upbox:hover{border-color:var(--brand);background:#f8faff}
.upbox.is-done{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.upbox .up-ic{font-size:34px;line-height:1}
.upbox.is-done .up-ic{color:var(--brand);font-weight:800}
.upbox .up-t{font-size:14.5px;font-weight:700;color:var(--brand);margin-top:8px}
.upbox.is-done .up-t{color:var(--brand)}
.upbox .up-d{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}

/* ② khối thông tin quét được từ ảnh */
.scan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow)}
.scan-cap{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.4px;margin-bottom:9px}
.scan-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.scan-row:last-of-type{border-bottom:none}
.scan-row .sk{font-size:12.5px;color:var(--ink-2)}
.scan-row .sv{font-size:12.5px;font-weight:700;text-align:right}
.scan-row .sv.blank{color:var(--ink-3);font-weight:600;font-style:italic}
.scan-note{font-size:11px;color:var(--ink-3);margin-top:9px;line-height:1.5;font-style:italic}
.scan-note b{color:var(--brand);font-weight:700}
/* Nút "Đọc tự động từ ảnh" (OCR) + trạng thái */
.ocr-wrap{margin:12px 0 2px}
.ocr-btn{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(79,110,247,.24);font-size:15px;font-weight:700}
.ocr-btn .ocr-ic{font-size:16px}
.ocr-btn:hover{filter:brightness(1.05);box-shadow:0 6px 15px rgba(79,110,247,.30)}
.ocr-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.ocr-status{font-size:12px;color:var(--ink-2);font-family:var(--font-friendly);text-align:center;margin-top:8px}
.ocr-status:empty{display:none}
.ocr-status.ok{color:#1a7f4b}
.ocr-status.err{color:#c0392b}
.ocr-priv-line{font-size:11px;color:var(--ink-3);line-height:1.55;margin:10px auto 0;max-width:300px;text-align:center;font-family:var(--font-friendly);font-style:italic}
.ocr-more{border:none;background:none;padding:0;color:var(--brand);font-weight:700;font-size:11px;cursor:pointer;font-family:inherit;white-space:nowrap;font-style:normal}
.ocr-more:hover{text-decoration:underline}
.ocr-privacy{font-size:11px;color:var(--ink-2);line-height:1.6;margin-top:8px;background:#fbfcff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-family:var(--font-friendly);text-align:left}
.ocr-privacy b{color:var(--brand);font-weight:700}
/* Khối KIỂM TRA TỰ ĐỘNG: mỗi dòng TRÁI = yêu cầu · PHẢI = kết quả; cả dòng đổi màu (xanh đúng / đỏ sai) */
/* Khối KIỂM TRA "đúng giấy tờ chưa" — MỘT hộp chung, chia dòng (gọn); dòng SAI tô đỏ để nổi bật */
.verify-block{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:13px 0 5px;overflow:hidden}
.verify-block > .scan-cap{padding:0 15px 3px}
.vcard{display:flex;flex-direction:column}
.v-overall{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;margin:2px 15px 4px;padding:6px 10px;border-radius:9px}
.v-overall .vo-ic{font-size:12px;flex:0 0 auto}
.v-overall.ok{background:#eef9f2;color:#0f7a4d}
.v-overall.warn{background:#fff7e8;color:#a06a12}
.v-overall.bad{background:#fdecec;color:#b3271e}
/* Mỗi tiêu chí = 1 DÒNG trong hộp chung, ngăn bằng kẻ mảnh */
.v-row{display:flex;align-items:flex-start;gap:10px;padding:11px 15px;border-top:1px solid var(--line-soft)}
.vcard > .v-row:first-child{border-top:none}
.v-row.bad{background:#fdf3f3}                 /* dòng SAI tô đỏ nhạt để nổi */
.v-row.warn{background:#fffaf1}
/* Dấu tình trạng = Ô VUÔNG: chưa kiểm = ô trống; đúng = ✓; sai = ✗; chưa chắc = ⚠ */
.v-mark{flex:0 0 auto;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;background:#fff;border:1.5px solid #ccd3e0;color:transparent;margin-top:1px}
.v-row.ok .v-mark{background:#25a35a;border-color:#25a35a;color:#fff}
.v-row.bad .v-mark{background:#e0483d;border-color:#e0483d;color:#fff}
.v-row.warn .v-mark{background:#eaa93a;border-color:#eaa93a;color:#fff}
.v-body{min-width:0}
.v-lb{font-size:13px;font-weight:700;color:var(--ink)}
.v-found{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.4;word-break:break-word}
.v-note{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.45;font-family:var(--font-friendly)}
.v-row.bad .v-lb{color:#b3271e}

/* Trạm THÔNG TIN BỔ SUNG — form tự điền (khối chung + thẻ người thân cùng sống) */
.ef-sec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow);margin-bottom:12px}
.ef-sec-h{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:.3px;margin-bottom:10px}
.ef-hint{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin:-4px 0 10px}
.ef-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin-bottom:11px}
.ef-row:last-child{margin-bottom:0}
.ef-k{font-size:12.5px;font-weight:700;color:var(--ink-2);line-height:1.35}
.ef-inp{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13.5px;
  font-family:inherit;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
.ef-inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #eef2ff}
select.ef-inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2365748f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.ef-person{border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:10px;background:#fbfcff}
.ef-person:last-of-type{margin-bottom:12px}
.ef-person-h{font-size:12.5px;font-weight:700;color:var(--brand);margin-bottom:9px}
.ef-empty{font-size:12.5px;color:var(--ink-3);text-align:center;padding:12px;line-height:1.5}
.ef-add{width:100%;border:1.5px dashed #c7cddb;background:#fff;border-radius:12px;padding:11px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--brand);cursor:pointer}
.ef-add:hover{border-color:var(--brand);background:#f8faff}

/* ⓪ hình minh hoạ TRANG CẦN CHỤP (vd trang thông tin hộ chiếu) */
.illus{margin:0 0 12px;background:var(--brand-soft);border:1px solid #d6def7;border-radius:16px;padding:12px 14px 10px}
.illus-cap{font-size:12px;font-weight:700;color:var(--brand);line-height:1.45;margin-bottom:9px}
.illus svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}

/* ①' ô tải ảnh THẬT — mỗi mặt 1 ô (thẻ cư trú: Mặt trước + Mặt sau) */
.upslots{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.upwrap{display:flex;flex-direction:column;gap:5px}
.upslot{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1.5px dashed #b9c4e8;border-radius:14px;padding:11px 13px;cursor:pointer;
  transition:border-color .15s,background .15s}
.upslot:hover{border-color:var(--brand);background:#f8faff}
.upslot.is-done{border-style:solid;border-color:var(--brand);background:var(--brand-soft)}
.upslot .us-ic{flex:0 0 auto;width:46px;height:46px;border-radius:11px;background:#eef2ff;
  display:flex;align-items:center;justify-content:center;font-size:24px}
.upslot .us-thumb{flex:0 0 auto;width:64px;height:46px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);background:#fff}
.upslot .us-thumb.is-pdf{display:flex;align-items:center;justify-content:center;font-size:24px}
.upslot .us-meta{flex:1;min-width:0}
.upslot .us-lb{font-size:13.5px;font-weight:700;color:var(--ink)}
.upslot .us-hint{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.upslot .us-ok{font-size:11.5px;color:var(--brand);font-weight:700;margin-top:2px}
.upslot .us-rm{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;
  background:#fff;color:var(--ink-2);font-size:13px;cursor:pointer;box-shadow:var(--shadow)}
.upslot .us-rm:hover{background:#ffe9e9;color:#c0392b}
.up-err{font-size:11.5px;color:#c0392b;font-weight:700;background:#fdecec;
  border:1px solid #f5c2c2;border-radius:10px;padding:7px 11px;line-height:1.45}
.up-legend{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:4px;display:flex;flex-direction:column;gap:2px}
.up-legend .lg-row{display:flex;align-items:baseline;gap:6px;justify-content:center}
.up-legend .lg-ic{flex:0 0 auto}
.up-legend .lg-f{font-weight:600;color:var(--ink);letter-spacing:.2px}
.up-legend b{color:var(--ink);font-weight:700;letter-spacing:.2px}

/* ①'' ô dạng THẺ — Mặt trước + Mặt sau cùng 1 HÀNG, hình chữ nhật như thẻ thật */
.upslots.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 1 ô thẻ ngang (vd hộ chiếu chỉ 1 trang) — canh giữa, không kéo nửa màn */
.upslots.cards.single{grid-template-columns:min(360px,100%);justify-content:center}
.upslots.cards .up-legend{grid-column:1 / -1;text-align:center}
.upslots.cards .upwrap{gap:5px}
.upslot.is-card{display:block;padding:0;overflow:hidden;background:#fff}
.upslot.is-card .us-body{display:block}
.upslot.is-card .us-preview{position:relative;aspect-ratio:1.585 / 1;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.upslot.is-card .us-cardtext{text-align:center;padding:0 12px}
.upslot.is-card .us-lb{font-size:14px;font-weight:700;color:var(--ink)}
.upslot.is-card .us-hint{font-size:10.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.upslot.is-card .us-img{width:100%;height:100%;object-fit:cover}
.upslot.is-card .us-img.is-pdf{width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;font-size:34px;background:#f3f4f7}
.upslot.is-card .us-plus{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:16px;font-weight:700;display:flex;
  align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(79,110,247,.42)}
.upslot.is-card .us-chip{position:absolute;left:7px;bottom:7px;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(31,41,55,.72);padding:3px 9px;border-radius:999px}
.upslot.is-card .us-rm{position:absolute;top:7px;right:7px}

/* ①''' ô dạng TRANG GIẤY (hình chữ nhật DỌC) — hộ chiếu, giấy A4 (cư trú, việc làm…). 1 ô = canh giữa; nhiều trang = 2 cột */
/* ô khổ dọc: kích thước ĐỒNG NHẤT (1 ô hay 2 ô bằng nhau), CO theo màn hình (clamp) — không tràn máy nhỏ; chú thích full-width (không bó theo bề rộng ô) */
.upslots.pages{display:flex;flex-flow:row wrap;justify-content:center;gap:12px}
.upslots.pages .upwrap{flex:0 0 clamp(130px,43vw,200px);max-width:200px}
.upslots.pages .up-legend{flex:0 0 100%;text-align:center}
.upslots.pages .upslot.is-card .us-preview{aspect-ratio:4 / 5}
.upslots.pages .upslot.is-card .us-lb{font-size:13px}
.upslots.pages .upslot.is-card .us-hint{font-size:10px}

/* ②' ô thông tin sửa được (chạm ô hoặc ✎) */
.scan-row .sv-wrap{display:flex;align-items:center;gap:7px;cursor:pointer;
  max-width:66%;justify-content:flex-end}
.scan-row .sv-edit{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--brand);font-size:12px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center}
/* lật glyph ✎ ngang → bút nghiêng sang PHẢI (thay vì mặc định nghiêng trái) */
.scan-row .sv-edit{transform:scaleX(-1)}
.scan-row .sv-edit:hover{background:var(--brand-soft)}
.scan-row .sv-inp{width:100%;min-width:130px;font-size:12.5px;font-weight:700;text-align:right;
  border:1.5px solid var(--brand);border-radius:8px;padding:5px 9px;outline:none;
  color:var(--ink);background:#fff}

/* hộp thoại hướng dẫn — bottom sheet (mobile) / center (desktop) */
.sheet-mask{position:fixed;inset:0;z-index:100;background:rgba(21,31,56,.45);
  display:none;align-items:flex-end;justify-content:center}
.sheet-mask.open{display:flex}
.sheet{background:#fff;width:100%;max-width:var(--page);max-height:88vh;
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;
  box-shadow:0 -8px 34px rgba(21,31,56,.28);animation:sheetUp .22s ease}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.5}to{transform:translateY(0);opacity:1}}
.sheet-top{display:flex;align-items:center;gap:12px;padding:16px 16px 13px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:#fff;border-radius:22px 22px 0 0}
.sheet-ic{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:25px}
.sheet-ic.has-img{background:#fff;padding:6px;overflow:hidden}
.sheet-ic.has-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:11px}
.sheet-ttl{flex:1;min-width:0}
.sheet-ttl .stt-vi{font-size:16px;font-weight:700;color:var(--ink);line-height:1.22}
.sheet-ttl .stt-ja{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.sheet-x{flex:0 0 auto;width:32px;height:32px;border:none;background:#f1f3f8;border-radius:50%;
  color:var(--ink-2);font-size:14px;cursor:pointer}
.sheet-x:hover{background:#e7eaf2}
.sheet-body{padding:14px 16px calc(22px + var(--safe-bot));overflow-y:auto}
/* Hộp thoại XEM TÀI LIỆU (PDF form gốc / công cụ điền mẫu) — nhúng iframe lấp đầy, KHÔNG dẫn ra link ngoài */
.sheet.sheet-doc{height:88vh}
.sheet-doc-body{flex:1;min-height:0;padding:12px;display:flex;overflow:hidden}
.doc-frame{flex:1;width:100%;min-height:0;border:1px solid var(--line);border-radius:12px;background:#fff}
/* Nút TẢI ⬇︎ trên đầu hộp xem tờ khai điền sẵn (cạnh nút ✕) */
.sheet-dl{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--brand);color:#fff;font-size:15px;text-decoration:none;margin-right:2px}
.sheet-dl:hover{filter:brightness(1.06)}
.gen-doc-note{font-size:12.5px;color:var(--ink-2);background:#fff8e6;border:1px solid #f0e2b8;
  border-radius:10px;padding:9px 11px;margin-bottom:10px;line-height:1.5}
/* Ô THẺ "Mẫu đơn của Cục" — thumbnail trang 1 + nhãn; bấm mở hộp thoại. Khuôn giống .upslots.cards (thẻ cư trú). 1 ô = canh giữa; chừa sẵn 2 cột khi có ô 2 */
.sample-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.sample-cards.single{grid-template-columns:min(230px,100%);justify-content:center}
.sample-card{display:block;width:100%;padding:0;text-align:left;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .12s,border-color .12s,box-shadow .12s}
.sample-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sample-card:active{transform:translateY(0)}
.sample-card .sc-thumb{position:relative;aspect-ratio:3 / 4;background:#f3f4f7;overflow:hidden}
.sample-card .sc-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sample-card .sc-badge{position:absolute;right:8px;top:8px;font-size:11px;font-weight:700;color:#fff;
  background:rgba(31,41,55,.74);padding:4px 10px;border-radius:999px;letter-spacing:.2px}
.sample-card .sc-cap{padding:9px 11px 11px;border-top:1px solid var(--line)}
.sample-card .sc-vi{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
.sample-card .sc-ja{font-size:11px;color:var(--ink-3);margin-top:2px}
.gs-desc{font-size:13px;color:#3b4a8f;line-height:1.55;background:var(--brand-soft);border-radius:12px;padding:11px 13px}
.gs-sec{margin-top:15px}
.gs-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.gs-p{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.gs-ul,.gs-ol{margin:0;padding-left:20px}
.gs-ul li,.gs-ol li{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:5px}
.gs-tip{margin-top:16px;font-size:12px;color:#8a6206;background:#fff8e9;border:1px solid #f6e4b8;
  border-radius:12px;padding:11px 13px;line-height:1.55}
/* Furigana (ruby) trong hộp hướng dẫn — kana nhỏ, xám nhạt, có khoảng thở */
.sheet-body ruby,.stt-ja ruby{ruby-align:center}
.sheet-body rt,.stt-ja rt{font-size:.58em;color:var(--ink-2);font-weight:500;line-height:1;
  letter-spacing:.02em;opacity:.85;transform:translateY(1px)}
/* dòng có ruby cần cao hơn để kana không dính dòng trên */
.gs-desc,.gs-p,.gs-ul li,.gs-ol li,.gs-tip{line-height:1.85}
.stt-ja{line-height:1.9}
@media(min-width:760px){
  .sheet-mask{align-items:center;padding:24px}
  .sheet{max-width:520px;border-radius:20px}
  .sheet-top{border-radius:20px 20px 0 0}
}

.dropzone{
  background:var(--card);border:1.5px dashed #b9c4e8;border-radius:16px;padding:26px 16px;
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.dropzone:hover{border-color:var(--brand);background:#f8faff}
.dropzone .dz-ic{font-size:38px}
.dropzone .dz-t{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px}
.dropzone .dz-d{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}

.or{text-align:center;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.5px;margin:14px 0}

.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;box-shadow:var(--shadow)}
.panel .p-cap{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.4px;margin-bottom:9px}
.frow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.frow:last-child{border-bottom:none}
.frow .fk{font-size:12.5px;color:var(--ink-2)}
.frow .fv{font-size:12.5px;color:var(--ink);font-weight:700;text-align:right}
.frow .fv.blank{color:var(--ink-3);font-weight:600;font-style:italic}

.note-box{font-size:11.5px;color:var(--ink-2);background:#fff8e9;border:1px solid #f6e4b8;
  border-radius:12px;padding:9px 12px;margin-top:12px;line-height:1.5}

/* CTA cố định dưới đáy */
.cta-bar{
  position:sticky;bottom:0;left:0;right:0;margin-top:18px;
  padding:12px 0 calc(6px + var(--safe-bot));
  background:linear-gradient(transparent,var(--bg) 26%);
}
.btn{
  width:100%;border:none;border-radius:14px;padding:14px;font-size:15px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,transform .1s;
}
.btn:active{transform:scale(.99)}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(79,110,247,.3)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.lock{background:#eef0f5;color:var(--ink-3);box-shadow:none;cursor:default}
.btn + .btn{margin-top:9px}

/* trạm cuối / paywall */
.gen-hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 16px;
  text-align:center;box-shadow:var(--shadow)}
.gen-hero .g-ic{font-size:40px}
.gen-hero .g-t{font-size:16px;font-weight:700;margin-top:8px}
.gen-hero .g-d{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.55}
.paywall{margin-top:12px;background:var(--brand-soft);border:1px solid #d7e0ff;border-radius:14px;
  padding:13px 14px;font-size:12px;color:#3b4a8f;line-height:1.55}
.paywall b{color:var(--brand)}

/* ---------- Trạm mở đầu: màn Hướng dẫn nhanh ---------- */
.intro-wrap{display:flex;flex-direction:column;gap:13px}
.intro-hero{text-align:center;background:linear-gradient(150deg,#eef1ff 0%,#f4f0ff 55%,#fdf1f8 100%);
  border:1px solid #e4ddfb;border-radius:18px;padding:22px 18px 20px}
.intro-hero .ih-ic{font-size:40px;line-height:1;filter:drop-shadow(0 5px 9px rgba(120,90,220,.26))}
.intro-hero .ih-t{font-size:18px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.2px}
.intro-hero .ih-ja{font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.3px}
.intro-hero .ih-lead{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:11px auto 0;max-width:34ch}
.intro-sec-lb{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.6px;margin:3px 2px -3px}
.intro-steps{display:flex;flex-direction:column;gap:9px}
.istep{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.istep .is-no{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(79,110,247,.35)}
.istep .is-tx{flex:1 1 auto;min-width:0}
.istep .is-tx b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.istep .is-tx span{display:block;font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.istep .is-emo{flex:0 0 auto;font-size:20px;opacity:.92}
/* thẻ MIỄN PHÍ (xanh) — song song thẻ VIP: free xem & kiểm tra, VIP mở tải/nộp */
.free-card{background:linear-gradient(150deg,#effcf6,#e6f9f0);border:1px solid #bfe9d8;
  border-radius:16px;padding:15px 16px;box-shadow:0 4px 14px rgba(16,150,110,.10)}
.free-top{display:flex;align-items:center;gap:11px}
.free-ic{font-size:24px;line-height:1}
.free-h{flex:1 1 auto;min-width:0}
.free-h .free-t{font-size:15px;font-weight:700;color:#0b7a5b;line-height:1.2}
.free-h .free-sub{font-size:10.5px;font-weight:700;color:#12a074;letter-spacing:.5px;margin-top:1px}
.free-tag{flex:0 0 auto;font-size:15px;font-weight:700;color:#0f9d63;background:#d3f4e6;
  border-radius:8px;padding:3px 11px;line-height:1.25}
.free-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.free-list li{position:relative;padding-left:23px;font-size:12px;color:#155e4a;line-height:1.5}
.free-list li::before{content:"✓";position:absolute;left:0;top:1px;width:16px;height:16px;color:#fff;
  background:#10b981;border-radius:50%;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.free-list li b{color:#0b7a5b}
/* thẻ VIP nổi bật */
.vip-card{background:linear-gradient(150deg,#fffaef,#fff5e2);border:1px solid #f1dea3;
  border-radius:16px;padding:15px 16px;box-shadow:0 4px 16px rgba(196,146,20,.13)}
.vip-top{display:flex;align-items:center;gap:11px}
.vip-crown{font-size:26px;line-height:1}
.vip-h{flex:1 1 auto;min-width:0}
.vip-h .vip-t{font-size:15px;font-weight:700;color:#8a6206;line-height:1.2}
.vip-h .vip-sub{font-size:10.5px;font-weight:700;color:#b5892e;letter-spacing:.5px;margin-top:1px}
.vip-price{flex:0 0 auto;font-size:20px;font-weight:700;color:#a9761a;line-height:1;white-space:nowrap}
.vip-price span{font-size:11px;font-weight:700;color:#b5892e}
.vip-list{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.vip-list li{position:relative;padding-left:23px;font-size:12px;color:#6b5417;line-height:1.5}
.vip-list li::before{content:"✓";position:absolute;left:0;top:1px;width:16px;height:16px;color:#fff;
  background:#d9a520;border-radius:50%;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.vip-list li b{color:#8a6206}
.vip-note{font-size:11px;color:#9a7a2a;font-style:italic;line-height:1.45}
/* ô Nâng cấp VIP nhỏ, góc DƯỚI-PHẢI trong block VIP */
.vip-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:13px}
.vip-foot .vip-note{flex:1 1 auto}
.vip-cta{flex:0 0 auto;border:none;background:linear-gradient(135deg,#e0a91c,#c8901a);color:#fff;
  font-weight:700;font-size:12px;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;
  box-shadow:0 3px 10px rgba(200,144,26,.35)}
.vip-cta:hover{filter:brightness(1.06)}
.vip-cta:active{transform:scale(.98)}
.intro-cta{display:flex;flex-direction:column;margin-top:4px}

/* empty / soon screen */
.empty{background:#fbfcff;border:1px dashed #cbd5e1;border-radius:16px;padding:40px 20px;text-align:center;color:#64748b}
.empty .e-ic{font-size:44px}
.empty .e-t{font-weight:700;font-size:15px;margin-top:10px;color:#475569}
.empty .e-d{font-size:12.5px;margin-top:5px}

/* ---------- Responsive desktop ---------- */
/* ============================================================
   A2 — Dashboard · thẻ người · alert · picker · form thành viên
   ============================================================ */
/* Hero (chỉ ở Dashboard) — banner brand GỌN: chỉ wordmark + tagline (bỏ emblem);
   nút tài khoản = icon TRẦN góc phải trên (không box nền). */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#6f83ff 0%,#4f67f6 55%,#7458f5 100%);
  padding:calc(var(--safe-top) + 28px) 20px 24px;min-height:160px;
  display:flex;align-items:center;border-radius:0 0 20px 20px;
  box-shadow:0 4px 16px rgba(25,40,75,.08)}
.app.is-dash{background:#f6f7fb}
.hero-blob{position:absolute;border-radius:50%;pointer-events:none}
.hero-blob.b1{width:230px;height:230px;right:-82px;top:-92px;background:rgba(255,255,255,.10)}
.hero-mark{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.hero-brand{font-size:30px;font-weight:700;letter-spacing:0;line-height:1.08}
.hero-tag{font-size:13px;font-weight:500;opacity:.92;margin-top:7px;line-height:1.4}
/* nút tài khoản = icon TRẦN (không nền), đặt góc DƯỚI phải hero; vùng nhấn 44×44 */
.hero-acc{position:absolute;bottom:14px;right:14px;z-index:2;
  width:44px;height:44px;border:none;background:none;padding:0;
  color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:.9;transition:opacity .15s,transform .1s}
.hero-acc:hover{opacity:1}
.hero-acc:active{transform:scale(.92)}

.hdr-kicker{font-size:9.5px;letter-spacing:1.4px;font-weight:700;opacity:.82;text-transform:uppercase;margin-bottom:5px}
.hdr-icon{flex:0 0 auto;width:34px;height:34px;border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hdr-icon:hover{background:rgba(255,255,255,.28)}

.green{color:#10b981!important}
.amber{color:#c8890a!important}
.red{color:#d6584f!important}

/* dòng cảnh báo hạn ngay dưới tên trong card (thay banner đầu trang) */
.warn-line{font-size:11.5px;font-weight:700;line-height:1.3;margin-top:3px}
.warn-line.amber{color:#c8890a}
.warn-line.red{color:#d6584f}

/* CTA gọn "Thủ tục mới" — thay start-card to */
.new-cta{display:flex;align-items:center;gap:13px;width:100%;min-height:58px;text-align:left;font-family:inherit;
  cursor:pointer;border:none;border-radius:14px;padding:0 18px;
  background:linear-gradient(135deg,#7458f5,#4f67f6);color:#fff;
  box-shadow:0 4px 14px rgba(79,110,247,.18);transition:filter .15s,transform .1s}
.new-cta:hover{filter:brightness(1.05)}
.new-cta:active{transform:scale(.995)}
.new-cta .nc-ic{flex:0 0 auto;font-size:22px;font-weight:700;line-height:1}
.new-cta .nc-t{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.2}
.new-cta .nc-go{flex:0 0 auto;font-size:22px;opacity:.85}

/* dòng chào tên chủ tài khoản dưới hero */
.dash{padding:24px 20px calc(32px + var(--safe-bot));background:#f6f7fb}
.dash-hi{font-size:24px;font-weight:700;color:#172033;margin:0 0 4px;line-height:1.18}
.dash-sub{font-size:13px;font-weight:500;color:#758198;margin:0 0 16px;line-height:1.45}
.dash .sec-label{font-size:15px;font-weight:700;letter-spacing:0;color:#172033;margin:0 0 9px;text-transform:none}
.d-self-lb{display:none}

.dash-avatar{width:48px;height:48px;border-radius:50%;background:#eef2ff;color:#4f67f6;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:0 0 auto}
.dash-avatar.is-child{color:#7458f5;background:#f0edff}
.dash-avatar span{line-height:1}
/* KHỐI bản thân — hình chữ nhật cân đối (header + 2 chỉ số) */
.pcard{background:#fff;border:1px solid #e7eaf1;border-radius:16px;padding:15px 18px;box-shadow:0 4px 16px rgba(25,40,75,.04);cursor:pointer;transition:border-color .15s,transform .1s,background .15s;width:100%}
.pcard:hover{border-color:#4f67f6}.pcard:active{transform:scale(.995);background:#fbfcff}
.pc-top{display:flex;align-items:center;gap:14px}
.pc-mid{flex:1;min-width:0}
.pc-name{font-size:17px;font-weight:600;color:#172033;line-height:1.25}
.pc-role{font-size:12.5px;font-weight:500;color:#758198;margin-top:3px}
.pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #eef0f5}
.stat{min-width:0}
.stat-k{font-size:12px;font-weight:500;color:#758198;letter-spacing:0;text-transform:none}
.stat-v{font-size:15px;font-weight:600;color:#172033;margin-top:5px;line-height:1.25}
.stat-sub{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.chip{display:inline-block;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:2px 10px}

.cmini{margin-top:12px;padding-top:11px;border-top:1px solid #eef0f5}
.cm-row{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cm-name{font-size:15px;font-weight:600;color:#172033;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-state{font-size:12.5px;font-weight:600;line-height:1.35;color:#758198}
.case-state.working{color:#4f67f6}
.case-state.almost{color:#c77712}
.case-state.done{color:#18a66a}
.case-state.idle,.case-state.none,.case-state.muted{color:#a0a9ba}
.cm-bar{height:7px;background:#eef0f5;border-radius:99px;overflow:hidden;margin-top:8px}
.cm-fill{height:100%;background:linear-gradient(90deg,#7458f5,#4f67f6);border-radius:99px}

.family-card{background:#fff;border:1px solid #e7eaf1;border-radius:16px;box-shadow:0 4px 16px rgba(25,40,75,.04);overflow:hidden}
.family-row{display:flex;align-items:center;gap:14px;min-height:84px;background:#fff;
  padding:16px;cursor:pointer;transition:background .15s,transform .1s;border-bottom:1px solid #eef0f5}
.family-row:last-child{border-bottom:none}
.family-row:hover{background:#fbfcff}.family-row:active{transform:scale(.995)}
.family-row.is-demo{background:#fcfdff}
.m-ic{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:28px}
.m-mid{flex:1;min-width:0}
.m-name{font-size:14.5px;font-weight:700;color:var(--ink)}
.m-sub{font-size:11.5px;font-weight:700;color:var(--ink-2);margin-top:4px}
.family-row .m-name{font-size:15.5px;font-weight:600;color:#172033;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.family-row .m-sub{font-size:12.5px;font-weight:500;color:#758198;margin-top:4px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-empty{font-size:11.5px;color:var(--brand);font-weight:700;margin-top:4px}
.m-exp{font-size:11px;font-weight:700;margin-top:3px}
.m-go{flex:0 0 auto;color:var(--ink-3);font-size:20px}

.add-row{width:100%;border:1px dashed #cbd5e1;background:transparent;border-radius:14px;padding:12px;text-align:center;color:#64748b;font-size:12.5px;font-weight:700;cursor:pointer;margin-top:2px;transition:border-color .15s,color .15s}
.add-row:hover{border-color:var(--brand);color:var(--brand)}
.dash .add-row{border-color:#c8d3f5;color:#4f67f6;margin-top:10px}
.dash .add-row:hover{border-color:#4f67f6;color:#4f67f6}
.empty-mini{font-size:12.5px;color:var(--ink-3);padding:14px;text-align:center;background:#fbfcff;border:1px dashed var(--line);border-radius:14px;margin-bottom:9px}
.reset-link{display:block;margin:14px auto 0;background:none;border:none;color:var(--ink-3);font-size:11.5px;cursor:pointer;font-family:inherit}
.reset-link:hover{color:var(--ink-2)}
/* Chân trang công ty (chỉ ở trang chủ) */
.app-foot{margin:16px auto 0;padding:8px 0 calc(28px + var(--safe-bot));text-align:center}
/* 1 hàng gọn: 🔒 · các link · copyright (tiết kiệm chiều dọc) */
.af-links{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;font-size:10.5px;color:#7e899e;line-height:1.4}
.af-lock{font-size:10.5px;line-height:1}
.af-links a{color:#7e899e;text-decoration:none;font-weight:400}
.af-links .af-copy{color:#a0a9ba;font-size:11px;margin:0}
.af-links a:hover{color:var(--brand)}
.af-dot{color:var(--ink-3)}
.af-copy{margin-top:7px;font-size:10.5px;color:var(--ink-3)}

/* Chọn thủ tục = lưới tile CÂN ĐỐI: icon chip + tên VI + phụ đề JA.
   Cap bề rộng + canh giữa để tile không dàn hết chiều ngang; tile cao hơn cho vuông vắn. */
.app.is-pick .body{padding-top:24px}
.pgrid{margin:0 auto 10px;max-width:440px;gap:14px}
.ptile{min-height:146px;padding:20px 12px 16px;justify-content:center}
/* icon thủ tục = emoji TRẦN (không khối nền), to hơn trên nền thẻ trắng */
.ptile .pt-ic{display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1;margin-bottom:11px}
.ptile .pt-mid{width:100%}
.ptile .t-vi{font-size:13.5px;line-height:1.25}
.ptile .t-ja{font-size:10px;margin-top:4px;line-height:1.3;color:var(--ink-3)}
/* badge tiến độ trên tile thủ tục (hub của 1 thành viên) */
.ptile.has-case{border-color:var(--brand)}
.pt-badge{margin-top:9px;font-size:10.5px;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:999px;padding:3px 10px}
.pt-badge.done{color:var(--ok);background:var(--ok-soft)}

/* Chọn NGƯỜI làm thủ tục: danh sách gọn, canh giữa, dãn trên (không dồn sát header) */
.pick-people{max-width:480px;margin-left:auto;margin-right:auto;padding-top:22px}
.pick-people .sec-label{margin-bottom:12px}
.mrow{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;background:#fff;border:1px solid #e7eaf1;border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;text-align:left;font-family:inherit;box-shadow:0 4px 16px rgba(25,40,75,.04);transition:border-color .15s,background .15s,transform .1s}
.mrow:hover{border-color:#4f67f6;background:#fbfcff}
.mrow:active{transform:scale(.995)}
.mrow .m-name{font-size:15.5px;font-weight:600;color:#172033;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .m-sub{font-size:12.5px;font-weight:500;color:#758198;margin-top:3px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-people .add-row{margin-top:4px}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.field input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #eef2ff}
.rel-row{display:flex;gap:8px;flex-wrap:wrap}
.rel-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;font-family:inherit}
.rel-chip:hover{border-color:var(--brand)}
.rel-chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:700}

.station.is-shared.is-done .node{background:#efeafe;border-color:#7c6df2;color:#5b4bc4}
.shared-hero{background:#efeafe;border:1px solid #ddd4fb;border-radius:16px;padding:14px 15px;margin-bottom:12px}
.shared-hero .sh-badge{display:inline-block;font-size:11px;font-weight:700;color:#5b4bc4;background:#e4dcfb;border-radius:999px;padding:3px 11px}
.shared-hero .sh-d{font-size:12px;color:#5b4bc4;margin-top:7px;line-height:1.5}

/* vùng dashboard (mobile = xếp dọc như app) */
.d-start{margin-top:24px;margin-bottom:6px}
.d-self{margin-top:0}
.d-fam{margin-top:24px}

@media(max-width:360px){
  .dash{padding-left:18px;padding-right:18px}
  .hero{padding-left:18px;padding-right:18px}
}
@media(min-width:430px){
  .dash{padding-left:24px;padding-right:24px}
  .hero{padding-left:24px;padding-right:24px}
}

/* ---------- Responsive desktop ---------- */
/* 4 thủ tục → luôn 2×2 (cân đối), không kéo dài ô lẻ */
@media(min-width:760px){
  .body{padding:22px 24px calc(34px + var(--safe-bot))}
  .hdr{padding-left:24px;padding-right:24px;border-bottom-left-radius:0}
  .tl{max-width:620px;margin:0 auto}
  .st-head,.dropzone,.panel,.gen-hero,.cta-bar,.disc,.resume,.note-box,.upslots,.scan,.illus{max-width:560px;margin-left:auto;margin-right:auto}
  .cta-bar{background:none;padding-top:18px}
  /* Chọn thủ tục trên máy tính: mỗi nhóm 1 HÀNG 4 cột → 2 hàng tổng (bỏ cap 440 của mobile) */
  .app.is-pick{max-width:940px}
  .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .ptile{min-height:150px}
}

/* ĐƠN (case) trên DESKTOP: 2 khung — trái lộ trình (bề rộng vừa đủ) · phải chi tiết trạm.
   CUỘN ĐỘC LẬP: cả app cao đúng 1 màn (khoá cuộn trang), header đứng yên,
   mỗi cột tự cuộn riêng. KHÔNG kẻ dọc ngăn giữa — chỉ có khoảng cách gap. */
@media(min-width:1000px){
  .app.is-case2{max-width:1140px;height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .app.is-case2 > .hdr{flex:0 0 auto}
  /* thân = phần còn lại của màn hình; 2 cột cao bằng nhau, cuộn riêng */
  .case2{flex:1 1 auto;min-height:0;overflow:hidden;
    display:grid;grid-template-columns:400px minmax(0,1fr);gap:30px;align-items:stretch;
    padding:24px 28px 0}
  /* cột trái (lộ trình): cuộn riêng, vuốt bên trái chỉ cuộn lộ trình */
  .case2 .c2-rail{min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:calc(34px + var(--safe-bot))}
  .case2 .c2-rail .tl{max-width:none;margin:0}
  /* cột phải (nội dung trạm): cuộn riêng */
  .case2 .c2-detail{min-width:0;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:calc(34px + var(--safe-bot))}
  /* trong khung phải: bỏ căn giữa 560 + CTA tĩnh */
  .case2 .st-head,.case2 .dropzone,.case2 .panel,.case2 .gen-hero,.case2 .cta-bar,.case2 .note-box,.case2 .scan,.case2 .upbox,.case2 .upslots,.case2 .illus,.case2 .exp-grid,.case2 .paywall{max-width:none;margin-left:0;margin-right:0}
  .case2 .cta-bar{position:static;padding-top:16px;background:none}
}

/* MÀN RỘNG (web): dashboard đổi hẳn sang layout 2 cột nhiều khối,
   không còn là 1 cột hẹp kéo dài. Màn hẹp giữ nguyên như app. */
@media(min-width:920px){
  .app.is-dash{max-width:880px}
  .app.is-dash .hero{padding-left:32px;padding-right:32px;padding-top:calc(var(--safe-top) + 30px);padding-bottom:28px;min-height:168px}
  .app.is-dash .hero-brand{font-size:32px}
  /* dashboard máy tính: chào full · bản thân | gia đình (2 cột) · Thủ tục mới full dưới */
  .dash{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;align-items:start;
    grid-template-areas:"greet greet" "sub sub" "self fam" "start start" "reset reset" "foot foot"}
  .dash-hi{grid-area:greet;margin-bottom:16px}
  .dash-sub{grid-area:sub;margin-top:-16px}
  .d-self{grid-area:self}
  .d-fam{grid-area:fam;margin-top:0}
  .d-start{grid-area:start;margin-top:18px}
  .reset-link{grid-area:reset;margin:16px auto 0}
  .app-foot{grid-area:foot;margin-left:0;margin-right:0;text-align:center}
  .af-links{justify-content:center}
  .d-fam .sec-label{margin-top:0}
  .d-self-lb{display:block;margin-top:0}
  .new-cta{max-width:460px;margin:0}
}

/* ============================================================
   Hộp NẠP VIP · GỬI LUẬT SƯ · CHAT 1-1 (Việc 1 + Việc 2)
   ============================================================ */
/* Ghi chú chân hộp thoại (demo/Phase B) */
.sheet-foot-note{margin-top:12px;font-size:11px;color:var(--ink-3);text-align:center;line-height:1.5}

/* Nạp VIP — giá lớn + danh sách quyền lợi tái dùng .vip-list */
.vip-price-lg{font-size:30px;font-weight:700;color:#a9761a;line-height:1;text-align:center;
  background:linear-gradient(150deg,#fffaef,#fff5e2);border:1px solid #f1dea3;border-radius:16px;padding:16px 12px}
.vip-price-lg span{display:block;font-size:12px;font-weight:700;color:#b5892e;margin-top:6px}
.vip-sheet .vip-list{margin-top:16px}
.paywall.is-vip{background:#fff8e9;border-color:#f1dea3;color:#8a6206}
.paywall.is-vip b{color:#a9761a}

/* Bảng giá luật sư */
.lw-cap{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.4px;margin:16px 0 8px}
.lw-tab{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lw-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--line-soft)}
.lw-row:last-child{border-bottom:none}
.lw-t{font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.4}
.lw-p{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap}

/* Nút bong bóng chat nổi */
.chat-fab{position:fixed;right:16px;bottom:calc(18px + var(--safe-bot));z-index:80;
  display:flex;align-items:center;gap:8px;border:none;cursor:pointer;
  padding:12px 16px 12px 14px;border-radius:99px;color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  box-shadow:0 6px 20px rgba(79,110,247,.42);font-family:inherit;
  animation:fabIn .25s ease}
@keyframes fabIn{from{transform:translateY(10px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.chat-fab:hover{filter:brightness(1.05)}
.chat-fab:active{transform:scale(.97)}
.chat-fab .cf-ic{font-size:18px;line-height:1}
.chat-fab .cf-txt{font-size:13.5px;font-weight:700;letter-spacing:.2px}
@media(min-width:1000px){
  .chat-fab{right:calc(50vw - 480px);bottom:24px}
}
@media(max-width:520px){
  .chat-fab .cf-txt{display:none}
  .chat-fab{padding:14px;border-radius:50%}
}

/* Chat tổng đài (text-only) — log cuộn + bong bóng */
.chat-body{display:flex;flex-direction:column;min-height:0}
.chat-log{display:flex;flex-direction:column;gap:9px;padding:4px 2px 8px;overflow-y:auto;max-height:min(52vh,420px);-webkit-overflow-scrolling:touch}
.chat-log .cb{max-width:82%;font-size:12.5px;line-height:1.5;padding:10px 13px;border-radius:14px;word-break:break-word;white-space:pre-wrap}
.chat-log .cb.sys{align-self:flex-start;background:var(--brand-soft);color:#33407a;border-bottom-left-radius:4px}
.chat-log .cb.agent{align-self:flex-start;background:#eef9f2;color:#1a5f3f;border:1px solid #cfead9;border-bottom-left-radius:4px}
.chat-log .cb.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.chat-input{display:flex;align-items:center;gap:8px;margin-top:8px;
  border:1px solid var(--line);border-radius:99px;padding:5px 6px 5px 14px;background:var(--card)}
.chat-input input{flex:1;border:none;outline:none;font-family:inherit;font-size:13px;color:var(--ink);background:transparent}
.chat-input .ci-send{flex:0 0 auto;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;
  background:var(--brand);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center}
.chat-input .ci-send:hover{filter:brightness(1.05)}

/* ============================================================
   Ô ảnh giấy đầu trạm = NÚT mở lightbox + Lightbox xem ẢNH MẪU
   ============================================================ */
/* biến ô .h-ic-card thành nút bấm (giữ style thẻ, thêm con trỏ + badge kính lúp) */
.st-head .h-ic-tap{padding:0;background:#fff;font-family:inherit;cursor:pointer;position:relative;
  transition:transform .1s,box-shadow .15s}
.st-head .h-ic-tap:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(21,31,56,.22)}
.st-head .h-ic-tap:active{transform:translateY(0)}
.h-ic-zoom{position:absolute;right:3px;bottom:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(31,41,55,.72);color:#fff;font-size:9.5px;line-height:1;
  display:flex;align-items:center;justify-content:center;pointer-events:none}

/* Lightbox ảnh mẫu (bottom-sheet mobile / center desktop) */
.sheet.sheet-img{height:auto;max-height:92vh}
.sheet-img-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#eef0f5;padding:14px;overflow:auto}
.sheet-img-body img{max-width:100%;max-height:74vh;object-fit:contain;border-radius:8px;background:#fff;
  box-shadow:0 4px 18px rgba(21,31,56,.18)}
.img-foot{flex:0 0 auto;font-size:11.5px;color:var(--ink-2);background:#fff8e9;
  border-top:1px solid var(--line-soft);padding:10px 14px calc(12px + var(--safe-bot));
  line-height:1.5;font-family:var(--font-friendly)}
@media(min-width:760px){ .sheet.sheet-img{max-width:640px} }