/*
Theme Name: Golf Vegas
Theme URI: https://golfvegas.vn
Author: Golf Vegas
Description: Block theme (FSE) cho website Golf Vegas — Integrated Media Solutions. Thiết kế theo hướng trang nhã, hiện đại, sang trọng. Toàn bộ design token nằm trong theme.json.
Version: 0.6.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golfvegas
Tags: block-patterns, full-site-editing, translation-ready
*/

/*
 * QUY TẮC: không hardcode mã màu ở đây. Mọi màu/spacing/font lấy từ theme.json
 * qua biến var(--wp--preset--*). File này chỉ chứa những gì theme.json không
 * diễn đạt được (pseudo-element, trạng thái focus, tiện ích nhỏ).
 */

/* --- Nền tảng ------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Giới hạn độ dài dòng văn bản dài — dấu tiếng Việt cần dòng ngắn để dễ đọc. */
.gv-measure {
	max-width: var(--wp--custom--measure);
}

/* --- Tiêu điểm bàn phím (a11y) ------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: absolute;
	z-index: 100000;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* --- Eyebrow: nhãn nhỏ viết hoa trên tiêu đề ----------------------------- */

/*
 * Nhãn section. Ở cỡ 1.5rem, hai thông số phải giảm so với khi nó còn 13px:
 * giãn chữ 0.12em sẽ làm các chữ cái rời rạc, và weight 600 thành ra nặng nề.
 * Tracking luôn tỉ lệ NGHỊCH với cỡ chữ.
 */
.gv-eyebrow {
	display: block;
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Eyebrow trên nền ảnh: cần sáng hơn nữa vì nền ảnh không đồng đều. */
.gv-eyebrow--light {
	color: var(--wp--preset--color--line);
}

/*
 * Viên ruby nét mảnh đứng đầu mỗi nhãn section.
 *
 * Dùng mask thay vì nhúng SVG có màu sẵn: hình dạng nằm trong mask, còn MÀU lấy
 * từ token qua background-color. Nhờ vậy viên đá tự đổi màu theo nền (cam trên
 * nền sáng, vàng trên nền tối) mà không vi phạm quy tắc cấm hardcode mã màu.
 *
 * Cố ý vẽ MỘT màu chứ không nhiều sắc như ảnh tham chiếu — mục 1 cấm icon nhiều
 * màu, và ở cỡ 11px thì các mặt cắt nhiều sắc chỉ thành một vệt mờ.
 */
.gv-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask-image: var(--gv-gem);
	mask-image: var(--gv-gem);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--gv-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 3h10l4 6-9 12L3 9z'/%3E%3Cpath d='M3 9h18M7 3l5 6 5-6'/%3E%3C/svg%3E");
}

/* Trên nền tối viên đá chuyển sang vàng cho đồng bộ với nhãn. */
.has-charcoal-background-color .gv-eyebrow::before {
	background-color: var(--wp--preset--color--gold);
}

/* Trên ảnh hero, nhãn đã dùng tông sáng thì viên đá theo cùng. */
.gv-eyebrow--light::before {
	background-color: var(--wp--preset--color--gold);
}

/* --- Điểm xuyết vàng kim ------------------------------------------------- */

/*
 * Vàng kim CHỈ dùng được trên nền tối. Đo thực tế: #D4AF37 đạt 8.89:1 trên nền
 * than nhưng chỉ 2.00:1 trên nền sáng — chữ vàng trên nền sáng gần như vô hình.
 * Vì vậy có hai sắc độ:
 *   --gold       #D4AF37  cho nền tối (8.89:1)
 *   --gold-deep  #856818  cho nền sáng (5.00:1)
 *
 * gold-deep từng là #A8842A (3.33:1) với lập luận "số 24px đậm là chữ lớn nên
 * 3:1 là đủ". Lập luận đó SAI: theme.json bật fluid typography nên cỡ chữ co
 * xuống ~18px trên mobile, tụt dưới ngưỡng chữ lớn và cần 4.5:1. Lighthouse
 * bắt được. Bài học: đừng dựa vào ngưỡng chữ lớn khi cỡ chữ là fluid.
 *
 * Cam vẫn là màu thương hiệu chính; vàng chỉ là nét điểm xuyết.
 */

