/* Hero trang region + điểm đến (markup: vo_hero() ở inc/ui-parts.php): ảnh ở trên, tên + nút ở dưới (.vo-hero__inner, ngoài khối ảnh), không chữ đè lên ảnh. */
/* Ảnh rộng hơn nội dung --vo-hero-extend mỗi bên như Tripadvisor; không bao giờ hẹp hơn nội dung và cách mép màn hình ít nhất --vo-hero-gap; điện thoại tràn 100% */
.vo-hero { --vo-hero-extend: 64px; --vo-hero-gap: var(--vo-space-4); --vo-main-pad: var(--wp--style--root--padding-left, 16px); position: relative; }
@media (min-width: 600px) {
	.vo-page > .vo-hero {
		--_w: min(calc(min(100%, var(--vo-container)) + 2 * var(--vo-hero-extend)), calc(100% + 2 * var(--vo-main-pad) - 2 * var(--vo-hero-gap)));   /* % = lòng main; không dùng vw vì vw tính cả thanh cuộn */
		width: var(--_w);
		max-width: none;
		margin: var(--vo-space-3) 0 0 !important; margin-inline-start: calc((100% - var(--_w)) / 2) !important;   /* căn giữa lòng main; !important: WP đặt margin cho phần tử con đầu của main */
	}
}

/* Ảnh */
.vo-hero__mosaic { --vo-hero-h: clamp(240px, 56vw, 420px); display: grid; gap: var(--vo-space-1); height: var(--vo-hero-h); overflow: hidden; border-radius: var(--vo-radius-card); background: var(--vo-hover); }   /* --vo-hero-h: chiều cao khối ảnh */
.vo-hero__mosaic--ph { background: var(--vo-ph-img) center bottom / cover no-repeat; }   /* bài chưa có ảnh đại diện (tokens.css) */
@media (min-width: 981px) {
	.vo-hero__mosaic { --vo-hero-h: clamp(360px, 32vw, 480px); }
}
@media (max-width: 599px) {
	.vo-hero__mosaic { border-radius: 0; }
}
.vo-hero__cell { position: relative; isolation: isolate; display: block; min-height: 0; padding: 0; border: 0; background: var(--vo-skeleton); cursor: zoom-in; overflow: hidden; }   /* nền + bóng sáng khung chờ ảnh: xem card.css */
.vo-hero__cell::before { content: ""; position: absolute; inset: 0; background: var(--vo-skeleton-sweep); transform: translateX(-100%); animation: vo-skeleton-sweep 1.5s ease-in-out 8; pointer-events: none; }
.vo-hero__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--vo-dur) var(--vo-ease); }
@media (hover: hover) and (pointer: fine) {   /* layer riêng ngay từ đầu: không thì cuối hiệu ứng thu nhỏ trình duyệt gỡ layer, ảnh nhích ~1px (giống .vo-card__media img). Chỉ máy tính, xem card.css */
	.vo-hero__img { will-change: transform; backface-visibility: hidden; }
}
@media (hover: hover) {
	.vo-hero__cell:hover .vo-hero__img { transform: scale(1.03); }
}
.vo-hero__cell:not(:first-child) { display: none; }
@media (min-width: 768px) {
	.vo-hero__mosaic.is-mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
	.vo-hero__mosaic.is-mosaic .vo-hero__cell:first-child { grid-row: 1 / 3; }
	.vo-hero__mosaic.is-mosaic .vo-hero__cell:not(:first-child) { display: block; }
}
/* Nút "N photos" trên góc ảnh: kính mờ như header (--vo-header-glass / --vo-header-blur) */
.vo-hero__all { position: absolute; top: var(--vo-space-4); right: var(--vo-space-4); z-index: 2; }
.vo-hero .vo-hero__all { --_bg: var(--vo-header-glass); --_bg-hover: var(--vo-surface); --_ink: var(--vo-primary); -webkit-backdrop-filter: var(--vo-header-blur); backdrop-filter: var(--vo-header-blur); }

