/* ============ Nền tảng ============ */
:root {
  --nen: #eef1f6;
  --the: #ffffff;
  --vien: #dde3ec;
  --vien-dam: #c3ccdb;
  --chu: #16202e;
  --chu-nhat: #6b7a8f;
  --xanh: #1f5fbf;
  --xanh-dam: #17498f;
  --xanh-nhat: #e8f0fd;
  --do: #d5202a;
  --do-nhat: #fdecec;
  --luc: #148a4f;
  --luc-nhat: #e7f6ee;
  --cam: #b46a00;
  --cam-nhat: #fdf3e0;
  --canh-nen: #142235;

  /* Bộ màu cho từng loại tiền. Đã kiểm bằng scripts/validate_palette.py của
     skill dataviz: đạt cả 5 mục, tách được ΔE 17.4 mắt thường / 9.3 với người
     mù màu — nên nhìn là phân biệt được ngay mà không chói. */
  --hang: #1d4ed8;   /* tiền hàng nhập  — xanh dương */
  --tra:  #047857;   /* đã thanh toán   — xanh lá    */
  --cho:  #c2740a;   /* trả rồi nhưng chưa chuyển khoản — vàng cam */
  --no:   #9a3412;   /* còn nợ          — nâu đất    */
  --bong: 0 1px 2px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .07);
  --bo: 10px;
}

* { box-sizing: border-box; }

/* Phải đặt !important: các lớp phủ bên dưới có `display: grid`, mà quy tắc của
   stylesheet này luôn thắng quy tắc [hidden] mặc định của trình duyệt — thiếu
   dòng này thì vòng xoay và nền hộp thoại hiện vĩnh viễn, che kín cả màn hình. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  background: var(--nen);
  color: var(--chu);
  font: 14px/1.5 "Segoe UI", "Inter", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; margin: 0; letter-spacing: -.2px; }
h2 { font-size: 14px; margin: 0; font-weight: 650; }
h3 { font-size: 16px; margin: 0; }

/* ============ Thanh cạnh ============ */
.canh {
  width: 232px;
  flex: 0 0 232px;
  background: var(--canh-nen);
  color: #c9d4e4;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 18px;
}

