@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

/* ===== Design tokens — nguồn: Figma «LEO-HKD · App D1 · IA v2» (file YA2EmzHpzhyMqaE0KO4QaR, chốt 15/07) =====
   Bộ nhận diện LEO (đồng bộ web leovnapp.com): navy chủ đạo + gold accent, logo cam sư tử, heading Manrope.
   Map Figma → CSS var:
     surface/bg→--bg · surface/card→--card · surface/cream→--cream · gold/tint→--gold-tint
     ink/text→--ink · ink/black→--ink-black · ink/navy→--brand-d · ink/muted→--muted · ink/muted-2→--muted-2
     line/hair→--line · line/hair-2→--line-2 · gold/base→--gold · gold/dark→--gold-d · brand/lion-orange→--lion
     green/base→--go · green/bg→--go-bg · info/base→--info · info/bg→--info-bg · amber/base→--amber-ink · amber/bg→--amber-bg */
:root{
  /* surface + mực (ink) */
  --bg:#f4f6fa;--card:#fff;--cream:#faf7f0;--ink:#0f172a;--ink-black:#0f1216;--muted:#64748b;--muted-2:#94a3b8;
  --brand:#334155;--brand-d:#1f2937;--brand-dd:#111827;--brand-l:#475569;   /* navy LEO (brand-d = Figma ink/navy) */
  --line:#e6edf3;--line-2:#eef3f8;--accent:#fbf6ea;--accent-2:#f0e4c4;      /* nền/viền gold-cream */
  --side-1:#2b3a4f;--side-2:#1f2937;--side-3:#131c27;--side-ink:#cdd7e3;    /* sidebar navy */
  --gold:#c9a24a;--gold-d:#8b6f2e;--gold-l:#e0c074;--gold-tint:#faf3e2;     /* gold CTA + tint nền */
  --lion:#f07030;                                                          /* cam sư tử — CHỈ dùng cho logo/điểm nhấn thương hiệu */
  --go:#2c5234;--go-bg:#e7f0ea;--info:#1e5fa8;--info-bg:#eaf2fb;            /* semantic: xanh (ok) + info */
  --amber:#f59e0b;--amber-ink:#b7791f;--amber-bg:#fef3c7;--danger:#dc2626;  /* cảnh báo (amber) + lỗi */
  /* typography — Figma type/* : Manrope cho heading/số lớn, Inter cho body */
  --font-head:"Manrope","Inter",system-ui,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --fs-h1:23.6px;--lh-h1:29.2px;--fs-h2:16.9px;--lh-h2:23.6px;--fs-h3:13.5px;--lh-h3:19.1px;
  --fs-body:13.5px;--lh-body:20.2px;--fs-small:12.4px;--lh-small:16.9px;--fs-cap:11.2px;--lh-cap:14.6px;
  --fs-num:14.6px;--fs-num-l:20.2px;--fs-num-xl:27px;                          /* số: Inter 16 / Manrope 22 / Manrope 30 */
  --r-sm:6.8px;--r:11.2px;--r-lg:14.6px;--r-xl:20.2px;
  --sh-1:0 1px 2px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 3.4px 5.6px -1px rgba(15,23,42,.06),0 2px 3.4px -2px rgba(15,23,42,.05);
  --sh-3:0 12.4px 27px -9px rgba(15,23,42,.16),0 5.6px 11.2px -6.8px rgba(15,23,42,.08);
  --ring:0 0 0 2px rgba(37,55,74,.30);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
/* Khóa scroll ngang toàn trang — dùng clip (KHÔNG dùng hidden vì hidden biến body
   thành scroll-container, phá position:sticky của sidebar). Bảng dài vẫn cuộn trong .tablewrap. */
/* Gốc rem = 14.4px (16 × 0.8): kéo luôn ~210 giá trị rem trong file này về đúng tỷ lệ 80%,
   khỏi phải sửa từng chỗ. Các giá trị px đã được co sẵn nên KHÔNG bị ảnh hưởng bởi dòng này. */
html{font-size:14.4px}
html,body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
body{margin:0;font-family:var(--font-body);
  background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(1080px 540px at 100% -5%,rgba(201,162,74,.10),transparent 60%);}
a{color:var(--brand-d)}
::selection{background:var(--accent-2);color:var(--brand-dd)}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:222.8px 1fr;min-height:100vh}

/* ---------- sidebar (Figma 73:3 — nền SÁNG, thẻ logo navy, nút vàng, nhóm mục) ---------- */
.side{background:var(--card);color:var(--ink);border-right:1px solid var(--line);
  padding:15.8px 12.4px 14.6px;display:flex;flex-direction:column;gap:1px;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;width:222.8px}
