/* ═══════════════════════════════════════════════════════════════════════════════════════
   rd-result.css — KẾT QUẢ + CHỮA BÀI và BÀI MẪU IELTS Reading, App học v3 (Đợt 2, 27/09/2026).
   Nạp SAU il-result.css (khung chung với Listening: dải teal, thẻ, "Theo dạng câu", cột lời giải, chip đáp án .ilr-a).
   Tệp này chỉ thêm phần riêng của Reading: tờ đề dựng ở máy chủ, danh sách phương án, bài đọc có tô câu bằng chứng.
   Mọi màu qua token.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tờ đề ───────────────────────────────────────────────────────────────────────── */
.rdr-paper{margin-top:18px}
.rdr-psg[hidden]{display:none}
.rdr .rdr-psg__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px;font-size:17px;line-height:1.35;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.rdr-psg__t span{font-size:13px;font-weight:var(--fw-bold);color:var(--ilr-fg)}
.rdr-grp{margin-top:18px;padding-top:16px;border-top:1px solid var(--ilr-hair)}
.rdr-grp__h b{display:block;font-size:15px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.rdr .rdr-grp__h p{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ilr-muted)}
.rdr-grp__gl{color:var(--ilr-text);font-weight:var(--fw-semibold)}

/* Danh sách phương án (List of Headings / Options / Endings) */
.rdr-bank{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--ilr-sunken)}
.rdr .rdr-bank__t{margin:0 0 6px;font-size:13.5px;font-weight:var(--fw-bold);color:var(--ilr-muted)}
.rdr-bank__l{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.rdr-bank__l li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;font-size:14.5px;line-height:1.5;color:var(--ilr-text)}
.rdr-bank__l b{font-weight:var(--fw-bold);color:var(--ilr-ink)}

/* Một câu */
.rdr-q{
    display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;margin-top:6px;padding:10px 12px;border-radius:12px;cursor:pointer;
    transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.rdr-grp__h + .rdr-q,.rdr-bank + .rdr-q{margin-top:10px}
.rdr-q:hover{background:var(--ilr-tint)}
.rdr-q.is-sel{background:var(--ilr-wash);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 35%,transparent)}
.rdr-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:var(--fw-extrabold) 14px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.rdr-n.is-ok,.rdr-n.is-key{background:var(--ilr-ok);color:var(--color-on-dark)}
.rdr-n.is-bad{background:var(--ilr-bad);color:var(--color-on-dark)}
.rdr-n.is-empty{background:color-mix(in srgb,var(--ilr-no) 30%,var(--color-surface));color:var(--ilr-muted)}
.rdr-q__b{min-width:0;padding-top:3px}
.rdr .rdr-q__t{margin:0;font-size:15.5px;line-height:1.7;color:var(--ilr-ink)}
.rdr .rdr-q__none{margin:8px 0 0;font-size:13.5px;color:var(--ilr-muted)}
.rdr-gap{color:var(--ilr-muted);letter-spacing:.05em}
.rdr .ilr-a{font-size:14.5px}

/* Trắc nghiệm: phương án đúng xanh lục, phương án học viên chọn sai màu hổ phách */
.rdr-opts{display:grid;gap:6px;margin-top:10px}
.rdr-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--ilr-border);border-radius:11px;background:var(--color-surface);font-size:14.5px;line-height:1.5;color:var(--ilr-text)}
.rdr-opt b{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--ilr-sunken);color:var(--ilr-ink);font-size:13px}
.rdr-opt span{min-width:0;flex:1}
.rdr-opt::after{margin-left:auto;padding-left:10px;font-size:12.5px;font-weight:var(--fw-bold);white-space:nowrap}
.rdr-opt.is-key{border-color:color-mix(in srgb,var(--ilr-ok) 50%,transparent);background:color-mix(in srgb,var(--ilr-ok) 9%,var(--color-surface));color:var(--ilr-ink)}
.rdr-opt.is-key b{background:var(--ilr-ok);color:var(--color-on-dark)}
.rdr-opt.is-key::after{content:var(--ilr-t-key,"");color:var(--ilr-ok-ink)}
.rdr-opt.is-hit::after{content:var(--ilr-t-hit,"")}
.rdr-opt.is-miss{border-color:color-mix(in srgb,var(--ilr-bad) 50%,transparent);background:color-mix(in srgb,var(--ilr-bad) 9%,var(--color-surface))}
.rdr-opt.is-miss b{background:var(--ilr-bad);color:var(--color-on-dark)}
.rdr-opt.is-miss::after{content:var(--ilr-t-pick,"");color:var(--ilr-bad-ink)}
.rdr--sample .rdr-opt.is-key::after{content:none}

