/* ---------- Ôn từ nhiều dạng (review.js) ---------- */
.rv-label { font-weight: 900; color: var(--purple-d); font-size: 14px; letter-spacing: .3px; margin: -4px 0 8px; text-transform: uppercase; }
.rv-modes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rv-mode { background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 rgba(43,45,66,.10); }
.rv-word { font-family: 'Baloo 2'; font-size: 34px; font-weight: 800; line-height: 1.15; word-break: break-word; }
.rv-mean { font-size: 22px; font-weight: 800; line-height: 1.3; }
.rv-sent { font-size: 19px; font-weight: 700; line-height: 1.5; }
.rv-blank { display: inline-block; min-width: 70px; border-bottom: 3px solid var(--blue); color: var(--blue); text-align: center; }
.rv-big-say {
  width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer; font-size: 42px;
  background: var(--teal); color: #fff; box-shadow: 0 6px 0 var(--teal-d);
}
.rv-big-say:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-d); }
.opt.rv-right { border-color: var(--green); background: #E3F7EC; }
.opt.rv-wrong { border-color: var(--red); background: #FDE5EB; }
.opt:disabled { cursor: default; opacity: 1; color: inherit; }
.rv-match { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.rv-match .opt { justify-content: center; text-align: center; min-height: 58px; padding: 8px; }
.rv-match .opt.on { border-color: var(--blue); background: #EAF2FF; }
.rv-shake { animation: rvshake .4s; border-color: var(--red) !important; }
@keyframes rvshake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rv-hint { font-family: monospace; font-size: 24px; letter-spacing: 4px; text-align: center; font-weight: 800; color: var(--muted, #8a8a9a); word-break: break-all; }
.rv-fb { margin-top: 12px; padding: 14px 16px; border-radius: 20px; animation: pop .25s; }
.rv-fb.ok { background: #E3F7EC; border: 3px solid #BCE8CF; }
.rv-fb.bad { background: #FFF1F4; border: 3px solid #F8C9D5; }
.rv-fb-t { font-family: 'Baloo 2'; font-size: 22px; font-weight: 800; }
.rv-sum { background: #fff; border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.rv-sum .rv-w { font-size: 22px; font-family: 'Baloo 2'; }
.rv-strike { text-decoration: line-through; color: var(--red-d); }
.rv-meter { height: 10px; background: #F1ECE0; border-radius: 999px; overflow: hidden; max-width: 240px; margin: 10px auto 0; }
.rv-meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--green)); }
.rv-sw { display: inline-block; padding: 2px 8px; border-radius: 8px; font-weight: 800; margin: 2px; }
.rv-sw.ok { background: #E3F7EC; color: var(--green-d); }
.rv-sw.unclear { background: #FFF6DA; color: var(--orange-d); }
.rv-sw.missed { background: #FDE5EB; color: var(--red-d); }