/* Bài lý thuyết TOEIC (Nghe Đọc /toeic/learn và Nói Viết /toeic/sw/lesson). Tách khỏi learn.php 11/10/2026 để hai loại bài dùng chung một bộ khối. */
/* 🚨 margin-top 88px là để chừa chỗ cho menu cố định — trang này nay DỌN menu
   (toeic_chrome_off) nên chừa nữa là hở một dải trắng trên đầu bài. */
.tr{max-width:980px;margin:var(--space-6) auto 90px;padding:0 18px;--color-tone:var(--color-primary)}
/* Đợt 4 (25/09/2026): tiêu đề bài to như đầu một chương, dòng mô tả là đoạn dẫn, mã bài + Part + thời lượng xuống hàng meta. */
.tr-head{margin:var(--space-2) 0 var(--space-6)}
.tr-h1{margin:0;font-size:36px;line-height:1.25;font-weight:var(--fw-extrabold);letter-spacing:-.02em;color:var(--color-ink);text-wrap:balance}
.tr-lead{margin:var(--space-3) 0 0;max-width:68ch;font-size:17px;line-height:var(--lh-body);color:var(--color-secondary-text)}
.tr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:var(--space-4);font-size:var(--fs-small);color:var(--color-muted)}
.tr-code{flex:none;font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--color-primary);
    background:var(--color-primary-soft);padding:3px 8px;border-radius:var(--radius-sm);min-width:46px;text-align:center}
.tr-done{font-weight:var(--fw-semibold);color:var(--color-secondary-deep)}
@media (max-width:640px){.tr-h1{font-size:28px}.tr-lead{font-size:var(--fs-body)}}

/* Mục lục bám theo khi cuộn: máy tính rộng = cột phải dính; hẹp = thanh gọn dính đỉnh màn, bấm mở danh sách.
   Mục = các <h4> của thân bài (115/115 bài dùng h4 làm đề mục, 5–12 mục mỗi bài). */
.tr-cols{display:block}
.tr-toc{display:none}
.tr-toc__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 var(--space-2);
    font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-ink)}
.tr-toc__h span{font-weight:var(--fw-regular);color:var(--color-muted);font-variant-numeric:tabular-nums}
.tr-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.tr-toc li{counter-increment:toc}
.tr-toc a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;padding:7px 10px 7px 8px;border-radius:var(--radius-sm);
    border-left:2px solid transparent;font-size:var(--fs-small);line-height:1.45;color:var(--color-muted);text-decoration:none}
.tr-toc a::before{content:counter(toc);font-variant-numeric:tabular-nums;color:var(--color-mute2)}
.tr-toc a:hover{color:var(--color-ink);background:var(--color-soft)}
.tr-toc a.is-read{color:var(--color-secondary-text)}
.tr-toc a.is-on{color:var(--color-primary-deep);background:var(--color-primary-soft);border-left-color:var(--color-primary);font-weight:var(--fw-semibold)}
.tr-toc a.is-on::before{color:var(--color-primary)}
.tr-body h4{scroll-margin-top:calc(var(--tr-stick, 0px) + 20px)}
@media (min-width:1180px){
    .tr.has-toc{max-width:1240px}
    .tr.has-toc .tr-cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
    .tr.has-toc .tr-toc{display:block;position:sticky;top:calc(var(--tr-stick, 0px) + 20px);max-height:calc(100vh - var(--tr-stick, 0px) - 40px);
        overflow:auto;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
    .tr-tocm{display:none}
}
/* Hẹp: một thanh dính — mục đang đọc + số thứ tự; bấm là mở danh sách mục ngay dưới thanh. */
.tr-tocm{position:sticky;top:var(--tr-stick, 0px);z-index:25;margin:0 0 var(--space-4)}
.tr-tocm details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.tr-tocm summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 var(--space-4);cursor:pointer;list-style:none;
    font-size:var(--fs-small);color:var(--color-ink)}
.tr-tocm summary::-webkit-details-marker{display:none}
.tr-tocm summary b{flex:none;font-weight:var(--fw-bold);color:var(--color-primary);font-variant-numeric:tabular-nums}
.tr-tocm summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-tocm summary i{flex:none;font-style:normal;color:var(--color-muted);transition:transform var(--dur-fast) var(--ease)}
.tr-tocm details[open] summary i{transform:rotate(180deg)}
.tr-tocm .tr-toc{display:block;max-height:min(60vh,420px);overflow:auto;padding:0 var(--space-2) var(--space-3);border-top:1px solid var(--color-line)}
.tr-tocm .tr-toc__h{display:none}
/* Thanh tiến độ đọc: vạch mảnh sát đỉnh màn, chạy theo phần thân bài đã cuộn qua. */
.tr-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:color-mix(in srgb,var(--color-primary) 14%,transparent)}
.tr-prog i{display:block;height:100%;width:0;background:var(--color-primary);transition:width 80ms linear}
@media (prefers-reduced-motion:reduce){.tr-prog i{transition:none}}
/* lesson detail */
/* Nút quay lại dùng .tc-back chung của khu (toeic.css) — hết mỗi trang một kiểu. */
.tr-cover{margin:0 0 var(--space-6);overflow:hidden;background:var(--color-soft);
    border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.tr-cover img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}
