/* 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);
}

.vh-hero__media {
	position: relative;
	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);
	}
}