/* Khối hero – media-panel: ảnh trước, thẻ trắng đè 48px, không chữ trên ảnh. Mobile trước, mốc 640px / 1024px. */

/* Ảnh sát đầu trang: bỏ khoảng đệm trên của khung khối. */
.vh-s.vh-s-hero {
	padding-block-start: 0;
	padding-block-end: calc(var(--vh-section-pad) / 2);
}

/* width 100%: có aspect-ratio + max-height mà không khai width thì trình duyệt co bề ngang theo tỷ lệ
   (màn > ~1213px hở dải trắng bên phải). Khai width để khung luôn kín bề ngang; max-height chỉ cắt chiều cao. */
.vh-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--vh-ratio-hero-mobile, 16 / 10);
	max-height: 520px;
	overflow: hidden;
	background: var(--vh-color-surface);
}

/* Ảnh (hoặc ô giữ chỗ) phủ kín khung, cắt theo tỉ lệ; khung quyết định tỉ lệ, không phải ảnh. */
.vh-hero__media > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.vh-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.vh-hero__media .vh-ph {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

/* ---- Thẻ thông tin ---- */

.vh-hero__card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: -48px;
	padding: var(--vh-card-pad);
	border: 1px solid var(--vh-color-border);
	border-radius: calc(var(--vh-radius-card) + 2px);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	box-shadow: var(--vh-shadow-card);
}

.vh-hero__info {
	display: grid;
	gap: 0.625rem;
	min-width: 0;
}

.vh-hero__title {
	margin: 0;
	overflow-wrap: anywhere;
}

.vh-hero__sub,
.vh-hero__tagline {
	margin: 0;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-body);
	line-height: var(--vh-lh-body);
}

.vh-hero__tagline {
	color: var(--vh-color-text);
}

/* Chip điểm: nền tint, chữ accent-ink (6,38:1). */
.vh-hero__rating-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.vh-hero__rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	min-height: 32px;
	padding: 0.25rem 0.75rem;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.3;
}

.vh-hero__score {
	font-weight: var(--vh-fw-bold);
	font-variant-numeric: tabular-nums;
}

.vh-hero__star {
	flex: none;
	fill: currentColor;
}

.vh-hero__facts {
	display: grid;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.vh-hero__fact {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--vh-fs-body);
	line-height: var(--vh-lh-body);
}

.vh-hero__fact-icon {
	flex: none;
	margin-top: 0.2em;
	color: var(--vh-color-muted);
}

.vh-hero__time {
	white-space: nowrap;
}

.vh-hero__dot {
	margin-inline: 0.375rem;
	color: var(--vh-color-muted);
}

.vh-hero__booking {
	min-width: 0;
}

/* Gọi · Zalo · Nhắn tin: chia đều bề ngang trên điện thoại, nút cao theo token. */
.vh-hero__contact {
	display: flex;
	gap: 0.5rem;
}

.vh-hero__contact > .vh-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--vh-btn-h-mobile);
	gap: 0.375rem;
	padding-inline: 0.5rem;
	white-space: nowrap;
}

/* ---- Bảng "Nhắn tin" (khung .vh-sheet do base.css lo) ---- */

.vh-hero-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.vh-hero-sheet__title {
	margin: 0;
}

.vh-hero-sheet__close {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--vh-color-border);
	border-radius: 50%;
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	cursor: pointer;
}

.vh-hero-sheet__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-hero-sheet__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px solid var(--vh-color-border);
	color: var(--vh-color-text);
	text-decoration: none;
}

.vh-hero-sheet__list > li:last-child .vh-hero-sheet__item {
	border-bottom: 0;
}

.vh-hero-sheet__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vh-color-surface);
	color: var(--vh-color-primary);
}

.vh-hero-sheet__item--zalo .vh-hero-sheet__icon {
	color: var(--vh-color-zalo);
}

.vh-hero-sheet__text {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
}

.vh-hero-sheet__label {
	font-weight: var(--vh-fw-medium);
}

.vh-hero-sheet__meta {
	overflow-wrap: anywhere;
	color: var(--vh-color-muted);
	font-size: var(--vh-fs-small);
}

.vh-hero-sheet__go {
	flex: none;
	color: var(--vh-color-muted);
}

.vh-hero-sheet__item:hover .vh-hero-sheet__label {
	color: var(--vh-color-primary);
}

.vh-hero-sheet__close:focus-visible,
.vh-hero-sheet__item:focus-visible {
	outline: 3px solid var(--vh-color-focus);
	outline-offset: 2px;
}

/* ---- Máy tính bảng ---- */

@media (min-width: 640px) {
	.vh-hero__card {
		padding: 1.5rem 1.75rem;
	}

	.vh-hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}

	.vh-hero__contact > .vh-btn {
		flex: 0 1 auto;
		min-width: 120px;
		padding-inline: 1rem;
	}
}

