:root{
  --xanh:#0d5c46; --xanh-nhat:#e8f3ef; --xanh-dam:#094536;
  --thu:#0f8a5f; --chi:#c0392b;
  --nen:#f4f6f5; --the:#fff; --vien:#dfe5e2; --chu:#1d2422; --mo:#5f6b67;
  --vang:#b7791f; --vang-nen:#fdf6e3;
  --r:12px; --bong:0 1px 3px rgba(0,0,0,.07),0 6px 20px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--nen); color:var(--chu); -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
button{font:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}

/* ---------- đăng nhập ---------- */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,var(--dn-0d5c46),var(--dn-062b22))}
.login-box{background:var(--dn-ffffff);border-radius:18px;padding:30px 26px;width:100%;max-width:370px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:14px}
.logo{width:52px;height:52px;border-radius:14px;background:var(--xanh);color:var(--dc-ffffff);display:grid;place-items:center;
  font-weight:700;letter-spacing:.5px;margin:0 auto}
.logo.sm{width:28px;height:28px;border-radius:8px;font-size:12px;margin:0}
.login-box h1{font-size:20px;margin:2px 0 0;text-align:center}
.login-box .sub{margin:0 0 6px;text-align:center;color:var(--mo);font-size:14px}
label{display:block;font-size:14px;font-weight:600;color:var(--dc-3e4b47)}
label input,label select,.tim{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--vien);
  border-radius:10px;background:var(--dn-ffffff);font-weight:400}
label input:focus,label select:focus{outline:2px solid var(--xanh);outline-offset:-1px;border-color:var(--xanh)}
.btn-primary{background:var(--xanh);color:var(--dc-ffffff);border:0;border-radius:10px;padding:13px;font-weight:700}
.btn-primary:hover{background:var(--xanh-dam)}
.btn-primary:disabled{opacity:.55}
.btn-ghost{background:var(--dn-ffffff);color:var(--xanh);border:1px solid var(--vien);border-radius:10px;padding:11px 14px;font-weight:600}
.err{color:var(--dc-c0392b);font-size:14px;min-height:18px;font-weight:600}

/* ---------- khung app ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--xanh);color:var(--dc-ffffff);display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:9px;font-weight:700}
.brand .logo{background:rgba(255,255,255,.18)}
.user{display:flex;align-items:center;gap:12px;font-size:14px}
@media(max-width:520px){
  .topbar{padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top))}
  .brand{font-size:14px;white-space:nowrap}
  .user{gap:9px;font-size:14px}
  .user #u-ten{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs{top:46px}
}
.lnk{background:none;border:0;color:var(--dc-cfe8de);text-decoration:underline;padding:0;font-size:14px}
.tabs{position:sticky;top:52px;z-index:19;display:flex;gap:2px;overflow-x:auto;background:var(--dn-ffffff);
  border-bottom:1px solid var(--vien);padding:0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:13px 12px;white-space:nowrap;
  color:var(--mo);font-weight:600}
.tabs button.on{color:var(--xanh);border-bottom-color:var(--xanh)}
main{max-width:860px;margin:0 auto;padding:14px 12px 60px}
.tab{display:none}
.tab.on{display:block}

/* ---------- thẻ ---------- */
.card{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:16px;box-shadow:var(--bong);
  display:flex;flex-direction:column;gap:13px;margin-bottom:14px}
.card-title{font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:620px){.row2,.row3{grid-template-columns:1fr}}
.fld{display:block}
.fld.inline{display:flex;align-items:center;gap:8px;font-size:14px}
.fld.inline input{width:auto;margin:0}
.req{color:var(--dc-c0392b)}
.hint{font-size:14px;color:var(--mo);font-weight:400;margin-top:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn-primary{flex:1;min-width:160px}

/* ---------- chọn Thu / Chi ---------- */
.dau-form{display:flex;align-items:center;gap:10px}
.dau-form .seg{flex:1}
.btn-reset{background:var(--dn-ffffff);border:1px solid var(--vien);color:var(--mo);border-radius:10px;
  padding:9px 12px;font-weight:600;font-size:14px;white-space:nowrap;flex:none}
.btn-reset:hover{border-color:var(--chi);color:var(--chi)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--nen);padding:4px;border-radius:12px}
.seg button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:700;color:var(--mo);letter-spacing:.3px}
.seg button.on{background:var(--dn-ffffff);box-shadow:var(--bong)}
.seg button[data-v="THU"].on{color:var(--thu)}
.seg button[data-v="CHI"].on{color:var(--chi)}

/* ---------- ô số tiền ---------- */
.fld.o-tien input{font-size:20px;font-weight:700;letter-spacing:.4px;text-align:right}
/* số GÕ VÀO thì to cho dễ soát, còn chữ mờ gợi ý thì nhỏ và nhẹ thôi */
.fld.o-tien input::placeholder{font-size:14px;font-weight:400;letter-spacing:0;color:var(--dc-a9b5b0)}
.nhan{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--dc-3e4b47)}

/* nhãn cấp L1..L4 — mỗi cấp một màu, dùng thống nhất ở mọi chỗ trong app */
:root{--c1:#1f8a5f; --c2:#e08a2b; --c3:#3f8ee0; --c4:#8e6bd6}
.cap-so{display:inline-block;color:var(--dc-ffffff);font-size:12px;font-weight:700;
  padding:1px 6px;border-radius:5px;letter-spacing:.4px;background:var(--mo)}
.cap-so.l1{background:var(--c1)} .cap-so.l2{background:var(--c2)}
.cap-so.l3{background:var(--c3)} .cap-so.l4{background:var(--c4)}
/* ô nhập của cấp nào thì gạch màu cấp đó ở mép trái — nhìn là biết đang điền cấp mấy */
.c-l1 .chon > input{box-shadow:inset 3px 0 0 var(--c1)}
.c-l2 .chon > input{box-shadow:inset 3px 0 0 var(--c2)}
.c-l3 .chon > input{box-shadow:inset 3px 0 0 var(--c3)}
.ct-l4 > input,.ct-row .ct-l4 input{box-shadow:inset 3px 0 0 var(--c4)}
.ct-l3 > input{box-shadow:inset 3px 0 0 var(--c3)}
.c-l1 .nhan,.c-l2 .nhan,.c-l3 .nhan{white-space:nowrap}
.goi-y-cay{font-size:14px;color:var(--xanh);background:var(--xanh-nhat);border-radius:8px;
  padding:7px 11px;font-weight:600;margin-top:-4px}
.goi-y-cay:empty{display:none}
.goi-y-cay.canh{background:var(--vang-nen);color:var(--vang)}
.goi-y-cay button{background:var(--dn-ffffff);border:1px solid currentColor;color:inherit;border-radius:16px;
  padding:2px 10px;font-size:14px;font-weight:700;margin:3px 5px 0 0}

/* tích để bóc chi tiết sang L3 */
.tich-boc{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:14px;
  font-weight:600;color:var(--mo);cursor:pointer}
.tich-boc input{width:16px;height:16px;margin:0;accent-color:var(--xanh);flex:none}
.tich-boc b{color:var(--xanh)}

/* hàng phụ dưới nút Lưu */
.hang-phu{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lnk-nho{background:none;border:0;color:var(--mo);text-decoration:underline;font-size:14px;padding:0}
.lnk-nho:hover{color:var(--chi)}
.chep-nho{background:var(--dn-ffffff);border:1px solid var(--vien);color:var(--xanh);border-radius:7px;
  padding:3px 9px;font-size:14px;font-weight:700;flex:none}
.chep-nho:hover{border-color:var(--xanh);background:var(--xanh-nhat)}

/* nút tìm khách nâng cao */
.nut-tim-kh{position:absolute;right:6px;top:calc(50% + 2px);transform:translateY(-50%);
  background:var(--nen);border:1px solid var(--vien);border-radius:8px;width:34px;height:32px;font-size:14px}
.nut-tim-kh:hover{border-color:var(--xanh);background:var(--xanh-nhat)}
.ac input{padding-right:46px}

/* hộp chọn khách */
.modal-box.rong{max-width:680px}
.kh-dau{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kh-loc{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kh-loc .loc button{padding:6px 10px;font-size:14px}
.kh-list{max-height:46vh;overflow-y:auto;border:1px solid var(--vien);border-radius:11px}
.kh-dong{padding:10px 13px;border-bottom:1px solid var(--dv-f0f3f2);cursor:pointer;font-size:14px}
.kh-dong:last-child{border-bottom:0}
.kh-dong:hover{background:var(--xanh-nhat)}
.kh-dong.sel{background:var(--xanh);color:var(--dc-ffffff)}
.kh-dong b{color:var(--xanh)}
.kh-dong.sel b,.kh-dong.sel small{color:var(--dc-ffffff)}
.kh-dong small{display:block;color:var(--mo);font-size:14px;margin-top:2px}
body[data-loai="THU"] .fld.o-tien input{color:var(--thu)}
body[data-loai="CHI"] .fld.o-tien input{color:var(--chi)}
.doc-tien{font-size:14px;color:var(--vang);background:var(--vang-nen);border-radius:8px;padding:7px 10px;
  font-weight:600;margin-top:-8px}
.doc-tien:empty{display:none}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:-4px}
.chips button{border:1px solid var(--vien);background:var(--dn-ffffff);border-radius:20px;padding:6px 12px;font-size:14px;color:var(--xanh);font-weight:600}
.chips button[data-clear]{color:var(--mo)}

/* ---------- ô chọn gõ lọc (thay thẻ select) ---------- */
.chon{position:relative}
/* Ô CHỌN: chỉ được chọn từ danh sách, không được ghi tự do.
   Gõ chỉ để LỌC — rời ô mà chữ không khớp mục nào thì tự trả về giá trị cũ. */
.chon > input{width:100%;margin-top:5px;padding:11px 30px 11px 12px;border:1px solid var(--vien);
  border-radius:10px;background:var(--dn-ffffff);font-weight:400;cursor:pointer}
.chon > input:focus{cursor:text}
.chon.khong-khop > input{border-color:var(--chi);background:var(--dn-fff8f7)}
.chon > input:focus{outline:2px solid var(--xanh);outline-offset:-1px;border-color:var(--xanh)}
.chon > input::placeholder{color:var(--dc-a9b5b0)}
.chon .mui{position:absolute;right:11px;top:calc(50% + 2px);transform:translateY(-50%);color:var(--mo);
  pointer-events:none;font-size:12px}
.chon.co-gt > input{font-weight:600}
.chon-list{position:absolute;z-index:40;left:0;right:0;top:100%;background:var(--dn-ffffff);border:1px solid var(--vien);
  border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.16);max-height:270px;overflow:auto;margin-top:2px}
.chon-list div{padding:9px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid var(--dv-f2f5f4)}
.chon-list div:last-child{border-bottom:0}
.chon-list div.sel{background:var(--xanh);color:var(--dc-ffffff)}
.chon-list div em{font-style:normal;background:var(--dn-ffeaa7);color:var(--dc-1d2422);border-radius:3px}
.chon-list div.sel em{background:rgba(255,255,255,.3);color:var(--dc-ffffff)}
.chon-list .khong{color:var(--mo);cursor:default}
/* tiêu đề nhóm trong danh sách xổ — nhìn là biết ông nào thuộc khoản mục nào */
.chon-list .nhom-dau{position:sticky;top:0;background:var(--xanh-nhat);color:var(--xanh);
  font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:6px 12px;border-bottom:1px solid var(--dv-d6e6df);cursor:default}
.chon-list .nhom-dau:hover{background:var(--xanh-nhat)}

.lnk-chia{background:none;border:0;color:var(--xanh);text-decoration:underline;padding:0;font-size:14px;font-weight:600}

/* ---------- đang sửa phiếu ---------- */
.bang-sua{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--vang-nen);border:1px solid var(--dv-f0dfae);border-radius:10px;padding:9px 12px;
  font-size:14px;font-weight:700;color:var(--vang)}
.btn-nho-trang{background:var(--dn-ffffff);border:1px solid var(--dv-e6d5a4);color:var(--vang);border-radius:8px;padding:6px 11px;font-size:14px;font-weight:700}
body.dang-sua .btn-primary{background:var(--vang)}
body.dang-sua .btn-primary:hover{background:var(--dn-9c6717)}

/* ---------- bóc chi tiết ---------- */
.loc{display:flex;gap:0;border:1px solid var(--vien);border-radius:9px;overflow:hidden;background:var(--dn-ffffff)}
.loc button{border:0;background:var(--dn-ffffff);padding:9px 13px;font-size:14px;color:var(--mo);font-weight:600;
  border-right:1px solid var(--vien)}
.loc button:last-child{border-right:0}
.loc button.on{background:var(--xanh);color:var(--dc-ffffff)}
.bc-thongtin{background:var(--nen);border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.7}
.bc-thongtin b{font-size:16px}
.item.chon-duoc{cursor:pointer}
.item.chon-duoc:hover{border-color:var(--xanh);background:var(--xanh-nhat)}
.item.dang-boc{border-color:var(--xanh);background:var(--xanh-nhat)}
.tag.thieu{background:var(--dn-fdecea);color:var(--dc-c0392b)}
.tag.du{background:var(--vang-nen);color:var(--vang)}

/* ---------- SƠ ĐỒ CÂY TRỤC DỌC ---------- */
.cay-doc{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:var(--r);padding:8px 10px;
  max-height:74vh;overflow-y:auto}
/* 4 cấp = 4 MÀU riêng, không cấp nào trùng cấp nào:
   L1 xanh rừng · L2 cam · L3 xanh dương · L4 tím. Màu dùng cho cả chip, vạch trái và nền dòng. */
.cay-doc{--m1:#0d5c46;--m2:#e08a1e;--m3:#2f7fed;--m4:#8e44ad}
.cay-con{margin-left:14px;padding-left:16px;border-left:1.5px solid var(--dv-dde8e3)}
.cay-hang{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 6px;position:relative;min-height:0;
  border-left:4px solid transparent;border-radius:0 9px 9px 0;margin:2px 0}
.cay-hang::before{content:'';position:absolute;left:-16px;top:50%;width:13px;height:1.5px;background:var(--dn-dde8e3)}
.cay-doc > .cay-nut > .cay-hang::before{display:none}
.cay-hang.c1{border-left-color:var(--m1);background:var(--dn-eef6f2)}
.cay-hang.c2{border-left-color:var(--m2);background:var(--dn-fdf5e8)}
.cay-hang.c3{border-left-color:var(--m3);background:var(--dn-eef3fd)}
.cay-hang.c4{border-left-color:var(--m4);background:var(--dn-f6eefb)}
.cay-hang:hover{filter:brightness(.97)}
/* nút mở/thu: mũi tên to gấp đôi cho dễ thấy, ô nút vừa đủ để dòng không bị cao */
.cay-mo{background:none;border:1px solid transparent;border-radius:9px;width:44px;height:40px;padding:0;
  color:var(--mo);font-size:28px;line-height:1;flex:none}
.cay-mo:hover{background:var(--dn-ffffff);border-color:var(--vien);color:var(--xanh)}
.cay-mo.trong{visibility:hidden}
/* chip báo rõ dòng này là cấp mấy: L1 mảng · L2 khoản mục · L3 khoản con · L4 chi tiết */
.cay-cap{color:var(--dc-ffffff);font-size:14px;font-weight:700;letter-spacing:.3px;line-height:1;
  padding:4px 6px;border-radius:6px;flex:none;min-width:25px;text-align:center}
.cay-day{flex:1}
.cay-ten{font-weight:700;font-size:14px}
.cay-hang.c1 .cay-ten{font-size:16px}
.cay-hang.c3 .cay-ten,.cay-hang.c4 .cay-ten{font-weight:600}
.cay-meta{font-size:14px;color:var(--mo);white-space:nowrap}
.cay-them{background:var(--dn-ffffff);border:1px solid var(--vien);color:var(--xanh);border-radius:8px;
  width:32px;height:32px;font-size:20px;font-weight:700;line-height:1;flex:none;padding:0}
.cay-them:hover{background:var(--xanh);border-color:var(--xanh);color:var(--dc-ffffff)}
.cay-xoa{background:var(--dn-ffffff);border:1px solid var(--vien);color:var(--dc-a9b5b0);border-radius:8px;
  width:32px;height:32px;font-size:16px;line-height:1;flex:none;padding:0}
.cay-xoa:hover{color:var(--dc-c0392b);border-color:var(--dv-e8b4ae);background:var(--dn-fdf3f2)}
.cay-hang.mo-nhanh{box-shadow:inset 0 0 0 2px var(--xanh)}
.cay-canh{background:var(--vang-nen);color:var(--vang);font-size:14px;font-weight:700;
  padding:1px 7px;border-radius:20px;white-space:nowrap}
.cay-nhan-nho{font-size:14px;font-weight:700;padding:1px 7px;border-radius:20px;
  background:var(--nen);color:var(--mo);white-space:nowrap}
.cay-nhan-nho.gv{background:var(--xanh-nhat);color:var(--xanh)}
/* hàng thêm nhanh — điền tên rồi Enter là xong */
.cay-them-hang{display:flex;gap:7px;align-items:center;padding:7px 8px;flex-wrap:wrap;
  margin:2px 0 4px 10px;border-radius:9px;background:var(--dn-ffffff);border:1.5px dashed var(--xanh)}
.cay-them-nhan{font-size:12px;font-weight:700;color:var(--dc-ffffff);padding:4px 7px;border-radius:6px;white-space:nowrap}
.cay-them-hang input,.cay-them-hang select{padding:8px 11px;border:1px solid var(--xanh);
  border-radius:8px;font-size:14px;min-width:170px}
.cay-them-hang input{flex:1}
.cay-them-hang button{border-radius:8px;padding:8px 14px;font-size:14px;font-weight:700;border:1px solid var(--vien);background:var(--dn-ffffff)}
.cay-them-hang button.luu{background:var(--xanh);border-color:var(--xanh);color:var(--dc-ffffff)}
.cay-them-loi{color:var(--dc-c0392b);font-size:14px;font-weight:600;width:100%}

/* ---------- cây khai báo ---------- */
.kb-mang{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:12px;margin-bottom:11px;overflow:hidden}
.kb-mang > summary{padding:12px 14px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--xanh-nhat);color:var(--xanh)}
.kb-mang > summary::-webkit-details-marker{display:none}
.kb-mang > summary::before{content:'▸';margin-right:7px;transition:transform .15s}
.kb-mang[open] > summary::before{transform:rotate(90deg)}
.kb-mang.chua > summary{background:var(--vang-nen);color:var(--vang)}
.kb-muc{border-top:1px solid var(--vien);padding:10px 14px}
.kb-muc-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kb-muc-dau b{font-size:14px}
.kb-tien{font-size:14px;color:var(--mo);font-variant-numeric:tabular-nums}
.kb-thau{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.kb-vien{display:inline-flex;align-items:center;gap:5px;background:var(--nen);border:1px solid var(--vien);
  border-radius:20px;padding:3px 5px 3px 11px;font-size:14px}
.kb-vien button{background:none;border:0;color:var(--mo);font-size:14px;line-height:1;padding:2px 4px;border-radius:50%}
.kb-vien button:hover{color:var(--dc-c0392b);background:var(--dn-fdecea)}
.kb-trong{font-size:14px;color:var(--vang);font-weight:600}
/* ô chọn cha — bấm để bật/tắt, chọn được nhiều */
.chon-nhieu{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:132px;overflow-y:auto}
.vien-chon{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:20px;padding:6px 13px;
  font-size:14px;font-weight:600;color:var(--mo)}
.vien-chon:hover{border-color:var(--xanh);color:var(--xanh)}
.vien-chon.on{background:var(--xanh);border-color:var(--xanh);color:var(--dc-ffffff)}
.loc.nhieu-cap{flex-wrap:wrap;border:0;gap:6px;background:none}
.loc.nhieu-cap button{border:1px solid var(--vien);border-radius:9px;font-size:14px;font-weight:700}
.loc.nhieu-cap button.on{background:var(--xanh);color:var(--dc-ffffff);border-color:var(--xanh)}
.ct-row .ct-l4{min-width:0}
.kb-nhan{display:inline-block;font-size:14px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--nen);color:var(--mo);margin-right:8px}
.kb-nhan.gv{background:var(--xanh-nhat);color:var(--xanh)}
.kb-nhan.chua{background:var(--vang-nen);color:var(--vang)}
.kb-nut-them{background:var(--dn-ffffff);border:1px dashed var(--vien);color:var(--xanh);border-radius:20px;
  padding:3px 11px;font-size:14px;font-weight:700}
.kb-nut-them:hover{border-color:var(--xanh);background:var(--xanh-nhat)}

/* ---------- ghi chú luật ---------- */
.cb-nho{display:flex;gap:9px;align-items:flex-start;background:var(--dn-ffffff);border:1px solid var(--vien);
  border-left:3px solid var(--xanh);border-radius:10px;padding:10px 13px;margin-bottom:11px;font-size:14px;color:var(--mo)}
.con-gio{font-size:14px;font-weight:700;color:var(--vang)}
.het-gio{font-size:14px;font-weight:700;color:var(--mo)}

/* ---------- ghim ---------- */
.nhan-ghim{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--dc-3e4b47)}
.ghim{background:none;border:0;padding:0 2px;font-size:12px;line-height:1;opacity:.28;filter:grayscale(1)}
.ghim.on{opacity:1;filter:none}
.ghim:hover{opacity:.75}
.so-du{margin-left:auto;font-size:14px;font-weight:700;color:var(--xanh)}
.hang-ghim .fld{display:block}
kbd{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.08);
  border-radius:4px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.btn-primary kbd{background:rgba(255,255,255,.2)}
