/* ⚠⚠⚠ FILE TỰ SINH — ĐỪNG SỬA Ở ĐÂY ⚠⚠⚠
   Nguồn: src/renderer/css/baigiang-spk-writing-part8.css
   Sửa ở nguồn rồi chạy: node tools/dong-bo-web.js   (§41.10) */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LAYOUT 'spk-writing-part8' — VIẾT LẠI CÂU (hiện dần đáp án)         CLAUDE.md §32.12
   Đi kèm js/baigiang-spk-writing-part8.js (module rời). File CSS này nạp TRONG baigiang-soan.html →
   MÁY HỌC VIÊN vẫn nhận vì mirrorSendCss() gom TOÀN BỘ document.styleSheets sang /style.css.
   Text bài giảng 15px × var(--bgz) (§32.1); KHÔNG zoom phần UI.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.sl.lay-spk-writing-part8{padding:10px}
.sl.lay-spk-writing-part8.has-head{padding-top:0}   /* BẮT BUỘC (§32.9): cùng độ ưu tiên với .sl.has-head */

.sl .sw8-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}

/* Vùng nội dung — CUỘN 4px (§7). Là host bút vẽ (ANNO_TEXT_SEL) → nét mở trong đây thành gạch chân. */
.sl .sw8-body{flex:1;min-height:0;overflow-y:auto;background:#fff;padding:0;
  font-size:calc(15px * var(--bgz,1));line-height:1.5;color:#2c3e50}
.sl .sw8-body::-webkit-scrollbar{width:4px}
.sl .sw8-body::-webkit-scrollbar-thumb{background:#c8ced8;border-radius:2px}

/* ── THẺ 1 câu — tham số copy .option-item của 'spk-dialogue' (§32.2) như .wc-card / .vf-card ── */
.sl .sw8-card{padding:6px 8px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;
  margin-bottom:6px}
.sl .sw8-card:last-child{margin-bottom:0}
/* Editor: câu chưa gõ đáp án → viền cam nhắc GV (không hiện khi trình chiếu vì câu đó không có bước) */
.sl .sw8-card.sw8-pending{border-color:var(--orange-primary,#D4740A);border-style:dashed}

/* Nhóm TỪ CHO SẴN — thứ DUY NHẤT hiện trước khi hé lộ (HV tự viết ra giấy) */
.sl .sw8-q{display:flex;gap:6px;align-items:baseline}
.sl .sw8-num{flex:0 0 auto;min-width:16px;font-weight:700;color:#1976D2}
.sl .sw8-orig{flex:1;min-width:0;font-weight:600}

/* STARTER (phần cho sẵn) — dòng riêng dưới câu gốc, kèm dấu chấm lửng như bản Word */
.sl .sw8-starter{margin-top:3px;padding-left:22px;color:#2c3e50}
.sl .sw8-starter::after{content:' ……………………………………';color:#9aa4ae;letter-spacing:1px}

/* Đáp án gợi ý — hiện NGAY BÊN DƯỚI nhóm từ của chính câu đó */
.sl .sw8-ans{display:none;margin-top:4px;padding-left:22px}
.sl .sw8-ans.on{display:block;animation:sw8In .18s ease-out}
@keyframes sw8In{from{opacity:0}to{opacity:1}}
.sl .sw8-a{font-weight:700;color:var(--green-primary,#16A34A)}
.sl .sw8-a + .sw8-a{margin-top:2px}
.sl .sw8-a::before{content:'→ ';font-weight:400;color:#9aa4ae}

.sl .sw8-empty{padding:10px;text-align:center;color:var(--text-muted,#8a94a6);font-size:13px}

/* ── Ảnh minh họa (illus dùng chung) — §32.17: ảnh CỐ ĐỊNH ở mép, vùng chữ tự cuộn ───────── */
.sl .illus-scroll .sw8-body{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto}
.sl .sw8-imgwrap.pos-left,.sl .sw8-imgwrap.pos-right{gap:10px;align-items:stretch;padding:0}

/* Bút vẽ (§32.3): bật bút → vùng chữ KHÔNG cuộn 1 ngón (1 ngón vẽ, 2 ngón cuộn) */
.player.anno-draw .sw8-body{touch-action:none}