/* TCBD DISC — style tối giản, điều khiển bằng CSS variable.
 * Trình dựng trang đổi màu qua --disc-primary; không cần đụng vào file này.
 */

.tcbd-disc {
	--disc-primary: #1f5f8b;
	--disc-primary-soft: #eaf2f8;
	--disc-radius: 10px;
	--disc-border: #dde3e9;
	--disc-text: inherit;
	--disc-muted: #6b7783;
	--disc-heading: #111827;
	--disc-danger: #b3261e;

	color: var(--disc-text);
	line-height: 1.6;
}

.tcbd-disc *,
.tcbd-disc *::before,
.tcbd-disc *::after {
	box-sizing: border-box;
}

.tcbd-disc__boot {
	color: var(--disc-muted);
	padding: 24px 0;
}

/* Tiêu đề ------------------------------------------------------------- */

.tcbd-disc__head {
	margin-bottom: 20px;
}

.tcbd-disc__title {
	margin: 0 0 6px;
	font-size: 1.5rem;
	line-height: 1.3;
}

.tcbd-disc__intro {
	margin: 0;
	color: var(--disc-muted);
}

/* ===================================================================
 * LỚP CHẮN THEME
 * -------------------------------------------------------------------
 * Rất nhiều theme WordPress còn giữ luật clearfix kiểu cũ:
 *     .container::before, .container::after { content:" "; display:table; }
 * Trong một container grid hoặc flex, hai pseudo-element đó KHÔNG bị bỏ qua
 * mà trở thành ô thật, chiếm mất vị trí đầu và cuối lưới. Hậu quả là mọi thứ
 * bị đẩy lệch đi một ô.
 *
 * Widget này không dùng ::before/::after ở bất kỳ đâu, nên vô hiệu hoá toàn
 * bộ trong phạm vi .tcbd-disc là an toàn tuyệt đối.
 * =================================================================== */

.tcbd-disc::before,
.tcbd-disc::after,
.tcbd-disc *::before,
.tcbd-disc *::after {
	content: none !important;
	display: none !important;
}

/* Theme hay áp các luật này lên mọi thẻ; chúng phá vỡ lưới của widget. */
.tcbd-disc div,
.tcbd-disc p,
.tcbd-disc label,
.tcbd-disc span,
.tcbd-disc input {
	float: none;
	clear: none;
	max-width: 100%;
}

.tcbd-disc__grid > *,
.tcbd-disc__answers > * {
	/* Không có dòng này, nội dung dài sẽ làm cột phình ra khỏi khung. */
	min-width: 0;
}

/* Tiêu đề cấp độ — chỉ ở đầu mỗi level (phần 1 và phần 3) ------------- */

.tcbd-disc__level {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 12px;
	padding: 9px 20px;
	border-radius: 18px;
	background: var(--disc-primary);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.4;
	/* Nhãn ở trang Hoàn thành khá dài nên phải xuống dòng được thay vì
	   tràn ra khỏi khung. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Thẻ ----------------------------------------------------------------- */

.tcbd-disc__card {
	border: 1px solid var(--disc-border);
	border-radius: var(--disc-radius);
	padding: 20px;
	margin-bottom: 16px;
}

/* Biểu mẫu thông tin --------------------------------------------------- */

.tcbd-disc__grid {
	display: grid;
	grid-template-columns: repeat(var(--disc-field-cols, 2), minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.tcbd-disc__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tcbd-disc__label {
	font-weight: 500;
	font-size: 0.95rem;
}

.tcbd-disc__req {
	color: var(--disc-danger);
	font-style: normal;
	margin-left: 3px;
}

.tcbd-disc__field input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid var(--disc-border);
	border-radius: calc(var(--disc-radius) - 2px);
	font: inherit;
	background: #fff;
	color: inherit;
}

.tcbd-disc__field input.is-invalid {
	border-color: var(--disc-danger);
	background: #fff6f5;
}

.tcbd-disc__field input:focus-visible,
.tcbd-disc__btn:focus-visible,
.tcbd-disc__answer:focus-within {
	outline: 2px solid var(--disc-primary);
	outline-offset: 2px;
}

/* Tiến độ -------------------------------------------------------------- */

.tcbd-disc__progress {
	margin-bottom: 20px;
}

.tcbd-disc__progress-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: var(--disc-muted);
	margin-bottom: 6px;
}

.tcbd-disc__progress-track {
	height: 6px;
	border-radius: 999px;
	background: var(--disc-primary-soft);
	overflow: hidden;
}

.tcbd-disc__progress-fill {
	height: 100%;
	background: var(--disc-primary);
	transition: width 0.25s ease;
}

/* Câu hỏi -------------------------------------------------------------- */

.tcbd-disc__q {
	border: 1px solid var(--disc-border);
	border-radius: var(--disc-radius);
	padding: 16px 18px 18px;
	margin: 0 0 12px;
	min-width: 0;
}

.tcbd-disc__q.is-missing {
	border-color: var(--disc-danger);
}

.tcbd-disc__q-prompt {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0;
	/* Theme hay viết hoa toàn bộ tiêu đề và legend. Câu hỏi phải giữ nguyên
	   cách viết gốc, vì viết hoa hết rất khó đọc với câu dài tiếng Việt. */
	text-transform: none;
	letter-spacing: normal;
	/* Câu hỏi phải đọc trước, đáp án đọc sau: to hơn, đậm hơn, đậm màu hơn. */
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--disc-heading, #111827);
	float: none;
	width: auto;
}

.tcbd-disc__q-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--disc-primary-soft);
	color: var(--disc-primary);
	font-size: 0.8rem;
	font-weight: 600;
	flex: none;
}

