/* ═══════════════ GIAO DIỆN MÁY TÍNH BẢNG (29/10, đợt 2) ═══════════════
 * Chỉ áp khi <html data-tb="tb"> (cảm ứng, bề rộng 700–1400px — iPad dọc và iPad ngang; xem thietbi.js).
 * Nạp SAU dien-thoai.css: phần chung cho màn cảm ứng (thanh đáy, bảng Tất cả, tên màn, khung thẻ) nằm bên đó,
 * file này chỉ viết đè chỗ máy tính bảng khác điện thoại:
 *   - thanh đáy 7 màn + Tất cả, chữ to hơn;
 *   - bảng VỪA bề ngang giữ dạng bảng, hàng cao + ô tích / nút to cho ngón tay;
 *   - bảng QUÁ RỘNG mới thành thẻ (giaodiendt.js đo), thẻ xếp nhiều cột cạnh nhau;
 *   - bảng Tất cả nằm giữa, lưới 5 cột; hộp thoại giữa màn (luật máy tính ≥700px của style.css), chân hộp đứng yên.
 */

/* ───────────── Khung ───────────── */
html[data-tb="tb"] body:not(.chua-dang-nhap) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
html[data-tb="tb"] #lam-viec > .boc { padding-left: 18px; padding-right: 18px; }
html[data-tb="tb"] body:not(.chua-dang-nhap) .tb-tieu-de { font-size: 19px; margin: 0 12px; }

/* ───────────── Thanh đáy ───────────── */
html[data-tb="tb"] .tb-day__nut { height: 66px; font-size: 12.5px; gap: 4px; }
html[data-tb="tb"] .tb-day__bieu { font-size: 24px; }
html[data-tb="tb"] .tb-day__nut.dang::before { left: 30%; right: 30%; }
html[data-tb="tb"] #hdNutHoi { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }

/* ───────────── Bảng "Tất cả màn hình": nằm giữa, 5 cột ───────────── */
html[data-tb="tb"] .tb-tatca.mo { justify-content: center; }
html[data-tb="tb"] .tb-tatca__khung { max-width: 860px; max-height: 82vh; padding-left: 20px; padding-right: 20px; }
html[data-tb="tb"] .tb-tatca__luoi { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
html[data-tb="tb"] .tb-tatca__o { min-height: 88px; font-size: 13px; }
html[data-tb="tb"] .tb-tatca__bieu { font-size: 28px; }
html[data-tb="tb"] .tb-tatca__chan { max-width: 520px; margin-left: auto; margin-right: auto; width: 100%; }

/* ───────────── Thanh lọc: nhiều ô một hàng ───────────── */
html[data-tb="tb"] .thanh-loc { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
html[data-tb="tb"] .btm-thanh .btm-tim { flex: 1 1 260px; }

/* ───────────── Bảng dạng bảng: to cho ngón tay ───────────── */
html[data-tb="tb"] .bang:not(.tb-the) th,
html[data-tb="tb"] .bang:not(.tb-the) td { padding-top: 11px; padding-bottom: 11px; }
html[data-tb="tb"] .bang:not(.tb-the) td { font-size: 14.5px; }
html[data-tb="tb"] .bang input[type="checkbox"] { width: 22px; height: 22px; }
html[data-tb="tb"] .bang .nut--nho { min-height: 38px; padding-left: 12px; padding-right: 12px; }
html[data-tb="tb"] .bang-boc { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

/* ───────────── Bảng quá rộng → thẻ, nhiều thẻ một hàng ─────────────
 * Thẻ rộng ~300px trở lên: iPad dọc 2 thẻ / hàng, iPad ngang 3 thẻ / hàng. Thẻ có hàng nút RIÊNG nằm dưới
 * (Sản phẩm, Dự toán…) phải giữ một cột, kẻo hàng nút rơi sang cột bên cạnh, rời khỏi thẻ của nó. */
html[data-tb="tb"] .bang.tb-the tbody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start;
}
html[data-tb="tb"] .bang.tb-the tbody tr:not(.dt-nut-hang):not(.hang-nut-duoi) { margin-bottom: 0; height: 100%; align-content: start; }
html[data-tb="tb"] .bang.tb-the:has(tr.dt-nut-hang, tr.hang-nut-duoi) tbody { display: block; }
html[data-tb="tb"] .bang.tb-the:has(tr.dt-nut-hang, tr.hang-nut-duoi) tbody tr:not(.dt-nut-hang):not(.hang-nut-duoi) {
  grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto;
}
html[data-tb="tb"] .bang.tb-the:has(tr.dt-nut-hang, tr.hang-nut-duoi) tbody tr.dt-co-nut,
html[data-tb="tb"] .bang.tb-the:has(tr.dt-nut-hang, tr.hang-nut-duoi) tbody tr.co-hang-nut { margin-bottom: 0; }
html[data-tb="tb"] .bang.tb-the:has(tr.dt-nut-hang, tr.hang-nut-duoi) tbody tr:not(.dt-co-nut):not(.co-hang-nut):not(.dt-nut-hang):not(.hang-nut-duoi) { margin-bottom: 12px; }
html[data-tb="tb"] .bang.tb-the tr.dt-nut-hang, html[data-tb="tb"] .bang.tb-the tr.hang-nut-duoi { display: block; margin-bottom: 12px; }
/* Dòng "chưa có dữ liệu" trải hết lưới. */
html[data-tb="tb"] .bang.tb-the tbody tr:has(> td.bang__rong) { grid-column: 1 / -1; }