.side::-webkit-scrollbar{width:6.8px}
.side::-webkit-scrollbar-thumb{background:rgba(15,23,42,.14);border-radius:999px}
/* Thẻ thương hiệu (navy) */
.side .brandcard{display:flex;gap:11.2px;align-items:center;background:var(--brand-d);
  border-radius:9px;padding:9px;text-decoration:none;color:#fff;position:relative}
.side .brandcard-logo{width:39.4px;height:39.4px;flex:none;display:grid;place-items:center;
  background:#fff;border-radius:7.9px}
.side .brandcard-logo img{height:29.2px;width:auto}
.side .brandcard-txt{min-width:0;line-height:1.1}
.side .brandcard-txt b{font-family:var(--font-head);font-weight:700;font-size:16.9px;
  line-height:23.6px;letter-spacing:-.2px;display:block}
.side .brandcard-txt small{font-size:11.2px;line-height:14.6px;opacity:.65;font-weight:500;
  letter-spacing:.2px;display:block;margin-top:2px}
/* Nút CTA vàng */
.side .nav-cta{display:flex;align-items:center;justify-content:center;background:var(--gold);
  color:var(--brand-d);font-family:var(--font-body);font-weight:600;font-size:13.5px;line-height:20.2px;
  border-radius:6.8px;padding:7.9px 11.2px;text-decoration:none;margin:9px 0 2px;
  box-shadow:0 2px 6.8px -3.4px rgba(201,162,74,.55);transition:background .15s var(--ease),color .15s var(--ease)}
.side .nav-cta:hover,.side .nav-cta.active{background:var(--gold-d);color:#fff}
/* Nhãn nhóm */
.side .nav-sec{font-size:11.2px;font-weight:500;color:var(--gold-d);letter-spacing:1px;padding:11.2px 9px 4.5px}
/* Mục điều hướng */
.side .navi{display:flex;align-items:center;gap:7.9px;padding:7.9px 9px;border-radius:6.8px;
  color:var(--muted);font-size:13.5px;font-weight:400;text-decoration:none;position:relative;
  border-left:2px solid transparent;transition:background .15s var(--ease),color .15s var(--ease)}
.side .navi:hover{background:var(--line-2);color:var(--brand-d)}
.side .navi.active{background:var(--accent);color:var(--brand-dd);font-weight:600;border-left-color:var(--gold)}
.side .navi .nav-ic{width:16.9px;height:16.9px;flex:none;opacity:.88}
.side .navi.active .nav-ic{opacity:1;color:var(--brand-d)}
.side .navi-badge{margin-left:auto;background:var(--lion);color:#fff;border-radius:999px;
  padding:1px 6.8px;font-size:11.2px;font-weight:500;line-height:14.6px}
.side .nav-fill{flex:1;min-height:11.2px}
.side .nav-hair{height:1px;background:var(--line);margin:5.6px 3.4px}
.side .nav-anchor{height:2px;background:var(--gold);border-radius:2px;margin:6.8px 3.4px 0}

/* ---------- main / topbar (Figma 73:78) ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:7.9px 14.6px 7.9px 18px;
  display:flex;align-items:center;gap:9px;position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 rgba(15,23,42,.03)}
.tb-hkd-wrap{position:relative}
.tb-hkd{display:inline-flex;align-items:center;gap:6.8px;background:#fff;border:1px solid var(--line);
  border-radius:6.8px;padding:5.6px 7.9px 5.6px 10.1px;text-decoration:none;color:var(--ink);white-space:nowrap;
  font:inherit;cursor:pointer}
.tb-hkd:hover{border-color:var(--brand-l)}
.tb-hkd-wrap.open .tb-hkd{border-color:var(--brand-d);box-shadow:var(--ring)}
.tb-hkd svg{width:13.5px;height:13.5px;color:var(--go);flex:none}
/* Dấu tình trạng tài khoản: XANH chỉ khi da_thanh_toan, còn lại ĐỎ. Xem base.html. */
.tb-hkd .tb-tick-xanh{color:var(--go)}
.tb-hkd .tb-tick-do{color:var(--danger)}
.tb-hkd strong{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.tb-caret{color:var(--muted);font-size:11.2px;transition:transform .15s var(--ease)}
.tb-hkd-wrap.open .tb-caret{transform:rotate(180deg)}
/* droplist đổi HKD (thay cho trang /chon-hkd) */
.tb-hkd-menu{position:absolute;z-index:40;top:calc(100% + 5.6px);left:0;
  min-width:270px;max-width:min(360px,88vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);
  padding:5.6px;margin:0;animation:tbhkd .12s var(--ease)}
@keyframes tbhkd{from{opacity:0;transform:translateY(-4.5px)}to{opacity:1;transform:none}}
.tb-hkd-find{display:flex;align-items:center;gap:6.8px;background:var(--line-2);
  border-radius:var(--r-sm);padding:5.6px 9px;margin-bottom:4.5px}
.tb-hkd-find svg{width:13.5px;height:13.5px;color:var(--muted-2);flex:none}
.tb-hkd-find input{border:none;background:none;padding:0;width:100%;font-size:11.2px;color:var(--ink)}
.tb-hkd-find input:focus{outline:none;box-shadow:none}
.tb-hkd-list{max-height:min(52vh,330.8px);overflow-y:auto}
.tb-hkd-list::-webkit-scrollbar{width:6.8px}
.tb-hkd-list::-webkit-scrollbar-thumb{background:rgba(15,23,42,.14);border-radius:999px}
.tb-hkd-item{display:block;width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:6.8px 9px;border-radius:var(--r-sm);font:inherit;color:var(--ink)}
.tb-hkd-item:hover,.tb-hkd-item:focus-visible{background:var(--line-2)}
.tb-hkd-item.on{background:var(--gold-tint)}
.tb-hkd-item.on b{color:var(--gold-d)}
.tb-hkd-nm{display:flex;align-items:baseline;gap:9px;min-width:0}
.tb-hkd-item b{font-weight:600;font-size:12.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-hkd-item small{margin-left:auto;color:var(--muted);font-size:var(--fs-cap);flex:none}
.tb-hkd-none{margin:0;padding:9px;color:var(--muted);font-size:var(--fs-small);text-align:center}
.tb-makh{display:inline-flex;align-items:center;gap:4.5px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3.4px 9px 3.4px 11.2px;font-size:11.2px;color:var(--muted);white-space:nowrap}
.tb-makh b{color:var(--ink);font-weight:600}
/* Số tổng đài — số khách ĐỌC KHI GỌI CSKH. Cùng khuôn chip Mã KH nhưng viền
   đậm hơn: hai số cùng 6 chữ số nằm cạnh nhau, chỉ khác chữ thì lướt qua là
   đọc nhầm. Màu chỉ là lớp thứ hai — lớp thứ nhất vẫn là NHÃN nói công dụng. */
.tb-tongdai{border-color:var(--brand-d);background:#fffdf5}
.tb-tongdai b{letter-spacing:.4px}
.tb-ky{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;margin:0}
.tb-ky label{margin:0 .1rem;font-size:.82rem}
.tb-ky select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:.86rem;transition:none}
.tb-ky select:hover{border-color:var(--line)}
.tb-spacer{flex:1;min-width:6.8px}
.tb-search{display:inline-flex;align-items:center;gap:6.8px;background:var(--line-2);border-radius:6.8px;
  padding:5.6px 11.2px;min-width:162px;flex:0 1 270px;margin:0}
.tb-search svg{width:14.6px;height:14.6px;color:var(--muted-2);flex:none}
.tb-search input{border:none;background:none;padding:0;font-size:11.2px;width:100%;color:var(--ink)}
.tb-search input:focus{outline:none;box-shadow:none}
.tb-search input::placeholder{color:var(--muted-2)}
.tb-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:29.2px;height:29.2px;border-radius:6.8px;color:var(--muted);text-decoration:none;flex:none;cursor:pointer}
.tb-ic:hover{background:var(--line-2);color:var(--brand-d)}
.tb-ic svg{width:18px;height:18px}
.tb-help{border:1.6px solid var(--muted);width:20.2px;height:20.2px;border-radius:50%;font-size:11.2px;font-weight:500}
.tb-help:hover{background:none;color:var(--muted)}
.tb-dot{position:absolute;top:1px;right:1px;min-width:14.6px;height:14.6px;padding:0 3.4px;
  background:var(--lion);color:#fff;border-radius:999px;font-size:11.2px;font-weight:600;
  display:grid;place-items:center;line-height:1}
.tb-div{width:1px;height:18px;background:var(--ink);opacity:.1;flex:none}
.tb-user{display:inline-flex;align-items:center;gap:6.8px;color:var(--muted);font-size:11.2px;white-space:nowrap}
.tb-avatar{width:23.6px;height:23.6px;border-radius:50%;background:var(--brand-d);color:#fff;
  display:grid;place-items:center;font-size:11.2px;font-weight:500;flex:none}
.content{padding:1.6rem 1.7rem;width:100%}   /* full bề ngang trang (mọi màn hình) */
h1{font-family:var(--font-head);font-size:1.5rem;font-weight:700;letter-spacing:-.01em;margin:.1rem 0 1.2rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.25rem 1.45rem;box-shadow:var(--sh-1);margin-bottom:1.15rem;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card:hover{box-shadow:var(--sh-2)}
.card.empty,.empty{color:var(--muted)}
.empty{padding:2.4rem;text-align:center}
.card h2,.card h3{font-family:var(--font-head);margin:.1rem 0 1rem;font-weight:700;letter-spacing:-.01em}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(189px,1fr));gap:1.1rem;margin-bottom:1.3rem}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.2rem 1.35rem;box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:3.4px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold))}
.kpi::after{content:"";position:absolute;right:-29.2px;top:-29.2px;width:81px;height:81px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,74,.12),transparent 70%)}
.kpi:hover{transform:translateY(-3.4px);box-shadow:var(--sh-3)}
.kpi .label{color:var(--muted);font-size:.74rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.45rem}
.kpi .val{font-family:var(--font-head);font-size:1.95rem;font-weight:800;color:var(--brand-dd);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:linear-gradient(180deg,var(--brand-l),var(--brand-d));color:#fff;border:0;
  border-radius:var(--r-sm);padding:.58rem 1.05rem;font:inherit;font-family:var(--font-head);
  font-size:.92rem;font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.2;
  box-shadow:0 1px 2px rgba(15,23,42,.14),0 3.4px 11.2px -4.5px rgba(31,41,55,.35);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
/* 🔴 THÊM 17/09 — NÚT BỊ KHOÁ PHẢI TRÔNG NHƯ BỊ KHOÁ.
   `.btn` trước đó KHÔNG có style :disabled nào (chỉ `.cta-bct` có), nên nút
   "Kết nối" trong popup cổng thuế — vốn `disabled` tới khi khách tích ô đồng ý
   — trông y hệt một nút bấm được. Khách bấm, KHÔNG có gì xảy ra, không một
   dòng phản hồi. Chủ gặp đúng chuyện này 17/09 với cổng Dịch vụ công.
   Hỏng loại tệ nhất: không lỗi, không log, người dùng tưởng app treo. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}
.btn:disabled:hover,.btn[disabled]:hover{background:inherit}

.btn:hover{background:linear-gradient(180deg,var(--brand),var(--brand-dd));
  transform:translateY(-1px);box-shadow:0 2px 3.4px rgba(15,23,42,.16),0 6.8px 15.8px -5.6px rgba(31,41,55,.42)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(15,23,42,.18)}
.btn:focus-visible{outline:none;box-shadow:var(--ring),0 3.4px 11.2px -4.5px rgba(31,41,55,.4)}
.btn.ghost{background:#fff;color:var(--brand-d);border:1px solid var(--accent-2);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--accent);border-color:var(--gold);color:var(--brand-dd)}
/* CTA nổi bật (Tạo sổ…) — gold nền, chữ navy; hover chuyển bronze chữ trắng */
.btn.gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#1f2937;
  box-shadow:0 1px 2px rgba(15,23,42,.14),0 5.6px 14.6px -5.6px rgba(201,162,74,.55)}
.btn.gold:hover{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#fff;
  box-shadow:0 2px 4.5px rgba(15,23,42,.16),0 9px 20.2px -6.8px rgba(201,162,74,.6)}
.btn.gold:focus-visible{box-shadow:0 0 0 2px rgba(201,162,74,.4),0 5.6px 14.6px -5.6px rgba(201,162,74,.55)}

/* ---------- forms ---------- */
label{font-size:.82rem;color:var(--muted);font-weight:500}
input,select{padding:.56rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input::placeholder{color:var(--muted-2)}
/* <select>: KHÔNG animate/đổi viền khi hover — rê chuột qua mép ô không "vẽ lại" (giật).
   Vẫn giữ viền focus khi bấm chọn. (Áp toàn app; topbar/bct-bar đã củng cố riêng.) */
select{transition:none}
input:hover{border-color:var(--brand-l)}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* ---------- tables ---------- */
/* Popup cài đặt HKD — <dialog> top-layer, thoát mọi transform/overflow của .card */
.leo-dialog{border:none;border-radius:var(--r-xl);padding:0;width:558px;max-width:96vw;
  box-shadow:0 21.4px 54px -22.5px rgba(15,23,42,.5)}
.leo-dialog::backdrop{background:rgba(15,23,42,.45)}
.leo-modal-card{padding:1.4rem 1.6rem;max-height:86vh;overflow:auto}
.leo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem}
.leo-grid label,.leo-modal-card label{display:block;font-size:.8rem;color:var(--muted)}
.leo-grid input,.leo-grid select,.leo-modal-card input,.leo-modal-card select{
  width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:.2rem}
.tablewrap{overflow:auto;max-height:64vh;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-1)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.87rem}
th,td{padding:.6rem .75rem;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
th{background:var(--accent);color:var(--brand-dd);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;z-index:2}
tbody tr{transition:background .12s var(--ease)}
tbody tr:nth-child(even){background:#f9fbfc}
tbody tr:hover{background:var(--accent)}
tbody tr:last-child td{border-bottom:0}
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;max-width:26rem}
/* Cột text dài (tên hàng, tên đối tác...) cắt ngắn + ellipsis -> đủ cột; hover title xem đủ */
.tablewrap td{max-width:14rem;overflow:hidden;text-overflow:ellipsis}

/* ---------- misc ---------- */
.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;padding:.65rem .85rem;
  border-radius:var(--r-sm);margin-bottom:.85rem;font-size:.9rem;font-weight:500}