/* Gạch nhấn dưới tiêu đề: chuyển từ cam sang vàng — nét ký tên của thương hiệu. */
.gv-rule::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: var(--wp--preset--spacing--40);
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--brand) 0%,
		var(--wp--preset--color--gold-deep) 100%
	);
}

/* Trên nền tối thì dùng sắc vàng sáng để giữ độ lấp lánh. */
.has-charcoal-background-color .gv-rule::after {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--brand) 0%,
		var(--wp--preset--color--gold) 100%
	);
}

/*
 * Nhãn eyebrow trên nền tối chuyển sang vàng: 8.89:1, thừa chuẩn AA.
 * Làm theo ngữ cảnh nền thay vì gắn class ở từng pattern — quên một chỗ là
 * tương phản tụt xuống dưới chuẩn mà mắt thường không nhận ra.
 */
.has-charcoal-background-color .gv-eyebrow {
	color: var(--wp--preset--color--gold);
}

/*
 * MỌI link trong section nền tối phải sáng lên. Đây là lần thứ hai lỗi này xuất
 * hiện: lần đầu ở chân trang, lần này ở khối form (số điện thoại gần như tàng
 * hình). Nguyên nhân gốc là elements.link trong theme.json đặt màu mực, đúng cho
 * nền sáng nhưng sai hoàn toàn trên nền than. Sửa theo NGỮ CẢNH NỀN thay vì vá
 * từng section, để section nền tối thêm sau này không mắc lại.
 */
.has-charcoal-background-color a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--base);
	text-underline-offset: 4px;
}

.has-charcoal-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--gold);
}

/*
 * Đường ngăn cách giữa các section.
 *
 * WordPress đặt margin-top 24px cho mọi block top-level. Giữa hai section
 * alignfull, khe đó để lộ nền trang (#FAF9F7) thành một VẠCH TRẮNG chạy ngang —
 * nhìn như lỗi render chứ không phải chủ ý thiết kế. Bỏ khe và thay bằng một
 * chỉ vàng 1px: vừa hết vạch trắng, vừa thành nét ngăn cách có chủ đích.
 */
main > .alignfull + .alignfull,
.entry-content > .alignfull + .alignfull {
	margin-top: 0;
	border-top: 1px solid
		color-mix(in srgb, var(--wp--preset--color--gold) 70%, transparent);
}

/*
 * Cùng khe 24px đó còn nằm giữa header / main / footer — đây là cấp cao hơn
 * (.wp-site-blocks), nên rule ở trên không với tới. Hậu quả: vẫn còn vạch trắng
 * phía trên chân trang và ngay dưới đầu trang.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid
		color-mix(in srgb, var(--wp--preset--color--gold) 70%, transparent);
}

.gv-rule.has-text-align-center::after {
	margin-inline: auto;
}

/* --- Thẻ nội dung: hairline thay cho bóng đổ ----------------------------- */

.gv-card {
	height: 100%;
	border: 1px solid var(--wp--preset--color--line);
	transition: border-color var(--wp--custom--transition--base);
}

.gv-card:hover {
	border-color: var(--wp--preset--color--ink);
}

