: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,#0d5c46,#062b22)}
.login-box{background:#fff;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:#fff;display:grid;place-items:center;
  font-weight:800;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:#3e4b47}
label input,label select,.tim{width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--vien);
  border-radius:10px;background:#fff;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:#fff;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:#fff;color:var(--xanh);border:1px solid var(--vien);border-radius:10px;padding:11px 14px;font-weight:600}
.err{color:#c0392b;font-size:14px;min-height:18px;font-weight:600}

/* ---------- khung app ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--xanh);color:#fff;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:12px}
  .user #u-ten{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs{top:46px}
}
.lnk{background:none;border:0;color:#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:#fff;
  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:#c0392b}
.hint{font-size:12px;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:#fff;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:800;color:var(--mo);letter-spacing:.3px}
.seg button.on{background:#fff;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:800;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:#a9b5b0}
.nhan{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#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:#fff;font-size:12px;font-weight:800;
  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:12px;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:#fff;border:1px solid currentColor;color:inherit;border-radius:16px;
  padding:2px 10px;font-size:12px;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:12px;
  font-weight:500;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:12px;padding:0}
.lnk-nho:hover{color:var(--chi)}
.chep-nho{background:#fff;border:1px solid var(--vien);color:var(--xanh);border-radius:7px;
  padding:3px 9px;font-size:12px;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:12px}
.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 #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:#fff}
.kh-dong b{color:var(--xanh)}
.kh-dong.sel b,.kh-dong.sel small{color:#fff}
.kh-dong small{display:block;color:var(--mo);font-size:12px;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:#fff;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:#fff;font-weight:400;cursor:pointer}
.chon > input:focus{cursor:text}
.chon.khong-khop > input{border-color:var(--chi);background:#fff8f7}
.chon > input:focus{outline:2px solid var(--xanh);outline-offset:-1px;border-color:var(--xanh)}
.chon > input::placeholder{color:#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:#fff;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 #f2f5f4}
.chon-list div:last-child{border-bottom:0}
.chon-list div.sel{background:var(--xanh);color:#fff}
.chon-list div em{font-style:normal;background:#ffeaa7;color:#1d2422;border-radius:3px}
.chon-list div.sel em{background:rgba(255,255,255,.3);color:#fff}
.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:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:6px 12px;border-bottom:1px solid #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 #f0dfae;border-radius:10px;padding:9px 12px;
  font-size:14px;font-weight:700;color:var(--vang)}
.btn-nho-trang{background:#fff;border:1px solid #e6d5a4;color:var(--vang);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700}
body.dang-sua .btn-primary{background:var(--vang)}
body.dang-sua .btn-primary:hover{background:#9c6717}

/* ---------- bóc chi tiết ---------- */
.loc{display:flex;gap:0;border:1px solid var(--vien);border-radius:9px;overflow:hidden;background:#fff}
.loc button{border:0;background:#fff;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:#fff}
.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:#fdecea;color:#c0392b}
.tag.du{background:var(--vang-nen);color:var(--vang)}

/* ---------- SƠ ĐỒ CÂY TRỤC DỌC ---------- */
.cay-doc{background:#fff;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 #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:#dde8e3}
.cay-doc > .cay-nut > .cay-hang::before{display:none}
.cay-hang.c1{border-left-color:var(--m1);background:#eef6f2}
.cay-hang.c2{border-left-color:var(--m2);background:#fdf5e8}
.cay-hang.c3{border-left-color:var(--m3);background:#eef3fd}
.cay-hang.c4{border-left-color:var(--m4);background:#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:#fff;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:#fff;font-size:12px;font-weight:800;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:12px;color:var(--mo);white-space:nowrap}
.cay-them{background:#fff;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:#fff}
.cay-xoa{background:#fff;border:1px solid var(--vien);color:#a9b5b0;border-radius:8px;
  width:32px;height:32px;font-size:16px;line-height:1;flex:none;padding:0}
.cay-xoa:hover{color:#c0392b;border-color:#e8b4ae;background:#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:12px;font-weight:700;
  padding:1px 7px;border-radius:20px;white-space:nowrap}
.cay-nhan-nho{font-size:12px;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:#fff;border:1.5px dashed var(--xanh)}
.cay-them-nhan{font-size:12px;font-weight:800;color:#fff;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:12px;font-weight:700;border:1px solid var(--vien);background:#fff}
.cay-them-hang button.luu{background:var(--xanh);border-color:var(--xanh);color:#fff}
.cay-them-loi{color:#c0392b;font-size:12px;font-weight:600;width:100%}

/* ---------- cây khai báo ---------- */
.kb-mang{background:#fff;border:1px solid var(--vien);border-radius:12px;margin-bottom:11px;overflow:hidden}
.kb-mang > summary{padding:12px 14px;font-weight:800;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:12px;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:12px}
.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:#c0392b;background:#fdecea}
.kb-trong{font-size:12px;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:#fff;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:#fff}
.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:#fff;border-color:var(--xanh)}
.ct-row .ct-l4{min-width:0}
.kb-nhan{display:inline-block;font-size:12px;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:#fff;border:1px dashed var(--vien);color:var(--xanh);border-radius:20px;
  padding:3px 11px;font-size:12px;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:#fff;border:1px solid var(--vien);
  border-left:3px solid var(--xanh);border-radius:10px;padding:10px 13px;margin-bottom:11px;font-size:12px;color:var(--mo)}
.con-gio{font-size:12px;font-weight:700;color:var(--vang)}
.het-gio{font-size:12px;font-weight:700;color:var(--mo)}

/* ---------- ghim ---------- */
.nhan-ghim{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#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:12px;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:#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:#fff;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 #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:12px}

/* ---------- khối chi tiết ---------- */
.sub-card{border:1px dashed var(--vien);border-radius:var(--r);padding:13px;background:#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:#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:#fff;border:1px solid var(--vien);border-radius:9px;width:36px;height:36px;color:#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:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:12px;box-shadow:var(--bong)}
.kpi .nhan{font-size:12px;color:var(--mo);font-weight:600}
.kpi .so{font-size:20px;font-weight:800;margin-top:3px}
.kpi.thu .so{color:var(--thu)} .kpi.chi .so{color:var(--chi)}
.kpi.canhbao{background:var(--vang-nen);border-color:#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:#fff;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:12px;color:var(--mo);margin-top:2px;overflow-wrap:anywhere}
.item .phai{text-align:right;white-space:nowrap}
.item .tien{font-weight:800;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:#fdecea;color:#c0392b}
.tag.xong{background:#e6f6ee;color:var(--thu)}
.mini{background:none;border:0;color:var(--mo);text-decoration:underline;font-size:12px;padding:2px 0}
.mini.do{color:#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:#1d2422;color:#fff;
  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:#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:#fff;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:12px}
.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:12px;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:12px}
}

.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:12px;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:#fff}
body[data-loai="THU"] #form-phieu .seg{background:#dff2e8}
body[data-loai="CHI"] #form-phieu .seg{background:#f8e2de}
body[data-loai="CHI"] #form-phieu .btn-primary{background:var(--chi)}
body[data-loai="CHI"] #form-phieu .btn-primary:hover{background:#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:#fff}

/* ---------- bảng tra cứu kiểu Excel ---------- */
.bang-cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:var(--r);background:#fff}
table.bang{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.bang th{background:var(--nen);color:#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 #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:#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:#e6f6ee;color:var(--thu)}
table.bang .cham.chi{background:#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:12px;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:800;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:#8a5a00;background:#fff3cd;border:1px solid #f0dfae;
  border-radius:8px;padding:9px 12px;margin-top:-2px;letter-spacing:.2px}
.doc-tien.canh{background:#fdf1ef;border-color:#f2c9c2;color:var(--chi)}
.doc-tien.sai{background:#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:#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:#fff;font-size:16px;font-weight:800;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:#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:800}
.khoi-treo .ly-do{flex:1 1 100%;font-weight:400;color:#7a3b32;font-size:12px}
.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:12px;color:#fff}
.tat-tk{background:#2a6fb0}      /* Thiết kế        — xanh dương */
.tat-tg{background:#1f8a5f}      /* Thi công trọn gói — xanh lá  */
.tat-nt{background:#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:#fff; 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:#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 #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:12px}
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:#fff;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:#fbfcfc}
table.dt-bang tbody tr:hover td{background:#f7faf9}
table.dt-bang .dt-moi td{background:#fcfdfd}      /* dòng trống chờ điền */
table.dt-bang .xoa{width:26px;height:26px;font-size:14px;border:0;background:transparent;color:#c0392b}
table.dt-bang .xoa:hover{background:#fdecea;border-radius:6px}

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

table.dt-bang .dt-cong td{background:#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:#f4f6f5}
table.dt-bang .dt-tongcong td{background:var(--xanh);color:#fff;font-weight:800;
  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:#fff}
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:#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:#fff}
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 #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 #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:#f3fafb}
table.bang .ma{color:#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:#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:#fff}
table.dt-bang tbody tr:hover td{background:#f3fafb}
table.dt-bang .dt-tongcong:hover td{background:inherit}
.card table.dt-bang input:focus,.card table.dt-bang select:focus{background:#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:800;font-size:14px;
  color:var(--bang-dau-chu);background:#fbfdfd;padding:10px 14px;
  border-right:2px solid var(--bang-vien-dam);
}
table.dt-bang td.dt-phan:hover{background:#fbfdfd}
table.dt-bang tr:hover td.dt-phan{background:#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:#fff}
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:#fdecec;color:#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:12px}
table.bang-b3 tr.dang-luu{opacity:.55}
table.bang-b3 .xoa{border:0;background:transparent;color:#b23b3b;font-size:16px;
  line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
table.bang-b3 .xoa:hover{background:#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:12px;color:var(--mo);
  background:var(--nen);border-radius:6px;padding:3px 8px}
table.bang-b3 .tu-hien{margin:0;font-size:12px;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:#fff;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:#fff;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:12px;font-weight:800;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:12px;font-weight:700;color:var(--vang);background:var(--vang-nen);
  border:1px solid #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:12px;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:#fff}
#cd-rong{margin:40px auto;max-width:520px;background:#fff;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:#fff;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:#fff;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:12px;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 #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:#fff}
table.bang.luoi td.dang-sua{padding:0;overflow:visible;box-shadow:inset 0 0 0 2px var(--xanh);background:#fff;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:18px;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:12px;color:var(--mo);margin-left:2px}
.anh-pdf{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:5px;background:#fdecea;color:var(--chi);
  font-size:10px;font-weight:800;border:1px solid #f3c7c1}
.anh-them{border:1px dashed var(--xanh);background:#fff;color:var(--xanh);border-radius:6px;width:26px;height:26px;
  margin-left:4px;font-weight:800;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:#fff}
.anh-to img{display:block;width:100%;max-height:460px;object-fit:contain;background:#f7f9f8}
.anh-to figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:12px;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:#fff;font-size:13px;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:#fdecea}
table.bang tbody tr.d-sai:hover td{background:#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:#fdecea;color:var(--chi);font-weight:700;border-radius:9px;padding:6px 12px;cursor:pointer}
.btn-sai.on{background:var(--chi);color:#fff}
/* Hộp hồ sơ nhà: máy tính mở TOÀN MÀN HÌNH cho dễ nhìn (anh chốt 29/09) */
@media (min-width:821px){
  #hs-modal{padding:8px}
  .modal-box.hs-hop{max-width:none;width:100%;height:calc(100vh - 16px);max-height:none}
  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:#fdecea;border:1px solid #f1b0a8;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;color:#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:#e8f4ef;border:1px solid #b8dccb;border-radius:10px;padding:8px 14px;margin-bottom:12px;font-size:14px;color:#0d5c46}

/* Dòng con của phiếu chi (bản thử 30/09) */
.mo-con{border:1px solid var(--xanh);background:#fff;color:var(--xanh);border-radius:6px;width:24px;height:24px;
  margin-right:6px;padding:0;font-size:12px;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:#fff;border:1px solid var(--vien);border-radius:8px}
table.bang.con th{background:#eef5f2;font-size:12px}
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:12px;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:#fff}
table.bang.hs-bang>tbody>tr.soc-xam>td{background:#f2f4f3}
table.bang.hs-bang>tbody>tr.d-sai>td{background:#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:800}
.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:#fff !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:#fff !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:#fff;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:12px;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:#fff}
table.bang.bang-trich td{white-space:nowrap;max-width:none;overflow:visible}
table.bang.bang-trich tr.goc td{background:#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:#fff;border:1px solid var(--vien)}
.mini.on{background:var(--xanh);color:#fff;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:18px;font-weight:700;width:38px;padding:0}
table.bang.btc .o-bang{position:sticky;z-index:2;background:#fff}
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:#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:#fff;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:#fff;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:12px;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:13px}
.ncc-muc small{font-size:11.5px;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:18px}
.ncc-cu{display:flex;gap:6px;align-items:center;font-size:13px;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:12px}
.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:12px}
.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)}