/* ============================================================
   theme-extra.css — Chỉ những style KHÔNG biểu đạt được bằng theme.json:
   hiệu ứng reveal on-scroll, hover card nâng/zoom, sticky header đổi nền,
   TOC dính, nút to-top, tinh chỉnh chip/link/card.
   Token màu lấy từ biến CSS mà theme.json sinh ra: --wp--preset--color--*
   ============================================================ */

:root {
	--gpxd-ease: cubic-bezier(.22, .61, .36, 1);
	--gpxd-header-h: 76px;
	--gpxd-shadow-sm: 0 1px 2px rgba(28, 27, 25, .04), 0 2px 8px rgba(28, 27, 25, .05);
	--gpxd-shadow-md: 0 10px 30px rgba(28, 27, 25, .10), 0 4px 10px rgba(28, 27, 25, .06);
}

/* ---------- Focus-visible tường minh (WCAG 2.2 AA — bàn phím) ----------
   Không xoá outline mặc định của trình duyệt ở nơi khác; đây chỉ là style
   riêng, nhất quán thương hiệu, cho trạng thái :focus-visible (chỉ hiện khi
   điều hướng bằng bàn phím, không hiện khi click chuột). */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-search__button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Trên nền tối (ink) — dùng outline sáng để đủ tương phản với nền */
.gpxd-brand a:focus-visible,
.gpxd-brand button:focus-visible,
.gpxd-eco-card a:focus-visible,
.gpxd-contact-cta-band a:focus-visible,
.gpxd-contact-cta-band button:focus-visible,
[style*="background-color:#1c1b19"] a:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* ---------- Sticky header đổi nền khi cuộn ---------- */
.gpxd-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background .4s var(--gpxd-ease), box-shadow .4s var(--gpxd-ease), backdrop-filter .4s var(--gpxd-ease);
}

.gpxd-header.is-scrolled {
	background: rgba(246, 243, 238, .85);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* Trang nội dung (không phải front-page) — header luôn solid cho dễ đọc */
body:not(.home):not(.front-page) .gpxd-header {
	background: rgba(246, 243, 238, .92);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* Bù chiều cao header fixed cho front-page (hero đã tự chừa padding-top) */
.gpxd-logo-sub {
	margin-top: 1px !important;
}

.gpxd-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-darker);
}

/* ---------- Menu 7 mục: siết gọn ở desktop hẹp/tablet ngang (~1024-1367px) ----------
   Mục đích: giữ menu PHẲNG (không rơi sớm vào overlay hamburger của core Navigation
   block — core tự đo bề rộng và tự chuyển overlay khi tràn) ở dải màn hình laptop/tablet
   phổ biến. Không giảm cỡ chữ dưới 0.85rem (sàn a11y). Dưới breakpoint mobile, core
   Navigation tự chuyển sang overlayMenu:"mobile" (hamburger) như thiết kế — không đụng. */
@media (max-width: 1367px) {
	.gpxd-nav {
		gap: 16px !important;
		font-size: .85rem !important;
	}

	.gpxd-header-cta .wp-block-button__link {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* Dưới mốc này: giảm khoảng cách giữa 3 khối logo/nav/CTA trong hàng flex (tiết kiệm
   bề ngang thật) + ẩn dòng phụ dưới logo (chỉ tiết giản thị giác, không ảnh hưởng bề
   ngang vì dòng phụ đã nằm dưới site-title, không cùng hàng) */
@media (max-width: 1180px) {
	.gpxd-header .wp-block-group.alignwide {
		gap: 14px !important;
	}

	.gpxd-logo-sub {
		display: none;
	}
}

/* ---------- Eyebrow ---------- */
.gpxd-eyebrow {
	display: inline-block;
	margin-bottom: 4px;
}

/* ---------- Chip nhãn danh mục (block style is-style-chip) ---------- */
.is-style-chip,
.gpxd-chip {
	display: inline-block;
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage-dark);
	background: rgba(124, 132, 113, .12);
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.is-style-chip a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Card bo góc + hover nâng (block style is-style-card) ---------- */
.is-style-card {
	overflow: hidden;
	transition: transform .45s var(--gpxd-ease), box-shadow .45s var(--gpxd-ease), background .3s var(--gpxd-ease);
}

.is-style-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--gpxd-shadow-md);
}

/* Card điểm mạnh: hover đổi nền base -> surface */
.gpxd-strength:hover {
	background: var(--wp--preset--color--surface) !important;
}

/* ---------- Ảnh thumbnail trong card: cắt tỉ lệ + zoom hover ---------- */
.gpxd-thumb img,
.gpxd-thumb .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--gpxd-ease);
}

.gpxd-art-card .gpxd-thumb,
.gpxd-sol-card .gpxd-thumb {
	overflow: hidden;
}

.gpxd-art-card:hover .gpxd-thumb img,
.gpxd-sol-card:hover .gpxd-thumb img {
	transform: scale(1.05);
}

.gpxd-art-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-darker);
}

/* ---------- Link mũi tên (gpxd-link) ---------- */
.gpxd-link a {
	position: relative;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--accent-dark);
}

