/* ⚠⚠⚠ FILE TỰ SINH — ĐỪNG SỬA Ở ĐÂY ⚠⚠⚠
   Nguồn: src/renderer/css/baigiang-spk-reading-part6.css
   Sửa ở nguồn rồi chạy: node tools/dong-bo-web.js   (§41.10) */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LAYOUT 'spk-reading-part6' — MÔ TẢ TỪ (gõ từ)                              CLAUDE.md §32.36
   Đi kèm js/baigiang-spk-reading-part6.js. Thẻ/vùng cuộn/ảnh DÙNG CHUNG CSS của 'word-choice'
   (.wc-*); file này chỉ định dạng dòng mô tả + chữ cái đầu + ô gõ. Text 15px × --bgz (§32.1).
   Máy học viên nhận qua /style.css; trang web học viên nạp bản chép (tools/dong-bo-web.js).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.sl.lay-spk-reading-part6{padding:10px}
.sl.lay-spk-reading-part6.has-head{padding-top:0}   /* §32.9 */

.sl .wd-desc{line-height:1.45}
/* KIỂU HIỂN THỊ = English App "Speakout Reading – Exercise 6" (spk-reading-part6-custom.css, 2026-10-04):
   dãy ô chữ (chữ đầu + mỗi chữ còn lại 1 "_", đậm, liền nhau) ở TRÊN, ô gõ KHUNG viền xanh bo 8px ở DƯỚI.
   Chỉ đổi hình — hành vi (gõ phần còn lại HOẶC cả từ, wdSyncWord, chấm/hé lộ) giữ nguyên.
   Màu kết quả theo ô gõ bằng :has() ⇒ không phải port logic tô màu sang máy HV/web. */
.sl .wd-field{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}
.sl .wd-word{display:flex;align-items:center;gap:0;font-family:var(--font-base);font-weight:700;
  font-size:calc(15px * var(--bgz,1));color:#333;letter-spacing:0;user-select:none}
.sl .wd-c{display:inline-block;min-width:15px;text-align:center}
.sl .wd-first{color:#333}
.sl .wd-field:has(.wd-in.wd-show) .wd-word,.sl .wd-field:has(.wd-in.wd-reveal) .wd-word,
.sl .wd-field:has(.wd-in.wd-ok) .wd-word{color:#2e7d32}
.sl .wd-field:has(.wd-in.wd-bad) .wd-word{color:#c62828}
.sl .wd-in{box-sizing:border-box;width:100%;max-width:400px;padding:8px;font-family:var(--font-base);
  font-size:calc(15px * var(--bgz,1));font-weight:400;letter-spacing:0;border:2px solid #2196F3;
  border-radius:8px;background:#fff;color:#333;outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
.sl .wd-in::placeholder{color:#bbb;font-weight:400}
.sl .wd-in:focus{border-color:#7B1FA2;box-shadow:0 0 0 4px rgba(156,39,176,.1);background:#fafafa}
.sl .wd-in:disabled{opacity:1;cursor:default;background:#f5f5f5}
.sl .wd-in.wd-show,.sl .wd-in.wd-reveal,.sl .wd-in.wd-ok{border-color:#4caf50;background:#f1f8f4;color:#2e7d32}
.sl .wd-in.wd-bad{border-color:#f44336;background:#fff;color:#c62828}
.sl .wd-pending{font-size:12px;color:var(--orange-primary,#D4740A);font-style:italic}