/* ELSA Interactive Widgets */
.elsa-iw {
	--eiw-primary: #1183d6;
	--eiw-primary-dark: #0c66a8;
	--eiw-bg: #eef5fb;
	--eiw-border: #d5e4f0;
	--eiw-green: #1e9e6a;
	--eiw-red: #d9534f;
	border: 1px solid var(--eiw-border);
	border-radius: 12px;
	padding: 20px;
	box-sizing: border-box;
	max-width: 960px;
	margin: 24px auto;
	background: #fff;
	font-size: 16px;
}
.elsa-iw h3 { margin: 20px 0 8px; font-size: 1.05em; }
.elsa-iw-hint { color: #666; font-size: 0.92em; margin-top: 0; }

.elsa-iw-btn {
	display: inline-block; cursor: pointer;
	border: 1px solid var(--eiw-border); border-radius: 8px;
	background: var(--eiw-bg); padding: 10px 18px; font-size: 15px;
	transition: background .15s;
}
.elsa-iw-btn:hover { background: #ececf5; }
.elsa-iw-btn-primary {
	background: var(--eiw-primary); border-color: var(--eiw-primary);
	color: #fff !important; text-decoration: none;
}
.elsa-iw-btn-primary:hover { background: var(--eiw-primary-dark); }
.elsa-iw-record.is-recording { background: #ffe5e5; border-color: var(--eiw-red); }

/* --- Score converter --- */
.elsa-iw-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.elsa-iw-field span { display: block; font-size: 0.85em; color: #555; margin-bottom: 4px; }
.elsa-iw-field select {
	width: 100%; padding: 10px; border: 1px solid var(--eiw-border);
	border-radius: 8px; font-size: 16px; box-sizing: border-box; background: #fff;
}
.elsa-iw-field input {
	width: 100%; padding: 10px; border: 1px solid var(--eiw-border);
	border-radius: 8px; font-size: 16px; box-sizing: border-box;
}
.elsa-iw-result {
	margin: 16px 0; padding: 14px; border-radius: 8px;
	background: var(--eiw-bg); color: #777; text-align: center;
}
.elsa-iw-result.is-ready { background: #eef9f3; color: #1a1a1a; }
.elsa-iw-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.elsa-iw-table th, .elsa-iw-table td { border: 1px solid var(--eiw-border); padding: 8px 12px; text-align: left; }
.elsa-iw-table th { background: var(--eiw-bg); }

/* --- Quiz --- */
.elsa-iw-quiz-title { margin-top: 0; }
.elsa-iw-quiz-progress { font-size: 0.85em; color: #777; margin-bottom: 6px; }
.elsa-iw-quiz-q { font-weight: 600; }
.elsa-iw-quiz-answers { display: grid; gap: 8px; }
.elsa-iw-quiz-a {
	text-align: left; padding: 12px 14px; border: 1px solid var(--eiw-border);
	border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px;
}
.elsa-iw-quiz-a:hover:not(:disabled) { border-color: var(--eiw-primary); }
.elsa-iw-quiz-a.is-correct { background: #eef9f3; border-color: var(--eiw-green); }
.elsa-iw-quiz-a.is-wrong { background: #fdecec; border-color: var(--eiw-red); }
.elsa-iw-quiz-done { font-size: 1.1em; margin-bottom: 12px; }

/* --- IPA chart --- */
.elsa-iw-ipa-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.elsa-iw-ipa-cell {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 10px 6px; border: 1px solid var(--eiw-border); border-radius: 8px;
	background: var(--eiw-bg); cursor: pointer;
}
.elsa-iw-ipa-cell:hover { border-color: var(--eiw-primary); background: #f1edff; }
.elsa-iw-ipa-symbol { font-size: 1.3em; font-weight: 700; color: var(--eiw-primary); }
.elsa-iw-ipa-word { font-size: 0.78em; color: #666; }
.elsa-iw-recorder { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* --- Pronunciation test --- */
.elsa-iw-sentence {
	margin: 12px 0; padding: 14px 18px; border-left: 4px solid var(--eiw-primary);
	background: var(--eiw-bg); border-radius: 0 8px 8px 0; font-size: 1.1em;
}
.elsa-iw-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.elsa-iw-score {
	margin: 14px 0; padding: 12px; border-radius: 8px;
	background: #eef9f3; text-align: center; font-size: 1.05em;
}
.elsa-iw-cta { margin-top: 14px; text-align: center; }

@media (max-width: 480px) {
	.elsa-iw { padding: 14px; }
	.elsa-iw-inputs { grid-template-columns: 1fr 1fr; }
}

/* --- Hub v1.1 --- */
.elsa-iw-word-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--eiw-border); }
.elsa-iw-word-main { flex: 1; }
.elsa-iw-word-m { color: #666; font-size: 0.9em; }
.elsa-iw-ipa-small { color: var(--eiw-primary); font-size: 0.85em; }
.elsa-iw-pos { display: inline-block; font-size: 0.72em; font-style: italic; color: #8a8f98; margin-left: 4px; }
.elsa-iw-word-ex { margin-top: 5px; font-size: 0.88em; color: #444; font-style: italic; border-left: 3px solid var(--eiw-primary); padding-left: 9px; }
.elsa-iw-word-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.elsa-iw-ex-toggle { background: none; border: 1px solid var(--eiw-border); color: var(--eiw-primary); }
.elsa-iw-ex-toggle.is-open { background: var(--eiw-primary); color: #fff; border-color: var(--eiw-primary); }
.elsa-iw-tts { border: none; background: none; cursor: pointer; font-size: 1.2em; }
.elsa-iw-fc { text-align: center; padding: 10px 0; }
.elsa-iw-fc-count { font-size: 0.85em; color: #777; margin-bottom: 10px; }
.elsa-iw-fc-word { font-size: 1.6em; font-weight: 700; margin-bottom: 12px; }
.elsa-iw-fc-m { font-size: 1.1em; margin: 12px 0; padding: 12px; background: var(--eiw-bg); border-radius: 8px; }
.elsa-iw-fc-grades { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.elsa-iw-fc-modes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.elsa-iw-mode.is-active { background: var(--eiw-primary); color: #fff; border-color: var(--eiw-primary); }
.elsa-iw-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.elsa-iw-fc-nav { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.elsa-iw-fc-back { margin: 12px 0; }
.elsa-iw-fc .elsa-iw-word-ex { display: inline-block; text-align: left; margin-top: 10px; }
/* Tabs 4 kỹ năng */
.elsa-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--eiw-border); margin-bottom: 18px; }
.elsa-tabs-nav button { background: none; border: none; padding: 10px 16px; font-size: 1em; font-weight: 600; cursor: pointer; color: #555; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.elsa-tabs-nav button.is-active { color: var(--eiw-primary); border-bottom-color: var(--eiw-primary); }
.elsa-tabs-nav button:hover { color: var(--eiw-primary); }
/* Writing */
.elsa-wr-select { display: block; margin-bottom: 12px; font-weight: 600; }
.elsa-wr-prompt { max-width: 100%; padding: 6px; }
.elsa-wr-prompt-box { background: var(--eiw-bg); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.elsa-wr-meta { font-size: 0.85em; color: #666; margin-top: 6px; }
.elsa-wr-outline { margin-top: 8px; }
.elsa-wr-timer { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.elsa-wr-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1em; }
.elsa-wr-text { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--eiw-border); border-radius: 8px; font-family: inherit; font-size: 1em; line-height: 1.6; }
.elsa-wr-stat { font-size: 0.9em; color: #666; margin: 6px 0; }
.elsa-wr-stat.is-goal { color: #1a7f37; font-weight: 600; }
.elsa-wr-check { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.elsa-wr-check label { font-size: 0.92em; }
.elsa-wr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.elsa-wr-cta { margin-top: 12px; font-size: 0.9em; background: var(--eiw-bg); padding: 10px 12px; border-radius: 8px; }
/* Polish hub 4 kỹ năng + nút ELSA nổi bật trong Speaking Room */
.elsa-tabs-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.elsa-tabs-nav button { white-space: nowrap; }
.elsa-tab-panel { animation: elsa-fade .2s ease; }
@keyframes elsa-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.elsa-iw-sr-chip-elsa { background: var(--eiw-primary); color: #fff !important; border-color: var(--eiw-primary) !important; font-weight: 700; }
.elsa-iw-sr-chip-elsa:hover { filter: brightness(1.05); }
/* Category "Luyện theo kỹ năng" — lưới thẻ (màu ELSA tự chứa) */
.elsa-iw-wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.elsa-skill-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 20px auto; max-width: 960px; }
@media (min-width: 640px) { .elsa-skill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .elsa-skill-grid { grid-template-columns: repeat(3, 1fr); } }
.elsa-skill-card { border: 1px solid #d8e6f2; border-radius: 12px; padding: 18px; background: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(11,58,94,.05); }
.elsa-skill-card .ico { font-size: 1.7em; line-height: 1; }
.elsa-skill-card h3 { margin: 0; font-size: 1.05em; color: #0b3a5e; }
.elsa-skill-card p { margin: 0; color: #5f7488; font-size: .92em; flex: 1; }
.elsa-skill-go { align-self: flex-start; text-decoration: none; background: #1183d6; color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 14px; font-weight: 600; border: 1px solid #1183d6; }
.elsa-skill-go:hover { background: #0c66a8; }
/* Minimal pairs — chọn topic cặp âm */
.elsa-mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.elsa-mp-chip { text-align: left; }
.elsa-mp-n { opacity: .65; font-size: .82em; margin-left: 4px; }
.elsa-iw-mp-bar { margin-bottom: 12px; }
.elsa-iw-g0 { border-color: var(--eiw-red); }
.elsa-iw-g5 { border-color: var(--eiw-green); }
.elsa-iw-stage { border: 1px solid var(--eiw-border); border-radius: 8px; margin: 10px 0; padding: 0 14px; }
.elsa-iw-stage summary { cursor: pointer; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; }
.elsa-iw-stage-n { color: #777; font-size: 0.85em; }
.elsa-iw-rm-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--eiw-border); }
.elsa-iw-prompt-item { display: block; width: 100%; text-align: left; padding: 12px 14px; margin: 6px 0; border: 1px solid var(--eiw-border); border-radius: 8px; background: #fff; cursor: pointer; }
.elsa-iw-prompt-item:hover { border-color: var(--eiw-primary); }
.elsa-iw-tag { display: inline-block; background: #f1edff; color: var(--eiw-primary); border-radius: 6px; padding: 2px 8px; font-size: 0.78em; margin-right: 6px; }
.elsa-iw-timer { font-size: 1.6em; font-weight: 700; text-align: center; margin: 10px 0; color: var(--eiw-primary); }
.elsa-iw-hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 16px; }
.elsa-iw-stat { text-align: center; background: var(--eiw-bg); border-radius: 8px; padding: 12px 6px; }
.elsa-iw-stat-v { font-size: 1.3em; font-weight: 700; }
.elsa-iw-hub-heatmap { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 3px; margin: 10px 0 16px; }
.elsa-iw-hm { width: 12px; height: 12px; border-radius: 3px; background: #ebebf2; }
.elsa-iw-hm-1 { background: #c9bdf7; }
.elsa-iw-hm-2 { background: #9a83ee; }
.elsa-iw-hm-3 { background: var(--eiw-primary); }
.elsa-iw-hub-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Listening Lab v1.3 --- */
.elsa-iw-lab-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.elsa-iw-lab-tab { flex: 1; padding: 10px; border: 1px solid var(--eiw-border); border-radius: 8px; background: #fff; cursor: pointer; }
.elsa-iw-lab-tab.is-active { background: var(--eiw-primary); color: #fff; border-color: var(--eiw-primary); }
.elsa-iw-lab-main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 780px) { .elsa-iw-lab-main { grid-template-columns: 1fr; } }
.elsa-iw-lab-video { position: sticky; top: 16px; }
.elsa-iw-lab-video iframe { width: 100%; aspect-ratio: 16/9; border-radius: 10px; }
.elsa-iw-lab-settings { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.elsa-iw-lab-toggle { display: flex; align-items: center; gap: 8px; border: 1px solid var(--eiw-border); border-radius: 8px; padding: 8px 12px; font-size: 0.9em; cursor: pointer; }
.elsa-iw-lab-view { max-height: 520px; overflow-y: auto; padding-right: 4px; }
.elsa-iw-lab-card { border: 1px solid var(--eiw-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.elsa-iw-lab-card.is-now { border-color: var(--eiw-primary); background: #f6f3ff; }
.elsa-iw-lab-en { margin: 0 0 4px; font-weight: 600; }
.elsa-iw-lab-vi { margin: 0 0 8px; color: #777; font-size: 0.92em; }
.elsa-iw-lab-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.elsa-iw-lab-btns .elsa-iw-btn { padding: 6px 12px; font-size: 13px; }
.elsa-iw-lab-rec.is-recording { background: #ffe5e5; border-color: var(--eiw-red); }
.elsa-iw-lab-dict textarea { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px; border: 1px solid var(--eiw-border); border-radius: 8px; font-size: 15px; }
.elsa-iw-lab-dict-nav { margin-bottom: 8px; color: #666; }
.elsa-iw-lab-result { margin-top: 12px; padding: 12px; background: var(--eiw-bg); border-radius: 8px; }
.elsa-iw-lab-score { margin-bottom: 6px; }
.elsa-iw-ok { color: var(--eiw-green); }
.elsa-iw-miss { color: var(--eiw-red); text-decoration: underline dotted; }
.elsa-iw-lab-tele-line { font-size: 1.25em; padding: 10px 12px; border-radius: 8px; color: #999; cursor: pointer; }
.elsa-iw-lab-tele-line small { display: block; font-size: 0.7em; }
.elsa-iw-lab-tele-line.is-now { color: #111; background: #f6f3ff; font-weight: 600; }

/* --- Vocab catalog v1.3 --- */
.elsa-iw-vc-group { border: 1px solid var(--eiw-border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.elsa-iw-vc-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.elsa-iw-vc-head span { color: #777; font-size: 0.9em; }
.elsa-iw-vc-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; }
.elsa-iw-vc-row { display: flex; justify-content: space-between; font-size: 0.95em; margin-bottom: 4px; }
.elsa-iw-vc-row span { color: #777; font-size: 0.88em; }
.elsa-iw-vc-bar { height: 5px; background: #ececf5; border-radius: 3px; overflow: hidden; }
.elsa-iw-vc-bar i { display: block; height: 100%; background: var(--eiw-primary); border-radius: 3px; }

/* --- Hub links v1.3.1 --- */
.elsa-iw-hub-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.elsa-iw-hub-link { display: flex; gap: 10px; align-items: center; border: 1px solid var(--eiw-border); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: inherit; transition: border-color .15s; }
.elsa-iw-hub-link:hover { border-color: var(--eiw-primary); }
.elsa-iw-hub-link-icon { font-size: 1.3em; }
.elsa-iw-hub-link-main strong { display: block; font-size: 0.95em; }
.elsa-iw-hub-link-main small { color: #777; font-size: 0.8em; }

/* --- Video list (kênh Listening) v1.5 --- */
.elsa-iw-vl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.elsa-iw-vl-card { border: 1px solid var(--eiw-border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; display: block; }
.elsa-iw-vl-card:hover { border-color: var(--eiw-primary); transform: translateY(-2px); }
.elsa-iw-vl-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.elsa-iw-vl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elsa-iw-vl-time { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); color: #fff; font-size: 0.75em; padding: 2px 6px; border-radius: 4px; }
.elsa-iw-vl-main { display: block; padding: 10px 12px; }
.elsa-iw-vl-main strong { display: block; font-size: 0.95em; margin-top: 4px; }
.elsa-iw-vl-main small { color: #777; font-size: 0.82em; }

.elsa-iw-cta-sm { margin-top: 8px; padding: 8px 14px; font-size: 14px; display: inline-block; }

/* --- QR download v1.5.2 --- */
.elsa-iw-cta-qr { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.elsa-iw-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.elsa-iw-qr img { border: 1px solid var(--eiw-border); border-radius: 8px; padding: 4px; background: #fff; }
.elsa-iw-qr small { color: #777; font-size: 0.75em; }
@media (max-width: 780px) { .elsa-iw-qr { display: none; } }

/* --- Minimal pairs + Reading v1.6 --- */
.elsa-iw-mp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.elsa-iw-mp-opt { padding: 16px; font-size: 1.15em; font-weight: 600; border: 1px solid var(--eiw-border); border-radius: 10px; background: #fff; cursor: pointer; }
.elsa-iw-mp-opt small { display: block; font-weight: 400; color: var(--eiw-primary); font-size: 0.7em; }
.elsa-iw-mp-opt:hover:not(:disabled) { border-color: var(--eiw-primary); }
.elsa-iw-mp-opt.is-correct { background: #eef9f3; border-color: var(--eiw-green); }
.elsa-iw-mp-opt.is-wrong { background: #fdecec; border-color: var(--eiw-red); }
.elsa-iw-reading-text { font-size: 1.08em; line-height: 1.8; padding: 16px; background: var(--eiw-bg); border-radius: 10px; margin: 12px 0; }

/* --- Speaking Room v1.7 --- */
.elsa-iw-sr-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.elsa-iw-sr-set { border: 1px solid var(--eiw-border); border-radius: 8px; background: #fff; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.elsa-iw-sr-set:hover { border-color: var(--eiw-primary); }
.elsa-iw-sr-set.is-active { background: var(--eiw-primary); border-color: var(--eiw-primary); color: #fff; }
.elsa-iw-sr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.elsa-iw-sr-timer { font-weight: 700; font-size: 1.05em; border: 1px solid var(--eiw-border); border-radius: 8px; padding: 8px 14px; background: #fff; }
.elsa-iw-sr-clock.is-low { color: var(--eiw-red); }
.elsa-iw-sr-modal { --eiw-primary: #6f42f5; --eiw-primary-dark: #5a35c8; --eiw-bg: #f7f7fb; --eiw-border: #e2e2ee; --eiw-green: #1e9e6a; --eiw-red: #d9534f; position: fixed; inset: 0; background: rgba(15, 15, 35, .55); display: flex; align-items: center; justify-content: center; z-index: 99999; font-size: 16px; }
.elsa-iw-sr-modal .elsa-iw-btn { display: inline-block; cursor: pointer; border: 1px solid var(--eiw-border); border-radius: 8px; background: var(--eiw-bg); padding: 10px 18px; font-size: 15px; }
.elsa-iw-sr-modal .elsa-iw-btn-primary { background: var(--eiw-primary); border-color: var(--eiw-primary); color: #fff !important; }
.elsa-iw-sr-modal .elsa-iw-btn-primary:hover { background: var(--eiw-primary-dark); }
.elsa-iw-sr-modal-box { background: #fff; border-radius: 14px; padding: 24px 28px; max-width: 420px; width: calc(100% - 48px); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); font-size: 16px; }
.elsa-iw-sr-modal-box h3 { margin: 0 0 8px; font-size: 1.3em; }
.elsa-iw-sr-modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.elsa-iw-sr-score { font-size: 1.6em; font-weight: 800; line-height: 1; vertical-align: -2px; }
.elsa-iw-sr-score-sm { font-size: 1.15em; }
.elsa-iw-sr-score.s-hi { color: var(--eiw-green); }
.elsa-iw-sr-score.s-mid { color: #d99a00; }
.elsa-iw-sr-score.s-lo { color: var(--eiw-red); }

/* --- IPA chart v1.8: nhóm âm có màu, bộ lọc, 2 cột --- */
.cat-mono { --c: #1d4ed8; --cbg: #e8f0fe; --cbd: #bcd2fb; }
.cat-diph { --c: #6f42f5; --cbg: #f1edff; --cbd: #d8ccfa; }
.cat-fric { --c: #d97706; --cbg: #fff3e0; --cbd: #f8d9ab; }
.cat-plos { --c: #d9534f; --cbg: #fdecec; --cbd: #f6c6c4; }
.cat-affr { --c: #0d9488; --cbg: #e0f7f4; --cbd: #b3e7e0; }
.cat-nas  { --c: #1e9e6a; --cbg: #e8f7ee; --cbd: #bfe8d2; }
.cat-appr { --c: #b45309; --cbg: #fff8e1; --cbd: #f3e0a8; }
.cat-lat  { --c: #d6336c; --cbg: #fde7f1; --cbd: #f7bfd6; }
.elsa-iw-ipa-filters { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid var(--eiw-border); border-radius: 12px; padding: 14px 16px; margin: 12px 0 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .04); }
.elsa-iw-ipa-filters strong { flex-basis: 100%; font-size: .75em; letter-spacing: .08em; color: #888; }
.elsa-iw-ipa-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cbd); border-radius: 999px; background: #fff; padding: 6px 12px; font-size: .85em; font-weight: 600; color: var(--c); cursor: pointer; transition: all .15s; }
.elsa-iw-ipa-filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.elsa-iw-ipa-filter:hover { background: var(--cbg); }
.elsa-iw-ipa-filter.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.elsa-iw-ipa-filter.is-active i { background: #fff; }
.elsa-iw-ipa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .elsa-iw-ipa-cols { grid-template-columns: 1fr; } }
.elsa-iw-ipa-sec { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 4px 0 12px; }
.elsa-iw-ipa-sec i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.elsa-iw-ipa-group { margin-bottom: 20px; }
.elsa-iw-ipa-group-label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cbd); color: var(--c); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .82em; font-weight: 600; margin-bottom: 10px; }
.elsa-iw-ipa-group-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.elsa-iw-ipa .elsa-iw-ipa-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.elsa-iw-ipa .elsa-iw-ipa-cell { position: relative; background: linear-gradient(160deg, #fff 0%, var(--cbg) 100%); border: 1px solid var(--cbd); border-radius: 12px; padding: 18px 6px 10px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.elsa-iw-ipa .elsa-iw-ipa-cell:hover { background: var(--cbg); border-color: var(--c); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.elsa-iw-ipa-n { position: absolute; top: 5px; left: 8px; font-size: .62em; font-weight: 600; color: #9a9ab0; }
.elsa-iw-ipa .elsa-iw-ipa-symbol { color: var(--c); font-size: 1.5em; font-weight: 700; }
.elsa-iw-ipa .elsa-iw-ipa-word { font-size: .78em; color: #555; text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 2px; }
.elsa-iw-sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.elsa-iw-sr-chip { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: #fff !important; cursor: pointer; text-decoration: none; }
.elsa-iw-sr-chip:hover { filter: brightness(1.08); }
.c-hint { background: #0ea5e9; }
.c-map { background: #6366f1; }
.c-his { background: #a855f7; }
.c-gpt { background: #10a37f; }
.c-gem { background: linear-gradient(90deg, #4285f4, #a142f4); }
.c-elsa { background: #22c55e; }
.elsa-iw-sr-panel { border: 1px solid var(--eiw-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; background: var(--eiw-bg); }
.elsa-iw-sr-panel h4 { margin: 8px 0 6px; }
.elsa-iw-sr-topic { font-weight: 700; margin: 16px 0 6px; color: var(--eiw-primary); }
.elsa-iw-sr-q { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--eiw-border); }
.elsa-iw-sr-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #e0edff; color: #1d4ed8; font-weight: 700; font-size: 0.85em; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.elsa-iw-sr-qmain { flex: 1; }
.elsa-iw-sr-qt { margin: 0 0 8px; font-weight: 600; }
.elsa-iw-sr-q .elsa-iw-btn { padding: 6px 12px; font-size: 13px; }
.elsa-iw-sr-res { margin-top: 8px; font-size: 0.92em; color: #444; background: var(--eiw-bg); border-radius: 8px; padding: 8px 10px; }
.elsa-iw-sr-map { margin: 10px 0; }
.elsa-iw-sr-map-c { display: inline-block; background: var(--eiw-primary); color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 700; margin-bottom: 8px; }
.elsa-iw-sr-map-b { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 18px; border-left: 2px solid var(--eiw-border); margin-left: 10px; }
.elsa-iw-sr-map-b span { background: #fff; border: 1px solid var(--eiw-border); border-radius: 8px; padding: 6px 10px; font-size: 0.9em; }
@media (max-width: 600px) { .elsa-iw-sr-top { flex-direction: column; align-items: stretch; } }

/* --- Vocab Practice v1.11: cấp độ + chủ đề + 6 game --- */
.elsa-iw-vp-lv { margin-bottom: 12px; }
.elsa-iw-vp-lv select { padding: 8px 14px; border: 1px solid var(--eiw-border); border-radius: 8px; font-size: 15px; background: #fff; margin-left: 6px; }
.elsa-iw-vp-lbl { display: block; margin: 14px 0 8px; }
.elsa-iw-vp-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.elsa-iw-vp-topic { position: relative; text-align: left; border: 1px solid var(--eiw-border); border-radius: 12px; background: #fff; padding: 12px 14px; cursor: pointer; transition: border-color .12s; }
.elsa-iw-vp-topic:hover { border-color: var(--eiw-primary); }
.elsa-iw-vp-topic.is-active { border-color: var(--eiw-primary); box-shadow: 0 0 0 2px rgba(111, 66, 245, .25); }
.elsa-iw-vp-topic strong { font-size: .96em; }
.elsa-iw-vp-topic small { color: var(--eiw-primary); }
.elsa-iw-vp-hot { display: inline-block; background: var(--eiw-red); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .72em; font-weight: 700; margin-left: 6px; }
.elsa-iw-vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.elsa-iw-vp-card { border: 1px solid var(--eiw-border); border-radius: 14px; padding: 18px 16px; background: #fff; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 8px; }
.elsa-iw-vp-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.elsa-iw-vp-card strong { font-size: 1.1em; }
.elsa-iw-vp-card p { margin: 0; color: #666; font-size: .9em; flex: 1; }
.elsa-iw-vp-card .elsa-iw-btn { width: 100%; box-sizing: border-box; }
.elsa-iw-vp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.elsa-iw-vp-head strong { font-size: 1.1em; }
.elsa-iw-vp-letters { display: inline-block; background: var(--eiw-bg); border: 1px dashed var(--eiw-border); border-radius: 8px; padding: 6px 12px; letter-spacing: 2px; font-weight: 700; color: var(--eiw-primary); }
.elsa-iw-vp-match { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 680px) { .elsa-iw-vp-match { grid-template-columns: repeat(3, 1fr); } }
.elsa-iw-vp-mcard { position: relative; min-height: 78px; border: 1px solid var(--eiw-border); border-radius: 10px; background: var(--eiw-primary); cursor: pointer; padding: 8px; }
.elsa-iw-vp-mcard span { visibility: hidden; font-weight: 600; font-size: .92em; color: #1a1a1a; }
.elsa-iw-vp-mcard.is-open, .elsa-iw-vp-mcard.is-done { background: #fff; }
.elsa-iw-vp-mcard.is-open span, .elsa-iw-vp-mcard.is-done span { visibility: visible; }
.elsa-iw-vp-mcard.is-done { border-color: var(--eiw-green); background: #eef9f3; cursor: default; }
.elsa-iw-vp-rushbar { display: flex; justify-content: space-between; align-items: center; font-size: 1.05em; margin-bottom: 8px; }
.elsa-iw-vp-rush-t { font-weight: 800; color: var(--eiw-red); font-size: 1.3em; }
.elsa-iw-vp-rushw { font-size: 1.5em; text-align: center; }

/* --- My Sets v1.10: bộ từ vựng cá nhân --- */
.elsa-iw-set-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.elsa-iw-set-top .elsa-iw-hint { margin: 0; flex: 1; min-width: 220px; }
.elsa-iw-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.elsa-iw-set-card { border: 1px solid var(--eiw-border); border-radius: 12px; padding: 14px; background: #fff; transition: border-color .15s; }
.elsa-iw-set-card:hover { border-color: var(--eiw-primary); }
.elsa-iw-set-card p { color: #666; font-size: .9em; margin: 6px 0; }
.elsa-iw-set-card small { color: #999; }
.elsa-iw-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.elsa-iw-set-detail-head { justify-content: flex-start; margin-top: 12px; font-size: 1.15em; }
.elsa-iw-set-acts { display: flex; gap: 6px; margin-top: 10px; }
.elsa-iw-set-acts .elsa-iw-btn { padding: 6px 10px; font-size: 13px; }
.elsa-iw-set-modal { text-align: left; max-width: 460px; }
.elsa-iw-set-modal h3 { margin-top: 0; }
.elsa-iw-set-field { display: block; margin: 12px 0; }
.elsa-iw-set-field span { display: block; font-size: .88em; font-weight: 600; margin-bottom: 5px; }
.elsa-iw-set-field span b { color: var(--eiw-red); }
.elsa-iw-set-field input, .elsa-iw-set-field select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--eiw-border); border-radius: 8px; font-size: 15px; background: #fff; }
.elsa-iw-set-field input:focus, .elsa-iw-set-field select:focus, .elsa-iw-set-field textarea:focus { outline: none; border-color: var(--eiw-primary); box-shadow: 0 0 0 3px rgba(111, 66, 245, .15); }
.elsa-iw-set-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--eiw-border); border-radius: 8px; font-size: 14.5px; font-family: inherit; resize: vertical; }
.elsa-iw-set-addrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.elsa-iw-set-addrow input { flex: 1; min-width: 150px; padding: 9px 12px; border: 1px solid var(--eiw-border); border-radius: 8px; font-size: 14.5px; }
.elsa-iw-set-addrow .elsa-iw-btn { padding: 8px 14px; font-size: 14px; }
.elsa-iw-set-review { margin-top: 14px; }

/* --- Vocab Mindmap v1.9 --- */
.elsa-iw-mm-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.elsa-iw-mm-bar .elsa-iw-btn { padding: 7px 12px; font-size: 13.5px; }
.elsa-iw-mm-sep { flex: 1; }
.elsa-iw-mm-stage { position: relative; height: 560px; overflow: auto; border: 1px solid var(--eiw-border); border-radius: 12px; background: #fbfbfe; background-image: radial-gradient(#e6e6f2 1px, transparent 1px); background-size: 22px 22px; }
.elsa-iw-mm-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.elsa-iw-mm-nodes { position: absolute; top: 0; left: 0; width: 2000px; height: 1200px; }
.elsa-iw-mm-node { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--nc); color: var(--nc); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 10px; cursor: grab; user-select: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); touch-action: none; }
.elsa-iw-mm-node.is-root { background: var(--nc); color: #fff; font-size: 15px; }
.elsa-iw-mm-node.is-selected { box-shadow: 0 0 0 3px rgba(111, 66, 245, .30); }
.elsa-iw-mm-node:active { cursor: grabbing; }
.elsa-iw-mm-wordpick { border: 1px solid var(--eiw-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; background: #fff; }
.elsa-iw-mm-wordpick[hidden] { display: none; }
.elsa-iw-mm-wordpick strong { flex-basis: 100%; font-size: .85em; color: #666; }
.elsa-iw-mm-wordpick button { border: 1px solid var(--eiw-border); background: var(--eiw-bg); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-size: 13px; }
.elsa-iw-mm-wordpick button:hover { border-color: var(--eiw-primary); }

/* --- Breakout khỏi cột hẹp của block theme (v1.6.2) ---
   Widget lớn nới rộng tới 1140px, căn giữa bằng margin (không dùng transform
   để tránh xung đột theme và không phá position:sticky bên trong). */
@media (min-width: 1024px) {
	.elsa-iw-lab,
	.elsa-iw-video-list,
	.elsa-iw-hub,
	.elsa-iw-vocab-catalog,
	.elsa-iw-speaking-room,
	.elsa-iw-mindmap,
	.elsa-iw-vpractice,
	.elsa-iw-ipa {
		width: min(1140px, 92vw);
		max-width: none;
		margin-left: calc((100% - min(1140px, 92vw)) / 2);
		margin-right: 0;
	}
}

/* ===== VSTEP mock test (v1.24.0) =====
   Thi thử 4 kỹ năng. Tái sử dụng token .elsa-iw (màu, radius) + class dùng chung
   (.elsa-iw-btn, .elsa-iw-quiz-*, .elsa-wr-*, .elsa-iw-sr-score, .elsa-iw-table,
   .elsa-iw-stage, .elsa-iw-tag, .elsa-iw-recorder/.elsa-iw-record/.elsa-iw-playback).
   Class mới đều namespace .elsa-iw-vstep-*. */
@media (min-width: 1024px) {
	.elsa-iw-vstep { width: min(1140px, 92vw); max-width: none; margin-left: calc((100% - min(1140px, 92vw)) / 2); margin-right: 0; }
}
.elsa-iw-vstep { overflow-x: clip; } /* clip chặn tràn ngang mà KHÔNG tạo scroll container -> sticky header vẫn bám viewport; bảng rộng tự cuộn trong .elsa-iw-vstep-scroll */
.elsa-iw-vstep :focus-visible { outline: 2px solid var(--eiw-primary); outline-offset: 2px; border-radius: 6px; }
.elsa-iw-vstep-secbody:focus { outline: none; }
.elsa-iw-vstep-error { padding: 14px; border-radius: 8px; background: #fdecec; color: var(--eiw-red); }

/* Intro */
.elsa-iw-vstep-intro-list { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; }
.elsa-iw-vstep-intro-list li { border: 1px solid var(--eiw-border); border-radius: 10px; padding: 10px 14px; background: var(--eiw-bg); }
.elsa-iw-vstep-intro-ic { margin-right: 6px; }
.elsa-iw-vstep-intro .elsa-iw-btn { margin: 4px 8px 4px 0; }

/* Stepper (locked / active / done) */
.elsa-iw-vstep-stepper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.elsa-iw-vstep-step { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--eiw-border); border-radius: 999px; background: #fff; padding: 6px 14px; font-size: 0.9em; color: #777; }
button.elsa-iw-vstep-step { cursor: pointer; }
.elsa-iw-vstep-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e0edff; color: #1d4ed8; font-weight: 700; font-size: 0.82em; }
.elsa-iw-vstep-step.is-done { color: var(--eiw-green); border-color: var(--eiw-green); }
.elsa-iw-vstep-step.is-done .elsa-iw-vstep-step-n { background: var(--eiw-green); color: #fff; }
.elsa-iw-vstep-step.is-active { color: var(--eiw-primary); border-color: var(--eiw-primary); box-shadow: 0 0 0 2px rgba(17, 131, 214, .15); }
.elsa-iw-vstep-step.is-active .elsa-iw-vstep-step-n { background: var(--eiw-primary); color: #fff; }
.elsa-iw-vstep-step.is-locked { opacity: .55; }

/* Section header (sticky) + countdown clock */
.elsa-iw-vstep-sectionhead { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border-bottom: 2px solid var(--eiw-border); padding: 10px 0; margin-bottom: 14px; }
.elsa-iw-vstep-sectionhead-l { font-size: 1.05em; }
.elsa-iw-vstep-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15em; border: 1px solid var(--eiw-border); border-radius: 8px; padding: 6px 12px; background: var(--eiw-bg); min-width: 74px; text-align: center; }
.elsa-iw-vstep-clock.is-low { color: #fff; background: var(--eiw-red); border-color: var(--eiw-red); }
.elsa-iw-vstep-submit { flex: none; }

/* Parts / questions (Nghe) */
.elsa-iw-vstep-part { border: 1px solid var(--eiw-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.elsa-iw-vstep-part-title { margin: 0 0 10px; }
.elsa-iw-vstep-note { padding: 12px 14px; background: var(--eiw-bg); border-radius: 8px; color: #777; }
.elsa-iw-vstep-video { margin-bottom: 12px; }
.elsa-iw-vstep-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; display: block; }
.elsa-iw-vstep-transcript { margin-bottom: 12px; }
.elsa-iw-vstep-transcript-body p { margin: 6px 0; }
.elsa-iw-vstep-tr-en { display: block; font-weight: 600; }
.elsa-iw-vstep-tr-vi { display: block; color: #777; font-size: .92em; }
.elsa-iw-vstep-q { margin: 12px 0; }
.elsa-iw-vstep .elsa-iw-quiz-a.is-chosen { border-color: var(--eiw-primary); background: #eaf4fc; font-weight: 600; }
.elsa-iw-vstep .elsa-iw-quiz-a.is-correct { border-color: var(--eiw-green); background: #eef9f3; } /* đứng sau .is-chosen (cùng specificity) -> chấm đúng/sai vẫn xanh/đỏ ở light mode */
.elsa-iw-vstep .elsa-iw-quiz-a.is-wrong { border-color: var(--eiw-red); background: #fdecec; }

/* Reading */
.elsa-iw-vstep-passage { border: 1px solid var(--eiw-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.elsa-iw-vstep-passage-text { line-height: 1.8; margin-bottom: 6px; }
.elsa-iw-vstep-passage-text p { margin: 0 0 10px; }

/* Writing */
.elsa-iw-vstep-prompt { margin: 6px 0 0; }
.elsa-iw-vstep-task { margin-bottom: 22px; }
.elsa-iw-vstep-wc.elsa-iw-vstep-wc-low { color: var(--eiw-red); font-weight: 600; }
.elsa-iw-vstep-model { margin-top: 12px; border-left: 4px solid var(--eiw-green); background: #eef9f3; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.elsa-iw-vstep-model-h { margin: 0 0 6px; }
.elsa-iw-vstep-model p { margin: 0 0 8px; }

/* Self-rubric (fallback khi không có AI) */
.elsa-iw-vstep-rubric { margin-top: 12px; border: 1px dashed var(--eiw-border); border-radius: 10px; padding: 12px 14px; }
.elsa-iw-vstep-rubric-note { margin: 0 0 8px; }
.elsa-iw-vstep-rubric-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--eiw-border); }
.elsa-iw-vstep-rubric-row:first-of-type { border-top: 0; }
.elsa-iw-vstep-rubric-sel { padding: 6px 10px; border: 1px solid var(--eiw-border); border-radius: 8px; background: #fff; font-size: 15px; }

/* AI feedback panel */
.elsa-iw-vstep-ai { margin-top: 12px; border: 1px solid var(--eiw-border); border-radius: 10px; padding: 12px 14px; background: var(--eiw-bg); }
.elsa-iw-vstep-ai-head { font-weight: 600; margin-bottom: 8px; }
.elsa-iw-vstep-ai-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.elsa-iw-vstep-ai-fb { margin: 6px 0; }
.elsa-iw-vstep-ai-list { margin-top: 6px; }
.elsa-iw-vstep-ai-list ul { margin: 4px 0 0; padding-left: 20px; }
.elsa-iw-vstep-ai-list.is-plus strong { color: var(--eiw-green); }
.elsa-iw-vstep-ai-list.is-minus strong { color: #d99a00; }
.elsa-iw-vstep-scoring { color: #777; font-style: italic; margin-top: 10px; }

/* Speaking */
.elsa-iw-vstep-spk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.elsa-iw-vstep-hints { margin: 6px 0 12px; padding-left: 20px; color: #666; font-size: .92em; }
.elsa-iw-vstep-speaking-q { padding: 12px 0; border-top: 1px solid var(--eiw-border); }
.elsa-iw-vstep-speaking-q .elsa-iw-recorder { margin-top: 8px; }
.elsa-iw-vstep-fluency { margin-top: 6px; }

/* Review footer (giữa các phần) */
.elsa-iw-vstep-review { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--eiw-border); }
.elsa-iw-vstep-review-msg { flex: 1; min-width: 200px; font-weight: 600; }

/* Report card */
.elsa-iw-vstep-report { text-align: center; }
.elsa-iw-vstep-report-h { margin: 0 0 12px; }
.elsa-iw-vstep-band { display: inline-block; font-size: 1.8em; font-weight: 800; padding: 8px 22px; border-radius: 999px; margin: 4px 0 12px; border: 2px solid; }
.elsa-iw-vstep-band.s-hi { color: var(--eiw-green); border-color: var(--eiw-green); background: #eef9f3; }
.elsa-iw-vstep-band.s-mid { color: #d99a00; border-color: #d99a00; background: #fff8e6; }
.elsa-iw-vstep-band.s-lo { color: var(--eiw-red); border-color: var(--eiw-red); background: #fdecec; }
.elsa-iw-vstep-overall { font-size: 1.1em; margin: 8px 0 16px; }
.elsa-iw-vstep-report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.elsa-iw-vstep-report-cell { border: 1px solid var(--eiw-border); border-radius: 12px; padding: 12px 8px; background: var(--eiw-bg); }
.elsa-iw-vstep-report-lbl { font-size: .9em; color: #666; margin-bottom: 4px; }
.elsa-iw-vstep-report-max { font-size: .78em; color: #999; }
.elsa-iw-vstep-report-fb { text-align: left; border: 1px solid var(--eiw-border); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.elsa-iw-vstep-report-fb p { margin: 6px 0; }
.elsa-iw-vstep-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.elsa-iw-vstep-history { text-align: left; margin-top: 12px; }
.elsa-iw-vstep-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* bảng lịch sử tự cuộn ngang */
@media (max-width: 560px) { .elsa-iw-vstep-report-grid { grid-template-columns: repeat(2, 1fr); } }

/* Tôn trọng prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.elsa-iw-vstep, .elsa-iw-vstep * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Dark mode (stylesheet gốc chưa có) — chỉ scope trong .elsa-iw-vstep */
@media (prefers-color-scheme: dark) {
	.elsa-iw-vstep {
		--eiw-bg: #1c2431; --eiw-border: #2f3a4b; --eiw-primary: #4aa3e0; --eiw-primary-dark: #3a86bd;
		--eiw-green: #35c489; --eiw-red: #ef6f6b;
		background: #12171f; color: #e6e9ee;
	}
	.elsa-iw-vstep h3, .elsa-iw-vstep h4, .elsa-iw-vstep h5, .elsa-iw-vstep strong { color: #f2f4f8; }
	.elsa-iw-vstep .elsa-iw-btn { background: #1c2431; color: #e6e9ee; }
	.elsa-iw-vstep .elsa-iw-btn:hover { background: #263141; }
	.elsa-iw-vstep .elsa-iw-btn-primary { color: #fff !important; }
	.elsa-iw-vstep .elsa-iw-quiz-a { background: #171e28; color: #e6e9ee; }
	.elsa-iw-vstep .elsa-iw-quiz-a.is-chosen { background: #1d3448; }
	.elsa-iw-vstep .elsa-iw-quiz-a.is-correct { background: #123521; border-color: var(--eiw-green); }
	.elsa-iw-vstep .elsa-iw-quiz-a.is-wrong { background: #3a1b1b; border-color: var(--eiw-red); }
	.elsa-iw-vstep .elsa-iw-vstep-sectionhead, .elsa-iw-vstep .elsa-iw-vstep-step { background: #12171f; }
	.elsa-iw-vstep .elsa-iw-vstep-step-n { background: #22303f; color: #9cc7f0; }
	.elsa-iw-vstep .elsa-wr-text, .elsa-iw-vstep .elsa-iw-vstep-rubric-sel, .elsa-iw-vstep select { background: #171e28; color: #e6e9ee; }
	.elsa-iw-vstep .elsa-iw-tag { background: #22303f; color: #9cc7f0; }
	.elsa-iw-vstep .elsa-iw-vstep-model, .elsa-iw-vstep .elsa-iw-vstep-band.s-hi { background: #123521; }
	.elsa-iw-vstep .elsa-iw-vstep-band.s-mid { background: #33290a; }
	.elsa-iw-vstep .elsa-iw-vstep-band.s-lo, .elsa-iw-vstep .elsa-iw-vstep-error { background: #3a1b1b; }
	.elsa-iw-vstep .elsa-iw-hint, .elsa-iw-vstep .elsa
/* vstep dark wr-meta fix (v1.26.0) */
@media (prefers-color-scheme: dark) { .elsa-iw-vstep .elsa-wr-meta { color: #9aa4b2; } }