.gpxd-link a:hover {
	color: var(--wp--preset--color--accent-darker);
}

/* ---------- Nút block styles: ghost & light ---------- */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	transform: translateY(-2px);
}

.wp-block-button.is-style-light .wp-block-button__link {
	background-color: #fff !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: var(--gpxd-shadow-sm);
}

.wp-block-button .wp-block-button__link {
	transition: transform .35s var(--gpxd-ease), box-shadow .35s var(--gpxd-ease), background .3s var(--gpxd-ease);
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--gpxd-shadow-md);
}

/* ---------- Nội dung bài viết (prose) ---------- */
.gpxd-prose {
	font-size: 1.075rem;
	line-height: 1.78;
}

.gpxd-prose h2 {
	scroll-margin-top: 96px;
	margin-top: 52px;
}

.gpxd-prose h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	margin-bottom: 18px;
}

.gpxd-prose h3 {
	scroll-margin-top: 96px;
	margin-top: 34px;
}

.gpxd-prose .wp-block-image img {
	border-radius: 14px;
}

/* ---------- FAQ accordion (core/details) ---------- */
.gpxd-faq-item {
	transition: border-color .3s var(--gpxd-ease), box-shadow .3s var(--gpxd-ease);
}

.gpxd-faq-item[open] {
	border-color: rgba(181, 113, 74, .35) !important;
	box-shadow: var(--gpxd-shadow-sm);
}

.gpxd-faq-item summary {
	cursor: pointer;
	padding: 15px 0;
	list-style: none;
}

.gpxd-faq-item summary::-webkit-details-marker {
	display: none;
}

/* ---------- TOC dính (nếu dùng ở bài viết 2 cột — Milestone sau) ---------- */
.gpxd-toc {
	position: sticky;
	top: calc(var(--gpxd-header-h) + 22px);
}

.gpxd-toc a.is-active {
	color: var(--wp--preset--color--accent-dark);
	font-weight: 500;
}

/* ---------- Nút Back-to-top ---------- */
.gpxd-to-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 90;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: var(--gpxd-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .4s var(--gpxd-ease), transform .4s var(--gpxd-ease), background .3s;
}

.gpxd-to-top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gpxd-to-top:hover {
	background: var(--wp--preset--color--accent-dark);
}

.gpxd-to-top svg {
	width: 22px;
	height: 22px;
}

/* ---------- Reveal on-scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--gpxd-ease), transform .7s var(--gpxd-ease);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- Pagination ---------- */
.gpxd-pagination a,
.gpxd-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 11px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: border-color .3s var(--gpxd-ease), color .3s var(--gpxd-ease), transform .3s var(--gpxd-ease);
}

.gpxd-pagination a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-darker);
	transform: translateY(-2px);
}

.gpxd-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: #fff;
}

/* ---------- NAP footer ---------- */
.gpxd-nap {
	line-height: 1.9;
}

/* ---------- Danh sách chân trang: vùng chạm tối thiểu 24x24px (WCAG 2.2 SC 2.5.8) ---------- */
.gpxd-foot-list li {
	line-height: 1.9;
}

.gpxd-foot-list li a {
	display: inline-block;
	padding: 4px 0;
}

/* ---------- Tôn trọng prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.gpxd-header {
		position: sticky;
	}

	.gpxd-hero {
		padding-top: 120px !important;
	}
}

/* ============================================================
   TRANG GIỚI THIỆU & LIÊN HỆ (gpxd-page-* / patterns/page-*.php)
   Dùng template "page-full-custom" (không post-title mặc định).
   Chỉ token màu/spacing từ theme.json — không hardcode màu.
   ============================================================ */

/* ---------- Utility: ẩn hình ảnh nhưng vẫn đọc được cho a11y ---------- */
.gpxd-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	margin: -1px !important;
}

/* ---------- Breadcrumb tĩnh ---------- */
.gpxd-breadcrumb {
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
}

.gpxd-breadcrumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gpxd-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: var(--wp--preset--color--border);
}

.gpxd-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.gpxd-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-darker);
}

.gpxd-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ---------- Về hero: ảnh có caption phủ đáy ---------- */
.gpxd-about-hero-figure {
	position: relative;
	box-shadow: var(--gpxd-shadow-md);
}

.gpxd-about-hero-figure img {
	display: block;
	width: 100%;
	height: clamp(280px, 44vw, 540px);
	object-fit: cover;
}

.gpxd-about-hero-figure figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 24px 28px;
	background: linear-gradient(to top, rgba(28, 27, 25, .62), transparent);
	color: var(--wp--preset--color--base);
	font-size: .92rem;
	font-weight: 500;
	text-align: left;
}

/* ---------- Accent-line tái dùng cho câu chuyện + giá trị cốt lõi ---------- */
.gpxd-story-block h3::before,
.gpxd-value-card h3::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
	margin-bottom: 18px;
}

.gpxd-value-card {
	transition: transform .45s var(--gpxd-ease), box-shadow .45s var(--gpxd-ease);
}

.gpxd-value-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--gpxd-shadow-md);
}

/* ---------- Dải số liệu (stat band) ---------- */
.gpxd-stat-band {
	box-shadow: var(--gpxd-shadow-sm);
	overflow: hidden;
}

