/* ═══════════════════════════════════════════════════════════════════════════════════════
   il-result.css — KẾT QUẢ + CHỮA BÀI IELTS Listening, App học v3 (27/09/2026, Đợt 0).
   Khuôn A như trang đề (listening_test.php): dải teal có tên đề + điểm, các thẻ trắng chồng mép dải.
   Tờ đề dùng il-paper.css (chung với phòng làm bài); tệp này chỉ phủ đáp án + cột lời giải + audio.
   Mọi màu qua token. Đúng = emerald (secondary), sai = amber (warning), bỏ trống = xám (locked).
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.ilr{
    --ilr-surface: var(--color-surface);
    --ilr-sunken:  color-mix(in srgb,var(--color-primary) 4%,var(--color-soft));
    --ilr-tint:    color-mix(in srgb,var(--color-primary) 7%,var(--color-surface));
    --ilr-wash:    color-mix(in srgb,var(--color-primary) 12%,var(--color-surface));
    --ilr-border:  color-mix(in srgb,var(--color-primary-deep) 10%,var(--color-border));
    --ilr-hair:    color-mix(in srgb,var(--color-primary-deep) 6%,var(--color-line));
    --ilr-ink:     var(--color-ink);
    --ilr-text:    var(--color-secondary-text);
    --ilr-muted:   color-mix(in srgb,var(--color-muted) 84%,var(--color-ink));
    --ilr-strong:  var(--color-primary-hover);
    --ilr-deep:    var(--color-primary-deep);
    /* Nền teal đậm dựng từ --color-primary-hover (KHÔNG lật khi tối — như --lv-night/deep/mid của khung app): trộn đen
       từ --color-primary-deep thì chế độ tối ra dải teal nhạt bạc màu. --*-dk: chữ teal trên nền TRẮNG; --*-fg: chữ màu
       thương hiệu trên nền thẻ (tối thì sáng lên). */
    --ilr-night:   color-mix(in srgb,var(--color-primary-hover) 35%,black);
    --ilr-band:    color-mix(in srgb,var(--color-primary-hover) 49%,black);
    --ilr-mid:     color-mix(in srgb,var(--color-primary-hover) 74%,black);
    --ilr-dk:      color-mix(in srgb,var(--color-primary-hover) 62%,black);
    --ilr-fg:      color-mix(in srgb,var(--color-primary-hover) 60%,var(--color-primary-deep));
    --ilr-mint:    color-mix(in srgb,var(--color-primary) 45%,var(--color-on-dark));
    --ilr-on:      var(--color-on-dark);
    --ilr-on2:     color-mix(in srgb,var(--color-on-dark) 86%,transparent);
    --ilr-on3:     color-mix(in srgb,var(--color-on-dark) 70%,transparent);
    --ilr-glass:   color-mix(in srgb,var(--color-on-dark) 9%,transparent);
    --ilr-glass2:  color-mix(in srgb,var(--color-on-dark) 16%,transparent);
    --ilr-line-d:  color-mix(in srgb,var(--color-on-dark) 18%,transparent);
    --ilr-ok:      var(--color-secondary);
    --ilr-ok-ink:  var(--color-secondary-deep);
    --ilr-bad:     var(--color-warning);
    --ilr-bad-ink: var(--color-warning-deep);
    --ilr-no:      var(--color-locked);
    --ilr-sh: 0 1px 2px color-mix(in srgb,var(--ilr-band) 12%,transparent),
              0 16px 34px -20px color-mix(in srgb,var(--ilr-band) 42%,transparent);
    color:var(--ilr-text);font-family:var(--font-sans);
}
.ilr *,.ilr *::before,.ilr *::after{box-sizing:border-box}
.ilr :focus-visible{outline:2px solid var(--ilr-strong);outline-offset:2px}
.ilr a{text-decoration:none}
.ilr button{font-family:inherit}
html.ilr-lock,html.ilr-lock body{overflow:hidden}
/* 🚨 app.css đặt body{overflow-x:hidden} ⇒ body thành hộp cuộn không bao giờ cuộn ⇒ cột lời giải sticky CHẾT. `clip` chặn
   cuộn ngang y hệt mà không tạo hộp cuộn (cùng cách body.il-exam của trang làm bài). */
body:has(.ilr){overflow-x:clip!important;overflow-y:visible!important}