.pill{display:inline-flex;align-items:center;white-space:nowrap;background:var(--accent);color:var(--brand-dd);
  border:1px solid var(--accent-2);border-radius:999px;padding:.12rem .6rem;
  font-size:.76rem;font-weight:600;letter-spacing:.01em}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem;
  background:radial-gradient(630px 450px at 85% 12%,rgba(201,162,74,.18),transparent 60%),
  radial-gradient(810px 540px at 20% 10%,#33465f,transparent 60%),
  linear-gradient(135deg,#1f2937,#131c27 60%,#0b1220)}
.login-card{background:#fff;border-radius:var(--r-xl);padding:2.4rem 2.2rem;width:342px;max-width:100%;
  box-shadow:0 27px 63px -22.5px rgba(11,18,32,.6),0 6.8px 21.4px -13.5px rgba(0,0,0,.3)}
.login-card h1{display:block;text-align:center}
.login-card label{display:block;margin:.85rem 0 .3rem}
.login-card input{width:100%}
.login-card input:first-of-type{margin-bottom:.1rem}

/* Job nền TOÀN CỤC: thanh tiến độ + toast nổi, thấy ở mọi trang */
#leo-job{position:fixed;right:14.6px;bottom:14.6px;z-index:80;width:288px;
  max-width:calc(100vw - 29.2px);display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.leo-job-card{pointer-events:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:.7rem .85rem;position:relative;
  animation:leo-job-in .2s var(--ease)}
@keyframes leo-job-in{from{opacity:0;transform:translateY(6.8px)}to{opacity:1;transform:none}}
.leo-job-card.run,.leo-job-card.ok{border-left:3.4px solid var(--brand)}
.leo-job-card.err{border-left:3.4px solid var(--danger)}

/* Đồng hồ trên thẻ job nổi: tabular-nums để chữ số không nhảy ngang mỗi giây.
   margin-left:auto đẩy cặp (thời gian, %) sát phải, nhãn job ở lại bên trái. */
.leo-job-top .j-time{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.75}
.leo-job-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  font-size:.86rem;font-weight:600;color:var(--ink)}
.leo-job-bar{height:6.8px;background:var(--line);border-radius:5.6px;overflow:hidden;margin:.45rem 0 .35rem}
.leo-job-bar>i{display:block;height:100%;border-radius:5.6px;transition:width .3s var(--ease);
  background:linear-gradient(90deg,var(--brand-l),var(--brand))}
.leo-job-card p{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.leo-job-x{position:absolute;top:.25rem;right:.4rem;border:none;background:none;cursor:pointer;
  font-size:1.15rem;line-height:1;color:var(--muted-2)}
.leo-job-x:hover{color:var(--ink)}

.nav-toggle,.topbar-brand{display:none}   /* chỉ hiện ở mobile */
@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  .topbar{padding:.55rem .85rem;gap:.55rem}
  /* Hamburger: nút teal bo tròn, nổi khối, đồng bộ màu sidebar */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:38.2px;height:38.2px;border:none;border-radius:11.2px;cursor:pointer;flex:0 0 auto;
    background:linear-gradient(155deg,var(--side-1),var(--side-3));color:#fff;
    font-size:1.2rem;line-height:1;box-shadow:0 4.5px 12.4px -4.5px rgba(11,18,32,.5);
    transition:transform .14s var(--ease)}
  .nav-toggle:active{transform:scale(.93)}
  /* Wordmark LEO (logo sidebar bị ẩn ở mobile) */
  .topbar-brand{display:inline-block;flex:0 0 auto;font-family:var(--font-head);font-weight:800;
    font-size:1.1rem;letter-spacing:.5.6px;color:var(--brand-dd)}
  .topbar>strong{font-size:.9rem;max-width:11rem}     /* tên đơn vị truncate gọn */
  .topbar select{padding:.35rem .45rem;font-size:.82rem}
  .topbar .who{display:none}                           /* thoáng: info user ở drawer */
  /* Sidebar -> ngăn kéo trượt từ trái, mặc định ẩn; mở bằng hamburger */
  .side{position:fixed;top:0;left:0;height:100vh;width:222.8px;z-index:50;
    flex-direction:column;align-items:stretch;
    transform:translateX(-100%);transition:transform .25s var(--ease)}
  .side.open{transform:translateX(0);box-shadow:0 15.8px 45px rgba(15,23,42,.4)}
  .side a.active::before{display:none}
  .nav-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:45;
    opacity:0;pointer-events:none;transition:opacity .25s}
  .nav-overlay.open{opacity:1;pointer-events:auto}
  .content{padding:1.1rem}
}

/* ── Tờ khai 01/CNKD (phỏng theo bản chính thức, giữ palette app) ───────────── */
.tk{font-size:.86rem;line-height:1.5}
.tk-head{text-align:center;margin:.2rem 0 1.1rem}
.tk-title{font-weight:800;letter-spacing:-.01em;font-size:var(--fs-h2);line-height:var(--lh-h2)}
.tk-sub{color:var(--muted);font-size:.8rem;margin-top:.2rem}
.tk-opts{margin:.8rem 0;display:flex;flex-direction:column;gap:.35rem}
.tk-opts>div{font-family:inherit}
.tk-info{width:100%;margin:.6rem 0}
.tk-info td{padding:.28rem .3rem;vertical-align:top}
.tk-info td:first-child{width:34%;color:var(--muted)}
.tk-tick{color:var(--brand-d)}
.tk-section{margin:1.4rem 0 .45rem;font-size:.84rem;letter-spacing:.01em}
.tk-note{margin:-.15rem 0 .45rem}
/* "Đơn vị tiền" nằm phải, ngay trên bảng — theo bản thiết kế. */
.tk-dvt{color:var(--muted);font-size:.76rem;text-align:right;margin-bottom:.25rem}
/* min-width để bảng rộng tràn khung → .tablewrap (overflow:auto) cuộn ngang được. */
.tk-grid{width:100%;min-width:46rem}
/* Figma: bảng chỉ kẻ ngang, header nền xám nhạt chữ nhỏ in hoa — không kẻ ô như bản giấy. */
.tk-grid th{text-align:center;vertical-align:middle;background:var(--line-2);color:var(--muted);
  font-weight:600;font-size:10.1px;letter-spacing:.04em;text-transform:uppercase;
  padding:7.9px 9px;border-bottom:1px solid var(--line)}
.tk-grid td{padding:9px .45rem;border-bottom:1px solid var(--line-2)}
/* Bỏ cắt chữ (ellipsis) của .tablewrap chung — tờ khai cần hiện đủ nội dung ô. */
.tablewrap .tk-grid td{max-width:none;overflow:visible;text-overflow:clip;white-space:normal}
.tk-grid td.c{text-align:center}
.tk-grid td.l{text-align:left}
.tk-grid td.r{text-align:right;font-variant-numeric:tabular-nums}
.tk-grid .tk-trudia td{font-weight:600}
.tk-grid .tk-tong td{background:var(--line-2);font-weight:700}
.tk-grid tbody tr:last-child td{border-bottom:0}
.tk-muted{color:var(--muted);font-size:.78rem}
/* Mục B/C không phát sinh: ô nền xám nhạt, không phải thẻ nổi. */
.tk-empty{color:var(--muted);padding:.7rem .9rem;background:var(--line-2);
  border-radius:var(--r-sm);font-size:.82rem}