.gpxd-stat-item {
	position: relative;
	text-align: center;
}

.gpxd-stat-item:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 24px;
	bottom: 24px;
	width: 1px;
	background: var(--wp--preset--color--border);
}

@media (max-width: 781px) {
	.gpxd-stat-item::before {
		content: none !important;
	}

	.gpxd-stat-item {
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.gpxd-stat-item:first-child {
		border-top: none;
	}
}

/* ---------- Khối hệ sinh thái thương hiệu (card ink 2 cột) ---------- */
.gpxd-eco-card {
	overflow: hidden;
	box-shadow: var(--gpxd-shadow-md);
}

.gpxd-eco-media img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	opacity: .92;
}

.gpxd-eco-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.gpxd-eco-list li {
	position: relative;
	padding-left: 20px;
	font-size: .92rem;
	color: rgba(246, 243, 238, .72);
}

.gpxd-eco-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ---------- Trang Liên hệ: danh sách NAP (định nghĩa dl/dt/dd) ---------- */
.gpxd-info-list dl {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.gpxd-info-list .gpxd-info-item dt {
	font-size: .82rem;
	color: var(--wp--preset--color--muted);
	letter-spacing: .02em;
}

.gpxd-info-list .gpxd-info-item dd {
	margin: 2px 0 0;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink);
}

.gpxd-info-list .gpxd-info-item dd a {
	color: inherit;
	transition: color .25s var(--gpxd-ease);
}

.gpxd-info-list .gpxd-info-item dd a:hover {
	color: var(--wp--preset--color--accent-darker);
}

.gpxd-info-list address {
	font-style: normal;
}

.gpxd-info-note {
	display: block;
	margin-top: 24px;
	padding: 16px 18px;
	border-radius: 12px;
	background: rgba(124, 132, 113, .10);
	border: 1px solid rgba(124, 132, 113, .22);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.gpxd-info-note strong {
	color: var(--wp--preset--color--sage-dark);
	font-weight: 600;
}

.gpxd-info-note code {
	background: rgba(28, 27, 25, .06);
	padding: 1px 6px;
	border-radius: 4px;
}

/* ---------- Form liên hệ (markup thuần, cắm plugin sau) ---------- */
.gpxd-contact-form .gpxd-field {
	margin-bottom: 18px;
}

.gpxd-contact-form label {
	display: block;
	font-size: .88rem;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink);
}

.gpxd-contact-form .gpxd-field-optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.gpxd-contact-form input,
.gpxd-contact-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	padding: 13px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	transition: border-color .3s var(--gpxd-ease), box-shadow .3s var(--gpxd-ease);
}

.gpxd-contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.gpxd-contact-form input:focus,
.gpxd-contact-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(181, 113, 74, .15);
}

.gpxd-contact-form .gpxd-form-submit {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	background: var(--wp--preset--color--accent-dark);
	border: none;
	border-radius: 999px;
	padding: 14px 26px;
	cursor: pointer;
	transition: transform .35s var(--gpxd-ease), box-shadow .35s var(--gpxd-ease), background .3s var(--gpxd-ease);
}

.gpxd-contact-form .gpxd-form-submit:hover {
	background: var(--wp--preset--color--accent-darker);
	transform: translateY(-2px);
	box-shadow: var(--gpxd-shadow-md);
}

.gpxd-form-disclaimer {
	margin-top: 14px;
	font-size: .82rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ---------- Bản đồ placeholder (chờ toạ độ Google Maps thật) ---------- */
.gpxd-map-frame {
	position: relative;
	aspect-ratio: 16 / 7;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--gpxd-shadow-sm);
	background:
		linear-gradient(135deg, rgba(181, 113, 74, .08), rgba(124, 132, 113, .10)),
		repeating-linear-gradient(0deg, transparent 0 38px, rgba(28, 27, 25, .05) 38px 39px),
		repeating-linear-gradient(90deg, transparent 0 38px, rgba(28, 27, 25, .05) 38px 39px),
		var(--wp--preset--color--base);
	display: grid;
	place-items: center;
	text-align: center;
}

.gpxd-map-pin {
	display: block;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	margin: 0 auto 16px;
	box-shadow: var(--gpxd-shadow-md);
}

.gpxd-map-label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--wp--preset--color--ink);
}

.gpxd-map-sub {
	font-size: .9rem;
	color: var(--wp--preset--color--muted);
	margin-top: 6px;
}

@media (max-width: 560px) {
	.gpxd-map-frame {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Dải CTA nhỏ trang Liên hệ: căn giữa theo chiều dọc ---------- */
.gpxd-contact-cta-band > .wp-block-group {
	align-items: center;
}

/* ---------- Responsive: các trang tĩnh ---------- */
@media (max-width: 1024px) {
	.gpxd-eco-media img {
		min-height: 220px;
	}

	.gpxd-contact-main .wp-block-columns {
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	.gpxd-eco-section .gpxd-eco-card {
		flex-wrap: wrap;
	}

	.gpxd-story .wp-block-columns,
	.gpxd-values .wp-block-columns {
		flex-wrap: wrap;
	}
}