/* Ghi chú / tóm tắt liền mạch: đáp án nằm đúng chỗ ô trống */
.rdr-flow{margin-top:12px;padding:14px 16px;border-radius:14px;background:var(--ilr-sunken)}
.rdr .rdr-flow p{margin:0}
.rdr .rdr-flow__h{margin-top:10px!important;font-size:15px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.rdr .rdr-flow__h:first-child{margin-top:0!important}
.rdr .rdr-flow__sh{margin-top:8px!important;font-size:14.5px;font-weight:var(--fw-bold);color:var(--ilr-text)}
.rdr .rdr-flow__x{margin-top:6px!important;font-size:15px;line-height:1.7;color:var(--ilr-text)}
.rdr .rdr-flow__l{margin-top:6px!important;font-size:15.5px;line-height:2.2;color:var(--ilr-ink)}
.rdr .rdr-flow .ilr-a.is-sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 45%,transparent)}
.rdr .rdr-q.is-dim,.rdr .rdr-flow .ilr-a.is-dim{opacity:.32}

/* ── Cột phải: đầu tấm · lời giải · bài đọc ─────────────────────────────────────── */
.rdr-phead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 0}
.rdr .rdr-phead .ilr-ptab2{margin:0}
.rdr-x{display:none;width:38px;height:38px;flex:none;place-items:center;border:1px solid var(--ilr-border);border-radius:11px;background:var(--ilr-surface);color:var(--ilr-ink);cursor:pointer}
.rdr .ilr-x__c b{overflow-wrap:anywhere}
.rdr-optl{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;font-weight:var(--fw-medium);color:var(--ilr-text)}
.rdr .rdr-goto{margin-top:10px}
.rdr .rdr-goto span:first-child{min-width:0;text-align:left}
.rdr .rdr-meta{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--ilr-muted)}
.rdr .rdr-ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7}
.rdr .lnv-pill--vi .lnv-pill__t{border-style:dashed;border-color:var(--ilr-no);color:var(--ilr-text)}
.rdr .lnv-par p{margin:0}
.rdr .rdr-plain{display:grid;gap:10px}
.rdr .rdr-plain .rdr-goto{margin-top:0}

.rdr-read{padding-top:10px}
.rdr-read__p[hidden]{display:none}
.rdr .rdr-read__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 10px;font-size:16px;line-height:1.35;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.rdr-read__t span{font-size:12.5px;font-weight:var(--fw-bold);color:var(--ilr-fg)}
.rdr-para{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:8px 6px;border-radius:10px;transition:background var(--dur-fast) var(--ease)}
.rdr-para:not(:has(.rdr-para__l)){grid-template-columns:minmax(0,1fr)}
.rdr .rdr-para p{margin:0;font-size:15px;line-height:1.75;color:var(--ilr-text)}
.rdr-para__l{width:24px;height:24px;margin-top:2px;border-radius:7px;display:grid;place-items:center;background:var(--ilr-wash);color:var(--ilr-deep);font:var(--fw-bold) 12.5px/1 var(--font-sans)}
.rdr-para.is-spot{background:color-mix(in srgb,var(--ilr-ok) 9%,var(--color-surface));box-shadow:inset 3px 0 0 var(--ilr-ok)}
.rdr-para.is-spot .rdr-para__l{background:var(--ilr-ok);color:var(--color-on-dark)}
/* Câu bằng chứng của các câu khác: nền nhạt, chữ thường. Câu đang chọn: nền đậm + cụm chốt in đậm gạch dưới. */
.rdr mark.rdr-ev{padding:1px 2px;border-radius:4px;background:color-mix(in srgb,var(--ilr-ok) 11%,transparent);color:inherit;font-weight:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.rdr mark.rdr-ev strong{font-weight:inherit}
.rdr mark.rdr-ev.is-spot{background:color-mix(in srgb,var(--ilr-ok) 30%,transparent);color:var(--ilr-ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ilr-ok) 45%,transparent)}
.rdr mark.rdr-ev.is-spot strong{font-weight:var(--fw-bold)}
.rdr mark.rdr-ev.is-spot strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--ilr-ok)}