.hieu { display: flex; gap: 10px; align-items: center; padding: 0 6px; }
.hieu-bieu {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; font-weight: 800; font-size: 14px;
  display: grid; place-items: center; letter-spacing: .5px;
}
.hieu-ten { color: #fff; font-weight: 700; font-size: 15px; }
.hieu-phu { font-size: 11px; color: #7f90a8; }

#menu { display: flex; flex-direction: column; gap: 2px; }
.muc {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: #b8c5d8; cursor: pointer;
  font: inherit; text-align: left; width: 100%;
}
.muc svg, .nut svg, .bt {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.muc svg { width: 19px; height: 19px; flex: 0 0 19px; }
.muc:hover { background: #1e3149; color: #fff; }
.muc.dang-chon { background: var(--xanh); color: #fff; font-weight: 600; }
.nut svg { width: 15px; height: 15px; flex: 0 0 15px; }
.bt { width: 14px; height: 14px; vertical-align: -2px; }

.canh-day { margin-top: auto; }
/* Nút đăng xuất — chỉ hiện khi mở sổ từ web */
.nut-ra {
  width: 100%; margin-top: 10px; font: inherit; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid #2b4260; background: transparent; color: #9fb0c8;
}
.nut-ra:hover { background: #1e3149; color: #fff; border-color: #3d5878; }
.nut-ra svg { width: 16px; height: 16px; flex: 0 0 16px; }
.tong-no-nho {
  background: #1e3149; border-radius: var(--bo); padding: 12px;
}
.tong-no-nho .nhan { font-size: 11px; color: #8fa1ba; text-transform: uppercase; letter-spacing: .6px; }
/* trên nền tối phải dùng bậc sáng hơn của --no thì mới đủ tương phản */
.tong-no-nho .gt { font-size: 20px; font-weight: 750; color: #f5a55f; margin-top: 2px; }

/* ============ Vùng chính ============ */
.vung-chinh { flex: 1; overflow: auto; padding: 20px 24px 10px; }
.man { display: none; }
/* Không đặt animation ở đây: hiệu ứng mờ dần khi đổi màn hình đọc thành "nháy". */
.man.dang-hien { display: block; }

.dau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.dau-nut { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============ Thẻ / hộp ============ */
.hop {
  background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--bo); box-shadow: var(--bong); margin-bottom: 16px;
  overflow: hidden;
}
.hop-dau {
  padding: 11px 14px; border-bottom: 1px solid var(--vien);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fafbfd;
}
/* Khung việc nguy hiểm (xoá sạch dữ liệu): viền đỏ cho khác hẳn mọi khung khác,
   đứng cuối màn hình để không ai bấm nhầm khi đang làm việc bình thường. */
.hop-nguy { border-color: #f0bcbc; }
.hop-nguy .hop-dau { background: var(--do-nhat); border-bottom-color: #f0bcbc; }
.hop-nguy .hop-dau h2 { color: var(--do); }
/* khung cuối màn hình bỏ lề dưới: cái lề đó chỉ để lại một dải trống dưới bảng */
.man > .hop:last-child, .man > .luoi-2:last-child, .man > .luoi-2-3:last-child { margin-bottom: 0; }
.hop-than { padding: 14px; }
.hop-than.khong-dem { padding: 0; }
.hop.khong-lot { padding: 0; }

.luoi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
.luoi-2-3 { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
/* Khung bên phải cao bằng bảng bên trái — chiều cao do chinhChieuCaoBang() tính,
   không dùng align-items:stretch vì danh sách bên trong dài sẽ kéo cả lưới dài ra
   quá màn hình. */
.luoi-2-3 > .hop > .hop-than.cuon-doc { overflow: auto; }

/* ============ Thẻ số liệu ============ */
/* grid-auto-rows: 1fr — MỌI HÀNG THẺ CAO BẰNG NHAU.
   Thiếu dòng này thì hàng nào đủ 2 thẻ mới tự kéo bằng nhau, còn thẻ lẻ đứng
   một mình một hàng chỉ cao bằng nội dung của nó (đo trên điện thoại: 4 thẻ
   110px, thẻ 'Tổng còn nợ' lẻ ra chỉ 79px, nhìn cụt hẳn một khúc).
   Dùng 1fr chứ ĐỪNG đặt chiều cao cứng: nhãn dài ngắn khác nhau, máy khác cỡ
   chữ khác thì số cứng sai ngay. */
.the-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  grid-auto-rows: 1fr; gap: 12px; margin-bottom: 16px; }
.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 11px 14px 12px; box-shadow: var(--bong); position: relative; overflow: hidden;
}
.the::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--xanh); }
.the.do::before { background: var(--do); }
.the.luc::before { background: var(--luc); }
.the.cam::before { background: var(--cam); }
.the.no::before { background: var(--no); }
.the.hang::before { background: var(--hang); }
.the.tra::before { background: var(--tra); }
.the .nhan { font-size: 11.5px; color: var(--chu-nhat); font-weight: 600; letter-spacing: .1px; }
/* số lớn dùng chữ số tỉ lệ (không tabular) — tabular làm số to trông rời rạc */
.the .gt { font-size: 23px; font-weight: 750; letter-spacing: -.6px; margin-top: 3px; line-height: 1.2; }
.the .phu { font-size: 11.5px; color: var(--chu-nhat); margin-top: 3px; }
.the.do .gt { color: var(--do); }
.the.luc .gt { color: var(--luc); }
.the.cam .gt { color: var(--cam); }
.the.no .gt { color: var(--no); }
.the.hang .gt { color: var(--hang); }
.the.tra .gt { color: var(--tra); }

/* ============ Bảng ============ */
.bang-cuon { overflow: auto; max-height: calc(100vh - 300px); }
.bang-cuon.cao-vua { max-height: 260px; }
table.bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
/* Sổ công nợ dùng bố cục cột cố định: nội dung dài không kéo giãn cột nữa.
   Bảng có bề ngang tối thiểu — màn hình hẹp thì cuộn ngang, chứ không bóp
   các cột đến mức cụt chữ. Cột "Nội dung" là cột duy nhất co giãn theo chỗ thừa. */
/* 1220 = tổng bề rộng 11 cột cố định + chừa chỗ cho cột Nội dung co giãn.
   Nới 28/08/2026: Đơn giá 80→110px (80px cắt cụt "58.280.000"), thêm cột
   "Ngày tích" 104px, cột nút còn 86px vì chỉ còn hai nút Sửa · Xoá. */
/* 1220px hồi 13 cột, + 88px của cột "Đồng kiểm" thêm ngày 04/09/2026.
   Hẹp hơn thì cuộn ngang, KHÔNG bóp cột đến cụt chữ. */
table.bang-so { table-layout: fixed; min-width: 1308px; }
/* Tiêu đề sổ được xuống dòng — "Người chuyển khoản" nằm 2 dòng thay vì bị cắt cụt.
   Phải ghi đè cả .bang vì luật nowrap của .bang viết sau, cùng độ đặc hiệu. */
table.bang.bang-so th { white-space: normal; line-height: 1.25; }
.bang-so th, .bang-so td { overflow: hidden; text-overflow: ellipsis; padding: 6px 7px; }
.bang-so .nut.nho { padding: 3px 5px; }
table.bang.nho { font-size: 12.5px; }
table.bang th {
  position: sticky; top: 0; z-index: 2;
  background: #f6f8fc; text-align: left; font-weight: 650; color: #4b5b73;
  font-size: 12.5px; letter-spacing: .15px;
  padding: 10px 11px; border-bottom: 1px solid var(--vien); white-space: nowrap;
}
table.bang td { padding: 7px 11px; border-bottom: 1px solid #f0f3f8; vertical-align: middle; }
table.bang tbody tr:hover { background: #eef4fd; }
/* ---- Kẻ sọc: dòng chẵn nền xanh rất nhạt, dòng lẻ để trắng ----
   Nhìn ngang một dòng dài không bị lạc sang dòng khác. */
table.bang:not(.bang-so) tbody tr:nth-child(even) > td { background: #eff5fd; }
table.bang:not(.bang-so) tbody tr:hover > td,
table.bang:not(.bang-so) tbody tr:nth-child(even):hover > td { background: #dceafa; }
/* Sổ công nợ đã dùng màu nền để phân biệt dòng nhập hàng / trả tiền, nên kẻ sọc
   bằng chính sắc đó đậm hơn một bậc — giữ được cả hai thông tin. */
.bang-so tbody tr.dong-hang:nth-child(even) td { background: #eaf1fc; }
.bang-so tbody tr.dong-tra:nth-child(even) td { background: #e6f4ee; }
.bang-so tbody tr.chua-ck:nth-child(even) td { background: #fbf2e0; }
/* Kẻ ô dọc cho ra dáng bảng tính giống Excel */
table.bang th, table.bang td { border-right: 1px solid #edf0f6; }
table.bang th { border-right-color: #e3e9f2; }
table.bang th:last-child, table.bang td:last-child { border-right: 0; }
/* cột số thứ tự đóng vai trò như ô đầu dòng của Excel */
.bang-so tbody td.stt { background: #f1f4f9; color: var(--chu-nhat); font-size: 11.5px; }
.bang-so tbody tr:hover td.stt { background: #e3e9f3; }
table.bang tfoot td {
  position: sticky; bottom: 0; background: #f6f8fc; font-weight: 700; font-size: 14px;
  border-top: 1px solid var(--vien-dam); border-bottom: 0;
}
/* số dư / số tiền quan trọng nhỉnh hơn một chút cho dễ đọc */
table.bang td.so.dam { font-size: 14.5px; letter-spacing: -.2px; }
.phai { text-align: right; }
.giua { text-align: center; }
.so { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.do { color: var(--do); }
.luc { color: var(--luc); }
.xanh { color: var(--xanh); }
.hang { color: var(--hang); }
.tra { color: var(--tra); }
.cho { color: var(--cho); }
.no { color: var(--no); }
.nhat { color: var(--chu-nhat); }
.dam { font-weight: 700; }
.trong { padding: 34px; text-align: center; color: var(--chu-nhat); }

/* Sổ công nợ: phân biệt dòng nhập hàng / dòng thanh toán bằng nền rất nhạt */
tr.dong-hang td { background: #f8fafe; }
tr.dong-hang:hover td { background: #eef4fd; }
tr.dong-tra td { background: #f5fbf8; }
tr.dong-tra:hover td { background: #e9f6f0; }
tr.chua-ck td { background: #fdf8ee; }
tr.chua-ck:hover td { background: #fbf1de; }

/* Dòng mở sổ (nợ cũ đầu kỳ): không phải giao dịch, là điểm xuất phát của cột
   "Còn nợ". Cho nền xám và gạch chân đậm để tách hẳn khỏi phần giao dịch. */
tr.dong-mo-so td { background: #eef1f6; border-bottom: 2px solid var(--vien-dam); }
tr.dong-mo-so:hover td { background: #e7ebf3; }
.bang-so tbody tr.dong-mo-so td.stt { background: #e4e9f1; }

/* Cột số thứ tự luôn MỘT MÀU, không ăn theo màu của dòng.
   Trước đây dòng chẵn có màu (vàng "chưa CK", xanh "đã trả") đè lên cả ô số thứ
   tự vì luật :nth-child(even) mạnh hơn — nhìn thành lúc vàng lúc không, rối mắt.
   Đặt sau mọi luật màu dòng nên thắng. */
.bang-so tbody tr td.stt,
.bang-so tbody tr:nth-child(even) td.stt,
.bang-so tbody tr:hover td.stt,
.bang-so tbody tr:nth-child(even):hover td.stt { background: #f1f4f9; }

/* ô tích "Đã CK" chỉ có ở dòng thanh toán, dòng nhập hàng để trống */
td.o-ck input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--luc); }

/* ---- Cột "Đồng kiểm" (04/09/2026) ----------------------------------
   MÀU CHO BIẾT AI ĐÃ KÝ: đen = chủ sổ tự tích, ĐỎ = nhà cung cấp tích.
   Màu chỉ là dấu hiệu phụ — tên người ký luôn nằm trong `title` (rê chuột) và
   hiện thành chữ trên điện thoại. Đừng để màu là cách DUY NHẤT biết ai ký:
   máy in đen trắng, ảnh chụp màn hình mờ, và người mù màu đều không đọc được. */
td.o-dk input { width: 16px; height: 16px; cursor: pointer; accent-color: #111827; }
td.o-dk input.ncc-ky { accent-color: #dc2626; }
td.o-dk input:disabled { cursor: not-allowed; opacity: .55; }
/* Trên máy bàn cột hẹp (88px) nên chỉ hiện dấu tích, tên người ký nằm ở title.
   Cái <label> ở đây chỉ là lớp bọc trong suốt — nó chỉ biến thành nút thật khi
   xuống điện thoại (xem khối ≤720px). */
td.o-dk .dk-nut { display: inline-flex; align-items: center; cursor: pointer; }
td.o-dk .dk-ai { display: none; }
/* nhà cung cấp đã ngừng theo dõi: hiện mờ, không cộng vào tổng nào */
tr.ngung-theo-doi td { opacity: .55; }

/* ============ Ô nhập ============ */
.o-nhap {
  font: inherit; color: inherit; padding: 6px 9px;
  border: 1px solid var(--vien-dam); border-radius: 7px; background: #fff;
  min-width: 0; max-width: 100%;
}
.o-nhap:focus { outline: 2px solid var(--xanh); outline-offset: -1px; border-color: var(--xanh); }
.o-nhap[readonly] { background: #f3f5f9; color: var(--chu-nhat); }
.o-nhap.phai { text-align: right; font-variant-numeric: tabular-nums; }
.o-nhap.tra { color: var(--tra); }
.o-nhap.hang { color: var(--hang); }

/* Lớp .o-o (ô gõ thẳng trong bảng) đã BỎ 28/08/2026 cùng với việc cho sổ công nợ
   chỉ đọc — không còn thẻ nào mang lớp này nữa. Sửa dòng nay bằng nút ✏️. */

.loc-hang {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 14px; background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 12px 14px; box-shadow: var(--bong);
}
.loc-hang label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--chu-nhat); font-weight: 600; }
.loc-hang label.lon { flex: 1; min-width: 200px; }
.hop-tick { display: flex; flex-direction: row !important; align-items: center; gap: 7px !important; color: var(--chu) !important; }
.hop-than > .hop-tick { margin: 12px 0; }

/* ============ Nút ============ */
.nut {
  font: inherit; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--vien-dam); background: #fff; color: var(--chu);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nut:hover { background: #f2f5fa; border-color: var(--xanh); }
.nut.chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 600; }
.nut.chinh:hover { background: var(--xanh-dam); }
.nut.nguy { background: var(--do); border-color: var(--do); color: #fff; }
.nut.nguy:hover { filter: brightness(.92); }
/* Nút trong từng dòng để trơn, chỉ ăn màu khi rê chuột — cả cột nút đỏ
   làm bảng trông rối và đỏ quạch. */
.nut.nho {
  padding: 3px 7px; font-size: 12px; border-radius: 6px;
  border-color: transparent; background: transparent; color: var(--chu-nhat);
}
.nut.nho:hover { background: #e8eef8; border-color: var(--vien-dam); color: var(--xanh); }
.nut.nho.nguy { background: transparent; border-color: transparent; color: var(--chu-nhat); }
.nut.nho.nguy:hover { background: var(--do-nhat); border-color: #f0bcbc; color: var(--do); filter: none; }
.nut.nho:disabled { opacity: .35; }
.nut.nho:disabled:hover { background: transparent; border-color: transparent; color: var(--chu-nhat); }
.nut:disabled { opacity: .5; cursor: not-allowed; }

.chip {
  font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--vien-dam); background: #fff; color: var(--chu-nhat);
}
.chip.dang-chon { background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 600; }
.chuyen-che-do { display: flex; gap: 6px; }

kbd {
  font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--vien-dam); background: #f4f6fa; box-shadow: 0 1px 0 var(--vien-dam);
}

/* ============ Sổ: tóm tắt ============ */
.so-tom-tat { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 1fr; gap: 12px; margin-bottom: 14px; }   /* xem chú thích ở .the-hang */

/* Màn Sổ công nợ xếp dọc: bảng ăn hết chỗ trống, khung "Thêm dòng mới" luôn ở đáy
   để nhập liệu không phải cuộn. app.js bỏ qua .khong-tu-chinh nên không đặt
   max-height nội tuyến đè lên bố cục này. */
/* Chừa một khoảng dưới đáy: bảng ngắn lại một chút để dòng "Tổng đang hiện"
   nhô lên khỏi mép màn hình, khỏi dính sát thanh tác vụ — dính sát thì vừa khó
   nhìn vừa dễ bấm nhầm. Số 96px = khoảng trống muốn chừa. */
#man-so.dang-hien { display: flex; flex-direction: column; height: calc(100vh - 96px); }
#man-so > .hop.khong-lot { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; margin-bottom: 0; }
#man-so .bang-cuon.khong-tu-chinh { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ============ Thêm nhanh ============ */
.goi-y { margin: 10px 0 0; font-size: 12px; color: var(--chu-nhat); }
form.che-do-nhap .chi-tra { display: none !important; }
form.che-do-tra .chi-nhap { display: none !important; }

.hang-nhap { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.hang-nhap .o-nhap { flex: 1; min-width: 220px; }
/* Hàng "Tự sao lưu cách nhau [ 3 ] giờ một bản" — ô số nhỏ, chữ nằm cùng dòng */
.sl-nhip { align-items: center; }
.sl-nhip label { font-size: 13px; color: var(--chu-nhat); }
.sl-nhip .o-nhap { flex: 0 0 82px; min-width: 82px; text-align: center; }
.mo-ta { margin: 0 0 12px; color: var(--chu-nhat); font-size: 13px; }
.kq-nhap { margin-top: 12px; font-size: 12.5px; }
.kq-nhap ul { margin: 6px 0 0; padding-left: 18px; }

/* ============ Biểu đồ ============ */
/* Chiều cao từng cột do app.js đặt bằng pixel (--bd-cao) — dùng % thì cột dẹp lép
   vì khung cha trong flex không có chiều cao xác định. */
.bd { --bd-cao: 190px; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
.bd-y {
  height: var(--bd-cao); display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; font-size: 11px; color: var(--chu-nhat);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bd-y span { transform: translateY(-50%); line-height: 1; }
.bd-y span:first-child { transform: none; }
.bd-y span:last-child { transform: translateY(-100%); }
.bd-o { position: relative; height: var(--bd-cao); }
.bd-luoi { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.bd-luoi i { display: block; border-top: 1px solid var(--vien); }
.bd-luoi i:last-child { border-top-color: var(--vien-dam); }
.bd-hang { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.bd-cot { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.bd-cot:hover, .bd-cot:focus-visible { background: rgba(31, 95, 191, .06); outline: none; }
/* khe 2px màu nền tách hai cột, không vẽ viền quanh cột */
.bd-doi { display: flex; align-items: flex-end; gap: 2px; justify-content: center; width: 100%; }
.bd-thanh { width: 40%; max-width: 20px; border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.bd-thanh.nhap { background: var(--xanh); }
.bd-thanh.tra { background: var(--luc); }
.bd-x { display: flex; font-size: 11px; color: var(--chu-nhat); }
.bd-x span { flex: 1; text-align: center; white-space: nowrap; min-width: 0; }
.chu-thich { display: flex; gap: 18px; font-size: 12px; color: var(--chu-nhat); margin-top: 14px; }
.chu-thich i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; }

.bd-mach {
  position: fixed; z-index: 80; pointer-events: none; opacity: 0;
  background: #16202e; color: #fff; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.6; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(10, 20, 40, .32); transition: opacity .12s;
}
.bd-mach.hien { opacity: 1; }
.bd-mach b { display: block; margin-bottom: 3px; }
.bd-mach span { display: flex; align-items: center; gap: 6px; color: #c9d4e4; }
.bd-mach span b { display: inline; margin: 0 0 0 auto; padding-left: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.bd-mach i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.thanh-ds { display: flex; flex-direction: column; gap: 9px; }
/* Danh sách người chuyển khoản có thể rất dài — cuộn trong khung thay vì đẩy dài cả trang */
#tt-theo-nguoi { overflow: auto; }
.thanh-mot { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; cursor: pointer; }
.thanh-mot:hover .thanh-ten { color: var(--xanh); }
.thanh-ten { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thanh-gt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.thanh-nen { grid-column: 1 / -1; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
.thanh-day { height: 100%; background: linear-gradient(90deg, #3b82f6, #1d4ed8); border-radius: 3px; }
.thanh-day.am { background: linear-gradient(90deg, #34d399, #059669); }

/* ============ Hộp thoại ============ */
.lop-phu {
  position: fixed; inset: 0; background: rgba(14, 24, 40, .5);
  display: grid; place-items: center; z-index: 60; padding: 20px;
  backdrop-filter: blur(2px);
}
.hop-thoai {
  background: var(--the); border-radius: 14px; width: min(560px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(10, 20, 40, .3);
}
.hop-thoai.rong { width: min(820px, 100%); }
.ht-dau { padding: 14px 18px; border-bottom: 1px solid var(--vien); display: flex; justify-content: space-between; align-items: center; }
.ht-than { padding: 18px; overflow: auto; }
.ht-chan { padding: 12px 18px; border-top: 1px solid var(--vien); display: flex; justify-content: flex-end; gap: 8px; background: #fafbfd; border-radius: 0 0 14px 14px; }
.dong { border: 0; background: transparent; cursor: pointer; color: var(--chu-nhat); line-height: 1; padding: 6px; border-radius: 6px; display: flex; }
.dong:hover { background: #f0f3f8; color: var(--chu); }
.dong svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nut.nho svg { width: 12px; height: 12px; flex: 0 0 12px; }
.nut.nho { justify-content: center; }

.form-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-luoi label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--chu-nhat); font-weight: 600; }
.form-luoi label.rong { grid-column: 1 / -1; }
.form-luoi .o-nhap { width: 100%; }
.canh-bao-nho { font-size: 12px; color: var(--cam); margin-top: 8px; }

/* Chọn sổ cho tài khoản nhà cung cấp — cửa hàng có thể có vài chục nhà, nên
   cho cuộn trong khung chứ đừng để hộp thoại dài quá màn hình. */
.tk-so-ds {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 12px; max-height: 232px; overflow: auto;
  border: 1px solid var(--vien-dam); border-radius: 8px; padding: 8px 10px;
  background: #fff;
}
.tk-so-ds .hop-tick { font-size: 13px; }
@media (max-width: 720px) { .tk-so-ds { grid-template-columns: 1fr; max-height: 46vh; } }

/* ============ Màn đăng nhập ============ */
.man-vao { z-index: 200; background: linear-gradient(160deg, #16233a, #0d1a2c); backdrop-filter: none; }
.vao-hop { width: min(390px, 100%); padding: 26px 24px 24px; gap: 14px; display: flex; flex-direction: column; }
.vao-hieu { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vao-ten { font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.vao-phu { font-size: 12.5px; color: var(--chu-nhat); margin-top: 2px; }
.vao-o { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--chu-nhat); }
.vao-o .o-nhap { font-size: 15px; padding: 10px 12px; }
.vao-loi { margin: 0; min-height: 17px; font-size: 12.5px; color: var(--do); }
/* Dấu tích "nhớ đăng nhập" — ô tích to hơn bình thường cho dễ bấm bằng ngón tay */
.vao-nho { font-size: 13px; font-weight: 500; margin: -2px 0 2px; cursor: pointer; }
.vao-nho input { width: 16px; height: 16px; cursor: pointer; }
/* Nút con mắt trong ô mật khẩu — bấm vào xem lại đã gõ đúng chưa */
.o-co-mat { position: relative; display: block; }
.o-co-mat .o-nhap { width: 100%; padding-right: 42px; }
.nut-mat {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; background: transparent; color: var(--chu-nhat);
  display: grid; place-items: center; border-radius: 7px;
}
.nut-mat:hover { background: #eef2f8; color: var(--chu); }
.nut-mat svg { width: 19px; height: 19px; fill: none; }
/* Edge/WebView2 tự vẽ thêm một con mắt nữa trong ô mật khẩu — thành hai cái
   cạnh nhau, giấu cái của trình duyệt đi, giữ nút của mình. */
.o-co-mat input::-ms-reveal, .o-co-mat input::-ms-clear { display: none; }
.nut-mat.dang-hien { color: var(--xanh); }
/* gạch chéo con mắt khi đang hiện chữ */
.nut-mat.dang-hien::after {
  content: ""; position: absolute; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transform: rotate(-45deg);
}
.vao-ro {
  margin: -6px 0 0; font-size: 13px; color: var(--xanh); font-weight: 600;
  word-break: break-all; background: var(--xanh-nhat); padding: 7px 10px; border-radius: 7px;
}


.vao-nut { justify-content: center; padding: 11px; font-size: 15px; }

/* ============ Menu chuột phải ============ */
/* Menu của trình duyệt bị tắt, thay bằng menu này cho hợp với phần mềm. */
.menu-chuot {
  position: fixed; z-index: 120; min-width: 208px; padding: 5px;
  background: var(--the); border: 1px solid var(--vien-dam); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(10, 20, 40, .22);
  display: flex; flex-direction: column; gap: 1px;
}
.menu-chuot button {
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: var(--chu);
  padding: 8px 11px; border-radius: 7px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.menu-chuot button:hover:not(:disabled) { background: var(--xanh); color: #fff; }
.menu-chuot button:hover:not(:disabled) kbd { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; box-shadow: none; }
.menu-chuot button:disabled { color: var(--chu-nhat); opacity: .45; cursor: default; }
.menu-chuot kbd { font-size: 10.5px; }

/* ============ Chọn khoảng ngày ============ */
/* Một nút thay cho hai ô "Từ ngày / Đến ngày"; bấm vào mở hai quyển lịch. */
.nut-khoang {
  cursor: pointer; text-align: left; min-width: 215px; white-space: nowrap;
  background: #fff; font-variant-numeric: tabular-nums;
}
.nut-khoang:hover { border-color: var(--xanh); }
.nut-khoang.dang-loc { border-color: var(--xanh); color: var(--xanh); font-weight: 600; }

.lich-nhanh { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.lich-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.lich-doi .lich-lui, .lich-doi .lich-toi {
  position: absolute; top: -4px; width: 30px; height: 28px; padding: 0;
  justify-content: center; font-size: 19px; line-height: 1;
  border: 1px solid var(--vien-dam); background: #fff; border-radius: 8px;
}
.lich-doi .lich-lui { left: 0; }
.lich-doi .lich-toi { right: 0; }
.lich-dau { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.lich-thu, .lich-o { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lich-thu i {
  font-style: normal; text-align: center; font-size: 11px; font-weight: 600;
  color: var(--chu-nhat); padding-bottom: 4px;
}
.lich-o i { display: block; }
.lich-o button {
  font: inherit; font-size: 13px; border: 0; background: transparent; cursor: pointer;
  padding: 7px 0; border-radius: 7px; color: var(--chu); font-variant-numeric: tabular-nums;
}
.lich-o button:hover { background: var(--xanh-nhat); }
.lich-o button.hom-nay { font-weight: 700; box-shadow: inset 0 0 0 1px var(--vien-dam); }
.lich-o button.giua-khoang { background: var(--xanh-nhat); border-radius: 0; }
.lich-o button.dau, .lich-o button.cuoi { background: var(--xanh); color: #fff; font-weight: 700; }
.lich-o button.dau { border-radius: 7px 0 0 7px; }
.lich-o button.cuoi { border-radius: 0 7px 7px 0; }
.lich-o button.dau.cuoi { border-radius: 7px; }
.lich-tom { margin: 14px 0 0; font-size: 12.5px; color: var(--chu-nhat); text-align: center; }

/* ============ Thông báo & tải ============ */
.thong-bao { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 90; }
.tb {
  background: #16202e; color: #fff; padding: 10px 15px; border-radius: 9px;
  box-shadow: 0 10px 26px rgba(10, 20, 40, .28); font-size: 13.5px; max-width: 420px;
  animation: truot .2s ease;
}
.tb.loi { background: var(--do); }
.tb.ok { background: var(--luc); }
@keyframes truot { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.dang-tai { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(238, 241, 246, .55); z-index: 100; }
.vong { width: 34px; height: 34px; border: 3px solid var(--vien-dam); border-top-color: var(--xanh); border-radius: 50%; animation: quay .7s linear infinite; }
@keyframes quay { to { transform: rotate(360deg); } }

/* ============ Cuộn ============ */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #e7ebf2; }
::-webkit-scrollbar-thumb { background: #b6c1d2; border-radius: 6px; border: 2px solid #e7ebf2; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============ Màn hình hẹp ============
   Ba mốc:
     ≤1100  — hai lưới 2 cột gộp lại làm một cột
     ≤1024  — TABLET: thanh cạnh còn dải biểu tượng, thẻ số liệu nhỏ lại
     ≤720   — ĐIỆN THOẠI: thanh cạnh thành dải thẻ ngang dính trên đầu,
              hàng lọc 2 ô một dòng, hộp thoại chiếm gần hết màn hình.
   Khối điện thoại đặt sau khối tablet vì ở 375px cả hai cùng đúng —
   luật viết sau mới thắng. */

@media (max-width: 1100px) {
  .luoi-2-3 { grid-template-columns: 1fr; }
  .luoi-2 { grid-template-columns: 1fr; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .canh { width: 62px; flex: 0 0 62px; padding: 12px 8px; }
  .hieu > div:last-child, .muc span + *, .canh-day { display: none; }
  .muc { justify-content: center; font-size: 0; }
  .muc span { font-size: 17px; }
  .vung-chinh { padding: 18px 16px 10px; }
  .the-hang, .so-tom-tat { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
  .the .gt { font-size: 20px; }
  .bang-cuon { max-height: calc(100vh - 260px); }
  .o-zalo input { width: 150px; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 720px) {
  /* cả trang cuộn dọc bình thường, không còn hai vùng cuộn lồng nhau */
  body { flex-direction: column; height: auto; min-height: 100%; }
  .vung-chinh {
    overflow: visible;
    padding: 14px 12px 16px;
    /* chừa nốt hai mép bên và vạch cảm ứng dưới đáy iPhone */
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* thanh cạnh nằm ngang trên đầu, vuốt ngang để đi tới màn hình khác */
  .canh {
    /* Cài lên màn hình chính điện thoại thì không còn thanh địa chỉ, trang tràn
       lên tận đỉnh máy — phải chừa chỗ cho đồng hồ và "tai thỏ", không thì menu
       chui xuống dưới chúng. Máy không có tai thỏ thì env(...) = 0, y như cũ. */
    --dem-canh: 7px;
    width: auto; flex: 0 0 auto; flex-direction: row; align-items: center;
    gap: 6px; position: sticky; top: 0; z-index: 50;
    padding: var(--dem-canh) 10px;
    padding-top: calc(var(--dem-canh) + env(safe-area-inset-top, 0px));
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none;                 /* Firefox */
  }
  /* Bỏ hẳn thanh gạt xám dưới menu — thay bằng mép mờ dần ở dưới đây */
  .canh::-webkit-scrollbar { display: none; }

  /* Mép mờ dần: bên nào còn mục chưa nhìn thấy thì mờ đi bên đó, nhìn là biết
     vuốt được. app.js bật/tắt lớp .co-trai / .co-phai theo chỗ đang cuộn.
     Hai mép này dính vào rìa khung cuộn nên không trôi theo khi vuốt. */
  .canh::before, .canh::after {
    content: ""; position: sticky; z-index: 2; pointer-events: none;
    /* flex-basis phải là 46px chứ không phải 0 — đặt 0 thì width bị bỏ qua
       và dải mờ rộng bằng không, chẳng thấy gì. Lề âm bên dưới trừ lại đúng
       46px nên nó không chiếm thêm chỗ trong hàng. */
    flex: 0 0 46px; align-self: stretch;
    /* kéo trùm cả phần đệm trên (kể cả chỗ chừa cho tai thỏ) lẫn phần đệm dưới,
       không thì dải mờ hụt một khoảng, nhìn thành đường kẻ ngang */
    margin-top: calc(-1 * (var(--dem-canh) + env(safe-area-inset-top, 0px)));
    margin-bottom: calc(-1 * var(--dem-canh));
    opacity: 0; transition: opacity .18s;
  }
  .canh::before { left: -10px; margin-right: -46px;
    background: linear-gradient(to right, var(--canh-nen) 34%, transparent); }
  .canh::after { right: -10px; margin-left: -46px;
    background: linear-gradient(to left, var(--canh-nen) 34%, transparent); }
  .canh.co-trai::before, .canh.co-phai::after { opacity: 1; }

  .hieu { display: none; }
  #menu { flex-direction: row; gap: 4px; }
  /* .muc gốc rộng 100% để xếp dọc — nằm ngang thì phải co lại vừa chữ */
  .muc {
    width: auto; flex: 0 0 auto; font-size: 12.5px; padding: 8px 11px;
    white-space: nowrap; justify-content: flex-start;
    scroll-snap-align: center; transition: transform .12s, background .12s;
  }
  /* chạm vào là nút lún xuống — báo cho biết đây là chỗ bấm/vuốt được */
  .muc:active { transform: scale(.94); background: #1e3149; }
  .muc svg { width: 17px; height: 17px; flex: 0 0 17px; }

  /* tiêu đề màn hình: chữ nhỏ lại, hàng nút xuống dòng chiếm hết bề ngang */
  .dau { gap: 10px; margin-bottom: 12px; }
  h1 { font-size: 19px; }
  .dau-nut { width: 100%; }
  .dau-nut > .nut { flex: 1 1 auto; justify-content: center; }
  #so-chon-ncc { min-width: 0 !important; width: 100%; }
  .o-zalo { flex: 1 1 100%; }
  .o-zalo input { width: 100%; flex: 1; }
  .o-zalo-bao { bottom: -14px; }

  /* thẻ số liệu: 2 cột cho đỡ dài lê thê */
  .the-hang, .so-tom-tat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
  /* Thẻ cuối mà lẻ một mình thì KÉO HẾT hai cột, khỏi để trống nửa hàng.
     `:nth-child(odd)` là chốt chặn: lưới 2 cột nên thẻ ở vị trí lẻ mới là thẻ
     mở đầu một hàng mới — số thẻ chẵn thì luật này không đụng vào.
     Chỉ đặt TRONG khối điện thoại: ngoài kia lưới là auto-fit, ép 1/-1 ở đó là
     bắt thẻ cuối chiếm trọn một hàng, vỡ bố cục 5 thẻ một hàng của máy bàn. */
  .the-hang > .the:last-child:nth-child(odd),
  .so-tom-tat > .the:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .the { padding: 9px 11px 10px; }
  .the .gt { font-size: 17px; letter-spacing: -.3px; }
  .the .nhan, .the .phu { font-size: 10.5px; }

  /* hàng lọc: 2 ô một dòng; ô tìm và các nút chiếm trọn một dòng */
  .loc-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; }
  .loc-hang label { min-width: 0; }
  .loc-hang label.lon, .loc-hang label.o-ngay,
  .loc-hang > .nut, .loc-hang > .chuyen-che-do { grid-column: 1 / -1; }
  .loc-hang .o-nhap { width: 100%; }
  .loc-hang .nut { justify-content: center; padding: 9px 13px; }

  #man-so.dang-hien { height: auto; }
  .bang-cuon { max-height: 68vh; }
  #tt-theo-nguoi { max-height: 320px; }

  /* ---- Sổ công nợ trên điện thoại: mỗi dòng là một THẺ ----
     Bảng 12 cột không vuốt ngang nữa. Vẫn là cái bảng cũ, chỉ đổi cách bày:
     mọi ô nhập, ô tích, nút bấm giữ nguyên nên sửa trực tiếp vẫn được như thường.
     Nhãn cột lấy từ data-nhan mà app.js gắn vào từng ô; ô nào rỗng (dòng nhập hàng
     không có người chuyển khoản, dòng thanh toán không có số lượng…) mang lớp
     .o-trong và bị giấu hẳn cho thẻ gọn. */
  #man-so .bang-cuon.khong-tu-chinh { max-height: none; overflow: visible; }
  table.bang-so { display: block; min-width: 0; }
  .bang-so thead { display: none; }
  .bang-so tbody, .bang-so tfoot { display: block; }
  .bang-so tbody td.o-trong { display: none; }

  /* Mỗi dòng là một THẺ RỜI: có lề dưới tách hẳn nhau ra, bo góc, viền quanh.
     Dính liền thành một khối như trước thì nhìn không ra dòng nào với dòng nào. */
  .bang-so tbody { display: block; padding: 8px 8px 0; }
  .bang-so tbody tr {
    /* CĂN GIỮA theo chiều dọc. Trước để `flex-end`: mép DƯỚI của các ô bằng nhau,
       nhưng cỡ chữ mỗi ô một khác (số 15px đậm, ngày 13,5px, nút là ô vuông 30px)
       nên nhìn vẫn thấy chữ cao thấp so le. Căn giữa thì hàng nào cũng thẳng. */
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
    padding: 9px 12px;
    margin-bottom: 9px;
    border: 1px solid var(--vien);
    border-radius: 10px;
    /* đặt SAU border chung, không thì bị luật trên ghi đè mất vạch màu bên trái */
    border-left: 3px solid transparent;
  }
  .bang-so tbody td { display: block; border: 0; padding: 0; background: transparent; overflow: visible; }
  .bang-so tbody td::before {
    content: attr(data-nhan); display: block; margin-bottom: 1px;
    font-size: 10px; font-weight: 600; color: var(--chu-nhat); letter-spacing: .1px;
  }
  /* ngày và nội dung khỏi cần nhãn, nhìn là biết */
  .bang-so tbody td[data-nhan="Ngày"]::before,
  .bang-so tbody td[data-nhan="Nội dung"]::before { content: none; }
  /* Ô số thứ tự cũng vậy — mà ở đây còn QUAN TRỌNG hơn: ô này là `display: grid`
     với `place-items: center`, nên cái ::before rỗng cũng thành MỘT Ô LƯỚI nằm
     chồng lên trên con số, đẩy số lệch khỏi tâm vòng tròn. */
  .bang-so tbody td.stt::before, table.bang tbody td.o-stt::before { content: none; }

  /* nền phân biệt dòng chuyển từ ô sang cả thẻ */
  .bang-so tbody tr.dong-hang td, .bang-so tbody tr.dong-tra td, .bang-so tbody tr.chua-ck td { background: transparent; }
  /* vạch màu bên trái cho biết ngay dòng nhập hàng hay dòng trả tiền */
  .bang-so tbody tr.dong-hang { background: #f8fafe; border-left-color: var(--hang); }
  .bang-so tbody tr.dong-tra { background: #f5fbf8; border-left-color: var(--tra); }
  .bang-so tbody tr.chua-ck { background: #fdf8ee; border-left-color: var(--cho); }
  /* kẻ sọc: trên điện thoại nền nằm ở cả thẻ, không ở từng ô */
  .bang-so tbody tr.dong-hang:nth-child(even) { background: #eaf1fc; }
  .bang-so tbody tr.dong-tra:nth-child(even) { background: #e6f4ee; }
  .bang-so tbody tr.chua-ck:nth-child(even) { background: #fbf2e0; }
  .bang-so tbody tr.dong-hang:nth-child(even) td,
  .bang-so tbody tr.dong-tra:nth-child(even) td,
  .bang-so tbody tr.chua-ck:nth-child(even) td { background: transparent; }

  /* Thứ tự bày trong thẻ (chủ sổ chốt 28/08/2026, chỉ tận nơi trên ảnh chụp):
       hàng 1  [① · Còn nợ · ngày ......... ✏️ ✕]   ← số quan trọng nhất + việc của dòng
       hàng 2  [nội dung                        ]
       hàng 3  [SL·ĐG·Thành tiền  hoặc  Đã trả ... Ngày tích]
       hàng 4  [người chuyển khoản              ]
       hàng 5  [Ảnh ..................... ☑ Đã CK]
     Đặt bằng order nên ô nào rỗng bị giấu thì các ô sau tự dồn lên, không để lại chỗ trống.

     XẾP THEO TÊN CỘT (data-nhan), ĐỪNG QUAY LẠI nth-child. Bài học 28/08/2026:
     thêm cột "Ngày tích" vào giữa bảng là mọi cột từ vị trí 10 trở đi lùi một bậc,
     ô "Còn nợ" mất luật xếp chỗ (order mặc định 0) nên nhảy lên đầu thẻ, chiếm chỗ
     của số thứ tự và đẩy hai nút xuống một dòng riêng. Tên cột thì không xê dịch. */
  .bang-so tbody td.stt                          { order: 1; flex: 0 0 auto; }
  .bang-so tbody td[data-nhan="Còn nợ"]          { order: 2; flex: 0 0 auto; text-align: left; }
  /* căn MÉP DƯỚI riêng cho ngày: ô "Còn nợ" bên cạnh là khối hai dòng (nhãn nhỏ
     + số to), căn giữa thì ngày rơi vào khoảng giữa hai dòng đó nên trông cao
     hơn con số. Căn mép dưới thì ngày thẳng hàng với chính con số. */
  .bang-so tbody td[data-nhan="Ngày"]            { order: 3; flex: 0 0 auto; align-self: flex-end; }
  .bang-so tbody td.o-nut                        { order: 4; flex: 0 0 auto; margin-left: auto; }
  .bang-so tbody td[data-nhan="Nội dung"]        { order: 5; flex: 1 1 100%; }
  .bang-so tbody td[data-nhan="SL"]              { order: 6; flex: 0 0 66px; }
  .bang-so tbody td[data-nhan="Đơn giá"]         { order: 7; flex: 0 0 96px; }
  .bang-so tbody td[data-nhan="Thành tiền"]      { order: 8; flex: 0 0 auto; }
  .bang-so tbody td[data-nhan="Đã thanh toán"]   { order: 9; flex: 0 0 104px; }
  /* Ngày tích đứng cùng hàng với số tiền đã thanh toán, dồn sang phải */
  .bang-so tbody td[data-nhan="Ngày tích"]       { order: 10; flex: 0 0 auto; margin-left: auto;
                                                   text-align: right; }
  .bang-so tbody td[data-nhan="Người chuyển khoản"] { order: 11; flex: 1 1 100%; }
  .bang-so tbody td[data-nhan="Ảnh"]             { order: 12; flex: 0 0 auto; }
  /* ô tích dồn về góc phải hàng cuối, đối diện nút Ảnh */
  .bang-so tbody td[data-nhan="Đã CK"]           { order: 13; flex: 0 0 auto; margin-left: auto; }
  /* Đồng kiểm chiếm hẳn một hàng cuối thẻ: ở đây phải viết ra TÊN người đã ký,
     vì điện thoại không rê chuột được để đọc title như trên máy bàn. */
  /* ---- Đồng kiểm trên điện thoại: một NÚT chiếm hết bề ngang thẻ ----------
     Trước đây chỗ này là ô tích trần 22×22px kèm dòng chữ, nhìn như một dòng
     thông tin chứ không như thứ bấm được — mà với tài khoản nhà cung cấp thì
     bấm dấu này là việc DUY NHẤT họ vào đây để làm. Ngón tay cần 44×44px. */
  .bang-so tbody td[data-nhan="Đồng kiểm"]       { order: 14; flex: 1 1 100%; }
  .bang-so tbody td.o-dk { display: flex; padding-top: 2px; }
  /* Bỏ nhãn "Đồng kiểm" ở đầu dòng — chữ trong nút đã nói rồi, mà bỏ đi thì nút
     được cả bề ngang thẻ, bấm trượt cũng trúng. */
  .bang-so tbody td.o-dk::before { content: none; }
  .bang-so tbody td.o-dk .dk-nut {
    flex: 1 1 auto; display: flex; align-items: center; gap: 11px;
    min-height: 44px; padding: 7px 13px;
    border: 1.5px solid var(--vien-dam); border-radius: 10px;
    background: #fff; text-align: left;
  }
  /* Đã ký thì đổi màu viền + nền theo NGƯỜI ký, giống hệt màu dấu tích trên máy
     bàn: chủ sổ đen, nhà cung cấp đỏ. */
  .bang-so tbody td.o-dk .dk-nut.dk-chu { border-color: #111827; background: #f4f5f7; }
  .bang-so tbody td.o-dk .dk-nut.dk-ncc { border-color: #dc2626; background: #fdf3f3; }
  .bang-so tbody td.o-dk input { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; }
  .bang-so tbody td.o-dk .dk-ai {
    display: block; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--chu);
  }
  .bang-so tbody td.o-dk .dk-nut:not(.dk-chu):not(.dk-ncc) .dk-ai { color: var(--chu-nhat); }
  /* Dòng "ai ký, ngày nào" nhỏ và nhạt hơn, xuống dòng riêng cho khỏi tranh chỗ
     với chữ chính — điện thoại không rê chuột đọc title được. */
  .bang-so tbody td.o-dk .dk-ky {
    display: block; font-size: 11.5px; font-weight: 500; color: var(--chu-nhat);
  }

  /* Số thứ tự: vòng tròn có viền hẳn hoi. Chỉ tô nền nhạt thì trên nền thẻ
     cũng nhạt sẽ chẳng thấy vòng đâu. */
  .bang-so tbody td.stt, table.bang tbody td.o-stt {
    width: 26px; height: 26px; flex: 0 0 26px; padding: 0;
    display: grid; place-items: center; align-self: center;
    background: #fff; color: var(--chu-nhat); border: 1.5px solid var(--vien-dam);
    font-size: 11px; font-weight: 700; border-radius: 50%;
  }
  .bang-so tbody tr:hover td.stt { background: #fff; }
  /* Ngày phải CÙNG CỠ CHỮ với số tiền thì đường chân chữ mới trùng nhau.
     Đáy hộp bằng nhau là chưa đủ: cỡ chữ khác thì phần đệm trên/dưới của dòng
     khác, chân chữ vẫn lệch (đo được: số 14,5px, ngày 13,5px → nhìn so le).
     Ngày vẫn để chữ mảnh và nhạt hơn nên không tranh chỗ với con số. */
  .bang-so tbody td[data-nhan="Còn nợ"],
  .bang-so tbody td[data-nhan="Ngày"] { font-size: 14.5px; line-height: 21.75px; }
  .bang-so tbody td[data-nhan="Ngày"] {
    color: var(--chu-nhat); font-weight: 500; white-space: nowrap;
    margin-left: 7px;   /* + 9px khe sẵn = 16px, số tiền dài mấy cũng không dính ngày */
  }

  /* Ba nút việc của dòng: đều có ô vuông bao quanh cho thấy là nút bấm được.
     Lên/xuống dùng ô trắng viền xám (việc bình thường), xoá dùng ô đỏ nhạt
     viền đỏ và tách ra 10px — trên điện thoại không rê chuột được để thấy
     nút chuyển màu, nên phải cho thấy màu ngay từ đầu. */
  .bang-so tbody td.o-nut .nut.nho {
    width: 34px; height: 30px; padding: 0 !important; justify-content: center;
    border: 1px solid var(--vien-dam); border-radius: 8px;
    background: #fff; color: var(--chu-nhat);
  }
  .bang-so tbody td.o-nut .nut.nho:disabled { opacity: .38; }
  .bang-so tbody td.o-nut .nut.nho.nguy {
    margin-left: 10px; color: var(--do); background: var(--do-nhat); border-color: #f0bcbc;
  }

  /* Nút ảnh: cùng cỡ với ô tích “Đã CK” và sát mép trái ô để thẳng hàng với
     chữ “Ảnh” bên trên — trước nó thụt vào 8px nên nhãn với icon lệch nhau. */
  .bang-so tbody td.o-anh .nut-anh {
    width: 26px; height: 26px; padding: 0 !important; justify-content: center;
    border: 1px solid var(--vien-dam); border-radius: 8px; background: #fff;
  }
  .bang-so tbody td.o-anh .nut-anh svg { width: 19px; height: 19px; flex: 0 0 19px; }
  .bang-so tbody td.o-anh .nut-anh.co-anh { color: var(--tra); border-color: var(--tra); background: var(--luc-nhat); }
  .bang-so tbody td.o-ck input { margin: 0; }

  .bang-so tbody td.o-ck, .bang-so tbody td.o-anh { text-align: left; }
  .bang-so tbody td.o-ck input { width: 22px; height: 22px; }
  .bang-so tbody td.o-nut::before { content: none; }
  .bang-so tbody .nut.nho svg { width: 17px; height: 17px; flex: 0 0 17px; }

  /* ---- Các bảng khác (Thanh toán, Nhà cung cấp, Bảng giá, Báo cáo, Khách trả
     tiền, nhật ký, sao lưu…) cũng bày mỗi dòng thành một thẻ, khỏi vuốt ngang.
     Nhãn cột do app.js gắn vào data-nhan; ô rỗng bị giấu. ---- */
  .bang-cuon table.bang:not(.bang-so) { display: block; min-width: 0; }
  table.bang:not(.bang-so) thead { display: none; }
  table.bang:not(.bang-so) tbody, table.bang:not(.bang-so) tfoot { display: block; }
  table.bang:not(.bang-so) tbody tr, table.bang:not(.bang-so) tfoot tr {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px 14px;
    padding: 10px 12px; border-bottom: 1px solid var(--vien);
  }
  table.bang:not(.bang-so) tbody td, table.bang:not(.bang-so) tfoot td {
    display: block; border: 0; padding: 0; flex: 0 1 auto; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  table.bang:not(.bang-so) td[data-nhan]::before {
    content: attr(data-nhan); display: block; margin-bottom: 1px;
    font-size: 10px; font-weight: 600; color: var(--chu-nhat); letter-spacing: .1px;
  }
  table.bang:not(.bang-so) tbody td.o-trong { display: none; }
  table.bang:not(.bang-so) tbody tr:nth-child(even) { background: #eff5fd; }
  table.bang:not(.bang-so) tbody tr:nth-child(even) > td { background: transparent; }
  /* cột không đặt bề ngang cố định = cột chữ dài -> cho chiếm cả bề ngang thẻ */
  table.bang:not(.bang-so) tbody td.o-rong { flex: 1 1 100%; font-weight: 650; font-size: 14px; }
  table.bang:not(.bang-so) tbody td.o-rong[data-nhan]::before { font-weight: 600; }
  /* số căn trái để thẳng hàng với nhãn của nó */
  table.bang:not(.bang-so) tbody td.so { text-align: left; }
  /* ô chỉ chứa nút thì đẩy hẳn sang phải */
  table.bang:not(.bang-so) tbody td.o-viec { margin-left: auto; display: flex; gap: 6px; }
  table.bang:not(.bang-so) tbody td.o-viec::before { content: none; }
  table.bang:not(.bang-so) tbody td.o-viec .nut { padding: 7px 12px; }
  /* Nút trong dòng phải NHÌN RA LÀ NÚT ngay, không cần rê chuột.
     Luật chung (.nut.nho) cố ý để chúng trơn — viền trong suốt, nền trong
     suốt, chỉ ăn màu khi hover — cho bảng trên máy bàn khỏi rối. Điện thoại
     không có hover nên ba nút “Mở sổ · Sửa · Xoá” trông y như chữ thường.
     Sổ công nợ đã chữa riêng từ trước; đây là cho MỌI bảng còn lại. */
  table.bang:not(.bang-so) tbody td.o-viec .nut.nho {
    border: 1px solid var(--vien-dam); border-radius: 8px;
    background: #fff; color: var(--chu-nhat);
  }
  table.bang:not(.bang-so) tbody td.o-viec .nut.nho.nguy {
    color: var(--do); background: var(--do-nhat); border-color: #f0bcbc;
  }
  /* dòng “chưa có gì” dùng colspan nên không thành thẻ được */
  table.bang:not(.bang-so) tbody td.trong { flex: 1 1 100%; padding: 24px 8px; }
  /* dòng tổng của các bảng này */
  table.bang:not(.bang-so) tfoot td:empty { display: none; }

  /* dòng tổng ở đáy */
  .bang-so tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 12px; }
  .bang-so tfoot td { display: block; border: 0; padding: 0; font-size: 14px; }
  .bang-so tfoot td:empty { display: none; }
  .bang-so tfoot td[data-nhan]::before {
    content: attr(data-nhan) " "; font-size: 11px; font-weight: 600; color: var(--chu-nhat);
  }

  /* ngón tay to hơn con trỏ chuột */
  .bang-so .nut.nho { padding: 7px 8px; }
  td.o-ck input { width: 19px; height: 19px; }
  /* 16px là ngưỡng iPhone không tự phóng to trang khi bấm vào ô nhập */
  .o-nhap { font-size: 16px; }

  /* hộp thoại: gần như toàn màn hình, các ô xếp một cột */
  .lop-phu { padding: 10px; }
  .hop-thoai, .hop-thoai.rong { width: 100%; max-height: 92vh; }
  .form-luoi { grid-template-columns: 1fr; }
  .ht-chan { flex-wrap: wrap; }
  .ht-chan .nut { flex: 1 1 auto; justify-content: center; }
  .hang-nhap .o-nhap { min-width: 0; }

  /* thông báo trải ngang đáy, không đè lên nút */
  .thong-bao { left: 10px; right: 10px; bottom: 10px; }
  .tb { max-width: none; }

  /* hai quyển lịch xếp dọc cho vừa màn hình hẹp */
  .lich-doi { grid-template-columns: 1fr; gap: 22px; }
  .lich-o button { padding: 10px 0; font-size: 14px; }
  .nut-khoang { min-width: 0; width: 100%; }

  /* biểu đồ thấp lại cho vừa màn hình dọc */
  .bd { --bd-cao: 150px; }
  .bd-x { font-size: 9.5px; }
  .chu-thich { flex-wrap: wrap; gap: 10px 16px; }
}

/* ============ Ảnh chuyển khoản ============ */
td.o-ck, td.o-anh { white-space: nowrap; }
.nut-anh { color: var(--vien-dam); padding: 2px 4px !important; }
.nut-anh:hover { color: var(--xanh); }
.nut-anh.co-anh { color: var(--tra); }
.nut-anh.co-anh:hover { color: var(--tra); background: var(--luc-nhat); }

.anh-dan {
  border: 2px dashed var(--vien-dam); border-radius: 12px; background: #fafbfe;
  padding: 26px 20px; text-align: center; cursor: pointer; outline: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.anh-dan:focus, .anh-dan.keo-vao { border-color: var(--xanh); background: var(--xanh-nhat); }
.anh-dan b { font-size: 15px; }
.anh-dan span { font-size: 12.5px; color: var(--chu-nhat); }
.anh-dan .anh-bt svg { width: 34px; height: 34px; stroke: var(--vien-dam); stroke-width: 1.4; fill: none; }
.anh-dan:focus .anh-bt svg, .anh-dan.keo-vao .anh-bt svg { stroke: var(--xanh); }
.anh-dan .nut { margin-top: 4px; }

.anh-khung {
  border: 1px solid var(--vien); border-radius: 10px; overflow: auto;
  background: #f4f6fa; max-height: 58vh; display: grid; place-items: center; padding: 8px;
}
.anh-khung img { max-width: 100%; display: block; border-radius: 6px; }
.anh-nut { display: flex; gap: 8px; margin-top: 6px; }

/* ============ Đếm ngược gửi Zalo ============ */
.tb.zalo-hen {
  display: flex; align-items: center; gap: 11px;
  background: #0d3b66; padding: 11px 13px;
}
.tb.zalo-hen .nho { font-size: 11.5px; color: #9fb6cf; }
.tb.zalo-hen .nut { border-color: #3d6187; background: transparent; color: #d7e4f2; }
.tb.zalo-hen .nut:hover { background: #164a7d; color: #fff; }
.vong-nho {
  width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: quay .8s linear infinite;
}

/* ============ Ô tên Zalo ở đầu màn Sổ công nợ ============ */
.o-zalo { display: flex; align-items: center; gap: 7px; position: relative; }
.o-zalo svg {
  width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--chu-nhat);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.o-zalo input { width: 190px; }
.o-zalo input.chua-khai { border-color: var(--cho); background: #fffaf1; }
.o-zalo input.chua-khai::placeholder { color: var(--cho); }
.o-zalo-bao {
  position: absolute; left: 24px; bottom: -16px;
  font-size: 11px; color: var(--chu-nhat); white-space: nowrap;
}
.o-zalo-bao.xong { color: var(--tra); }
.o-zalo-bao.loi { color: var(--do); }