.tcbd-disc__answers {
	display: grid;
	grid-template-columns: repeat(var(--disc-answer-cols, 2), minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
	align-items: stretch;
}

.tcbd-disc__answer {
	/* BẮT BUỘC. Ô radio bên trong dùng position:absolute; thiếu dòng này thì
	   khối chứa của nó là một tổ tiên bất kỳ do theme đặt position:relative,
	   và trình duyệt sẽ cuộn tới đó khi ô radio nhận focus lúc bấm chọn. */
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--disc-muted);
	border: 1px solid var(--disc-border);
	border-radius: calc(var(--disc-radius) - 2px);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tcbd-disc__answer:hover {
	border-color: var(--disc-primary);
}

.tcbd-disc__answer.is-selected {
	border-color: var(--disc-primary);
	background: var(--disc-primary-soft);
	color: inherit;
	font-weight: 500;
}

/* Ẩn ô radio nhưng vẫn cho bàn phím dùng được. Ghim vào góc trên trái của
   chính label, kích thước 1px, để nếu trình duyệt có cuộn tới focus thì cũng
   là cuộn tới đúng đáp án đang bấm. */
.tcbd-disc__answer input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
}

.tcbd-disc__answer i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid var(--disc-border);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	flex: none;
}

.tcbd-disc__answer.is-selected i {
	background: var(--disc-primary);
	border-color: var(--disc-primary);
	color: #fff;
}

/* Điều khoản ----------------------------------------------------------- */

.tcbd-disc__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

/* Mời làm bài mới ------------------------------------------------------ */

.tcbd-disc__restart {
	margin-top: 8px;
}

.tcbd-disc__restart-ask {
	margin: 4px 0 0;
	font-weight: 500;
}

.tcbd-disc__restart .tcbd-disc__actions {
	margin-top: 12px;
}

/* Nút ------------------------------------------------------------------ */

.tcbd-disc__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.tcbd-disc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: calc(var(--disc-radius) - 2px);
	border: 1px solid var(--disc-primary);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.tcbd-disc__btn--primary {
	background: var(--disc-primary);
	color: #fff;
}

.tcbd-disc__btn--ghost {
	background: transparent;
	color: var(--disc-primary);
}

.tcbd-disc__btn:hover {
	opacity: 0.88;
}

.tcbd-disc__btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* Thông báo ------------------------------------------------------------ */

.tcbd-disc__notice {
	padding: 12px 16px;
	border-radius: calc(var(--disc-radius) - 2px);
	margin: 12px 0;
	font-size: 0.95rem;
}

.tcbd-disc__notice--error {
	background: #fdecea;
	color: var(--disc-danger);
}

.tcbd-disc__notice--info {
	background: var(--disc-primary-soft);
	color: var(--disc-primary);
}

.tcbd-disc__muted {
	color: var(--disc-muted);
	margin: 8px 0 0;
}

/* Bẫy bot -------------------------------------------------------------- */

/* Bẫy bot: giấu bằng clip thay vì đẩy ra ngoài màn hình bằng left:-9999px,
   vì toạ độ âm cũng làm trình duyệt cuộn nếu ô này lỡ nhận focus. */
.tcbd-disc__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Điện thoại ----------------------------------------------------------- */

@media (max-width: 640px) {
	.tcbd-disc__grid,
	.tcbd-disc__answers {
		grid-template-columns: 1fr;
	}

	.tcbd-disc__actions .tcbd-disc__btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 640px) {
	.tcbd-disc__level {
		font-size: 0.95rem;
		padding: 7px 14px;
	}

	.tcbd-disc__q-prompt {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcbd-disc * {
		transition: none !important;
	}
}