/**
 * shadow-score.css — THẺ KẾT QUẢ chấm phát âm (namespace .dp-*).
 * Dùng bởi: /shadowing/{id} (video.php). Trang Luyện hội thoại có bản inline riêng.
 *
 * ══ BA LUẬT KHÔNG ĐƯỢC PHÁ ══
 * 1. TỐI ĐA HAI LỚP HỘP. Thẻ này đã nằm trong .sh-card#segFocusCard (có nền + viền +
 *    đệm). Nên bản thân nó KHÔNG vẽ nền/viền/bo góc nữa — chỉ chia khối bằng khoảng
 *    trắng và một đường kẻ mảnh. Bản trước lồng 4 lớp (card → dp-res → dp-box → dp-w),
 *    đó là lý do chính khiến nó trông nghiệp dư.
 * 2. ĐIỂM THẤP KHÔNG TÔ VÀNG CẢ THẺ. Chỉ vòng điểm và đúng phần sai đổi màu.
 * 3. Chữ trên nền `-soft` PHẢI dùng `-deep` — chỉ `-deep` mới lật sáng ở chế độ tối.
 *    Không dùng --color-mute2 làm màu chữ (tương phản fail ở cả hai chế độ).
 */

/* ── Khung ngoài: KHÔNG nền, KHÔNG viền ── */
.dp-res{display:none;margin-top:var(--space-5);padding-top:var(--space-5);
    border-top:1px solid var(--color-line)}
.dp-res.is-show{display:block;animation:dpIn .22s var(--ease)}
@keyframes dpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dp-res.is-show{animation:none}}

/* ── Hàng 1: vòng điểm + nhận xét ── */
.dp-sc{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.dp-sc__ring{position:relative;width:104px;height:104px;flex:0 0 auto}
.dp-sc__ring svg{transform:rotate(-90deg)}
.dp-sc__tr{stroke:var(--color-line)}
.dp-sc__ar{stroke:var(--color-secondary);transition:stroke-dashoffset .9s var(--ease)}
.dp-sc.mid .dp-sc__ar{stroke:var(--color-warning)}
.dp-sc__n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;line-height:1}
.dp-sc__n b{font-size:30px;font-weight:var(--fw-extrabold);color:var(--color-ink)}
.dp-sc__n span{font-size:10.5px;font-weight:var(--fw-bold);color:var(--color-muted);margin-top:2px}
.dp-sc__side{flex:1;min-width:220px}
.dp-sc__vd{font-size:var(--fs-h4);font-weight:var(--fw-extrabold);color:var(--color-ink);
    line-height:1.35;margin-bottom:4px}
.dp-sc__sub{font-size:var(--fs-small);color:var(--color-muted);line-height:1.6}
/* Chip "hơn lần trước" — dùng cặp soft/deep để lật đúng ở chế độ tối */
.dp-best{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 10px;
    border-radius:var(--radius-pill);font-size:var(--fs-micro);font-weight:var(--fw-bold);
    background:var(--color-secondary-soft);color:var(--color-secondary-deep)}

/* ── Hàng 2: ba chỉ số, lưới thẳng cột, thanh mảnh ── */
.dp-subs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);
    margin-top:var(--space-5)}
.dp-subs__i{min-width:0}
.dp-subs__i span{display:block;font-size:10.5px;font-weight:var(--fw-extrabold);
    text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted)}
.dp-subs__i b{display:block;font-size:22px;font-weight:var(--fw-extrabold);color:var(--color-ink);
    line-height:1.2;margin:2px 0 6px}
.dp-subs__bar{height:4px;border-radius:var(--radius-pill);background:var(--color-line);overflow:hidden}
.dp-subs__bar i{display:block;height:100%;border-radius:var(--radius-pill);
    background:var(--color-secondary);transition:width .6s var(--ease)}
.dp-subs__i.is-low .dp-subs__bar i{background:var(--color-warning)}
.dp-subs__i.is-low b{color:var(--color-warning-deep)}

/* ── Nhịp đọc: một dòng chữ, không phải mảng màu ── */
.dp-rhythm{display:flex;align-items:center;gap:8px;margin-top:var(--space-4);
    font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--color-muted)}
.dp-rhythm i{color:var(--color-muted)}
.dp-rhythm--good{color:var(--color-secondary-deep)}
.dp-rhythm--good i{color:var(--color-secondary)}
.dp-rhythm--slow,.dp-rhythm--fast{color:var(--color-warning-deep)}
.dp-rhythm--slow i,.dp-rhythm--fast i{color:var(--color-warning)}

