/* ═══════════════════════════════════════════════════════════════════════════════════════
   wr-result.css — KẾT QUẢ CHẤM IELTS Writing, App học v3 (Đợt 4, 27/09/2026).
   Nạp SAU il-result.css (dải teal, thẻ, chip, vòng điểm, dải số liệu) và sp-result.css (hai cột, tab lời chấm, thẻ tiêu
   chí, danh sách, chip — dùng chung với Speaking). Tệp này thêm phần riêng của Writing: bài viết tô chỗ sai, đề bài ở cột
   phải, thẻ lỗi, các bản viết lại, tấm "Cách sửa" trượt từ đáy trên điện thoại.
   Màu: lỗi cần sửa = hổ phách (--ilr-bad), gợi ý nâng cấp = cyan (--color-accent), chữ đã sửa = xanh lục (--ilr-ok).
   Mọi màu qua token.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Dải đầu ─────────────────────────────────────────────────────────────────────── */
.wrr .wrr-title{font-size:28px;line-height:1.22;letter-spacing:-.02em;max-width:36ch}
.wrr-score .ilr-ring{align-items:center;padding-top:0}
.wrr-score .ilr-ring b{font-size:34px}
.wrr .wrr-score__note{margin:6px 0 0;max-width:26ch;font-size:12.5px;line-height:1.45;color:var(--ilr-on3)}
.wrr-figs dt{line-height:1.3}

/* ── Cột phải: bài của bạn · đề bài ─────────────────────────────────────────────────── */
.wrr-side__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 0}
.wrr .wrr-ptab{margin:0}
.wrr-ptab button{padding:0 14px}
.wrr-side__m{font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.wrr-side__b{position:relative}
.wrr-side__b[hidden]{display:none}

.wrr-essay{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;line-height:1.9;color:var(--ilr-ink)}
.wrr mark.wrr-m{
    padding:0 1px 1px;border-radius:3px;background:transparent;color:inherit;cursor:pointer;
    border-bottom:2px solid color-mix(in srgb,var(--ilr-bad) 85%,transparent);
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    transition:background var(--dur-fast) var(--ease);
}
.wrr mark.wrr-m.is-critical{background:color-mix(in srgb,var(--ilr-bad) 16%,transparent);border-bottom-color:var(--ilr-bad-ink)}
.wrr mark.wrr-m.is-minor{border-bottom-style:dashed}
.wrr mark.wrr-m.is-tip{border-bottom:2px dotted var(--color-accent)}
.wrr mark.wrr-m:hover,.wrr mark.wrr-m:focus-visible{background:color-mix(in srgb,var(--ilr-bad) 22%,transparent);outline:0}
.wrr mark.wrr-m.is-tip:hover,.wrr mark.wrr-m.is-tip:focus-visible{background:color-mix(in srgb,var(--color-accent) 16%,transparent)}
.wrr mark.wrr-m.is-on{background:color-mix(in srgb,var(--ilr-bad) 32%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ilr-bad) 45%,transparent)}
.wrr mark.wrr-m.is-tip.is-on{background:color-mix(in srgb,var(--color-accent) 22%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 45%,transparent)}
.wrr mark.wrr-m.is-quiet{border-bottom-color:transparent;background:transparent;box-shadow:none;cursor:text}
.wrr .wrr-legend{flex-direction:column;gap:6px}
.wrr .wrr-legend mark.wrr-m{cursor:default}

.wrr-prompt{font-size:15px;line-height:1.75;color:var(--ilr-ink)}
.wrr .wrr-prompt p{margin:0 0 10px}
.wrr .wrr-prompt p:last-child{margin-bottom:0}
.wrr-prompt strong{font-weight:var(--fw-bold)}
.wrr-prompt .md-table-wrap{margin:12px 0;overflow-x:auto;border:1px solid var(--ilr-border);border-radius:12px}
.wrr-prompt .md-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wrr-prompt .md-table :is(th,td){padding:8px 10px;text-align:left;border-bottom:1px solid var(--ilr-hair);white-space:nowrap}
.wrr-prompt .md-table th{background:var(--ilr-sunken);font-weight:var(--fw-bold);color:var(--ilr-ink)}
.wrr-prompt .md-table tbody tr:last-child td{border-bottom:0}
.wrr-prompt__img{display:block;margin-top:12px;border:1px solid var(--ilr-border);border-radius:12px;overflow:hidden;background:var(--color-surface)}
.wrr-prompt__img img{display:block;width:100%;height:auto}