/* Số thứ tự lớn, mờ — dùng cho danh sách dịch vụ/giá trị. */
.gv-index {
	display: block;
	color: var(--wp--preset--color--gold-deep);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* --- Hero ---------------------------------------------------------------- */

/*
 * Hero nền kem (24/09/2026). Trước đó là ảnh DOOH ban đêm phủ kín màn hình với
 * hai lớp phủ than chồng nhau — khách thấy màn hình đầu "tối quá". Nay chữ nằm
 * trên nền kem, ảnh đứng riêng bên phải và hiện nguyên màu, không cần lớp phủ.
 *
 * Dòng "Lan tỏa thương hiệu" KHÔNG tô chữ cam: cam trên nền kem chỉ 3.08:1,
 * dưới chuẩn 4.5:1 (h1 là fluid, xem bẫy #15). Cam chuyển thành gạch nhấn dày
 * dưới chữ — vẫn là điểm nhấn thương hiệu, còn chữ giữ màu mực.
 */
.gv-hero__accent {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.16em;
	text-decoration-skip-ink: none;
}

/*
 * Khung 5:4: đủ cao để cân với khối chữ nhưng vẫn lọt màn hình đầu ở 1366×768.
 * Khung 4:5 (đứng) từng bị cắt chân ở màn hình laptop.
 */
.gv-hero__media {
	margin: 0;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 2px;
}

.gv-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

/* --- Ảnh ----------------------------------------------------------------- */

.gv-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ảnh dịch vụ: phóng rất nhẹ khi rê chuột. Tiết chế, không giật. */
.gv-service .gv-figure {
	overflow: hidden;
}

.gv-service .gv-figure img {
	transform: scale(1);
	transition: transform var(--wp--custom--transition--slow);
}

.gv-service:hover .gv-figure img {
	transform: scale(1.04);
}

/* Lớp phủ tối để chữ đè trên ảnh đạt tương phản. */
.gv-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--overlay--image);
	pointer-events: none;
}

/* --- Đầu trang ----------------------------------------------------------- */

/* Đường dưới đầu trang cũng dùng chỉ vàng cho đồng bộ với các đường ngăn cách. */
.gv-header {
	border-bottom: 1px solid
		color-mix(in srgb, var(--wp--preset--color--gold) 70%, transparent);
}

.gv-logo img {
	width: auto;
	height: 56px;
}

/*
 * Menu overlay trên mobile.
 *
 * Mặc định của WordPress không thêm lề ngang, nên các mục dính sát mép trái màn
 * hình — đọc rất khó chịu và trông như lỗi. Đặt lề bằng đúng thang spacing của
 * hệ thống để khớp với phần còn lại của trang.
 */
/*
 * Vì sao selector phải dài như vậy: core có sẵn hai rule đặt padding cho overlay,
 * trong đó một rule dùng `:not(.disable-default-overlay)` (độ ưu tiên 0,3,0) và
 * file core lại nạp SAU style.css của theme. Selector ngắn hơn sẽ thua cả về
 * độ ưu tiên lẫn thứ tự, và padding bị về 0 — chính là hiện tượng menu dính sát
 * mép. Thêm `.gv-nav` ở đầu đưa độ ưu tiên lên 0,4,0 để chắc chắn thắng.
 */
.gv-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.gv-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--40);
}

/* Mỗi mục là một hàng có đường kẻ vàng mảnh, vùng chạm đủ rộng cho ngón tay. */
.gv-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid
		color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent);
}

.gv-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
}

/* Nút đóng cũng phải lùi vào cho cân với lề mới. */
.gv-nav .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
}

/* Điều hướng: gạch chân cam chạy ra khi hover, thay vì đổi màu nền. */
.gv-nav a {
	position: relative;
	text-decoration: none;
}

.gv-nav a::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--brand);
	transition: width var(--wp--custom--transition--base);
}

.gv-nav a:hover::after,
.gv-nav .current-menu-item > a::after {
	width: 100%;
}

/* --- Chân trang ---------------------------------------------------------- */

/*
 * Chân trang nền kem (24/09/2026: khách yêu cầu bỏ nền đen, chuyển tông sáng).
 * Hover KHÔNG dùng cam: cam trên nền kem chỉ 3.08:1, dưới chuẩn 4.5:1 cho chữ
 * thường — dùng mực + gạch chân là đủ tín hiệu.
 */