.phim-tat{margin-top:-4px}
@media(max-width:620px){kbd{display:none}}

/* ---------- xấp phiếu vừa nhập ---------- */
.phien-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.phien-dau span{font-size:14px;font-weight:700}
.phien-list{display:flex;flex-direction:column;gap:5px;max-height:290px;overflow-y:auto}
.phien-dong{display:flex;align-items:baseline;gap:9px;font-size:14px;padding:6px 8px;border-radius:8px;background:var(--nen)}
.phien-dong .stt{color:var(--mo);width:22px;font-variant-numeric:tabular-nums}
.phien-dong .nd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mo)}
.phien-dong .tt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.phien-dong.thu .tt{color:var(--thu)} .phien-dong.chi .tt{color:var(--chi)}
.phien-dong.moi{animation:nhay 1s ease}
@keyframes nhay{0%{background:var(--dn-fff6d6)}100%{background:var(--nen)}}

/* ---------- gợi ý công trình ---------- */
.ac{position:relative}
.ac input{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--vien);border-radius:10px}
.ac-list{position:absolute;z-index:30;left:0;right:0;top:100%;background:var(--dn-ffffff);border:1px solid var(--vien);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);max-height:260px;overflow:auto}
.ac-list div{padding:10px 12px;border-bottom:1px solid var(--dv-f0f3f2);font-size:14px}
.ac-list div:hover,.ac-list div.sel{background:var(--xanh-nhat)}
.ac-list b{color:var(--xanh)}
.ac-list small{color:var(--mo);display:block;font-size:14px}

/* ---------- khối chi tiết ---------- */
.sub-card{border:1px dashed var(--vien);border-radius:var(--r);padding:13px;background:var(--dn-fbfcfc)}
.sub-head{display:flex;flex-direction:column;margin-bottom:10px}
.sub-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.tong{font-weight:700;font-size:14px}
.tong.lech{color:var(--dc-c0392b)}
.tong.khop{color:var(--thu)}
.ct-row{display:grid;grid-template-columns:1.1fr 1.4fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center}
@media(max-width:620px){.ct-row{grid-template-columns:1fr 1fr;}.ct-row .xoa{grid-column:2;justify-self:end}}
.ct-row input,.ct-row select{width:100%;padding:9px 10px;border:1px solid var(--vien);border-radius:9px;font-size:14px}
.xoa{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:9px;width:36px;height:36px;color:var(--dc-c0392b);font-weight:700}

/* ---------- dải hôm nay ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:620px){.strip{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:var(--r);padding:12px;box-shadow:var(--bong)}
.kpi .nhan{font-size:14px;color:var(--mo);font-weight:600}
.kpi .so{font-size:20px;font-weight:700;margin-top:3px}
.kpi.thu .so{color:var(--thu)} .kpi.chi .so{color:var(--chi)}
.kpi.canhbao{background:var(--vang-nen);border-color:var(--dv-f0dfae)} .kpi.canhbao .so{color:var(--vang)}

/* ---------- danh sách ---------- */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 2px 10px}
.bar .tim{max-width:280px;margin:0}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:11px;padding:11px 13px;display:flex;
  justify-content:space-between;gap:12px;align-items:flex-start}
.item .trai{min-width:0;flex:1}
.item .t1{font-weight:700;font-size:14px}
.item .t2{font-size:14px;color:var(--mo);margin-top:2px;overflow-wrap:anywhere}
.item .phai{text-align:right;white-space:nowrap}
.item .tien{font-weight:700;font-size:14px}
.item.thu .tien{color:var(--thu)} .item.chi .tien{color:var(--chi)}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--xanh-nhat);color:var(--xanh)}
.tag.cho{background:var(--vang-nen);color:var(--vang)}
.tag.loi{background:var(--dn-fdecea);color:var(--dc-c0392b)}
.tag.xong{background:var(--dn-e6f6ee);color:var(--thu)}
.mini{background:none;border:0;color:var(--mo);text-decoration:underline;font-size:14px;padding:2px 0}
.mini.do{color:var(--dc-c0392b)}
.rong{text-align:center;color:var(--mo);padding:26px;font-size:14px}

/* ---------- toast + modal ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--dn-1d2422);color:var(--dc-ffffff);
  padding:12px 18px;border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.3);z-index:60;font-weight:600;
  max-width:90vw;text-align:center}
.toast.loi{background:var(--dn-c0392b)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:70;padding:18px}
.modal-box{background:var(--dn-ffffff);border-radius:14px;padding:20px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}

/* ---------- form phiếu: gói gọn trong 1 màn hình, máy tính lẫn điện thoại ---------- */
#form-phieu{gap:8px;padding:12px}
#form-phieu .fld > input,#form-phieu .chon > input{margin-top:3px;padding:8px 12px}
#form-phieu .seg button{padding:9px}
#form-phieu .chon > input{padding-right:28px}
#form-phieu .goi-y-cay{padding:5px 10px;margin-top:0}
#form-phieu .doc-tien{padding:5px 10px;margin-top:-3px}
#form-phieu .tich-boc{margin-top:0}
#form-phieu .err{min-height:0}
#form-phieu .actions .btn-primary{padding:11px}
/* Ba hàng dùng chung một lưới 3 cột BẰNG NHAU — mọi ô nhập thẳng cột, cùng bề ngang. */
.hang-1,.hang-cap,.hang-3{grid-template-columns:repeat(3,1fr)}
/* ô tích nằm ở cột thứ 3 của hàng cuối — chừa đúng chiều cao cái nhãn ở trên
   để nó nằm thẳng hàng với 2 ô nhập bên cạnh, không cao thấp lệch nhau */