/* ── Tổng quan ──────────────────────────────────────────────────────────────────── */
.wrr-ov__seg + .wrr-ov__seg{margin-top:12px;padding-top:12px;border-top:1px dashed var(--ilr-border)}
.wrr-ov__lang{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-bottom:6px;border-radius:999px;background:var(--ilr-surface);font-size:12px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.wrr .wrr-ov p{margin:0;font-size:15px;line-height:1.75;color:var(--ilr-text)}
.wrr mark.wrr-hl{padding:1px 5px;border-radius:5px;font-weight:var(--fw-semibold);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wrr mark.wrr-hl.is-g{background:color-mix(in srgb,var(--ilr-ok) 14%,var(--color-surface));color:var(--ilr-ok-ink)}
.wrr mark.wrr-hl.is-w{background:color-mix(in srgb,var(--ilr-bad) 14%,var(--color-surface));color:var(--ilr-bad-ink)}
.wrr mark.wrr-hl.is-a{background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface));color:var(--color-accent-deep)}

.wrr .wrr-dx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.wrr-dx > div{padding:12px 14px;border:1px solid var(--ilr-border);border-radius:14px}
.wrr-dx > div.is-fix{border-color:color-mix(in srgb,var(--color-primary) 30%,var(--ilr-border));background:var(--ilr-tint)}
.wrr-dx dt{font-size:12.5px;font-weight:var(--fw-bold);color:var(--ilr-muted)}
.wrr .wrr-dx dd{margin:5px 0 0;font-size:14.5px;line-height:1.6;color:var(--ilr-ink)}
.wrr-dx ol{margin:0;padding-left:18px}
.wrr-dx li + li{margin-top:3px}

.wrr-check{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wrr-check label{display:flex;align-items:flex-start;gap:10px;min-height:40px;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--ilr-text)}
.wrr-check label:hover{background:var(--ilr-tint)}
.wrr-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--color-primary)}
.wrr-check input:checked + span{color:var(--ilr-muted);text-decoration:line-through;text-decoration-color:var(--ilr-border)}

.wrr .wrr-nums small{line-height:1.4}
.wrr .wrr-nums dd small{display:inline;margin:0 0 0 2px;font-size:13px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.wrr .wrr-nums .is-bad > small{color:var(--ilr-bad-ink)}

/* ── Lỗi và cách sửa ────────────────────────────────────────────────────────────── */
.wrr .wrr-filters{margin:0 0 14px}
.wrr-minor{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px;margin-left:auto;cursor:pointer;font-size:14px;font-weight:var(--fw-semibold);color:var(--ilr-text)}
.wrr-minor input{width:18px;height:18px;margin:0;accent-color:var(--color-primary)}
.wrr-errs{display:grid;gap:10px}
.wrr-err{padding:14px 16px;border:1px solid var(--ilr-border);border-radius:14px;background:var(--ilr-surface);scroll-margin:calc(var(--nav-h,64px) + 20px);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.wrr-err[hidden]{display:none}
.wrr-err:focus{outline:0}
.wrr-err.is-on{border-color:var(--ilr-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.wrr-err > header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wrr-err__cat{min-width:0;font-size:12.5px;font-weight:var(--fw-bold);line-height:1.5;color:var(--ilr-muted)}
.wrr-sev{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:var(--fw-bold);white-space:nowrap}
.wrr-sev.is-critical{background:var(--color-warning-deep);color:var(--color-on-dark)}
.wrr-sev.is-medium{background:var(--pill-warning-bg);color:var(--pill-warning-fg)}
.wrr-sev.is-minor{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.wrr-sev.is-tip{background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface));color:var(--color-accent-deep)}
.wrr .wrr-err__was{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--ilr-bad-ink);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--ilr-bad) 70%,transparent)}
.wrr .wrr-err__was.is-keep{color:var(--ilr-ink);text-decoration:none}
.wrr .wrr-err .spr-fix{font-size:15px;line-height:1.6}
.wrr .wrr-err__up{margin:6px 0 0;font-size:15px;line-height:1.6;font-weight:var(--fw-semibold);color:var(--ilr-deep)}
.wrr .wrr-err__up span,.wrr .wrr-err .spr-fix span{margin-right:4px;font-size:13px;font-weight:var(--fw-medium);color:var(--ilr-muted)}
.wrr .wrr-err__why{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--ilr-text)}
.wrr .wrr-err__tip{margin:8px 0 0;padding:8px 11px;border-radius:10px;background:var(--ilr-sunken);font-size:13.5px;line-height:1.6;color:var(--ilr-text)}
.wrr .wrr-err__tip b{margin-right:4px;color:var(--ilr-ink)}
.wrr-err__loc{display:inline-flex;align-items:center;height:32px;margin-top:6px;padding:0;border:0;background:none;cursor:pointer;font:var(--fw-semibold) 13.5px/1 var(--font-sans);color:var(--ilr-fg)}
.wrr-err__loc:hover{text-decoration:underline}
.wrr .wrr-errs__none{padding:18px 12px}

