/* ══════════════════════════════════════════════════════════════════════
   TOTA CLASS — ĐỊNH DẠNG CHUNG CHO BỘ TÀI LIỆU
   Dùng chung cho Quyển 1 (Giới thiệu) và Quyển 2 (Cẩm nang).
   Sửa file này là cả hai quyển đổi theo.

   Màu lấy từ chính dấu ấn Tota Class trong `src/totaclass-join.html:47-49`
   (.tw-a #d42d2d, .tw-b #1a1f2e) — không tự nghĩ màu mới.

   Ba mặt dùng chung một file:
     ① đọc cuộn (trang web)     ② bấm từng trang (chiếu)     ③ in ra PDF
   Cách chuyển: nút góc trên phải, hoặc mũi tên ← →.

   ⚠️ Giữ CSS ở mức Chrome 84 như cả dự án (CLAUDE.md mục 5): không CSS lồng
      nhau, không color-mix(). Tài liệu này người bán hàng mở trên máy mới,
      nhưng đồng bộ một sàn thì đỡ phải nhớ hai luật.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --do:#d42d2d;          /* đỏ Tota */
  --muc:#1a1f2e;         /* mực, chữ tiêu đề */
  --giay:#ffffff;
  --nen:#f4f2ef;         /* nền ngoài trang, hơi ấm để trang giấy nổi lên */
  --chu:#2c3244;
  --chu2:#646c80;
  --chu3:#9aa2b4;
  --vien:#e5e2dd;
  --xanh:#1f9d55;
  --cam:#d97706;
  --bong:0 1px 2px rgba(26,31,46,.05), 0 12px 32px rgba(26,31,46,.07);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--nen);
  color:var(--chu);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── Thanh điều khiển ───────────────────────────────────────────────── */
/* Ở GÓC DƯỚI, không phải góc trên. Đặt trên thì nó đè lên tiêu đề trang và
   lên nhãn số trang mỗi lần cuộn — đã thấy tận mắt lúc dựng. */
.dieu-khien{
  position:fixed;bottom:16px;right:16px;z-index:50;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--vien);border-radius:999px;
  padding:6px 8px;box-shadow:var(--bong);
}
.dieu-khien button{
  border:0;background:var(--muc);color:#fff;
  border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
}
.dieu-khien button.phu{background:#eceae6;color:var(--muc)}
.dieu-khien button:disabled{opacity:.35;cursor:default}
.dieu-khien .dem{font-size:13px;color:var(--chu2);padding:0 4px;min-width:52px;text-align:center}

/* ── Trang ──────────────────────────────────────────────────────────── */
.boc{max-width:1180px;margin:0 auto;padding:26px 20px 60px}

.trang{
  background:var(--giay);
  border:1px solid var(--vien);
  border-radius:20px;
  box-shadow:var(--bong);
  padding:46px 54px 50px;
  margin-bottom:26px;
  position:relative;
}

.so-trang{
  position:absolute;top:20px;right:26px;
  font-size:12px;color:var(--chu3);letter-spacing:.06em;
}

/* Chế độ chiếu: chỉ hiện một trang, cao bằng màn hình */
body.che-do-slide .boc{padding-top:64px}
body.che-do-slide .trang{display:none}
body.che-do-slide .trang.dang-hien{
  display:block;
  min-height:calc(100vh - 130px);
}

/* ── Chữ ────────────────────────────────────────────────────────────── */
.nhan{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--do);margin-bottom:14px;
}
.trang h1{
  font-size:40px;line-height:1.18;margin:0 0 14px;
  color:var(--muc);font-weight:800;letter-spacing:-.5px;
}
.trang h2{
  font-size:29px;line-height:1.25;margin:0 0 12px;
  color:var(--muc);font-weight:800;letter-spacing:-.3px;
}
.dan{font-size:18px;color:var(--chu2);margin:0 0 30px;max-width:74ch}
.dan b{color:var(--chu);font-weight:600}