#o-tich-boc{align-self:start;min-height:57px;padding-top:26px}
#p-ct-info:empty{display:none}
/* dải hôm nay: gọn thành 1 dòng nhãn + số, để dành chỗ cho form */
#strip-homnay{margin-bottom:8px;gap:8px}
.kpi{padding:6px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.kpi .nhan{font-size:14px}
.kpi .so{font-size:14px;margin-top:0}

@media(max-width:620px){
  /* điện thoại: vẫn 2 cột cho ô ngắn, chỉ ô nào cần rộng mới chiếm cả hàng */
  main{padding:10px 10px 26px}
  .strip{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
  .kpi{padding:6px 7px}
  .kpi .nhan{font-size:14px;line-height:1.15}
  .kpi .so{font-size:14px;margin-top:1px}
  #form-phieu{gap:8px;padding:11px}
  .hang-1{grid-template-columns:1fr 1fr}
  .hang-1 .o-tien{grid-column:1 / -1}
  .hang-cap{grid-template-columns:1fr 1fr}
  .hang-cap .c-l3{grid-column:1 / -1}
  .hang-3{grid-template-columns:1fr 1fr}
  #o-tich-boc{grid-column:1 / -1;align-self:auto;min-height:0;padding-top:0}
  .seg button{padding:9px;font-size:14px}
  .btn-reset{padding:8px 10px;font-size:14px}
}

.ct-row.khong-l4{grid-template-columns:1.6fr 1fr auto}
@media(max-width:620px){.ct-row.khong-l4{grid-template-columns:1fr 1fr}}

/* nhãn 1 dòng — số dư đẩy sang phải, dài quá thì cắt chứ không xuống hàng làm lệch lưới */
#form-phieu .nhan{flex-wrap:nowrap;min-width:0;white-space:nowrap}
#form-phieu .so-du{margin-left:auto;font-size:14px;overflow:hidden;text-overflow:ellipsis}

/* ---------- nền form đổi theo Thu / Chi: liếc là biết đang nhập phiếu gì ---------- */
:root{--thu-nen:#eefaf3; --thu-vien:#bfe6d3; --chi-nen:#fdf1ef; --chi-vien:#f2c9c2}
#form-phieu{transition:background-color .15s,border-color .15s}
body[data-loai="THU"] #form-phieu{background:var(--thu-nen);border-color:var(--thu-vien)}
body[data-loai="CHI"] #form-phieu{background:var(--chi-nen);border-color:var(--chi-vien)}
/* ô nhập vẫn nền trắng để chữ nổi lên trên nền màu */
#form-phieu input,#form-phieu select,#form-phieu .chon > input{background:var(--dn-ffffff)}
body[data-loai="THU"] #form-phieu .seg{background:var(--dn-dff2e8)}
body[data-loai="CHI"] #form-phieu .seg{background:var(--dn-f8e2de)}
body[data-loai="CHI"] #form-phieu .btn-primary{background:var(--chi)}
body[data-loai="CHI"] #form-phieu .btn-primary:hover{background:var(--dn-a5301f)}

/* sao đỏ bật/tắt theo loại phiếu: CHI cần L1-L2-L3 · THU cần L1 + công trình */
body[data-loai="THU"] .sao-chi{display:none}
body[data-loai="CHI"] .sao-thu{display:none}
body:not([data-loai="CHI"]) .chi-only{display:none}
#p-bc{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--vien);border-radius:10px;background:var(--dn-ffffff)}

/* ---------- bảng tra cứu kiểu Excel ---------- */
.bang-cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:var(--r);background:var(--dn-ffffff)}
table.bang{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.bang th{background:var(--nen);color:var(--dc-3e4b47);font-weight:700;text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--vien);white-space:nowrap;position:sticky;top:0;z-index:1}
table.bang td{padding:8px 10px;border-bottom:1px solid var(--dv-f2f5f4);vertical-align:middle}
table.bang tbody tr:last-child td{border-bottom:0}
table.bang tbody tr{cursor:pointer}
table.bang tbody tr:hover{background:var(--xanh-nhat)}
table.bang tbody tr.dang-boc{background:var(--vang-nen)}
table.bang .p{text-align:right}
table.bang .ma{font-weight:700;white-space:nowrap}
table.bang .nho{color:var(--mo);white-space:nowrap}
table.bang .tien-o{font-weight:700;color:var(--chi);white-space:nowrap}
table.bang .trong{color:var(--dc-c3ccc8)}
table.bang .cap-so{margin-right:5px}

/* bảng thu chi: phân biệt dòng thu / dòng chi + ô ghi chú không kéo bảng dài ra */
table.bang .cham{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
table.bang .cham.thu{background:var(--dn-e6f6ee);color:var(--thu)}
table.bang .cham.chi{background:var(--dn-fdecea);color:var(--chi)}
table.bang .v-thu{color:var(--thu)} table.bang .v-chi{color:var(--chi)}
table.bang .ghi{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.bang td .nho{font-size:14px;color:var(--mo);font-weight:400;margin-top:2px}
table.bang td .nho.do{color:var(--chi)}
table.bang td .tag{margin-top:3px;display:inline-block}
table.bang .mini{white-space:nowrap}

/* mọi ô trong bảng nằm gọn 1 hàng — dài quá thì cắt bằng dấu ba chấm, rê chuột xem đủ */
table.bang td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
table.bang td .nho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.bang .tat{font-weight:700;letter-spacing:.5px}
/* hàng lệnh (ô tìm · lọc · ngày · nút) nằm trên một hàng, hẹp quá thì cuộn ngang */
#tab-nhatky .bar,#tab-boc .bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#tab-nhatky .bar > *,#tab-boc .bar > *{flex:none}
#tab-nhatky .bar .tim,#tab-boc .bar .tim{flex:1 1 200px;min-width:170px}

/* ---------- hai màn bảng: dùng hết bề ngang màn hình, khỏi phải cuộn ngang ---------- */
body[data-tab="nhatky"] main,body[data-tab="boc"] main,body[data-tab="dutoan"] main{max-width:none;padding-left:16px;padding-right:16px}
body[data-tab="nhatky"] table.bang,body[data-tab="boc"] table.bang{min-width:0}
/* bảng dự toán vẫn giữ bề ngang tối thiểu — nhiều cột, bóp lại là không đọc được */
body[data-tab="dutoan"] table.dt-bang{min-width:960px}
/* ghi chú là cột co giãn, nhưng chặn trần để không kéo bảng dài ra bắt cuộn ngang */
body[data-tab="nhatky"] table.bang .ghi,body[data-tab="boc"] table.bang .ghi{max-width:260px}
/* cột nào cũng vừa đủ chữ, chỉ ô ghi chú mới co giãn lấp chỗ trống */
table.bang th,table.bang td{width:1%}
table.bang th:nth-last-child(3),table.bang td.ghi{width:auto}
@media(max-width:820px){
  body[data-tab="nhatky"] main,body[data-tab="boc"] main,body[data-tab="dutoan"] main{padding-left:10px;padding-right:10px}
  body[data-tab="nhatky"] table.bang,body[data-tab="boc"] table.bang{min-width:700px}
}

/* ---------- 1.9 · đọc số tiền thành chữ: to, đậm, dễ soát ---------- */
.doc-tien{font-size:16px;font-weight:700;color:var(--dc-8a5a00);background:var(--dn-fff3cd);border:1px solid var(--dv-f0dfae);
  border-radius:8px;padding:9px 12px;margin-top:-2px;letter-spacing:.2px}
.doc-tien.canh{background:var(--dn-fdf1ef);border-color:var(--dv-f2c9c2);color:var(--chi)}
.doc-tien.sai{background:var(--dn-fdf1ef);border-color:var(--chi);color:var(--chi);font-weight:700}
/* ô nhập sai -> viền đỏ, nhìn là biết chưa lưu được */
input.sai,#form-phieu input.sai{border-color:var(--chi) !important;background:var(--dn-fff8f7)}

/* ---------- 1.11 · báo ĐÃ LƯU, to và rõ ---------- */
.da-luu{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:60;
  background:var(--thu);color:var(--dc-ffffff);font-size:16px;font-weight:700;letter-spacing:.2px;
  padding:14px 26px;border-radius:14px;box-shadow:0 10px 30px rgba(15,138,95,.35);
  max-width:92vw;text-align:center}
@media(max-width:620px){.da-luu{font-size:14px;padding:12px 18px;top:64px}}
.da-luu.treo{background:var(--vang);box-shadow:0 10px 30px rgba(183,121,31,.35)}

/* ---------- khối cảnh báo phiếu chưa lên Lark ---------- */
.khoi-treo{background:var(--dn-fdf1ef);border:1px solid var(--chi);border-radius:var(--r);
  padding:11px 14px;margin-bottom:10px;font-size:14px;color:var(--chi);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.khoi-treo b{font-weight:700}
.khoi-treo .ly-do{flex:1 1 100%;font-weight:400;color:var(--dc-7a3b32);font-size:14px}
.khoi-treo button{margin-left:auto;border-color:var(--chi);color:var(--chi);padding:7px 12px}

/* ---------- MỌI Ô NHẬP TRONG FORM PHIẾU CÙNG MỘT KÍCH THƯỚC ----------
   Trước đây mỗi ô một kiểu: ngày 13px cao 40 · ô chọn 15px cao 41 · số tiền 20px cao 48
   · công trình cao 47 · ghi chú 13px cao 38. Nhìn lô nhô, không thẳng hàng.
   Giờ ép chung một cỡ; riêng ô Số tiền chữ to hơn nhưng KHUNG vẫn bằng các ô khác. */
#form-phieu input[type="text"],
#form-phieu input[type="date"],
#form-phieu input:not([type]),
#form-phieu .chon > input,
#form-phieu .ac > input{
  height:42px; min-height:42px; box-sizing:border-box;
  font-size:14px; line-height:normal; padding:0 12px; margin-top:3px;
}
#form-phieu .chon > input{padding-right:28px}
#form-phieu .ac > input{padding-right:42px}
#form-phieu .fld.o-tien input{font-size:16px}          /* to hơn để soát tiền, khung vẫn 42px */
#form-phieu input[type="checkbox"]{height:auto;min-height:0;margin-top:0}

/* ---------- 3 mảng kinh doanh, mỗi mảng một màu cho dễ phân biệt ---------- */
table.bang .tat{display:inline-block;min-width:30px;text-align:center;
  padding:2px 7px;border-radius:6px;font-size:14px;color:var(--dc-ffffff)}
.tat-tk{background:var(--dn-2a6fb0)}      /* Thiết kế        — xanh dương */
.tat-tg{background:var(--dn-1f8a5f)}      /* Thi công trọn gói — xanh lá  */
.tat-nt{background:var(--dn-d0692b)}      /* Thi công nội thất — cam      */

/* ngày đang xem của Bảng Thu Chi */
.ngay-hom-nay{font-size:14px;color:var(--xanh);white-space:nowrap}

/* ---------- MỌI Ô NHẬP TRONG APP CÙNG MỘT KÍCH THƯỚC ----------
   Không chỉ riêng form phiếu: ô nào nằm trong .fld đều 42px, cùng cỡ chữ, rộng 100%
   ô lưới. Trước đây ô đặt trong <div class="fld"> không ăn luật `label input{width:100%}`
   nên hẹp hơn hẳn ô bên cạnh (khối Khai báo chủ nhà). */
.card input[type="text"],
.card input[type="date"],
.card input[type="number"],
.card input:not([type]),
.card select,
.card .chon > input,
.card .ac > input{
  width:100%; height:42px; min-height:42px; box-sizing:border-box;
  font-size:14px; line-height:normal; padding:0 12px; margin-top:3px;
  /* Viền + bo góc phải đặt ở đây luôn. Luật cũ chỉ nhắm `label input` nên ô nào
     nằm trong <div class="fld"> thì giữ viền xám mặc định của trình duyệt và
     GÓC VUÔNG — cùng một hàng mà cái vuông cái tròn (ô «Tên chủ nhà»). */
  border:1px solid var(--vien); border-radius:10px; background:var(--dn-ffffff); color:inherit;
}
.card input:focus,.card select:focus,.card .chon > input:focus,.card .ac > input:focus{
  outline:2px solid var(--xanh); outline-offset:-1px; border-color:var(--xanh);
}
.card .chon > input{padding-right:28px}
.card .ac > input{padding-right:42px}
.card .fld.o-tien input{font-size:16px}
.card input[type="checkbox"]{width:16px;height:16px;min-height:0;margin-top:0;padding:0}
.card .tim{height:42px;margin-top:0}
.bar .tim,.bar input[type="date"]{height:42px;box-sizing:border-box}

/* ---------- BO GÓC ĐỒNG BỘ CHO NÚT ----------
   Đang mỗi nút một kiểu: 8px · 9px · 10px, riêng nút lọc thì vuông 0px. Thống nhất:
   nút hộp = 10px, nút trong dải lọc = viên thuốc, ô tích/nhỏ giữ nguyên. */
.card button,.bar button,.sub-foot button,.actions button,
.btn-primary,.btn-ghost,.btn-nho-trang,.nut-tim-kh,.mini,.xoa{border-radius:10px}
.seg button{border-radius:9px}
.loc button{border-radius:9px}
.loc{border-radius:11px;overflow:hidden}
.lnk-chia,.lnk-nho{border-radius:0}          /* dạng chữ gạch chân, không phải nút hộp */

/* ---------- màn dự toán ---------- */
.dt-so{grid-template-columns:repeat(4,1fr);margin:10px 0}
#dt-bang input{height:36px;margin-top:0;text-align:right;font-weight:600}
#dt-bang .dt-ly{text-align:left;font-weight:400}
#dt-bang td{padding:6px 10px}
/* thanh mức dùng dự toán */
.thanh{display:inline-block;width:74px;height:8px;border-radius:99px;background:var(--dn-e8ecea);
  vertical-align:middle;margin-right:6px;overflow:hidden}
.thanh i{display:block;height:100%;border-radius:99px;background:var(--thu)}
.thanh.sat i{background:var(--vang)}
.thanh.vuot i{background:var(--chi)}
@media(max-width:620px){.dt-so{grid-template-columns:repeat(2,1fr)}}

/* ---------- BẢNG DỰ TOÁN: một tờ liền mạch, điền như Excel ---------- */
.dt-to{max-height:none}
table.dt-bang{min-width:900px;border-collapse:collapse}
table.dt-bang th{position:sticky;top:0;z-index:2;background:var(--nen)}
table.dt-bang th,table.dt-bang td{border:1px solid var(--dv-e6ebe9);padding:0}
table.dt-bang th{padding:8px 10px}
table.dt-bang td{padding:2px 4px;vertical-align:middle}
table.dt-bang td.stt{width:44px;text-align:center;color:var(--mo);font-size:14px}
table.dt-bang th.stt{width:44px;text-align:center}
table.dt-bang .giua{text-align:center}

/* Ô nhập nằm gọn TRONG ô bảng, KHÔNG viền riêng — nhìn đúng như bảng tính.
   Phải viết `.card table…` vì luật đồng bộ ô nhập toàn app (.card input) có độ ưu
   tiên cao hơn, không thì ô trong bảng vẫn bo góc 10px cao 42px như ô thường. */
.card table.dt-bang input,.card table.dt-bang select{
  width:100%;height:34px;min-height:34px;margin:0;border:0;border-radius:0;
  background:transparent;font-size:14px;padding:0 8px;box-shadow:none;
}
.card table.dt-bang input:focus,.card table.dt-bang select:focus{
  outline:2px solid var(--xanh);outline-offset:-2px;background:var(--dn-ffffff);border-radius:0;
}
.card table.dt-bang .dt-kl,.card table.dt-bang .dt-don-gia{text-align:right;font-weight:600}
table.dt-bang .tien-o{padding:0 10px;font-weight:700;text-align:right;background:var(--dn-fbfcfc)}
table.dt-bang tbody tr:hover td{background:var(--dn-f7faf9)}
table.dt-bang .dt-moi td{background:var(--dn-fcfdfd)}      /* dòng trống chờ điền */
table.dt-bang .xoa{width:26px;height:26px;font-size:14px;border:0;background:transparent;color:var(--dc-c0392b)}
table.dt-bang .xoa:hover{background:var(--dn-fdecea);border-radius:6px}

/* dòng tiêu đề phần: I. MÓNG · II. PHẦN THÔ … */

table.dt-bang .dt-cong td{background:var(--dn-f4f6f5);font-weight:700;font-size:14px;padding:6px 10px}
table.dt-bang .dt-cong td:last-child,table.dt-bang .dt-tongcong td:last-child{background:var(--dn-f4f6f5)}
table.dt-bang .dt-tongcong td{background:var(--xanh);color:var(--dc-ffffff);font-weight:700;
  font-size:14px;padding:9px 10px}

/* ô gõ-lọc khoản mục nằm trong ô bảng — bỏ viền, bỏ nền, cho khớp các ô khác */
.card table.dt-bang .o-l2.chon > input{
  height:34px;min-height:34px;border:0;border-radius:0;background:transparent;
  padding:0 24px 0 8px;font-size:14px;margin:0;box-shadow:none;
}
.card table.dt-bang .o-l2.chon > input:focus{outline:2px solid var(--xanh);outline-offset:-2px;background:var(--dn-ffffff)}
table.dt-bang .o-l2 .mui{right:6px;font-size:12px}
table.dt-bang .o-l2 .chon-list{min-width:240px}
table.dt-bang .o-l2.khong-khop > input{background:var(--dn-fff8f7)}

/* ================= BẢNG CHUẨN — kiểu bảng kế toán, có lưới như Excel =================
   Anh Thành đưa mẫu bảng MISA: đầu bảng nền xanh nhạt, kẻ ô rõ, dòng thoáng, dễ dò
   mắt theo hàng. Áp cho MỌI bảng trong app để nhìn đồng bộ. */
:root{--bang-dau:#e6f2f4; --bang-dau-chu:#28545c; --bang-vien:#dbe6e8; --bang-vien-dam:#a8ccd2}

.bang-cuon{border:1px solid var(--bang-vien);border-radius:8px;background:var(--dn-ffffff)}
table.bang{font-size:14px}
table.bang th{
  background:var(--bang-dau);color:var(--bang-dau-chu);font-weight:700;
  border-bottom:2px solid var(--bang-vien-dam);border-right:1px solid var(--dv-d3e4e7);
  padding:11px 12px;letter-spacing:.2px;
}
table.bang th:last-child{border-right:0}
table.bang td{
  padding:10px 12px;border-bottom:1px solid var(--bang-vien);
  border-right:1px solid var(--dv-eef3f4);vertical-align:middle;
}
table.bang td:last-child{border-right:0}
table.bang tbody tr:last-child td{border-bottom:1px solid var(--bang-vien)}
table.bang tbody tr:hover td{background:var(--dn-f3fafb)}
table.bang .ma{color:var(--dc-1a7f8c)}                    /* mã chứng từ — như liên kết trong bảng mẫu */

/* dòng tổng cuối bảng */
table.bang tfoot td{background:var(--dn-eef1f2)}

/* ---- bảng dự toán dùng chung bộ lưới đó ---- */
table.dt-bang th,table.dt-bang td{border:1px solid var(--bang-vien)}
table.dt-bang th{background:var(--bang-dau);color:var(--bang-dau-chu);
  border-bottom:2px solid var(--bang-vien-dam)}

table.dt-bang .dt-tongcong td{background:var(--bang-dau-chu);color:var(--dc-ffffff)}
table.dt-bang tbody tr:hover td{background:var(--dn-f3fafb)}
table.dt-bang .dt-tongcong:hover td{background:inherit}
.card table.dt-bang input:focus,.card table.dt-bang select:focus{background:var(--dn-fffdf0)}

/* ---------- cột GIAI ĐOẠN gộp ô dọc, kiểu merge cell của Excel ---------- */
table.dt-bang .cot-phan{width:190px}
table.dt-bang .cot-xoa{width:38px}
table.dt-bang td.dt-phan{
  width:190px;vertical-align:middle;font-weight:700;font-size:14px;
  color:var(--bang-dau-chu);background:var(--dn-fbfdfd);padding:10px 14px;
  border-right:2px solid var(--bang-vien-dam);
}
table.dt-bang td.dt-phan:hover{background:var(--dn-fbfdfd)}
table.dt-bang tr:hover td.dt-phan{background:var(--dn-fbfdfd)}
/* mỗi phần cách nhau bằng một nét đậm cho dễ phân khối */
table.dt-bang td.dt-phan{border-bottom:2px solid var(--bang-vien-dam)}
table.dt-bang tr:has(+ tr > td.dt-phan) td{border-bottom:2px solid var(--bang-vien-dam)}

/* ---------- Khoá bề ngang từng cột bảng dự toán ----------
   `table-layout:fixed` + <colgroup> = trình duyệt theo đúng số mình đặt, không tự
   chia lại. Trước đó cột giai đoạn tự phình 530px, cột Khoản Mục còn 110px. */
table.dt-bang{table-layout:fixed}
table.dt-bang col.c-phan{width:205px}
table.dt-bang col.c-stt{width:64px}
table.dt-bang col.c-l2{width:210px}
table.dt-bang col.c-dg{width:auto}        /* Diễn Giải nuốt phần dư */
table.dt-bang col.c-dvt{width:86px}
table.dt-bang col.c-kl{width:110px}
table.dt-bang col.c-giá{width:130px}
table.dt-bang col.c-tt{width:150px}
table.dt-bang col.c-ly{width:170px}
table.dt-bang col.c-xoa{width:42px}
/* luật `width:1%` của bảng chung không được áp cho bảng dự toán */
.card table.dt-bang th,.card table.dt-bang td{width:auto}
/* KHÔNG cắt tràn ở ô có ô gõ-lọc: `overflow:hidden` cắt luôn danh sách xổ xuống,
   gõ vào không nhìn thấy gợi ý (anh Thành báo 2026-08-18). Chỉ cắt ở ô chữ. */
table.dt-bang th{overflow:visible;white-space:nowrap}
table.dt-bang td{overflow:visible}

/* Danh sách gợi ý của ô khoản mục phải NỔI LÊN TRÊN, không bị bảng cắt */
.bang-cuon:has(#dt-bang){overflow:visible}
table.dt-bang .o-l2{position:relative}
table.dt-bang .o-l2 .chon-list{z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.18)}
/* danh sách gợi ý xổ ngược lên khi sát đáy màn hình */
.chon-list.len{top:auto;bottom:100%;box-shadow:0 -10px 30px rgba(0,0,0,.16)}

/* cột STT hẹp thì bớt đệm, không thì chữ «STT» bị cắt thành «S...» */
table.dt-bang th.stt,table.dt-bang td.stt{padding-left:4px;padding-right:4px}
/* tên phần dài (Sân Vườn + Cổng Hàng Rào) cho xuống dòng thay vì cắt cụt */
table.dt-bang td.dt-phan{white-space:normal;line-height:1.35;overflow:visible;text-overflow:clip}

/* ---------- màn tra cứu ---------- */
.tc-so{grid-template-columns:repeat(6,1fr);margin:0 0 12px}
@media(max-width:1100px){.tc-so{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tc-so{grid-template-columns:repeat(2,1fr)}}
body[data-tab="tracuu"] main{max-width:none;padding-left:16px;padding-right:16px}
body[data-tab="tracuu"] table.bang{min-width:0}
#tc-hoso .bang-sua{margin-bottom:4px}

/* ---------- Bảng B3 sửa được ở màn Tra cứu ----------
   Mỗi phiếu là một cụm: dòng đầu đậm là phiếu, các dòng dưới là chi tiết.
   Selector phải kèm body[data-tab] vì dòng «body[data-tab="tracuu"] table.bang{min-width:0}»
   ở trên có specificity cao hơn table.bang-b3 và sẽ đè mất.
   Độ rộng đặt bằng % và CỘNG ĐỦ 100 — table-layout:fixed mà thiếu một cột không có width
   thì phần dư dồn hết vào các cột đã có width, cột kia teo còn hơn chục pixel. */
body[data-tab="tracuu"] table.bang-b3{table-layout:fixed;width:100%;min-width:1180px}
body[data-tab="tracuu"] table.bang-b3 th.w-ma{width:11%}
body[data-tab="tracuu"] table.bang-b3 th.w-ngay{width:7.5%}
body[data-tab="tracuu"] table.bang-b3 th.w-cap{width:11%}
body[data-tab="tracuu"] table.bang-b3 th.w-nd{width:16%}
body[data-tab="tracuu"] table.bang-b3 th.w-tien{width:9.5%}
body[data-tab="tracuu"] table.bang-b3 th.w-ns{width:9%}
body[data-tab="tracuu"] table.bang-b3 th.w-nut{width:3%}
table.bang-b3 td{overflow:visible;vertical-align:middle;padding:4px 6px}
table.bang-b3 tbody tr{cursor:default}
table.bang-b3 tbody tr:hover{background:transparent}
table.bang-b3 .chon{min-width:0}
table.bang-b3 .chon-list{z-index:60;min-width:220px}
table.bang-b3 input,table.bang-b3 .chon input{
  width:100%;height:32px;margin:0;padding:0 8px;font-size:14px;border-radius:6px;
  border:1px solid var(--vien);background:var(--dn-ffffff)}
table.bang-b3 .b3-tien{text-align:right;font-variant-numeric:tabular-nums}
table.bang-b3 tr.b3-dau>td{background:var(--bang-dau);color:var(--bang-dau-chu);font-weight:600}
table.bang-b3 tr.b3-dau.b3-lech>td{background:var(--dn-fdecec);color:var(--dc-8a2b2b)}
table.bang-b3 tr.b3-dau .ghi{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.bang-b3 tr.b3-dong>td:first-child{color:var(--mo);font-size:14px}
table.bang-b3 tr.dang-luu{opacity:.55}
table.bang-b3 .xoa{border:0;background:transparent;color:var(--dc-b23b3b);font-size:16px;
  line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
table.bang-b3 .xoa:hover{background:var(--dn-fdecec)}
table.bang-b3 .mini{margin-left:6px}
.chon-hien{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mo)}
.chon-hien input{width:auto;height:auto;margin:0}
/* Ô chọn trong bảng B3 xổ ra NGOÀI ô — khung bọc phải cho tràn, y như bảng dự toán.
   overflow-x:auto sẽ kéo theo overflow-y:auto và cắt mất danh sách xổ. */
.bang-cuon:has(#tc-chitiet){overflow:visible}
/* Thông tin TỰ TRA (phòng ban · nơi làm việc) — chỉ để đọc, không phải ô nhập. */
.tu-hien{display:inline-block;margin-top:6px;font-size:14px;color:var(--mo);
  background:var(--nen);border-radius:6px;padding:3px 8px}
table.bang-b3 .tu-hien{margin:0;font-size:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}

/* ---------- 2.0 · MENU TRÁI — chọn chế độ (nhập liệu · công nợ NCC · bảng tổng hợp…) ---------- */
.nut-menu{background:rgba(255,255,255,.14);border:0;color:var(--dc-ffffff);border-radius:8px;width:32px;height:28px;
  font-size:16px;line-height:1;padding:0;display:none}
.khung{display:flex;align-items:flex-start;min-height:calc(100dvh - 52px)}
.menu-trai{position:sticky;top:52px;flex:0 0 228px;width:228px;height:calc(100dvh - 52px);overflow-y:auto;
  background:var(--dn-ffffff);border-right:1px solid var(--vien);display:flex;flex-direction:column;z-index:18;
  transition:flex-basis .18s,width .18s}
.menu-dau{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;
  font-size:14px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mo)}
.nut-gon{background:none;border:1px solid var(--vien);border-radius:6px;color:var(--mo);width:24px;height:24px;
  padding:0;font-size:14px;line-height:1}
.ds-che-do{display:flex;flex-direction:column;gap:2px;padding:4px 8px 16px}
.ds-che-do button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  border-radius:10px;padding:10px 10px;color:var(--chu);font-weight:600;font-size:14px;position:relative}
.ds-che-do button:hover{background:var(--nen)}
.ds-che-do button.on{background:var(--xanh-nhat);color:var(--xanh)}
.ds-che-do button.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:var(--xanh)}
.ds-che-do .cd-icon{font-size:16px;width:24px;text-align:center;flex:0 0 24px}
.ds-che-do .cd-ten{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-che-do .cd-cho{font-style:normal;font-size:14px;font-weight:700;color:var(--vang);background:var(--vang-nen);
  border:1px solid var(--dv-efdcb3);border-radius:6px;padding:1px 5px;white-space:nowrap}
.ds-che-do button.chua{color:var(--mo)}
/* nhóm menu + icon nét (anh chốt 24/09) */
.ds-che-do .cd-nhom{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mo);padding:12px 12px 4px}
.ds-che-do .cd-nhom:first-child{padding-top:4px}
.ds-che-do .cd-icon svg{width:18px;height:18px;display:block;margin:0 auto}
body.menu-gon .ds-che-do .cd-nhom{display:none}
.noi-dung{flex:1 1 auto;min-width:0}
.noi-dung .tabs{top:52px}
/* thu gọn menu: chỉ còn icon */
body.menu-gon .menu-trai{flex-basis:56px;width:56px}
body.menu-gon .menu-dau span,body.menu-gon .cd-ten,body.menu-gon .cd-cho{display:none}
body.menu-gon .menu-dau{justify-content:center;padding-left:6px;padding-right:6px}
body.menu-gon .ds-che-do button{justify-content:center;padding-left:6px;padding-right:6px}
body.menu-gon .nut-gon{transform:rotate(180deg)}
/* vùng nhúng app anh em */
#cd-nhung{height:calc(100dvh - 52px)}
#cd-iframe{display:block;width:100%;height:100%;border:0;background:var(--dn-ffffff)}
#cd-rong{margin:40px auto;max-width:520px;background:var(--dn-ffffff);border:1px dashed var(--vien);border-radius:var(--r);
  padding:26px 22px;text-align:center;color:var(--mo);line-height:1.6}
#cd-rong b{color:var(--chu);display:block;font-size:16px;margin-bottom:6px}
.phu-menu{display:none}
/* điện thoại / máy tính bảng: menu trượt từ trái, bấm ☰ để mở */
@media(max-width:820px){
  .nut-menu{display:inline-grid;place-items:center}
  .menu-trai{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:260px;flex-basis:260px;
    transform:translateX(-102%);transition:transform .2s;z-index:40;box-shadow:0 0 40px rgba(0,0,0,.25);
    padding-top:env(safe-area-inset-top)}
  body.menu-mo .menu-trai{transform:none}
  body.menu-mo .phu-menu{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39}
  .nut-gon{display:none}
  body.menu-gon .menu-trai{width:260px;flex-basis:260px}
  body.menu-gon .menu-dau span,body.menu-gon .cd-ten,body.menu-gon .cd-cho{display:initial}
  body.menu-gon .ds-che-do .cd-nhom{display:block}
  body.menu-gon .ds-che-do button{justify-content:flex-start;padding-left:10px;padding-right:10px}
  .khung{min-height:calc(100dvh - 46px)}
  #cd-nhung{height:calc(100dvh - 46px)}
}
@media(max-width:520px){.noi-dung .tabs{top:46px}}
/* thanh trên ở màn hẹp: tiêu đề chế độ cắt «…», cụm người dùng không được gãy dòng */
.brand{min-width:0}
#ten-che-do{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.user{flex-shrink:0;white-space:nowrap}
@media(max-width:820px){.brand .logo.sm{display:none}}

/* ==== CHUẨN GIAO DIỆN 24/09 (tools/chuan_giao_dien.py) — đừng sửa tay khối này ==== */
body{font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:16px}
label input:not([type=checkbox]):not([type=radio]):not([type=file]),label select,.chon>input,.ac input,.tim{min-height:44px}
.btn-primary{min-height:48px;font-size:16px}
.btn-ghost,.btn-reset{min-height:44px}
.card{border-radius:14px}
html.nhung .topbar{display:none}
html.nhung .tabs{top:0}
html.nhung .login-wrap{background:var(--nen)}
/* ==== hết khối chuẩn ==== */

/* Bảng Thu Chi — toàn bộ sổ B2 như Lark (27/09) */
.btc-loc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 2px 10px}
.btc-loc .tim{max-width:320px;margin:0;flex:1 1 220px}
.btc-ngay{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mo);font-weight:600}
.btc-ngay input{margin:0;width:auto;padding:9px 10px}
.btc-chon{height:44px;padding:0 10px;border:1px solid var(--vien);border-radius:9px;background:var(--dn-ffffff);font-size:14px;max-width:220px}
.btc-tong{margin:4px 2px 10px;font-size:16px}
.btc-cuon{max-height:72vh;overflow:auto}
table.bang.btc{min-width:1250px}
table.bang.btc thead th{position:sticky;top:0;z-index:1;cursor:pointer;white-space:nowrap;user-select:none}
table.bang.btc tfoot td{position:sticky;bottom:0;background:var(--nen);border-top:1px solid var(--vien)}
table.bang.btc td.ghi{max-width:320px}
.btc-them{display:flex;gap:10px;justify-content:center;margin:12px 0}
@media (max-width:820px){.btc-chon{max-width:none;flex:1 1 45%}.btc-loc .tim{max-width:none}}

/* Chi Tiết Chi Ra — toàn bộ B3 như Lark (27/09) */
table.bang.btc.ct3{min-width:1400px}
#c3-cho.on{background:var(--xanh);color:var(--dc-ffffff);border-color:var(--xanh)}
#bc-cho{margin-top:18px}

/* Hồ sơ khách bật lên (27/09) */
a.kh-mo{color:var(--xanh);font-weight:700;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
a.kh-mo:hover{text-decoration:underline}
.modal-box.hs-hop{max-width:1100px;max-height:90vh;padding:0;gap:0;overflow:hidden}
.hs-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--vien);font-size:20px}
.hs-dau span{display:flex;gap:8px}
.hs-than{overflow:auto;padding:14px 18px 20px}
.hs-tt{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;font-size:14px}
.hs-tt i{font-style:normal;color:var(--mo);margin-right:4px}
.hs-so{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hs-muc{margin:16px 0 8px;font-size:16px}
.hs-muc span{font-size:14px;color:var(--mo);font-weight:600;margin-left:6px}
table.bang.hs-bang{min-width:760px}
table.bang.hs-bang tbody tr{cursor:default}
.rong.nho{padding:10px;font-size:14px}
@media (max-width:820px){.modal-box.hs-hop{max-height:96vh}.hs-dau{font-size:16px}}

/* Lưới kiểu Lark — ô sửa thẳng (27/09) */
table.bang.luoi td{border-right:1px solid var(--dv-eef2f0)}
table.bang.luoi tbody tr{cursor:default}
table.bang.luoi td.o-sua{cursor:text}
table.bang.luoi td.o-sua:hover{box-shadow:inset 0 0 0 1px var(--xanh);background:var(--dn-ffffff)}
table.bang.luoi td.dang-sua{padding:0;overflow:visible;box-shadow:inset 0 0 0 2px var(--xanh);background:var(--dn-ffffff);position:relative}
table.bang.luoi td.dang-sua .chon{min-width:200px}
table.bang.luoi td.dang-sua input,table.bang.luoi td .o-go{width:100%;min-width:120px;border:0;outline:0;margin:0;
  padding:8px 10px;font:inherit;background:transparent}
table.bang.luoi td.dang-luu{opacity:.5}
table.bang.luoi .xoa{border:0;background:none;color:var(--chi);font-size:20px;cursor:pointer;padding:0 6px}
#tc-chitiet{min-width:1180px}
.tc-them-dong{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mo);flex-wrap:wrap}
.tc-them-dong .btc-chon{max-width:340px}

/* Hồ sơ khách — sửa thẳng (27/09) */
table.bang.hs-info{min-width:0;margin-bottom:10px}
table.bang.hs-info th{white-space:nowrap;width:1%}
table.bang.hs-info td{min-width:160px}
table.bang.luoi tr.khoa td{color:var(--mo)}
.hs-muc-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hs-muc-dong h4{margin:0;font-size:16px}

/* Ảnh chứng từ (27/09) */
td.o-anh{white-space:nowrap;cursor:pointer}
td.o-anh .anh-xem{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
td.o-anh img{width:30px;height:30px;object-fit:cover;border-radius:5px;border:1px solid var(--vien)}
td.o-anh .anh-xem b{font-size:14px;color:var(--mo);margin-left:2px}
.anh-pdf{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:5px;background:var(--dn-fdecea);color:var(--chi);
  font-size:14px;font-weight:700;border:1px solid var(--dv-f3c7c1)}
.anh-them{border:1px dashed var(--xanh);background:var(--dn-ffffff);color:var(--xanh);border-radius:6px;width:26px;height:26px;
  margin-left:4px;font-weight:700;cursor:pointer;vertical-align:middle;padding:0}
.anh-them:hover{background:var(--xanh-nhat)}
#anh-modal{z-index:80}
.modal-box.anh-hop{max-width:1000px;max-height:92vh;padding:0;gap:0;overflow:hidden}
.anh-ds{overflow:auto;padding:14px 18px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.anh-to{margin:0;border:1px solid var(--vien);border-radius:10px;overflow:hidden;background:var(--dn-ffffff)}
.anh-to img{display:block;width:100%;max-height:460px;object-fit:contain;background:var(--dn-f7f9f8)}
.anh-to figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:14px;color:var(--mo);word-break:break-all}
.anh-pdf.to{width:100%;height:160px;font-size:16px;border-radius:0;text-decoration:none}
.anh-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.anh-hang{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.anh-hang:empty{display:none}
.anh-o{position:relative;display:inline-block}
.anh-o img,.anh-o .anh-pdf{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--vien)}
.anh-o.moi img{border-color:var(--xanh)}
.anh-o .xoa-anh{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--chi);
  color:var(--dc-ffffff);font-size:14px;line-height:20px;padding:0;cursor:pointer}

/* Phiếu vi phạm luật mảng (27/09) */
table.bang tbody tr.d-sai td{background:var(--dn-fdecea)}
table.bang tbody tr.d-sai:hover td{background:var(--dn-fadbd7)}
.dau-sai{color:var(--chi)}
.btc-tong{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-sai{border:1px solid var(--chi);background:var(--dn-fdecea);color:var(--chi);font-weight:700;border-radius:9px;padding:6px 12px;cursor:pointer}
.btn-sai.on{background:var(--chi);color:var(--dc-ffffff)}
/* Hộp hồ sơ nhà: máy tính mở như 1 trang nổi ~3/4 màn hình, có viền (anh chốt 05/11 — thay «toàn màn hình» 29/09) */
@media (min-width:821px){
  #hs-modal{padding:3vh 12.5vw}
  .modal-box.hs-hop{max-width:none;width:75vw;height:88vh;max-height:none;border:1px solid var(--vien);box-shadow:0 12px 40px rgba(0,0,0,.45)}
  table.bang.hs-bang{min-width:0;width:100%}
}
/* Cảnh báo tiền sai — trên cùng hộp hồ sơ */
.hs-canh{background:var(--dn-fdecea);border:1px solid var(--dv-f1b0a8);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;color:var(--dc-8a1c12)}
.hs-canh b.dau{display:block;font-size:16px;margin-bottom:4px}
.hs-canh ul{margin:4px 0 0;padding-left:20px}
.hs-canh li{margin:2px 0}
.hs-ok{background:var(--dn-e8f4ef);border:1px solid var(--dv-b8dccb);border-radius:10px;padding:8px 14px;margin-bottom:12px;font-size:14px;color:var(--dc-0d5c46)}

/* Dòng con của phiếu chi (bản thử 30/09) */
.mo-con{border:1px solid var(--xanh);background:var(--dn-ffffff);color:var(--xanh);border-radius:6px;width:24px;height:24px;
  margin-right:6px;padding:0;font-size:14px;cursor:pointer;vertical-align:middle}
.mo-con:hover{background:var(--xanh-nhat)}
.mo-con-rong{display:inline-block;width:30px}
table.bang tr.hang-con>td{padding:4px 10px 12px 40px;white-space:normal;max-width:none}
.khung-con{border-left:3px solid var(--xanh);padding-left:10px}
table.bang.con{min-width:0;font-size:14px;background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:8px}
table.bang.con th{background:var(--dn-eef5f2);font-size:14px}
table.bang.con td{max-width:260px}
.nhan-mau{display:inline-block;margin:4px 0 6px;padding:2px 10px;border-radius:6px;background:var(--vang-nen);
  color:var(--vang);font-size:14px;font-weight:700}

/* Sọc xen kẽ (30/09): 1 phiếu trắng · 1 phiếu xám nhạt · dòng con cùng màu phiếu */
table.bang.hs-bang>tbody>tr.soc-trang>td{background:var(--dn-ffffff)}
table.bang.hs-bang>tbody>tr.soc-xam>td{background:var(--dn-f2f4f3)}
table.bang.hs-bang>tbody>tr.d-sai>td{background:var(--dn-fdecea)}
table.bang.con,table.bang.con th,table.bang.con td{background:transparent !important}
table.bang.con thead th{background:rgba(13,92,70,.07) !important}
.mo-con.them{border-style:dashed;font-weight:700}
.them-dong-con{margin-right:10px;padding:4px 10px}

/* Dòng con phiếu chi + dự toán bấm-xổ (chính thức 30/09) */
table.bang.con td.o-con{cursor:text}
table.bang.con td.o-con:hover{box-shadow:inset 0 0 0 1px var(--xanh);background:var(--dn-ffffff) !important}
table.bang.con td.o-con:focus-visible{outline:2px solid var(--xanh);outline-offset:-2px}
table.bang.con td.dang-sua{padding:0;box-shadow:inset 0 0 0 2px var(--xanh);background:var(--dn-ffffff) !important}
table.bang.con td.dang-sua .o-go{width:100%;min-width:110px;border:0;outline:0;padding:8px 10px;font:inherit;background:transparent}
table.bang.con tr.nhap td{background:var(--vang-nen) !important}
table.bang.hs-dt tr.khoan{cursor:pointer}
table.bang.hs-dt tr.khoan:hover>td,table.bang.hs-dt tr.khoan.mo-khoan>td{background:var(--xanh-nhat)}
table.bang.hs-dt tr.khoan .mo-con{display:inline-grid;place-items:center}
table.bang.hs-dt tr.xo-khoan>td{background:var(--xanh-nhat);padding:4px 12px 14px 24px;white-space:normal;max-width:none}
.khung-khoan{background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:10px;overflow-x:auto}
.tieu-khoan{padding:10px 12px;font-weight:700;border-bottom:1px solid var(--vien)}
.tieu-khoan span{color:var(--mo);font-weight:600}
.hs-muc span{font-weight:600}

/* Trích phiếu chi cho nhà khác (30/09) */
.trich-nho{font-size:14px;font-weight:600;color:var(--xanh);margin-top:2px;white-space:nowrap}
table.bang tr.hang-trich>td{background:var(--xanh-nhat);padding:6px 12px 14px 24px;white-space:normal;max-width:none;overflow:visible}
.khung-trich{border-left:3px solid var(--xanh);padding-left:12px;display:grid;gap:10px;max-width:760px}
.trich-dau{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.trich-dau b{font-size:16px}
table.bang.bang-trich{min-width:0;background:var(--dn-ffffff)}
table.bang.bang-trich td{white-space:nowrap;max-width:none;overflow:visible}
table.bang.bang-trich tr.goc td{background:var(--dn-f2f8f5)}
table.bang.bang-trich select{height:40px;min-width:280px;border:1px solid var(--vien);border-radius:8px;padding:0 8px;font:inherit}
table.bang.bang-trich .o-go{height:40px;width:160px;border:1px solid var(--vien);border-radius:8px;padding:0 10px;text-align:right;font:inherit;font-weight:700}
.trich-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trich-kiem{display:flex;flex-wrap:wrap;gap:8px 16px;padding:8px 12px;border-radius:8px;background:var(--dn-ffffff);border:1px solid var(--vien)}
.mini.on{background:var(--xanh);color:var(--dc-ffffff);border-color:var(--xanh)}

/* Bảng Thu Chi: bộ lọc 1 dòng + đóng băng cột (30/09) */
.btc-loc.mot-dong{flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.btc-loc.mot-dong>*{flex:0 0 auto}
.btc-loc.mot-dong .btc-chon{height:38px;font-size:14px;padding:0 6px;max-width:150px}
.btc-loc.mot-dong #btc-ky-chon{max-width:160px}
.btc-loc.mot-dong .btc-ngay{gap:4px;font-weight:400}
.btc-loc.mot-dong .btc-ngay input{height:38px;padding:0 6px;font-size:14px;width:128px}
.btc-loc.mot-dong .loc button{padding:7px 10px;font-size:14px}
.btc-loc.mot-dong .tim{flex:1 1 180px;min-width:170px;max-width:none;height:38px;padding:0 10px}
.btc-loc.mot-dong .btn-nho-trang{height:38px;padding:0 10px;white-space:nowrap}
.btc-loc.mot-dong #sp-lam-moi{font-size:20px;font-weight:700;width:38px;padding:0}
table.bang.btc .o-bang{position:sticky;z-index:2;background:var(--dn-ffffff)}
table.bang.btc thead .o-bang{z-index:4;background:var(--nen)}
table.bang.btc tbody tr:hover .o-bang{background:var(--xanh-nhat)}
table.bang.btc tbody tr.d-sai .o-bang{background:var(--dn-fdecea)}
table.bang.btc .o-bang-cuoi{box-shadow:4px 0 6px -3px rgba(0,0,0,.18);border-right:1px solid var(--vien)}
.menu-bang{position:fixed;z-index:90;background:var(--dn-ffffff);border:1px solid var(--vien);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:grid;min-width:240px}
.menu-bang button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:7px;font-size:14px;cursor:pointer}
.menu-bang button:hover,.menu-bang button:focus-visible{background:var(--xanh-nhat);outline:0}
@media (max-width:820px){.btc-loc.mot-dong .tim{min-width:150px}}
.btc-loc.mot-dong{align-items:center}
.btc-loc.mot-dong .btc-chon{max-width:128px}
.btc-loc.mot-dong #btc-ky-chon{max-width:130px}
.btc-loc.mot-dong .loc button{padding:7px 9px}
.btc-loc.mot-dong .tim{flex:1 1 140px;min-width:140px}

/* Bảng Thu Chi sửa thẳng như Lark + menu chuột phải (30/09) */
table.bang.btc td.o-sua{cursor:text}
table.bang.btc td.o-sua:hover{box-shadow:inset 0 0 0 1px var(--xanh)}
table.bang.btc td.dang-sua{padding:0;overflow:visible;box-shadow:inset 0 0 0 2px var(--xanh);background:var(--dn-ffffff);position:relative;max-width:none}
table.bang.btc td.dang-sua .chon{min-width:220px}
table.bang.btc td.dang-sua input,table.bang.btc td .o-go{width:100%;min-width:120px;border:0;outline:0;margin:0;padding:8px 10px;font:inherit;background:transparent}
.menu-bang .menu-dau{padding:6px 12px 4px;font-size:14px;color:var(--mo);font-weight:700}
.menu-bang .do{color:var(--chi)}
.menu-bang hr{border:0;border-top:1px solid var(--vien);margin:4px 0}

/* Tab Nhà Cung Cấp (01/10) */
body[data-tab="ncc"] main{max-width:none;padding-left:16px;padding-right:16px}
.ncc-khung{display:grid;grid-template-columns:290px minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:860px){.ncc-khung{grid-template-columns:1fr}}
.ncc-trai{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:10px;display:grid;gap:8px;position:sticky;top:110px}
.ncc-trai .tim{margin-top:0}
.ncc-ds{display:grid;gap:2px;max-height:70vh;overflow-y:auto}
@media(max-width:860px){.ncc-trai{position:static}.ncc-ds{max-height:36vh}}
.ncc-muc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;text-align:left;background:none;border:1px solid transparent;
  border-radius:9px;padding:7px 9px;cursor:pointer;font:inherit;color:inherit}
.ncc-muc:hover{background:var(--nen)}
.ncc-muc.on{background:var(--xanh-nhat);border-color:var(--xanh)}
.ncc-muc b{font-weight:600;font-size:14px}
.ncc-muc small{font-size:14px;color:var(--mo)}
.ncc-muc .p{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ncc-phai{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#ncc-che{flex-wrap:wrap}
.ncc-dau{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.ncc-ten{font-size:20px}
.ncc-cu{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--mo)}
.ncc-cu input{width:auto;margin:0}
#ncc-so{margin-bottom:0}
table.bang tr.ncc-cu-dong td{color:var(--mo);font-style:italic}
table.bang tr.ncc-thieu td{background:var(--vang-nen)}
table.bang tr.ncc-nhom td{background:var(--xanh-nhat);font-weight:700}
#ncc-ghi{display:grid;gap:3px}

/* 01/10: danh sách NCC thành ô chọn xổ xuống ở hàng trên — bảng dùng hết bề ngang */
.ncc-khung{grid-template-columns:minmax(0,1fr)}
.ncc-trai{position:relative;background:none;border:0;padding:0;display:block;top:auto;flex:1 1 260px;max-width:380px}
.ncc-trai .tim{margin:0;padding:8px 11px}
.ncc-trai .ncc-ds{display:none;position:absolute;top:calc(100% + 4px);left:0;width:min(440px,90vw);max-height:62vh;overflow-y:auto;z-index:40;
  background:var(--the);border:1px solid var(--vien);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px}
.ncc-trai.mo .ncc-ds{display:grid}
.ncc-dau{justify-content:flex-start}
.ncc-dau #ncc-che{margin-left:auto}

/* 02/10: Danh sách khách hàng (menu trái) */
body[data-tab="khachhang"] main{max-width:none;padding-left:16px;padding-right:16px}
body[data-che-do="khachhang"] #tabs{display:none}
.kh2-bang td.ma{white-space:nowrap}.kh2-bang td.ghi{max-width:420px}.kh2-mat{opacity:.5}
.kh2-bang{width:auto;min-width:640px}.kh2-ten{display:block;font-weight:400}
/* 31/10: Danh sách nhà cung cấp — cả dòng bấm được, NCC ngừng dùng mờ đi */
.dsn-bang{min-width:960px}.dsn-bang tbody tr{cursor:pointer}
.dsn-bang td.ma,.dsn-bang td.p{white-space:nowrap}.dsn-ngung{opacity:.55}
body[data-tab="dsncc"] main{max-width:none;padding-left:16px;padding-right:16px}
#dsn-lam-moi{height:44px;padding:0 12px;font-size:14px;white-space:nowrap}#dsn-che button{min-height:44px}
#dsn-dem{gap:4px 16px}.dsn-o{white-space:nowrap}#dsn-dem .nho{font-size:14px}
.dsn-bang small{font-size:14px}
.dsn-bang td.dsn-ten{max-width:none;white-space:normal;min-width:220px}   /* tên NCC dài thì xuống dòng, không cắt «…» */
.dsn-bang td small.dsn-truoc{display:block;font-weight:400}
.dsn-ma-phu{display:none}
/* tiêu đề cột dính khi cuộn — bảng cuộn trong khung cao vừa màn */
#ncc-tong .bang-cuon{overflow:auto;max-height:calc(100dvh - 250px)}
/* 31/10 chấm giao diện: cột lưới minmax(0,1fr) để bảng rộng chỉ cuộn TRONG khung, không đẩy cả trang ra ngang */
#ncc-tong{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}#ncc-tong.hidden,#ncc-chitiet.hidden{display:none}
#ncc-tong .btc-loc{gap:8px;margin:0}
#dsn-tim{height:44px;padding:0 12px}
#dsn-dem{margin:0 2px}
html.chi-ncc #ncc-tong .bang-cuon{max-height:calc(100dvh - 176px)}   /* màn nhúng không có thanh trên — bảng cao thêm */
.dsn-bang .dsn-stt,.dsn-bang .dsn-ma{width:1%;white-space:nowrap}       /* STT + Mã hẹp vừa chữ, nhường chỗ cho tên */
.dsn-bang tbody tr:hover td{background:var(--xanh-nhat)}              /* rê chuột thấy rõ dòng sắp bấm */
/* nút «← Tất cả NCC»: nút quay về rõ ràng, viền xanh — khác màu vàng của nút ⟳ Đọc lại */
#ncc-ve{height:44px;padding:0 16px;white-space:nowrap;font-size:14px;font-weight:600;
  background:var(--the);color:var(--xanh);border:1px solid var(--xanh);border-radius:10px}
#ncc-ve:hover{background:var(--xanh-nhat)}
#ncc-lam-moi{width:44px;height:44px;padding:0;font-size:16px}
#ncc-che button{min-height:44px}
.ncc-ten{font-size:20px}
.ncc-muc b{font-size:14px}.ncc-muc small{font-size:14px}
.ncc-cu{font-size:14px}
#ncc-so .kpi .so{font-weight:700}
#ncc-tong .dsn-bang thead th{position:sticky;top:0;z-index:2}
@media (min-width:821px){#ncc-tong .dsn-bang{min-width:0;width:100%}}
/* điện thoại: bỏ cột STT + Mã (mã ghi dưới tên), cột tên dính trái khi lướt ngang sang Còn nợ */
@media (max-width:600px){
  #ncc-tong .bang-cuon,html.chi-ncc #ncc-tong .bang-cuon{max-height:calc(100dvh - 120px)}
  /* hàng lọc: ô tìm trên cùng (dùng nhiều nhất) · 2 ô chọn · chế độ + Đọc lại chung 1 hàng */
  #dsn-tim{order:-1;flex:1 1 100%}
  #dsn-che{flex:1 1 auto}#dsn-che button{flex:1 1 auto}
  /* chi tiết: «← Tất cả NCC» + ô chọn NCC + ⟳ chung hàng đầu; 4 chế độ xếp 2×2 */
  .ncc-dau{gap:8px}
  .ncc-dau .ncc-trai{order:1;flex:1 1 120px;max-width:none}
  .ncc-dau #ncc-lam-moi{order:2}
  /* danh sách xổ: canh mép phải ô ⟳ (44px + khe 8px), rộng hết màn trừ lề 16px — không tràn ngang */
  .ncc-dau .ncc-trai .ncc-ds{left:auto;right:-52px;width:calc(100vw - 32px)}
  .ncc-dau>div:not(.ncc-trai):not(#ncc-che){order:3;flex:1 1 100%}
  .ncc-dau #ncc-che{order:4;display:grid;grid-template-columns:1fr 1fr;flex:1 1 100%;margin-left:0}
  #ncc-che button{border-right:0}
  .dsn-bang{min-width:760px}
  .dsn-bang .dsn-stt,.dsn-bang .dsn-ma{display:none}
  .dsn-ma-phu{display:block}
  .dsn-bang td.dsn-ten{white-space:normal;min-width:150px;max-width:170px}
  .dsn-bang .dsn-ten{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--bang-vien)}
  #ncc-tong .dsn-bang thead th.dsn-ten{z-index:3}
}
/* 02/10: ?chi=ncc — chỉ màn Nhà Cung Cấp (nhúng trong app «Nợ nhà cung cấp») */
html.chi-ncc .topbar,html.chi-ncc #menu-trai,html.chi-ncc #phu-menu,html.chi-ncc #tabs{display:none!important}
html.chi-ncc .khung{display:block;min-height:0}
/* 02/10: phiếu CHI không bắt buộc mã khách */
body[data-loai="CHI"] .sao-thu{display:none}

/* 02/10: Cần kế toán chốt */
body[data-tab="canchot"] main{max-width:none;padding-left:16px;padding-right:16px}
body[data-che-do="canchot"] #tabs,body[data-che-do="khachhang"] #tabs{display:none}
.ck-bang td.ghi{max-width:440px}.ck-xong{opacity:.6}
.kh2-sua{border:0;background:none;color:var(--mo);cursor:pointer;font-size:14px;padding:0 4px;opacity:.5}.kh2-o:hover .kh2-sua{opacity:1;color:var(--xanh)}

/* ===================================================================================
   ĐỢT 3 (01/11) — giao diện Thu chi cho NGƯỜI MỚI (vòng soát 10 agent · G1–G13)
   Token theo tools/ui-chuan/nt-ui.css (màu cùng giá trị khối :root đầu tệp). Khối mới chỉ dùng biến.
   =================================================================================== */
:root{
  --c12:12px; --c14:14px; --c16:16px; --c20:20px; --c28:28px;
  --k4:4px; --k8:8px; --k12:12px; --k16:16px; --k24:24px; --k32:32px;
  --bo-nho:8px; --bo:12px; --bo-lon:16px; --cham:44px; --cham-chinh:48px;
  --mat:#ffffff; --mat-2:#eef2f0; --chu-2:#5f6b67;
  --chinh:#0d5c46; --chinh-chu:#ffffff; --chinh-nhat:#e8f3ef;
  --tot:#0f8a5f; --de-y:#b7791f; --nguy:#c0392b; --tin:#2a6fb0;
  --de-y-nen:#fdf6e3; --nguy-nen:#fdf1ef;
}

/* G1 · đang mở sổ: chưa biết có phiên hay chưa thì không hiện ô mật khẩu */
.man-mo{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--k16);
  background:var(--nen);color:var(--chu-2);font-size:var(--c16)}
.man-mo .logo{margin:0}
.xoay{display:inline-block;width:28px;height:28px;border-radius:50%;border:3px solid var(--vien);border-top-color:var(--chinh);
  animation:xoay .8s linear infinite;vertical-align:middle;flex:none}
.xoay.nho{width:16px;height:16px;border-width:2px}
.xoay.trang{width:18px;height:18px;border-width:2px;border-color:rgba(255,255,255,.4);border-top-color:var(--chinh-chu);margin-right:var(--k8)}
@keyframes xoay{to{transform:rotate(360deg)}}

/* G2 · ô mật khẩu có nút 👁 · lỗi báo tại ô · lối thoát «Đăng xuất» */
.o-mk{position:relative;display:block}
.o-mk input{padding-right:56px !important}
.nut-mat{position:absolute;right:2px;top:50%;transform:translateY(-50%);margin-top:2px;width:var(--cham);height:var(--cham);
  border:0;background:none;border-radius:var(--bo-nho);font-size:var(--c16);line-height:1;padding:0;opacity:.6}
.nut-mat:hover,.nut-mat.on{opacity:1;background:var(--mat-2)}
.loi-o{display:block;min-height:21px;margin-top:var(--k4);font-size:var(--c14);font-weight:600;color:var(--nguy)}
.loi-o:empty{min-height:0}
.mk-hop{max-width:420px;gap:var(--k12)}
.mk-tieude{font-size:var(--c20);line-height:1.3}
.mk-giai{margin:0;font-size:var(--c14);line-height:1.5;color:var(--chu);background:var(--chinh-nhat);border-radius:var(--bo-nho);padding:var(--k12)}
#form-mk input.sai{border-color:var(--nguy) !important;background:var(--nguy-nen)}
.lnk-xam{align-self:center;min-height:var(--cham);padding:0 var(--k16);border:0;background:none;color:var(--chu-2);
  font-size:var(--c14);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lnk-xam:hover{color:var(--nguy)}

/* hộp hỏi lại (thay confirm() của trình duyệt) */
#hoi-modal{z-index:90}
.hoi-hop{max-width:440px;gap:var(--k16)}
.hoi-chu{font-size:var(--c16);line-height:1.5;white-space:pre-line;color:var(--chu)}
.hoi-hop .actions .btn-primary{flex:1}
.btn-primary.nguy{background:var(--nguy)}
.btn-primary.nguy:hover{background:var(--nguy)}

/* G5/G6 · thông báo nằm ĐẦU màn hình, không che nút Lưu ở cuối form */
.bao-dau{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--k8) + env(safe-area-inset-top));z-index:95;
  display:flex;flex-direction:column;align-items:center;gap:var(--k8);width:min(560px,calc(100vw - 2 * var(--k16)));pointer-events:none}
.bao-dau .da-luu,.bao-dau .toast{position:static;transform:none;left:auto;top:auto;bottom:auto;max-width:100%;width:100%;
  pointer-events:auto;white-space:normal;overflow-wrap:anywhere}
.bao-dau .da-luu{font-size:var(--c16)}
.bao-dau .toast{font-size:var(--c14);line-height:1.5}

/* G8 · tài khoản trong menu ☰ (điện thoại) — trên PC vẫn có ở thanh trên */
.menu-tk{margin-top:auto;border-top:1px solid var(--vien);padding:var(--k12) var(--k8) calc(var(--k16) + env(safe-area-inset-bottom));display:grid;gap:var(--k4)}
.menu-tk-ten{padding:0 var(--k8) var(--k4);display:grid;font-size:var(--c14)}
.menu-tk-ten small{color:var(--chu-2);font-size:var(--c14)}
.menu-tk button{min-height:var(--cham);text-align:left;border:0;background:none;border-radius:var(--bo-nho);padding:0 var(--k12);
  font-size:var(--c14);font-weight:600;color:var(--chu)}
.menu-tk button:hover{background:var(--nen)}
.menu-tk button.do{color:var(--nguy)}
body.menu-gon .menu-tk{display:none}
.nut-tk{min-height:var(--cham);padding:0 var(--k8);font-size:var(--c14)}
@media(max-width:820px){ .user .nut-tk{display:none} .user{font-size:var(--c14)} }

/* G8 · thanh tab: bóng mờ + mũi tên › ở mép phải khi còn tab bị khuất */
.tabs-khung{position:sticky;top:52px;z-index:19;background:var(--mat)}
.tabs-khung .tabs{position:relative;top:auto}
.tabs-mui{display:none;position:absolute;z-index:21;right:0;top:0;bottom:1px;width:56px;align-items:center;justify-content:flex-end;
  padding-right:var(--k8);font-size:var(--c28);line-height:1;font-weight:700;color:var(--chinh);cursor:pointer;
  background:linear-gradient(to right,rgba(255,255,255,0),var(--mat) 55%)}
.tabs-khung.con-phai .tabs-mui{display:flex}
.tabs button{min-height:var(--cham)}
html.nhung .tabs-khung{top:0}
html.chi-ncc #tabs-khung,body[data-che-do="khachhang"] #tabs-khung,body[data-che-do="canchot"] #tabs-khung{display:none!important}
@media(max-width:520px){ .tabs-khung{top:46px} }

/* G9 · ngày viết thêm bằng chữ (ô ngày của trình duyệt có máy hiện kiểu Mỹ) */
.ngay-chu{display:block;margin-top:var(--k4);font-size:var(--c14);font-weight:600;color:var(--chinh)}
.ngay-chu.chua{color:var(--nguy)}

/* G6 · số dư dưới ô tài khoản: xuống dòng được, âm = đỏ, chưa có trong tồn quỹ = vàng */
#form-phieu .so-du{display:block;margin:var(--k4) 0 0;font-size:var(--c14);font-weight:700;white-space:normal;overflow:visible;text-overflow:clip}
#form-phieu .so-du:empty{display:none}
.so-du.duong{color:var(--chinh)} .so-du.am{color:var(--nguy)} .so-du.chua-co{color:var(--de-y)}

/* G8 · chữ phụ ≥ 14px */
.hint,.goi-y-cay,.goi-y-cay button,.tich-boc,.kpi .nhan,.kh-dong small,.ac-list small,.chon-list .nhom-dau,
.btn-nho-trang,.tag,.mini,.lnk-nho,.chep-nho,.btn-reset,.anh-to figcaption,.cay-meta,.phien-dong,.ds-che-do .cd-nhom,.menu-dau{font-size:var(--c14)}
.kpi .nhan{line-height:1.3}

/* G8 · giữ sẵn chỗ cho dòng đọc số tiền, dòng «còn thiếu» và khung chọn nhánh → form không nhảy khi chữ hiện ra */
#form-phieu .doc-tien{min-height:42px}
#form-phieu .doc-tien:empty{display:block;visibility:hidden}
#form-phieu .goi-y-cay{min-height:34px}
#form-phieu .goi-y-cay:empty{display:block;visibility:hidden}
.khoa-ly{min-height:21px;font-size:var(--c14);font-weight:600;color:var(--de-y);line-height:1.5}
#form-phieu .err{min-height:21px}

/* G8 · nút + ô tích ≥ 44px (ô tích 24px, bấm được cả dòng chữ) */
.btn-nho-trang,.btn-ghost,.btn-reset,.loc button,.chep-nho,.btn-sai,.lnk-chia,.vien-chon,.chips button,.kb-nut-them{min-height:var(--cham)}
.btn-nho-trang{padding:0 var(--k12);display:inline-flex;align-items:center;justify-content:center;gap:var(--k4)}
#o-tich-boc,.tich-boc{min-height:var(--cham);align-items:center;cursor:pointer}
.tich-boc input,#form-phieu .tich-boc input[type="checkbox"],.card input[type="checkbox"]{width:24px;height:24px;min-height:0}
.lam-lai{display:flex;justify-content:center;margin-top:var(--k4)}
.lam-lai .btn-reset{padding:0 var(--k16)}
#btn-luu.dang{opacity:.85;cursor:progress}
#btn-luu:disabled:not(.dang){opacity:.5;cursor:not-allowed}
.anh-cho{display:inline-flex;align-items:center;gap:var(--k8);color:var(--de-y);font-weight:600}
.anh-o.dang-nen img{opacity:.45}

/* G7 · khung chia nhỏ: 5 ô một hàng (L3 · L4 · nội dung · tiền · xoá) */
#bc-rows .ct-row{grid-template-columns:1fr 1.1fr 1.3fr .9fr auto}
.xoa{min-width:var(--cham);min-height:var(--cham)}
.chon-list .them-moi{color:var(--chinh);font-weight:700;background:var(--chinh-nhat)}
.chon-list .them-moi.sel{background:var(--chinh);color:var(--chinh-chu)}
.ac-list .khong-thay{color:var(--chu-2);font-size:var(--c14);cursor:default}

/* G11 · Bảng Thu Chi: nút «✎ Sửa» / «🗑 Xoá» ở dòng sửa được · ô đang sửa có Lưu / Huỷ */
table.bang .nut-cot{white-space:nowrap;max-width:none;overflow:visible}
.nut-dong{display:inline-flex;gap:var(--k4)}
.nut-sua,.nut-xoa{min-height:36px;padding:0 var(--k8);border-radius:var(--bo-nho);border:1px solid var(--vien);background:var(--mat);
  font-size:var(--c14);font-weight:600;white-space:nowrap}
.nut-sua{color:var(--chinh);border-color:var(--chinh)}
.nut-xoa{color:var(--nguy);border-color:var(--nguy)}
.nut-sua:hover{background:var(--chinh-nhat)} .nut-xoa:hover{background:var(--nguy-nen)}
.han-sua{display:block;font-size:var(--c12);color:var(--chu-2)}
table.bang td.dang-sua{overflow:visible}
.o-nut{position:absolute;right:0;top:100%;z-index:8;display:flex;gap:var(--k4);padding:var(--k4);background:var(--mat);
  border:1px solid var(--chinh);border-radius:0 0 var(--bo-nho) var(--bo-nho);box-shadow:var(--bong)}
.o-nut button{min-height:36px;padding:0 var(--k12);border-radius:var(--bo-nho);border:1px solid var(--vien);background:var(--mat);
  font-size:var(--c14);font-weight:700;white-space:nowrap;min-width:0 !important;width:auto !important}
.o-nut .o-luu{background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu)}
.o-nut .o-huy{color:var(--chu-2)}

/* G10 · mã B có chữ giải thích */
.ma-b{display:inline-flex;align-items:center;gap:var(--k4);font-weight:400;color:var(--chu-2);cursor:help;font-size:var(--c14)}
.ma-b-chu{font-size:var(--c14)}
.can-sua{margin-top:var(--k12);padding:var(--k12) var(--k16);border-radius:var(--bo-nho);background:var(--de-y-nen);
  border:1px solid var(--de-y);color:var(--chu);font-size:var(--c14);line-height:1.5}
.can-sua b{color:var(--de-y)}
.can-sua ol{margin:var(--k8) 0 0;padding-left:var(--k24)}

/* G13 · danh sách khách lâu chưa cập nhật = tô vàng · lọc «Phiếu tôi nhập» */
.canh-vang{display:inline-block;padding:2px var(--k8);border-radius:var(--bo-nho);background:var(--de-y-nen);color:var(--de-y);font-weight:700}
#ck-cua-toi.on{background:var(--chinh);border-color:var(--chinh);color:var(--chinh-chu)}
#ck-quet .xoay,#kh2-dong-bo .xoay{width:16px;height:16px;border-width:2px}

/* G8 · điện thoại */
@media(max-width:820px){
  /* nút nào cũng ≥ 44px — kể cả nút nhỏ trong bảng */
  #man-app button,.modal button{min-height:var(--cham)}
  .nut-menu{min-width:var(--cham);min-height:var(--cham)}
  .anh-o .xoa-anh{width:var(--cham);height:var(--cham);top:-14px;right:-14px;line-height:var(--cham);background:transparent;
    color:var(--chinh-chu);font-size:var(--c16);z-index:1}
  .anh-o .xoa-anh::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--nguy);z-index:-1}
  .anh-o{margin:var(--k8) var(--k8) 0 0}
  .anh-them,.mo-con,.kh2-sua,.cay-them,.cay-xoa,.nut-gon{min-width:var(--cham);min-height:var(--cham)}
  .nut-sua,.nut-xoa,.o-nut button{min-height:var(--cham)}
}
@media(max-width:620px){
  .strip{grid-template-columns:repeat(2,1fr)}
  #bc-rows .ct-row{grid-template-columns:1fr 1fr}
  #bc-rows .ct-row .ct-nd{grid-column:1 / -1}
}
@media(max-width:480px){
  /* mọi ô xếp 1 cột — ô chia đôi bị cắt chữ gợi ý */
  .hang-1,.hang-cap,.hang-3,.row2,.row3{grid-template-columns:1fr !important}
  .hang-1 .o-tien,.hang-cap .c-l3{grid-column:auto}
  #o-tich-boc{grid-column:auto}
  /* nút 🔍 thành nút riêng 44px bên cạnh ô, không đè lên chữ */
  .ac{display:flex;gap:var(--k8);align-items:flex-end}
  .ac > input{flex:1 1 auto;min-width:0;padding-right:var(--k12) !important}
  .ac .nut-tim-kh{position:static;transform:none;flex:none;width:var(--cham);height:var(--cham);margin-top:3px}
  .ct-row,.ct-row.khong-l4,#bc-rows .ct-row{grid-template-columns:1fr auto}
  .ct-row > .ct-l3,.ct-row > .ct-l4,.ct-row > .ct-nd{grid-column:1 / -1}
  .ct-row .xoa{grid-column:2;justify-self:end}
  .sub-foot{flex-direction:column;align-items:stretch}
  .dau-form .seg button{font-size:var(--c14)}
}

