/* Bố cục chung của các template */

/* Header / main / footer sát nhau (WP mặc định chèn khoảng cách) */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.wp-site-blocks > main { flex: 1 0 auto; }

.vo-section { margin-block: 0; padding-block: var(--vo-space-6); }
.vo-section + .vo-section { padding-top: 0; }

/* 2 cột: nội dung + sidebar dính (trang điểm đến, attraction) */
.vo-layout {
	--vo-aside-w: 320px;                                /* Rộng sidebar */
	--vo-layout-gap: clamp(24px, 3vw, 36px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vo-layout-gap);
	align-items: start;
}
.vo-layout > * { margin-block: 0; min-width: 0; }
.vo-page__body > .vo-layout { margin-block-start: var(--vo-space-2); }   /* hộp số liệu -> thanh nav trong trang: nav cao 48px nên chữ đã cách hộp thêm ~15px */
@media (min-width: 981px) {
	.vo-layout { grid-template-columns: minmax(0, 1fr) var(--vo-aside-w); }
	.vo-layout > .vo-layout__aside { margin-top: var(--vo-space-2); }   /* hộp số liệu -> card đầu sidebar = 16px (8px của .vo-layout + 8px này), bằng khoảng giữa các card sidebar; riêng sidebar xuống, thanh nav trong trang giữ nguyên */
	.vo-layout__aside { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--vo-header-h) + var(--vo-space-4)); }
	/* Sidebar cao hơn màn hình: vẫn dính ở đầu, nhưng tự cuộn bên trong khi rê chuột vào và lăn chuột, không hiện thanh cuộn (hết cuộn thì trang cuộn tiếp) */
	.vo-layout__aside {
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--vo-header-h) - var(--vo-space-4) * 2);
		overflow-y: auto;
		scrollbar-width: none;   /* ẩn thanh cuộn, vẫn lăn chuột được */
		-ms-overflow-style: none;
		padding-inline: 2px;   /* overflow cắt viền / bóng card sát mép */
		margin-inline: -2px;
		padding-bottom: 2px;   /* chiều cao lẻ (dòng chữ 1.5) bị làm tròn xuống, overflow cắt mất viền dưới của card cuối (không tái hiện được ở Chrome, giữ cho Safari). Không bù margin âm: nó trước giờ không có tác dụng ở phần lớn trang (bị :last-child / margin-block: 0 đè) nên bố cục luôn dư 2px */
	}
	.vo-layout__aside::-webkit-scrollbar { display: none; }
}

/* Đầu trang danh sách (All destinations, archive, search): canh theo lưới card, không theo cột chữ */
.vo-page-head { padding-top: var(--vo-space-6); }
.vo-page-head > * { margin-block: 0; }
.vo-page-head > * + * { margin-top: var(--vo-space-2); }
.vo-page-head p { color: var(--vo-muted); }
.vo-page-head .vo-search-trigger--hero { margin: var(--vo-space-5) 0 0; }   /* ô search ở trang search: canh trái */


/* Bài viết (single): khung + mục lục + tác giả ở post.css; đây chỉ là kiểu cho ảnh / chú thích / trích dẫn trong nội dung */
.vo-single .wp-block-post-content { margin-top: var(--vo-space-6); }
.vo-single .wp-block-post-content :where(img) { border-radius: var(--vo-radius-card); }
.vo-single .wp-block-post-content :where(figcaption) { margin-top: var(--vo-space-2); color: var(--vo-muted); font-size: var(--vo-fs-xs); }
.vo-single .wp-block-post-content :where(blockquote) { margin-inline: 0; padding-left: var(--vo-space-4); border-left: 2px solid var(--vo-primary); }

/* Hero trang chủ */
.vo-home-hero { text-align: center; }
.vo-home-hero h1 { margin: 0 0 var(--vo-space-3); font-weight: var(--vo-hero-title-fw); }
.vo-home-hero p { margin: 0 auto; max-width: 56ch; color: var(--vo-primary); }
/* Khoảng cách giữa các khối con: khai tường minh (theme.json đặt blockGap 0, không để blockGap của WP tự cộng rồi phải đè bằng !important ở từng nơi) */
.vo-home-hero > .vo-search-trigger { margin-top: var(--vo-space-5); }
.vo-home__body,
.vo-home__body > * + *,
.vo-page--region .vo-page__body > * + * { margin-top: var(--vo-space-5); }
@media (max-width: 767px) {
	.vo-home-hero p { max-width: 80vw; text-wrap: balance; }   /* câu mô tả: tối đa 80% chiều ngang màn hình, 2 dòng đều nhau */
}