.tr-body{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
    padding:var(--space-6);box-shadow:var(--shadow-sm);line-height:var(--lh-body)}
.tr-body h4{font-size:var(--fs-h4);font-weight:var(--fw-bold);margin:var(--space-6) 0 var(--space-3);color:var(--color-primary)}
.tr-body p{margin:0 0 var(--space-3)} .tr-body .lead{color:var(--color-muted)}
.tr-body ul,.tr-body ol{margin:0 0 var(--space-3);padding-left:var(--space-5)} .tr-body li{margin-bottom:6px}
.tr-body table{width:100%;border-collapse:collapse;margin:var(--space-3) 0;font-size:var(--fs-body)}
.tr-body th,.tr-body td{border:1px solid var(--color-line);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top}
.tr-body th{background:var(--color-soft);font-weight:var(--fw-bold)}
/* 🚨 Màn hẹp: bảng 3-4 cột rộng hơn khung sẽ đẩy cả thẻ ra ngoài, mà app.css có
   html{overflow-x:hidden} nên phần tràn bị CẮT CÂM LẶNG — học viên mất hẳn cột
   cuối, kể cả dải .facts phía trên cũng bị kéo lệch theo. Cho bảng tự cuộn ngang:
   thead/tbody giữ min-width để cột không bị bóp, hộp ngoài thành khối cuộn được. */
@media (max-width:760px){
    .tr-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tr-body table>thead,.tr-body table>tbody{display:table;width:100%;min-width:560px}
}
.tr-body .eg{background:var(--color-soft);border-left:3px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0}
.tr-body .eg .q{font-weight:var(--fw-bold);margin-bottom:var(--space-2)} .tr-body .eg .opt{margin:3px 0}
.tr-body .ok{color:var(--color-secondary);font-weight:var(--fw-bold)} .tr-body .no{color:var(--color-warning);font-weight:var(--fw-bold)}
.tr-body .tip{background:var(--color-soft);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0}
.tr-body .sum{background:var(--color-primary-soft);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0 0}
.tr-body .sum b{color:var(--color-primary)}
/* Công thức ngữ pháp ("is + V-ing").
   🚨 KHÔNG dùng thẻ <code>: Bootstrap ép --bs-code-color:#d63384 (hồng) và
   design-tokens ép font-mono cho code/kbd/pre → thành hai phông và một màu ngoài
   bảng thương hiệu ngay giữa bài. Dùng .fx với ĐÚNG phông sans của trang.
   Rule .tr-body code bên dưới chỉ để vô hiệu hoá Bootstrap ở các bài cũ còn <code>. */
.tr-body .fx,.tr-body code{font-family:var(--font-sans);font-size:.94em;font-weight:var(--fw-medium);
    color:var(--color-ink);background:var(--color-soft);border:1px solid var(--color-line);
    border-radius:var(--radius-sm);padding:1px 7px;white-space:nowrap}
/* ví dụ có ẢNH THẬT — bài Part 1 dạy mô tả tranh thì buộc phải thấy tranh */
.tr-body figure{margin:0 0 var(--space-4)}
.tr-body figure img{display:block;margin:0 auto;max-width:100%;max-height:330px;
    border:1px solid var(--color-border);border-radius:var(--radius-md)}
.tr-body figcaption{margin-top:var(--space-2);text-align:center;font-size:var(--fs-small);color:var(--color-muted)}
/* Part 1 nghe phương án chứ không đọc — ví dụ trong bài BUỘC phải có trình phát,
   không thì học viên chỉ đọc lời giải chứ không luyện được kỹ năng nghe. */
.tr-body .listen{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
    background:var(--color-primary-soft);border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);margin:var(--space-3) 0}
.tr-body .listen b{color:var(--color-primary)}
.tr-body .listen audio{flex:1;min-width:220px;height:36px}
.tr-body .typegrid audio{width:100%;height:32px;margin-top:var(--space-2)}
/* 🚨 navs-audio.js ẨN thẻ <audio> đi rồi chèn trình phát riêng `.na` ngay cạnh, nên MỌI
   rule cỡ đặt cho `audio` ở trên đều bắn vào thẻ đã display:none — vô tác dụng. Với hộp
   flex thì hậu quả không chỉ là "kích thước mặc định": `.na` khai
   container-type:inline-size (navs-audio.css), tức nội dung KHÔNG đóng góp vào bề rộng
   nội tại, nên flex-basis auto tính ra 0 và trình phát co còn đúng 2px viền — một vạch
   dọc mảnh giữa ô. Đo được 8/8 trình phát trong thân bài của bài L1.1 đều 2px: học viên
   không thấy nút phát nào, tưởng trang hỏng. Phải khai cỡ cho CHÍNH `.na`. */