/* ── Nhãn khu ── */
.dp-lb{font-size:10.5px;font-weight:var(--fw-extrabold);letter-spacing:.06em;
    text-transform:uppercase;color:var(--color-muted);margin:var(--space-5) 0 var(--space-3)}

/* ── Ô từng từ — KHÔNG viền, KHÔNG dáng nút ──
   🚨 white-space:nowrap bắt buộc: thiếu nó thì ở 360px chữ bị bẻ đôi GIỮA từ, phá đúng
   chức năng duy nhất của khối này (đọc lại từng từ mình vừa phát âm). */
.dp-words{display:flex;flex-wrap:wrap;gap:6px}
.dp-w{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
    padding:6px 11px;border:0;border-radius:var(--radius-md);background:var(--color-soft);
    font:inherit;white-space:nowrap}
.dp-w b{font-size:15px;font-weight:var(--fw-semibold);color:var(--color-text)}
.dp-w span{font-size:10.5px;font-weight:var(--fw-semibold)}
.dp-w--ok{background:var(--color-secondary-soft)}
.dp-w--ok b{color:var(--color-secondary-deep)}
.dp-w--weak{background:var(--color-warning-soft)}
.dp-w--weak b{color:var(--color-warning-deep)}
.dp-w--weak span{color:var(--color-warning-deep);opacity:.85}
.dp-w--miss{background:var(--color-soft)}
/* 🚨 KHÔNG dùng --color-muted + opacity ở đây: hoà .75 lên nền -soft rớt xuống mức
   --color-mute2 mà đầu file đã cấm (2.80:1 sáng / 3.42:1 tối — fail cả hai). */
.dp-w--miss b{color:var(--color-locked-deep)}
.dp-w--miss span{color:var(--color-locked-deep)}
/* "nghe thành X" — dữ liệu dạy học đắt nhất của API, trước đây bị vứt hoàn toàn */
.dp-w em{font-style:normal;font-size:10.5px;font-weight:var(--fw-bold);color:var(--color-warning-deep)}

/* ── Chẩn đoán lỗi phát âm (errors[]) — khu MỚI ──
   Trước đây errors[] không được vẽ ra ở đâu cả, trong khi tips[0] lại ghi "Chú ý N âm
   khó BÊN DƯỚI" ⇒ lời khuyên trỏ vào khoảng trống. */
.dp-fix{display:flex;flex-direction:column;gap:var(--space-3)}
.dp-fix__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.dp-fix__w{padding:3px 10px;border-radius:var(--radius-pill);background:var(--color-warning-soft);
    color:var(--color-warning-deep);font-family:var(--font-mono);font-size:var(--fs-micro);
    font-weight:var(--fw-bold);white-space:nowrap}
.dp-fix__b{min-width:0;font-size:var(--fs-small);line-height:1.6}
.dp-fix__b .is-issue{color:var(--color-text)}
.dp-fix__b .is-fix{display:block;margin-top:2px;color:var(--color-secondary-deep)}

/* ── Câu máy nghe được ── */
.dp-said{margin-top:var(--space-4);font-size:var(--fs-body);line-height:1.65;color:var(--color-ink)}
.dp-said i{color:var(--color-muted)}
.dp-engine{margin-top:var(--space-3);font-size:var(--fs-micro);color:var(--color-muted);font-style:italic}

/* ══ Chế độ Chính tả — bày y như pane "Nghe & gõ" của trang Luyện hội thoại ══ */
/* Nhãn khu có icon, chữ nhỏ in hoa */
.dp-inhead{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-3);
    font-size:12px;font-weight:var(--fw-extrabold);text-transform:uppercase;
    letter-spacing:.04em;color:var(--color-muted)}
.dp-inhead i{color:var(--color-primary);font-size:13px}
/* Ô gõ — copy thông số .rp2-input bên kia để hai trang gõ vào thấy giống nhau */
.dp-input{width:100%;min-height:104px;resize:vertical;font:inherit;font-size:16px;
    line-height:1.6;padding:15px 16px;border:1.5px solid var(--color-border);
    border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-ink)}
.dp-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}
.dp-input::placeholder{color:var(--color-muted)}
/* Hộp gợi ý chữ cái đầu */
.dp-hint{margin-top:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);
    background:var(--color-primary-soft);
    border:1px solid color-mix(in srgb,var(--color-primary) 30%,transparent);
    font-family:var(--font-mono);font-size:15px;letter-spacing:2px;
    color:var(--color-primary-deep);display:none}