/* G8 · PC cũng vậy: nút + ô nhập ≥ 44px; nút 🔍 là nút riêng cạnh ô (không đè lên chữ) */
.ds-che-do button,.seg button,#form-phieu .seg button,.nut-gon,.anh-them,.nut-sua,.nut-xoa,.o-nut button{min-height:var(--cham)}
.nut-gon,.anh-them{min-width:var(--cham)}
body.menu-gon .nut-gon{min-width:var(--cham)}
#form-phieu input[type="text"],#form-phieu input[type="date"],#form-phieu input:not([type]),#form-phieu .chon > input,#form-phieu .ac > input,
.card input[type="text"],.card input[type="date"],.card input:not([type]),.card select,.card .chon > input,.card .ac > input{height:var(--cham);min-height:var(--cham)}
.ac{display:flex;gap:var(--k8);align-items:flex-end}
.ac > input{flex:1 1 auto;min-width:0;padding-right:var(--k12) !important}
.ac .nut-tim-kh{position:static;transform:none;flex:none;width:var(--cham);height:var(--cham);margin-top:3px}
.card input[type="checkbox"],#form-phieu input[type="checkbox"]{width:24px;height:24px;min-height:0}

/* G11 · cột «Sửa / Xoá» dính mép phải trên PC — bảng rộng 1.250px không phải kéo ngang mới thấy nút */
@media(min-width:821px){
  table.bang.btc th.nut-cot,table.bang.btc td.nut-cot{position:sticky;right:0;z-index:2;background:var(--mat);box-shadow:-4px 0 6px -3px rgba(0,0,0,.18)}
  table.bang.btc thead th.nut-cot{z-index:4;background:var(--bang-dau)}
  table.bang.btc tbody tr:hover td.nut-cot{background:var(--chinh-nhat)}
}