.tr-body .listen .na{flex:1 1 220px;min-width:220px}
.tr-body .typegrid .na{margin-top:var(--space-2)}
.tr-body .eg-opts{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.tr-body .eg-opts li{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:0}
.tr-body .eg-opts li.is-ok{border-color:var(--color-secondary);background:var(--color-secondary-soft)}
.tr-body .eg-opts .k{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius-pill);
    background:var(--color-soft);font-size:var(--fs-small);font-weight:var(--fw-bold)}
.tr-body .eg-opts li.is-ok .k{background:var(--color-secondary);color:var(--color-on-dark)}
.tr-body .eg-opts li.is-no .k{background:var(--color-warning);color:var(--color-on-dark)}
.tr-body .eg-opts .en{font-weight:var(--fw-medium)}
/* dịch nghĩa câu — đặt giữa câu tiếng Anh và phần giải thích, cỡ nhỏ hơn để không tranh chỗ */
.tr-body .vi{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--color-muted)}
.tr-body .vi-i{font-size:var(--fs-small);color:var(--color-muted)}   /* bản inline cho ví dụ giữa câu */
/* dòng chú thích nhỏ — dùng khi phải nói rõ "đây là ví dụ minh hoạ, không phải câu trong đề" */
.tr-body .note{font-size:var(--fs-small);color:var(--color-mute2)}
/* .en phải có style ở MỌI chỗ, không chỉ trong .eg-opts — bảng và câu dẫn cũng dùng nó */
.tr-body .en{font-weight:var(--fw-medium)}
/* 🚨 .en trong ô bảng phải giữ INLINE. Trước đây đặt display:block để tách từng cặp
   câu-nghĩa trong bảng cụm đồng nghĩa, nhưng phần lớn ô lại dùng .en để chèn một cụm
   tiếng Anh GIỮA câu tiếng Việt ("hướng đi: <en>next to</en>, <en>across from</en>") —
   block đẩy mỗi cụm xuống một dòng và bỏ rơi dấu phẩy đứng lẻ ở dòng riêng. Đo được
   478 ô bị vỡ kiểu này so với 0 ô thật sự dựa vào block để xuống dòng.
   Cặp câu-nghĩa vẫn tách đúng vì .vi đã là display:block, tự chiếm dòng của nó. */
.tr-body td .en{display:inline}
.tr-body td .vi:not(:last-child){margin-bottom:9px}
.tr-body .eg-opts .why{display:block;margin-top:4px;color:var(--color-secondary-text)}
/* lưới ví dụ cho từng loại ảnh — bảng nói bốn loại thì phải có bốn ảnh chứng minh */
.tr-body .typegrid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin:var(--space-4) 0}
/* 2 cột cho 4 thẻ — auto-fit hay xếp 3+1 làm lẻ một thẻ */
@media (min-width:620px){.tr-body .typegrid{grid-template-columns:repeat(2,1fr)}}
.tr-body .typegrid figure{margin:0;background:var(--color-soft);border:1px solid var(--color-line);
    border-radius:var(--radius-md);overflow:hidden}
.tr-body .typegrid img{display:block;width:100%;height:150px;object-fit:cover;max-height:none;
    border:0;border-radius:0;border-bottom:1px solid var(--color-line)}
.tr-body .typegrid figcaption{margin:0;padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--fs-body)}
.tr-body .typegrid .lbl{display:block;font-size:var(--fs-small);font-weight:var(--fw-bold);
    color:var(--color-primary);margin-bottom:4px}
.tr-body .typegrid .en{display:block;font-weight:var(--fw-medium);margin-bottom:6px}
/* dải số liệu chốt của phần thi */
.tr-body .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.tr-body .facts div{background:var(--color-soft);border:1px solid var(--color-line);border-radius:var(--radius-md);
    padding:var(--space-3);text-align:center}
.tr-body .facts b{display:block;font-size:var(--fs-h4);font-weight:var(--fw-extrabold);color:var(--color-primary)}
.tr-body .facts span{font-size:var(--fs-small);color:var(--color-muted)}
/* nhãn bước trong quy trình */
.tr-body .step{display:inline-block;font-size:var(--fs-small);font-weight:var(--fw-bold);
    color:var(--color-primary);background:var(--color-primary-soft);padding:2px 8px;border-radius:var(--radius-sm);
    margin-right:var(--space-2)}

/* ══ Khối BẢN ĐỒ BÀI THI — dùng ở bài tổng quan ══════════════════════════
   Bài tổng quan phải trả lời được trong ba giây: "bài thi gồm những gì, phần
   nào NẶNG nhất". Bảng bảy dòng nói đủ chữ nhưng giấu mất tỉ lệ — 54 câu của
   Part 7 và 6 câu của Part 1 nằm trong hai ô bằng nhau, đọc xong vẫn tưởng
   bảy phần ngang nhau. Khối này vẽ mỗi Part thành một thanh dài đúng theo số
   câu (bề rộng truyền qua biến --w, vì đó là DỮ LIỆU chứ không phải kiểu dáng)
   nên độ nặng nhìn là thấy, khỏi phải nhẩm. */
.tr-body .xmap{display:grid;gap:var(--space-4);margin:var(--space-4) 0}
.tr-body .xmap-sec{border:1px solid var(--color-border);border-radius:var(--radius-lg);
    background:var(--color-surface);box-shadow:var(--shadow-sm);overflow:hidden}