/* ── Dải teal ───────────────────────────────────────────────────────────────────── */
.ilr-band{
    position:relative;isolation:isolate;overflow:hidden;color:var(--ilr-on);
    padding:calc(var(--nav-h,64px) + 22px) 28px 106px;
    background:
        radial-gradient(52% 120% at 90% -20%,color-mix(in srgb,var(--color-primary) 50%,transparent),transparent 62%),
        radial-gradient(40% 90% at 8% 135%,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent 70%),
        linear-gradient(155deg,var(--ilr-mid),var(--ilr-band) 55%,var(--ilr-night));
}
.ilr-band::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
    background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--color-on-dark) 14%,transparent) 1px,transparent 1.5px);
    background-size:18px 18px;
    -webkit-mask-image:linear-gradient(105deg,transparent 18%,black 72%);
            mask-image:linear-gradient(105deg,transparent 18%,black 72%);
}
.ilr-band :is(h1,h2,h3,p){color:inherit}
.ilr-band__in{max-width:1180px;margin:0 auto}
.ilr-back{display:inline-flex;align-items:center;gap:4px;color:var(--ilr-on2);font-size:14px;font-weight:var(--fw-semibold);transition:color var(--dur-fast) var(--ease)}
.ilr-back:hover{color:var(--ilr-on)}
.ilr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:20px}
.ilr-head__txt{min-width:0}
.ilr .ilr-title{margin:0;font-size:38px;line-height:1.1;font-weight:var(--fw-extrabold);letter-spacing:-.032em;color:var(--ilr-on);text-wrap:balance}
.ilr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ilr-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-on2);background:var(--ilr-glass);border:1px solid var(--ilr-line-d);white-space:nowrap}
.ilr-chip.is-on{background:var(--ilr-on);border-color:var(--ilr-on);color:var(--ilr-dk)}
.ilr-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ilr-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;cursor:pointer;
    font:var(--fw-bold) 15px/1 var(--font-sans);white-space:nowrap;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.ilr-btn:active{transform:scale(.98)}
.ilr-btn--white{border:0;background:var(--ilr-on);color:var(--ilr-dk);box-shadow:0 12px 26px -14px color-mix(in srgb,black 60%,transparent)}
.ilr-btn--white:hover{background:color-mix(in srgb,var(--ilr-on) 90%,var(--color-primary));color:var(--ilr-dk)}
.ilr-btn--glass{border:1px solid var(--ilr-line-d);background:var(--ilr-glass);color:var(--ilr-on)}
.ilr-btn--glass:hover{background:var(--ilr-glass2)}
.ilr-btn--glass.is-done{background:var(--ilr-glass2)}

/* Thẻ điểm (kính) */
.ilr-score{
    flex:none;display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:20px;
    border:1px solid var(--ilr-line-d);background:linear-gradient(160deg,var(--ilr-glass2),var(--ilr-glass));
}
.ilr-ring{
    --p:0;position:relative;width:112px;height:112px;flex:none;border-radius:50%;
    display:flex;align-items:baseline;justify-content:center;padding-top:34px;
}
.ilr-ring::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(var(--ilr-mint) calc(var(--p) * 1%),var(--ilr-glass2) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),black calc(100% - 8px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 9px),black calc(100% - 8px));
}
.ilr-ring b{font-size:36px;line-height:1;font-weight:var(--fw-extrabold);letter-spacing:-.04em;color:var(--ilr-on);font-variant-numeric:tabular-nums}
.ilr-ring small{margin-left:2px;font-size:15px;font-weight:var(--fw-semibold);color:var(--ilr-on2);font-variant-numeric:tabular-nums}
.ilr-score__txt{min-width:0}
.ilr-score__band span{display:block;font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-on3)}
.ilr-score__band b{display:block;margin-top:2px;font-size:36px;line-height:1.05;font-weight:var(--fw-extrabold);letter-spacing:-.03em;color:var(--ilr-on);font-variant-numeric:tabular-nums}
.ilr .ilr-score__cmp{margin:8px 0 0;font-size:13.5px;font-weight:var(--fw-semibold);color:var(--ilr-mint)}

/* Dải số liệu (kính) — cùng dáng .tdp-figs */
.ilr-figs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:22px 0 0;border:1px solid var(--ilr-line-d);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--ilr-glass2),var(--ilr-glass))}
.ilr-figs > div{padding:12px 18px;min-width:0}
.ilr-figs > div + div{border-left:1px solid var(--ilr-line-d)}
.ilr-figs dt{font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-on3)}
.ilr-figs dd{margin:3px 0 0;font-size:26px;line-height:1.1;font-weight:var(--fw-extrabold);letter-spacing:-.03em;color:var(--ilr-on);font-variant-numeric:tabular-nums;white-space:nowrap}
.ilr-figs dd small{margin-left:3px;font-size:14px;font-weight:var(--fw-semibold);letter-spacing:0;color:var(--ilr-on2)}

/* ── Thân trang: thẻ trắng chồng mép dải ─────────────────────────────────────────── */
/* Không đặt z-index: thẻ đã nằm SAU dải trong DOM nên tự vẽ đè lên dải; có z-index là tạo ngữ cảnh xếp lớp và
   tấm lời giải (fixed, điện thoại) bị lớp phủ nền ngoài ngữ cảnh ấy đè lên. */
.ilr-body{position:relative;max-width:1236px;margin:-74px auto 0;padding:0 28px 56px}
.ilr-card{background:var(--ilr-surface);border:1px solid var(--ilr-border);border-radius:20px;box-shadow:var(--ilr-sh)}
.ilr-card__h h2,.ilr-main__head h2{margin:0;font-size:18px;line-height:1.3;font-weight:var(--fw-extrabold);letter-spacing:-.015em;color:var(--ilr-ink)}
.ilr-card__h p{margin:3px 0 0;font-size:13.5px;color:var(--ilr-muted)}