/* lọc ở Bảng Thu Chi / các bảng: ô chọn ≥ 44px (đợt 3 · G8) */
.btc-chon,select.btc-chon{min-height:var(--cham)}
/* chữ phụ còn sót ≥ 14px · ô tra mã ≥ 44px (đợt 3 · G8) */
.kh2-ten,.dsn-ma-phu,.dsn-truoc,table.bang td small.dsn-truoc,table.bang .cham{font-size:var(--c14)}
#tc-ma{min-height:var(--cham)}
/* dòng đếm ở Cần kế toán chốt / Danh sách khách là câu văn — không chia cột flex (đợt 3 · G13) */
#ck-dem,#kh2-dem{display:block;line-height:1.6}
#ck-dem b,#kh2-dem b{margin:0 2px}
.kh2-sua,.cay-them{min-width:36px;min-height:36px}

/* ==== ĐỢT 5 · NỀN TỐI (đợt 5 chấm giao diện 01/11/2026 — mã màu cứng thành biến; nền sáng giữ nguyên màu cũ) ==== */
:root{--dn-0d5c46:#0d5c46;--dn-062b22:#062b22;--dn-ffffff:#ffffff;--dc-ffffff:#ffffff;--dc-3e4b47:#3e4b47;--dc-c0392b:#c0392b;--dc-cfe8de:#cfe8de;--dc-a9b5b0:#a9b5b0;--dv-f0f3f2:#f0f3f2;--dn-fff8f7:#fff8f7;--dv-f2f5f4:#f2f5f4;--dn-ffeaa7:#ffeaa7;--dc-1d2422:#1d2422;--dv-d6e6df:#d6e6df;--dv-f0dfae:#f0dfae;--dv-e6d5a4:#e6d5a4;--dn-9c6717:#9c6717;--dn-fdecea:#fdecea;--dv-dde8e3:#dde8e3;--dn-dde8e3:#dde8e3;--dn-eef6f2:#eef6f2;--dn-fdf5e8:#fdf5e8;--dn-eef3fd:#eef3fd;--dn-f6eefb:#f6eefb;--dv-e8b4ae:#e8b4ae;--dn-fdf3f2:#fdf3f2;--dn-fff6d6:#fff6d6;--dn-fbfcfc:#fbfcfc;--dn-e6f6ee:#e6f6ee;--dn-1d2422:#1d2422;--dn-c0392b:#c0392b;--dn-dff2e8:#dff2e8;--dn-f8e2de:#f8e2de;--dn-a5301f:#a5301f;--dc-c3ccc8:#c3ccc8;--dc-8a5a00:#8a5a00;--dn-fff3cd:#fff3cd;--dn-fdf1ef:#fdf1ef;--dv-f2c9c2:#f2c9c2;--dc-7a3b32:#7a3b32;--dn-2a6fb0:#2a6fb0;--dn-1f8a5f:#1f8a5f;--dn-d0692b:#d0692b;--dn-e8ecea:#e8ecea;--dv-e6ebe9:#e6ebe9;--dn-f7faf9:#f7faf9;--dn-fcfdfd:#fcfdfd;--dn-f4f6f5:#f4f6f5;--dv-d3e4e7:#d3e4e7;--dv-eef3f4:#eef3f4;--dn-f3fafb:#f3fafb;--dc-1a7f8c:#1a7f8c;--dn-eef1f2:#eef1f2;--dn-fffdf0:#fffdf0;--dn-fbfdfd:#fbfdfd;--dn-fdecec:#fdecec;--dc-8a2b2b:#8a2b2b;--dc-b23b3b:#b23b3b;--dv-efdcb3:#efdcb3;--dv-eef2f0:#eef2f0;--dv-f3c7c1:#f3c7c1;--dn-f7f9f8:#f7f9f8;--dn-fadbd7:#fadbd7;--dv-f1b0a8:#f1b0a8;--dc-8a1c12:#8a1c12;--dn-e8f4ef:#e8f4ef;--dv-b8dccb:#b8dccb;--dc-0d5c46:#0d5c46;--dn-eef5f2:#eef5f2;--dn-f2f4f3:#f2f4f3;--dn-f2f8f5:#f2f8f5}
[data-theme="dark"]{color-scheme:dark;--xanh:#35b585;--xanh-nhat:#16302a;--xanh-dam:#2a9d72;--thu:#3fbf8a;--chi:#ec7d71;--nen:#101413;--the:#181d1b;--vien:#2f3836;--chu:#e9ecea;--mo:#a3aeaa;--vang:#e0a84a;--vang-nen:#2e2717;--c1:#3fbf8a;--c2:#eba25a;--c3:#6aa6e0;--c4:#a98fe3;--thu-nen:#142c22;--thu-vien:#2d5a46;--chi-nen:#341d1a;--chi-vien:#6b3a33;--bang-dau:#1d2b2e;--bang-dau-chu:#9fd0d8;--bang-vien:#2b3639;--bang-vien-dam:#3d5a60;--mat:#181d1b;--mat-2:#222927;--chu-2:#a3aeaa;--chinh:#35b585;--chinh-chu:#0f1513;--chinh-nhat:#16302a;--tot:#3fbf8a;--de-y:#e0a84a;--nguy:#ec7d71;--tin:#6aa6e0;--de-y-nen:#2e2717;--nguy-nen:#341d1a;--bong:0 1px 3px rgba(0,0,0,.5);--dn-0d5c46:#35b585;--dn-062b22:#123a2f;--dn-ffffff:#181d1b;--dc-ffffff:#0f1513;--dc-3e4b47:#bfcac7;--dc-c0392b:#dc6c61;--dc-cfe8de:#0f1513;--dc-a9b5b0:#97a59f;--dv-f0f3f2:#323f3a;--dn-fff8f7:#261512;--dv-f2f5f4:#303f3a;--dn-ffeaa7:#463d22;--dc-1d2422:#e9ecea;--dv-d6e6df:#315042;--dv-f0dfae:#5b5031;--dv-e6d5a4:#605534;--dn-9c6717:#dbb070;--dn-fdecea:#2c1715;--dv-dde8e3:#324a3f;--dn-dde8e3:#22332b;--dn-eef6f2:#172c21;--dn-fdf5e8:#2d2415;--dn-eef3fd:#141c2a;--dn-f6eefb:#22152b;--dv-e8b4ae:#5d3732;--dn-fdf3f2:#291514;--dn-fff6d6:#332d19;--dn-fbfcfc:#182020;--dn-e6f6ee:#173024;--dn-1d2422:#d5dcd9;--dn-c0392b:#d15447;--dn-dff2e8:#193526;--dn-f8e2de:#331c18;--dn-a5301f:#d87162;--dc-c3ccc8:#96a69f;--dc-8a5a00:#e7c88d;--dn-fff3cd:#37301a;--dn-fdf1ef:#2a1714;--dv-f2c9c2:#56342e;--dc-7a3b32:#cd8e85;--dn-2a6fb0:#5194d3;--dn-1f8a5f:#78ddb4;--dn-d0692b:#d17b47;--dn-e8ecea:#222a26;--dv-e6ebe9:#35433d;--dn-f7faf9:#172420;--dn-fcfdfd:#162020;--dn-f4f6f5:#101413;--dv-d3e4e7:#2e4e54;--dv-eef3f4:#2c4145;--dn-f3fafb:#142629;--dc-1a7f8c:#76d6e2;--dn-eef1f2:#1e2527;--dn-fffdf0:#292614;--dn-fbfdfd:#122424;--dn-fdecec:#2b1515;--dc-8a2b2b:#d47575;--dc-b23b3b:#cf6d6d;--dv-efdcb3:#5a4d31;--dv-eef2f0:#314139;--dv-f3c7c1:#56332e;--dn-f7f9f8:#19221e;--dn-fadbd7:#351c19;--dv-f1b0a8:#5d3732;--dc-8a1c12:#e4877e;--dn-e8f4ef:#173026;--dv-b8dccb:#335e49;--dc-0d5c46:#5fd0a4;--dn-eef5f2:#192a23;--dn-f2f4f3:#1e2321;--dn-f2f8f5:#162920}
/* ==== hết khối nền tối ==== */
/* ==== ĐỢT 5 · chấm giao diện (01/11/2026) ==== */
/* Đổi mật khẩu / Đăng xuất chỉ 1 chỗ: menu trái. Thu gọn menu trái thì mới hiện ở thanh trên */
@media(min-width:821px){ body:not(.menu-gon) .user .nut-tk{display:none} }
.nut-nen{min-height:var(--cham);padding:0 var(--k8);font-size:var(--c14);font-weight:600;white-space:nowrap}
@media(max-width:820px){ .user .nut-nen{display:none} }
/* ==== ĐỢT 5 · chung 4 mục: thanh trên ở nền tối không chói ==== */
:root{--thanh-tren:var(--xanh);--thanh-tren-chu:#ffffff;--thanh-tren-phu:#cfe8de}
[data-theme="dark"]{--thanh-tren:#123a2f;--thanh-tren-chu:#e9ecea;--thanh-tren-phu:#b9d9cc}
.topbar{background:var(--thanh-tren);color:var(--thanh-tren-chu)}
.topbar .lnk{color:var(--thanh-tren-phu)}
.topbar .logo.sm{background:var(--thanh-tren-chu);color:var(--thanh-tren)}
/* ==== ĐỢT 5 · nút + ô chọn ≥ 44px cả trên PC; nút chữ nhỏ trong câu: vùng bấm 44px mà không đẩy chữ ==== */
#man-app button:not(.lnk-nho):not(.ghim):not(.mini):not(.lnk):not(.nut-mat),#man-app select{min-height:44px}
#man-app .lnk-nho,#man-app .mini{display:inline-block;padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
/* ==== ĐỢT 5 · chữ: <b> trong chữ đậm không lên 900 · tiêu đề cột viết thường (dễ đọc hơn chữ HOA giãn) ==== */
b,strong{font-weight:700}
.chon-list .nhom-dau,.so-dau,.no-dau,.cl-dau,.lich-dau,table th{text-transform:none;letter-spacing:0}
#man-app a.mo-nha{display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
#man-app a.kh-mo{display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
/* ĐỢT 5 · điện thoại: nhóm nút lọc không bẻ chữ thành 3 dòng — nút giữ 1 dòng, thiếu chỗ thì xuống hàng */
@media(max-width:600px){ #man-app .loc{flex-wrap:wrap;gap:4px;padding:4px} #man-app .loc button{white-space:nowrap;flex:1 0 auto} }
/* ĐỢT 5 · điện thoại: dải số đầu trang 2 cột (4 cột bóp chữ còn 1–2 từ mỗi dòng) */
@media(max-width:600px){ #man-app .strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ĐỢT 5 · «Danh sách nhà cung cấp» là mục riêng như «Danh sách khách hàng» → không hiện dải tab của Thu chi (bấm nhầm là nhảy mục) */
body[data-che-do="dsncc"] #tabs-khung{display:none!important}
[data-theme="dark"] .cay-doc{--m1:#35b585;--m2:#eba25a;--m3:#6aa6e0;--m4:#b77fd0}
/* ĐỢT 5 · tương phản nền sáng: chữ vàng / nhãn L2–L3 / tháng không có số / dấu «—» đủ đọc (≥ 4.5 với chữ, ≥ 3 với dấu trống) */
:root:not([data-theme="dark"]){--vang:#946112;--de-y:#946112;--dc-b7791f:#946112;--c2:#b45f12;--c3:#2a6fb0;--dc-c3ccc8:#7d8984}
#man-app .tat{color:var(--dc-ffffff)}
/* 01/11 — nợ NCC (B6) trong hồ sơ nhà */
/* nhãn «có thể trùng»: cỡ 12, không bị ô tên NCC cắt «…» (bảng chung đặt nowrap + max-width) */
.nhan-trung{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;background:var(--vang-nen);color:var(--vang);border:1px solid #f0dfae}
table.bang td.o-ncc{white-space:normal;max-width:none;overflow:visible;min-width:180px}
.hs-loi{margin:12px 0;padding:8px 12px;border-radius:8px;background:var(--vang-nen);color:var(--vang);font-size:14px}
/* có thêm 2 ô nợ NCC → dải số 8 ô: chia đều 4×2 thay vì 6+2 lẻ; dự toán 5 ô: 1 hàng trên PC, ô lẻ trải hết hàng trên điện thoại */
@media(min-width:621px){
  .tc-so:has(> .kpi:nth-child(7)),.hs-so:has(> .kpi:nth-child(7)){grid-template-columns:repeat(4,1fr)}
  #dt-tong:has(> .kpi:nth-child(5)){grid-template-columns:repeat(5,1fr)}
}
@media(max-width:620px){
  #dt-tong:has(> .kpi:nth-child(5):last-child) > .kpi:last-child{grid-column:1/-1}
}
#tc-no .hs-muc:first-child{margin-top:0}

/* 01/11: màn NCC «Theo nhà» — nhà còn nợ nổi lên đầu */
table.ncc-nha tr.ncc-nha-dong[data-nha]{cursor:pointer}
table.ncc-nha tr.ncc-nha-dong[data-nha]:hover td{background:var(--xanh-nhat)}
table.ncc-nha tr.con-no td:first-child{box-shadow:inset 3px 0 0 var(--chi)}
table.ncc-nha tr.tra-hon td:first-child{box-shadow:inset 3px 0 0 var(--vang)}
table.ncc-nha tr.da-xong td{color:var(--mo)}
table.ncc-nha .v-vang{color:var(--vang)}
.ncc-tt{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ncc-tt.no{background:var(--chi-nen);color:var(--chi)}
.ncc-tt.du{background:var(--vang-nen);color:var(--vang)}
.ncc-tt.xong{background:var(--nen);color:var(--mo)}
table.ncc-nha-con{margin:0}
/* chấm giao diện 01/11: đỏ chỉ cho «còn nợ» (ô số + bảng cùng 1 màu); nút xổ ▸ đủ to; số chính đọc được trong 3 giây */
#ncc-so .kpi.con-no{background:var(--chi-nen);border-color:var(--chi-vien)}
#ncc-so .kpi.con-no .so{color:var(--chi)}
@media(min-width:621px){#ncc-so .kpi .so{font-size:20px}}
table.ncc-nha .mo-con{display:inline-grid;place-items:center;margin-right:8px}
table.ncc-nha > tbody > tr.xo-khoan > td{background:var(--xanh-nhat);padding:4px 12px 12px 24px;white-space:normal;max-width:none}
table.ncc-nha-con td.ghi{max-width:none;white-space:normal}
/* điện thoại: mỗi nhà là 1 thẻ — dòng 1 tên nhà + tình trạng, dòng 2 ba con số có nhãn → «Còn nợ» không bị đẩy ra ngoài màn */
@media(max-width:620px){
  table.bang.ncc-nha,table.bang.ncc-nha-con{min-width:0;display:block}
  table.ncc-nha > tbody,table.ncc-nha > tfoot,table.ncc-nha-con > tbody{display:block}
  table.ncc-nha > thead{display:none}
  table.ncc-nha > tbody > tr.ncc-nha-dong,table.ncc-nha > tfoot > tr{display:grid;grid-template-columns:repeat(3,1fr);column-gap:8px;padding:8px 12px}
  table.ncc-nha > tfoot > tr{background:var(--nen)}
  table.ncc-nha > tbody > tr.ncc-nha-dong > td,table.ncc-nha > tfoot > tr > td{border:0;padding:4px 0;max-width:none;width:auto;background:none}
  table.ncc-nha > tbody > tr.ncc-nha-dong{border-bottom:1px solid var(--bang-vien)}
  table.ncc-nha tr.con-no{box-shadow:inset 4px 0 0 var(--chi)}
  table.ncc-nha tr.tra-hon{box-shadow:inset 4px 0 0 var(--vang)}
  table.ncc-nha tr.con-no td:first-child,table.ncc-nha tr.tra-hon td:first-child{box-shadow:none}
  table.ncc-nha td.o-nha{grid-column:1/3;grid-row:1;white-space:normal}
  table.ncc-nha td.o-tt{grid-column:3;grid-row:1;text-align:right;overflow:visible;white-space:normal}
  table.ncc-nha td.o-tt .ncc-tt{white-space:normal;text-align:center;border-radius:8px}
  table.ncc-nha td[data-l]{grid-row:2;font-size:14px}
  table.ncc-nha td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:400;color:var(--mo)}
  table.ncc-nha td.o-con{font-size:16px}
  table.ncc-nha > tbody > tr.xo-khoan{display:block}
  table.ncc-nha > tbody > tr.xo-khoan > td{display:block;width:auto;padding:4px 12px 12px 16px}
  table.ncc-nha-con thead{display:none}
  table.ncc-nha-con tr{display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bang-vien)}
  table.ncc-nha-con tbody tr:last-child{border-bottom:0}
  table.ncc-nha-con td{border:0!important;padding:0;width:auto;max-width:none;background:none!important}
  table.ncc-nha-con td.ghi{grid-column:1/-1;grid-row:2;font-size:14px}
  table.ncc-nha-con td.rong-o{display:none}
}

/* 02/11 chấm giao diện — nợ chốt 20/08 + số âm «trả trước» */
small.du-truoc{font-size:12px;font-weight:400}
/* sổ đối chiếu: cột «Nội dung» là cột co giãn (không phải cột Mua/Nghiệm thu), xuống dòng thay vì cắt «…» */
table.ncc-doi th:nth-last-child(3){width:1%}
table.ncc-doi th:nth-child(3),table.ncc-doi td.o-nd{width:100%}
table.ncc-doi td.o-nd{max-width:none;white-space:normal;min-width:240px}
table.ncc-doi td.o-du{white-space:nowrap}
@media(max-width:620px){
  #ncc-so > .kpi:last-child:nth-child(odd){grid-column:1/-1}   /* số ô lẻ: ô cuối trải hết hàng, không hụt nửa */
  .dsn-bang{min-width:860px}
  /* sổ đối chiếu thành thẻ: dòng 1 ngày + loại · dòng 2 nội dung · dòng 3 số có nhãn — «Còn nợ sau» luôn trong màn */
  table.bang.ncc-doi{min-width:0;display:block}
  table.ncc-doi > thead{display:none}
  table.ncc-doi > tbody{display:block}
  table.ncc-doi > tbody > tr{display:grid;grid-template-columns:max-content 1fr max-content;column-gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bang-vien)}
  table.ncc-doi > tbody > tr > td{border:0;padding:2px 0;max-width:none;width:auto!important;min-width:0;overflow:visible}
  table.ncc-doi td.o-ngay{grid-row:1;grid-column:1}
  table.ncc-doi td.o-loai{grid-row:1;grid-column:2;justify-self:start}
  table.ncc-doi td.o-nd{grid-row:2;grid-column:1/-1;font-size:14px;min-width:0}
  table.ncc-doi td[data-l]{grid-row:3;grid-column:1/3;font-size:14px}
  table.ncc-doi td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:400;color:var(--mo)}
  table.ncc-doi td[data-l]:not(.o-du){text-align:left}
  table.ncc-doi td.o-du{grid-column:3;text-align:right}
  table.ncc-doi td.rong-o{display:none}
  table.ncc-doi tr.ncc-doi-dau td.o-nd{grid-column:1/3}
  table.ncc-doi tr.ncc-doi-dau td.o-du{grid-row:1/3;grid-column:3}
  table.ncc-doi tr.ncc-doi-dau td.o-loai{display:none}
  table.ncc-doi > tbody > tr > td{background:none!important}   /* nền sọc tô cả thẻ, không loang lổ theo từng ô */
  table.ncc-doi > tbody > tr.soc-xam{background:var(--nen)}
  table.ncc-doi > tbody > tr.ncc-nhom{background:var(--xanh-nhat);font-weight:700}
  /* thẻ «Theo nhà»: cột «Còn nợ» rộng hơn để số tỷ (1.147.124.000) không bị cắt «…»; nhãn ô đã ghi «Trả trước» nên bỏ chữ nhỏ trùng */
  table.ncc-nha > tbody > tr.ncc-nha-dong,table.ncc-nha > tfoot > tr{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.2fr)}
  table.ncc-nha small.du-truoc{display:none}
}
/* bảng tổng NCC thêm cột nợ chốt: tiêu đề cột số được xuống 2 dòng để cả bảng vừa màn PC 1440, không cuộn ngang */
.dsn-bang thead th{white-space:normal;line-height:1.3;vertical-align:bottom}
@media(min-width:621px){.dsn-bang td.dsn-ten{min-width:200px}}
/* ô số NCC (PC + điện thoại): nhãn trên · số dưới — nhãn «Nợ chốt 20/08», «Trả trước» không bị gãy 2 dòng cạnh con số to */
#ncc-so .kpi{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:8px 12px}
@media(max-width:620px){#ncc-so .kpi .so{font-size:16px}}
/* dòng ghi chú cách tính dưới dải số: được xuống dòng — trước đây nowrap đẩy cả trang cuộn ngang trên điện thoại */
#dsn-dem .nho.dsn-o{white-space:normal}
table.ncc-doi td b{font-weight:700}   /* dòng mở đầu đậm sẵn — <b> không lên 900 */

/* 03/11 chấm giao diện — «Chi tiết đã mua» CHỈ XEM
   PC: tiêu đề cột không giả là bấm được (không sắp xếp), cột vật tư/hạng mục xuống dòng thay vì cắt «…», ghi chú co lại.
   Điện thoại: mỗi dòng mua thành 1 thẻ — ngày · mã nhà · thành tiền ở dòng 1, không phải cuộn ngang bảng 1250px. */
table.bang.ncc-bang thead th{cursor:default}
table.ncc-bang th:nth-child(4),table.ncc-bang td.o-vt{width:auto}
table.ncc-bang td.o-vt{white-space:normal;max-width:none;min-width:240px}
table.ncc-bang td.ghi{width:1%;white-space:normal;max-width:240px}
table.ncc-bang .nhan-dt{display:none}
#ncc-ghi{gap:4px;margin-top:0}
#ncc-ghi .ncc-chi-xem{color:var(--chu);font-size:14px;background:var(--the);border:1px solid var(--vien);border-left:4px solid var(--xanh);
  border-radius:8px;padding:8px 12px}
@media(max-width:620px){
  #ncc-noi .btc-cuon{max-height:none;overflow:visible}
  table.bang.ncc-bang{min-width:0;display:block}
  table.ncc-bang > thead{display:none}
  table.ncc-bang > tbody,table.ncc-bang > tfoot{display:block}
  table.ncc-bang > tbody > tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;align-items:center;
    padding:8px 12px;border-bottom:1px solid var(--bang-vien)}
  table.ncc-bang > tbody > tr > td{border:0!important;padding:2px 0;max-width:none;width:auto;min-width:0;background:none!important}
  table.ncc-bang > tbody > tr.soc-xam{background:var(--nen)}
  table.ncc-bang > tbody > tr.ncc-thieu{background:var(--vang-nen)}
  table.ncc-bang td.o-ngay{grid-row:1;grid-column:1}
  table.ncc-bang td.o-nha{grid-row:1;grid-column:2}
  table.ncc-bang td.o-tien{grid-row:1;grid-column:3;text-align:right;font-size:16px;font-weight:700;overflow:visible}
  table.ncc-bang td.o-kh{grid-row:2;grid-column:1/-1;white-space:normal}
  table.ncc-bang td.o-vt{grid-row:3;grid-column:1/-1;min-width:0}
  table.ncc-bang td[data-l]{grid-row:4;text-align:left;font-size:14px}
  table.ncc-bang td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:400;color:var(--mo)}
  table.ncc-bang td.ghi{grid-column:1/-1;max-width:none;font-size:12px;color:var(--mo)}
  table.ncc-bang td.o-phieu{grid-column:1/-1;font-size:12px}
  table.ncc-bang td.ghi:empty,table.ncc-bang td.o-phieu:empty{display:none}
  table.ncc-bang .nhan-dt{display:inline;font-weight:400;color:var(--mo)}
  table.ncc-bang > tbody > tr > td.rong{grid-column:1/-1}
  table.ncc-bang > tfoot > tr{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;background:var(--nen)}
  table.ncc-bang > tfoot > tr > td{border:0;padding:0;position:static;max-width:none;width:auto;background:none}
  table.ncc-bang > tfoot td.o-trong{display:none}
  table.ncc-bang > tfoot td.o-tien{font-size:16px}
}

/* 03/11: bảng nổi 1 nhà ở tab Nhà cung cấp › Theo nhà
   chấm giao diện 03/11: hộp cao vừa nội dung (không phủ cả màn, không lẹm đáy) · nút Đóng trung tính cùng hàng tiêu đề ·
   3 ô số nhãn trên / số to dưới, «Còn nợ» đỏ như dải số NCC · cột «Nội dung» là cột giãn · dòng Cộng dính đáy khi cuộn ·
   điện thoại: mỗi dòng thành 1 thẻ, số tiền không bị đẩy ra ngoài màn. */
.modal-box.nn-hop{max-width:880px;height:auto;max-height:calc(100vh - 36px);border-radius:16px}
#nn-modal .hs-dau{flex-wrap:nowrap;align-items:center}
#nn-modal .hs-dau > b{flex:1;min-width:0;line-height:1.3}
#nn-modal .hs-dau > span{flex:none}
#nn-dong{min-height:44px;padding:0 16px;font-size:14px;font-weight:600;color:var(--chu);background:var(--the);border:1px solid var(--vien)}
#nn-dong:hover{background:var(--nen)}
#nn-body .hs-so{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
#nn-body .kpi{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:8px 12px}
#nn-body .kpi .so{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
#nn-body .kpi.con-no{background:var(--chi-nen);border-color:var(--chi-vien)}
#nn-body .kpi.con-no .so{color:var(--chi)}
.nn-mo{margin:0 0 12px;font-size:14px}
#nn-body .bang-cuon{overflow:visible}
table.bang.nn-bang{min-width:0;width:100%;font-variant-numeric:tabular-nums}
table.bang.nn-bang th,table.bang.nn-bang td{width:1%;white-space:nowrap}
table.bang.nn-bang th:nth-child(3),table.bang.nn-bang td.o-nd{width:auto;white-space:normal;max-width:none;min-width:240px}
/* đỏ chỉ cho «còn nợ» (luật 01/11) — số nợ phát sinh từng dòng màu chữ thường, giống sổ đối chiếu + ô số «Nợ» */
table.nn-bang td.o-tien.v-chi,table.nn-bang tfoot td.v-chi:not(.o-du){color:var(--chu)}
table.bang.nn-bang tfoot td{position:sticky;bottom:-20px;background:var(--nen);border-top:2px solid var(--bang-vien-dam);overflow:visible}
@media (max-width:620px){
  #nn-modal{padding:8px}
  .modal-box.nn-hop{max-width:none;width:100%;max-height:calc(100dvh - 16px)}
  #nn-modal .hs-dau{padding:8px 8px 8px 16px;gap:8px}
  #nn-modal .hs-than{padding:12px 16px 16px}
  /* 3 ô số: mỗi ô 1 hàng — nhãn trái, số phải (3 số tỷ không vừa 3 cột 110px) */
  #nn-body .hs-so{grid-template-columns:1fr;gap:4px}
  #nn-body .kpi{flex-direction:row;align-items:baseline;justify-content:space-between}
  #nn-body .kpi .so{font-size:16px}
  /* bảng → thẻ: dòng 1 ngày · loại · số tiền của dòng · dòng 2 nội dung · dòng 3 «Còn nợ sau» */
  table.bang.nn-bang{display:block;min-width:0}
  table.nn-bang > thead{display:none}
  table.nn-bang > tbody,table.nn-bang > tfoot{display:block}
  table.nn-bang > tfoot{position:sticky;bottom:-16px}   /* dòng Cộng dính đáy hộp khi cuộn (bù lề dưới 16px) */
  table.nn-bang > tbody > tr{display:grid;grid-template-columns:max-content 1fr max-content;gap:4px 8px;align-items:center;
    padding:8px 12px;border-bottom:1px solid var(--bang-vien)}
  table.nn-bang > tbody > tr.soc-xam{background:var(--nen)}
  table.nn-bang > tbody > tr > td{border:0!important;padding:0;width:auto!important;max-width:none;min-width:0;background:none!important;overflow:visible}
  table.nn-bang td.o-ngay{grid-row:1;grid-column:1}
  table.nn-bang td.o-loai{grid-row:1;grid-column:2;justify-self:start}
  table.nn-bang > tbody td.o-tien{grid-row:1;grid-column:3;font-size:16px;font-weight:700}
  table.nn-bang td.rong-o{display:none}
  table.nn-bang td.o-nd{grid-row:2;grid-column:1/-1;font-size:14px;min-width:0}
  table.nn-bang > tbody td.o-du{grid-row:3;grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
  table.nn-bang td[data-l]::before{content:attr(data-l);font-size:12px;font-weight:400;color:var(--mo)}
  /* dòng Cộng gọn: «Cộng N dòng» trên · 3 số có nhãn cùng 1 hàng — không chiếm ¼ màn khi dính đáy */
  table.nn-bang > tfoot > tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 12px;background:var(--nen);
    border-top:2px solid var(--bang-vien-dam)}
  table.nn-bang > tfoot > tr > td{position:static;border:0!important;box-shadow:none;padding:0;width:auto;max-width:none;background:none;font-size:14px;overflow:visible}
  table.nn-bang > tfoot td.o-cong{grid-column:1/-1;text-align:left}
  table.nn-bang > tfoot td[data-l]::before{display:block}
  table.nn-bang > tfoot small.du-truoc{display:none}
}

/* 04/11 hộp 1 nhà: «Chi tiết công nợ» (L4 · SL · ĐV · Đơn giá · Thành tiền, nút Sửa) + «Đã thanh toán» */
.nn-muc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px;font-size:15px}
.nn-muc:first-of-type{margin-top:4px}
#nn-body .nn-cuon{overflow-x:auto}
table.bang.nn-b2{min-width:0;width:100%;font-variant-numeric:tabular-nums}
table.bang.nn-b2 th,table.bang.nn-b2 td{padding:9px 10px}
@media (max-width:620px){table.bang.nn-bang-no{min-width:560px}}
table.bang.nn-b2 th,table.bang.nn-b2 td{width:1%;white-space:nowrap;vertical-align:middle}
table.bang.nn-b2 td.o-nd,table.bang.nn-b2 th:nth-child(2){width:auto;white-space:normal}
table.bang.nn-bang-tra th:nth-child(3),table.bang.nn-bang-tra td.o-nd{width:auto}
table.bang.nn-b2 tr.nn-khoan > td{border-top:1px solid var(--vien)}
table.bang.nn-b2 tr.nn-con > td{border-top:0;padding-top:4px;padding-bottom:4px;font-size:14px;color:var(--chu)}
table.bang.nn-b2 tr.nn-con .nn-l4{display:inline-block;padding-left:12px;border-left:3px solid var(--c4)}
table.bang.nn-b2 td.o-tien.v-chi{color:var(--chu)}
table.bang.nn-b2 tfoot td{background:var(--nen);border-top:2px solid var(--vien)}
table.bang.nn-b2 td.o-nut{text-align:right}
.nn-sua{min-height:32px;padding:0 10px;font-size:13px;font-weight:600}

table.bang.nn-bang-tra th:nth-child(2){width:1%;white-space:nowrap}
/* 04/11: dòng nghiệm thu / vật tư sửa thẳng trong hộp nhà · nút xoá dòng */
table.bang.nn-b2 tr.nn-vt td.o-sua{cursor:text}
table.bang.nn-b2 tr.nn-vt td.o-sua:hover{background:var(--xanh-nhat)}
.nn-xoa{width:32px;height:32px;padding:0;border:1px solid var(--vien);border-radius:8px;background:var(--the);color:var(--chi);font-size:16px;line-height:1;cursor:pointer}
.nn-xoa:hover{background:#fff1ef;border-color:var(--chi)}
#nn-them-dong{min-height:36px;padding:0 14px;font-size:14px;font-weight:600}
table.bang.nn-b2 tr.nn-them-hang > td{padding:8px 10px;background:var(--the)}

/* 04/11 «Tổng hợp công nợ» (?chi=tonghop): mỗi khoản nợ 1 hàng theo mã */
html.chi-ncc #th-khung .th-cuon{max-height:calc(100dvh - 150px);overflow:auto}
table.bang.th-bang{width:100%;min-width:1020px;font-variant-numeric:tabular-nums}
table.bang.th-bang th,table.bang.th-bang td{white-space:nowrap;vertical-align:middle}
table.bang.th-bang td.th-nd{white-space:normal;min-width:200px}
table.bang.th-bang th.sx{cursor:pointer;user-select:none}
table.bang.th-bang th.sx:hover,table.bang.th-bang th.sx.on{color:var(--xanh)}
table.bang.th-bang tbody tr{cursor:pointer}
table.bang.th-bang tbody tr:hover td{background:var(--xanh-nhat)}
table.bang.th-bang td.th-ma{font-weight:700}
table.bang.th-bang td.th-ma small{display:block;font-weight:400;font-size:12px;color:var(--mo)}
table.bang.th-bang tfoot td{position:sticky;bottom:0;background:var(--nen);border-top:2px solid var(--vien)}

/* 04/11 Tra cứu: 1 ô tìm, tên công trình nằm cùng hàng bên phải · 7 ô số trên 1 hàng */
.tc-dau{flex-wrap:wrap;align-items:center}
.tc-tieude{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:16px;color:var(--chu);min-width:0}
.tc-tieude b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-so:has(> .kpi:nth-child(7)){grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:1250px){.tc-so:has(> .kpi:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.tc-so:has(> .kpi:nth-child(7)){grid-template-columns:repeat(2,minmax(0,1fr))}.tc-tieude{margin-left:0;width:100%}}
.tc-so .kpi{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0}
.tc-so .kpi .nhan{white-space:nowrap}
.tc-so .kpi .so{font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 04/11 Tra cứu: dòng chi tiết L3 · L4 ngay dưới phiếu */
.tc-bang-phieu tr.tc-co-con > td{border-bottom-color:transparent}
.tc-bang-phieu tr.tc-con > td{padding-top:4px;padding-bottom:4px;font-size:13px;color:var(--mo);background:var(--nen);border-top:0}
.tc-bang-phieu tr.tc-con .tc-l3{display:inline-block;padding-left:10px;border-left:3px solid var(--c4);color:var(--chu);font-weight:600}
.tc-bang-phieu td,.tc-bang-phieu th{padding-left:10px;padding-right:10px}
.tc-bang-phieu td.o-l3,.tc-bang-phieu td.o-nguon{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-bang-phieu td.ghi{max-width:150px}
.tc-bang-phieu td,.tc-bang-phieu th{padding-left:8px;padding-right:8px}
#tc-chi-tieude{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tc-loc-chi{font-weight:400}
.tc-loc-chi button{font-size:13px}
.cham.tc-tra{background:var(--vang-nen);color:var(--vang)}
.tc-bang-phieu .cham{font-size:12px;padding:2px 7px;white-space:nowrap}
.tc-bang-phieu td.ghi{max-width:130px}
.tc-bang-phieu td.ghi{max-width:120px}
#hang-bc.hang-bc-1{grid-template-columns:1fr}
/* 04/11 anh bỏ nút «+ Chia phiếu này thành nhiều khoản» ở form phiếu chi (sửa phiếu cũ đã có chi tiết vẫn mở được) */
#hang-chia{display:none!important}
/* 04/11 chia tiền trả NCC */
.th-chia:not(:empty){margin:4px 0 16px;padding:12px;border:1px solid #f0dfae;background:var(--vang-nen);border-radius:12px}
.th-chia-dau{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:15px}
table.bang.th-bang-chia{min-width:900px}
table.bang.th-bang-chia tbody tr{cursor:default}
.chia-goi{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chia-goi button small{color:var(--mo);font-weight:400}
.chia-hang{display:grid;grid-template-columns:minmax(0,1fr) 180px 32px;gap:8px;margin-bottom:8px;align-items:center}
.chia-hang input{width:100%;padding:9px 10px;border:1px solid var(--vien);border-radius:9px;font-size:14px}
.chia-hang .chia-tien{text-align:right;font-variant-numeric:tabular-nums}
.chia-chan{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 8px}
.th-chia .bang-cuon{max-height:320px;overflow:auto}
/* 04/11 bảng tổng hợp theo nhà cung cấp */
.th-ncc-khoi{margin:0 0 16px;padding:12px;border:1px solid var(--vien);background:var(--the);border-radius:12px}
.th-ncc-bang .bang-cuon{max-height:calc(100dvh - 190px);overflow:auto}
table.bang.th-bang-ncc{min-width:640px}
table.bang.th-bang-ncc tr.dang-chon td{background:var(--xanh-nhat)}
#nn-body .hs-so.ncc-rieng-so{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:620px){#nn-body .hs-so.ncc-rieng-so{grid-template-columns:1fr}}
/* 04/11 sổ công nợ theo nhà cung cấp */
table.bang.sc-bang{min-width:900px}
table.bang.sc-bang tr.sc-ncc td{background:var(--nen);border-top:2px solid var(--vien);cursor:pointer;font-size:15px}
table.bang.sc-bang tr.sc-ncc:hover td{background:var(--xanh-nhat)}
table.bang.sc-bang tr.sc-dong td{font-size:14px}
table.bang.sc-bang tr.sc-dong td:first-child{padding-left:28px}
table.bang.sc-bang tr.sc-no[data-sc-sua]{cursor:pointer}
/* 04/11 bấm mã đơn phiếu chi → diễn giải chi cho nhà nào */
table.btc td.mo-dg{cursor:pointer}
table.btc td.mo-dg:hover{text-decoration:underline}
table.btc td.o-chia div+div{margin-top:2px}
/* 04/11 Bảng Thu Chi gọn: cột chữ dài cắt bớt (trỏ chuột / bấm vào ô vẫn thấy đủ), tiền đứng ngay sau tên khách */
table.btc td:nth-child(5),table.btc td:nth-child(10){max-width:170px}
table.btc td:nth-child(8){max-width:140px}
table.btc td:nth-child(9){max-width:130px}
table.btc td:nth-child(11){max-width:200px}
table.btc td:nth-child(5),table.btc td:nth-child(8),table.btc td:nth-child(9),table.btc td:nth-child(10),table.btc td:nth-child(11){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.btc td.dang-sua{max-width:none!important;overflow:visible!important}
table.btc td:nth-child(6){font-weight:700;white-space:nowrap}
table.btc td.mo-dg{white-space:nowrap}
/* 04/11 anh bỏ ô «Nhà cung cấp / thầu» ở phiếu chi — app vẫn tự điền theo L3 nhà thầu (máy chủ cũng tự lấy theo L3) */
#hang-bc{display:none!important}

/* 05/11: «Khai báo danh mục» mở từ menu trái — ẩn hàng tab như Danh sách khách hàng */
body[data-che-do="khaibao"] #tabs-khung{display:none!important}