.tr-body .xmap-sec>b{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--space-3);
    background:var(--color-primary-soft);color:var(--color-primary);
    padding:var(--space-3) var(--space-4);font-size:var(--fs-small);
    border-bottom:1px solid var(--color-border)}
.tr-body .xmap-sec>b span{font-weight:var(--fw-regular);color:var(--color-secondary-text)}
.tr-body .xmap-row{display:grid;grid-template-columns:1fr auto;gap:4px var(--space-3);
    align-items:baseline;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-line)}
.tr-body .xmap-row:first-of-type{border-top:0}
.tr-body .xmap-row .p{font-weight:var(--fw-bold);color:var(--color-ink)}
.tr-body .xmap-row .p em{font-style:normal;font-weight:var(--fw-regular);color:var(--color-muted)}
.tr-body .xmap-row .n{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-primary);
    white-space:nowrap}
/* thanh tỉ lệ chiếm trọn bề ngang, nằm dưới cặp tên–số của chính dòng đó */
.tr-body .xmap-row .bar{grid-column:1 / -1;height:10px;border-radius:var(--radius-pill);
    background:var(--color-line);overflow:hidden}
.tr-body .xmap-row .bar i{display:block;height:100%;width:var(--w);border-radius:var(--radius-pill);
    background:var(--color-primary)}
/* phần Đọc đổi sang cyan để hai khối tách nhau ngay từ màu, không cần đọc tiêu đề */
.tr-body .xmap-sec--r>b{background:var(--color-accent-soft);color:var(--color-accent-deep)}
.tr-body .xmap-sec--r .n{color:var(--color-accent-deep)}
.tr-body .xmap-sec--r .bar i{background:var(--color-accent)}

/* ══ Bộ khối cho Part 2 ══════════════════════════════════════════════════
   Part 1 có ẢNH làm điểm nghỉ mắt; Part 2 không có gì để nhìn nên nếu chỉ
   dùng đoạn văn + bảng thì cả bài thành một khối chữ đọc không vào. Sáu khối
   dưới đây thay chỗ đó — và quan trọng hơn: Part 2 vốn là MỘT MẨU HỘI THOẠI,
   trình bày đúng dạng hội thoại thì học viên hiểu ngay ai đang nói gì. */

/* 1. Hội thoại hai người */
.tr-body .dlg{display:grid;gap:var(--space-3);margin:var(--space-4) 0;
    background:var(--color-soft);border:1px solid var(--color-line);
    border-radius:var(--radius-lg);padding:var(--space-4)}
.tr-body .dlg .turn{display:flex;gap:var(--space-3);align-items:flex-start}
.tr-body .dlg .turn.rep{padding-left:var(--space-6)}
.tr-body .dlg .who{flex:none;width:34px;height:34px;border-radius:var(--radius-pill);
    display:grid;place-items:center;font-size:var(--fs-micro);font-weight:var(--fw-bold);
    background:var(--color-primary);color:var(--color-on-dark);line-height:1;text-align:center}
.tr-body .dlg .turn.rep .who{background:var(--color-accent)}
.tr-body .dlg .bub{background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);flex:1}
.tr-body .dlg .bub .en{display:block;font-weight:var(--fw-medium)}
.tr-body .dlg .bub .vi{margin-top:2px}
.tr-body .dlg .lbl{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);
    text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);margin-bottom:4px}

/* 2. Đối chiếu hai cột — cách nghĩ SAI đặt cạnh cách nghĩ ĐÚNG */
.tr-body .vs{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:var(--space-4) 0}
@media (min-width:640px){.tr-body .vs{grid-template-columns:1fr 1fr}}
.tr-body .vs>div{border-radius:var(--radius-md);padding:var(--space-4);border:1px solid}
.tr-body .vs .bad{background:var(--color-warning-soft);border-color:var(--color-warning)}
.tr-body .vs .good{background:var(--color-secondary-soft);border-color:var(--color-secondary)}
.tr-body .vs h5{margin:0 0 var(--space-2);font-size:var(--fs-small);font-weight:var(--fw-bold);
    text-transform:uppercase;letter-spacing:.03em}
.tr-body .vs .bad h5{color:var(--color-warning-deep)}
.tr-body .vs .good h5{color:var(--color-secondary-deep)}
.tr-body .vs p:last-child{margin-bottom:0}

/* 3. Hộp tự luyện — bấm mới mở đáp án, biến đọc thụ động thành làm thử */
.tr-body .drill{background:var(--color-accent-soft);border:1px solid var(--color-accent);
    border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-4) 0}
.tr-body .drill>b{display:block;color:var(--color-accent-deep);margin-bottom:var(--space-2)}
.tr-body .drill ol{margin:0 0 var(--space-3);padding-left:var(--space-5)}
.tr-body .drill summary{cursor:pointer;font-weight:var(--fw-bold);color:var(--color-accent-deep);
    font-size:var(--fs-small);list-style:none}