/* ── Theo đoạn ──────────────────────────────────────────────────────────────────── */
.wrr-para{padding:16px 18px;border:1px solid var(--ilr-border);border-radius:16px}
.wrr-para + .wrr-para{margin-top:12px}
.wrr-para > header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wrr-para > header b{font-size:16px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.wrr-para > header span{font-size:12.5px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.wrr .wrr-para__txt{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--ilr-sunken);font-size:14px;line-height:1.7;color:var(--ilr-text)}
.wrr .wrr-para__fb{margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--ilr-ink)}
.wrr-para__rev{margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ilr-ok) 8%,var(--color-surface));border:1px solid color-mix(in srgb,var(--ilr-ok) 26%,transparent)}
.wrr .wrr-para__rev h4{margin:0 0 6px;font-size:13.5px;font-weight:var(--fw-bold);color:var(--ilr-ok-ink)}
.wrr .wrr-para__rev p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ilr-ink)}

/* ── 4 tiêu chí: phân tích sâu ──────────────────────────────────────────────────── */
.wrr-deep{margin-top:14px;padding-top:14px;border-top:1px solid var(--ilr-hair)}
.wrr-deep > .spr-nums + .spr-h4{margin-top:14px}
.wrr .wrr-deep .spr-h4:first-child{margin-top:0}

/* ── Bài viết lại ───────────────────────────────────────────────────────────────── */
.wrr .wrr-views{display:flex;flex-wrap:wrap;max-width:100%}
.wrr .wrr-views button{flex:none;padding:0 14px;white-space:nowrap}
.wrr-view{margin-top:14px}
.wrr-view[hidden]{display:none}
.wrr-view__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.wrr .wrr-view__h p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ilr-muted)}
.wrr-view__h .lv-btn{flex:none}
.wrr-view__box{padding:16px 18px;border:1px solid var(--ilr-border);border-radius:14px;background:var(--ilr-surface)}
.wrr .wrr-fix{padding:0 2px;border-radius:4px;background:color-mix(in srgb,var(--ilr-ok) 16%,transparent);color:var(--ilr-ok-ink);font-weight:var(--fw-semibold);cursor:help}
.wrr .wrr-fix:hover,.wrr .wrr-fix:focus-visible{background:var(--ilr-ok);color:var(--color-on-dark);outline:0}
.wrr-tip{position:fixed;z-index:9999;display:none;max-width:320px;padding:8px 12px;border-radius:10px;background:var(--color-snackbar);color:var(--color-on-dark);font:var(--fw-medium) 13px/1.5 var(--font-sans);white-space:pre-line;box-shadow:var(--shadow-lg);pointer-events:none}
.wrr-changes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wrr-changes li{padding:10px 12px;border:1px solid var(--ilr-border);border-radius:12px}
.wrr-changes b{display:block;font-size:14px;line-height:1.55;color:var(--ilr-ink)}
.wrr-changes span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--ilr-muted)}

/* ── Ôn lại ─────────────────────────────────────────────────────────────────────── */
.wrr-learn{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14.5px;line-height:1.6}
.wrr-learn li span{display:block}
.wrr .wrr-again{margin-top:16px}

/* ── Phân tích đề (tải khi bấm) ─────────────────────────────────────────────────── */
.wrr-wa__load{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 12px;text-align:center}
.wrr-wa__load[hidden]{display:none}
.wrr .wrr-wa__load p{margin:0;font-size:14.5px;font-weight:var(--fw-semibold);color:var(--ilr-ink)}
.wrr-wa__load small{font-size:13px;color:var(--ilr-muted)}
.wrr-spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--ilr-wash);border-top-color:var(--color-primary);animation:wrrSpin .8s linear infinite}
@keyframes wrrSpin{to{transform:rotate(360deg)}}