/* Theo dạng câu */
.ilr-types{padding:18px 22px 20px}
.ilr-types__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.ilr-type{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 10px;padding:12px 14px;
    border:1px solid var(--ilr-border);border-radius:14px;background:var(--ilr-surface);cursor:pointer;text-align:left;
    transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.ilr-type:hover{border-color:color-mix(in srgb,var(--color-primary) 50%,var(--color-border));background:var(--ilr-tint)}
.ilr-type.is-on{border-color:var(--ilr-strong);background:var(--ilr-wash);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 16%,transparent)}
.ilr-type__n{min-width:0;font-size:14.5px;font-weight:var(--fw-semibold);color:var(--ilr-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ilr-type__v{font-size:17px;font-weight:var(--fw-extrabold);color:var(--ilr-ink);font-variant-numeric:tabular-nums}
.ilr-type__v small{font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.ilr-type__bar{grid-column:1 / -1;height:7px;border-radius:999px;background:var(--ilr-sunken);overflow:hidden}
.ilr-type__bar i{display:block;height:100%;border-radius:inherit;background:var(--ilr-ok)}
.ilr-type.is-weak .ilr-type__bar i{background:var(--ilr-bad)}

/* Chữa bài + cột lời giải */
.ilr-work{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;margin-top:18px;align-items:start}
.ilr-main{min-width:0;padding:18px 22px 26px}
.ilr-main__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ilr-seg,.ilr-ptab2{display:inline-flex;padding:4px;gap:2px;border-radius:12px;background:var(--ilr-sunken)}
.ilr-seg button,.ilr-ptab2 button{
    height:36px;padding:0 16px;border:0;border-radius:9px;background:none;cursor:pointer;
    font:var(--fw-semibold) 14px/1 var(--font-sans);color:var(--ilr-muted);
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.ilr-seg button:hover,.ilr-ptab2 button:hover{color:var(--ilr-ink)}
.ilr-seg button[aria-selected="true"],.ilr-ptab2 button[aria-selected="true"]{background:var(--ilr-surface);color:var(--ilr-deep);box-shadow:0 1px 2px color-mix(in srgb,var(--color-primary-deep) 16%,transparent)}
.ilr-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ilr-chipf{
    display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
    border:1px solid var(--ilr-border);background:var(--ilr-surface);color:var(--ilr-text);font:var(--fw-semibold) 14px/1 var(--font-sans);
}
.ilr-chipf b{font-weight:var(--fw-bold);color:var(--ilr-muted);font-variant-numeric:tabular-nums}
.ilr-chipf:hover{border-color:var(--ilr-strong);color:var(--ilr-fg)}
.ilr-chipf.is-on{border-color:var(--ilr-strong);background:var(--ilr-strong);color:var(--ilr-on)}
.ilr-chipf.is-on b{color:var(--ilr-on2)}
.ilr-chipf.is-type{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));background:var(--ilr-wash);color:var(--ilr-deep)}
.ilr-chipf.is-type span{font-size:17px;line-height:1;color:var(--ilr-muted)}
.ilr-ptabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin-top:14px;padding:4px;border-radius:14px;background:var(--ilr-sunken)}
.ilr-ptabs[hidden]{display:none}
.ilr-ptab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px 12px 10px;border:0;border-radius:11px;background:none;cursor:pointer;text-align:left}
.ilr-ptab[aria-selected="true"]{background:var(--ilr-surface);box-shadow:0 1px 2px color-mix(in srgb,var(--color-primary-deep) 16%,transparent)}
.ilr-ptab__t{font-size:14.5px;font-weight:var(--fw-bold);color:var(--ilr-ink)}
.ilr-ptab__v{font-size:12.5px;font-weight:var(--fw-semibold);color:var(--ilr-muted);font-variant-numeric:tabular-nums}
.ilr-ptab__dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.ilr-ptab__dots i{width:8px;height:8px;border-radius:3px;background:var(--ilr-no)}
.ilr-ptab__dots i.is-ok{background:var(--ilr-ok)}
.ilr-ptab__dots i.is-bad{background:var(--ilr-bad)}
.ilr-ptab__dots i.is-empty{background:color-mix(in srgb,var(--ilr-no) 55%,transparent)}
.ilr-ptab__dots i.is-dim{opacity:.28}
.ilr-paper{margin-top:18px}
.ilr-paper[hidden],.ilr-list[hidden]{display:none}

