/* ══════════════════════════════════════════════════════════════════════
   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)}

/* ── 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.
   ──────────────────────────────────────────────────────────────────────── */