/* ══════════════════════════════════════════════════════════════════════════
   m.school — PHẦN CHỈNH RIÊNG cho trường, đè lên áo chat-bach-khoa.css
   ⛔ Áo gốc nằm ở chat-bach-khoa.css (bản chụp nguyên văn của meslab.org, ⛔ không sửa).
   Mọi lớp ở đây mang tiền tố `ms-` để biết ngay là của trường, ⛔ không phải của áo gốc.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔⛔ BẮT BUỘC. Áo gốc viết phông kiểu `var(--font-bricolage), 'Bricolage Grotesque'`.
   Trên meslab.org ba biến này do Next.js đặt. Ở đây ⛔ không có Next.js — thiếu ba
   dòng dưới thì CẢ KHAI BÁO PHÔNG bị bỏ, chữ rơi về phông mặc định của máy. */
:root {
  --font-bricolage: 'Bricolage Grotesque';
  --font-bvp: 'Be Vietnam Pro';
  --font-shantell: 'Shantell Sans';
}

/* ⛔⛔ CHẶN VA CHẠM VỚI CSS BÀI HỌC — đo thật 14/10 trước khi đẩy.
   CSS của trang bài học (lop/dung-trang-bai.py) định dạng THẲNG thẻ trần:
     header{padding-block:32px 8px}      ⇒ thanh menu phình cao thêm 40px
     h2{border-top:2.5px solid; padding-top:18px; margin:40px 0 14px}
                                         ⇒ «Lớp mới mở», «8 bộ môn» bị kẻ gạch đen phía trên
     footer{margin-top:34px}             ⇒ hở khe giữa thân trang và chân trang đen
   Mấy luật đó ĐÚNG cho trang bài học, ⛔ đừng xoá. Ở đây chỉ chặn chúng lại bằng
   luật CÓ PHẠM VI (độ ưu tiên cao hơn thẻ trần), nên trang bài học giữ nguyên. */
header.bk-dau-trang { padding-block: 0; }
footer.bk-chan { margin-top: 0; }
.bk h2, .bk h3 { border-top: 0; padding-top: 0; }
/* meslab.org chạy trên nền Tailwind: chữ 16px, giãn dòng 1,5. CSS bài học đặt 16,5px
   và 1,72 cho dễ đọc bài dài ⇒ trả lại số của meslab.org cho phần mặc áo. */
.bk { font-size: 16px; line-height: 1.5; }

/* ── logo chữ (meslab.org dùng ảnh, trường chưa có ảnh logo) ── */
.ms-logo { font-family: var(--font-bricolage), sans-serif; font-weight: 800; font-size: 24px;
  letter-spacing: -.03em; color: var(--bk-den); line-height: 1; }
.ms-logo i { font-style: normal; color: var(--bk-cam); }

/* ⛔ NHÃN CẠNH LOGO BỊ CẮT CỤT TRÊN ĐIỆN THOẠI — anh Tuấn thấy ngày 17/10 ở trang thi,
   nhưng đo ra thì CẢ TRƯỜNG dính: trang lớp cắt ở khổ 320–390, trang bài cắt ở 320–360,
   trang thi cắt ở 320–390. Nhãn «Thi và chứng nhận» cần 127px mà ở khổ 320 chỉ được 34px.
   Áo gốc cắt bằng dấu ba chấm, nên người đọc thấy «Thi và chứng n…» — không mang thông tin
   gì mà lại trông như trang hỏng.
   ⇒ Dưới 430px thì GIẤU HẲN nhãn. Tiêu đề lớn ngay bên dưới đã nói rõ đang ở trang nào,
      nên giấu sạch hơn là cắt nửa chữ. */
@media (max-width: 429px) { .bk-dau-trang .bk-logo span { display: none; } }

/* ── menu trên điện thoại: áo gốc ẩn hết menu rồi dùng nút ba gạch chạy bằng JavaScript.
   Trường là trang tĩnh ⛔ không có JavaScript cho nút đó ⇒ giữ lại ĐÚNG MỘT nút
   «Bắt đầu học», ẩn các mục còn lại. ⛔ Đừng để thanh trên trống trơn. */
/* ⛔ Ngưỡng nâng 860 → 1100 ngày 17/10. Lý do: thêm mục «Thi và chứng nhận» làm menu
   dài thêm, và ở khổ 1024 (iPad ngang) nó ĐẨY TRÀN ra ngoài trang 78px. Đo được:
   thanh menu chạy tới 1102px trong khung 1024px. Lỗi do chính việc thêm mục đó sinh ra. */