/* ── Đề nên làm tiếp ───────────────────────────────────────────────────────────── */
.rdr-next{margin-top:18px;padding:18px 22px 20px}
.rdr-next__l{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:14px}
.rdr-next__i{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--ilr-border);border-radius:14px;background:var(--ilr-surface);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.rdr-next__i:hover{border-color:color-mix(in srgb,var(--color-primary) 50%,var(--color-border));background:var(--ilr-tint)}
.rdr-next__t{font-size:15px;line-height:1.4;font-weight:var(--fw-bold);color:var(--ilr-ink)}
.rdr-next__m{font-size:13px;color:var(--ilr-muted)}
.rdr-next__go{display:inline-flex;align-items:center;gap:2px;margin-top:auto;padding-top:4px;font-size:14px;font-weight:var(--fw-bold);color:var(--ilr-fg)}

/* ── Màn hẹp ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1023px){
    .rdr .ilr-panel__grip{background:color-mix(in srgb,var(--ilr-muted) 45%,transparent)}
    .rdr-phead{padding-top:20px}
    .rdr-x{display:grid}
}
@media (max-width:640px){
    /* Đề đủ có 3 passage: ba ô một hàng (khuôn Listening xếp 2 cột cho 4 Part) */
    .rdr .ilr-ptabs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,1fr)}
    .rdr .ilr-ptab{padding:8px 9px 9px}
    .rdr .ilr-ptab__t{font-size:13.5px}
    .rdr-q{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:9px 8px}
    .rdr-n{width:28px;height:28px;font-size:13px}
    .rdr .rdr-q__t{font-size:15px}
    .rdr-opt{padding:8px 10px}
    .rdr-opt::after{display:none}
    .rdr-flow{padding:12px}
    .rdr-bank{padding:10px 12px}
    .rdr-next{padding:16px 14px 18px;border-radius:18px}
    .rdr-next__l{grid-template-columns:minmax(0,1fr)}
    .rdr [data-print]{display:none}   /* in từ điện thoại hiếm, nút chiếm trọn một hàng của dải */
}

/* ── In đáp án (bài mẫu): chỉ tên đề + danh sách câu ─────────────────────────────── */
@media print{
    .rdr .ilr-types,.rdr .ilr-side,.rdr .ilr-seg,.rdr .ilr-filters,.rdr .ilr-ptabs,.rdr .rdr-paper,.rdr .ilr-acts,.rdr .ilr-back,.rdr .rdr-next,.rdr-print-hide{display:none!important}
    .rdr .ilr-list{display:flex!important}
    .rdr .ilr-list [hidden]{display:none!important}
    .rdr .ilr-work{display:block}
    .rdr .ilr-band{padding:0 0 12px;background:none;color:var(--ilr-ink)}
    .rdr .ilr-band::before{display:none}
    .rdr .ilr-title,.rdr .ilr-lead{color:var(--ilr-ink)!important}
    .rdr .ilr-chip{color:var(--ilr-ink);border-color:var(--ilr-border);background:none}
    .rdr .ilr-body{margin:0;padding:0}
    .rdr .ilr-card{box-shadow:none;border:0}
    .rdr .ilr-row{break-inside:avoid}
}