.tnq-quiz-app {
	--tnq-orange: #e0a23e;
	--tnq-orange-dark: #c98a2a;
	--tnq-green: #22c55e;
	--tnq-purple: #a855f7;
	--tnq-red: #ef4444;
	--tnq-border: #e2e2e2;
	--tnq-bg: #f4efe4;
	--tnq-text-muted: #8a8a8a;

	max-width: 1100px;
	margin: 24px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #222;
	background: var(--tnq-bg);
	padding: 20px;
	border-radius: 14px;
	box-sizing: border-box;
}
.tnq-quiz-app *, .tnq-quiz-app *::before, .tnq-quiz-app *::after { box-sizing: border-box; }

.tnq-loading { padding: 30px; text-align: center; color: #888; }

.tnq-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
}

/* ---------- Cột câu hỏi (bên trái) ---------- */
.tnq-main {
	flex: 1 1 480px;
	min-width: 280px;
	background: #fff;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.tnq-quiz-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: #333;
}
.tnq-q-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.tnq-q-number { font-weight: 700; font-size: 16px; }
.tnq-q-category { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:3px 9px; margin:0 0 9px; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:12px; font-weight:700; line-height:1.3; }
.tnq-flag-btn {
	border: 1px solid var(--tnq-purple);
	color: var(--tnq-purple);
	background: #fff;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s;
}
.tnq-flag-btn.active {
	background: var(--tnq-purple);
	color: #fff;
}
.tnq-q-text {
	font-size: 16px;
	line-height: 1.55;
	margin-bottom: 18px;
	font-weight: 600;
}
.tnq-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--tnq-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.tnq-opt:hover { border-color: #bcd0f7; background: #f8faff; }
.tnq-opt.selected { border-color: #2563eb; background: #eff4ff; }
.tnq-opt input { display: none; }
.tnq-opt-letter {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	border: 1px solid #c9c9c9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #555;
}
.tnq-opt.selected .tnq-opt-letter { background: #2563eb; border-color: #2563eb; color: #fff; }
.tnq-opt-text { font-size: 15px; }

.tnq-opt.correct { border-color: var(--tnq-green); background: #e9fbef; }
.tnq-opt.correct .tnq-opt-letter { background: var(--tnq-green); border-color: var(--tnq-green); color: #fff; }
.tnq-opt.wrong { border-color: var(--tnq-red); background: #fdeeee; }
.tnq-opt.wrong .tnq-opt-letter { background: var(--tnq-red); border-color: var(--tnq-red); color: #fff; }
.tnq-quiz-app.tnq-submitted .tnq-opt { cursor: default; }

.tnq-nav-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.tnq-nav-buttons button {
	border: 1px solid #d0d0d0;
	background: #fff;
	padding: 9px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #444;
}
.tnq-nav-buttons button:disabled { opacity: .4; cursor: not-allowed; }
.tnq-nav-buttons button:hover:not(:disabled) { border-color: #999; }

/* ---------- Cột điều hướng (bên phải) ---------- */
.tnq-side {
	flex: 0 0 320px;
	width: 320px;
	max-width: 100%;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 14px rgba(0,0,0,0.08);
	overflow: hidden;
}
.tnq-side-stats {
	display: flex;
	text-align: center;
}
.tnq-side-stats > div {
	flex: 1;
	padding: 16px 8px;
}
.tnq-side-stats > div:first-child { border-right: 1px solid var(--tnq-border); }
.tnq-stat-label {
	font-size: 12px;
	color: var(--tnq-text-muted);
	margin-bottom: 6px;
}
.tnq-stat-value {
	font-size: 22px;
	font-weight: 700;
	color: #222;
}
.tnq-timer-value {
	font-size: 22px;
	font-weight: 700;
	color: #6b7c8f;
	font-variant-numeric: tabular-nums;
}
.tnq-timer-value.tnq-time-warning { color: var(--tnq-red); }

.tnq-grid-wrap {
	padding: 16px 18px 4px;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden; /* tránh sinh scrollbar ngang che số câu cuối hàng */
	width: 100%;
	box-sizing: border-box;
	/* Dành sẵn chỗ cho scrollbar dọc để nó không đè lên cột cuối cùng */
	scrollbar-gutter: stable;
}
.tnq-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}
.tnq-grid-item {
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid #d8d8d8;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #444;
	box-sizing: border-box;
}
.tnq-grid-item.answered { background: var(--tnq-green); border-color: var(--tnq-green); color: #fff; }
.tnq-grid-item.flagged { background: var(--tnq-purple); border-color: var(--tnq-purple); color: #fff; }
.tnq-grid-item.current { box-shadow: 0 0 0 2px #2563eb; }
.tnq-grid-item.correct-answer { background: var(--tnq-green); border-color: var(--tnq-green); color: #fff; }
.tnq-grid-item.wrong-answer { background: var(--tnq-red); border-color: var(--tnq-red); color: #fff; }

.tnq-submit-wrap { padding: 18px; }
.tnq-submit-btn {
	width: 100%;
	background: var(--tnq-orange);
	color: #fff;
	border: none;
	padding: 13px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .5px;
	cursor: pointer;
	text-transform: uppercase;
}
.tnq-submit-btn:hover { background: var(--tnq-orange-dark); }
.tnq-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.tnq-legend {
	padding: 4px 18px 18px;
	font-size: 13px;
	color: #444;
}
.tnq-legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.tnq-legend-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: 0 0 16px;
	border: 1px solid #d8d8d8;
}
.tnq-legend-dot.answered { background: var(--tnq-green); border-color: var(--tnq-green); }
.tnq-legend-dot.flagged { background: var(--tnq-purple); border-color: var(--tnq-purple); }

/* ---------- Chế độ liệt kê tất cả câu hỏi (≤30 câu, không có hình ảnh) ---------- */
.tnq-list-items { margin-top: 4px; }
.tnq-list-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--tnq-border);
	scroll-margin-top: 16px;
}
.tnq-list-item:first-child { padding-top: 0; }
.tnq-list-item:last-child { border-bottom: none; padding-bottom: 4px; }
.tnq-list-item .tnq-q-header { margin-bottom: 12px; }
.tnq-list-item .tnq-q-text { margin-bottom: 14px; }
.tnq-list-item.tnq-list-item-highlight .tnq-q-number {
	color: var(--tnq-orange-dark);
}
/* Nút "tnq-submit-btn" đã được style chung ở trên; ở đây chỉ cần khoảng cách cho khối cuối danh sách. */
.tnq-list-bottom-submit { padding: 6px 0 4px; }

.tnq-result-box {
	margin: 18px 24px 0;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 16px;
}
.tnq-result-box.tnq-pending { background: #fff7e6; color: #92660a; border: 1px solid #f4dda0; }
.tnq-result-box.tnq-done { background: #e9fbef; color: #15803d; border: 1px solid #a7e6bf; }

@media (max-width: 820px) {
	.tnq-side { flex: 1 1 100%; width: 100%; }
}

/* Công thức MathJax: không làm tràn chiều rộng khi gặp phân số/công thức dài. */
.tnq-q-text mjx-container,
.tnq-opt-text mjx-container {
	max-width: 100%;
}
.tnq-q-text mjx-container[display="true"] {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0;
}