/* Tra cứu kết quả trúng tuyển — mobile-first (380px), màu theo docs/brand.md. */
.tt, .tt-chua {
	--tt-chinh: var(--wp--preset--color--primary, #007A29);
	--tt-dam: var(--wp--preset--color--primary-dark, #004D1A);
	--tt-nhan: var(--wp--preset--color--accent, #996633);
	--tt-nhan-dam: var(--wp--preset--color--accent-dark, #734D26);
	--tt-kem: var(--wp--preset--color--cream-soft, #FFFFE6);
	--tt-chu: var(--wp--preset--color--contrast, #1B2A21);
	--tt-phu: var(--wp--preset--color--muted, #4F5E55);
	--tt-loi: #B3261E;
	max-width: 36rem;
	margin-inline: auto;
}
.tt-form {
	display: grid;
	gap: 1rem;
	padding: 1.25rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #D5DDD8);
	border-top: 4px solid var(--tt-chinh);
	border-radius: 8px;
	background: #fff;
}
.tt-form[hidden], .tt-o[hidden] { display: none; }
.tt-form__dan { margin: 0; color: var(--tt-phu); font-size: .9375rem; }
.tt-o { display: grid; gap: .375rem; }
.tt-o label { font-weight: 600; }
.tt-goi-y { font-weight: 400; color: var(--tt-phu); font-size: .875rem; }
.tt-o input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: .625rem .75rem;
	border: 1px solid var(--tt-phu);
	border-radius: 6px;
	font: inherit;
	font-size: 1.125rem; /* ≥ 16px: iOS không tự phóng to khi chạm */
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	background: #fff;
	color: var(--tt-chu);
}
.tt-o input[aria-invalid="true"] { border-color: var(--tt-loi); box-shadow: 0 0 0 1px var(--tt-loi); }
.tt-loi { margin: 0; color: var(--tt-loi); font-size: .875rem; }
.tt-loi[hidden] { display: none; }
.tt-chon { display: flex; align-items: center; gap: .625rem; min-height: 44px; cursor: pointer; }
.tt-chon input { width: 1.25rem; height: 1.25rem; accent-color: var(--tt-chinh); margin: 0; }

.tt-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.25rem;
	border: 2px solid var(--tt-chinh);
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.tt-nut--chinh { background: var(--tt-chinh); color: #fff; }
.tt-nut--chinh:hover { background: var(--tt-dam); border-color: var(--tt-dam); color: #fff; }
.tt-nut--phu { background: #fff; color: var(--tt-chinh); }
.tt-nut--phu:hover { background: var(--wp--preset--color--green-soft, #E8F5EC); }
.tt-nut:disabled { cursor: progress; opacity: .85; }
.tt-nut.is-dang-tai::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: tt-quay .7s linear infinite;
}
@keyframes tt-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tt-nut.is-dang-tai::before { animation-duration: 2s; } }

.tt-vung:focus { outline: none; }
.tt-vung:not(:empty) { margin-top: 1rem; }
.tt-thong-bao {
	margin: 0;
	padding: .875rem 1rem;
	border-left: 4px solid var(--tt-nhan);
	border-radius: 4px;
	background: var(--wp--preset--color--sky-soft, #EEF4FF);
	color: var(--tt-chu);
}
.tt-thong-bao--loi { border-left-color: var(--tt-loi); background: #FDECEA; }

/* Thẻ chúc mừng: khung đôi xanh lá – nâu, nền kem, logo. Vừa khung 348px (380 − lề 2×16). */
.tt-the {
	position: relative;
	padding: 6px;
	border: 2px solid var(--tt-chinh);
	border-radius: 12px;
	background: #fff;
	text-align: center;
	color: var(--tt-chu);
}
.tt-the__dau, .tt-the__than { border-inline: 1px solid var(--tt-nhan); }
.tt-the__dau {
	padding: 1rem .75rem .75rem;
	border-top: 1px solid var(--tt-nhan);
	border-radius: 7px 7px 0 0;
	background: var(--tt-kem);
}
.tt-the__logo { display: block; width: 72px; height: 72px; margin: 0 auto .5rem; }
.tt-the__truong {
	text-wrap: balance;
	margin: 0;
	font-weight: 700;
	font-size: .875rem;
	line-height: 1.35;
	letter-spacing: .02em;
	color: var(--tt-dam);
}
.tt-the__than {
	padding: 1rem .875rem 1.25rem;
	border-bottom: 1px solid var(--tt-nhan);
	border-radius: 0 0 7px 7px;
	background:
		linear-gradient(90deg, transparent, var(--tt-nhan) 30%, var(--tt-nhan) 70%, transparent) top center / 60% 2px no-repeat,
		var(--tt-kem);
}
.tt-the__chuc-mung {
	margin: .25rem 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--tt-nhan-dam);
}
.tt-the__ten { margin: 0 0 1rem; line-height: 1.3; }
.tt-the__ho-ten { font-size: 1.5rem; font-weight: 700; color: var(--tt-dam); }
.tt-the__trung-tuyen {
	padding: .875rem .75rem;
	border-radius: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border, #D5DDD8);
}
.tt-the__nhan { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .08em; color: var(--tt-nhan-dam); }
.tt-the__nganh { text-wrap: balance; margin: .25rem 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--tt-chinh); text-transform: uppercase; }
.tt-the__nv { margin: 0; font-weight: 600; }

.tt-ghi-chu { margin: 1rem 0; font-size: .875rem; color: var(--tt-phu); }
.tt-nut-nhom { display: grid; gap: .75rem; }
@media (min-width: 600px) {
	.tt-form { padding: 1.5rem; }
	.tt-nut-nhom { grid-template-columns: 1fr 1fr; }
	.tt-the__ho-ten { font-size: 1.75rem; }
	.tt-the__truong {
	text-wrap: balance; font-size: 1rem; }
}

.tt-chua {
	padding: 1.25rem 1rem;
	border-left: 4px solid var(--tt-nhan);
	border-radius: 4px;
	background: var(--tt-kem);
}
.tt-chua p { margin: 0; }
.tt-chua__tieu-de { font-weight: 700; font-size: 1.125rem; color: var(--tt-dam); margin-bottom: .375rem !important; }

/* Cloudflare Turnstile: giữ chỗ trước khi widget hiện (tránh xô lệch bố cục). */
.tt-turnstile { min-height: 65px; }

/* Khung "Dữ liệu thử cho bản demo" (option hcmunre_tt_hien_du_lieu_thu). */
.tt-thu {
	margin-top: 1.25rem;
	padding: 1rem;
	border: 1px dashed var(--tt-nhan);
	border-radius: 8px;
	background: var(--tt-kem);
	font-size: .9375rem;
}
.tt-thu__td { margin: 0; font-weight: 700; color: var(--tt-nhan-dam); }
.tt-thu__dan { margin: .25rem 0 .75rem; color: var(--tt-phu); font-size: .875rem; }
.tt-thu__ds { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.tt-thu__muc {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .125rem .75rem;
	align-items: center;
	padding: .625rem .75rem;
	border-radius: 6px;
	background: #fff;
}
.tt-thu__ten { font-weight: 600; }
.tt-thu__mong { font-weight: 400; color: var(--tt-phu); }
.tt-thu__so { grid-column: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tt-thu__nut {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 64px;
	min-height: 44px;
	padding: .5rem .875rem;
	border: 2px solid var(--tt-chinh);
	border-radius: 6px;
	background: #fff;
	color: var(--tt-chinh);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.tt-thu__nut:hover { background: var(--wp--preset--color--green-soft, #E8F5EC); }