/**
 * Nền tảng: reset, kiểu chữ, biểu mẫu, nút.
 */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--svh-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
	/*
	 * clip cắt tràn ngang mà KHÔNG tạo ngữ cảnh cuộn như hidden, nên
	 * position:sticky của header vẫn hoạt động. Trình duyệt cũ không hiểu
	 * clip sẽ bỏ qua dòng này và dùng overflow-x:hidden của <body>.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--svh-bg);
	color: var(--svh-text);
	font-family: var(--svh-font-body);
	font-size: var(--svh-fs-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4 {
	font-family: var(--svh-font-heading);
	font-weight: 600;
	line-height: 1.25;
	color: var(--svh-forest-dark);
	margin: 0 0 var(--svh-sp-3);
	overflow-wrap: break-word;
}

h1 { font-size: var(--svh-fs-3xl); }
h2 { font-size: var(--svh-fs-2xl); }
h3 { font-size: var(--svh-fs-xl); }
h4 { font-size: var(--svh-fs-lg); }

p {
	margin: 0 0 var(--svh-sp-3);
}

a {
	color: var(--svh-forest);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--svh-transition);
}

a:hover,
a:focus {
	color: var(--svh-forest-dark);
}

/* Ô focus rõ ràng — bắt buộc để dùng được bằng bàn phím */
:focus-visible {
	outline: 2px solid var(--svh-champagne-dark);
	outline-offset: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--svh-line);
	margin: var(--svh-sp-5) 0;
}

blockquote {
	margin: var(--svh-sp-4) 0;
	padding: var(--svh-sp-2) 0 var(--svh-sp-2) var(--svh-sp-4);
	border-left: 3px solid var(--svh-champagne);
	font-family: var(--svh-font-heading);
	font-size: var(--svh-fs-lg);
	color: var(--svh-forest-dark);
}

/*
 * Lưới an toàn chống tràn ngang trên điện thoại: nội dung do quản trị viên
 * dán vào (iframe YouTube, bảng, khối mã, URL dài không có dấu cách) là
 * nguồn tràn phổ biến nhất và không kiểm soát được từ template.
 */
iframe,
embed,
object,
canvas {
	max-width: 100%;
}

pre,
code {
	max-width: 100%;
	overflow-wrap: break-word;
}

pre {
	overflow-x: auto;
}

p, li, dd, dt, figcaption, blockquote {
	overflow-wrap: break-word;
}

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: var(--svh-sp-4) 0;
	font-size: var(--svh-fs-sm);
	/* Bảng nhiều cột cuộn ngang trong khung của nó, không đẩy cả trang. */
	display: block;
	overflow-x: auto;
}

@media (min-width: 768px) {
	table {
		display: table;
	}
}

th, td {
	padding: var(--svh-sp-2);
	border-bottom: 1px solid var(--svh-line);
	text-align: left;
}

th {
	font-weight: 600;
	color: var(--svh-forest-dark);
}

/* Chỉ hiện cho trình đọc màn hình */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.svh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--svh-sp-2) var(--svh-sp-3);
	background: var(--svh-forest);
	color: var(--svh-white);
	text-decoration: none;
}

.svh-skip:focus {
	left: var(--svh-sp-2);
	top: var(--svh-sp-2);
	color: var(--svh-white);
}

/* ---------------------------------------------------------------------
 * Biểu mẫu
 * ------------------------------------------------------------------ */

input, select, textarea, button {
	font-family: inherit;
	font-size: var(--svh-fs-base);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--svh-line);
	border-radius: var(--svh-radius);
	background: var(--svh-white);
	color: var(--svh-text);
	transition: border-color var(--svh-transition), box-shadow var(--svh-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--svh-forest);
	box-shadow: 0 0 0 3px rgba(47, 79, 62, .12);
	outline: none;
}

textarea {
	resize: vertical;
	min-height: 90px;
}

label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--svh-fs-sm);
	font-weight: 500;
	color: var(--svh-forest-dark);
}

.svh-required {
	color: var(--svh-champagne-dark);
}

/* Honeypot: ẩn khỏi mắt người dùng nhưng bot vẫn thấy trong DOM */
.svh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.svh-field {
	margin: 0 0 var(--svh-sp-3);
}

.svh-field__error {
	display: block;
	min-height: 1em;
	margin-top: 0.25rem;
	font-size: var(--svh-fs-xs);
	color: #A32424;
}

.svh-field.has-error input,
.svh-field.has-error select {
	border-color: #A32424;
}

.svh-field--consent label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--svh-fs-sm);
	color: var(--svh-text-muted);
	line-height: 1.5;
}

.svh-field--consent input {
	width: auto;
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

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

.svh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--svh-radius);
	font-size: var(--svh-fs-sm);
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--svh-transition), color var(--svh-transition), border-color var(--svh-transition), transform var(--svh-transition);
}

.svh-btn:hover {
	transform: translateY(-1px);
}

.svh-btn--primary {
	background: var(--svh-forest);
	color: var(--svh-white);
}

.svh-btn--primary:hover,
.svh-btn--primary:focus {
	background: var(--svh-forest-dark);
	color: var(--svh-white);
}

/* Nút vàng luôn dùng chữ than chì: trắng trên champagne chỉ đạt 2.4:1 */
.svh-btn--gold {
	background: var(--svh-champagne);
	color: var(--svh-charcoal);
}

.svh-btn--gold:hover,
.svh-btn--gold:focus {
	background: #B08A44;
	color: var(--svh-charcoal);
}

.svh-btn--ghost {
	background: transparent;
	border-color: var(--svh-forest);
	color: var(--svh-forest);
}

.svh-btn--ghost:hover,
.svh-btn--ghost:focus {
	background: var(--svh-forest);
	color: var(--svh-white);
}

.svh-section--dark .svh-btn--ghost {
	border-color: var(--svh-sand-light);
	color: var(--svh-sand-light);
}

.svh-section--dark .svh-btn--ghost:hover {
	background: var(--svh-sand-light);
	color: var(--svh-forest-dark);
}

button:disabled,
.svh-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

/* ---------------------------------------------------------------------
 * Nhãn dữ liệu chưa công bố — thành phần then chốt về tính minh bạch
 * ------------------------------------------------------------------ */

.svh-pending {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	background: var(--svh-sand);
	border-radius: var(--svh-radius);
	font-size: var(--svh-fs-xs);
	font-weight: 500;
	color: var(--svh-stone);
	font-style: normal;
}

.svh-muted {
	color: var(--svh-text-muted);
	font-size: var(--svh-fs-sm);
}

/* Nội dung soạn thảo */
.svh-prose {
	max-width: 68ch;
}

.svh-prose--narrow {
	margin-inline: auto;
}

.svh-prose > *:last-child {
	margin-bottom: 0;
}

.svh-prose ul,
.svh-prose ol {
	padding-left: 1.4rem;
	margin: 0 0 var(--svh-sp-3);
}

.svh-prose li {
	margin-bottom: 0.4rem;
}

.svh-prose img {
	border-radius: var(--svh-radius-lg);
	margin: var(--svh-sp-4) 0;
}