/* Bảng kê học phí (public/bang-ke.js): tờ giấy trắng, chữ mực, một màu nhấn (--nhan) cho tên bé và cam đậm cho số tiền
   cần đóng. Dùng ở trang phụ huynh (hoc-phi.html) và hộp bảng kê của thầy (thay-hoc-phi.js); in mỗi bé một tờ A5. */
.bang-ke {
  --bk-muc: var(--muc, #14303d); --bk-mo: var(--mo, #4f6773); --bk-vien: var(--vien, #d7e4eb); --bk-nhan: var(--nhan, #33728f);
  --bk-nen: var(--nen, #eef6fb); --bk-tong: #a84a06; --bk-tot: var(--tot, #2b8a3e);
  display: grid; gap: 18px; padding: 24px 20px 20px; border-radius: 20px; background: #fff; color: var(--bk-muc);
  border-top: 6px solid var(--bk-nhan); font-family: var(--chu, "Nunito", "Be Vietnam Pro", system-ui, sans-serif);
  text-align: left;
}
.bk-dau { display: grid; gap: 4px; }
.bk-dau p { margin: 0; }
.bk-lop { font: 800 .78rem/1.2 var(--chu-to, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--bk-mo); }
.bk-dau h2 { margin: 2px 0 4px; font: 900 clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem)/1.15 var(--chu-to, inherit); color: var(--bk-muc); }
.bk-be { font: 800 1.2rem/1.25 var(--chu-to, inherit); color: var(--bk-nhan); }
.bk-ky { font-weight: 600; font-size: .95rem; color: var(--bk-mo); }

.bk-bang { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.bk-bang thead th { padding: 0 0 8px; text-align: left; font: 800 .78rem/1.2 var(--chu-to, inherit); letter-spacing: .05em; text-transform: uppercase; color: var(--bk-mo); border-bottom: 2px solid var(--bk-vien); }
.bk-bang tbody td { padding: 10px 8px 10px 0; vertical-align: top; border-bottom: 1px solid var(--bk-vien); }
.bk-bang tbody td:last-child { padding-right: 0; }
.bk-bang td b { display: block; font-weight: 800; white-space: nowrap; }
.bk-bang td small { display: block; font-size: .8rem; font-weight: 600; color: var(--bk-mo); }
.bk-bang .so { text-align: right; white-space: nowrap; }
.bk-bang .khong-tinh td { color: var(--bk-mo); }
.bk-loai { display: none; }
.bk-bang tfoot th { padding: 10px 8px 0 0; text-align: left; font-weight: 700; }
.bk-bang tfoot td { padding: 10px 0 0; font-weight: 800; }
.bk-bang .bk-tong th, .bk-bang .bk-tong td { padding-top: 12px; border-top: 3px solid var(--bk-muc); }
.bk-bang .bk-tong th { font: 900 1.15rem/1.2 var(--chu-to, inherit); vertical-align: middle; }
.bk-bang .bk-tong td { font: 900 1.6rem/1.1 var(--chu-to, inherit); color: var(--bk-tong); }
.bk-bang tfoot tr:not(.bk-tong) + .bk-tong th, .bk-bang tfoot tr:first-child th, .bk-bang tfoot tr:first-child td { padding-top: 14px; }

.bk-ck { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 14px 20px; align-items: center; padding: 16px; border-radius: 18px; background: var(--bk-nen); }
.bk-qr { display: block; width: 100%; height: auto; border-radius: 10px; }
.bk-ck dl { display: grid; gap: 8px; margin: 0; }
.bk-ck dt { font: 800 .75rem/1.2 var(--chu-to, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--bk-mo); }
.bk-ck dd { margin: 2px 0 0; font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; }
.bk-ck dd b { font-size: 1.15rem; color: var(--bk-tong); }
.bk-stk { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bk-quet { grid-column: 1 / -1; margin: 0; font-size: .88rem; font-weight: 600; color: var(--bk-mo); }
.bk-da-thu { margin: 0; padding: 14px 16px; border-radius: 16px; background: #e7f5ea; color: var(--bk-tot); font-weight: 800; }
.bk-ghi { margin: 0; font-size: .85rem; font-weight: 600; color: var(--bk-mo); text-wrap: pretty; }

@media (max-width: 520px) {
  .bang-ke { padding: 20px 16px 16px; }
  /* màn hẹp: bỏ cột Ghi chú, ghi chú xuống dưới ngày (cạnh tên nhóm) để ba cột không chật */
  .bk-bang thead th:nth-child(2), .bk-bang tbody td:nth-child(2) { display: none; }
  .bk-loai { display: inline; }
  /* bỏ một cột thì colspan ở chân bảng lệch cột: mỗi hàng thành một dải flex (tên trái, tiền phải) */
  .bk-bang, .bk-bang thead, .bk-bang tbody, .bk-bang tfoot { display: block; }
  .bk-bang tr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .bk-bang thead tr { border-bottom: 2px solid var(--bk-vien); }
  .bk-bang thead th { border-bottom: 0; }
  .bk-bang tbody tr { border-bottom: 1px solid var(--bk-vien); }
  .bk-bang tbody td { border-bottom: 0; }
  .bk-bang tbody td:first-child, .bk-bang tfoot th { flex: 1 1 auto; min-width: 0; }
  .bk-bang .bk-tong { margin-top: 12px; border-top: 3px solid var(--bk-muc); }
  .bk-bang .bk-tong th, .bk-bang .bk-tong td { border-top: 0; }
  .bk-ck { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .bk-qr { width: min(240px, 100%); }
  .bk-ck dl { justify-items: center; }
}

/* Thầy in nhiều bảng kê: thay-hoc-phi.js đổ các tờ vào .vung-in rồi gắn body.dang-in. */
.vung-in { display: none; }
@page { size: A5; margin: 10mm; }
@media print {
  body.dang-in > :not(.vung-in) { display: none !important; }
  body.dang-in .vung-in { display: block; }
  body.dang-in, body.dang-in .vung-in { background: #fff; }
  .bang-ke { padding: 0; border-radius: 0; border-top-width: 6px; box-shadow: none; max-width: none; break-after: page; }
  .bang-ke:last-child { break-after: auto; }
  .bk-ck, .bk-bang tfoot { break-inside: avoid; }
  .bk-ck { grid-template-columns: 42mm minmax(0, 1fr); text-align: left; justify-items: start; }
  .khong-in { display: none !important; }
}