/*
 * CSS cho template MẶC ĐỊNH của tntam-driving-quiz.
 *
 * Chỉ nạp khi template mặc định thật sự chạy. Theme override thì file này không
 * bao giờ tải. Mọi biến đều có giá trị dự phòng để chạy được với theme bất kỳ.
 *
 * Vùng bấm tối thiểu 44px: học viên nhiều lứa tuổi, làm bài trên điện thoại,
 * và bấm nhầm đáp án trong lúc tính giờ là mất điểm thật.
 */

.tntam-quiz {
	--tntam-q-ink: var(--navy-800, #061a38);
	--tntam-q-brand: var(--navy-600, #0b2e63);
	--tntam-q-action: var(--terra-500, #c85a2b);
	--tntam-q-line: var(--neutral-200, #ddd8cd);
	--tntam-q-muted: var(--neutral-500, #7d7364);
	--tntam-q-surface: var(--neutral-0, #fff);
	--tntam-q-ok: var(--success-500, #2e8b57);
	--tntam-q-ok-bg: var(--success-100, #dff0e5);
	--tntam-q-bad: var(--danger-500, #c43d3d);
	--tntam-q-bad-bg: #f7dede;

	color: var(--tntam-q-ink);
}

.tntam-quiz__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.15;
}

.tntam-quiz__lead {
	margin: 0 0 24px;
	max-width: 62ch;
}

.tntam-quiz__panel {
	display: grid;
	gap: 28px;
	padding: 24px;
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 14px;
}

.tntam-quiz__group h3 {
	margin: 0 0 4px;
	font-size: 16px;
}

.tntam-quiz__hint {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--tntam-q-muted);
}

.tntam-quiz__group--foot {
	border-top: 1px solid var(--tntam-q-line);
	padding-top: 20px;
	display: grid;
	gap: 14px;
}

.tntam-quiz__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
}

.tntam-quiz__choices--two {
	grid-template-columns: 1fr 1fr;
	max-width: 380px;
}

.tntam-quiz__choice {
	min-height: 48px;
	padding: 12px 10px;
	font: inherit;
	font-weight: 700;
	color: var(--tntam-q-ink);
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 10px;
	cursor: pointer;
}

.tntam-quiz__choice--stack {
	display: grid;
	gap: 4px;
	justify-items: center;
}

.tntam-quiz__choice.is-active {
	background: var(--tntam-q-brand);
	border-color: var(--tntam-q-brand);
	color: #fff;
}

.tntam-quiz__choice-num {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.tntam-quiz__choice-sub {
	font-size: 12.5px;
	font-weight: 600;
}

.tntam-quiz__summary {
	margin: 0;
	font-size: 15px;
}

.tntam-quiz__button {
	min-height: 44px;
	padding: 11px 20px;
	font: inherit;
	font-weight: 700;
	color: var(--tntam-q-ink);
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 10px;
	cursor: pointer;
}

.tntam-quiz__button--primary {
	background: var(--tntam-q-action);
	border-color: var(--tntam-q-action);
	color: #fff;
}

.tntam-quiz__button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.tntam-quiz__button:focus-visible,
.tntam-quiz__choice:focus-visible,
.tntam-quiz__option:focus-visible,
.tntam-quiz__cell:focus-visible {
	outline: 3px solid var(--tntam-q-action);
	outline-offset: 2px;
}

.tntam-quiz__error {
	margin: 0;
	padding: 10px 14px;
	background: var(--tntam-q-bad-bg);
	border: 1px solid var(--tntam-q-bad);
	border-radius: 8px;
	font-size: 14.5px;
}

.tntam-quiz__notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--tntam-q-ok-bg);
	border: 1px solid var(--tntam-q-line);
	border-radius: 8px;
	font-size: 14.5px;
}

.tntam-quiz__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.tntam-quiz__counter {
	margin: 0;
	font-weight: 700;
}

.tntam-quiz__timer {
	margin: 0;
	padding: 8px 16px;
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: var(--tntam-q-ink);
	border-radius: 10px;
}

.tntam-quiz__timer.is-urgent {
	background: var(--tntam-q-bad);
}

.tntam-quiz__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.tntam-quiz__question {
	flex: 2 1 340px;
	padding: 22px 20px;
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 14px;
}

.tntam-quiz__side {
	flex: 1 1 260px;
	display: grid;
	gap: 14px;
	padding: 20px;
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 14px;
}

.tntam-quiz__side h3 {
	margin: 0;
	font-size: 15px;
}

.tntam-quiz__qhead {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.tntam-quiz__qnum {
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: var(--tntam-q-brand);
	border-radius: 6px;
}

.tntam-quiz__flag {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tntam-q-bad);
	background: var(--tntam-q-bad-bg);
	border: 1px solid var(--tntam-q-bad);
	border-radius: 6px;
}

.tntam-quiz__qtext {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
}

.tntam-quiz__qimage {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 18px;
	border: 1px solid var(--tntam-q-line);
	border-radius: 10px;
}

.tntam-quiz__options {
	display: grid;
	gap: 10px;
}

.tntam-quiz__option {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	font: inherit;
	font-size: 15.5px;
	line-height: 1.5;
	text-align: left;
	color: var(--tntam-q-ink);
	background: var(--tntam-q-surface);
	border: 2px solid var(--neutral-300, #c4bdaf);
	border-radius: 10px;
	cursor: pointer;
}

.tntam-quiz__option.is-chosen {
	border-color: var(--tntam-q-brand);
	background: var(--navy-50, #eef2f9);
}

.tntam-quiz__option.is-correct {
	border-color: var(--tntam-q-ok);
	background: var(--tntam-q-ok-bg);
}

.tntam-quiz__option.is-wrong {
	border-color: var(--tntam-q-bad);
	background: var(--tntam-q-bad-bg);
}

.tntam-quiz__option.is-muted {
	color: var(--tntam-q-muted);
	border-color: var(--tntam-q-line);
}

.tntam-quiz__option[disabled] {
	cursor: default;
}

.tntam-quiz__key {
	flex: none;
	font-weight: 800;
}

.tntam-quiz__explain {
	margin-top: 16px;
	padding: 14px 18px;
	font-size: 14.5px;
	border-radius: 10px;
	border: 1px solid var(--tntam-q-line);
	background: var(--neutral-50, #f6f4f0);
}

.tntam-quiz__explain.is-correct {
	border-color: var(--tntam-q-ok);
	background: var(--tntam-q-ok-bg);
}

.tntam-quiz__explain.is-wrong {
	border-color: var(--warning-700, #8a5e0f);
	background: var(--warning-100, #f6e8cc);
}

.tntam-quiz__nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.tntam-quiz__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.tntam-quiz__stat {
	padding: 10px 12px;
	border: 1px solid var(--tntam-q-line);
	border-radius: 10px;
}

.tntam-quiz__stat-num {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tntam-quiz__stat-label {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--tntam-q-muted);
}

.tntam-quiz__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
}

.tntam-quiz__cell {
	min-height: 40px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tntam-q-ink);
	background: var(--tntam-q-surface);
	border: 1.5px solid var(--neutral-300, #c4bdaf);
	border-radius: 8px;
	cursor: pointer;
}

.tntam-quiz__cell.is-done {
	border-color: var(--tntam-q-brand);
	background: var(--navy-50, #eef2f9);
}

.tntam-quiz__cell.is-correct {
	color: var(--tntam-q-ok);
	border-color: var(--tntam-q-ok);
	background: var(--tntam-q-ok-bg);
}

.tntam-quiz__cell.is-wrong {
	color: var(--tntam-q-bad);
	border-color: var(--tntam-q-bad);
	background: var(--tntam-q-bad-bg);
}

.tntam-quiz__cell.is-current {
	outline: 3px solid var(--tntam-q-action);
	outline-offset: 1px;
}

.tntam-quiz__result {
	display: grid;
	gap: 16px;
	justify-items: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 24px;
	text-align: center;
	background: var(--tntam-q-surface);
	border: 2px solid var(--tntam-q-line);
	border-radius: 14px;
}

.tntam-quiz__result.is-passed {
	border-color: var(--tntam-q-ok);
}

.tntam-quiz__result.is-failed {
	border-color: var(--tntam-q-bad);
}

.tntam-quiz__verdict {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
}

.tntam-quiz__result.is-passed .tntam-quiz__verdict {
	color: var(--tntam-q-ok);
}

.tntam-quiz__result.is-failed .tntam-quiz__verdict {
	color: var(--tntam-q-bad);
}

.tntam-quiz__score {
	margin: 0;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tntam-quiz__note {
	margin: 0;
	max-width: 44ch;
	font-size: 15.5px;
}

.tntam-quiz__result .tntam-quiz__stats {
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}