.gv-footer a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.gv-footer a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Đường phân cách chân trang: một nét vàng mảnh, giảm độ đậm cho kín đáo. */
.gv-footer .wp-block-separator {
	border-color: var(--wp--preset--color--gold-deep);
	background-color: var(--wp--preset--color--gold-deep);
	opacity: 0.35;
}

/* --- Nội dung bài viết --------------------------------------------------- */

/*
 * Giới hạn độ dài dòng nhưng KHÔNG được rộng hơn cột nội dung. Trước đây chỉ có
 * `measure` (68ch ≈ 781px) nên đoạn văn rộng hơn tiêu đề, ảnh và phần đầu bài
 * (640px) — mép trái bài viết thụt ra thụt vào.
 */
.gv-prose :where(p, ul, ol) {
	max-width: min(var(--wp--custom--measure), var(--wp--style--global--content-size));
}

.gv-prose a {
	text-underline-offset: 3px;
}

/* --- Form liên hệ -------------------------------------------------------- */

/*
 * Form nằm trên nền kem (trước 24/09/2026 là nền than). Ô nhập dùng kiểu gạch chân thay vì khung viền kín —
 * nhẹ nhàng hơn và đúng tinh thần tiết chế ở mục 1 của CLAUDE.md.
 */
.gv-form__form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.gv-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.gv-form__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
}

.gv-form__required {
	color: var(--wp--preset--color--brand);
}

.gv-form__input {
	width: 100%;
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--muted);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	transition: border-color var(--wp--custom--transition--base);
}

.gv-form__input:focus {
	border-bottom-color: var(--wp--preset--color--brand);
	outline: none;
}

/* Vẫn phải có dấu hiệu cho người dùng bàn phím khi trình duyệt bật focus-visible. */
.gv-form__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 4px;
}

.gv-form__input::placeholder {
	color: var(--wp--preset--color--muted);
}

.gv-form__submit {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: background var(--wp--custom--transition--base);
}

.gv-form__submit:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.gv-form__actions {
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* Bẫy bot: phải ẩn hoàn toàn nhưng KHÔNG dùng display:none — một số bot bỏ qua
   trường bị display:none, khiến bẫy mất tác dụng. */
.gv-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gv-form__notice {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body);
}

.gv-form__notice--ok {
	border-left-color: var(--wp--preset--color--gold-deep);
}

/* --- Năng lực & quy trình ------------------------------------------------ */

/*
 * Dùng gold-deep chứ KHÔNG dùng cam: cam #FD4401 trên nền sáng chỉ đạt 3.32:1.
 * Ở đây cỡ chữ là fluid nên trên mobile nó co xuống ~16.5px, tụt khỏi ngưỡng
 * "chữ lớn" và cần đủ 4.5:1. Đây là lần thứ hai cùng một cái bẫy — xem mục 10.
 */