.tk-badge{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;
  background:#fef2f2;color:#b91c1c;font-size:.72rem;text-decoration:none;white-space:nowrap}
.tk-badge:hover{background:#fee2e2}
/* Khối cam đoan + chữ ký: chỉ cần khi IN/xuất PDF → ẩn trên màn hình. */
.tk-foot{display:none;margin-top:1.4rem;justify-content:space-between;gap:2rem;align-items:flex-start}
.tk-sign{text-align:center;min-width:14rem}
@media print{ .tk-foot{display:flex} }

/* Ô chọn năm ở cột kỳ: bỏ transition/đổi viền khi hover -> không "vẽ lại" khi rê chuột. */
.bct-rail select{transition:none}
.bct-rail select:hover{border-color:var(--line)}

/* ── Trung tâm 3 nguồn ─────────────────────────────────────────── */
.tt-progress{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.tt-progress .tt-note,.tt-note{color:var(--muted);font-size:.8rem}
.tt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:1.1rem;margin-bottom:1.15rem}
.src-card{display:flex;flex-direction:column;gap:.6rem}
.src-head{font-weight:700;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.src-body{color:var(--muted);font-size:.86rem}
.src-act{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto}
.src-panel{margin-top:.4rem;padding-top:.6rem;border-top:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:.1rem .55rem;
  font-size:.74rem;font-weight:700;background:var(--line-2);color:var(--muted)}
.chip.ok{background:var(--accent-2);color:var(--brand-dd)}
.chip.warn{background:var(--amber-bg);color:var(--amber-ink)}
.tt-mark{align-self:flex-start;background:none;border:none;color:var(--brand-d);cursor:pointer;
  font-size:.78rem;text-decoration:underline;padding:.2rem 0}

/* ── Popup Đồng bộ (Trung tâm) ─────────────────────────────────── */
.leo-x{border:none;background:none;font-size:1.2rem;line-height:1;color:var(--muted);cursor:pointer;padding:.1rem .35rem;border-radius:6.8px}
.leo-x:hover{color:var(--ink);background:var(--line-2)}
#sync-typehd-row .active{background:var(--accent);border-color:var(--brand-l);color:var(--brand-dd)}
#sync-dialog label{color:var(--ink)}

/* Popup Kết nối/Đồng bộ — bố cục gọn hơn.
   Ghim vị trí + kích thước cố định → HĐĐT & DVC hiện CÙNG SIZE, CÙNG VỊ TRÍ (không nhảy theo nội dung). */
#sync-dialog{width:396px;inset:8vh auto auto 50%;margin:0;transform:translateX(-50%)}
/* Nền popup theo cổng (ảnh set bằng JS theo portal) — nhạt, chữ vẫn đọc rõ */
#sync-dialog .leo-modal-card{background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:cover}
#sync-dialog .leo-modal-card{padding:1.3rem 1.5rem 1.4rem}
#sync-dialog .leo-x{position:absolute;top:.8rem;right:.8rem;width:29.2px;height:29.2px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center;
  font-size:1rem;padding:0;box-shadow:var(--sh-1)}
#sync-dialog .leo-x:hover{color:var(--ink);background:var(--line-2)}
.sync-head{text-align:center;padding-bottom:.9rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.sync-head img{max-width:100%;height:auto;max-height:67.5px;display:block;margin:.15rem auto .8rem}  /* banner ngang: giữ đúng tỉ lệ */
/* DVC: dựng lại banner như trang gốc — 2 logo + 3 dòng chữ + wave xanh nước (dvc-wave.png).
   Cao 67.5px cùng margin như logo HĐĐT → header 2 popup bằng nhau. */
.dvc-banner{display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;box-sizing:border-box;
  height:67.5px;margin:.15rem 0 .8rem;padding:0 .35rem;
  background:url(/static/img/dvc-wave.png) no-repeat right center;background-size:auto 100%}
.dvc-banner img{height:39.4px;width:auto;max-width:none;margin:0;display:inline-block}
.dvc-banner-txt{display:flex;flex-direction:column;gap:1px}
.dvc-banner-txt p{margin:0;line-height:1.22}
.dvc-banner-txt .dvc-t1{font-size:.8rem;font-weight:800;color:#c8102e;letter-spacing:.005em}
.dvc-banner-txt .dvc-t2{font-size:.78rem;font-weight:700;color:#334155}
.sync-head h3{font-family:var(--font-head);margin:.1rem 0 .3rem;font-size:1.15rem;font-weight:700}
.sync-head p{margin:0}
/* Chọn MST hay CCCD làm ID đăng nhập (hiện khi có đủ cả 2) */
.sync-idpick{display:flex;gap:1rem;justify-content:center;align-items:center;
  margin:.5rem 0 0;font-size:.82rem;color:var(--muted)}
.sync-idpick label{display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;color:var(--ink);font-weight:600}
.sync-idpick input[type=radio]{width:14.6px;height:14.6px;flex:none;margin:0;accent-color:var(--brand);cursor:pointer}
#sync-dialog .sync-lbl{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:.3rem}
.sync-pass-wrap{display:flex;align-items:center;gap:.45rem}
.sync-pass-wrap input{flex:1;width:auto}
#sync-eye{flex:none;padding:.5rem .55rem;color:var(--muted)}
#sync-eye svg{width:15.8px;height:15.8px;display:block}
#sync-eye:hover{color:var(--brand-d)}
#sync-dialog .sync-agree{display:flex;gap:.55rem;align-items:flex-start;margin:1rem 0 0;padding:.7rem .85rem;
  background:var(--accent);border:1px solid var(--accent-2);border-radius:11.2px;cursor:pointer;
  font-size:.85rem;line-height:1.45;color:var(--ink)}
#sync-dialog input[type=checkbox]{width:15.8px;height:15.8px;flex:none;margin:.05rem 0 0;
  accent-color:var(--brand);cursor:pointer}
.sync-terms{margin:.5rem 0 0;padding:.6rem .8rem;background:var(--line-2);border-radius:9px;
  font-size:.8rem;line-height:1.5;color:var(--muted)}
.sync-status{min-height:1.1em;margin:.6rem 0 0;text-align:center}
.sync-actions{display:flex;gap:.6rem;margin-top:1.15rem}
.sync-actions .btn{flex:1}
.sync-actions #sync-cancel{flex:0 0 auto;min-width:86.6px}

/* ── Dashboard (Trung tâm): icon SVG hiện đại + bố cục gọn 1 màn ── */
.side a .nav-ic{width:15.8px;height:15.8px;flex:none;opacity:.85}
.side a:hover .nav-ic{opacity:1}
.side a.active .nav-ic{opacity:1;color:var(--brand-d)}
.ic{width:20.2px;height:20.2px;display:inline-block;vertical-align:middle}
.ic-xs{width:11.2px;height:11.2px;flex:none}
.btn .ic{width:14.6px;height:14.6px}
.chip svg{margin-right:.22rem}

.content:has(.tt){padding:1.05rem 1.4rem}
.tt{display:flex;flex-direction:column;gap:.85rem;min-height:calc(100dvh - 56.2px - 2.1rem)}
.tt-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.tt-top h1{margin:0;font-size:1.32rem}
.tt-ready{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;
  color:var(--muted);background:#fff;border:1px solid var(--line);padding:.3rem .75rem;
  border-radius:999px;box-shadow:var(--sh-1)}
.tt-ready b{color:var(--brand-dd);font-weight:800}
.tt-ready .tt-note{font-size:.76rem}
.tt-ready .dot{width:7.9px;height:7.9px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 2px rgba(245,158,11,.18)}
.tt-ready.ok .dot{background:var(--go);box-shadow:0 0 0 2px rgba(44,82,52,.2)}

.tt .card{margin-bottom:0}
.tt .tt-grid{margin-bottom:0;gap:.85rem}
.tt .src-card{padding:1rem 1.05rem;gap:.5rem}
.src-card{position:relative;overflow:hidden}
.src-card>:not(.src-wm){position:relative;z-index:1}
.src-hddt{background-color:#f7efdf;background-image:url(/static/img/hddt-bg.jpg);background-position:center;
  background-size:cover;background-repeat:no-repeat}
.src-dvc{background-color:#daeaf9;background-image:url(/static/img/dvc-birds.svg);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.src-wm{position:absolute;right:-9px;top:50%;transform:translateY(-50%);height:76%;width:auto;
  max-width:44%;object-fit:contain;object-position:right center;opacity:.18;
  pointer-events:none;user-select:none;z-index:0}
.src-head{align-items:center}
.src-head .chip{margin-left:auto}
.src-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11.2px;
  color:var(--brand-d);background:linear-gradient(180deg,var(--accent),#fff);border:1px solid var(--accent-2)}
.src-name{font-family:var(--font-head);font-size:1rem;font-weight:700;letter-spacing:-.01em}

.tt-cta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.tt-cta form{display:inline-flex;margin:0}
.tt-cta-hint{display:inline-flex;align-items:center;gap:.3rem;color:var(--amber);font-size:.84rem;font-weight:600}
.tt-cta #taoso-prog{flex-basis:100%;margin-top:.4rem}

.tt .kpis{margin-top:auto;margin-bottom:0;gap:.85rem}
.tt .kpi{padding:.8rem 1rem}
.tt .kpi .label{margin-bottom:.25rem}
.tt .kpi .val{font-size:1.55rem}

/* ── Trung tâm hero (Figma 73:2) — dựng 1:1 ─────────────────────── */
.content:has(.hero){padding:21.4px}
.hero{display:flex;flex-direction:column;gap:14.6px}
.hero-banner{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:15.8px 21.4px;margin:0}
.hero-banner h2{font-family:var(--font-head);font-weight:700;font-size:16.9px;line-height:23.6px;letter-spacing:-.2px;margin:0;color:var(--ink)}
.hero-ready{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted)}
.hero-ready .dot{width:7.9px;height:7.9px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 0 2px rgba(245,158,11,.18)}
.hero-ready.ok .dot{background:var(--go);box-shadow:0 0 0 2px rgba(44,82,52,.2)}
.hero-ready b{color:var(--brand-dd);font-weight:800}

/* Panel (head màu hair-2) */
.panel{background:var(--card);border:1px solid var(--line);border-radius:6.8px;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:9px;background:var(--line-2);padding:6.8px 11.2px 6.8px 14.6px}
.panel-label{font-size:11.2px;color:var(--muted);font-weight:500}
.panel-sp{flex:1;min-width:6.8px}
.panel-link-info{font-size:11.2px;color:var(--info);font-weight:500;text-decoration:none}
.panel-link-info:hover{text-decoration:underline}
.panel-body{padding:12.4px 14.6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6.8px;overflow:hidden;background:#fff}
.seg span,.seg a{padding:4.5px 12.4px;font-size:11.2px;color:var(--muted);text-decoration:none;
  cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.seg a:hover{background:var(--line-2);color:var(--brand-d)}
.seg .seg-on{background:var(--line-2);color:var(--ink);font-weight:600}
.kypick{display:inline-flex;align-items:center;gap:5.6px;border:1px solid var(--line);border-radius:6.8px;background:#fff;padding:4.5px 11.2px;font-size:11.2px;font-weight:500;color:var(--ink)}
.kypick-caret{font-size:11.2px;color:var(--muted)}

/* Pills Figma */
.pillx{display:inline-flex;align-items:center;white-space:nowrap;background:var(--line-2);color:var(--muted);border-radius:999px;padding:2px 9px;font-size:11.2px;font-weight:500;line-height:14.6px}
.pillx.ok{background:var(--go-bg);color:var(--go)}
.pillx.warn{background:var(--amber-bg);color:var(--amber-ink)}
/* Cổng thuế đang lỗi — đỏ, dùng cho bubble sức khỏe cổng. */
.pillx.loi{background:#fee2e2;color:#b91c1c}

/* ĐỊNH DANH — 2 cột */
.idst{display:flex;gap:21.4px;align-items:stretch}
.idcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:9px}
.idname{display:flex;align-items:center;gap:6.8px;flex-wrap:wrap;font-weight:600;font-size:14.6px;color:var(--ink)}
.idmst{font-size:11.2px;font-weight:500;color:var(--ink)}
.idgrid{display:flex;flex-direction:column;gap:9px}
.idg-row{display:flex;gap:14.6px}
.idg-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.idg-cell dt{font-size:11.2px;font-weight:500;color:var(--muted-2);letter-spacing:.02em}
.idg-cell dd{margin:0;font-size:11.2px;color:var(--ink);word-break:break-word}
.idlink{margin-top:2px;font-size:11.2px;font-weight:600;color:var(--gold-d);text-decoration:none}
.idlink:hover{text-decoration:underline}
.idvd{width:1px;background:var(--line);flex:none}
.conncol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:9px}
.connrow{display:flex;align-items:center;gap:6.8px}
.connlabel{font-size:12.4px;font-weight:500;color:var(--ink)}
.connbtn{background:var(--brand-d);color:#fff;border:none;border-radius:6.8px;padding:3.4px 11.2px;font:inherit;font-size:11.2px;font-weight:600;cursor:pointer}
.connbtn:hover{background:var(--brand-dd)}
.connhr{height:1px;background:var(--line)}
.gtitem{display:flex;flex-direction:column;gap:2px}
.gtrow{display:flex;align-items:center;gap:6.8px;flex-wrap:wrap}
.gtlabel{font-size:12.4px;font-weight:500;color:var(--ink)}
.gtsub{font-size:11.2px;color:var(--muted)}
.gtact{background:none;border:none;color:var(--gold-d);cursor:pointer;font:inherit;font-size:11.2px;font-weight:600;text-decoration:none;white-space:nowrap;padding:0}
.gtact:hover{text-decoration:underline}
@media (max-width:860px){.idst{flex-direction:column}.idvd{width:auto;height:1px}}

/* SAO KÊ */
.sk-body{display:flex;flex-direction:column;gap:11.2px}
.dropzone{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;border:1px dashed var(--line);border-radius:6.8px;padding:15.8px;background:#fff;text-align:center;flex-wrap:wrap}
.dropzone .dz-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.dz-txt{color:var(--muted);font-size:12.4px}
.dz-btn{position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:6.8px;padding:5.6px 12.4px;font-size:11.2px;font-weight:600;color:var(--ink);cursor:pointer}
.dz-btn:hover{border-color:var(--brand-l)}
.dropzone.drag{border-color:var(--gold);background:var(--gold-tint)}
.dz-prog{flex-basis:100%;margin-top:5.6px}
/* Popup upload sao kê (HKD-03b, 21/09) — trước đó là bong bóng `.skpop` thả
   xuống dưới nút; kèm theo đó đã gỡ `.panel:has(.skpop){overflow:visible}`,
   thứ chỉ tồn tại để panel không cắt mất bong bóng. Popup nằm ở top-layer của
   <dialog> nên không còn bị cắt, panel trả về overflow mặc định. */
.skp-bang{margin-top:11.2px;border-top:1px solid var(--line);padding-top:9px}
.skp-bang[hidden]{display:none}
.skp-sum{font-size:12.4px;margin-bottom:6.8px}
/* Bảng trong popup: chừa chiều cao để popup không dài quá màn hình */
.skp-bang .dp-table{max-height:38vh;overflow:auto}
.skp-foot{display:flex;align-items:center;gap:6.8px;margin-top:6.8px;font-size:11.2px;color:var(--muted)}
.sk-review{display:flex;align-items:center;gap:6.8px;flex-wrap:wrap}
.sk-info{font-size:11.2px;color:var(--muted)}

/* CTA vàng */
.cta-wrap{margin:0}
.cta-bct{display:flex;align-items:center;justify-content:center;width:100%;background:var(--gold);color:var(--brand-d);border:none;border-radius:6.8px;padding:11.2px 15.8px;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 11.2px -4.5px rgba(201,162,74,.55);transition:background .15s var(--ease)}
.cta-bct:hover:not(:disabled){background:var(--gold-d);color:#fff}
.cta-bct:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.cta-hint{display:inline-flex;align-items:center;gap:.35rem;color:var(--amber-ink);font-size:.84rem;font-weight:600;margin-top:-6.8px}
.cta-hint.note{color:var(--muted);font-weight:400}   /* ghi chú chế độ Quý — không phải cảnh báo */
.taoso-track{height:9px;background:var(--line);border-radius:5.6px;overflow:hidden}
.taoso-fill{height:100%;width:6%;background:var(--gold);transition:width .3s ease}
.taoso-meta{font-size:.82rem;color:var(--muted);margin:.4rem 0 0;display:flex;justify-content:space-between;gap:1rem}
.taoso-meta #taoso-timer{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Lịch sử heading + toggle năm */
.hist-heading{display:flex;align-items:center;gap:6.8px;margin-top:-2px}
.hist-title{font-size:14.6px;font-weight:600;color:var(--ink)}
.yrtab{display:inline-flex;border:1px solid var(--line);border-radius:6.8px;overflow:hidden;background:#fff}
.yrtab span{padding:3.4px 11.2px;font-size:11.2px;color:var(--muted)}
.yrtab .yr-on{background:var(--line-2);color:var(--ink);font-weight:600}
/* Năm nav (mũi tên) — Lịch sử */
.yrnav{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:6.8px;background:#fff;padding:2px}
.yrnav-a{width:23.6px;height:23.6px;display:grid;place-items:center;border-radius:5.6px;color:var(--muted);text-decoration:none;font-size:13.5px}
.yrnav-a:hover{background:var(--line-2);color:var(--brand-d)}
.yrnav-y{padding:0 6.8px;font-size:11.2px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Kỳ picker popover (tháng + năm + thập kỷ) */
.kywrap{position:relative}
.kypick{cursor:pointer}
.kypop{position:absolute;top:calc(100% + 5.6px);right:0;z-index:40;width:212.6px;background:#fff;
  border:1px solid var(--line);border-radius:9px;box-shadow:var(--sh-3);padding:6.8px}
.kypop[hidden]{display:none}
.kypop-h{display:flex;align-items:center;gap:5.6px;margin-bottom:5.6px}
.kypop-h button{flex:none;border:none;background:none;cursor:pointer;color:var(--muted);width:24.8px;height:24.8px;border-radius:6.8px;font-size:13.5px}
.kypop-h button:hover{background:var(--line-2);color:var(--brand-d)}
.kypop-h .kypop-yr{flex:1;font-weight:700;font-size:12.4px;color:var(--ink)}
.kypop-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3.4px}
.kypop-g.q{grid-template-columns:repeat(2,1fr)}   /* 4 quý -> lưới 2×2 cho đỡ hụt ô */
.kypop-g.q button{padding:10.1px 3.4px}
.kypop-g button{border:1px solid transparent;background:none;cursor:pointer;padding:6.8px 3.4px;border-radius:6.8px;font-size:11.2px;color:var(--ink)}
.kypop-g button:hover{background:var(--line-2)}
.kypop-g button.on{background:var(--gold);color:var(--brand-d);font-weight:600}

/* Lịch sử table (div-grid) */
/* Lịch sử tự cuộn TRONG khung (tối đa 24 kỳ) -> khỏi phải cuộn cả trang mới thấy
   hết, mà thanh Tạo báo cáo thuế ở trên vẫn nằm trong tầm mắt. ~8 dòng là vừa. */
.histtable{display:flex;flex-direction:column;overflow:auto;max-height:22rem}
.ht-head,.ht-row{display:flex;align-items:center;gap:11.2px;padding:10.1px 14.6px;min-width:558px}
/* Dính đầu bảng: cuộn tới dòng thứ 10 vẫn biết cột nào là doanh thu, cột nào là thuế. */
.ht-head{background:var(--line-2);position:sticky;top:0;z-index:1}
/* Trang chủ khi CHƯA chọn HKD: chỉ còn logo mờ, không chữ, không ô rỗng. */
.chua-chon{display:flex;align-items:center;justify-content:center;min-height:58vh}
.chua-chon img{height:min(44vmin,300px);width:auto;opacity:.09}
@media (prefers-color-scheme:dark){.chua-chon img{opacity:.14}}
.ht-row{border-top:1px solid var(--line)}
.ht-ky{width:117px;flex:none}
.ht-luc{width:117px;flex:none}
.ht-num{width:117px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.ht-tt{width:99px;flex:none}
.ht-head span{font-size:11.2px;font-weight:500;color:var(--muted)}
.ht-row .ht-ky{font-size:12.4px;font-weight:500;color:var(--ink)}
.ht-row .ht-luc{font-size:11.2px;color:var(--muted)}
.ht-row .ht-num{font-size:12.4px;color:var(--ink)}
.hist-empty{color:var(--muted);padding:1.4rem;text-align:center}
.hist-empty p{margin:.2rem 0}

/* ── NHÃN «DỮ LIỆU DEMO» (HKD-09) ─────────────────────────────────────────
   Tương phản mạnh và nằm trên cùng — CỐ Ý. Nhãn này tồn tại để khách không
   nhầm số của hồ sơ mẫu là số của chính mình; một dải mờ nhạt thì sau hai
   giây không ai còn nhìn. Xem đầu `thanh_phan/nhan_demo.html`. */
.nhan-demo{display:flex;align-items:center;gap:11.2px;flex-wrap:wrap;
  background:var(--brand-d);color:#fff;border-radius:6.8px;
  padding:9px 14.6px;margin:0 0 11.2px;font-size:12.4px;line-height:1.5}
.nhan-demo strong{font-size:11.2px;letter-spacing:.08em;background:var(--gold);
  color:var(--brand-dd);padding:2.2px 9px;border-radius:99px;flex:none}
.nhan-demo span{color:#e6edf3}
.nhan-demo-ra{color:#fff;text-decoration:underline;white-space:nowrap;font-weight:600}
.nhan-demo-ra:hover{color:var(--gold-l)}
@media (max-width:640px){.nhan-demo{align-items:flex-start;flex-direction:column;gap:5.6px}}

/* ── KHUNG THẺ CHUNG CHO BLOCK A + BLOCK B (HKD-03b, chủ chốt 21/09) ───────
   Cùng một dáng thẻ: nền trắng · bo 6.8px · viền mảnh · vạch màu 4px bên trái ·
   cùng padding · tiêu đề 13.4px xuống dòng riêng · thân 12.4px.
   Khác nhau CHỈ Ở MÀU, và màu mang nghĩa:

     Block A  đỏ    — lời mời kết nối, việc chưa bắt đầu
     ① amber        — việc đang ở CHỦ HỘ
     ②④ info xanh   — việc đang ở LEO, KHÔNG phải lỗi của hộ
     ⑤ xanh lá      — đã xác minh xong (tự đè màu trong tuong_paywall.html)

   🔴 CHỦ CHỐT 21/09 khi hỏi lại: Block B lấy KHUNG của Block A nhưng GIỮ MÀU
   THEO NGHĨA. Đừng nhuộm đỏ cả Block B cho «đồng bộ» — `banner_trang_thai.html`
   ghi rõ «Đừng đổi banner ② sang đỏ», vì hộ đã kết nối xong đang chờ LEO gọi
   mà thấy dải đỏ thì tưởng mình làm sai gì đó. */

/* — Block A: đỏ cả chữ lẫn viền — */
.blka{display:flex;align-items:center;gap:14.6px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--danger);border-left:4px solid var(--danger);border-radius:6.8px;
  padding:12.4px 14.6px;margin:0 0 11.2px}
.blka-txt{flex:1 1 260px;min-width:0}
.blka-txt strong{display:block;font-size:13.4px;color:var(--danger)}
/* Thân dùng đỏ ĐẬM HƠN tiêu đề: #dc2626 cỡ chữ nhỏ trên nền trắng đọc bị chói.
   Cùng hệ đỏ đang dùng cho chữ lỗi ở trung_tam.html. */
.blka-txt p{margin:.25rem 0 0;color:#b91c1c;font-size:12.4px;line-height:1.55}

/* — Block B: cùng khung, màu theo nghĩa —
   Trước 21/09 các lớp `.bn*` KHÔNG có một dòng CSS nào trong cả repo: banner
   trạng thái và banner gói render trần thành mấy dòng chữ trôi. Đây là lần đầu
   chúng được tạo dáng. */
.bn{background:#fff;border:1px solid var(--line);border-left:4px solid var(--muted-2);
  border-radius:6.8px;padding:12.4px 14.6px;margin:0 0 11.2px;
  font-size:12.4px;line-height:1.55;color:var(--muted)}
/* CHỈ <strong> ĐẦU TIÊN là tiêu đề. Các <strong> giữa câu (số điện thoại hộ,
   «vẫn còn nguyên»…) phải ở nguyên trong dòng — `display:block` cho mọi strong
   là bẻ gãy câu thành từng mẩu. */
.bn > strong:first-child{display:block;font-size:13.4px;margin-bottom:.25rem}
.bn strong{color:var(--ink);font-weight:700}
.bn-amber{border-color:#f5deb3;border-left-color:var(--amber)}
.bn-amber > strong:first-child{color:var(--amber-ink)}
.bn-info{border-color:#cfe0f5;border-left-color:var(--info)}
.bn-info > strong:first-child{color:var(--info)}
/* `.bn-noi-bat` (⑤) tự đè nền/viền bằng <style> trong tuong_paywall.html —
   khối đó nằm sau file này nên thắng. Ở đây chỉ nhuộm tiêu đề cho khớp. */
.bn-noi-bat > strong:first-child{color:#059669}
/* Nút trong banner: cùng dáng `.connbtn` để cả ba khối nói cùng một ngôn ngữ. */
.bn-nut{display:inline-block;margin-top:.45rem;background:var(--brand-d);color:#fff;
  border-radius:6.8px;padding:5.6px 12.4px;font-size:11.2px;font-weight:600;
  text-decoration:none}
.bn-nut:hover{background:var(--brand-dd)}
/* Nút ⑤ to hơn CÓ Ý (hành động nổi bật nhất màn đầu) — kích thước còn lại do
   <style> trong tuong_paywall.html đặt, ở đây chỉ kéo cỡ chữ lên cho cân. */
.bn-nut-to{font-size:13.4px}
.blka-act{display:flex;gap:6.8px;flex-wrap:wrap;flex:none}
.blka-act .connbtn{text-decoration:none;padding:6.8px 14.6px;display:inline-flex;align-items:center}
/* Nút phụ (Demo) — cùng dáng nút chính để hai nút thành một cặp, chỉ nhạt hơn. */
.connbtn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.connbtn.ghost:hover{background:var(--bg);border-color:var(--brand-l)}
@media (max-width:640px){.blka-act{width:100%}.blka-act .connbtn{flex:1 1 auto;justify-content:center}}

/* ── Tổng quan (Figma 234:298) ── */
.alertbar{display:flex;align-items:center;gap:6.8px;flex-wrap:wrap;background:var(--amber-bg);
  border:1px solid #f5deb3;border-radius:6.8px;padding:9px 11.2px 9px 12.4px;color:var(--amber-ink);font-size:12.4px}
.alertbar .ic-xs{width:14.6px;height:14.6px;flex:none}
.alertbar b{font-weight:600;color:var(--ink)}
.alert-sub{color:var(--amber-ink);font-size:11.2px}
.alertbar .connbtn{text-decoration:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(189px,1fr));gap:14.6px}
.stat{display:flex;flex-direction:column;gap:3.4px;min-width:0}
.stat-lbl{font-size:11.2px;font-weight:500;color:var(--muted-2);letter-spacing:.04em}
.stat-val{font-family:var(--font-head);font-size:var(--fs-num-l);font-weight:800;color:var(--ink);
  line-height:24.8px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat-sub{font-size:11.2px;color:var(--muted)}
.src-foot{margin-top:12.4px;padding-top:9px;border-top:1px solid var(--line-2);font-size:11.2px;color:var(--muted)}
/* bảng Giao dịch gần đây */
.gd-ngay{width:57.4px;flex:none}
.gd-nd{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-ng{width:99px;flex:none}
.gd-tien{width:108px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.gd-tt{width:108px;flex:none;text-align:right}
.ht-row .gd-ngay,.ht-row .gd-ng{font-size:11.2px;color:var(--muted)}
.ht-row .gd-nd{font-size:12.4px;color:var(--ink)}
.ht-row .gd-tien{font-size:12.4px;font-weight:500;color:var(--ink)}
.gd-foot{padding:9px 14.6px;border-top:1px solid var(--line)}

/* ── Góp ý / feedback ── */
.gopy-form{display:flex;flex-direction:column;gap:11.2px}
.gopy-lbl{display:flex;flex-direction:column;gap:4.5px;font-size:11.2px;font-weight:600;color:var(--ink)}
/* .gopy-lbl xếp dọc -> nhãn và dấu * phải nằm chung 1 span, nếu không * rớt xuống dòng riêng */
.gopy-lbl-t{display:flex;align-items:baseline;gap:4.5px}
.gopy-req{color:var(--danger)}
.gopy-form input,.gopy-form textarea{width:100%;font:inherit;font-size:12.4px;font-weight:400;
  padding:7.9px 10.1px;border:1px solid var(--line);border-radius:6.8px;background:#fff;color:var(--ink);resize:vertical}
.gopy-form textarea{min-height:78.8px;line-height:1.5}
.gopy-opt{font-weight:400;color:var(--muted-2)}
.gopy-hint{font-size:11.2px;font-weight:400;color:var(--muted-2)}
/* ô đính kèm ảnh chụp màn hình (dán / kéo-thả / chọn file) */
.gopy-drop{border:1.5px dashed var(--line);border-radius:var(--r);background:var(--line-2);
  padding:12.4px;text-align:center;transition:border-color .15s var(--ease),background .15s var(--ease)}
.gopy-drop:hover,.gopy-drop:focus-visible,.gopy-drop.over{border-color:var(--gold);background:var(--gold-tint);outline:none}
.gopy-drop-empty svg{width:23.6px;height:23.6px;color:var(--muted-2)}
.gopy-drop-empty p{margin:2px 0 0;font-size:11.2px;color:var(--muted)}
.gopy-drop-empty p b{color:var(--ink)}
.gopy-pick{border:none;background:none;padding:0;font:inherit;color:var(--gold-d);
  font-weight:600;text-decoration:underline;cursor:pointer}
.gopy-drop-has{display:flex;align-items:center;gap:9px;text-align:left}
.gopy-drop-has[hidden],.gopy-drop-empty[hidden]{display:none}   /* display:flex trên đè mất [hidden] */
.gopy-drop-has img{width:66.4px;height:47.2px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;flex:none}
.gopy-fname{flex:1;min-width:0;font-size:11.2px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gopy-xoa{flex:none;border:1px solid var(--line);background:#fff;width:23.6px;height:23.6px;
  border-radius:6.8px;cursor:pointer;font-size:14.6px;line-height:1;color:var(--muted)}
.gopy-xoa:hover{border-color:var(--danger);color:var(--danger)}
.fb-anh{display:inline-block;margin-top:6.8px}
.fb-anh img{max-width:198px;max-height:126px;border-radius:var(--r-sm);border:1px solid var(--line);
  display:block;background:#fff}
.fb-anh:hover img{border-color:var(--gold)}
.fb-list{display:flex;flex-direction:column}
.fb-item{display:flex;align-items:flex-start;gap:11.2px;padding:11.2px 14.6px;border-top:1px solid var(--line)}
.fb-item:first-child{border-top:0}
.fb-main{flex:1 1 0;min-width:0}
.fb-top{display:flex;align-items:center;gap:6.8px;flex-wrap:wrap;margin-bottom:2px}
.fb-name{font-size:12.4px;font-weight:600;color:var(--ink)}
.fb-time{font-size:11.2px;color:var(--muted-2)}
.fb-msg{font-size:12.4px;color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.fb-dem{font-size:11.2px;color:var(--muted);font-variant-numeric:tabular-nums}
/* checklist: mỗi gạch đầu dòng của góp ý là 1 mục tick riêng */
.fb-todo{list-style:none;margin:3.4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.fb-td{display:flex;align-items:flex-start;gap:7.9px;padding:2px 0}
.fb-td form{margin:0;flex:none}
.fb-tick{display:grid;place-items:center;width:16.9px;height:16.9px;margin-top:1px;flex:none;
  border:1.5px solid var(--line);border-radius:4.5px;background:#fff;padding:0;cursor:pointer;color:#fff}
.fb-tick.ro{cursor:default}
.fb-tick svg{width:11.2px;height:11.2px}
.fb-tick:hover:not(.ro){border-color:var(--gold)}
.fb-td.xong .fb-tick{background:var(--go);border-color:var(--go)}
.fb-td-txt{font-size:12.4px;color:var(--ink);line-height:1.45;word-break:break-word}
.fb-td.xong .fb-td-txt{color:var(--muted-2);text-decoration:line-through}
.fb-td-by{margin-left:auto;flex:none;font-size:11.2px;color:var(--muted-2);white-space:nowrap}
.fb-act{flex:none}
.fb-act .connbtn{white-space:nowrap}

/* ── Tab bar (Hoá đơn master-detail — Figma 279/308) ── */
.tabs{display:flex;flex-wrap:wrap;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:.9rem}
.tab{padding:.5rem .9rem;font-size:.88rem;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:6.8px 6.8px 0 0;
  transition:color .15s var(--ease),background .15s var(--ease)}
.tab:hover{color:var(--brand-d);background:var(--line-2)}
.tab.active{color:var(--brand-dd);border-bottom-color:var(--gold)}

/* ══ .dp — khung chung MỌI trang xem số liệu (Hoá đơn, Sao kê, các Sổ) ══
   Figma «App D1 · IA v2»: một thẻ trắng duy nhất xếp dọc
   tiêu đề → tabs → thanh tổng → thanh lọc → bảng → chân trang.
   Bảng nằm TRONG thẻ nên bỏ viền/kẻ sọc riêng — mỗi dòng chỉ 1 hairline. */
.dp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden}
/* Lưới chọn kỳ phải thoát ra khỏi thẻ, không thì .dp overflow:hidden xén mất hàng
   Th 10/11/12. Chỉ nới KHI ĐANG MỞ — .kypop nằm sẵn trong DOM (chỉ mang [hidden]) nên
   ':has(.kypop)' trơn sẽ bỏ overflow:hidden vĩnh viễn, mất bo góc dưới của bảng.
   Cùng lối với `.panel:has(.skpop)` cũ — quy tắc đó đã gỡ 21/09 khi bong bóng
   tải sao kê chuyển thành popup <dialog>, nhưng lối làm thì vẫn đúng ở đây. */
.dp:has(.kypop:not([hidden])){overflow:visible}
/* — tiêu đề — */
.dp-head{display:flex;align-items:flex-start;gap:12.4px;padding:14.6px 18px 12.4px}
.dp-head-txt{min-width:0}
.dp-head-act{margin:0 0 0 auto;flex:none}
.dp-head-act .btn{padding:5.6px 12.4px;font-size:12.4px;line-height:16.9px}
.dp-head h1{font-size:16.9px;line-height:23.6px;margin:0;gap:9px}
.dp-sub{margin:2px 0 0;font-size:11.2px;line-height:16.9px;color:var(--muted)}
/* — tabs — */
.dp .tabs{margin:0;padding:0 18px;gap:0;border-bottom:1px solid var(--line)}
.dp .tab{padding:7.9px 11.2px 9px;font-size:12.4px;line-height:16.9px;border-radius:0;
  margin:0 9px -1px 0;white-space:nowrap}
.dp .tab:hover{background:none;color:var(--brand-d)}
.dp .tab.active{color:var(--brand-dd);font-weight:700;border-bottom-color:var(--brand-d)}
/* — thanh tổng: trái = con số chốt, phải = ghi chú nghiệp vụ — */
.dp-sum{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 18px;background:#f8fafc;border-bottom:1px solid var(--line)}
.dp-sum b{font-size:12.4px;line-height:16.9px;color:var(--brand-dd);font-weight:700;
  font-variant-numeric:tabular-nums}
.dp-note{margin-left:auto;font-size:11.2px;line-height:16.9px;color:var(--muted)}
.dp-note.gold{color:var(--gold-d)}
/* — thanh lọc — */
.dp-filter{display:flex;align-items:center;gap:12.4px;flex-wrap:wrap;
  padding:9px 18px;border-bottom:1px solid var(--line);margin:0}
.dp-filter input[type=search]{flex:1 1 202px;max-width:270px;min-width:0;
  padding:5.6px 9px;font-size:12.4px;line-height:16.9px;border-radius:6.8px}
/* Cặp "nhãn: giá trị ▾" — trông như chữ, bấm vào là <select> thật (JS-free, a11y ok) */
.dp-pick{display:inline-flex;align-items:center;gap:4.5px;font-size:12.4px;line-height:16.9px;
  color:var(--muted);white-space:nowrap}
/* field-sizing: ô co theo GIÁ TRỊ ĐANG CHỌN, không theo option dài nhất -> mũi ▾ nằm
   sát chữ như Figma. Trình duyệt chưa hỗ trợ thì rơi về max-width, vẫn dùng được. */
.dp-pick select{border:0;background:none;padding:2px 2px 2px 0;font-size:12.4px;font-weight:600;
  color:var(--brand-dd);cursor:pointer;max-width:158px;field-sizing:content}
.dp-pick select:focus{box-shadow:none;outline:2px solid var(--brand);outline-offset:1px;border-radius:4.5px}
.dp-filter .dp-sp{margin-left:auto}
.dp-filter .btn{padding:5.6px 12.4px;font-size:12.4px;line-height:16.9px}
/* Nút "Tìm" ẩn khỏi mắt nhưng CÒN trong form: Enter trong ô tìm vẫn submit (implicit
   submission cần một nút submit), screen reader vẫn đọc được, và Figma vẫn sạch. */
.dp-loc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dp-loc:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip:auto;clip-path:none}
/* — bảng — */
.dp-table{overflow:auto;max-height:64vh}
/* Dồn ngang cho vừa khung, đỡ phải cuộn: padding hẹp + table full-width. Cột chữ dài
   (tên đối tác, tên hàng) tự co bằng ellipsis; các cột mã/tiền vốn ngắn. */
.dp-table table{font-size:12.4px;width:100%}
.dp-table th{background:var(--card);color:var(--muted);font-weight:600;font-size:10.1px;
  letter-spacing:.04em;padding:7.9px 6.8px;border-bottom:1px solid var(--line);white-space:nowrap}
/* Trần 13rem (~208px) quá rộng: nhãn trạng thái xử lý dài ~150px vẫn lọt dưới ngưỡng nên
   KHÔNG rút gọn, chỉ làm cột nở ra và đẩy cả bảng tràn ngang (đúng thứ người dùng gặp).
   9rem thì chữ dài mới thật sự ellipsize, bảng vừa khung; nội dung đầy đủ vẫn xem được
   bằng hover vì mọi td đều có title. */
.dp-table td{padding:8px 6.8px;border-bottom:1px solid var(--line-2);
  max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-table td.ma{color:var(--info);font-variant-numeric:tabular-nums}   /* cột mã: số HĐ, MST… */
.dp-table tbody tr:nth-child(even){background:none}   /* Figma: không kẻ sọc */
.dp-table tbody tr:hover{background:#f8fafc}
.dp-table tbody tr:last-child td{border-bottom:0}
/* — chân trang — */
.dp-foot{display:flex;align-items:center;gap:12.4px;flex-wrap:wrap;
  padding:9px 18px;font-size:11.2px;color:var(--muted);border-top:1px solid var(--line)}
.dp-foot .dp-sp{margin-left:auto}
.dp-foot .btn{padding:3.4px 9px;font-size:11.2px;line-height:16.9px}
.dp-empty{padding:2.4rem 18px;text-align:center;color:var(--muted);font-size:12.4px}
@media (max-width:640px){
  .dp-head,.dp-sum,.dp-filter,.dp-foot{padding-left:12.4px;padding-right:12.4px}
  .dp .tabs{padding:0 12.4px;flex-wrap:nowrap;overflow-x:auto}
  .dp-note{margin-left:0;flex-basis:100%}
  .dp-filter input[type=search]{max-width:none;flex-basis:100%}
}

/* ══ Báo cáo thuế — cột kỳ bên trái + thẻ số tiền + tờ khai trên MỘT trang cuộn ══════
   Thay 3 tab cũ (tờ khai / tổng quan năm / BK_STK): kế toán viên phải thấy số phải nộp,
   tờ khai và bảng kê tài khoản cùng lúc thì mới đối chiếu được trước khi bấm đã nộp. */
.bct-head{padding:1.05rem 1.45rem}
.bct-head h1{margin:0;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.02em}
.bct-head p{margin:.15rem 0 0;color:var(--muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.bct-msg{border-left:3.4px solid var(--gold);padding:.8rem 1.15rem;font-size:var(--fs-small)}

.bct-wrap{display:grid;grid-template-columns:196px minmax(0,1fr);gap:14.6px;align-items:start}
.bct-main{min-width:0}

/* — cột trái "KỲ TÍNH THUẾ" — */
.bct-rail{padding:12.4px;position:sticky;top:14.6px}
.bct-rail-lab{color:var(--muted);font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:0 6.8px .5rem}
/* Bộ chọn kỳ (lưới quý) ở rail: nút rộng bằng cột; popup mở sang phải khỏi tràn mép trái. */
.bct-rail .kywrap{margin-bottom:.5rem}
.bct-rail .kypick{width:100%;justify-content:space-between}
.bct-rail .kypop{left:0;right:auto}
.bct-ky{display:block;text-decoration:none;padding:7.9px 9px;border-radius:var(--r-sm);
  color:var(--ink);transition:background .15s var(--ease)}
.bct-ky b{display:block;font-weight:600;font-size:var(--fs-small);line-height:var(--lh-small)}
.bct-ky small{display:block;font-size:var(--fs-cap);line-height:var(--lh-cap);margin-top:1px}
.bct-ky:hover{background:var(--line-2)}
.bct-ky.on{background:var(--accent)}
.bct-ky.on b{color:var(--brand-dd)}
/* Trạng thái kỳ / tài khoản. Tên riêng .st-* vì .tt-* đã là namespace trang Trung tâm. */
.st-ok{color:var(--go)}
.st-cho{color:var(--gold-d)}
.st-warn{color:var(--amber-ink)}
.st-mo{color:var(--muted-2)}
/* Dòng phụ liệt kê tháng thiếu dưới nhãn trạng thái quý — nhạt hơn nhãn để không tranh mắt.
   .bct-ky small đã display:block nên tự xuống dòng; đừng đặt lại font-size (thang 0.8). */
.bct-ky .st-thang{color:var(--muted-2);font-weight:600}

/* — thẻ số tiền phải nộp — */
.bct-sum{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:1.2rem;
  align-items:start;background:var(--cream);border:1px solid var(--accent-2);
  border-radius:var(--r-lg);padding:1.15rem 1.35rem;margin-bottom:14.6px}
.bct-sum-so .lab{display:block;color:var(--muted);font-size:var(--fs-small)}
.bct-sum-so .so{display:block;font-family:var(--font-head);font-size:31.5px;font-weight:800;
  color:var(--brand-dd);line-height:1.15;letter-spacing:-.02em;margin:.15rem 0 .35rem}
.bct-sum-so .note{margin:0;font-size:var(--fs-small);line-height:var(--lh-small)}
.bct-sum-so .note2{margin:.2rem 0 0;font-size:var(--fs-cap);color:var(--muted)}
/* Câu hỏi "hộ có thuộc diện không được giảm 20%?" (NĐ 174/2025) — gập sẵn, mở khi cần. */
.bct-mientru{margin-top:.5rem;font-size:var(--fs-cap);line-height:1.5}
.bct-mientru summary{color:var(--brand-d);font-weight:600;cursor:pointer}
.bct-mientru p{margin:.4rem 0 .3rem;color:var(--muted)}
.bct-mientru ul{margin:0;padding-left:1.05rem;color:var(--muted)}
.bct-mientru li{margin-bottom:.15rem}
.bct-sum-han{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.bct-sum-han p{margin:0 0 .35rem}
.bct-sum-han b{color:var(--brand-dd);font-size:var(--fs-body)}
.bct-sum-han a{color:var(--brand-d);font-weight:600}
.bct-sum-act{display:flex;flex-direction:column;gap:.5rem;min-width:12.6rem}
.bct-sum-act .btn{width:100%}

/* — khối tờ khai / BK-STK: thanh tiêu đề xám, thân trắng, nối nhau trong 1 thẻ — */
.bct-doc{padding:0;overflow:hidden}
.bct-doc-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:9px 1.45rem;background:var(--line-2);font-size:var(--fs-small)}
.bct-doc-bar b{color:var(--brand-dd)}
.bct-doc-bar span{color:var(--muted);font-size:var(--fs-cap)}
.bct-doc-bar .btn{padding:3.4px 9px;font-size:var(--fs-cap);line-height:16.9px}
.bct-doc-body{padding:1.15rem 1.45rem}
.bct-doc-body+.bct-doc-bar{border-top:1px solid var(--line)}
/* Nút "Tôi đã nộp" nay nằm trong cột hành động của khung số tiền (hẹp ~12,6rem) chứ không
   còn ở cuối khối BK-STK. Bố cục cũ là flex ngang + ghi chú min-width:16rem — để nguyên
   thì đúng cái min-width đó bẻ toác lưới 3 cột của .bct-sum. Xếp dọc, ghi chú xuống dòng. */
.bct-xn{margin-top:.15rem;padding-top:.55rem;border-top:1px solid var(--line-2)}
.bct-xn .tk-muted{display:block;margin-top:.3rem;font-size:var(--fs-cap);line-height:1.4}
/* Trạng thái nộp lấy từ cổng DVC. KHÔNG lấy màu badge của cổng làm chuẩn — cổng tô
   xanh (bg-success) cho cả "Không chấp nhận". */
.bct-nop-ok,.bct-nop-loi,.bct-nop-cho{margin:.15rem 0 0;padding-top:.55rem;
  border-top:1px solid var(--line-2);font-size:var(--fs-cap);line-height:1.4}
.bct-nop-ok{color:#15803d;font-weight:600}
.bct-nop-loi{color:#b91c1c;font-weight:600}
.bct-nop-cho{color:#a16207}
.bct-xn-kiem{margin-top:.35rem}
/* Bảng chi tiết lệch giữa BCT hiện tại và bản đã nộp. Là một THẺ RIÊNG ngoài lưới
   .bct-sum: nhét bảng rộng vào cột hành động 12,6rem thì nó phá toác lưới 3 cột. */
.bct-lech{padding:.9rem 1.45rem;font-size:var(--fs-cap)}
.bct-lech summary{cursor:pointer;color:var(--brand-d);font-weight:600}
.bct-lech .tablewrap{margin-top:.6rem}
.bct-lech table{width:100%}
.bct-lech td.l{max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Câu giải thích còn lại dưới bảng tài khoản (nút đã đi lên trên). */
.bct-xn-ghi{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line-2);
  font-size:var(--fs-small);line-height:1.55}

.bct-canhbao{border-left:3.4px solid var(--amber);background:var(--amber-bg);
  font-size:var(--fs-small);padding:.9rem 1.15rem;line-height:1.55}
.bct-canhbao.qua-han{border-left-color:var(--danger);background:#fef2f2}

/* ══ Hướng dẫn nộp tờ khai (S5a) ══════════════════════════════════════════════════
   Khối .hd-warn cố tình nổi bật: mỗi cái là một điều LEO CHƯA xác minh được. */
.hd-han{display:flex;align-items:flex-start;gap:.55rem;background:var(--amber-bg);
  border:1px solid var(--amber);border-radius:var(--r);padding:.7rem 1.1rem;
  margin-bottom:14.6px;font-size:var(--fs-small);line-height:1.5}
.hd-han svg{width:15.8px;height:15.8px;flex:none;color:var(--amber-ink);margin-top:2px}
.hd-han b{color:var(--brand-dd)}
.hd-han-cc{color:var(--muted)}
.hd-step{padding:0;overflow:hidden}
.hd-step-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:9px 1.45rem;background:var(--line-2)}
.hd-step-bar b{font-size:var(--fs-body);color:var(--brand-dd)}
.hd-step-bar span{color:var(--muted);font-size:var(--fs-cap);text-align:right}
.hd-step-body{padding:1.15rem 1.45rem;font-size:var(--fs-small);line-height:1.6}
.hd-step-body h3{margin:0 0 .45rem;font-size:var(--fs-body);font-weight:700;color:var(--brand-dd);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hd-step-body h3.hd-h3-2{margin-top:1.35rem}
.hd-step-body p{margin:0 0 .5rem}
.hd-note{color:var(--muted);font-size:var(--fs-cap);line-height:1.55}
.hd-tag{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;
  font-size:var(--fs-cap);font-weight:700;letter-spacing:.03em;white-space:nowrap}
.hd-tag.ok{background:var(--go-bg);color:var(--go)}
.hd-tag.warn{background:var(--amber-bg);color:var(--amber-ink)}
.hd-warn{background:var(--amber-bg);border:1px solid var(--amber);border-radius:var(--r-sm);
  padding:.65rem .9rem .65rem 2.1rem;margin:.6rem 0 0;font-size:var(--fs-cap);
  line-height:1.55;position:relative}
.hd-warn::before{content:"⚠";position:absolute;left:.85rem;top:.62rem;color:var(--amber-ink)}
.hd-ds{margin:.3rem 0 .6rem;padding-left:1.05rem;list-style:none}
.hd-ds li{position:relative;margin-bottom:.3rem}
.hd-ds li::before{content:"·";position:absolute;left:-.7rem;color:var(--muted)}

@media (max-width:900px){
  .bct-wrap{grid-template-columns:1fr}
  .bct-rail{position:static}
  .bct-sum{grid-template-columns:1fr}
  .bct-sum-act{min-width:0}
  .hd-step-bar,.bct-doc-bar{flex-wrap:wrap}
  .hd-step-bar span,.bct-doc-bar span{text-align:left}
}

/* Nút bị vô hiệu — dùng cho nút khoá trong hồ sơ mẫu (HKD-09).
   Khoá chứ KHÔNG ẩn: demo vẫn phải cho thấy sản phẩm thật có chức năng đó. */
.connbtn:disabled,.gtact:disabled{opacity:.45;cursor:not-allowed}
.connbtn:disabled:hover{background:var(--brand-d)}

/* Ba bước ngay trong popup «Kết nối & kích hoạt» (chủ chốt 24/09). Nút trên thẻ
   GIỮ NGUYÊN — hai lối vào cùng mở một dialog, không phải hai bản sao. */
.hd-buoc{margin:.6rem 0 .2rem;padding-left:1.2rem}
.hd-buoc li{margin:0 0 .7rem;display:flex;align-items:flex-start;gap:.7rem}
.hd-buoc .hd-txt{flex:1;min-width:0}
.hd-buoc .connbtn,.hd-buoc .pillx{flex:none;margin-top:.1rem}

/* Nút X của popup «Kết nối & kích hoạt» — LỐI ĐÓNG DUY NHẤT do khách chủ động
   (chủ chốt 24/09). Đặt góc trên phải, không chen vào dòng 3 bước. */
.md{position:relative}
.md-x{position:absolute;top:10px;right:12px;width:28px;height:28px;padding:0;
  border:0;background:none;border-radius:8px;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted-2)}
.md-x:hover{background:var(--line-2);color:var(--ink)}