/* ── Đáp án phủ lên tờ đề ─────────────────────────────────────────────────────────── */
.ilr .ilr-a{
    display:inline-flex;align-items:center;flex-wrap:wrap;gap:0;max-width:100%;min-height:32px;margin:1px 2px;vertical-align:middle;
    border:1px solid;border-radius:9px;overflow:hidden;cursor:pointer;
    font-size:calc(var(--ilpp-fs,16px) - 1px);font-weight:var(--fw-semibold);line-height:1.3;white-space:normal;
    transition:box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.ilr .ilr-a > span,.ilr .ilr-a > b{padding:5px 10px}
.ilr .ilr-a.is-ok{border-color:color-mix(in srgb,var(--ilr-ok) 45%,transparent);background:color-mix(in srgb,var(--ilr-ok) 12%,var(--color-surface));color:var(--ilr-ok-ink)}
.ilr .ilr-a.is-bad{border-color:color-mix(in srgb,var(--ilr-bad) 50%,transparent);background:color-mix(in srgb,var(--ilr-bad) 10%,var(--color-surface));color:var(--ilr-bad-ink)}
.ilr .ilr-a.is-bad .ilr-a__u{text-decoration:line-through;text-decoration-thickness:1.5px}
.ilr .ilr-a.is-empty{border-style:dashed;border-color:color-mix(in srgb,var(--ilr-no) 70%,transparent);background:var(--color-surface);color:var(--ilr-muted)}
.ilr .ilr-a__u.is-none{font-weight:var(--fw-medium);text-decoration:none!important}
.ilr .ilr-a__k{background:color-mix(in srgb,var(--ilr-ok) 14%,var(--color-surface));color:var(--ilr-ok-ink);border-left:1px solid color-mix(in srgb,var(--ilr-ok) 40%,transparent)}
.ilr .ilr-a__n{padding:5px 9px;background:color-mix(in srgb,currentColor 12%,transparent);font-variant-numeric:tabular-nums}
.ilr .ilr-a:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.ilr .is-sel.ilr-a,.ilr .ilr-q.is-sel .ilr-a{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent)}
.ilr .is-dim{opacity:.32}
.ilr .ilr-shared{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ilr .ilr-shared .ilr-a.is-bad .ilr-a__u{text-decoration:none}   /* chữ ở đây là trạng thái, không phải đáp án bị gạch */

/* Trắc nghiệm: đáp án đúng xanh lục, lựa chọn sai của học viên màu hổ phách */
.ilr .ilpp .ilr-opt{cursor:pointer}
.ilr .ilpp .ilr-opt.is-key{border-color:color-mix(in srgb,var(--ilr-ok) 55%,transparent);background:color-mix(in srgb,var(--ilr-ok) 10%,var(--color-surface));color:var(--ilpp-ink)}
.ilr .ilpp .ilr-opt.is-key :is(.il-exam-option__letter,.il-pl-opt-label){background:var(--ilr-ok);color:var(--color-on-dark)}
.ilr .ilpp .ilr-opt.is-miss{border-color:color-mix(in srgb,var(--ilr-bad) 55%,transparent);background:color-mix(in srgb,var(--ilr-bad) 10%,var(--color-surface))}
.ilr .ilpp .ilr-opt.is-miss :is(.il-exam-option__letter,.il-pl-opt-label){background:var(--ilr-bad);color:var(--color-on-dark)}
.ilr .ilpp .ilr-opt::after{margin-left:auto;padding-left:10px;font-size:12.5px;font-weight:var(--fw-bold);white-space:nowrap}
.ilr .ilpp .ilr-opt.is-key::after{content:var(--ilr-t-key,"");color:var(--ilr-ok-ink)}
.ilr .ilpp .ilr-opt.is-miss::after{content:var(--ilr-t-pick,"");color:var(--ilr-bad-ink)}
.ilr .ilpp .ilr-opt.is-hit::after{content:var(--ilr-t-hit,"");color:var(--ilr-ok-ink)}
.ilr .ilpp :is(.il-exam-option,.il-pl-opt):not(.ilr-opt){opacity:.72}
.ilr .ilpp :is(.il-exam-option,.il-pl-opt):hover{transform:none}
/* Số câu tô theo kết quả */
.ilr .ilpp .ilr-no.is-ok{background:var(--ilr-ok);color:var(--color-on-dark)}
.ilr .ilpp .ilr-no.is-bad{background:var(--ilr-bad);color:var(--color-on-dark)}
.ilr .ilpp .ilr-no.is-empty{background:color-mix(in srgb,var(--ilr-no) 30%,var(--color-surface));color:var(--ilr-muted)}
.ilr .ilpp .ilr-q{cursor:pointer;border-radius:12px;transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ilr .ilpp :is(.il-exam-question,.il-exam-match-row,.il-exam-map__row,.il-pl-q,.il-flowchart__step).ilr-q.is-sel{background:var(--ilr-wash);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 35%,transparent)}
.ilr .ilpp .il-inline-answer.ilr-q{min-width:0}
.ilr .ilpp .il-inline-answer.is-sel .il-inline-answer__no{color:var(--ilr-deep)}

/* ── Danh sách câu ──────────────────────────────────────────────────────────────── */
.ilr-list{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.ilr .ilr-list__h{margin:12px 0 2px;font-size:14px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.ilr-list__h:first-child{margin-top:0}
.ilr-row{
    display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;
    padding:10px 12px;border:1px solid var(--ilr-border);border-radius:12px;background:var(--ilr-surface);cursor:pointer;text-align:left;
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.ilr-row:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border))}
.ilr-row.is-sel{border-color:var(--ilr-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.ilr-row__n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:var(--fw-extrabold) 14px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ilr-row.is-ok .ilr-row__n{background:var(--ilr-ok);color:var(--color-on-dark)}
.ilr-row.is-bad .ilr-row__n{background:var(--ilr-bad);color:var(--color-on-dark)}
.ilr-row.is-empty .ilr-row__n{background:color-mix(in srgb,var(--ilr-no) 30%,var(--color-surface));color:var(--ilr-muted)}
.ilr-row__b{min-width:0}
.ilr-row__ask{display:block;font-size:14.5px;color:var(--ilr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ilr-row__ans{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:14px;font-weight:var(--fw-semibold)}
.ilr-row__ans s{color:var(--ilr-bad-ink);text-decoration-thickness:1.5px}
.ilr-row__u.is-ok,.ilr-row__k{color:var(--ilr-ok-ink)}
.ilr-row__u.is-none{font-weight:var(--fw-medium);color:var(--ilr-muted)}
.ilr-row__t{font-size:12.5px;color:var(--ilr-muted);white-space:nowrap}

/* ── Cột lời giải: audio · lời giải · transcript ──────────────────────────────────── */
.ilr-side{position:sticky;top:calc(var(--nav-h,64px) + 14px);min-width:0}
.ilr-panel{display:flex;flex-direction:column;max-height:calc(100vh - var(--nav-h,64px) - 28px);overflow:hidden}
.ilr-panel__grip{display:none}
.ilr-audio{
    position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ilr-on);
    background:
        radial-gradient(60% 140% at 100% -20%,color-mix(in srgb,var(--color-primary) 45%,transparent),transparent 62%),
        linear-gradient(155deg,var(--ilr-mid),var(--ilr-band) 60%,var(--ilr-night));
}
.ilr-play{
    width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
    background:var(--ilr-on);color:var(--ilr-strong);box-shadow:0 10px 22px -10px color-mix(in srgb,black 60%,transparent);
}
.ilr-play .lv-i{grid-area:1 / 1}
.ilr-play .lv-i + .lv-i,.ilr-play.is-playing .lv-i:first-child{display:none}
.ilr-play.is-playing .lv-i + .lv-i{display:block}
.ilr-audio__main{flex:1;min-width:0}
.ilr-audio__meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-on2)}
.ilr-audio__t{font-variant-numeric:tabular-nums;white-space:nowrap}
.ilr-track{position:relative;height:8px;margin-top:10px;border-radius:999px;background:var(--ilr-glass2);cursor:pointer}
.ilr-track::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.ilr-track__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary),var(--ilr-mint));pointer-events:none}
.ilr-track__marks{position:absolute;inset:0}
.ilr-mk{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;padding:0;border:2px solid var(--ilr-band);border-radius:50%;cursor:pointer;background:var(--ilr-no)}
.ilr-mk.is-ok{background:var(--ilr-ok)}
.ilr-mk.is-bad{background:var(--ilr-bad)}
.ilr-mk.is-sel{width:16px;height:16px;margin:-8px 0 0 -8px;border-color:var(--ilr-on);z-index:2}
.ilr-speed{display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:10px;background:var(--ilr-glass);border:1px solid var(--ilr-line-d)}
.ilr-speed button{height:28px;padding:0 8px;border:0;border-radius:7px;background:none;cursor:pointer;color:var(--ilr-on2);font:var(--fw-semibold) 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ilr-speed button[aria-pressed="true"]{background:var(--ilr-on);color:var(--ilr-dk)}
.ilr-panel__x{display:none;width:36px;height:36px;flex:none;border:1px solid var(--ilr-line-d);border-radius:10px;place-items:center;background:var(--ilr-glass);color:var(--ilr-on);cursor:pointer}
.ilr-ptab2{margin:12px 14px 0;align-self:flex-start}
.ilr-pbody{flex:1;min-height:0;overflow:auto;padding:14px 18px 22px;overscroll-behavior:contain}
.ilr-pbody[hidden]{display:none}

/* Lời giải của một câu */
.ilr-x__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ilr-x__no{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.ilr-x__no b{font-size:19px;font-weight:var(--fw-extrabold);letter-spacing:-.02em;color:var(--ilr-ink)}
.ilr-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:var(--fw-bold)}
.ilr-pill.is-ok{background:var(--pill-success-bg);color:var(--pill-success-fg)}
.ilr-pill.is-bad{background:var(--pill-warning-bg);color:var(--pill-warning-fg)}
.ilr-pill.is-empty{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.ilr-x__type{font-size:13px;color:var(--ilr-muted)}
.ilr-x__nav{display:flex;gap:6px;flex:none}
.ilr-x__nav button{width:38px;height:38px;border:1px solid var(--ilr-border);border-radius:11px;background:var(--ilr-surface);cursor:pointer;color:var(--ilr-ink);font-size:20px;line-height:1}
.ilr-x__nav button:hover:not(:disabled){border-color:var(--ilr-strong);color:var(--ilr-fg)}
.ilr-x__nav button:disabled{opacity:.35;cursor:default}
.ilr .ilr-x__ask{margin:12px 0 0;padding:10px 12px;border-radius:11px;background:var(--ilr-sunken);font-size:14.5px;line-height:1.6;color:var(--ilr-ink)}
.ilr-x__ans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}
.ilr-x__c{min-width:0;padding:10px 12px;border:1px solid;border-radius:12px}
.ilr-x__c small{display:block;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.ilr-x__c b{display:block;margin-top:2px;font-size:16px;line-height:1.35;font-weight:var(--fw-bold);overflow-wrap:anywhere}
.ilr-x__c em{display:block;margin-top:3px;font-size:12.5px;font-style:normal;color:var(--ilr-muted)}
.ilr-x__c.is-ok{border-color:color-mix(in srgb,var(--ilr-ok) 38%,transparent);background:color-mix(in srgb,var(--ilr-ok) 8%,var(--color-surface))}
.ilr-x__c.is-ok b{color:var(--ilr-ok-ink)}
.ilr-x__c.is-bad{border-color:color-mix(in srgb,var(--ilr-bad) 40%,transparent);background:color-mix(in srgb,var(--ilr-bad) 8%,var(--color-surface))}
.ilr-x__c.is-bad b{color:var(--ilr-bad-ink);text-decoration:line-through;text-decoration-thickness:1.5px}
.ilr-x__c.is-empty{border-style:dashed;border-color:color-mix(in srgb,var(--ilr-no) 60%,transparent)}
.ilr-x__c.is-empty b{color:var(--ilr-muted);font-weight:var(--fw-semibold)}
.ilr-listen{
    display:flex;align-items:center;gap:10px;width:100%;height:46px;margin-top:12px;padding:0 14px;cursor:pointer;
    border:1px solid color-mix(in srgb,var(--color-primary) 40%,var(--color-border));border-radius:12px;
    background:var(--ilr-wash);color:var(--ilr-deep);font:var(--fw-bold) 14.5px/1 var(--font-sans);
}
.ilr-listen:hover{background:color-mix(in srgb,var(--color-primary) 18%,var(--color-surface))}
.ilr-listen__i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.ilr-listen__t{margin-left:auto;font-weight:var(--fw-semibold);color:var(--ilr-fg);font-variant-numeric:tabular-nums}
.ilr-x__sol{margin-top:18px}
.ilr .ilr-x__sol h3{margin:0 0 10px;font-size:15.5px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.ilr .ilr-x__sol h3 small{display:block;margin-top:1px;font-size:12.5px;font-weight:var(--fw-medium);color:var(--ilr-muted)}
.ilr-prose{font-size:14.5px;line-height:1.75;color:var(--ilr-text)}
.ilr-prose b{color:var(--ilr-ink)}
.ilr-prose i{font-style:normal;padding:1px 5px;border-radius:5px;background:var(--ilr-wash);color:var(--ilr-ink);font-weight:var(--fw-semibold)}
.ilr-ai{margin-top:16px;padding:14px 16px;border:1px solid var(--ilr-border);border-radius:14px;background:var(--ilr-surface);font-size:14px;line-height:1.65}
.ilr-ai__s + .ilr-ai__s{margin-top:12px}
.ilr .ilr-ai h4{margin:0 0 4px;font-size:13.5px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.ilr-ai p,.ilr-ai ul{margin:0}
.ilr-ai ul{padding-left:18px}
.ilr-ai li{margin:2px 0}
.ilr-aibtn{
    width:100%;height:46px;margin-top:14px;border:1px dashed color-mix(in srgb,var(--color-primary) 55%,var(--color-border));border-radius:12px;cursor:pointer;
    background:var(--ilr-surface);color:var(--ilr-fg);font:var(--fw-bold) 14.5px/1 var(--font-sans);
}
.ilr-aibtn:hover:not(:disabled){background:var(--ilr-tint)}
.ilr-aibtn:disabled{opacity:.6;cursor:progress}
.ilr .ilr-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--color-warning-soft);color:var(--color-warning-deep);font-size:13.5px}
.ilr .ilr-empty{margin:0;padding:26px 12px;text-align:center;font-size:14px;color:var(--ilr-muted)}

/* Lời giải Linearthinking (khuôn JSON explain_navs) */
.ilr .lnv{font-size:14px;line-height:1.7;color:var(--ilr-text)}
.ilr .lnv p{margin:0}
.ilr .lnv-method{margin:0 0 14px;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--color-accent) 9%,var(--color-surface));color:var(--ilr-text)}
.ilr .lnv-steps{position:relative;padding-left:32px}
.ilr .lnv-steps::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--ilr-ok) 26%,var(--color-border))}
.ilr .lnv-step{position:relative;margin-bottom:14px}
.ilr .lnv-step:last-child{margin-bottom:0}
.ilr .lnv-step__h{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:1px 0;border:0;background:none;cursor:pointer;text-align:left;font:var(--fw-bold) 14.5px/1.4 var(--font-sans);color:var(--ilr-ink)}
.ilr .lnv-step__h:hover{color:var(--ilr-fg)}
.ilr .lnv-step__n{position:absolute;left:-32px;top:-1px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ilr-surface);border:2px solid var(--ilr-ok);color:var(--ilr-ok-ink);font:var(--fw-bold) 12px/1 var(--font-sans)}
.ilr .lnv-step__cv{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ilr-muted);border-bottom:2px solid var(--ilr-muted);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease)}
.ilr .lnv-step__b{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.ilr .lnv-step.is-fold .lnv-step__b{display:none}
.ilr .lnv-step.is-fold .lnv-step__cv{transform:rotate(-45deg)}
.ilr .lnv-step.is-fold .lnv-step__n{border-color:var(--ilr-hair);color:var(--ilr-muted)}
.ilr .lnv-simp__lbl{display:block;margin-bottom:5px;font-size:12.5px;font-weight:var(--fw-bold);color:var(--ilr-muted)}
.ilr .lnv-pills{display:flex;flex-wrap:wrap;gap:8px}
.ilr .lnv-pill{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:100%}
.ilr .lnv-pill__t{padding:2px 11px;border:1.5px solid;border-radius:999px;font-size:13px;line-height:1.5;font-weight:var(--fw-semibold)}
.ilr .lnv-pill__l{padding-left:11px;font-size:12px;line-height:1.4;color:var(--ilr-muted)}
.ilr .lnv-pill--sv .lnv-pill__t{border-color:var(--color-primary);color:var(--ilr-deep)}
.ilr .lnv-pill--v .lnv-pill__t{border-color:var(--ilr-ok);color:var(--ilr-ok-ink)}
.ilr .lnv-pill--np .lnv-pill__t{border-color:var(--color-accent);color:var(--color-accent-deep)}
.ilr .lnv-pill--mod .lnv-pill__t{border-color:var(--ilr-deep);color:var(--ilr-deep)}
.ilr .lnv-pill--pp .lnv-pill__t{border-color:var(--ilr-no);color:var(--ilr-muted)}
.ilr .lnv-mi{padding-left:10px;border-left:3px solid var(--color-primary)}
.ilr .lnv-mi b,.ilr .lnv-predict b,.ilr .lnv-note b{color:var(--ilr-ink)}
.ilr .lnv-predict{padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface))}
.ilr .lnv-kw{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ilr .lnv-kw__lbl{font-size:13px;font-weight:var(--fw-bold);color:var(--ilr-muted)}
.ilr .lnv-kwc{padding:2px 11px;border-radius:999px;background:var(--ilr-wash);color:var(--ilr-deep);font-size:13px;font-weight:var(--fw-semibold)}
.ilr .lnv-quote{margin:0;padding:11px 14px;border-radius:0 12px 12px 0;border-left:3px solid var(--color-primary);background:var(--ilr-sunken);font-size:14.5px;line-height:1.65;color:var(--ilr-ink)}
.ilr .lnv-quote strong{padding:0 4px;border-radius:4px;background:color-mix(in srgb,var(--ilr-ok) 22%,transparent);font-weight:var(--fw-bold)}
.ilr .lnv-quote__m{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.ilr .lnv-spk{font-size:13px;font-weight:var(--fw-bold);color:var(--ilr-fg)}
.ilr .lnv-time{height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--color-primary) 55%,var(--color-border));border-radius:999px;background:var(--ilr-surface);cursor:pointer;color:var(--ilr-fg);font:var(--fw-bold) 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.ilr .lnv-time:hover{background:var(--ilr-strong);border-color:var(--ilr-strong);color:var(--color-on-dark)}
.ilr .lnv-cards{display:grid;gap:8px}
.ilr .lnv-par,.ilr .lnv-opt{padding:10px 12px;border-radius:11px;border:1px solid var(--ilr-border);font-size:13.5px;line-height:1.55}
.ilr .lnv-par{border-style:dashed}
.ilr .lnv-par__a{font-weight:var(--fw-semibold);color:var(--ilr-ok-ink)}
.ilr .lnv-par__b{font-weight:var(--fw-semibold);color:var(--ilr-deep)}
.ilr .lnv-par__eq{margin:0 8px;font-weight:var(--fw-bold);color:var(--ilr-muted)}
.ilr .lnv-par__note,.ilr .lnv-opt__why{margin-top:4px!important;font-size:13px;color:var(--ilr-muted)}
.ilr .lnv-opt.is-ok{border-color:color-mix(in srgb,var(--ilr-ok) 40%,transparent);background:color-mix(in srgb,var(--ilr-ok) 8%,var(--color-surface))}
.ilr .lnv-trap{padding:10px 12px;border-radius:0 11px 11px 0;border-left:3px solid var(--ilr-bad);background:color-mix(in srgb,var(--ilr-bad) 9%,var(--color-surface))}

/* Transcript */
.ilr .ilr-tr p{margin:0;padding:7px 10px;border-radius:9px;font-size:14.5px;line-height:1.7;color:var(--ilr-text);cursor:pointer}
.ilr .ilr-tr p:hover{background:var(--ilr-tint)}
.ilr .ilr-tr p.is-now{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--ilr-ink)}
.ilr .ilr-tr p.is-ev,.ilr .ilr-tr mark{background:color-mix(in srgb,var(--ilr-ok) 20%,transparent);color:var(--ilr-ink)}
.ilr .ilr-tr mark{padding:1px 3px;border-radius:4px}
.ilr .ilr-tr .ilr-tr__sec{padding:0 10px 6px;font-size:13px;font-weight:var(--fw-bold);color:var(--ilr-muted);cursor:default}
.ilr .ilr-tr .ilr-tr__sec:hover{background:none}
.ilr-spk{display:block;font-size:13px;font-weight:var(--fw-bold);color:var(--ilr-fg)}
.ilr-scrim{display:none}