.tr-body .drill summary::-webkit-details-marker{display:none}
.tr-body .drill summary::before{content:'▸ ';font-weight:var(--fw-bold)}
.tr-body .drill details[open] summary::before{content:'▾ '}
.tr-body .drill details{background:var(--color-surface);border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-4);margin-top:var(--space-2)}
.tr-body .drill details p:last-child,.tr-body .drill details ul:last-child{margin-bottom:0}

/* 4. Cặp từ gần âm — hai từ đối nhau, nhìn là nhớ */
.tr-body .pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:var(--space-3);margin:var(--space-4) 0}
.tr-body .pairs>div{background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);text-align:center}
.tr-body .pairs .w{display:block;font-weight:var(--fw-bold);color:var(--color-ink)}
.tr-body .pairs .x{display:block;font-size:var(--fs-small);color:var(--color-warning-deep);
    font-weight:var(--fw-bold);margin:2px 0}
.tr-body .pairs .m{display:block;font-size:var(--fs-small);color:var(--color-muted)}

/* 5. Dòng quy trình — các bước nối tiếp, đọc ngang */
.tr-body .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:var(--space-3);margin:var(--space-4) 0;counter-reset:fl}
.tr-body .flow>div{position:relative;background:var(--color-primary-soft);
    border-radius:var(--radius-md);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-4);
    counter-increment:fl}
.tr-body .flow>div::before{content:counter(fl);display:grid;place-items:center;
    width:24px;height:24px;border-radius:var(--radius-pill);background:var(--color-primary);
    color:var(--color-on-dark);font-size:var(--fs-micro);font-weight:var(--fw-bold);margin-bottom:var(--space-2)}
.tr-body .flow b{display:block;color:var(--color-primary);margin-bottom:4px}
.tr-body .flow span{font-size:var(--fs-small);color:var(--color-secondary-text)}

/* 5b. Lối đi từng bước — DIỄN LẠI thao tác trên một câu thật, đọc dọc.
       Khác .flow ở chỗ .flow tóm tắt quy trình chung bằng vài chữ, còn .trace
       chạy quy trình đó trên một câu cụ thể nên mỗi bước cõng được cả câu tiếng
       Anh, bản dịch và nhận xét. Người mới cần thấy thao tác, không chỉ nghe luật. */
.tr-body .trace{border:1px solid var(--color-border);border-left:3px solid var(--color-accent);
    border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-4) 0;
    background:var(--color-surface)}
.tr-body .trace>b{display:block;color:var(--color-accent-deep);font-size:var(--fs-h4);
    margin-bottom:var(--space-3)}
.tr-body .trace ol{list-style:none;margin:0;padding:0;counter-reset:tc}
.tr-body .trace ol>li{position:relative;counter-increment:tc;padding:0 0 var(--space-4) var(--space-8);
    margin:0}
.tr-body .trace ol>li:last-child{padding-bottom:0}
.tr-body .trace ol>li::before{content:counter(tc);position:absolute;left:0;top:0;
    display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);
    background:var(--color-accent);color:var(--color-on-dark);
    font-size:var(--fs-micro);font-weight:var(--fw-bold)}
/* Đường nối các bước — dừng trước bước cuối để không thò ra dưới khối */
.tr-body .trace ol>li:not(:last-child)::after{content:'';position:absolute;left:11px;top:26px;
    bottom:var(--space-2);width:2px;background:var(--color-line)}
.tr-body .trace ol>li>b{display:block;color:var(--color-ink);margin-bottom:4px}
.tr-body .trace ol>li>p{margin:0 0 var(--space-2);font-size:var(--fs-small)}
.tr-body .trace ol>li>p:last-child{margin-bottom:0}
.tr-body .trace .hit{background:var(--color-secondary-soft);border-radius:var(--radius-sm);
    padding:1px 4px;font-weight:var(--fw-semibold)}

/* 5c. Nghe và điền — bài chép chính tả cấp câu.
       Part 1 mất điểm nhiều nhất ở chỗ NGHE KHÔNG RA ĐỘNG TỪ, mà chọn đáp án thì
       không tách được lỗi đó ra khỏi lỗi nhìn ảnh. Khối này bỏ hẳn bức ảnh đi, chỉ
       còn tai: nghe một câu, điền chữ còn thiếu.
       Mỗi câu một file audio riêng để tua lại được từng câu — bản in của giáo trình
       gộp 8 câu vào một file, dùng trên giấy thì được, trên web thì rất khó tua. */
.tr-body .dict{border:1px solid var(--color-border);border-radius:var(--radius-md);
    padding:var(--space-4);margin:var(--space-4) 0;background:var(--color-soft)}
.tr-body .dict>b{display:block;color:var(--color-ink);font-size:var(--fs-h4);
    margin-bottom:var(--space-2)}
.tr-body .dict ol{margin:var(--space-3) 0 0;padding-left:0;list-style:none;counter-reset:dc}
.tr-body .dict ol>li{counter-increment:dc;display:flex;align-items:center;gap:var(--space-3);
    flex-wrap:wrap;padding:var(--space-2) 0;border-top:1px solid var(--color-line)}