/* Dưới ảnh: hàng tên + nút, dòng mô tả (alignwide: đúng bề ngang nội dung) */
/* Mọi khối (tag, hàng tên, mô tả, chip meta) cách nhau đúng --vo-hero-block-gap, kể cả ảnh -> khối đầu và khối cuối -> hộp số liệu (stats.css) */
.vo-page > .vo-hero__inner { display: flex; flex-direction: column; gap: var(--vo-hero-block-gap); padding-top: calc(var(--vo-hero-block-gap) + var(--vo-space-2)); margin-block-start: 0; }   /* ảnh -> tên rộng hơn các khối khác 8px */   
.vo-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--vo-space-5); }   /* không wrap: tên dài thì tự xuống dòng trong ô của nó, Share / Save luôn cùng hàng với tên */
.vo-hero__acts { flex: none; display: flex; gap: var(--vo-space-2); margin-left: auto; }
.vo-hero__title { flex: 1 1 0; min-width: 0; margin: 0; color: var(--vo-primary); font-size: var(--vo-fs-hero); font-weight: var(--vo-hero-title-fw); line-height: 1.15; letter-spacing: -.02em; }
.vo-page--attraction .vo-hero__title,
.vo-page--post .vo-hero__title { font-size: var(--vo-title-sm-fs); font-weight: var(--vo-title-sm-fw); line-height: 1.4; letter-spacing: -.015em; text-wrap: wrap; }   /* tên attraction dài hơn tên điểm đến: nhỏ hơn hero; wrap để chữ đầy dòng mới xuống (base.css đặt balance cho mọi h1) */
.vo-hero__credit { margin: calc(var(--vo-space-1) - var(--vo-hero-block-gap)) 0 calc(var(--vo-space-1) * -1); color: var(--vo-muted); font-size: var(--vo-fs-xs); }   /* ngay dưới ảnh, nhỏ, kéo sát khối ảnh */
.vo-hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vo-hero__desc { max-width: 64ch; margin: calc(var(--vo-space-2) - var(--vo-hero-block-gap)) 0 0; color: var(--vo-muted); font-size: var(--vo-fs-base); }   /* = chữ nội dung (.vo-prose), không to hơn phần đọc bên dưới */
/* Chip meta thành chữ phẳng + icon nhỏ (kiểu Tripadvisor), không còn viên thuốc: hàng viên thuốc chiếm 2 dòng cao ở điện thoại và làm hero thưa. Không ngăn bằng chấm vì chấm sẽ rớt đầu dòng khi xuống hàng. Kéo sát lên tên (khối tên + meta là 1 nhóm). */
.vo-hero__meta { display: flex; flex-wrap: wrap; gap: var(--vo-space-1) var(--vo-space-4); margin: calc(var(--vo-space-1) - var(--vo-hero-block-gap)) 0 0; padding: 0; list-style: none; color: var(--vo-muted); font-size: var(--vo-fs-sm); line-height: 1.5; }
.vo-hero__meta li { display: inline-flex; align-items: center; gap: var(--vo-space-1); }
.vo-hero__meta .vo-icon { flex: none; }   /* canh giữa theo ô dòng chữ (align-items: center ở li): không nhích tay */
.vo-hero__meta strong { color: var(--vo-ink); font-weight: 600; }
.vo-hero__meta .vo-badge { display: flex; padding-top: 2px; }   /* khối riêng trong span: inline-flex + vertical-align: middle của badge làm nó lệch ~1.5px so với chữ các chip bên cạnh. padding-top: chữ HOA không có phần thò xuống nên tâm nét chữ cao hơn tâm khung ~1px, đẩy xuống cho cùng hàng với chữ thường */
.vo-hero__meta a:not(.vo-badge) { color: inherit; text-decoration: none; }   /* tag attraction là .vo-badge: kiểu của nó nằm ở badge.css */
@media (hover: hover) {
	.vo-hero__meta a:not(.vo-badge):hover { text-decoration: underline; text-underline-offset: 3px; }
}
.vo-hero__inner .vo-button { --_bg: var(--vo-surface); --_bg-hover: var(--vo-hover); --_ink: var(--vo-primary); --_bd: var(--vo-line); }
.vo-hero__acts .vo-heart--text { padding: 0 var(--_px); border: 1px solid var(--_bd); background: var(--_bg); }   /* heart.css bỏ viền + nền của nút tim; ở đây nút Save phải giống Share */
@media (hover: hover) {
	.vo-hero__acts .vo-heart--text:hover { background: var(--_bg-hover); }
}
@media (max-width: 980px) {   /* điện thoại + tablet: nút ảnh chỉ còn số, không chữ "photos" */
	.vo-hero__w { display: none; }
}
@media (max-width: 980px) {   /* điện thoại + tablet: tên attraction / bài viết nhỏ hơn cỡ desktop (cùng cỡ ở mọi trang loại này) */
	.vo-page--attraction .vo-hero__title,
	.vo-page--post .vo-hero__title { font-size: var(--vo-fs-xl); }
}
@media (max-width: 767px) {   /* điện thoại + tablet nhỏ: Share / Save chỉ icon, lên hàng breadcrumb */
	.vo-hero__acts .vo-button { width: var(--vo-button-h); padding-inline: 0; justify-content: center; }
	.vo-hero__acts .vo-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* vẫn là tên nút cho trình đọc màn hình */
	/* Share / Save lên cùng hàng với breadcrumb (khối nằm trên hero, khác block nên đặt tuyệt đối theo main), không viền, nền trong như nút Log in ở header.
	   top = đệm trên của hàng breadcrumb (templates/*.html: spacing 40), cao = --vo-btn; breadcrumb được nới cho bằng và chừa chỗ bên phải */
	.vo-page:has(> .vo-hero__inner) { position: relative; }
	.vo-page:has(> .vo-hero__inner) > .vo-hero { margin-top: 0; }   /* hàng breadcrumb đã cao 44px (chừa nút Share / Save) nên chữ đã cách ảnh ~12px; cộng thêm margin thì xa. */
	.vo-page:has(> .vo-hero__inner) { --_out: calc(var(--vo-space-3) - 2px); }   /* nút lấn ra ngoài lề nội dung, đúng như .vo-header__tools (header.css) để icon thẳng với hamburger */
	.vo-page:has(> .vo-hero__inner) .vo-crumb { display: flex; align-items: center; min-height: var(--vo-btn); padding-right: calc(2 * var(--vo-btn) - var(--vo-space-2) - var(--_out) + var(--vo-space-3)); }   /* chừa chỗ 2 nút + 12px, để "..." không dính icon */
	.vo-page:has(> .vo-hero__inner) .vo-crumb ol { min-width: 0; }
	/* Hàng breadcrumb đã cao 44px, chữ nằm giữa: bỏ đệm 16px trên (inline của template) để khoảng từ header tới chữ bằng từ chữ tới ảnh. !important: đè style inline */
	.vo-page:has(> .vo-hero__inner) > .alignwide:first-child { padding-top: 0 !important; }
	.vo-hero__acts { position: absolute; top: 0; right: calc(var(--vo-gutter) - var(--_out)); gap: 0; }
	.vo-hero__acts > * + * { margin-left: calc(var(--vo-space-2) * -1); }   /* 2 nút tròn 44px chồng lên phần đệm trống: icon gần nhau, vùng bấm vẫn tròn */
	.vo-hero__inner .vo-hero__acts .vo-button { --_bg: transparent; --_bd: transparent; --_bg-hover: var(--vo-hover); --_ink: var(--vo-ink); }
}