@media (max-width: 1100px) {
  .bk-menu.ms-menu { display: flex; }
  .bk-menu.ms-menu > li:not(.ms-giu-dt) { display: none; }
  .bk-menu.ms-menu .bk-muc { padding: 7px 12px; font-size: 13.5px; }
}

/* ⛔ ĐỪNG viết luật riêng cho <table> ở đây. Áo của trường đã có sẵn luật
   `table { min-width: 560px }`, và cách dùng đúng là BỌC BẢNG trong <div class="cuon">
   để nó cuộn ngang, y như trang bài vẫn làm. Vấp 17/10: Linh xuất bảng trần rồi viết
   luật riêng đè lên, bảng vẫn tràn 256px ở khổ 320 vì min-width vẫn thắng. */

/* ── khối đầu: hero của trường rộng hơn hero cộng đồng ──
   Tiêu đề trường dài gần gấp đôi tiêu đề cộng đồng (anh chốt nguyên văn, ⛔ không rút).
   Giữ tỷ lệ 1:1 như áo gốc thì tiêu đề vỡ thành 8 dòng ⇒ nới hero ra. */
.ms-luoi-dau { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.ms-hinh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ms-hinh .bk-hinh-chu h1 { font-size: clamp(23px, 2.3vw, 32px); line-height: 1.1; }
/* ô vàng quanh chữ R&D — anh Tuấn 14/10: «ghi là tổ chức R&D cho từ khóa nó đập vào mắt» */
.ms-rd { display: inline-block; background: var(--bk-vang); color: var(--bk-den);
  border: 2.5px solid var(--bk-den); border-radius: 9px; padding: 0 8px; line-height: 1.15;
  text-shadow: none; box-shadow: 3px 3px 0 var(--bk-den); }
@media (max-width: 860px) {
  .ms-luoi-dau { grid-template-columns: 1fr; }
  .ms-hinh { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .ms-hinh .bk-hinh-chu h1 { font-size: 20px; }
}

/* ── thẻ «Lớp mới mở»: dùng lại ô ngày đen của «Tin mới», nhưng chở MÃ LỚP ── */
.ms-ma-lop { font-size: 19px; }
.ms-chan-tin { margin-top: auto; padding-top: 12px; }

/* Dòng dẫn cuối danh sách «Lớp mới mở» — xuất hiện khi còn lớp đã mở chưa hiện hết.
   ⛔ Bắt buộc có: cắt danh sách mà không có lối xem tiếp thì người học không biết
   lớp đó tồn tại (bài học 14/10, khổ 375 mất NC-01). */
/* ⛔ Phải viết đủ `.bk-tin li.ms-con-lai a` chứ không phải `.ms-con-lai a`: áo gốc có luật
   `.bk-tin li a { display:grid; grid-template-columns:56px 1fr }` MẠNH HƠN, nên luật yếu
   bị thua và dòng này bị ép vào cột 56px, vỡ thành một cột chữ dọc cao gần 260px. */
.bk-tin li.ms-con-lai a { display: block; padding: 13px 6px 5px;
  border-top: 1.5px dashed var(--bk-vien); border-radius: 0;
  font-size: 14.5px; font-weight: 700; color: var(--bk-cam-dam); }
.bk-tin li.ms-con-lai a:hover { background: none; text-decoration: underline; }
/* ⛔ Áo gốc chỉ hiện 3 TIN trên điện thoại (.bk-tin li:nth-child(n+4){display:none}) —
   hợp với tin tức vì tin cũ thì bỏ được. Nhưng trường chỉ có vài LỚP đang mở, giấu
   mất một là người học trên điện thoại ⛔ không biết lớp đó tồn tại. Bắt được 14/10
   khi mở khổ 375 nhìn bằng mắt: mất NC-01. ⇒ Hiện đủ mọi lớp đang mở. */
@media (max-width: 860px) {
  .ms-luoi-dau .bk-tin li:nth-child(n+4) { display: list-item; }
}

/* ── đầu mục «Tám bộ môn» ── */
.ms-tieu { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 20px; margin-bottom: 16px; }
.ms-tieu h2 { font-size: 24px; font-weight: 800; margin: 0; }
.ms-tieu small { font-size: 14px; color: var(--bk-den-nhat); font-weight: 600; }

/* ── lớp CHƯA MỞ trong ô bộ môn: nhạt đi, viền đứt, ⛔ không bấm được ── */
.ms-chua { background: transparent; border: 1.5px dashed var(--bk-vien); opacity: .78; }
.ms-chua:hover { border-color: var(--bk-vien); }
.ms-chua i { background: #8d8d8d; }
.ms-chua em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--bk-den-nhat);
  border: 1.5px solid var(--bk-vien); border-radius: 999px; padding: 1px 8px; flex: none; white-space: nowrap; }

/* ── ranh giới cho-và-bán: một thẻ trải ngang hai cột ── */
.ms-ranh { grid-column: 1 / -1; }
.ms-ranh .bk-diem div b { font-size: 20px; }
.ms-ranh .bk-diem div:last-child b { color: var(--bk-den); }
@media (max-width: 860px) { .ms-ranh .bk-diem { grid-template-columns: 1fr; } }

/* ── chân trang: logo chữ trên nền đen ── */
.bk-chan .ms-logo { color: #fff; }

/* ── chú thích viết tay cho sơ đồ quỹ đạo ──
   Anh Tuấn 14/10: «đặt dòng chữ xiên chéo vào chỗ phù hợp hơn». Bản đầu đặt nó ngay trên
   nút «Bắt đầu học» — xa sơ đồ, mũi tên chỉ vào khoảng trống. Nó giải nghĩa SƠ ĐỒ nên
   phải đứng CẠNH sơ đồ, mũi tên chỉ xuống các ô. */
.ms-chu-thich { position: absolute; top: 16px; right: 22px; z-index: 1; color: var(--bk-den);
  font-size: 15px; transform: rotate(-3deg); background: var(--bk-vang); border: 1.5px solid var(--bk-den);
  border-radius: 8px; padding: 2px 10px; box-shadow: 2px 2px 0 var(--bk-den); }
@media (max-width: 860px) { .ms-chu-thich { display: none; } }
/* ⛔ Nhãn vàng nằm tuyệt đối ở góc phải, mà dòng «m.school · by MES LAB» thì dài ra theo
   bề ngang thẻ. Dưới 1180px hai thứ CHỒNG LÊN NHAU và nhãn cắt mất chữ «by MES LAB».
   Anh Tuấn thấy trên iPad sáng 16/10. Đo được: chồng 47px ở khổ 900, 10px ở khổ 1024.
   ⇒ Khoảng giữa 861 và 1180 thì giấu nhãn đi. Nó chỉ là chú thích cho ô vàng của sơ đồ,
   ⛔ không phải thông tin bắt buộc, nên giấu còn hơn để nó cắt mất tên thương hiệu. */
@media (min-width: 861px) and (max-width: 1180px) { .ms-chu-thich { display: none; } }

/* ⛔⛔ Ô CAM BỊ KÉO DÀI THƯỢT — anh Tuấn thấy trên iPad sáng 16/10.
   Luật gốc `.bk-hinh { min-height: 100% }` ép ô cam cao bằng cột trái, trong khi sơ đồ
   bên trong giữ đúng tỉ lệ nên ⛔ không nở theo. Đo ở khổ 900: ô cam cao 807px mà sơ đồ
   chỉ 253px ⇒ hơn 550px cam trống trơn. Có ở MỌI khổ hai cột, nặng nhất đúng khổ iPad.
   ⛔ Luật gốc nằm trong chat-bach-khoa.css, là áo chép nguyên văn từ meslab.org,
      ⛔ KHÔNG được sửa ⇒ đè ở đây.
   ⇒ Gỡ min-height, và cho sơ đồ TRẢI HẾT BỀ NGANG thẻ thay vì nép sang nửa phải.
      Sau sửa, khổ 900: trống 554px → 175px. Khổ 1280: 374px → 189px, và sơ đồ to gấp đôi. */
@media (min-width: 861px) {
  .ms-hinh { min-height: 0; align-self: start; grid-template-columns: minmax(0, 1fr); }
  .ms-hinh .bk-hinh-chu { grid-column: 1; grid-row: 1; }
  .ms-hinh > svg { grid-column: 1; grid-row: 2; align-self: stretch; }
  .ms-hinh .bk-hinh-chan { grid-column: 1; grid-row: 3; }
}

/* ── dải chia sẻ cuối bài — học theo meslab.org/tuantran (anh Tuấn 14/10) ──
   Đặt TRONG khung đọc bài (.khung 720px), ⛔ không trải rộng 1240px. */
.ms-chia-se { margin: 36px 0 8px; padding: 18px 20px; background: #fff; border: 2px solid var(--bk-den);
  border-radius: var(--bk-bo); box-shadow: 5px 5px 0 var(--bk-den); }
.ms-chia-se p { margin: 0 0 12px; font-weight: 700; font-size: 15.5px; line-height: 1.4; }
.ms-nut-chia-se { display: flex; flex-wrap: wrap; gap: 10px; }
.ms-nut-chia-se .bk-nut { cursor: pointer; font-family: inherit; text-decoration: none; }
.ms-nut-chia-se .ms-fb { background: #1877f2; color: #fff; }
.ms-nut-chia-se .ms-zl { background: #0068ff; color: #fff; }
.ms-nut-chia-se .bk-nut-trang { color: var(--bk-den); }
.ms-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  background: var(--bk-den); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px;
  border-radius: 12px; box-shadow: 4px 4px 0 var(--bk-cam); max-width: calc(100vw - 32px); }
@media (max-width: 520px) { .ms-nut-chia-se .bk-nut { flex: 1 1 calc(50% - 5px); justify-content: center; } }

/* ══════════════════════════════════════════════════════════════════════════
   HỌC TRÊN TRANG — anh Tuấn chốt 14/10/2026 (hoc.js · dung-web.py)
   video đầu bài · khối Tài liệu · Kiểm tra nhanh · nút Đã học xong · thanh tiến độ
   ⛔ [hidden] phải thắng mọi display bên dưới — tiến độ ẩn khi không có localStorage.
   ══════════════════════════════════════════════════════════════════════════ */
.ms-video[hidden], .ms-td[hidden], .ms-td-tong[hidden], .ms-xong[hidden], .ms-dau-xong[hidden],
.ms-giai[hidden], .ms-diem[hidden], .ms-lam-lai[hidden] { display: none !important; }

/* ── video YouTube 16:9 ở đầu bài ── */
.ms-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 20px; background: var(--bk-den);
  border: 2px solid var(--bk-den); border-radius: 18px; box-shadow: 5px 5px 0 var(--bk-den); overflow: hidden; }
.ms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── khối Tài liệu: nút tải slide PDF ── */
.ms-tai-lieu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px;
  padding: 14px 18px; background: #fff; border: 2px solid var(--bk-den); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--bk-den); }
.ms-tai-lieu .nhanh { margin: 0; }
.ms-tai-lieu .bk-nut { text-decoration: none; }
.ms-tai-lieu small { font-size: 13.5px; color: var(--bk-den-nhat); }

/* ── Kiểm tra nhanh ── */
.ms-kiem { border-color: var(--bk-den); }
.ms-kiem-dan { font-size: 15px; color: var(--bk-den-nhat); }
.ms-cau-ds { list-style: none; padding: 0; margin: 0; }
.ms-cau { padding: 16px 0; border-top: 1.5px dashed var(--bk-vien); }
.ms-cau:first-child { border-top: 0; padding-top: 4px; }
.ms-hoi { font-weight: 600; margin: 0 0 10px; }
.ms-chon { display: grid; gap: 8px; }
.ms-chon button { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--bk-den); background: var(--bk-kem);
  border: 2px solid var(--bk-den); border-radius: 12px; padding: 9px 12px; cursor: pointer; }
.ms-chon button b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: #fff; border: 2px solid var(--bk-den); font-size: 13px; font-family: var(--font-bricolage), sans-serif; }
.ms-chon button span { min-width: 0; overflow-wrap: anywhere; }
.ms-chon button:hover:not(:disabled) { background: var(--bk-kem2); }
.ms-chon button:focus-visible { outline: 3px solid var(--bk-cam); outline-offset: 2px; }
.ms-chon button:disabled { cursor: default; opacity: .62; }
.ms-chon button.ms-dung { opacity: 1; background: #e3f4ea; border-color: var(--bk-xanh); }
.ms-chon button.ms-dung b { background: var(--bk-xanh); border-color: var(--bk-xanh); color: #fff; }
.ms-chon button.ms-sai { opacity: 1; background: #fde6e8; border-color: var(--bk-do); }
.ms-chon button.ms-sai b { background: var(--bk-do); border-color: var(--bk-do); color: #fff; }
.ms-giai { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #e3f4ea; font-size: 15px; line-height: 1.6; }
.ms-giai.ms-giai-sai { background: #fde6e8; }
.ms-giai .ms-kq { color: var(--bk-xanh); }
.ms-giai.ms-giai-sai .ms-kq { color: var(--bk-do); }
.ms-kiem-cuoi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.ms-diem { margin: 0; font-family: var(--font-bricolage), sans-serif; font-weight: 800; font-size: 20px;
  background: var(--bk-vang); border: 2px solid var(--bk-den); border-radius: 12px; padding: 6px 14px; }
.ms-lam-lai { cursor: pointer; font-family: inherit; }

/* ── nút Đã học xong ── */
.ms-xong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 28px 0 0; }
.ms-nut-xong { cursor: pointer; font-family: inherit; background: #fff; color: var(--bk-den); }
.ms-xong-roi .ms-nut-xong { background: var(--bk-xanh); color: #fff; }
.ms-xong small { font-size: 13px; color: var(--bk-den-nhat); }

/* ── thanh tiến độ ── */
.ms-td { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700;
  color: var(--bk-den-nhat); }
.ms-td-thanh { flex: 1 1 auto; max-width: 220px; height: 10px; border: 1.5px solid var(--bk-den); border-radius: 999px;
  background: #fff; overflow: hidden; }
.ms-td-thanh i { display: block; height: 100%; background: var(--bk-cam); transition: width .25s; }
.ms-td-du .ms-td-thanh i { background: var(--bk-xanh); }
.ms-td-chu { white-space: nowrap; }
.ms-td-chu b { color: var(--bk-den); }
.ms-td-lon { margin: -4px 0 16px; font-size: 15px; }
.ms-td-lon .ms-td-thanh { max-width: none; height: 14px; }
.ms-td-tong { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; }
.ms-td-tong b { font-family: var(--font-bricolage), sans-serif; font-size: 17px; }
.ms-td-tong small { display: block; font-size: 12.5px; font-weight: 500; color: var(--bk-den-nhat); }
ol.bai li.ms-li-xong::before { background: var(--bk-xanh); color: #fff; }
.ms-dau-xong { margin-left: 8px; font-size: 12.5px; font-weight: 800; color: var(--bk-xanh); white-space: nowrap; }

/* ── khổ điện thoại hẹp: nhãn viết tay cạnh logo («SP-01 · cấp cơ bản») đẩy nút «Bắt đầu học»
   tràn ra ngoài 19px ở khổ 375 (đo 14/10 trên trang lớp đang chạy thật). Cho nhãn co lại,
   cắt bằng «…», nút giữ nguyên. Trang chủ và trang bài không đổi vì nhãn ngắn. */
@media (max-width: 420px) {
  .bk-dau-trang .bk-logo { min-width: 0; flex: 1 1 auto; }
  .bk-dau-trang .bk-logo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .bk-dau-trang .bk-menu.ms-menu { flex: none; }
}
/* ⛔ áo gốc đặt `.bk-tin li b {display:block}` cho tên tin ⇒ chữ «0/5» trong thanh tiến độ
   ở thẻ «Lớp mới mở» bị đẩy xuống dòng. Trả lại kiểu chữ thường, thu thanh cho gọn. */
.ms-td .ms-td-chu b { display: inline; font-size: inherit; line-height: inherit; font-weight: 800;
  -webkit-line-clamp: unset; overflow: visible; }
.bk-tin .ms-td { margin-top: 5px; font-size: 12px; }
.bk-tin .ms-td-thanh { max-width: 120px; height: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   BỐ CỤC TRANG BÀI — anh Tuấn chốt 14/10/2026 (dung-web.py · hoc.js)
   «Bài đọc đầy đủ»: mỗi mục là một ô <details>. Chữ VẪN nằm trong HTML, ô đóng chỉ ẩn hiển thị.
   Bài có video: ô mặc định đóng. Chưa có video: mở sẵn. In trang: mở hết.
   ⛔ Thanh menu dính trên đầu (sticky) ⇒ neo phải chừa chỗ (scroll-margin-top), không thì
   tiêu đề mục nằm khuất dưới menu khi bấm «Xem mục 2».
   ══════════════════════════════════════════════════════════════════════════ */
.ms-mo-dong[hidden] { display: none !important; }
#kiem-tra-nhanh, #bai-tap, #bai-doc, .ms-muc { scroll-margin-top: 92px; }
.ms-bai-doc { margin: 0 0 8px; }
.ms-bai-doc-dau h2 { margin-bottom: 4px; }
.ms-bai-doc-phu { margin: 0 0 14px; font-size: 14.5px; color: var(--bk-den-nhat); }
.ms-mo-dong { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.ms-mo-dong .bk-nut { cursor: pointer; font-family: inherit; min-height: 44px; }
.ms-mo-bai { margin: 0 0 20px; }

details.ms-muc { background: #fff; border: 2px solid var(--bk-den); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--bk-den); margin: 0 0 18px; }
.ms-muc > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 16px; }
.ms-muc > summary::-webkit-details-marker { display: none; }
.ms-muc > summary:hover { background: var(--bk-kem); }
.ms-muc > summary:focus-visible { outline: 3px solid var(--bk-cam); outline-offset: 2px; }
.ms-muc[open] > summary { border-bottom: 1.5px dashed var(--bk-vien); border-radius: 16px 16px 0 0; }
.ms-muc-so { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--bk-cam); border: 2px solid var(--bk-den); border-radius: 8px;
  font-family: var(--font-bricolage), sans-serif; font-weight: 800; font-size: 15px; line-height: 1; }
.ms-muc > summary .nhanh { grid-column: 2; grid-row: 1; justify-self: start; margin: 0 0 6px; }
.ms-muc > summary h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(17px, 3.6vw, 20px);
  font-weight: 800; line-height: 1.3; text-wrap: balance; }
.ms-muc > summary .nhanh + h3 { grid-row: 2; }
.ms-muc-sai > summary h3 { color: var(--bk-do); }
/* mũi tên trạng thái: chỉ xuống khi đóng, lật lên khi mở */
.ms-muc > summary::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 30px; height: 30px;
  border: 2px solid var(--bk-den); border-radius: 999px; background: #fff center / 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%231b1b1b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .2s; }
.ms-muc[open] > summary::after { transform: rotate(180deg); background-color: var(--bk-vang); }
.ms-muc-than { padding: 18px 20px 2px; }
.ms-muc-than > :last-child { margin-bottom: 18px; }
.ms-muc-than .cuon { box-shadow: 3px 3px 0 var(--bk-den); }
@media (max-width: 520px) {
  .ms-muc > summary { padding: 10px 12px; column-gap: 10px; }
  .ms-muc-than { padding: 14px 14px 2px; }
}
@media (prefers-reduced-motion: reduce) { .ms-muc > summary::after { transition: none; } }

/* In trang: mở hết mọi ô (hoc.js cũng mở bằng sự kiện beforeprint cho trình duyệt cũ) */
@media print {
  .ms-muc::details-content { content-visibility: visible; display: block; }
  .ms-mo-dong, .ms-muc > summary::after { display: none !important; }
  details.ms-muc { box-shadow: none; }
  .ms-muc[open] > summary, .ms-muc > summary { border-bottom: 1.5px dashed var(--bk-vien); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HÌNH MINH HOẠ TRONG BÀI (lop/dung-trang-bai.py · lop/PHONG-CACH-HINH.md mục 4)
   Mỗi sơ đồ có hai bố cục nhúng thẳng trong trang: .ms-hinh-ngang (khung 632) và .ms-hinh-doc
   (khung 300). Chọn theo bề rộng CỦA KHUNG HÌNH (container query), không theo màn hình.
   Mặc định hiện bố cục DỌC: trình duyệt cũ không hiểu @container vẫn đọc được chữ, không co nhỏ.
   Khung rộng từ 600px trở lên mới đổi sang bố cục ngang (chữ 15 hiện ít nhất 14,2px).
   ══════════════════════════════════════════════════════════════════════════ */
.ms-hinh { margin: 8px 0 26px; container-type: inline-size; }
.ms-hinh svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms-hinh .ms-hinh-ngang { display: none; }
.ms-hinh .ms-hinh-doc { max-width: 440px; margin-inline: auto; }
@container (min-width: 600px) {
  .ms-hinh .ms-hinh-ngang { display: block; }
  .ms-hinh .ms-hinh-doc { display: none; }
}
.ms-hinh-anh img { display: block; width: 100%; height: auto; border: 2px solid var(--bk-den);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--bk-den); background: var(--bk-kem2); }
.ms-hinh figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--bk-den-nhat); }
.ms-hinh figcaption b { color: var(--bk-den); }