/* ── Bảng "thủ công → số hoá" ───────────────────────────────────────── */
.doi-chieu{display:flex;flex-direction:column;gap:9px}
.hang{
  display:grid;
  grid-template-columns:1fr 34px 1fr;
  align-items:center;gap:12px;
}
.o-tay,.o-may{
  border-radius:12px;padding:12px 16px;
  display:flex;align-items:center;gap:11px;min-width:0;
}
.o-tay{background:#f7f5f2;border:1px solid var(--vien);color:var(--chu2)}
.o-may{background:#fdf3f3;border:1px solid #f3d6d6;color:var(--muc);font-weight:600}
.o-tay .bieu,.o-may .bieu{font-size:19px;flex:none;line-height:1}
.mui{text-align:center;color:#c9b8b8;font-size:19px;font-weight:700}

.hang-dau{
  display:grid;grid-template-columns:1fr 34px 1fr;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--chu3);margin-bottom:4px;padding:0 16px;
}
.hang-dau span:nth-child(3){color:var(--do)}

/* ── Trang định vị: KHÔNG PHẢI ↔ MÀ LÀ ──────────────────────────────── */
.doi-lap{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.doi-lap > div{flex:1 1 300px;min-width:0;border-radius:14px;padding:22px 24px}
.khong-phai{background:#f7f5f2;border:1px solid var(--vien)}
.ma-la{background:#fdf3f3;border:1px solid #f3d6d6}
.doi-lap .dau{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:12px;
}
.khong-phai .dau{color:var(--chu3)}
.ma-la .dau{color:var(--do)}
.doi-lap h3{margin:0 0 10px;font-size:20px;line-height:1.3;color:var(--muc);font-weight:800}
.khong-phai h3{color:var(--chu2)}
.doi-lap p{margin:0;font-size:14.5px;line-height:1.6}
.khong-phai p{color:var(--chu2)}
.ma-la p{color:var(--chu)}

/* ── Ba cột giá trị ─────────────────────────────────────────────────── */
.ba-cot{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap}
.ba-cot > div{
  flex:1 1 240px;min-width:0;
  background:#f7f5f2;border:1px solid var(--vien);border-radius:14px;
  padding:22px 22px 24px;
}
.ba-cot .co{font-size:28px;line-height:1;margin-bottom:12px}
.ba-cot h3{
  margin:0 0 8px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--do);
}
.ba-cot .to{font-size:19px;font-weight:800;color:var(--muc);line-height:1.3;margin-bottom:8px}
.ba-cot p{margin:0;font-size:14px;line-height:1.6;color:var(--chu2)}

/* ── Quy trình toàn trình ───────────────────────────────────────────── */
.luong{display:flex;flex-direction:column;gap:14px}
.luong-hang{display:flex;gap:16px;align-items:flex-start}
.luong-ten{
  flex:none;width:132px;padding-top:9px;
  font-size:14.5px;font-weight:700;color:var(--muc);
}
.luong-buoc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:0}
.luong-buoc span.b{
  background:#fdf3f3;border:1px solid #f3d6d6;border-radius:9px;
  padding:8px 13px;font-size:13.5px;color:var(--muc);
}
.luong-buoc span.m{color:#c9b8b8;font-weight:700;font-size:15px}

/* ── Trước → Sau ────────────────────────────────────────────────────── */
.truoc-sau{display:flex;flex-wrap:wrap;gap:18px}
/* 2×2, không phải 3+1: `flex:1 1 300px` để bốn ô tự xếp thành 3 trên một hàng
   rồi 1 ô lẻ nằm dài suốt bề ngang — trông như bị lỗi. Ép đúng nửa bề ngang. */
.ts-o{
  flex:1 1 calc(50% - 9px);min-width:0;
  border:1px solid var(--vien);border-radius:14px;padding:18px 20px 20px;
}
.ts-o > .ten{font-size:16px;font-weight:800;color:var(--muc);margin-bottom:13px}
.ts-o .doi{display:flex;flex-direction:column;gap:9px}
.ts-o .d{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.ts-o .d .nh{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  border-radius:6px;padding:3px 7px;margin-top:2px;min-width:52px;text-align:center;
}
.ts-o .d.tr .nh{background:#eceae6;color:var(--chu2)}
.ts-o .d.tr{color:var(--chu2)}
.ts-o .d.sa .nh{background:var(--do);color:#fff}
.ts-o .d.sa{color:var(--chu)}

/* ── Ảnh chụp ───────────────────────────────────────────────────────── */
.anh{
  border:1px solid var(--vien);border-radius:14px;
  overflow:hidden;background:#fff;
  box-shadow:0 8px 24px rgba(26,31,46,.09);
}
.anh img{display:block;width:100%;height:auto}

.anh-may{max-width:100%}

.doi-anh{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.cot-anh{flex:1 1 240px;min-width:0;text-align:center}
.cot-anh .anh{max-width:340px;margin:0 auto 12px}
.ten-anh{font-size:13px;color:var(--chu2);font-weight:600}
.ten-anh .co{font-size:15px;margin-right:4px}
/* ⚠️ KHÔNG dùng emoji cờ (🇨🇳 🇬🇧) trong tài liệu này: Windows không có phông
   cờ nên nó hiện ra hai CHỮ CÁI ("CN", "GB") — đã đo trên chính máy dựng.
   Thay bằng chấm màu lấy đúng màu giao diện của trung tâm đó. */
.cham{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:1px;
}
.cham-zh{background:#22c55e}
.cham-en{background:#f97316}

/* ── Chú giải quanh ảnh ─────────────────────────────────────────────── */
.hai-cot{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap}
.hai-cot > .ben-anh{flex:1 1 420px;min-width:0}
.hai-cot > .ben-chu{flex:1 1 260px;min-width:0}

.chu-y{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
/* Chú giải xếp NGANG — dùng khi ảnh cần rộng hết trang để đọc được số liệu.
   Ảnh màn máy tính đặt trong cột hẹp thì chữ trong ảnh nhỏ tới mức vô nghĩa;
   thà để ảnh to hết trang rồi đẩy chú giải xuống dưới. */
.chu-y.ngang{flex-direction:row;gap:26px;margin-top:26px}
.chu-y.ngang li{flex:1 1 200px}
.chu-y li{display:flex;gap:12px;align-items:flex-start}
.chu-y .so{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--do);color:#fff;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.chu-y strong{display:block;color:var(--muc);font-size:15px;margin-bottom:2px}
.chu-y span.mo{color:var(--chu2);font-size:14px;line-height:1.5}

.chot{
  margin-top:28px;padding:16px 20px;
  background:#f7f5f2;border-left:3px solid var(--do);border-radius:0 12px 12px 0;
  font-size:15px;color:var(--chu);
}
.chot b{color:var(--muc)}

/* ── Bìa ────────────────────────────────────────────────────────────── */
.bia{text-align:center;padding-top:60px;padding-bottom:64px}
/* `.nhan` mặc định là inline-block nên nó DÍNH vào cùng hàng với dấu ấn
   Tota Class ở bìa. Ở bìa thì phải là một dòng riêng. */
.bia .nhan{display:block}
/* Khi chiếu, bìa cân giữa theo chiều dọc — bìa lệch hẳn lên đỉnh trang trông
   như trang bị cắt dở. */
/* `align-items:center` là BẮT BUỘC: đổi sang flex thì `text-align:center` của
   .bia không còn căn giữa được dấu ấn Tota Class (nó là inline-flex, thành một
   flex item và dạt về lề trái). */
/* 🔴 PHẢI có `.dang-hien`. Viết `body.che-do-slide .trang.bia{display:flex}`
   là ghi đè luôn `display:none` của các trang không hoạt động, nên BÌA HIỆN
   CHỒNG lên mọi trang khác suốt cả buổi chiếu. Đã sập đúng như vậy. */
body.che-do-slide .trang.bia.dang-hien{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
body.che-do-slide .trang.bia.dang-hien > *{max-width:100%}
.bia .dau-an{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:30px;letter-spacing:-.5px;margin-bottom:26px;
}
.bia .dau-an .a{color:var(--do)}
.bia .dau-an .b{color:var(--muc)}
.bia .dau-an .the{
  font-size:15px;font-weight:700;color:var(--do);
  border:1.5px solid var(--do);border-radius:8px;padding:3px 9px;
}
.bia h1{font-size:50px;max-width:24ch;margin:0 auto 18px}
.bia .dan{font-size:20px;margin:0 auto 34px;max-width:60ch}
.bia .hai-ai{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-top:8px;
}
.bia .ai{
  background:#f7f5f2;border:1px solid var(--vien);border-radius:14px;
  padding:16px 22px;text-align:left;max-width:290px;
}
.bia .ai .co{font-size:22px}
.bia .ai b{display:block;color:var(--muc);font-size:15px;margin:6px 0 3px}
.bia .ai span{font-size:13.5px;color:var(--chu2)}

/* ══════════════════════════════════════════════════════════════════════
   QUYỂN 2 — CẨM NANG. Các lớp dưới đây Quyển 1 không dùng.

   Vì sao phải thêm chứ không tái dùng `.chu-y`: `.chu-y` sinh ra để CHÚ GIẢI
   quanh một tấm ảnh (chữ nhỏ, nằm cạnh hình). Cẩm nang thì các bước LÀ nội
   dung chính của trang — chữ phải đọc được khi chiếu lên tường cho cả trung
   tâm xem, và mỗi bước cần chỗ cho một câu cảnh báo riêng.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Các bước làm ───────────────────────────────────────────────────── */
.buoc{display:flex;flex-direction:column;gap:15px;margin:0;padding:0;list-style:none}
.buoc > li{display:flex;gap:15px;align-items:flex-start}
.buoc .so{
  flex:none;width:31px;height:31px;border-radius:9px;
  background:var(--muc);color:#fff;
  font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.buoc .noi{flex:1;min-width:0}
.buoc .noi > b{display:block;color:var(--muc);font-size:16.5px;line-height:1.4;margin-bottom:3px}
.buoc .noi > span{display:block;color:var(--chu2);font-size:14.5px;line-height:1.55}
/* Câu cảnh báo gắn vào một bước. Đỏ, nhưng KHÔNG nền đỏ: mỗi bước một khối
   nền là cả trang thành sọc, đọc mệt. Chỉ một vạch bên trái. */
.buoc .luu-y{
  display:block;margin-top:6px;padding-left:11px;
  border-left:2px solid var(--do);
  font-size:13.5px;line-height:1.5;color:var(--chu);
}
.buoc .luu-y b{color:var(--do)}

/* ── Nhãn nút, trích đúng chữ trên màn hình ─────────────────────────── */
/* 🔴 Quy tắc của cả Quyển 2: chỗ nào bảo người dùng bấm một nút thì phải
   trích ĐÚNG chữ trên nút đó, đặt trong `.phim`. Viết "bấm nút thêm học
   viên" là bắt người ta tự dịch — mà app có tới 3 nút chứa chữ "thêm". */
.phim{
  display:inline-block;
  background:#fdf3f3;border:1px solid #f3d6d6;border-radius:7px;
  padding:1px 7px;margin:0 1px;
  font-size:.93em;font-weight:600;color:var(--muc);
  white-space:nowrap;
}
.phim.xam{background:#f2f0ec;border-color:var(--vien);color:var(--chu2)}
/* Đường đi trong menu: Lớp học › Tạo lớp mới */
.duong{font-weight:600;color:var(--muc)}
.duong i{font-style:normal;color:var(--chu3);margin:0 5px}

/* ── Một mục sự cố ──────────────────────────────────────────────────── */
/* Đệm ở đây đã được ĐO chứ không chọn theo mắt: một tờ A4 ngang chỉ cao
   657px, và trang 15 chứa ba khối `.sc`. Nới thêm 2px mỗi khối là trang đó
   tràn sang tờ thứ hai. Sửa số dưới đây thì chạy lại `?do-ban-in`. */
.su-co{display:flex;flex-direction:column;gap:15px}
.sc{border:1px solid var(--vien);border-radius:14px;padding:15px 18px 16px;background:#fcfbfa}
.sc > .thay{
  display:flex;gap:10px;align-items:flex-start;
  font-size:16px;font-weight:700;color:var(--muc);line-height:1.4;margin-bottom:8px;
}
.sc > .thay .co{flex:none;font-size:18px;line-height:1.3}
/* Nguyên văn dòng chữ trên màn hình. Kiểu chữ máy để phân biệt hẳn với lời
   giải thích của cẩm nang — người đọc phải đối chiếu được từng chữ. */
.man-hinh{
  display:block;
  font-family:"Consolas","SF Mono",Menlo,monospace;
  font-size:13px;line-height:1.5;
  background:#fff;border:1px dashed #d9d4cd;border-radius:9px;
  padding:8px 12px;margin:0 0 8px;color:var(--chu);
}
.sc .cap{display:flex;gap:22px;flex-wrap:wrap}
.sc .cap > div{flex:1 1 240px;min-width:0}
.sc .nh{
  display:block;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:4px;
}
.sc .vi-sao .nh{color:var(--chu3)}
.sc .lam-gi .nh{color:var(--do)}
.sc p{margin:0;font-size:14px;line-height:1.6;color:var(--chu2)}
.sc .lam-gi p{color:var(--chu)}

/* ── Bảng tra nhanh ─────────────────────────────────────────────────── */
.tra{width:100%;border-collapse:collapse;font-size:14px}
.tra th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--chu3);
  padding:0 12px 8px;border-bottom:1px solid var(--vien);
}
.tra td{padding:11px 12px;border-bottom:1px solid var(--vien);vertical-align:top;line-height:1.55}
.tra tr:last-child td{border-bottom:0}
.tra td:first-child{font-weight:600;color:var(--muc);width:34%}
.tra td:last-child{color:var(--chu2)}

/* ── Bốn địa chỉ web ────────────────────────────────────────────────── */
.dia-chi{display:flex;flex-direction:column;gap:12px}
.dc{
  display:flex;gap:16px;align-items:center;
  border:1px solid var(--vien);border-radius:13px;padding:14px 18px;
}
.dc.chinh{background:#fdf3f3;border-color:#f3d6d6}
.dc .co{flex:none;font-size:25px;line-height:1}
.dc .giua{flex:1;min-width:0}
.dc .giua b{display:block;color:var(--muc);font-size:15.5px;margin-bottom:2px}
.dc .giua span{font-size:13.5px;color:var(--chu2);line-height:1.5}
.dc .web{
  flex:none;font-family:"Consolas","SF Mono",Menlo,monospace;
  font-size:12.5px;color:var(--do);font-weight:600;
}
/* Địa chỉ web BẤM ĐƯỢC (05/08/2026). Trước đó chúng chỉ là chữ, khách phải
   tự gõ lại hoặc bôi đen copy — mà đây là ba địa chỉ họ cần nhất.
   Gạch chân nét đứt để trên GIẤY vẫn đọc ra là một địa chỉ web, còn trên màn
   hình thì rõ là bấm được. Không đổi màu khi hover: bản in không có hover,
   và màu đỏ đã đủ nổi. */
a.web{
  text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;
}
a.web:hover{text-decoration-style:solid}

/* ── NÚT ĐĂNG KÝ trong cột "Dùng thử", trang cuối Quyển 1 ────────────────
   🔴 Phải đọc được CẢ TRÊN GIẤY. Nút bấm in ra giấy thì vô nghĩa, nên địa
   chỉ web được viết THÀNH CHỮ ngay dưới nút, không giấu trong href. Ai cầm
   tờ giấy vẫn gõ lại được; ai xem trên màn hình thì bấm. */
.nut-dk{
  display:inline-block;margin-top:12px;
  background:var(--do);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;border-radius:10px;padding:9px 16px;
}
.dc-web{
  display:block;margin-top:5px;font-family:"Consolas","SF Mono",Menlo,monospace;
  font-size:11.5px;color:var(--chu2);
}

/* ── THANH MỜI ĐĂNG KÝ nổi dưới màn hình (chỉ Quyển 1, xem trên máy) ──────
   Đặt `bottom` chứ không `top`: thanh điều khiển đã chiếm mép trên.
   `padding-bottom` cộng thêm vùng an toàn của iPhone — thiếu nó thì trên máy
   có vạch home, nút ✕ nằm ngay dưới vạch và bấm rất khó. */
.thanh-moi-dk{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:80;
  max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1.5px solid var(--do);border-radius:14px;
  padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  box-shadow:0 10px 34px rgba(0,0,0,.16);
}
.thanh-moi-dk .co{font-size:22px;line-height:1;flex:none}
.thanh-moi-dk .giua{flex:1 1 220px;min-width:0}
.thanh-moi-dk .giua b{display:block;color:var(--muc);font-size:14.5px;line-height:1.3}
.thanh-moi-dk .giua span{font-size:12.5px;color:var(--chu2);line-height:1.45}
.thanh-moi-dk .nut{
  flex:none;background:var(--do);color:#fff;text-decoration:none;
  font-weight:700;font-size:14px;border-radius:10px;padding:10px 16px;
  min-height:40px;display:flex;align-items:center;
}
.thanh-moi-dk .tat{
  flex:none;background:none;border:0;color:var(--chu3);cursor:pointer;
  font-size:16px;line-height:1;padding:8px 4px;min-width:32px;min-height:32px;
  font-family:inherit;
}
.thanh-moi-dk .tat:hover{color:var(--muc)}
body.che-do-slide .thanh-moi-dk{display:none}

/* Nút chép link nhóm Zalo. Chỗ dùng thật là MÁY TÍNH — xem chú thích dài
   trong `tai-lieu.js`: Windows không mở thẳng nhóm Zalo từ trình duyệt được.
   Ẩn khi in: trên giấy thì bấm gì cũng vô nghĩa, còn mã QR thì quét được. */
.nut-chep-zalo{
  margin-top:9px;background:#fff;border:1.5px solid var(--vien);border-radius:9px;
  color:var(--do);font-weight:600;font-size:12.5px;padding:8px 13px;cursor:pointer;
  font-family:inherit;
}
.nut-chep-zalo:hover{background:#fdf3f3}

/* ── Danh sách kiểm lại ─────────────────────────────────────────────── */
/* nt — sáu ô này phải nằm vừa một tờ A4 cùng tiêu đề và một khối `.chot`. */
.kiem{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.kiem li{
  display:flex;gap:13px;align-items:flex-start;
  border:1px solid var(--vien);border-radius:12px;padding:10px 15px;
}
.kiem .o{
  flex:none;width:19px;height:19px;border:2px solid var(--do);border-radius:5px;margin-top:2px;
}
.kiem .noi b{display:block;color:var(--muc);font-size:15px;margin-bottom:2px}
.kiem .noi span{font-size:13.5px;color:var(--chu2);line-height:1.55}

@media (max-width:760px){
  .sc .cap{gap:12px}
  .sc .cap > div{flex:1 1 100%}
  .dc{flex-wrap:wrap;gap:10px}
  .dc .web{flex:1 1 100%;order:3}
  .tra td:first-child{width:auto}
  /* Bảng tra nhanh trên máy hẹp: xếp dọc, nếu không hai cột mỗi cột ~120px */
  .tra,.tra tbody,.tra tr,.tra td{display:block;width:auto}
  .tra thead{display:none}
  .tra tr{border-bottom:1px solid var(--vien);padding:9px 0}
  .tra tr:last-child{border-bottom:0}
  .tra td{border-bottom:0;padding:2px 0}
}

/* ── Chuyển giữa Quyển 1 và Quyển 2 ─────────────────────────────────────
   🔴 ĐẶT NGOÀI MỌI `.trang`, và ẩn khi in lẫn khi chiếu.
   Vì sao không nhét vào trang cuối như một mục bình thường: trang 22 của
   Quyển 1 đã kín (đo được: dư rất ít), thêm vào là nó tràn sang tờ thứ hai.
   Vì sao không nhét vào thanh điều khiển: thanh đó trên máy 360px đã chiếm
   72% bề ngang rồi — xem ghi chú ở `@media (max-width:760px)` bên dưới.
   ──────────────────────────────────────────────────────────────────────── */
.chuyen-quyen{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--giay);border:1px solid var(--vien);border-radius:14px;
  padding:14px 20px;margin-bottom:22px;box-shadow:var(--bong);
}
.chuyen-quyen .co{font-size:22px;line-height:1;flex:none}
.chuyen-quyen .giua{flex:1 1 260px;min-width:0}
.chuyen-quyen .giua b{display:block;color:var(--muc);font-size:15px}
.chuyen-quyen .giua span{font-size:13.5px;color:var(--chu2)}
.chuyen-quyen a{
  flex:none;text-decoration:none;
  background:var(--do);color:#fff;border-radius:999px;
  padding:9px 18px;font-size:13.5px;font-weight:700;
}
/* Lúc chiếu lên tường thì thanh này vô nghĩa và làm lệch trang đầu. */
body.che-do-slide .chuyen-quyen{display:none}

/* ── Dấu bản nháp ───────────────────────────────────────────────────── */
.bang-mau{
  background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  padding:13px 18px;margin-bottom:24px;
  font-size:14px;color:#78350f;
}
.bang-mau b{color:#7c2d12}

/* ── Điện thoại hẹp ─────────────────────────────────────────────────── */
@media (max-width:760px){
  .trang{padding:30px 22px 34px;border-radius:14px}
  .trang h1{font-size:29px}
  .bia h1{font-size:33px}
  .trang h2{font-size:23px}
  .dan{font-size:16px}
  .hang{grid-template-columns:1fr;gap:5px}
  .mui{display:none}
  .hang-dau{display:none}
  .o-may{margin-bottom:6px}
  .chu-y.ngang{flex-direction:column;gap:16px}
  .doi-anh{gap:18px}

  /* ── Thanh điều khiển trên điện thoại ────────────────────────────────
     Đo trên khung 500px: thanh rộng 361px = 72% bề ngang, và nó CHE nội
     dung vì là `position:fixed`. Trên máy 360px thì gần kín màn hình.
     Nên: nút nhỏ lại, nhãn ngắn lại (JS đổi chữ theo bề ngang), và `.boc`
     phải có ĐỦ đệm dưới để dòng cuối cùng không bị che vĩnh viễn. */
  /* ⚠️ KHÔNG thêm `left` ở đây. Thử một lần rồi: `left:10px` kéo thanh giãn
     hết bề ngang — 361px thành 465px, tức 93% khung, TỆ HƠN trước khi sửa.
     Giữ neo bên phải, chỉ làm nút nhỏ lại. */
  .dieu-khien{bottom:10px;right:10px;padding:5px 6px}
  .dieu-khien button{padding:6px 11px;font-size:12.5px}
  .dieu-khien .dem{font-size:12px;min-width:44px}
  .boc{padding-bottom:86px}

  /* Bốn ô "Trước → Sau" ở 50% bề ngang thì trên máy 360px mỗi ô còn ~150px
     — chữ vỡ thành từng từ một dòng. Trên điện thoại xếp một cột. */
  .ts-o{flex:1 1 100%}

  /* Quy trình toàn trình: nhãn 132px cố định + chuỗi thẻ ở cùng hàng là quá
     chật. Đưa nhãn lên trên, thẻ xuống dưới. */
  .luong-hang{flex-direction:column;gap:6px}
  .luong-ten{width:auto;padding-top:0}
}

/* ── In ra PDF ──────────────────────────────────────────────────────────
   Quy tắc in KHÔNG nằm ở đây. Chúng ở `tai-lieu-in.css`, nạp bằng
   <link media="print">.

   Vì sao tách ra: `@media print` không đo được bằng JavaScript, nên bản in
   hỏng mà không ai biết — đã xảy ra thật lúc dựng (3/4 trang tràn sang tờ
   thứ hai, mắt thường không thấy). Tách thành file riêng thì bật nó lên
   được bằng một dòng:

       document.querySelector('link[media="print"]').media = 'all'

   ...rồi đo chiều cao từng trang. Viết hai bản luật cho hai chỗ là kiểu gì
   cũng có ngày lệch nhau.
   ──────────────────────────────────────────────────────────────────────── */