/* ── Chưa có kết quả ────────────────────────────────────────────────────────────── */
.wrr .wrr-wait__eta{margin:10px 0 0;font-size:14px;font-weight:var(--fw-semibold);color:var(--ilr-deep)}
.wrr .wrr-wait__why{margin:10px 0 0;font-size:13px;color:var(--ilr-muted)}
.wrr-plain{margin-top:18px;padding:18px 22px 22px}
.wrr .wrr-plain h2{margin:0 0 12px;font-size:17px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}

/* ── Tấm "Cách sửa" trượt từ đáy (điện thoại / màn hẹp) ─────────────────────────────── */
.wrr-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:960;display:flex;flex-direction:column;max-height:78dvh;
    background:var(--ilr-surface);border-radius:22px 22px 0 0;box-shadow:0 -24px 44px -18px color-mix(in srgb,black 45%,transparent);
    padding-bottom:env(safe-area-inset-bottom,0px);
}
.wrr-sheet[hidden]{display:none}
.wrr-sheet__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--ilr-hair)}
.wrr-sheet__h b{font-size:16px;font-weight:var(--fw-extrabold);color:var(--ilr-ink)}
.wrr-sheet__x{width:44px;height:44px;flex:none;border:0;border-radius:12px;display:grid;place-items:center;background:var(--ilr-sunken);color:var(--ilr-text);cursor:pointer}
.wrr-sheet__b{flex:1;min-height:0;overflow:auto;padding:12px 14px 18px;overscroll-behavior:contain}
.wrr-sheet__b .wrr-err{border:0;padding:4px 2px}
.wrr .ilr-scrim{position:fixed;inset:0;z-index:950;background:color-mix(in srgb,var(--ilr-night) 45%,transparent)}
.wrr .ilr-scrim[hidden]{display:none}

/* ── Bài mẫu /ielts/writing/bai-mau (.wrs) — cùng khung trang kết quả ─────────────────── */
.wrs .wrs-essay p{margin:0 0 12px}
.wrs .wrs-essay p:last-child{margin-bottom:0}
.wrs mark.wrs-link{padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--color-primary) 16%,transparent);color:inherit}
.wrs mark.wrs-voc{padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--color-accent) 18%,transparent);color:inherit;font-weight:var(--fw-semibold);cursor:help}
.wrs .wrr-para__txt q{font-style:italic}
.wrs-voc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.wrs-voc-list > div{padding:10px 12px;border:1px solid var(--ilr-border);border-radius:12px}
.wrs-voc-list b{display:block;font-size:14.5px;color:var(--ilr-deep)}
.wrs-voc-list span{display:block;margin-top:2px;font-size:13px;color:var(--ilr-muted)}
.wrs-outline{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wrs-outline li{padding:10px 12px;border-radius:12px;background:var(--ilr-sunken)}
.wrs-outline span{display:block;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--ilr-muted)}
.wrs-outline b{display:block;font-size:14.5px;color:var(--ilr-ink)}
.wrs .wrs-outline p{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--ilr-text)}
@media print{
    .wrs .spr-tabs{display:none!important}
    .wrs .spr-pane[hidden]{display:block!important}
}

/* ── Màn hẹp ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
    .wrr .wrr-title{font-size:26px}
}
@media (max-width:1023px){
    .wrr-work .spr-talk__b{max-height:min(460px,62vh)}
}
@media (max-width:640px){
    .wrr .wrr-title{font-size:22px}
    .wrr .wrr-dx{grid-template-columns:minmax(0,1fr)}
    .wrr-side__h{padding:10px 10px 0}
    .wrr-ptab button{padding:0 12px}
    .wrr-err,.wrr-para{padding:14px}
    .wrr-view__h{flex-direction:column}
    .wrr-view__box{padding:14px}
    .wrr-minor{margin-left:0}
    .wrr-plain{padding:16px 14px 18px}
}
@media (prefers-reduced-motion:reduce){
    .wrr-spin{animation-duration:3s}
}
@media print{
    .wrr .ilr-acts,.wrr .spr-tabs,.wrr .ilr-back,.wrr .wrr-ptab,.wrr .wrr-views,.wrr .wrr-copy,.wrr .wrr-err__loc{display:none!important}
    .wrr .spr-pane[hidden],.wrr .wrr-view[hidden],.wrr .wrr-side__b[hidden]{display:block!important}
    .wrr .spr-work{display:block}
    .wrr .spr-talk{position:static;max-height:none}
    .wrr .spr-talk__b{max-height:none;overflow:visible}
}