.tr-body .dict ol>li::before{content:counter(dc);flex:0 0 auto;display:grid;place-items:center;
    width:22px;height:22px;border-radius:var(--radius-pill);background:var(--color-primary-soft);
    color:var(--color-primary);font-size:var(--fs-micro);font-weight:var(--fw-bold)}
/* Cho thanh audio CO được. Để flex:0 0 auto thì ở màn 320px nó chiếm 190px, cộng số
   thứ tự 22px và khoảng cách 12px là 224px — vượt bề rộng dòng 204px, nên thanh phát
   bị đẩy hẳn xuống dòng dưới, mỗi câu tốn ba dòng. */
.tr-body .dict audio{flex:1 1 140px;height:32px;max-width:190px;min-width:0}
/* Cùng lý do như .listen .na — thẻ audio đã bị thay, phải khai cỡ cho trình phát thật.
   Dưới 220px navs-audio.css tự bỏ cột sóng và chỉ giữ đồng hồ, nên hẹp vẫn dùng được. */
.tr-body .dict .na{flex:1 1 160px;max-width:260px;min-width:0}
.tr-body .dict .sen{flex:1 1 240px;font-weight:var(--fw-medium)}
/* Chỗ trống: gạch chân đủ rộng để nhìn ra là phải điền, không dùng ký tự gạch dưới
   vì nó co giãn theo font và trên mobile thành một vệt dính liền chữ. */
.tr-body .dict .bl{display:inline-block;min-width:96px;border-bottom:2px solid var(--color-primary);
    vertical-align:baseline}

/* 6. Luật vàng — khối chốt đậm hơn .tip, dùng cho quy tắc bất di bất dịch */
.tr-body .key{border:2px solid var(--color-primary);border-radius:var(--radius-md);
    padding:var(--space-4);margin:var(--space-4) 0;background:var(--color-surface)}
.tr-body .key b{display:block;color:var(--color-primary);font-size:var(--fs-h4);margin-bottom:var(--space-2)}
.tr-body .key p:last-child,.tr-body .key ul:last-child{margin-bottom:0}

/* ══ Khối BÀI NÓI cho Part 3–4 ═══════════════════════════════════════════
   Part 1–2 mỗi ví dụ là MỘT câu, khối .eg-opts lo được. Part 3–4 mỗi ví dụ là
   MỘT BÀI NÓI + BA câu hỏi, mỗi câu bốn phương án — phải có khối riêng.
   Lời thoại giấu trong <details> để học viên buộc nghe trước mới đọc; đoạn chứa
   đáp án của từng câu được tô sáng bằng <mark> (dữ liệu gốc có sẵn mốc 71/72/73). */
.tr-body .talk{border:1px solid var(--color-border);border-radius:var(--radius-lg);
    background:var(--color-surface);box-shadow:var(--shadow-sm);
    margin:var(--space-5) 0;overflow:hidden}
.tr-body .talk-head{background:var(--color-primary-soft);padding:var(--space-3) var(--space-4);
    font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-primary);
    border-bottom:1px solid var(--color-border)}
.tr-body .talk>.listen{margin:var(--space-4) var(--space-4) var(--space-3)}
.tr-body .talk-tr{margin:0 var(--space-4) var(--space-4);background:var(--color-soft);
    border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.tr-body .talk-tr summary{cursor:pointer;font-weight:var(--fw-bold);font-size:var(--fs-small);
    color:var(--color-secondary-text);list-style:none}
.tr-body .talk-tr summary::-webkit-details-marker{display:none}
.tr-body .talk-tr summary::before{content:'▸ ';font-weight:var(--fw-bold)}
.tr-body .talk-tr[open] summary::before{content:'▾ '}
.tr-body .talk-tr p{margin:var(--space-3) 0 0;line-height:var(--lh-loose)}
.tr-body .talk-tr .vi{display:block;margin-top:var(--space-2)}
/* đoạn chứa đáp án — tô nền nhạt, kèm số câu ở nhãn trên */
.tr-body mark{background:var(--color-highlight-soft);color:var(--color-ink);
    padding:1px 3px;border-radius:var(--radius-sm);position:relative}
.tr-body mark::after{content:attr(data-q);font-size:var(--fs-micro);font-weight:var(--fw-bold);
    color:var(--color-highlight-deep);vertical-align:super;margin-left:2px}
/* một câu hỏi trong nhóm */
.tr-body .talk-q{border-top:1px solid var(--color-line);padding:var(--space-4)}
.tr-body .talk-q>b{display:block;margin-bottom:var(--space-2);color:var(--color-ink)}
/* min-width chứ KHÔNG phải width: câu Part 3–7 đánh số tới 200, ba chữ số không lọt
   vừa vòng tròn 26px và bị bóp sát mép. Cho nó nở thành viên thuốc khi cần. */
.tr-body .talk-q>b .no{display:inline-grid;place-items:center;min-width:26px;height:26px;
    padding:0 7px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-on-dark);
    font-size:var(--fs-micro);margin-right:var(--space-2);vertical-align:middle}
.tr-body .talk-q .eg-opts{margin-top:var(--space-2)}