/* Section trang nội dung (điểm đến, region, attraction) */
.vo-sec { padding-block: var(--vo-space-6) 0; }
.vo-layout__main > .vo-sec:first-child,
.vo-layout__main > .vo-secnav + .vo-sec,
.vo-page .vo-secnav + .vo-sec { padding-top: var(--vo-space-5); }

/* Tiêu đề section (PHP vo_sec_head()): H2 + dòng phụ trái, link phải */
.vo-sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vo-space-2) var(--vo-space-5);
	margin-bottom: var(--vo-space-4);
}
.vo-sec-head__title { margin: 0; font-size: var(--vo-sec-title-fs); }
h2.wp-block-heading.vo-sec-head__title { margin: 0 0 var(--vo-space-4); }   /* block Heading của WP (Overview): khớp vo_sec_head() */
.vo-sec-head__sub { margin: var(--vo-space-1) 0 0; color: var(--vo-muted); font-size: var(--vo-fs-sm); }
.vo-sec-head__text { flex: 1 1 260px; min-width: 0; }
/* Không cắt "…": nội dung PHP được viết đủ ngắn để vừa 1 dòng ở 375px; lỡ dài hơn thì xuống dòng chứ không mất chữ */
.vo-sec-head__action { flex: none; margin-inline: calc(var(--vo-space-3) * -1); }
.vo-sec-head__action .vo-pill-link { margin-bottom: calc((var(--vo-pill-link-h) - 1.2em) / -2 - 1px); }   /* chữ link cách nội dung dưới đúng bằng dòng phụ (.vo-sec-head__sub): bỏ phần vùng bấm dư bên dưới chữ */
.vo-sec__more { margin: var(--vo-space-2) 0 0; }
/* Link "All ...": desktop cạnh tiêu đề, mobile dưới hàng card (PHP vo_more_link() in cả 2) */
.vo-sec__more--mobile { display: block; }
@media (min-width: 600px) {
	.vo-sec__more--mobile { display: none; }
}
@media (max-width: 599px) {
	.vo-sec-head__action:has(.vo-more-head) { display: none; }
}

/* Nội dung soạn thảo (WYSIWYG của ACF) */
.vo-prose { color: var(--vo-muted); font-size: var(--vo-fs-base); }   /* chữ đọc toàn site (Overview, hộp thoại Getting to, Getting there attraction) = màu chữ card Where to stay */
.vo-prose strong { color: var(--vo-primary); }
.vo-prose > :first-child { margin-top: 0; }
.vo-prose > :last-child { margin-bottom: 0; }
.vo-prose p, .vo-prose ul, .vo-prose ol { margin: 0 0 1em; }
.vo-prose h3, .vo-prose h4 { margin: 1.4em 0 .5em; }

/* Sidebar trang điểm đến + attraction */
.vo-layout__aside { display: grid; gap: var(--vo-space-4); }
.vo-layout__aside > * { margin: 0; }
.vo-page__body { margin-top: 0; }
.vo-layout__main > :not(dialog) { margin-block: 0; }   /* trừ <dialog> (hộp thoại đánh giá nằm trong cột này): margin-block: auto của nó là thứ căn giữa dọc */


/* Dải nền xám full ngang cuối trang (More destinations ở trang điểm đến) */
.vo-band { margin-top: 0; padding-bottom: var(--vo-space-7); background: var(--vo-bg); }
@media (max-width: 599px) {
	.vo-band { padding-bottom: var(--vo-space-2); }   /* nút See all cuối dải đã có vùng bấm cao ~40px; đệm 48px nữa thì chữ cách footer cả ~60px */
}

/* Trang điểm đến, điện thoại: hàng cuộn 3 card hiện 1.6 card (card ~2/3 màn hình, lộ card sau) như What to eat cũ */
@media (max-width: 599px) {
	.vo-page--destination .vo-scroller:not(.vo-scroller--1),
	.vo-page--attraction .vo-scroller:not(.vo-scroller--1) { --_per: 1.6; }
}


/* Desktop nhỏ (981-1119px): cột chính hẹp vì có sidebar => hàng cuộn 2 card như Getting to (card cuối vuốt sang); từ 1120px là 3 card */
@media (min-width: 981px) and (max-width: 1119px) {
	.vo-page--destination .vo-layout__main .vo-scroller,
	.vo-page--attraction .vo-layout__main .vo-scroller { --_per: 2; }
}

/* Region: mô tả (Overview) sát thanh thông số */