/* ---- Máy tính: 21:9, thẻ chia 2 cột (thông tin | liên hệ), thanh đặt phòng trải ngang bên dưới ---- */

@media (min-width: 1024px) {
	.vh-hero__media {
		aspect-ratio: var(--vh-ratio-hero-desktop, 21 / 9);
	}

	.vh-hero__card {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"info contact"
			"book book";
		column-gap: 2rem;
		row-gap: 1.5rem;
		padding: 1.75rem 2rem;
	}

	.vh-hero__info {
		grid-area: info;
	}

	.vh-hero__contact {
		grid-area: contact;
		align-self: start;
	}

	.vh-hero__booking {
		grid-area: book;
	}

	.vh-hero__contact > .vh-btn {
		min-height: var(--vh-btn-h);
	}
}

/* =====================================================================
 * Phần dùng chung của các biến thể hero mới (fullbleed, split, dual-intent, media-panel mist-fade/framed, hero chữ)
 * và của intro / stats-band. Chỉ lớp mới, không đổi gì của overlap-card ở trên (Mini Gọn).
 * ===================================================================== */

.vh-hero-pic {
	display: block;
}

/* ---- Nút ---- */
/* Rộng hết khối chữ: khối co theo nội dung thì min-width % của nút làm hai nút rớt dòng. */
.vh-hero-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-top: 8px;
}

.vh-hero-btns > .vh-btn {
	flex: 1 1 auto;
	min-width: min(100%, 10rem);
}

@media (min-width: 640px) {
	.vh-hero-btns > .vh-btn {
		flex: 0 0 auto;
	}
}

/* Nút chính: màu nút Đặt của mẫu (vd vàng amber #2, vàng nắng #9), mặc định màu chính. */
.vh-hero-btn--book {
	--vh-btn-bg: var(--vh-color-book-bg, var(--vh-color-primary));
	--vh-btn-fg: var(--vh-color-on-book, var(--vh-color-on-primary));
	box-shadow: var(--vh-btn-shadow, none);
	text-transform: var(--vh-btn-transform, none);
}

/* Có màu nút Đặt riêng mà không có màu hover riêng thì giữ nguyên nền, không nhảy sang primary-hover (sai cặp chữ/nền). */
.vh-hero-btn--book:hover {
	--vh-btn-bg: var(--vh-color-book-bg-hover, var(--vh-color-book-bg, var(--vh-color-primary-hover)));
}

/* Nút phụ đặt trên ảnh: nền trắng 92%, chữ màu chữ chính. */
.vh-hero-btn--light {
	--vh-btn-bg: color-mix(in srgb, var(--vh-white) 92%, transparent);
	--vh-btn-fg: var(--vh-color-text);
	--vh-btn-bd: transparent;
}

.vh-hero-btn--light:hover {
	--vh-btn-bg: var(--vh-white);
}

.vh-hero-btn__arrow {
	transition: transform 0.15s;
}

.vh-hero-btn:hover .vh-hero-btn__arrow {
	transform: translateX(4px);
}

/* ---- Nhãn dán tròn: xoay tĩnh −8°, không quay liên tục (khỏi cần nút dừng, WCAG 2.2.2) ----
 * Không đặt margin/position ở đây: hero.css nạp SAU hero--*.css (thứ tự tên tệp), biến thể tự đặt vị trí. */
.vh-sticker {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	padding: 10px;
	border-radius: 50%;
	background: var(--vh-color-highlight, var(--vh-color-accent));
	color: var(--vh-color-text);
	font-family: var(--vh-font-accent, var(--vh-font-heading));
	font-size: 0.8125rem;
	font-weight: var(--vh-fw-bold);
	line-height: 1.15;
	text-align: center;
	overflow-wrap: anywhere;
	box-shadow: var(--vh-btn-shadow, none);
	transform: rotate(-8deg);
}

@media (min-width: 1024px) {
	.vh-sticker {
		width: 112px;
		height: 112px;
		padding: 14px;
		font-size: 0.9375rem;
	}
}

/* ---- Chip điểm ---- */
.vh-hero-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vh-hero-rating__chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 12px;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.3;
}

.vh-hero-rating__chip strong {
	font-weight: var(--vh-fw-bold);
	font-variant-numeric: tabular-nums;
}

.vh-hero-rating__star {
	fill: currentColor;
}

/* ---- Giờ địa phương: chip trên ảnh hoặc dòng ghi chép in nghiêng ---- */
.vh-live {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	margin: 0;
	font-size: var(--vh-fs-small);
	line-height: 1.4;
}