/* ══ Khối CÂU ĐIỀN cho Part 5 ════════════════════════════════════════════
   Part 5 không có audio, không có ảnh — cả hai khối trên đều không hợp. Ví dụ ở
   đây là MỘT câu văn có chỗ trống, và điều học viên phải nhìn ra là hình dạng
   bốn phương án, nên câu đề phải to và chỗ trống phải nổi rõ. Phần phương án
   dùng lại .eg-opts đang có (đã lo .is-ok/.is-no/.k/.why). */
.tr-body .q5{border:1px solid var(--color-border);border-radius:var(--radius-lg);
    background:var(--color-surface);box-shadow:var(--shadow-sm);
    margin:var(--space-5) 0;overflow:hidden}
.tr-body .q5-head{background:var(--color-primary-soft);padding:var(--space-3) var(--space-4);
    font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-primary);
    border-bottom:1px solid var(--color-border)}
.tr-body .q5-stem{padding:var(--space-4);border-bottom:1px solid var(--color-line)}
.tr-body .q5-stem .en{display:block;font-size:var(--fs-h4);line-height:var(--lh-loose)}
.tr-body .q5-stem .vi{display:block;margin-top:var(--space-2)}
/* chỗ trống: gạch dày màu brand để mắt bắt được ngay, không dùng dấu gạch dưới thường */
.tr-body .q5-stem .bl{display:inline-block;min-width:92px;border-bottom:3px solid var(--color-primary);
    vertical-align:baseline;margin:0 4px}
.tr-body .q5>.eg-opts{padding:var(--space-4)}

/* ══ Khối VĂN BẢN cho Part 7 ═════════════════════════════════════════════
   Part 7 trích MỘT VĂN BẢN DÀI + 2–5 câu hỏi. Đoạn văn trung vị ~1.000 ký tự
   nên phải giấu trong <details>: mở sẵn thì nó đè hết phần giảng bài, mà bỏ đi
   thì học viên không đối chiếu được. 29% cụm trong kho có đoạn là ẢNH chụp —
   .psg-img lo nhánh đó, dùng lại kiểu <figure> của Part 1. */
.tr-body .psg{border:1px solid var(--color-border);border-radius:var(--radius-lg);
    background:var(--color-surface);box-shadow:var(--shadow-sm);
    margin:var(--space-5) 0;overflow:hidden}
.tr-body .psg-head{background:var(--color-primary-soft);padding:var(--space-3) var(--space-4);
    font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-primary);
    border-bottom:1px solid var(--color-border)}
.tr-body .psg-body{margin:var(--space-4);background:var(--color-soft);
    border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.tr-body .psg-body summary{cursor:pointer;font-weight:var(--fw-bold);font-size:var(--fs-small);
    color:var(--color-secondary-text);list-style:none}
.tr-body .psg-body summary::-webkit-details-marker{display:none}
.tr-body .psg-body summary::before{content:'▸ ';font-weight:var(--fw-bold)}
.tr-body .psg-body[open] summary::before{content:'▾ '}
/* giữ xuống dòng của văn bản gốc — email và biểu mẫu mất dòng là mất cấu trúc */
.tr-body .psg-body .doc{display:block;margin-top:var(--space-3);white-space:pre-line;
    font-size:var(--fs-small);line-height:var(--lh-loose)}
/* 🚨 Phải TRỪ lề, không được để max-width:100%. `100%` tính theo bề rộng cha, rồi
   lề 16px mỗi bên đẩy ảnh rộng thêm 32px — mà .psg đang overflow:hidden nên phần
   thừa bị cắt câm lặng, mất hẳn mép phải của ảnh chụp văn bản (đo được: ảnh 810px
   trong khung 810px, thò ra 32px). Ảnh đề Part 7 là ảnh CHỮ, mất mép phải là mất
   nội dung câu hỏi chứ không chỉ xấu. */
.tr-body .psg-img{display:block;margin:var(--space-4);border:1px solid var(--color-line);
    border-radius:var(--radius-md);max-width:calc(100% - var(--space-8));height:auto}
.tr-body .psg-q{border-top:1px solid var(--color-line);padding:var(--space-4)}
.tr-body .psg-q>b{display:block;margin-bottom:var(--space-2);color:var(--color-ink)}
.tr-body .psg-q>b .no{display:inline-grid;place-items:center;min-width:26px;height:26px;
    padding:0 7px;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-on-dark);
    font-size:var(--fs-micro);margin-right:var(--space-2);vertical-align:middle}
.tr-body .psg-q .eg-opts{margin-top:var(--space-2)}
/* Bước kết bài — khối riêng, không lẫn vào thanh điều hướng. */
.tr-fin{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
    flex-wrap:wrap;margin-top:var(--space-8);padding:var(--space-5) var(--space-6);
    background:var(--color-primary-soft);border:1px solid var(--color-border);
    border-radius:var(--radius-lg)}
