.doan-bai{--doan-bai-right:#6fc59a;--doan-bai-right-bg:#6fc59a24;--doan-bai-wrong:#f08a95;--doan-bai-wrong-bg:#f08a951f;border:1px solid var(--tro-choi-line);background:var(--tro-choi-paper-soft);border-radius:20px;gap:1rem;max-width:720px;margin:2rem auto 0;padding:clamp(.9rem,3.5vw,1.8rem);display:grid}html[data-theme=light] .doan-bai{--doan-bai-right:#1f6a45;--doan-bai-right-bg:#1f6a451a;--doan-bai-wrong:#9a2f3b;--doan-bai-wrong-bg:#9a2f3b17}.doan-bai button{font:inherit;-webkit-tap-highlight-color:transparent}.doan-bai button:focus-visible,.doan-bai summary:focus-visible,.doan-bai h2:focus-visible{outline:3px solid var(--tro-choi-son);outline-offset:2px}.doan-bai__preview{border:1px dashed var(--tro-choi-gold);color:var(--tro-choi-gold);border-radius:12px;margin:0;padding:.6rem .9rem;font-size:.92rem;font-weight:700}.doan-bai__empty,.doan-bai__start>p,.doan-bai__done>p{color:var(--tro-choi-copy);text-align:center;margin:0;line-height:1.65}.doan-bai__start,.doan-bai__ask,.doan-bai__done{justify-items:center;gap:1rem;min-width:0;display:grid}.doan-bai__primary{color:#fff8e6;cursor:pointer;background:linear-gradient(#c62f3f,#8f1d2b);border:0;border-radius:999px;min-height:48px;padding:.7rem 1.6rem;font-weight:800}.doan-bai__count{color:var(--tro-choi-muted);font-variant-numeric:tabular-nums;margin:0;font-size:.95rem;font-weight:700}.doan-bai__listen{border:2px solid var(--tro-choi-gold);width:min(100%,360px);min-height:64px;color:var(--tro-choi-ink);background:var(--tro-choi-paper);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:.7rem;padding:.7rem 1.4rem;font-size:1.08rem;font-weight:800;display:inline-flex}.doan-bai__listen.is-playing{color:var(--tro-choi-gold);box-shadow:inset 0 0 0 1px var(--tro-choi-gold)}.doan-bai__listen-icon{color:#fff8e6;background:linear-gradient(#c62f3f,#8f1d2b);border-radius:50%;flex:none;place-items:center;width:2.2rem;height:2.2rem;font-size:.95rem;display:inline-grid}.doan-bai__meter{background:var(--tro-choi-line);border-radius:999px;width:min(100%,360px);height:6px;overflow:hidden}.doan-bai__meter span{border-radius:inherit;background:var(--tro-choi-gold);transform-origin:0;width:100%;height:100%;transition:transform .26s linear;display:block}.doan-bai[data-motion=none] .doan-bai__meter span{transition:none}.doan-bai__error{color:var(--doan-bai-wrong);text-align:center;margin:0;font-weight:700}.doan-bai__choices{border:0;grid-template-columns:minmax(0,1fr);gap:.6rem;width:100%;min-width:0;margin:0;padding:0;display:grid}@media (width>=560px){.doan-bai__choices{grid-template-columns:repeat(2,minmax(0,1fr))}}.doan-bai__choices legend{width:100%;color:var(--tro-choi-ink);text-align:center;margin-bottom:.6rem;padding:0;font-weight:800}.doan-bai__choice{border:1px solid var(--tro-choi-line);min-height:52px;color:var(--tro-choi-ink);text-align:center;overflow-wrap:anywhere;background:var(--tro-choi-paper);cursor:pointer;border-radius:14px;padding:.7rem 1rem;font-weight:700;line-height:1.35}.doan-bai__choice:disabled{cursor:default}.doan-bai__choice.is-right{border-color:var(--doan-bai-right);color:var(--doan-bai-right);background:var(--doan-bai-right-bg);box-shadow:inset 0 0 0 1px var(--doan-bai-right)}.doan-bai__choice.is-wrong{border-color:var(--doan-bai-wrong);color:var(--doan-bai-wrong);background:var(--doan-bai-wrong-bg);text-decoration:line-through}.doan-bai__choice.is-out{opacity:.6}.doan-bai__feedback{min-height:1.6em;color:var(--tro-choi-ink);text-align:center;margin:0;font-weight:700;line-height:1.5}.doan-bai__done h2{font:600 clamp(1.4rem, 4.5vw, 1.9rem) / 1.25 var(--font-serif,Lora, "Lora fallback", Georgia, serif);text-align:center;margin:0}.doan-bai__review{gap:.5rem;width:100%;margin:0;padding:0;list-style:none;display:grid}.doan-bai__review li,.doan-bai__practice li{border:1px solid var(--tro-choi-line);background:var(--tro-choi-paper);border-radius:14px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.55rem .6rem .55rem .9rem;display:grid}.doan-bai__practice li{grid-template-columns:minmax(0,1fr) auto}.doan-bai__review li>span:nth-child(2){overflow-wrap:anywhere;gap:.15rem;min-width:0;font-weight:700;display:grid}.doan-bai__review small{color:var(--tro-choi-muted);font-size:.85rem;font-weight:600}.doan-bai__mark{font-weight:900}.doan-bai__review li.is-right .doan-bai__mark{color:var(--doan-bai-right)}.doan-bai__review li.is-wrong .doan-bai__mark{color:var(--doan-bai-wrong)}.doan-bai__mini{border:1px solid var(--tro-choi-line);min-height:44px;color:var(--tro-choi-ink);background:var(--tro-choi-paper-soft);cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .95rem;font-weight:800;display:inline-flex}.doan-bai__mini.is-playing{border-color:var(--tro-choi-gold);color:var(--tro-choi-gold)}.doan-bai__practice{border-top:1px solid var(--tro-choi-line);width:100%;padding-top:.9rem}.doan-bai__practice summary{min-height:44px;color:var(--tro-choi-gold);cursor:pointer;justify-content:center;align-items:center;font-weight:800;display:flex}.doan-bai__practice p{color:var(--tro-choi-copy);text-align:center;margin:.4rem 0 .8rem;font-size:.95rem}.doan-bai__practice ul{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.doan-bai__practice li>span{overflow-wrap:anywhere;min-width:0;font-weight:700}@media (prefers-reduced-motion:reduce){.doan-bai__meter span{transition:none}}