.dp-hint.is-show{display:block}
/* Ô đáp án — node RIÊNG, không dùng chung #segScore với thẻ điểm (ghi đè là mất thẻ) */
.dp-answer{display:none;margin-top:var(--space-3);padding:var(--space-4);
    border-radius:var(--radius-md);background:var(--color-warning-soft);
    border:1px solid color-mix(in srgb,var(--color-warning) 30%,transparent);
    font-size:var(--fs-small);line-height:1.6;color:var(--color-warning-deep)}
.dp-answer.is-show{display:block}
.dp-answer__lb{font-weight:var(--fw-extrabold);text-transform:uppercase;
    font-size:var(--fs-micro);letter-spacing:.04em;margin-right:6px}
/* Hàng phím tắt */
.dp-kbd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--space-4);
    font-size:12px;color:var(--color-muted)}
.dp-kbd span{display:inline-flex;align-items:center;gap:5px}
.dp-kbd kbd{display:inline-block;padding:2px 8px;border:1px solid var(--color-border);
    border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--color-surface);
    color:var(--color-ink);font-family:var(--font-mono);font-size:10.5px;font-weight:var(--fw-bold)}

/* ── Nút ── */
.dp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--space-5)}
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;
    padding:0 18px;border:0;border-radius:var(--radius-md);font-size:var(--fs-small);
    font-weight:var(--fw-bold);font-family:inherit;cursor:pointer;text-decoration:none;
    transition:all var(--dur-fast) var(--ease)}
.dp-btn--primary{background:var(--color-primary);color:var(--color-on-dark);
    box-shadow:0 6px 16px -6px color-mix(in srgb,var(--color-primary) 75%,transparent)}
.dp-btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.dp-btn--ghost{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}
.dp-btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* [hidden] của UA thua display:inline-flex ở trên (luật tác giả luôn thắng UA sheet) —
   phải tự khai báo, nếu không nút ẩn vẫn hiện. */
.dp-btn[hidden]{display:none}

@media (max-width:640px){
    .dp-sc{gap:var(--space-4)}
    .dp-sc__ring{width:84px;height:84px}
    .dp-sc__n b{font-size:24px}
    /* 3 cột ở 360px chỉ còn ~70px/cột — số 22px tràn. Xuống 1 cột, xếp ngang nhãn|số. */
    .dp-subs{grid-template-columns:1fr;gap:var(--space-3)}
    .dp-subs__i{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
    .dp-subs__i b{font-size:17px;margin:0}
    .dp-subs__bar{grid-column:1/-1}
    /* min-height (không sửa height:42px của desktop) để 4 id chế độ Chính tả đã có
       min-height:44px không xung đột. */
    .dp-btn{flex:1 1 auto;justify-content:center;min-height:44px}
}

/* Hàng gợi ý phím tắt vô nghĩa trên cảm ứng (bàn phím mềm không có Ctrl) và ngốn ~115px
   chiều dọc ở 360px — ẩn theo THIẾT BỊ, desktop cửa sổ hẹp vẫn giữ. */
@media (hover:none) and (pointer:coarse){
    .dp-kbd{display:none}
}

/* ── Đối chiếu từng từ · bài CHÍNH TẢ (dict_diff_html) ──
   Khác đường Nói: mỗi ô hiện đáp án + CHỮ HỌC VIÊN ĐÃ GÕ khi hai bên khác nhau. */
.dw{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
    padding:4px 8px;margin:0 3px 5px 0;border-radius:var(--radius-sm);
    font-size:var(--fs-small);line-height:1.35;border:1px solid transparent}
.dw i{font-style:normal;font-size:var(--fs-micro);opacity:.9;
    text-decoration:line-through;text-decoration-thickness:1px}
.dw-ok{background:var(--color-secondary-soft);color:var(--color-secondary-deep)}
.dw-sp,.dw-in{background:var(--color-warning-soft);color:var(--color-warning-deep);
    border-color:color-mix(in srgb,var(--color-warning) 32%,transparent)}
.dw-hp,.dw-or{background:var(--color-accent-soft);color:var(--color-accent-deep);
    border-color:color-mix(in srgb,var(--color-accent) 32%,transparent)}
.dw-wr,.dw-ex{background:var(--color-warning-soft);color:var(--color-warning-deep)}
.dw-ms{background:var(--color-soft);color:var(--color-locked-deep);
    border-style:dashed;border-color:var(--color-border)}