.tr-fin.is-done{background:var(--color-soft)}
.tr-fin__t{min-width:0}
.tr-fin__t b{display:block;font-size:var(--fs-h4);color:var(--color-ink);margin-bottom:4px}
.tr-fin__t span{display:block;font-size:var(--fs-small);color:var(--color-muted);line-height:var(--lh-body)}
.tr-fin__a{display:flex;gap:var(--space-3);flex-wrap:wrap;flex-shrink:0}
.tr-nav__mid{font-size:var(--fs-small);color:var(--color-muted)}
.tr-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6);gap:var(--space-3);flex-wrap:wrap}
/* luyện ngay sau bài học */
.lp{margin-top:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.lp-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);
    background:var(--color-primary-soft);border-bottom:1px solid var(--color-border)}
.lp-head i{color:var(--color-primary)}
.lp-head .lp-tt{font-weight:var(--fw-bold)}
.lp-head .lp-meta{margin-left:auto;font-size:var(--fs-small);color:var(--color-muted)}
.lp-q{padding:var(--space-5);border-top:1px solid var(--color-line)}
.lp-q:first-of-type{border-top:none}
.lp-no{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--color-muted)}
.lp-ctx{margin:var(--space-2) 0 var(--space-3)}
.lp-ctx audio{width:100%;max-width:420px}
.lp-ctx .na{max-width:420px}   /* .lp-ctx là khối nên .na tự đầy dòng, chỉ cần chặn trần */
.lp-ctx img{display:block;margin:0 auto;max-width:100%;max-height:340px;
    border-radius:var(--radius-md);border:1px solid var(--color-line)}
.lp-pass{max-height:190px;overflow:auto;background:var(--color-soft);border:1px solid var(--color-line);
    border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--fs-small);
    line-height:var(--lh-body);white-space:pre-line}
.lp-stem{font-weight:var(--fw-medium);margin:var(--space-2) 0 var(--space-3)}
.lp-opts{display:grid;gap:var(--space-2)}
/* Part 1/2 không in phương án (đề thật cũng vậy) — nếu xếp dọc thì thành bốn ô
   trống trông như trang bị lỗi. Xếp ngang thành hàng nút chọn cho rõ chủ ý. */
.lp-opts--letters{grid-template-columns:repeat(4,1fr)}
.lp-opts--letters .lp-opt{justify-content:center;padding:var(--space-4) var(--space-2)}
.lp-opts--letters .lp-opt .k{width:34px;height:34px;font-size:var(--fs-h4)}
.lp-hint{font-size:var(--fs-small);color:var(--color-muted);margin:0 0 var(--space-2)}
.lp-opt{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;text-align:left;cursor:pointer;
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);font-size:var(--fs-body);color:var(--color-text);
    transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.lp-opt:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-soft)}
.lp-opt:disabled{cursor:default}
.lp-opt .k{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-pill);
    background:var(--color-soft);font-size:var(--fs-small);font-weight:var(--fw-bold)}
.lp-opt.is-ok{border-color:var(--color-secondary);background:var(--color-secondary-soft)}
.lp-opt.is-ok .k{background:var(--color-secondary);color:var(--color-on-dark)}
.lp-opt.is-no{border-color:var(--color-warning)}
.lp-opt.is-no .k{background:var(--color-warning);color:var(--color-on-dark)}
.lp-exp{margin-top:var(--space-3);border-left:3px solid var(--color-accent);background:var(--color-soft);
    border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--fs-small);
    line-height:var(--lh-body)}
.lp-exp b{color:var(--color-primary)}
.lp-sum{padding:var(--space-5);border-top:1px solid var(--color-border);background:var(--color-soft)}
.lp-score{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.lp-score .n{font-size:var(--fs-h3);font-weight:var(--fw-extrabold);color:var(--color-primary)}
.lp-wrong{font-size:var(--fs-small);color:var(--color-text);margin:0 0 var(--space-3);padding-left:var(--space-5)}
.lp-wrong li{margin-bottom:4px}
.lp-acts{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* Khối riêng của bài lý thuyết Nói Viết, cộng thêm vào bộ khối bài Nghe Đọc.
   .say = một bài nói mẫu: tên + mức điểm, trình phát, lời bài nói giấu sau nút (nghe trước rồi mới đọc). */
.tr-body .say{display:grid;gap:var(--space-2);background:var(--color-primary-soft);border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);margin:var(--space-3) 0}
.tr-body .say__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.tr-body .say__h b{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--color-primary-deep)}
.tr-body .say .na{width:100%}
.tr-body .say__tr summary{cursor:pointer;list-style:none;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--color-secondary-text)}
.tr-body .say__tr summary::-webkit-details-marker{display:none}
.tr-body .say__tr summary::before{content:'▸ '}
.tr-body .say__tr[open] summary::before{content:'▾ '}
.tr-body .say__tr p{margin:var(--space-2) 0 0;line-height:var(--lh-loose)}
.tr-body .vs .say{background:var(--color-surface);border:1px solid var(--color-line)}

/* Màn hẹp: cụm mẫu câu dài trong .fx (vd "I'm afraid I won't be able to… because…") để nowrap thì đẩy trang tràn ngang. */
@media (max-width:640px){.tr-body .fx{white-space:normal}}