/* ── Màn hẹp ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
    .ilr-work{grid-template-columns:minmax(0,1fr) 380px}
    .ilr .ilr-title{font-size:34px}
}
@media (max-width:1023px){
    .ilr-band{padding:calc(var(--nav-h,56px) + 16px) 18px 92px}
    .ilr-head{flex-direction:column;align-items:stretch;gap:18px}
    .ilr-score{align-self:stretch}
    .ilr-body{margin-top:-64px;padding:0 14px 40px}
    .ilr-work{grid-template-columns:minmax(0,1fr)}
    /* Cột lời giải thành tấm trượt từ đáy khi chạm một câu */
    .ilr-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:960;transform:translateY(105%);transition:transform var(--dur-base) var(--ease);pointer-events:none}
    .ilr-side.is-open{transform:none;pointer-events:auto}
    .ilr-panel{max-height:84dvh;border:0;border-radius:22px 22px 0 0;box-shadow:0 -24px 44px -18px color-mix(in srgb,black 45%,transparent)}
    .ilr-panel__grip{display:block;position:absolute;z-index:3;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--ilr-line-d)}
    .ilr-audio{padding-top:18px}
    .ilr-panel__x{display:grid}
    .ilr-scrim{display:block;position:fixed;inset:0;z-index:950;background:color-mix(in srgb,var(--ilr-night) 45%,transparent)}
    .ilr-scrim[hidden]{display:none}
}
@media (max-width:640px){
    .ilr .ilr-title{font-size:28px}
    .ilr-chip{height:28px;padding:0 10px;font-size:12.5px}
    .ilr-acts{margin-top:16px}
    .ilr-btn{flex:1 1 auto;height:48px}
    .ilr-score{gap:16px;padding:14px 16px}
    .ilr-ring{width:92px;height:92px;padding-top:27px}
    .ilr-ring b{font-size:30px}
    .ilr-score__band b{font-size:30px}
    .ilr-figs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .ilr-figs > div:nth-child(3){border-left:0}
    .ilr-figs > div:nth-child(n+3){border-top:1px solid var(--ilr-line-d)}
    .ilr-figs dd{font-size:23px}
    .ilr-types,.ilr-main{padding:16px 14px 20px;border-radius:18px}
    .ilr-types__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .ilr-type{padding:10px 12px}
    .ilr-type__n{font-size:13.5px;white-space:normal;line-height:1.3}
    .ilr-main__head .ilr-seg{width:100%}
    .ilr-seg button{flex:1}
    .ilr-ptabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .ilr-row{grid-template-columns:34px minmax(0,1fr);gap:10px}
    .ilr-row__t{display:none}
    .ilr-speed button{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
    .ilr *{transition:none !important}
}

/* ═══ Bài mẫu /ielts/listening/bai-mau (Đợt 1, 27/09/2026) — cùng khung, không có câu trả lời của học viên ═══
   Mọi câu là "đáp án" (.is-key): chip xanh lục chỉ in đáp án đúng; không lọc Sai/Bỏ trống; không nút nhờ AI. */
.ilr .ilr-lead{margin:14px 0 0;max-width:64ch;font-size:15.5px;line-height:1.6;color:var(--ilr-on2)}
.ilr .ilr-a.is-key{border-color:color-mix(in srgb,var(--ilr-ok) 45%,transparent);background:color-mix(in srgb,var(--ilr-ok) 12%,var(--color-surface));color:var(--ilr-ok-ink)}
.ilr .ilr-a.is-key .ilr-a__k{background:none;border-left:0}
.ilr .ilr-a.is-key .ilr-a__n + .ilr-a__k{border-left:1px solid color-mix(in srgb,var(--ilr-ok) 35%,transparent)}
.ilr-ptab__dots i.is-key{background:color-mix(in srgb,var(--ilr-ok) 55%,var(--color-surface))}
.ilr .ilpp .ilr-no.is-key{background:var(--ilr-ok);color:var(--color-on-dark)}
.ilr-row.is-key .ilr-row__n{background:var(--ilr-ok);color:var(--color-on-dark)}
.ilr-mk.is-key{background:var(--ilr-ok)}
.ilr-type.is-count{min-height:0}
.ilr-type.is-count .ilr-type__v{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.ilr-x__ans.is-one{grid-template-columns:minmax(0,1fr)}
.ilr-filters:empty{display:none}