/* =========================================================
   KTT – Bài học HSK 3.0  (CSS dùng chung cho MỌI bài)
   Cài 1 lần: Giao diện → Tùy biến → CSS bổ sung (Additional CSS)
   Mọi rule đều đóng khung trong .ktt-lesson để KHÔNG ảnh hưởng
   phần còn lại của website.
   ========================================================= */

/* ---- Biến màu (đặt trên khung, không dùng :root để tránh đụng theme) ---- */
.ktt-lesson{
  --bg:#ffffff;--fg:#1f2733;--muted:#5b6472;--line:#e6e9ef;
  --brand:#c0392b;--brand-soft:#fdecea;--accent:#0b6e4f;--accent-soft:#e7f4ef;
  --han:#111827;--card:#f8fafc;
  color:var(--fg);line-height:1.7;font-size:17px;
}
@media (prefers-color-scheme:dark){
  .ktt-lesson{
    --bg:#0f141b;--fg:#e7ebf1;--muted:#9aa4b2;--line:#232c38;
    --brand:#ff6b5e;--brand-soft:#2a1a18;--accent:#4fd1a6;--accent-soft:#12261f;
    --han:#f3f5f8;--card:#151c26;
  }
}

.ktt-lesson *{box-sizing:border-box}
.ktt-lesson h2{font-size:1.4rem;margin:2em 0 .6em;padding-bottom:.3em;border-bottom:2px solid var(--line)}
.ktt-lesson h3{font-size:1.12rem;margin:1.6em 0 .5em;color:var(--accent)}
.ktt-lesson a{color:var(--brand)}
.ktt-lesson .lead{color:var(--muted);font-size:1.05rem}
.ktt-lesson .han{font-size:1.5rem;color:var(--han);font-weight:600;letter-spacing:.02em}
.ktt-lesson .py{color:var(--brand);font-style:italic}
.ktt-lesson .vi{color:var(--fg)}
.ktt-lesson table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.98rem;display:block;overflow-x:auto}
.ktt-lesson th,.ktt-lesson td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.ktt-lesson th{background:var(--card);font-weight:700}
.ktt-lesson td .han{font-size:1.25rem}
.ktt-lesson .hv{color:var(--accent);font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em}
.ktt-lesson .dialogue{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:1em 0}
.ktt-lesson .turn{padding:10px 0;border-bottom:1px dashed var(--line)}
.ktt-lesson .turn:last-child{border-bottom:none}
.ktt-lesson .who{display:inline-block;min-width:96px;color:var(--muted);font-weight:700;font-size:.9rem}
.ktt-lesson .line .han{display:block}
.ktt-lesson .line .py{display:block;font-size:.98rem}
.ktt-lesson .line .vi{display:block;color:var(--muted)}
.ktt-lesson .scene{color:var(--muted);font-style:italic;margin:.2em 0 .8em}
.ktt-lesson .note{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:8px;padding:12px 16px;margin:1em 0}
.ktt-lesson .tip{background:var(--brand-soft);border-left:4px solid var(--brand);border-radius:8px;padding:12px 16px;margin:1em 0}
.ktt-lesson .obj{list-style:none;padding-left:0}
.ktt-lesson .obj li{padding:6px 0 6px 30px;position:relative}
.ktt-lesson .obj li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.ktt-lesson details{border:1px solid var(--line);border-radius:10px;padding:4px 14px;margin:.6em 0;background:var(--card)}
.ktt-lesson summary{cursor:pointer;font-weight:600;padding:10px 0}
.ktt-lesson .tw{font-size:1.35rem;color:var(--han);font-weight:600;line-height:2}
.ktt-lesson .exlist li{margin:.5em 0}

/* ---- Nút phát âm ---- */
.ktt-lesson .spk{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:6px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:var(--card);color:var(--brand);cursor:pointer;
  font-size:13px;line-height:1;vertical-align:middle;transition:.15s}
.ktt-lesson .spk:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.ktt-lesson .spk:active{transform:scale(.9)}

/* ---- Flashcard từ vựng + luyện viết + câu ví dụ ---- */
.ktt-lesson .vocab-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin:1.2em 0}
.ktt-lesson .vcard{display:grid;grid-template-columns:138px minmax(0,1fr);grid-template-areas:"flash writing" "eg eg";
  column-gap:12px;row-gap:10px;align-items:start;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:12px}
.ktt-lesson .flash{grid-area:flash;perspective:1000px;height:158px;cursor:pointer;position:relative}
.ktt-lesson .flash-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.ktt-lesson .flash.flipped .flash-inner{transform:rotateY(180deg)}
.ktt-lesson .flash-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border-radius:12px;padding:10px 8px 20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
.ktt-lesson .flash-front{background:linear-gradient(160deg,var(--brand-soft),var(--bg));border:1px solid var(--line)}
.ktt-lesson .flash-back{background:linear-gradient(160deg,var(--accent-soft),var(--bg));border:1px solid var(--line);transform:rotateY(180deg)}
.ktt-lesson .flash-front .han{font-size:2.1rem;font-weight:700}
.ktt-lesson .flash .py{color:var(--brand);font-style:italic;font-size:.98rem}
.ktt-lesson .flash-back .hv{color:var(--accent);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em}
.ktt-lesson .flash-back .mean{font-weight:600;font-size:1rem}
.ktt-lesson .flash-back .pos{color:var(--muted);font-size:.8rem}
.ktt-lesson .flip-hint{position:absolute;bottom:7px;left:0;right:0;font-size:.66rem;color:var(--muted)}
.ktt-lesson .flash .spk{margin-left:0;margin-top:2px}
.ktt-lesson .writing{grid-area:writing;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.ktt-lesson .eg{grid-area:eg;padding-top:9px;border-top:1px dashed var(--line);text-align:left}
.ktt-lesson .eg .eg-label{display:inline-block;font-size:.66rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-right:6px}
.ktt-lesson .eg .han{font-size:1.1rem;font-weight:600;color:var(--han)}
.ktt-lesson .eg .py{display:block;font-size:.82rem;font-style:italic;color:var(--brand);margin-top:2px}
.ktt-lesson .eg .vi{display:block;font-size:.86rem;color:var(--muted)}
.ktt-lesson .eg .spk{width:22px;height:22px;font-size:12px}
.ktt-lesson .wchar{text-align:center}
.ktt-lesson .wbox{width:74px;height:74px;background:
  linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,
  linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat;
  border:1px dashed var(--line);border-radius:8px}
.ktt-lesson .wbtns{display:flex;gap:4px;margin-top:4px;justify-content:center}
.ktt-lesson .wbtns button{width:32px;padding:4px 0;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--fg);cursor:pointer;font-size:.82rem}
.ktt-lesson .wbtns button:hover{border-color:var(--brand);color:var(--brand)}