.vh-live--chip {
	min-height: 32px;
	padding: 4px 12px;
	border-radius: var(--vh-radius-chip);
	background: rgb(var(--vh-color-overlay) / var(--vh-hero-a, 0.72));
	color: var(--vh-white);
}

.vh-live--line {
	color: var(--vh-color-muted);
	font-style: italic;
}

.vh-on-deep .vh-live--line {
	color: var(--vh-color-muted-on-deep);
}

.vh-live__icon {
	margin-right: 6px;
}

/* Mỗi mảnh là một ô flex nên dấu cách quanh '·' trong mã bị nuốt; giữ lại bằng white-space: pre. */
.vh-live__dot {
	white-space: pre;
}

.vh-live__time {
	font-style: normal;
	font-weight: var(--vh-fw-medium);
	font-variant-numeric: tabular-nums;
}

.vh-live__src {
	margin-left: 6px;
	font-size: 0.75rem;
}

/* ---- Cụm nhấn trong tiêu đề ---- */
.vh-mark {
	color: inherit;
}

.vh-mark--italic {
	color: var(--vh-color-accent-ink);
	font-style: italic;
}

/* Bút dạ nửa dưới; chữ vẫn là màu mực (chỉ đặt chữ mực lên màu nhấn). */
.vh-mark--marker {
	padding-inline: 0.06em;
	background: linear-gradient(transparent 56%, var(--vh-color-highlight, var(--vh-color-accent)) 56%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Trên ảnh / nền tối: chữ nghiêng giữ màu chữ của nền; bút dạ phủ kín và chữ chuyển sang mực để đủ tương phản. */
.vh-on-deep .vh-mark--italic,
.vh-hero-fb .vh-mark--italic {
	color: inherit;
}

.vh-on-deep .vh-mark--marker,
.vh-hero-fb .vh-mark--marker {
	background: var(--vh-color-highlight, var(--vh-color-accent));
	color: var(--vh-color-text);
}

/* ---- Nút tạm dừng video (ký hiệu vẽ bằng CSS, chữ luôn hiện) ---- */
.vh-hero-vbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 14px;
	border: 0;
	border-radius: var(--vh-radius-chip);
	background: color-mix(in srgb, var(--vh-white) 92%, transparent);
	color: var(--vh-color-text);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.2;
}

.vh-hero-vbtn__glyph {
	flex: none;
	width: 12px;
	height: 14px;
	border-inline: 4px solid currentColor;
}

.vh-hero-vbtn.is-paused .vh-hero-vbtn__glyph {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
}

/* Thanh đặt phòng sau hero do parts/booking-bar in trong khung .vh-bbw--{vị trí} (booking.css); hero chỉ chừa chỗ cho chữ. */

/* ---- Hero chữ: khách sạn chưa có ảnh nào (R13) ---- */
.vh-hero-tx {
	padding-block: clamp(48px, 10vw, 112px) clamp(72px, 10vw, 120px);
	background: var(--vh-color-surface);
	color: var(--vh-color-text);
}

.vh-hero-tx--deep {
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

.vh-hero-tx__in {
	display: grid;
	justify-items: start;
	gap: 12px;
}

.vh-hero-tx--center .vh-hero-tx__in {
	justify-items: center;
	text-align: center;
}

.vh-hero-tx--center .vh-hero-btns {
	justify-content: center;
}

.vh-hero-tx__mark {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--vh-font-heading);
	font-size: 1.75rem;
	font-weight: var(--vh-fw-heading);
	line-height: 1;
}

.vh-hero-tx__title {
	max-width: 22ch;
	font-size: var(--vh-fs-display, var(--vh-fs-h1));
}

.vh-hero-tx__sub {
	max-width: 40rem;
}

.vh-hero-tx--surface .vh-hero-tx__sub {
	color: var(--vh-color-muted);
}

.vh-hero-tx--deep .vh-hero-tx__sub {
	color: var(--vh-color-muted-on-deep);
}

/* Dòng nhỏ trên tiêu đề của mọi biến thể hero mới: theo kiểu nhãn của mẫu (in hoa chỉ khi mẫu chọn). */
.vh-hero-fb__eyebrow,
.vh-hero-fr__eyebrow,
.vh-hero-mist__eyebrow,
.vh-hero-split__eyebrow,
.vh-hero-dual__eyebrow,
.vh-hero-dual__cap-eyebrow,
.vh-hero-tx__eyebrow {
	margin: 0;
	text-transform: var(--vh-label-transform, none);
	letter-spacing: var(--vh-ls-label, 0);
	line-height: var(--vh-lh-label, 1.4);
}

@media (prefers-reduced-motion: reduce) {
	.vh-hero-btn__arrow {
		transition: none;
	}

	.vh-hero-btn:hover .vh-hero-btn__arrow {
		transform: none;
	}
}