/* ══════════════════════════════════════════════════════════════════════
   TOTA CLASS — QUY TẮC KHI IN RA PDF
   Nạp bằng:  <link rel="stylesheet" href="tai-lieu-in.css" media="print">

   🔴 MỤC TIÊU DUY NHẤT: mỗi trang tài liệu = ĐÚNG một tờ A4 ngang.
      Tràn một chút là tự sinh ra tờ giấy thứ hai gần như trắng, và bản PDF
      gửi khách nhìn như làm hỏng.

   Vùng chữ còn lại sau khi trừ lề và padding:
        A4 ngang            297 × 210 mm
        trừ lề @page 8mm    281 × 194 mm
        trừ padding trang   253 × 174 mm   (14mm ngang · 10mm dọc)
        đổi ra 96dpi        956 × 657 px   ← mọi trang phải THẤP HƠN 657px

   Cách kiểm lại sau khi sửa (mở tài liệu trên trình duyệt, dán vào Console):

       document.querySelector('link[media="print"]').media = 'all';
       // rồi đo chiều cao từng .trang ở bề ngang 956px — CHỜ ẢNH TẢI XONG,
       // không chờ thì ảnh cao 0px và phép đo báo đạt oan.

   ⚠️ Thêm trang mới thì PHẢI đo lại. Trang nhiều dòng (kiểu bảng đối chiếu)
      và trang có ảnh màn máy tính là hai loại hay tràn nhất.
   ══════════════════════════════════════════════════════════════════════ */

@page{size:A4 landscape;margin:8mm}

body{background:#fff}

/* Thứ chỉ dành cho lúc xem trên máy — không in */
.dieu-khien{display:none}
.bang-mau{display:none}

.boc{max-width:none;padding:0}

/* Đang ở chế độ chiếu mà bấm In thì vẫn phải in ĐỦ mọi trang, không phải
   một trang đang hiện. Không có dòng này là mất sạch các trang còn lại. */
body.che-do-slide .trang{display:block}
body.che-do-slide .trang.dang-hien{min-height:0}

.trang{
  box-shadow:none;border:0;border-radius:0;
  margin:0;padding:10mm 14mm;
  page-break-after:always;break-after:page;
  page-break-inside:avoid;break-inside:avoid;
  min-height:0;
}
.trang:last-child{page-break-after:auto;break-after:auto}

/* ── Nén cỡ chữ ─────────────────────────────────────────────────────── */
.nhan{margin-bottom:8px;font-size:11px}
.trang h1{font-size:26px;margin-bottom:12px}
.trang h2{font-size:21px}
.dan{font-size:14.5px;margin-bottom:16px}
.so-trang{top:7mm;right:14mm;font-size:10.5px}

/* ── Bảng đối chiếu: 10 dòng phải vừa một tờ ────────────────────────── */
.doi-chieu{gap:5px}
.o-tay,.o-may{padding:6px 13px;font-size:13.5px;border-radius:9px}
.o-tay .bieu,.o-may .bieu{font-size:16px}
.hang-dau{font-size:10.5px;margin-bottom:2px;padding:0 13px}
.mui{font-size:16px}

/* ── Ảnh: thu nhỏ để chừa chỗ cho chữ ───────────────────────────────
   Thu nhỏ ở bản in KHÔNG làm mờ: ảnh 1462px thật in trên 560px bề ngang là
   khoảng 250 dpi, sắc hơn mức mắt phân biệt được trên giấy. Và trong PDF thì
   người đọc phóng to được. */
.anh{box-shadow:none}
/* 520px, không phải 560: ở 560 thì trang Học phí cao 661px — TRÀN 4px, tức
   tự sinh ra tờ giấy thứ hai gần như trắng. Đo được, không phải phỏng đoán.

   🔴 VÀ PHẢI CHẶN CẢ CHIỀU CAO. Chặn bề ngang một mình KHÔNG đoán được ảnh
      cao bao nhiêu: ảnh chụp ở cửa sổ hẹp có tỉ lệ khác hẳn. Đo được trên
      trang Xếp hạng: cùng bề ngang 518px mà ảnh cao 464px thay vì ~253px,
      làm cả trang tràn 67px. `width:fit-content` để khung viền bó sát ảnh
      sau khi ảnh bị thu theo chiều cao. */
.anh-may{max-width:520px;width:fit-content;margin-left:auto;margin-right:auto}
.anh-may img{max-height:380px;max-width:100%;width:auto}
.cot-anh .anh{max-width:238px}
.ten-anh{font-size:11.5px}

/* Mã QR nhóm Zalo. 108px khi in = ~28mm bề ngang — trên ngưỡng quét được
   (~20mm) mà không đẩy trang 22 tràn sang tờ thứ hai. Nhỏ hơn nữa thì máy quét
   kém đọc không ra, và mất luôn kênh liên hệ duy nhất trên bản in. */
.qr{width:108px !important;height:108px !important}

/* ── Chú giải ───────────────────────────────────────────────────────── */
.chu-y{gap:11px}
.chu-y.ngang{gap:20px;margin-top:14px}
.chu-y .so{width:22px;height:22px;font-size:11.5px}
.chu-y strong{font-size:13px}
.chu-y span.mo{font-size:12.5px;line-height:1.45}

.chot{margin-top:14px;padding:10px 14px;font-size:12.5px;border-radius:0 9px 9px 0}

/* ── Bìa ────────────────────────────────────────────────────────────── */
.bia{padding-top:22mm;padding-bottom:0}
.bia .dau-an{font-size:24px;margin-bottom:18px}
.bia h1{font-size:34px;margin-bottom:14px}
.bia .dan{font-size:16px;margin-bottom:24px}
.bia .ai{padding:12px 18px}
.bia .ai b{font-size:13.5px}
.bia .ai span{font-size:12px}