/* APP CON "HOÁ ĐƠN CQT" — tab hdcqt (KIEMKHO.HUTHD)
   Tông khối: nâu gạch (giấy tờ) --mk:#9a3412 — Khối Màu 4 điểm nhẹ, không đổ nền lớn.
   Bảng theo chuẩn: table-layout fixed + %, tên đậm trên / MST xám dưới, số căn phải,
   ≤900px chuyển thẻ dọc có vạch màu trái. */

/* -------- khối ⚠ CẦN SOI (THANHTOAN) -------- */
.cansoi{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 12px;
  background:#fff8f2;border:1px solid #f3ddc9;border-radius:11px;padding:8px 11px}
.cansoi>b{font-size:13px;color:#9a3412}
.cansoi>b i{font-style:normal;background:#9a3412;color:#fff;border-radius:10px;padding:1px 7px;font-size:11.5px;margin-left:2px}
.cansoi button{border:1px solid #f0d3ba;background:#fff;border-radius:14px;padding:4px 10px;
  font:inherit;font-size:12.5px;font-weight:600;color:#5b4a3c;cursor:pointer}
.cansoi button:hover{border-color:#9a3412;background:#fbeee8}
.cansoi button i{font-style:normal;font-weight:700;color:#9a3412;margin-left:2px}

/* -------- ô Thanh toán trong bảng -------- */
.tt-o{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;border-radius:9px;
  border:1px solid transparent;padding:3px 8px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;line-height:1.25;text-align:left}
.tt-o small{font-weight:500}
.tt-o .tt-ngay{font-size:10.5px;font-weight:500;color:inherit;opacity:.75}
.tt-ok{background:#e2f4ee;color:#047857;border-color:#04785726}
.tt-ok:hover{background:#d3eee4}
.tt-lech{background:#fef3c7;color:#92400e;border-color:#92400e26}
.tt-canh{background:#fee2e2;color:#b91c1c;border-color:#b91c1c33}
.tt-chua{background:#fff;color:#8a979c;border-color:var(--vien);font-weight:600}
.tt-chua:hover{border-color:#9a3412;color:#9a3412;background:#fbeee8}
.tt-cham{color:#d97706;font-size:17px;margin-left:3px;vertical-align:middle}

/* -------- popup thanh toán + form tay + cb ngoài tờ -------- */
.hdcqt-dlg .hdlg-tt-tong{padding:10px 16px 4px;font-size:13.5px}
.hdcqt-dlg .hdlg-tt-tong .xanh{color:#047857;font-weight:700}
.hdcqt-dlg .hdlg-tt-tong .do{color:#b91c1c;font-weight:700}
.hdcqt-dlg .hdlg-tt-tong .mo{color:#8a979c}
.hdcqt-dlg table.hdlg-tt{margin:8px 16px;width:calc(100% - 32px)}
.hdcqt-dlg .hdlg-nho{border:1px solid var(--vien);background:#fff;border-radius:7px;
  padding:2px 8px;font:inherit;font-size:12px;cursor:pointer;color:#2b3c42}
.hdcqt-dlg .hdlg-nho:hover{border-color:#9a3412;background:#fbeee8}
.hdcqt-dlg .hdlg-cb{margin:6px 16px;padding:8px 10px;background:#fff8f2;border:1px solid #f3ddc9;
  border-radius:9px;font-size:12.5px;line-height:1.5}
.hdcqt-dlg .hdlg-noi{display:flex;gap:6px;margin-top:6px}
.hdcqt-dlg .hdlg-noi input{flex:1;border:1px solid var(--vien);border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px}
.hdcqt-dlg-nho{width:min(420px,calc(100vw - 24px))}
.hdcqt-dlg .hdlg-form{display:flex;flex-direction:column;gap:9px;padding:12px 16px 15px}
.hdcqt-dlg .hdlg-form label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:#5b6b70;font-weight:600}
.hdcqt-dlg .hdlg-form input,.hdcqt-dlg .hdlg-form select{flex:1;max-width:230px;border:1px solid var(--vien);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px}
.hdcqt-dlg .hdlg-form .btn{align-self:flex-end}

/* -------- pill NHÓM (Sếp 05/09): Tất cả · từng nhóm · Chưa phân · ⚙ -------- */
.hdcqt-nhom{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 12px}
.hdcqt-nhom .np{border:1px solid var(--vien);background:#fff;border-radius:16px;padding:5px 12px;
  font:inherit;font-size:13px;font-weight:600;color:#3f4f55;cursor:pointer;line-height:1.4}
.hdcqt-nhom .np i{font-style:normal;font-weight:700;font-size:11.5px;color:#8a979c;margin-left:2px}
.hdcqt-nhom .np:hover{border-color:#9a3412;background:#fbeee8}
.hdcqt-nhom .np.on{background:var(--mkn,#fbeee8);border-color:var(--mk,#9a3412);color:#7c2d12}
.hdcqt-nhom .np.on i{color:#9a3412}
.hdcqt-nhom .np.caidat{margin-left:auto;border-style:dashed;color:#5b6b70}
.nhom-tag{color:#9a3412;font-weight:600}
/* tên NCC gọi dưới tên ĐVP trong dòng phiếu vòng đời (Sếp 05/09 chiều) */
.phu.ten-ncc{font-style:italic}

/* -------- hộp Quản lý nhóm -------- */
/* dialog bị reset *{margin:0} nuốt căn giữa — ghi margin:auto TƯỜNG MINH (bài học cũ) */
.hdcqt-dlg{margin:auto;border:none;border-radius:14px;padding:0;width:min(680px,calc(100vw - 24px));
  max-height:min(84vh,760px);box-shadow:0 24px 60px -20px rgba(6,43,51,.45)}
.hdcqt-dlg::backdrop{background:rgba(9,36,43,.45)}
.hdcqt-dlg .hdlg-dau{display:flex;justify-content:space-between;align-items:center;
  padding:13px 16px;background:#fbeee8;border-bottom:1px solid #9a341226;font-size:15px;color:#7c2d12}
.hdcqt-dlg .hdlg-dong{border:none;background:transparent;font-size:16px;cursor:pointer;color:#7c2d12;padding:2px 6px}
.hdcqt-dlg .hdlg-tao{display:flex;gap:8px;padding:12px 16px 4px}
.hdcqt-dlg .hdlg-tao input{flex:1;border:1px solid var(--vien);border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px}
.hdcqt-dlg .hdlg-nhomds{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px}
.hdcqt-dlg .hdlg-nhom{display:inline-flex;align-items:center;gap:2px;background:#fbeee8;color:#7c2d12;
  border:1px solid #9a341233;border-radius:14px;padding:3px 4px 3px 10px;font-size:12.5px;font-weight:600}
.hdcqt-dlg .hdlg-nhom button{border:none;background:transparent;cursor:pointer;font-size:12px;padding:1px 4px;opacity:.7}
.hdcqt-dlg .hdlg-nhom button:hover{opacity:1}
.hdcqt-dlg .hdlg-trong{padding:8px 16px;color:#8a979c;font-size:13px}
.hdcqt-dlg .hdlg-tim{margin:6px 16px;width:calc(100% - 32px);border:1px solid var(--vien);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}
.hdcqt-dlg .hdlg-cuon{overflow:auto;max-height:46vh;margin:0 16px 4px;border:1px solid var(--vien);border-radius:10px}
.hdcqt-dlg .hdlg-bang{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.hdcqt-dlg .hdlg-bang th{position:sticky;top:0;background:#f6f9fa;text-align:left;font-size:11.5px;
  text-transform:uppercase;padding:7px 10px;border-bottom:1px solid var(--vien)}
.hdcqt-dlg .hdlg-bang th:nth-child(1){width:52%}
.hdcqt-dlg .hdlg-bang th:nth-child(2){width:13%}
.hdcqt-dlg .hdlg-bang th:nth-child(3){width:35%}
.hdcqt-dlg .hdlg-bang td{padding:6px 10px;border-bottom:1px solid #eef2f3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdcqt-dlg .hdlg-bang td b{display:block;font-size:12.5px}
.hdcqt-dlg .hdlg-bang td .mst{font-size:11px;color:#8a979c}
.hdcqt-dlg .hdlg-bang td.num,.hdcqt-dlg .hdlg-bang th.num{text-align:right}
.hdcqt-dlg .hdlg-bang select{width:100%;border:1px solid var(--vien);border-radius:7px;padding:5px 6px;font:inherit;font-size:12.5px;background:#fff}
.hdcqt-dlg .hdlg-chan{padding:8px 16px 13px;color:#8a979c;font-size:12px}
@media(max-width:520px){
  .hdcqt-nhom .np.caidat{margin-left:0}
  .hdcqt-dlg .hdlg-bang th:nth-child(2){display:none}
  .hdcqt-dlg .hdlg-bang td:nth-child(2){display:none}
}

/* -------- hàng lọc -------- */
.hdcqt-loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 12px}
.hdcqt-loc label{display:flex;gap:6px;align-items:center;font-size:13px;color:#5b6b70;font-weight:600}
.hdcqt-loc input[type=date]{border:1px solid var(--vien);border-radius:8px;padding:7px 8px;font:inherit;font-size:13px;background:#fff}
.hdcqt-loc .hdcqt-tim{flex:1 1 210px;max-width:290px;border:1px solid var(--vien);border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px}
.hdcqt-loc select{border:1px solid var(--vien);border-radius:8px;padding:7px 8px;font:inherit;font-size:13px;background:#fff;color:#2b3c42}
.hdcqt-loc .hdcqt-tim:focus,.hdcqt-loc select:focus,.hdcqt-loc input[type=date]:focus{outline:2px solid #9a341233;border-color:#9a3412}
.hdcqt-loc .btn{margin-left:auto}

/* -------- bảng desktop -------- */
.hdcqt-cuon{overflow-x:auto}
.tbl-hdcqt{width:100%;min-width:1080px;table-layout:fixed;border-collapse:collapse;font-size:13.5px;line-height:1.35}
.tbl-hdcqt th{background:var(--mkn,#fbeee8);color:#7c2d12;text-align:left;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:8px 9px;border-bottom:2px solid #9a341226}
.tbl-hdcqt th.num{text-align:right}
.tbl-hdcqt td{padding:8px 9px;border-bottom:1px solid var(--vien);vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-hdcqt tbody tr{cursor:pointer}
.tbl-hdcqt tbody tr:hover{background:#fbeee855}
.tbl-hdcqt td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-hdcqt td.tt{font-weight:700}
.tbl-hdcqt td b{font-weight:700}
.tbl-hdcqt .mst{display:block;font-size:11.5px;color:#8a979c;font-weight:400}
/* ô nút không được nuốt nút thứ hai (bẫy ellipsis chung) */
.tbl-hdcqt td.o-xml{overflow:visible;text-overflow:clip;white-space:nowrap}
/* 2 nút icon vuông gọn — Sếp soi 05/09 tối: bản cũ cột 4% hai nút bị cắt mất */
.tbl-hdcqt td.o-xml a,.tbl-hdcqt td.o-xml button{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:24px;border:1px solid var(--vien);background:#fff;border-radius:7px;
  font-size:12.5px;line-height:1;cursor:pointer;text-decoration:none;color:#2b3c42;margin-right:3px;padding:0}
.tbl-hdcqt td.o-xml a:hover,.tbl-hdcqt td.o-xml button:hover{border-color:#9a3412;background:#fbeee8}

/* -------- chip trạng thái CQT + đối soát -------- */
.ttcqt{display:inline-block;font-size:12px;font-weight:600;color:#3f4f55}
.ttcqt.xau{color:#b91c1c;font-weight:700}
.ttcqt.mo,.tbl-hdcqt .mo{color:#a5b1b5}
.xn-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;font-size:12px;font-weight:700;
  border-radius:11px;padding:3px 9px;border:1px solid transparent;white-space:nowrap;line-height:1.3;max-width:100%}
.xn-chip small{font-weight:500;opacity:.75}
/* mã phiếu dài (ĐH-260801-02/UNIBEN…) phải THẤY ĐỦ — Sếp soi lần 2: cho xuống dòng trong chip */
.xn-chip .xn-ma{font-size:10.5px;font-weight:600;opacity:.8;white-space:normal;word-break:break-all;line-height:1.2}
.xn-vd{background:#e2f4ee;color:#047857;border-color:#04785726}
.xn-kt{background:#e3f3f6;color:#076e7e;border-color:#076e7e26;cursor:pointer}
.xn-kt:hover{background:#d2ecf1}
.xn-chua{background:#fff;color:#9a3412;border-color:#9a341255;cursor:pointer}
.xn-chua:hover{background:#fbeee8}

/* -------- ≤900px: bảng thành THẺ DỌC, vạch màu 3px bên trái -------- */
@media(max-width:900px){
  .hdcqt-cuon{overflow:visible}
  .tbl-hdcqt{min-width:0;display:block}
  .tbl-hdcqt colgroup,.tbl-hdcqt thead{display:none}
  .tbl-hdcqt tbody{display:block}
  .tbl-hdcqt tbody tr{display:block;border:1px solid var(--vien);border-left:3px solid #9a3412;
    border-radius:10px;margin-bottom:10px;padding:4px 0;background:#fff}
  .tbl-hdcqt td{display:flex;justify-content:space-between;gap:10px;border-bottom:none;
    padding:4px 12px;white-space:normal;overflow:visible;text-align:right}
  .tbl-hdcqt td::before{content:attr(data-nhan);color:#8a979c;font-size:12px;font-weight:600;
    flex-shrink:0;text-align:left}
  .tbl-hdcqt td[data-nhan="Người bán"]{display:block;text-align:left;padding-top:8px}
  .tbl-hdcqt td[data-nhan="Người bán"]::before{display:none}
  .tbl-hdcqt td.num,.tbl-hdcqt td.tt{text-align:right}
  .tbl-hdcqt td.o-xml{justify-content:flex-end}
}
@media(max-width:520px){
  .hdcqt-loc label{flex:1 1 46%}
  .hdcqt-loc .hdcqt-tim{max-width:none;flex-basis:100%}
  .hdcqt-loc select{flex:1 1 46%}
  .hdcqt-loc .btn{margin-left:0;flex-basis:100%}
}
/* số tiền dài (347.000.000 = 11 ký tự) phải nằm TRỌN MỘT DÒNG trong ô ~80px
   — Sếp soi 05/09 tối; 16px vẫn ngắt "347.000.0/00" nên hạ 13.5px, wrap chỉ là lưới cuối */
@media(max-width:700px){
  #v-hdcqt .stat .n.n-tien{font-size:13.5px;letter-spacing:-.01em;overflow-wrap:anywhere;line-height:1.6}
}