.gv-capability__value {
	margin: 0;
	color: var(--wp--preset--color--gold-deep);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Quy trình: số thứ tự nằm cột trái, nội dung cột phải — kiểu danh sách biên tập. */
.gv-process__step {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (max-width: 600px) {
	.gv-process__step {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20);
	}
}

/*
 * Số thứ tự chiếm trọn hai hàng của cột trái, để tiêu đề và mô tả xếp chồng
 * trong cột phải. Cách này tránh phải bọc thêm thẻ div thô vào giữa block —
 * thứ làm hỏng cấu trúc block của WordPress.
 */
.gv-process__number {
	grid-row: 1 / span 2;
	margin: 0;
	color: var(--wp--preset--color--gold-deep);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.gv-process__title,
.gv-process__text {
	grid-column: 2;
	margin: 0;
}

@media (max-width: 600px) {
	.gv-process__number {
		grid-row: auto;
	}

	.gv-process__title,
	.gv-process__text {
		grid-column: 1;
	}
}

/* Bước cuối không cần đường kẻ dưới vì section đã có nền riêng. */
.gv-process__step:last-child {
	padding-bottom: 0;
}

/* Số liệu nổi bật trong bài viết (xem bin/convert-news.py). */
.gv-stats-inline {
	margin-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.gv-stats-inline p {
	margin: 0;
	line-height: 1.4;
}

.gv-stats-inline strong {
	display: block;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: -0.02em;
}

/*
 * Bảng so sánh trong bài viết (bin/convert-news.py giữ nguyên bảng từ .docx).
 * Chỉ dùng hairline, không kẻ ô dày; trên mobile cho cuộn ngang trong khung
 * thay vì làm cả trang tràn ngang.
 */
.gv-prose .wp-block-table {
	margin-block: var(--wp--preset--spacing--50);
	overflow-x: auto;
}

.gv-prose .wp-block-table table {
	min-width: 36rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.6;
}

.gv-prose .wp-block-table :where(th, td) {
	padding: var(--wp--preset--spacing--30);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.gv-prose .wp-block-table thead th {
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-weight: 700;
}

.gv-prose .wp-block-table tbody td:first-child {
	font-weight: 600;
}

/* --- Mobile -------------------------------------------------------------- */

/*
 * Ngưỡng 781px là breakpoint mà WordPress dùng để xếp chồng cột (core/columns),
 * nên bám theo nó để bố cục không lệch pha với block lõi.
 *
 * Cách làm: ghi đè trực tiếp biến preset spacing thay vì sửa từng pattern.
 * Nhờ vậy mọi section co lại đồng loạt, và pattern vẫn chỉ dùng thang spacing
 * chuẩn — không phát sinh giá trị lẻ nằm ngoài hệ thống.
 */
@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--70: 40px;
		--wp--preset--spacing--80: 56px;
		--wp--preset--spacing--90: 72px;
	}

	/* Trên mobile ảnh nằm dưới chữ: khung ngang cho đỡ chiếm chỗ cuộn. */
	.gv-hero__media {
		aspect-ratio: 4 / 3;
	}

	/* Hai nút cạnh nhau quá chật ở 414px — xếp chồng, mỗi nút chiếm trọn bề ngang. */
	.gv-hero .wp-block-buttons,
	.gv-cta .wp-block-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--30);
		width: 100%;
	}

	.gv-hero .wp-block-button,
	.gv-cta .wp-block-button {
		width: 100%;
	}

	.gv-hero .wp-block-button__link,
	.gv-cta .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.gv-logo img {
		height: 40px;
	}

	/*
	 * Nút "Liên hệ" trên header chiếm chỗ của nút mở menu. Mục Liên hệ đã có
	 * trong menu overlay (xem bin/setup-content.php) nên ẩn nút đi là an toàn.
	 */
	.gv-header .wp-block-buttons {
		display: none;
	}

	/* Dấu tiếng Việt cần thêm chỗ thở khi cỡ chữ lớn thu nhỏ lại. */
	.gv-hero h1 {
		line-height: 1.2;
	}
}

/* --- Placeholder nội dung còn thiếu -------------------------------------- */

/*
 * Ghi chú dành cho người quản trị về nội dung còn thiếu.
 * WordPress gắn class `logged-in` vào body, nên khách truy cập không thấy ô này —
 * họ thấy `.gv-empty` bên dưới thay thế.
 */
.gv-todo {
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--brand);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
}

body:not(.logged-in) .gv-todo {
	display: none;
}

/*
 * Trạng thái rỗng hiển thị cho khách: phải trông có chủ đích, không phải lỗi.
 * Ngược lại, người quản trị thấy `.gv-todo` nên không cần thấy dòng này.
 */
.gv-empty {
	padding: var(--wp--preset--spacing--70) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

body.logged-in .gv-empty {
	display: none;
}