/* Sổ Thu Chi HKD — dựng lại từ Docs/mockup/*.mockup.html.
   Mốc: 600px (khoảng cách), 760px (form 12 cột), 900px (menu trái + bảng). */

:root {
  --nen: #EEF2F7;
  --chu: #1E293B;
  --chu-2: #334155;
  --phu: #64748B;
  --vien: #CBD5E1;
  --vien-nhat: #E2E8F0;
  --ke: #F1F5F9;
  --dt: #0B8577; --dt-nen: #E0F5F2;
  --cp: #D6336C; --cp-nen: #FCE4EE; --cp-dam: #A61E50;
  --mh: #2563EB; --mh-nen: #E3EDFD; --mh-dam: #1D4ED8;
  --no: #B45309; --no-nen: #FEF3C7;
  --do: #B91C1C; --do-nen: #FEE2E2;
  --nhan: var(--mh);
  --nhan-nen: var(--mh-nen);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--mh); }
a:hover { color: var(--mh-dam); }
button { font: inherit; }
[hidden] { display: none !important; }
.an-di { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Khung app ---------- */
.app { container-type: inline-size; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell { flex: 1; display: flex; min-width: 0; }
.side { display: none; width: 232px; flex: none; background: #fff; border-right: 1px solid var(--vien-nhat); padding: 20px 14px; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.sl { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--chu-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.sl:hover { background: var(--ke); color: var(--chu); }
.sl[aria-current="page"] { background: var(--mh-nen); color: var(--mh-dam); }
.tk-menu { margin-top: auto; border-top: 1px solid var(--vien-nhat); padding: 14px 12px 4px; display: flex; flex-direction: column; gap: 4px; }
.tk-menu-sdt { font-size: 13px; font-weight: 600; }
.tk-menu-han { font-size: 12px; font-weight: 600; color: var(--phu); }
.tk-menu-han.het { color: var(--no); }
.tk-menu-thoat { padding: 0; height: 40px; border: 0; background: none; color: var(--phu); cursor: pointer; width: 100%; }
.tk-menu-thoat:hover { background: none; color: var(--chu); }
.main { flex: 1; min-width: 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.trang, .dai-vung { display: contents; }

/* ---------- Dải thông báo hết hạn / sắp hết hạn ---------- */
.dai { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; }
.dai-chu { flex: 1 1 240px; font-size: 14px; line-height: 1.5; }
.dai > svg { flex: none; }
.dai-het { background: #FEF3C7; color: #92400E; }
.dai-sap { background: var(--mh-nen); color: #1E3A8A; flex-wrap: nowrap; }
.dai-sap .dai-chu { flex: 1 1 auto; }
.dai-sap a { color: #1E3A8A; font-weight: 700; }
.dai-nut { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; }
.dai-nut-dac { background: #92400E; color: #fff; }
.dai-nut-dac:hover { color: #fff; background: #78350F; }
.dai-nut-vien { background: #fff; color: #92400E; border: 1px solid #F59E0B; }
.dai-nut-vien:hover { color: #78350F; }
/* Bước 6: dải dùng thử (xanh khi còn ≥ 1 ngày sau hôm nay) + dải bản xem thử trên cùng mọi trang. */
.dai-thu { background: #E3EDFD; color: #1E3A8A; }
.dai-nut-xanh { background: #1D4ED8; color: #fff; }
.dai-nut-xanh:hover { color: #fff; background: #1E40AF; }
.dai-nut-xanh-vien { background: #fff; color: #1D4ED8; border: 1px solid #93C5FD; }
.dai-nut-xanh-vien:hover { color: #1E40AF; }
.xt-dai { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: #0B6B60; color: #fff; }
.xt-dai > svg { flex: none; }
.xt-dai-chu { flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.xt-dai-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.xt-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.xt-nut-trang { background: #fff; color: #0B6B60; border: 0; }
.xt-nut-trang:hover { background: #E0F5F2; color: #065F55; }
.xt-nut-vien { background: transparent; color: #fff; border: 1px solid #5EC2B4; }
.xt-nut-vien:hover { background: rgba(255, 255, 255, .1); }
.xem-thu .tk-menu-sdt, .xem-thu .tk-menu-thoat { display: none; }
.xem-thu .tk-menu-han { font-size: 12.5px; font-weight: 400; color: #475569; line-height: 1.5; }
.tk-menu-xt { color: #0B6B60; }
/* Bản soạn dữ liệu mẫu (mục 4.6): dải tím. */
.bs-dai { background: #5B21B6; }
.bs-nut-trang { background: #fff; color: #5B21B6; border: 0; }
.bs-nut-trang:hover { background: #EDE9FE; }
.bs-nut-trang:disabled { opacity: .7; cursor: wait; }
.bs-nut-vien { background: transparent; color: #fff; border: 1px solid #A78BFA; }
.bs-nut-vien:hover { background: rgba(255, 255, 255, .1); }
.ban-soan .tk-menu-sdt, .ban-soan .tk-menu-thoat { display: none; }
.ban-soan .tk-menu-han { font-size: 12.5px; font-weight: 400; color: #475569; line-height: 1.5; }
.tk-menu-bs { color: #5B21B6; }
.dai-dong { width: 40px; height: 40px; border: 0; background: none; color: #1E3A8A; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dai-dong:hover { background: rgba(30, 58, 138, .08); }

/* ---------- Chế độ chỉ xem (tài khoản hết hạn) ---------- */
.chi-doc [data-ghi] { display: none !important; }
.chi-hien { display: none !important; }
.chi-doc .chi-hien { display: flex !important; }
.the-chi-doc { padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.the-chi-doc-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ke); color: #475569; display: flex; align-items: center; justify-content: center; }
.hop-xam { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ke); color: var(--chu-2); font-size: 14px; line-height: 1.5; }
.hop-xam > svg { flex: none; margin-top: 1px; }

/* ---------- Cài đặt › Tài khoản ---------- */
.tk-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.tk-cot { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tk-the { padding: 18px; }
.tk-the h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.tk-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; margin: 0; font-size: 14px; }
.tk-dl dt { color: var(--phu); }
.tk-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tk-ghi { margin: 14px 0 0; font-size: 13px; color: var(--phu); line-height: 1.5; }
.o-pin { letter-spacing: 4px; }
.hdr { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ten-ho-nho { font-size: 12px; color: var(--phu); font-weight: 500; }
.h1 { margin: 2px 0 0; font-size: 22px; font-weight: 700; }
.bnav { position: sticky; bottom: 0; height: 68px; background: #fff; border-top: 1px solid var(--vien-nhat); display: flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.nv { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--phu); text-decoration: none; }
.nv[aria-current="page"] { color: var(--mh); }

/* ---------- Nút, ô ---------- */
.ib { width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; color: var(--chu-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ib:hover { background: var(--ke); }
.ib:disabled { opacity: .35; cursor: default; background: none; }
.btn2 { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vien); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.btn2:disabled { color: #94A3B8; cursor: not-allowed; }
.bp { height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--mh); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.bs { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--vien); background: #fff; color: var(--chu-2); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bd { height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #FCA5A5; background: #fff; color: var(--do); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bd-dac { background: var(--do); border-color: var(--do); color: #fff; }
.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--chu-2); margin-bottom: 6px; }
.hint { font-weight: 400; color: var(--phu); }
.lock { font-size: 11px; font-weight: 600; color: var(--phu); margin-left: 4px; }
.inp { width: 100%; height: 46px; border: 1px solid var(--vien); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--chu); background: #fff; }
.inp:focus { outline: 2px solid var(--mh); outline-offset: 1px; border-color: transparent; }
.inp::placeholder { color: #94A3B8; }
.inp[aria-invalid="true"] { border-color: var(--do); background: #FFF7F7; }
.inp[aria-invalid="true"]:focus { outline-color: var(--do); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.big { font-size: 22px; font-weight: 700; }
.loi-o { color: var(--do); font-size: 12px; font-weight: 600; margin-top: 6px; }
.calc { height: 46px; border-radius: 10px; background: var(--ke); padding: 0 12px; display: flex; align-items: center; justify-content: flex-end; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; user-select: all; }
.pills { display: flex; gap: 8px; }
.pill { flex: 1; height: 46px; border-radius: 10px; border: 1px solid var(--vien); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--nhan); border-color: var(--nhan); color: #fff; }
/* Nhóm chi phí (bước 8, mockup form-gon-chi-phi): nút bo tròn xếp tràn dòng, 6 nhóm đầu + "+ N nhóm khác". */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--vien); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--cp-nen); border-color: var(--cp); color: var(--cp-dam); box-shadow: inset 0 0 0 1px var(--cp); }
.chip-them { border-style: dashed; color: var(--phu); }
.chips[aria-invalid="true"] .chip { border-color: #FCA5A5; }
.qk { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--vien); background: #fff; font-size: 13px; font-weight: 600; color: var(--chu-2); cursor: pointer; white-space: nowrap; }
.qk:hover { border-color: #94A3B8; }
.qk-xanh { background: var(--mh); border-color: var(--mh); color: #fff; }
.up { height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--vien); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.up:hover { background: #F8FAFC; }
.up:disabled { cursor: not-allowed; opacity: .6; }
.badge { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* ---------- Thẻ ---------- */
.card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(30, 41, 59, .06); min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { background: #fff; border-radius: 14px; padding: 12px 10px; box-shadow: 0 1px 3px rgba(30, 41, 59, .06); min-width: 0; }
.kl { font-size: 12px; font-weight: 600; }
.kv { font-size: 15px; font-weight: 700; margin-top: 4px; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kv.dai { font-size: 13px; }
.kv.rat-dai { font-size: 11.5px; }

/* ---------- Chọn tháng ---------- */
.thang { display: flex; align-items: center; border: 1px solid var(--vien); border-radius: 10px; background: #fff; }
.thang-nhan { font-size: 14px; font-weight: 700; padding: 0 2px; white-space: nowrap; min-width: 78px; text-align: center; }

/* ---------- Form nhập ---------- */
.fc { container-type: inline-size; padding: 16px; scroll-margin-top: 12px; position: relative; }
.fc.dang-sua { outline: 2px solid var(--nhan); }
.dong-sua { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--nhan-nen); color: var(--chu); font-size: 14px; font-weight: 700; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--vien-nhat); border-radius: 12px; }
.tab { flex: 1; height: 42px; border: 0; border-radius: 9px; background: none; font-size: 14px; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.tab[aria-selected="true"] { color: #fff; }
.tab[data-loai="dt"][aria-selected="true"] { background: var(--dt); }
.tab[data-loai="cp"][aria-selected="true"] { background: var(--cp); }
.tab[data-loai="mh"][aria-selected="true"] { background: var(--mh); }
.tab:disabled { cursor: not-allowed; opacity: .55; }
.fg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.n2 { grid-column: span 2; } .n3 { grid-column: span 3; } .n4 { grid-column: span 4; } .n6 { grid-column: span 6; }
.o-ngay { position: relative; }
.o-ngay .inp { padding-right: 44px; }
.o-ngay .ib { position: absolute; right: 3px; top: 3px; color: var(--phu); }
.o-ngay input[type="date"] { position: absolute; right: 3px; top: 3px; width: 40px; height: 40px; opacity: 0; pointer-events: none; }
.act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ke); }
.bsave { flex: 1; height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--nhan); background: #fff; color: var(--nhan); }
.bsave.chinh { border: 0; background: var(--nhan); color: #fff; }
.bsave:disabled { opacity: .6; cursor: wait; }
.bsave.bi-chan, .bsave.bi-chan:disabled { opacity: 1; cursor: not-allowed; border-color: #94A3B8; color: #94A3B8; }
.bsave.chinh.bi-chan { background: #94A3B8; color: #fff; }
.chan-luu { flex-basis: 100%; text-align: right; font-size: 12px; font-weight: 600; color: #92400E; }
.chan-luu.dang { color: #1D4ED8; }
.goi-y-phim.an-tam { display: none !important; }
.bsave.xoa { flex: 0 0 auto; padding: 0 16px; border-color: #FCA5A5; color: var(--do); }
.goi-y-phim { font-size: 12px; color: var(--phu); margin-right: auto; display: none; }

/* ---------- File hóa đơn trong form (bước 3) ---------- */
.khu-file { margin-top: 4px; }

/* ---------- Form gọn (bước 8) ---------- */
.fc-dau { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.sh-dong { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--phu); }
.sh-dong b { color: var(--chu); font-variant-numeric: tabular-nums; }
.sh-dong[hidden] { display: none; }
.lnk { border: 0; background: none; padding: 0; min-height: 36px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--mh); cursor: pointer; }
.lnk:hover { color: var(--mh-dam); text-decoration: underline; }
.hint-o { font-size: 12.5px; color: var(--phu); margin-top: 5px; line-height: 1.4; }
.hint-o:empty { display: none; }
.hint-o b { color: var(--chu); }
.lien-ket-nho { font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Tên hàng: nhãn mã nằm trong ô, bên phải. */
.o-hang { position: relative; }
.o-hang .inp.co-ma { padding-right: 96px; }
.ma-chip { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--mh-nen); color: var(--mh-dam); font-size: 12px; font-weight: 700; pointer-events: none; }
.ma-chip[hidden] { display: none; }
.hang-moi-dong { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hang-moi-dong[hidden], .o-ma[hidden] { display: none; }
.o-ma { margin-top: 6px; }
/* Số lượng + ĐVT dính bên phải: [ 120 | cái ]. */
.unit { display: flex; height: 46px; border: 1px solid var(--vien); border-radius: 10px; overflow: hidden; background: #fff; }
.unit:focus-within { outline: 2px solid var(--mh); outline-offset: 1px; border-color: transparent; }
.unit .inp { height: 44px; border: 0; border-radius: 0; flex: 1; min-width: 0; }
.unit .inp:focus { outline: 0; }
.unit:has(.inp[aria-invalid="true"]) { border-color: var(--do); background: #FFF7F7; }
.unit-dvt { flex: none; width: 66px; border: 0; border-left: 1px solid var(--vien-nhat); background: var(--ke); padding: 0 6px; font: inherit; font-size: 16px; font-weight: 600; color: var(--chu-2); text-align: center; }
.unit-dvt:focus { outline: 0; background: #fff; }
.unit-dvt::placeholder { color: #94A3B8; font-weight: 500; }
[data-o-tien] .lnk { margin-top: 2px; }
/* Nút gạt "Đã trả đủ". */
.tra { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vien-nhat); background: #F8FAFC; }
.sw { flex: none; width: 52px; height: 30px; padding: 3px; border: 0; border-radius: 15px; background: #CBD5E1; display: flex; justify-content: flex-start; cursor: pointer; position: relative; }
.sw::before { content: ""; position: absolute; inset: -7px -4px; } /* vùng bấm ≥ 44px */
.sw i { width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); display: block; }
.sw[aria-checked="true"] { background: var(--mh); justify-content: flex-end; }
.sw:focus-visible { outline: 2px solid var(--mh); outline-offset: 2px; }
.tra-chu { flex: 1 1 160px; min-width: 0; }
.tra-t { font-size: 15px; font-weight: 700; }
.tra-phu { font-size: 12.5px; color: var(--phu); line-height: 1.35; }
.tra-them { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; flex-basis: 100%; }
.tra-them[hidden] { display: none; }
.tra-o { flex: 1 1 150px; max-width: 220px; }
.con-no { padding-bottom: 12px; font-size: 14px; white-space: nowrap; }
.con-no b { color: var(--no); background: var(--no-nen); padding: 3px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.con-no b.am { color: var(--do); background: var(--do-nen); }
.dz-phu { margin-left: auto; }
.dz-ghi-gon { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: -4px; }
.hd-dau[hidden] { display: none; }
.hd-dau[hidden] + .dz { margin-top: 0; }
.fc-dau .seg { flex: 1 1 100%; }
/* Điện thoại (chốt 14/10, điểm 2): 3 thẻ tổng thu thành một dòng nhỏ, bấm mở lại; số hiệu cạnh ô Ngày; nút Xuất Excel
   (đang mờ, có ở bản sau) ẩn để tiêu đề không xuống dòng → mở Nhập liệu thấy nút Lưu của form Mua hàng không cần cuộn. */
.kpi-gon { display: none; }
.o-sh-gon { display: none; }
.sh-gon { height: 46px; display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--phu); }
.sh-gon b { color: var(--chu); font-variant-numeric: tabular-nums; }
@container (max-width: 759px) {
  .kpi-gon { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 12px; background: #fff;
    box-shadow: 0 1px 3px rgba(30, 41, 59, .06); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
  .kpi-gon b { font-variant-numeric: tabular-nums; }
  .kpi-gon-cham { color: var(--phu); }
  .kpi-gon-mo { margin-left: auto; display: flex; color: var(--phu); transition: transform .15s; }
  .kpi-gon[aria-expanded="true"] .kpi-gon-mo { transform: rotate(180deg); }
  .kpis:not(.mo) { display: none; }
  .nut-excel-nl { display: none; }
  .hdr { flex-wrap: nowrap; align-items: center; }
}
@container (max-width: 759px) {
  .fc-dau .sh-dong { display: none; }
  .o-sh-gon:not([hidden]) { display: block; }
  .fc .fg { row-gap: 12px; }
  .fc { padding-top: 12px; padding-bottom: 12px; }
  /* Hàng hóa đơn gọn: Chụp ảnh · Chọn file · + Ghi chú trên một dòng (bỏ chú thích ngắn). */
  .dz:has(.dz-ghi-gon) { padding: 10px; gap: 8px; }
  .dz:has(.dz-ghi-gon) .up { padding: 0 9px; gap: 6px; }
  .dz .dz-ghi-gon { flex-basis: auto; margin: 0 0 0 auto; }
  .dz .dz-ghi-gon > span:first-child { display: none; }
}
/* Điện thoại: form Mua hàng (kiểu Tiền, gạt bật) vừa một màn 844px không cần cuộn tới nút Lưu (nghiệm thu 17). */
@container (max-width: 759px) {
  .fc .act { margin-top: 8px; padding-top: 8px; }
  .fc .tra { padding-top: 6px; padding-bottom: 6px; }
  .fc-dau + #form-nhap .fg, .fc .fg { margin-top: 6px; }
  [data-o-tien] .lnk { min-height: 32px; }
}
.row-no-chu { color: var(--no); font-weight: 600; }
/* Thẻ "Khoản lặp lại" (tab Chi phí). */
.lap { background: #FFF7FA; border: 1px solid #F9C6D7; border-radius: 14px; padding: 12px 14px; }
.lap-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 15px; }
.lr { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1px solid #FBE0EA; }
.lr-cb { flex: none; width: 24px; height: 24px; padding: 0; border: 2px solid #94A3B8; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.lr-cb::before { content: ""; position: absolute; inset: -10px; } /* vùng bấm 44px */
.lr-cb[aria-checked="true"] { background: var(--cp); border-color: var(--cp); }
.lr-giua { flex: 1; min-width: 0; }
.lr-ten { font-size: 14.5px; font-weight: 600; }
.lr-phu { font-size: 12px; color: var(--phu); overflow-wrap: anywhere; }
.lr-tien { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lap-them { border-top: 1px solid #FBE0EA; padding-top: 2px; }
.lap-chan { display: flex; justify-content: flex-end; margin-top: 6px; }
.nut-lap { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--cp); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.nut-lap:disabled { opacity: .5; cursor: not-allowed; }
.hd-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hd-dem { font-size: 12px; color: var(--phu); font-weight: 600; }
.dz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin-top: 8px; border: 1.5px dashed #94A3B8; border-radius: 12px; background: #F8FAFC; }
.dzt { font-size: 13px; color: var(--phu); display: none; }
.dz-ghi { flex-basis: 100%; font-size: 12px; color: var(--phu); line-height: 1.5; }
.hd-hop { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--ke); font-size: 13px; color: var(--chu-2); line-height: 1.5; }
.hd-xem-thu { display: flex; gap: 12px; align-items: flex-start; border: 1.5px dashed var(--vien); background: #F8FAFC; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: #475569; }
.hd-xem-thu > svg { flex: none; margin-top: 1px; color: var(--phu); }
.hdb-mau { height: 22px; padding: 0 7px; font-size: 11px; cursor: default; vertical-align: 1px; gap: 3px; }
.hdb-mau:hover { background: #fff; }
.hd-day { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--vien-nhat); }
.hd-day > svg { flex: none; margin-top: 1px; color: #475569; }
.hd-day a { font-weight: 700; }
.hd-gan-day { margin-top: 6px; font-size: 12px; color: #92400E; font-weight: 600; }
.flist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.ft { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border: 1px solid var(--vien-nhat); border-radius: 12px; min-width: 0; background: #fff; }
.ft-loi { border-color: #FCA5A5; background: #FEF2F2; }
.ft-xoa { background: #F8FAFC; }
.thumb { width: 48px; height: 56px; flex: none; border-radius: 8px; border: 1px solid var(--vien-nhat); background: #F8FAFC; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; color: var(--phu); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-loi .thumb { color: var(--do); cursor: default; }
.ft-nen .thumb, .ft-cho .thumb, .ft-tai .thumb { opacity: .55; cursor: default; }
.ft-xoa .thumb { opacity: .55; }
.ft-giua { flex: 1; min-width: 0; }
.fname { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-xoa .fname { text-decoration: line-through; color: var(--phu); }
.fsub { font-size: 12px; margin-top: 2px; line-height: 1.4; color: var(--phu); overflow-wrap: anywhere; }
.ft-nen .fsub, .ft-cho .fsub, .ft-tai .fsub { color: #1D4ED8; }
.ft-loi .fsub, .ft-xoa .fsub { color: var(--do); }
.bar { height: 6px; border-radius: 3px; background: #DBEAFE; margin-top: 6px; overflow: hidden; }
.bar > div { height: 6px; background: var(--mh); transition: width .2s; }
.mini { position: relative; height: 32px; margin-top: 6px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--vien); background: #fff; font-size: 12px; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.mini::after, .ft-bo::after { content: ""; position: absolute; inset: -6px -4px; } /* vùng bấm ≥ 44px */
.ft-bo { position: relative; width: 36px; height: 36px; }
.nhan-pdf { font-size: 11px; font-weight: 700; color: #fff; background: var(--do); border-radius: 4px; padding: 3px 5px; }
.nhan-pdf.nho { font-size: 10px; padding: 2px 4px; }
.keo-tha { position: absolute; inset: 0; z-index: 6; border: 2px dashed var(--mh); border-radius: 16px; background: rgba(239, 246, 255, .95); color: var(--mh-dam); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; pointer-events: none; }
.keo-tha-1 { font-size: 20px; font-weight: 700; }
.keo-tha-2 { font-size: 14px; color: var(--chu-2); }
.hdb { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--vien); background: #fff; font-size: 13px; font-weight: 600; color: var(--mh-dam); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.hdb:hover { background: #EFF6FF; }
.hdb-the { height: 44px; margin-right: 12px; flex: none; }
.td-hd { padding: 4px 12px; }

/* ---------- Dải nhắc dung lượng + khối dung lượng ở menu trái ---------- */
.dai-dl { align-items: flex-start; flex-wrap: nowrap; }
.dai-dl > svg { margin-top: 1px; }
.dai-dl .dai-chu { flex: 1 1 auto; min-width: 0; }
.dai-dl-gan { background: #FEF3C7; color: #92400E; }
.dai-dl-day { background: #FEE2E2; color: #991B1B; }
.dai-dl .dai-dong { color: inherit; width: 36px; height: 36px; flex: none; }
.dai-dl-thanh { height: 8px; border-radius: 4px; background: rgba(146, 64, 14, .15); overflow: hidden; margin-top: 8px; max-width: 360px; }
.dai-dl-thanh > div { height: 8px; }
.dai-dl-don { margin-top: 4px; }
.dai-dl-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: inherit; }
.dai-dl-link:hover { color: inherit; }
.tk-menu-dl:empty { display: none; }
.tk-menu-dl { margin-top: 6px; }
.tk-menu-dl-chu { font-size: 12px; color: var(--phu); text-decoration: none; }
.tk-menu-dl-chu b { color: var(--chu-2); }
.tk-menu-dl-chu:hover { color: var(--chu); }
.tk-menu-dl-thanh { height: 6px; border-radius: 3px; background: var(--vien-nhat); overflow: hidden; margin-top: 4px; }
.tk-menu-dl-thanh > div { height: 6px; }

/* ---------- Trình xem hóa đơn (lớp phủ, ngoài khung .app nên dùng @media) ---------- */
.vw { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .94); display: flex; flex-direction: column; color: #fff; outline: none; font-family: inherit; }
.vtop { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); padding-top: max(10px, env(safe-area-inset-top)); }
.vtop-chu { flex: 1; min-width: 0; }
.vt1 { font-size: 15px; font-weight: 700; }
.vt2 { font-size: 12px; color: #CBD5E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb { height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); background: transparent; font-size: 13px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; flex: none; }
.vb:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vb:focus-visible, .vnav:focus-visible, .vth:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }
.vb-do { border-color: rgba(252, 165, 165, .6); color: #FECACA; }
.vb-do:hover { color: #FECACA; }
.vb-vuong { padding: 0; width: 44px; }
.v-rong { display: none; }
.vstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 8px; }
.vkhung { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y pinch-zoom; }
.v-anh { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.vkhung.phong { display: block; overflow: auto; touch-action: auto; }
.vkhung.phong .v-anh { max-width: none; max-height: none; cursor: grab; display: block; margin: auto; }
.vnav { display: none; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.vnav:hover { background: rgba(255, 255, 255, .24); }
.v-pdf { width: min(340px, 100%); background: #fff; color: var(--chu); border-radius: 16px; padding: 28px 22px; text-align: center; }
.v-pdf-icon { width: 64px; height: 76px; margin: 0 auto 14px; border-radius: 8px; background: var(--do-nen); display: flex; align-items: center; justify-content: center; }
.v-pdf-icon .nhan-pdf { font-size: 14px; padding: 4px 7px; }
.v-pdf-ten { font-size: 15px; font-weight: 700; word-break: break-all; }
.v-pdf-co { font-size: 13px; color: var(--phu); margin-top: 4px; }
.v-pdf-mo { margin-top: 16px; width: 100%; text-decoration: none; }
.v-pdf-mo:hover { color: #fff; }
.v-pdf-ghi { font-size: 12px; color: var(--phu); margin-top: 10px; }
.vghi { text-align: center; font-size: 12px; color: #CBD5E1; padding: 0 12px; }
.vghi b { color: #fff; }
.vthumbs { display: flex; gap: 8px; justify-content: center; padding: 10px 12px 14px; overflow-x: auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.vth { width: 52px; height: 60px; border-radius: 8px; background: #fff; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; border: 3px solid transparent; overflow: hidden; }
.vth img { width: 100%; height: 100%; object-fit: cover; }
.vth.dang-xem { border-color: #60A5FA; }
@media (min-width: 600px) {
  .vnav { display: inline-flex; }
  .v-hep { display: none; }
}
@media (min-width: 900px) {
  .v-rong { display: inline; }
}

/* ---------- Cài đặt › Lưu trữ ---------- */
.lt-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lt-the { padding: 18px 16px; }
.lt-the h2, .lt-nam h2 { margin: 0; font-size: 16px; font-weight: 700; }
.lt-so { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.lt-so-lon { font-size: 30px; font-weight: 700; }
.lt-so-phu { font-size: 15px; color: var(--phu); }
.lt-meter { height: 14px; border-radius: 7px; background: var(--vien-nhat); overflow: hidden; display: flex; }
.lt-ghi { font-size: 13px; color: var(--phu); margin-top: 10px; line-height: 1.5; }
.lt-o4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.lt-o { padding: 12px; border-radius: 12px; background: #F8FAFC; }
.lt-o-nhan { font-size: 12px; color: var(--phu); }
.lt-o-so { font-size: 18px; font-weight: 700; }
.lt-chu { font-size: 14px; line-height: 1.6; color: var(--chu-2); }
.lt-chu h2 { margin-bottom: 10px; color: var(--chu); }
.lt-chu p { margin: 0 0 8px; }
.lt-chu p:last-child { margin: 0; }
.lt-xam { padding: 10px 12px; border-radius: 10px; background: var(--ke); }
.lt-nam { overflow: hidden; }
.lt-nam h2 { padding: 16px; }
.lt-bang { display: none; overflow-x: auto; }
.lt-bang table { width: 100%; border-collapse: collapse; }
.lt-bang .r { text-align: right; }
.lt-bang .td { padding: 12px; }
.lt-tag { font-weight: 500; color: var(--phu); }
.lt-thanh { border-radius: 4px; background: var(--vien-nhat); overflow: hidden; }
.lt-thanh > div { height: 100%; background: var(--mh); }
.lt-dong-nam { padding: 12px 16px; border-top: 1px solid var(--ke); }
.lt-dong-1 { display: flex; justify-content: space-between; font-size: 15px; }
.lt-dong-2 { font-size: 12px; color: var(--phu); margin: 2px 0 6px; }
/* Bước 5: gói lưu trữ năm, xóa năm (mockup luu-tru-goi, xoa-nam) */
.lt-ghi-don { color: var(--chu-2); padding: 10px 12px; border-radius: 10px; background: #FEF3C7; }
.lt-cay { font-size: 13px; line-height: 1.75; background: #F8FAFC; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap; }
.lt-xam-chu { color: var(--phu); }
.lt-goi { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--ke); color: #475569; }
.lt-goi-xong { background: #E0F5F2; color: #0B6B60; }
.lt-goi-cu { background: #FEF3C7; color: #92400E; }
.lt-goi-tao { background: #DBEAFE; color: var(--mh-dam); }
.lt-tt { display: inline-flex; gap: 8px; }
.lt-nut { white-space: nowrap; }
.lt-nut:disabled, .bd.lt-nut:disabled { background: #F8FAFC; border-color: var(--vien-nhat); color: #94A3B8; cursor: not-allowed; }
.lt-tt-the { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.lt-tt-the.hai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lt-tt-the .lt-nut { padding: 0 8px; }
.lt-goi-y { font-size: 12px; color: var(--phu); margin-top: 6px; }
.lt-dong-nam > div + div { margin-top: 4px; }
.lt-chu-thich { padding: 10px 16px 16px; font-size: 12.5px; color: var(--phu); border-top: 1px solid var(--ke); line-height: 1.5; }
.lt-dang-tao { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lt-dang-tao-1 { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.lt-dang-tao-1 b { color: var(--mh-dam); }
.lt-dang-tao-1 span { color: var(--chu-2); font-variant-numeric: tabular-nums; }
.lt-dang-tao-thanh { height: 8px; border-radius: 4px; background: #DBEAFE; overflow: hidden; }
.lt-dang-tao-thanh > div { height: 8px; background: var(--mh); transition: width .2s; }
.lt-dang-tao-2 { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #475569; }
.lt-xoa { width: min(540px, calc(100vw - 32px)); }
.lt-xoa-than { gap: 14px; padding: 22px 24px 20px; }
.lt-xoa-than h2 { font-size: 19px; }
.lt-xoa-dong { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--ke); font-variant-numeric: tabular-nums; }
.lt-xoa-giu { font-size: 12.5px; color: var(--phu); padding-top: 8px; }
.lt-xoa-da-tai { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #E0F5F2; font-size: 13.5px; color: #0B6B60; line-height: 1.5; }
.lt-xoa-da-tai svg { flex: none; margin-top: 1px; }
.lt-xoa-canh-bao { padding: 12px 14px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; font-size: 13.5px; line-height: 1.6; color: #7F1D1D; }
.lt-xoa-go { display: flex; flex-direction: column; gap: 6px; }
.lt-xoa-go label { font-size: 14px; font-weight: 600; }
.lt-xoa-go .inp { height: 48px; font-weight: 600; letter-spacing: 1px; }
.lt-xoa-go .inp.lt-xoa-khop { border-color: #DC2626; }
.lt-xoa .bd-dac { background: #DC2626; border-color: #DC2626; }
.lt-xoa .bd-dac:disabled { background: var(--ke); border-color: var(--vien-nhat); color: #94A3B8; cursor: not-allowed; }
.lt-xoa-xong { color: #0B6B60; }
.lt-xoa .hang-nut { flex-wrap: wrap; }

/* ---------- Combobox / gợi ý ---------- */
.cb { position: relative; }
.cb .inp { padding-right: 84px; }
.cb .ib.cb-xoa { position: absolute; right: 42px; top: 3px; color: var(--phu); }
.cb .ib.cb-mo { position: absolute; right: 3px; top: 3px; color: var(--phu); }
.tt-ncc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--chu-2); }
.tt-ncc span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.xo { position: absolute; left: 0; right: 0; z-index: 15; background: #fff; border: 1px solid var(--vien-nhat); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(30, 41, 59, .18); }
.xo-ds { max-height: 260px; overflow-y: auto; }
.xo-dau { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 4px 12px; font-size: 11px; font-weight: 600; color: var(--phu); }
.sug { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-top: 1px solid var(--ke); background: #fff; font-size: 14px; color: var(--chu); text-align: left; cursor: pointer; }
.sug:hover, .sug[aria-selected="true"], .sug.dang-chon { background: #EFF5FF; }
.sug .sub-line { display: block; font-size: 12px; color: var(--phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-them { color: var(--mh); font-weight: 700; justify-content: flex-start; border-top: 1px solid var(--vien-nhat); }
.sug-trong { color: var(--phu); justify-content: flex-start; }
.xo-rong { padding: 12px; font-size: 13px; color: var(--phu); }
.ma-nhan { flex: none; min-width: 52px; padding: 3px 6px; border-radius: 6px; background: var(--mh-nen); color: var(--mh-dam); font-size: 12px; font-weight: 700; text-align: center; }
.ma-nhan.khong-ma { background: var(--ke); color: var(--phu); font-weight: 600; }
.them-ncc { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hang-moi { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--chu-2); cursor: pointer; min-height: 32px; }
.hang-moi input { width: 18px; height: 18px; accent-color: var(--mh); }

/* ---------- Danh sách ---------- */
.ds-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; }
.ds-dau h2 { margin: 0; font-size: 16px; font-weight: 700; }
.o-tim { flex: 1 1 200px; max-width: 280px; height: 40px; font-size: 16px; }
.tbl { display: none; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; min-width: 720px; }
.th { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--phu); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--vien-nhat); background: #F8FAFC; }
.td { padding: 11px 12px; font-size: 14px; border-bottom: 1px solid var(--ke); white-space: nowrap; }
.td-wrap { white-space: normal; min-width: 180px; }
.td-tt { text-align: right; padding: 4px 8px; }
tr.dang-sua, .row-boc.dang-sua { background: var(--nhan-nen) !important; }
tr.an-muc td { color: #94A3B8; }
.rows { display: block; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent; color: var(--chu); text-align: left; cursor: pointer; min-height: 60px; flex: 1; min-width: 0; }
.row-boc { display: flex; align-items: center; border-top: 1px solid var(--ke); background: #fff; }
.row-giua { flex: 1; min-width: 0; }
.row-1 { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-2 { display: block; font-size: 12px; color: var(--phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-phai { text-align: right; flex: none; }
.row-tien { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row-no { display: block; font-size: 11px; font-weight: 600; color: var(--no); }
.ds-chan { padding: 10px 16px 14px; font-size: 12px; color: var(--phu); border-top: 1px solid var(--ke); }
.ds-trong { padding: 28px 16px; text-align: center; color: var(--phu); font-size: 14px; border-top: 1px solid var(--ke); }
.wide { display: none; }

/* ---------- Cài đặt ---------- */
.sub { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.st { cursor: pointer; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--vien); background: #fff; font-size: 13px; font-weight: 600; color: var(--chu-2); white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.st[aria-current="page"] { background: var(--mh); border-color: var(--mh); color: #fff; }
.st.mo { color: #94A3B8; }
.lay { display: grid; gap: 14px; align-items: start; }
.cong-cu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; }
.loc-an { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chu-2); min-height: 44px; cursor: pointer; }
.loc-an input { width: 18px; height: 18px; accent-color: var(--mh); }
.av { width: 38px; height: 38px; border-radius: 19px; flex: none; background: var(--mh-nen); color: var(--mh-dam); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.the-an { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--ke); color: var(--phu); font-size: 11px; font-weight: 600; vertical-align: middle; }
.form-muc { padding: 18px; display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--mh); scroll-margin-top: 12px; }
.form-muc h2 { margin: 0; font-size: 16px; font-weight: 700; }
.ghi-chu-xam { padding: 10px 12px; border-radius: 10px; background: var(--ke); font-size: 12px; color: var(--chu-2); line-height: 1.5; }
.hang-nut { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.the-noi-dung { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sap-co { padding: 40px 20px; text-align: center; color: var(--phu); }
.sap-co h2 { color: var(--chu); margin: 12px 0 6px; font-size: 18px; }

/* ---------- Tổng quan (bước 4) ---------- */
.tq-chon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tq-nam { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 4px 0 12px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; font-size: 13px; color: var(--phu); }
.tq-nam select { height: 40px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--chu); cursor: pointer; padding-right: 4px; }
.tq-pad { padding: 16px; }
.tq-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 2px -4px; flex-wrap: wrap; }
.tq-sec h2 { margin: 0; font-size: 17px; font-weight: 700; }
.tq-sec span { font-size: 12px; color: var(--phu); }
.tq-g3, .tq-g4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tq-lab { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.tq-lab-phu { text-transform: none; font-weight: 500; color: var(--phu); }
.tq-big { font-size: 26px; font-weight: 700; margin-top: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tq-phu { font-size: 13px; color: var(--phu); margin-top: 4px; }
.tq-am { color: var(--do) !important; }
.tq-xanh { color: var(--dt) !important; }
.tq-xam { color: var(--phu); }
.tq-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--ke); margin-top: 12px; }
.tq-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--chu-2); }
.tq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.tq-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--ke); color: #475569; }
.tq-chip-duoi { background: #E0F5F2; color: #0B6B60; }
.tq-chip-gan { background: #FEF3C7; color: #92400E; }
.tq-chip-vuot { background: #FEE2E2; color: #991B1B; }
.tq-chip-q-dang { background: var(--mh-nen); color: var(--mh-dam); }
.tq-chip-q-con { background: #FEF3C7; color: #92400E; }
.tq-ql { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.tq-ql-ke { border-top: 1px solid var(--ke); margin-top: 4px; padding-top: 7px; }
.tq-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }

.tq-nguong { border: 1px solid var(--vien-nhat); }
.tq-nguong.tq-gan { border-color: #FCD34D; }
.tq-nguong.tq-vuot { border-color: #FCA5A5; }
.tq-ng { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tq-ng-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tq-ng-dau h2 { margin: 0; font-size: 15px; font-weight: 700; }
.tq-ng-so { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.tq-ng-lon { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dt); }
.tq-gan .tq-ng-lon { color: #B45309; }
.tq-vuot .tq-ng-lon { color: var(--do); }
.tq-ng-phu { font-size: 14px; color: var(--phu); font-variant-numeric: tabular-nums; }
.tq-meter { position: relative; height: 14px; border-radius: 7px; background: var(--vien-nhat); margin-top: 12px; }
.tq-meter-day { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--dt); }
.tq-gan .tq-meter-day { background: #D97706; }
.tq-vuot .tq-meter-day { background: #DC2626; }
.tq-meter-moc { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #94A3B8; }
.tq-meter-truc { position: relative; display: flex; justify-content: space-between; font-size: 11px; color: var(--phu); margin-top: 6px; height: 14px; }
.tq-meter-truc span[style] { position: absolute; transform: translateX(-50%); }
.tq-ng-cau { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--chu-2); }
.tq-thue-nam { border-radius: 14px; background: #F8FAFC; padding: 14px 16px; align-self: start; }

.tq-bd-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.tq-bd-dau h2 { margin: 0; font-size: 16px; font-weight: 700; }
.tq-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--vien-nhat); border-radius: 12px; max-width: 100%; }
.tq-tab { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.tq-tab[aria-selected="true"] { background: #fff; color: var(--chu); box-shadow: 0 1px 2px rgba(30, 41, 59, .08); }
.bd-cuon { overflow-x: auto; margin: 4px -4px 0; overscroll-behavior-x: contain; }
.bd-khung { min-width: 600px; padding: 4px 4px 0 50px; }
.bd-don-vi { text-align: right; font-size: 11px; color: var(--phu); margin-bottom: 6px; }
.bd-vung { position: relative; height: 250px; }
.bd-nut-hang { position: absolute; inset: 0; display: flex; }
.bd-nut { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 8px; background: transparent; padding: 0; cursor: pointer; }
.bd-nut:hover { background: #F8FAFC; }
.bd-nut[aria-pressed="true"] { background: #EFF6FF; }
.bd-nut:focus-visible { outline: 2px solid var(--mh); outline-offset: -2px; }
.bd-hinh { position: absolute; inset: 0; pointer-events: none; }
.bd-vach { position: absolute; left: 0; right: 0; border-top: 1px solid var(--vien-nhat); }
.bd-truc { position: absolute; left: -50px; width: 42px; transform: translateY(-50%); text-align: right; font-size: 11px; color: var(--phu); font-variant-numeric: tabular-nums; }
.bd-cot-hang { position: absolute; inset: 0; display: flex; }
.bd-cot-o { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.bd-cot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 22px; }
.bd-so { font-size: 11px; font-weight: 700; color: var(--chu-2); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-than { display: block; width: 18px; border-radius: 4px 4px 0 0; flex: none; }
.bd-chong { display: flex; flex-direction: column; overflow: hidden; }
.bd-chong > span { display: block; flex: none; }
.bd-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-nguong { position: absolute; left: 0; right: 0; border-top: 2px dashed #D97706; }
.bd-nguong span { position: absolute; right: 4px; top: -22px; font-size: 12px; font-weight: 700; color: #B45309; background: #fff; padding: 0 4px; border-radius: 4px; }
.bd-diem { position: absolute; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 5px; background: #fff; border: 2.5px solid; }
.bd-nhan { position: absolute; font-size: 11px; font-weight: 700; white-space: nowrap; background: rgba(255, 255, 255, .9); padding: 0 3px; border-radius: 4px; }
.bd-thang { display: flex; margin-top: 6px; }
.bd-thang span { flex: 1; text-align: center; font-size: 12px; font-weight: 500; color: var(--chu-2); }
.bd-thang span.trong { color: #94A3B8; }
.bd-thang span.dang { font-weight: 700; color: var(--mh-dam); }
.bd-trong { margin-top: 12px; padding: 48px 16px; border-radius: 12px; background: #F8FAFC; text-align: center; font-size: 14px; color: var(--phu); }
.tq-ct { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #F8FAFC; font-size: 13px; color: var(--chu-2); font-variant-numeric: tabular-nums; }
.tq-ct-goi-y { color: var(--phu); }

.tq-qc { border-radius: 14px; padding: 14px; border: 1px solid var(--vien-nhat); background: #fff; min-width: 0; container-type: inline-size; }
.tq-qc-con { background: #FFFBEB; border-color: #FCD34D; }
.tq-qc-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.tq-qc-dau > div { white-space: nowrap; }
.tq-qc-dau b { font-size: 15px; }
.tq-qc-dau span:not(.tq-chip) { font-size: 12px; color: var(--phu); }
.tq-qc-so { font-size: 24px; font-weight: 700; margin: 10px 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 200px) { .tq-qc-so { font-size: 19px; } .tq-qc .tq-ql { font-size: 12px; } }

.tq-bang-t { margin: 0; padding: 16px; font-size: 16px; font-weight: 700; }
.tq-bang-cuon { overflow-x: auto; }
.tq-bang { width: 100%; border-collapse: collapse; min-width: 860px; }
.tq-bang .th { text-align: right; }
.tq-bang .td { text-align: right; font-variant-numeric: tabular-nums; padding: 10px 12px; }
.tq-bang .l { text-align: left; }
.tq-bang td.l { padding: 4px 8px; }
.tq-bang tr.dang { background: #EFF6FF; }
.tq-nut-thang { min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 600; color: var(--chu); cursor: pointer; }
.tq-nut-thang:hover { background: var(--ke); }
tr.dang .tq-nut-thang { font-weight: 700; color: var(--mh-dam); }
.tq-dt { color: var(--dt); font-weight: 600; }
.tq-thue-o { color: #B45309; }
.tq-tc { font-weight: 600; }
.tq-tong { background: #F8FAFC; }
.tq-tong .td { font-weight: 700; }
.tq-bang .tq-tong td.l { padding: 10px 16px; }
.tq-chu-thich { margin: 0 2px; font-size: 13px; line-height: 1.6; color: var(--phu); }

/* ---------- Cài đặt › Thuế suất, Thông tin hộ (bước 4) ---------- */
.cd-luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.cd-cot { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd-the { padding: 18px 16px; }
.cd-the h2 { margin: 0; font-size: 17px; font-weight: 700; }
.cd-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.cd-nam { font-size: 13px; color: var(--phu); display: inline-flex; align-items: center; gap: 6px; }
.cd-nam select { height: 40px; border: 1px solid var(--vien); border-radius: 10px; padding: 0 8px; font: inherit; font-size: 16px; font-weight: 700; color: var(--chu); background: #fff; }
.cd-nguon { margin-top: 8px; font-size: 12px; color: var(--phu); }
.cd-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cd-pre { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cd-pb { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--vien-nhat); background: #fff; font-size: 14px; text-align: left; color: var(--chu); cursor: pointer; }
.cd-pb[aria-pressed="true"] { border: 2px solid var(--mh); background: #EFF6FF; padding: 7px 11px; }
.cd-pb[aria-pressed="true"] .cd-rate { color: var(--mh-dam); }
.cd-pb:disabled { cursor: default; }
.cd-rate { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--chu-2); }
.cd-don-vi { position: relative; }
.cd-don-vi .inp { padding-right: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.cd-don-vi > span { position: absolute; right: 12px; top: 13px; font-size: 15px; color: var(--phu); pointer-events: none; }
.cd-nut { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ke); }
.cd-nut .bs:first-child { margin-right: auto; }
.cd-ol { margin: 10px 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--chu-2); }
.cd-vd { border-radius: 12px; background: #F8FAFC; padding: 10px 14px; }
.cd-vd-t { font-size: 12px; font-weight: 600; color: var(--phu); margin-bottom: 4px; }
.cd-ex { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dotted var(--vien); font-variant-numeric: tabular-nums; }
.cd-ex:last-child { border-bottom: 0; }
.cd-vang { background: #FFFBEB; box-shadow: none; border: 1px solid #FCD34D; font-size: 13px; line-height: 1.6; color: #78350F; }
.cd-chu { font-size: 14px; line-height: 1.6; color: var(--chu-2); }
.cd-chu h2 { margin: 0 0 8px; font-size: 16px; color: var(--chu); }
.cd-chu p { margin: 0 0 8px; }
.cd-chu p:last-child { margin: 0; }
.cd-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.chi-doc .cd-form .inp, .chi-doc .cd-the .inp { background: #F8FAFC; }

/* ---------- Hộp thoại, thông báo ---------- */
.hop-thoai { border: 0; border-radius: 16px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 48px rgba(30, 41, 59, .25); color: var(--chu); }
.hop-thoai::backdrop { background: rgba(15, 23, 42, .45); }
.hop-thoai-than { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.hop-thoai h2 { margin: 0; font-size: 17px; }
.hop-thoai p { margin: 0; font-size: 14px; color: var(--chu-2); line-height: 1.5; }
.toast-vung { position: fixed; left: 0; right: 0; bottom: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 50; padding: 0 16px; }
.toast { pointer-events: auto; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: var(--chu); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 24px rgba(30, 41, 59, .25); animation: toast-vao .18s ease-out; }
.toast.loi { background: var(--do); }
@keyframes toast-vao { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Sổ theo tháng (bước 5, mockup so-thang / xuat-excel) ---------- */
.so-nut { display: flex; gap: 8px; }
.so-chon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.so-thang-nhan { min-width: 116px; font-size: 15px; }
.so-ca-nam { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--vien); background: #fff; font-size: 14px; font-weight: 600; color: var(--chu-2); cursor: pointer; }
.so-ca-nam[aria-pressed="true"] { background: var(--mh); border-color: var(--mh); color: #fff; }
.so-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--vien-nhat); border-radius: 12px; padding: 4px; }
.so-tab { min-height: 48px; border: 0; border-radius: 9px; background: none; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; min-width: 0; }
.so-tab[aria-selected="true"] { background: #fff; color: var(--chu); box-shadow: 0 1px 3px rgba(30, 41, 59, .12); }
.so-tab small { font-size: 11px; font-weight: 500; color: var(--phu); white-space: nowrap; }
.so-tab-ten { display: flex; align-items: center; gap: 6px; }
.so-cham { width: 8px; height: 8px; border-radius: 4px; display: inline-block; flex: none; }
.so-tom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.so-o { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(30, 41, 59, .06); min-width: 0; }
.so-o-k { font-size: 12px; color: var(--phu); }
.so-o-v { font-size: 18px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.so-o-chu { font-size: 15px; }
.so-dang-tai { opacity: .5; transition: opacity .15s; }
/* Dạng thẻ (< 760px) */
.so-the { display: flex; flex-direction: column; gap: 8px; }
.so-it { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(30, 41, 59, .06); }
.so-it.so-trong { text-align: center; color: var(--phu); font-size: 14px; padding: 24px 14px; }
.so-it-dau { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--phu); }
.so-it-dau b { color: var(--chu); }
.so-it-giua { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.so-it-dg { font-size: 15px; font-weight: 600; margin: 4px 0 2px; min-width: 0; overflow-wrap: anywhere; }
.so-it-tien { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-it-phu { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--phu); align-items: center; margin-top: 2px; }
.so-nhan { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 600; background: var(--ke); color: #475569; }
.so-nhan-no { background: #FEF3C7; color: #92400E; }
button.so-nhan { border: 0; cursor: pointer; min-height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; text-decoration: none; }
.so-the-thang { font-size: 13px; font-weight: 700; color: #1E3A8A; padding: 8px 2px 0; }
.so-the-cong { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding: 2px 4px 6px; color: var(--chu-2); font-variant-numeric: tabular-nums; }
.so-chan { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(30, 41, 59, .06); font-size: 14px; }
.so-chan-dong { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.so-chan-dong.tg, .so-chan-dong.th2 { font-weight: 700; }
.so-chan-dong.th2 { border-top: 1px solid var(--vien-nhat); padding-top: 8px; }
.so-chan-dong.no span:last-child { color: var(--no); font-weight: 700; }
.so-chan-ghi { font-size: 12px; color: var(--phu); margin-top: 6px; line-height: 1.5; }
/* Dạng sổ giấy (≥ 760px, bản In) */
.so-giay-boc { display: none; }
.so-giay { background: #fff; margin: 0 auto; border: 1px solid var(--vien); box-shadow: 0 6px 24px rgba(30, 41, 59, .10); padding: 36px 40px 40px; font-size: 13px; color: #0F172A; }
.so-giay.doc { max-width: 860px; min-width: 700px; }
.so-giay.ngang { max-width: 1180px; min-width: 1060px; }
.so-dau { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.so-dau-trai div { line-height: 1.7; }
.so-mau { border: 1px solid #94A3B8; padding: 6px 10px; text-align: center; font-size: 11.5px; line-height: 1.45; }
.so-tieu-de { text-align: center; font-size: 19px; font-weight: 700; margin: 20px 0 6px; letter-spacing: .2px; }
.so-ky-ke-khai { text-align: center; font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.so-bang { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.so-bang th { background: #1F3864; color: #fff; font-size: 12px; font-weight: 700; padding: 7px 6px; border: 1px solid #64748B; text-align: center; line-height: 1.3; }
.so-bang .so-ky-hieu th { font-style: italic; font-weight: 600; font-size: 11px; padding: 3px 6px; }
.so-bang td { border: 1px solid var(--vien); padding: 6px 7px; vertical-align: top; overflow-wrap: anywhere; }
.so-bang td.c { text-align: center; }
.so-bang td.r { text-align: right; white-space: nowrap; overflow-wrap: normal; }
.so-bang td.nw { white-space: nowrap; overflow-wrap: normal; }
.so-bang tr.cg td { background: #F8FAFC; font-weight: 700; }
.so-bang tr.nh td { background: #EFF6FF; font-weight: 700; color: #1E3A8A; }
.so-bang tr.tg td { font-weight: 700; background: #F1F5F9; }
.so-bang tr.th2 td { font-weight: 700; background: #FEF3C7; }
.so-bang td.so-trong { text-align: center; color: var(--phu); font-style: italic; padding: 14px; }
.so-bang-mh { font-size: 12px; }
.so-no { color: var(--no); font-weight: 700; }
.so-hd { border: 0; background: none; padding: 0; color: var(--mh); font-size: 11.5px; white-space: nowrap; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.so-hd:hover { color: var(--mh-dam); }
.so-bang .so-hd { min-height: 0; }
.so-ghi-chu { font-size: 11.5px; color: #475569; margin-top: 8px; font-style: italic; }
.so-khoi-ky { display: flex; justify-content: flex-end; margin-top: 26px; break-inside: avoid; page-break-inside: avoid; }
.so-khoi-ky div { text-align: center; line-height: 1.6; width: 300px; }
.so-khoi-ky i { font-size: 12px; }
/* Hộp Xuất Excel: giữa màn ≥ 760px, tấm trượt từ dưới trên điện thoại */
.so-hop { width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.so-hop-than { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.so-hop-dau { display: flex; justify-content: space-between; align-items: center; }
.so-hop-dau h2 { margin: 0; font-size: 19px; }
.so-hop-nhom { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.so-hop-nhom legend { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 8px; padding: 0; }
.so-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--vien); border-radius: 12px; background: #fff; cursor: pointer; flex-wrap: wrap; }
.so-opt.chon { border-color: var(--mh); background: #EFF6FF; }
.so-opt input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--mh); }
.so-opt-chu { flex: 1; min-width: 150px; }
.so-opt-chu b { display: block; font-size: 15px; font-weight: 600; }
.so-opt-chu small { display: block; font-size: 12px; color: var(--phu); }
.so-opt-kho { font-size: 12px; color: var(--phu); }
.so-hop-sel { height: 40px; font: inherit; font-size: 16px; font-weight: 600; color: var(--mh-dam); border: 1px solid #BFDBFE; border-radius: 8px; padding: 0 8px; background: #fff; }
.so-hop-nam { font-size: 14px; font-weight: 600; color: var(--mh-dam); border: 1px solid #BFDBFE; border-radius: 8px; padding: 8px 10px; }
.so-hop-xam { background: #F8FAFC; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6; color: var(--chu-2); }
.so-hop-ten { margin-top: 8px; font-size: 12px; color: var(--phu); overflow-wrap: anywhere; }
.so-hop-ten b { color: var(--chu); font-weight: 600; }
.so-hop-loi { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--do-nen); color: var(--do); font-size: 14px; }
.so-hop .hang-nut .bp:disabled { background: var(--vien-nhat); color: #94A3B8; cursor: not-allowed; }
@media (max-width: 759px) {
  .so-hop { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 92dvh; }
  .so-hop-than { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
}
/* In (window.print): chỉ tờ sổ đang xem; @page đặt theo sổ trong <style id="so-trang-in"> */
@media print {
  body.in-so { background: #fff; }
  body.in-so .side, body.in-so .bnav, body.in-so .dai-vung, body.in-so .toast-vung, body.in-so .so-an-khi-in { display: none !important; }
  body.in-so .app, body.in-so .shell { display: block; min-height: 0; }
  body.in-so .main { padding: 0 !important; display: block; }
  body.in-so .so-giay-boc { display: block !important; overflow: visible !important; padding: 0 !important; }
  body.in-so .so-giay { border: 0; box-shadow: none; padding: 0; max-width: none; min-width: 0; font-size: 10pt; }
  body.in-so .so-bang thead { display: table-header-group; }
  body.in-so .so-bang tr { break-inside: avoid; page-break-inside: avoid; }
  body.in-so .so-bang th, body.in-so .so-bang tr td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.in-so .so-hd { display: none !important; }
}

/* ---------- Responsive (theo độ rộng khung app) ---------- */
@container (min-width: 600px) {
  .main { padding: 20px 24px 28px; }
  .lt-o4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kv, .kv.dai, .kv.rat-dai { font-size: 22px; }
  .kpi { padding: 14px 16px; }
  .tq-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq-pad { padding: 18px 20px; }
  .cd-pre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-the { padding: 22px 24px; }
  .so-tom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
  .fg { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .w1 { grid-column: span 1; } .w2 { grid-column: span 2; } .w3 { grid-column: span 3; } .w4 { grid-column: span 4; }
  .w5 { grid-column: span 5; } .w6 { grid-column: span 6; } .w8 { grid-column: span 8; } .w12 { grid-column: span 12; }
  .chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzt { display: inline; }
  .act .bsave { flex: 0 0 auto; padding: 0 22px; }
  .seg { display: inline-flex; }
  .fc-dau .seg { flex: 0 0 auto; }
  .tab { flex: 0 0 auto; padding: 0 20px; }
  .so-giay-boc { display: block; overflow-x: auto; padding: 4px 2px 12px; }
  .so-the { display: none; }
  .lt-bang { display: block; }
  .lt-the-nam { display: none; }
}
@container (min-width: 900px) {
  .side { display: flex; }
  .bnav { display: none; }
  .main { padding: 24px 32px 40px; gap: 18px; }
  .tk-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1 { font-size: 26px; }
  .kv, .kv.dai, .kv.rat-dai { font-size: 28px; }
  .tbl { display: block; }
  .rows { display: none; }
  .wide { display: inline; }
  .narrow { display: none; }
  .goi-y-phim { display: block; }
  .fc { padding: 20px 24px; }
  .lay.co-form { grid-template-columns: minmax(0, 1fr) 360px; }
  .lt-luoi { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .lt-the { padding: 22px 24px; }
  .toast-vung { bottom: 24px; }
  .tq-big { font-size: 30px; }
  .tq-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tq-ng { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }
  .cd-luoi { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .so-tabs { max-width: 560px; }
  .xt-dai { padding: 10px 32px; }
}

/* Bước 7: dải "Đã có bản cập nhật" (PWA), thẻ cài lên màn hình điện thoại */
.dai-cap-nhat { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 6px 6px 6px 16px; border-radius: 14px; background: #1E3A8A; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 24px rgba(30, 41, 59, .25); white-space: nowrap; }
.dai-cap-nhat button { height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff; color: #1E3A8A; font: inherit; font-weight: 700; cursor: pointer; }
.cai-buoc { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: buoc; }
.cai-buoc li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--chu-2); counter-increment: buoc; }
.cai-buoc li::before { content: counter(buoc); width: 24px; height: 24px; border-radius: 12px; background: #E3EDFD; color: #1E3A8A; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.cai-hinh { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--vien); display: inline-flex; align-items: center; justify-content: center; color: #1D4ED8; flex: none; background: #fff; }
.cai-dau { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cai-dau img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.cai-dau h2 { margin: 0; }
@media (min-width: 900px) { .dai-cap-nhat { bottom: 24px; } }