/*
 * Khung trang: link bỏ qua, dải demo, đầu trang (header/bar), sheet menu, chân trang (footer/columns), thanh dính điện thoại.
 */

.vh-skip {
	position: absolute;
	top: -200px;
	left: 8px;
	z-index: 2000;
	padding: 12px 16px;
	border-radius: var(--vh-radius-button);
	background: var(--vh-color-bg);
	color: var(--vh-color-text);
	box-shadow: var(--vh-shadow-card);
	font-weight: var(--vh-fw-medium);
}

.vh-skip:focus {
	top: 8px;
}

/* Dải demo + đầu trang dính chung một khối. */
.vh-top {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Điện thoại: dải demo (2–3 dòng) cuộn đi theo trang, chỉ thanh đầu trang dính, đỡ chiếm màn hình. */
@media (max-width: 767px) {
	.vh-top {
		display: contents;
	}

	.vh-header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* Thanh quản trị WP: ≤600px nó không dính nên giữ top 0. */
@media (min-width: 601px) and (max-width: 767px) {
	.admin-bar .vh-header {
		top: 46px;
	}
}

@media (min-width: 768px) and (max-width: 782px) {
	.admin-bar .vh-top {
		top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar .vh-top {
		top: 32px;
	}
}

/* ---------- Dải "Website mẫu" (R7) ---------- */
.vh-ribbon {
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.vh-ribbon__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 14px;
	padding-block: 6px;
	text-align: center;
}

.vh-ribbon__text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vh-ribbon__text .vh-i {
	color: var(--vh-color-muted-on-deep);
}

/* Dòng công tắc được xuống dòng giữa các link trên điện thoại hẹp; từng link vẫn giữ một dòng. */
.vh-ribbon__switch-wrap {
	max-width: 100%;
	color: var(--vh-color-muted-on-deep);
	white-space: normal;
}

.vh-ribbon__switch-wrap > .vh-ribbon__state,
.vh-ribbon__switch-wrap > .vh-ribbon__switch {
	white-space: nowrap;
}

.vh-ribbon .vh-ribbon__switch {
	position: relative;
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
	font-weight: var(--vh-fw-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Vùng chạm rộng hơn chữ, không làm dải cao thêm. */
.vh-ribbon__switch::before {
	content: "";
	position: absolute;
	inset: -12px -8px;
}

.vh-ribbon .vh-ribbon__switch:hover {
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
	text-decoration-thickness: 2px;
}

@media (max-width: 599px) {
	.vh-ribbon {
		font-size: 0.75rem;
	}

	.vh-ribbon__text .vh-i {
		display: none;
	}
}

/* ---------- Đầu trang (header/bar) ---------- */
.vh-header {
	border-bottom: 1px solid transparent;
	background: var(--vh-color-header-bg, var(--vh-color-bg));
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s, transform 0.25s ease;
}

.vh-header.is-scrolled {
	border-bottom-color: var(--vh-color-border);
	box-shadow: 0 2px 12px rgb(var(--vh-color-overlay) / 0.08);
}

.vh-header__in {
	display: flex;
	align-items: center;
	gap: 8px;
	height: min(var(--vh-header-h), 56px);
}

.vh-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 48px;
	margin-right: auto;
	color: var(--vh-color-text);
	text-decoration: none;
}

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

.vh-logo__mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--vh-color-primary);
	color: var(--vh-color-on-primary);
	font-family: var(--vh-font-heading);
	font-size: 1.125rem;
	font-weight: var(--vh-fw-heading);
	line-height: 1;
}

.vh-logo__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.vh-logo__kind {
	color: var(--vh-color-muted);
	font-size: 0.75rem;
	font-weight: var(--vh-fw-medium);
}

.vh-logo__name {
	overflow: hidden;
	font-family: var(--vh-font-heading);
	font-size: 1.125rem;
	font-weight: var(--vh-fw-heading);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vh-logo--img .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.vh-logo--img img {
	width: auto;
	max-height: 40px;
}

.vh-nav {
	display: none;
}

.vh-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

.vh-header__tel,
.vh-header__book,
.vh-lang--header {
	display: none;
}

.vh-header__m--call {
	color: var(--vh-color-call);
}

.vh-header__m--call:hover {
	color: var(--vh-color-call);
}

@media (min-width: 1024px) {
	.vh-header__in {
		gap: 24px;
		height: var(--vh-header-h);
	}

	.vh-logo {
		margin-right: 0;
	}

	/*
	 * Thanh bar: tên khách sạn không bị co thành "Phố T…"; menu co thay (mục dư vào "Thêm", site.js fitNav).
	 * Tên dài hơn khung (18em ở 1024–1279px, 26em từ 1280px) thì xuống hai dòng cân nhau thay vì cắt "…";
	 * chỉ tên dài quá hai dòng mới bị cắt ở cuối dòng hai.
	 */
	.vh-header--bar .vh-logo {
		flex-shrink: 0;
	}

	.vh-header--bar .vh-logo__name {
		display: -webkit-box;
		max-width: 18em;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
		text-wrap: balance;
	}

	.vh-nav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}

	.vh-nav__list {
		display: flex;
		align-items: stretch;
		justify-content: center;
		gap: 2px;
		height: var(--vh-header-h);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vh-nav__list > li {
		display: flex;
	}

	.vh-nav__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 100%;
		padding: 0 12px;
		color: var(--vh-color-text);
		font-family: var(--vh-font-ui, var(--vh-font-body));
		font-size: 0.9375rem;
		font-weight: var(--vh-fw-medium);
		text-decoration: none;
		white-space: nowrap;
		list-style: none;
		cursor: pointer;
	}

	.vh-nav__link::-webkit-details-marker {
		display: none;
	}

	/* Gạch 3px màu chính dưới mục đang xem (scroll-spy). */
	.vh-nav__link::after {
		content: "";
		position: absolute;
		right: 12px;
		bottom: 0;
		left: 12px;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--vh-color-primary);
		transform: scaleX(0);
		transition: transform 0.2s;
	}

	.vh-nav__link:hover {
		color: var(--vh-color-primary);
	}

	.vh-nav__link.is-active,
	.vh-nav__link[aria-current],
	.vh-nav__more.is-active > .vh-nav__link {
		color: var(--vh-color-text);
	}

	.vh-nav__link.is-active::after,
	.vh-nav__link[aria-current]::after,
	.vh-nav__more.is-active > .vh-nav__link::after {
		transform: scaleX(1);
	}

	.vh-nav__link:focus-visible {
		outline-offset: -3px;
	}

	.vh-nav__link .vh-i {
		transition: transform 0.15s;
	}

	.vh-nav__more {
		position: relative;
	}

	.vh-nav__more[open] > .vh-nav__link .vh-i {
		transform: rotate(180deg);
	}

	.vh-nav__drop {
		position: absolute;
		top: calc(100% - 6px);
		right: 0;
		z-index: 5;
		min-width: 220px;
		margin: 0;
		padding: 8px;
		border: 1px solid var(--vh-color-border);
		border-radius: var(--vh-radius-card);
		background: var(--vh-color-bg);
		box-shadow: var(--vh-shadow-card);
		list-style: none;
	}

	.vh-nav__drop a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
		border-radius: 8px;
		color: var(--vh-color-text);
		font-weight: var(--vh-fw-medium);
		text-decoration: none;
	}

	.vh-nav__drop a:hover,
	.vh-nav__drop a.is-active {
		background: var(--vh-color-surface);
		color: var(--vh-color-accent-ink);
	}

	.vh-header__actions {
		gap: 16px;
	}

	.vh-header__m {
		display: none;
	}

	.vh-header__tel {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		color: var(--vh-color-text);
		text-decoration: none;
	}

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

	.vh-header__tel .vh-i {
		color: var(--vh-color-call);
	}

	.vh-header__tel-text {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.vh-header__tel-label {
		display: none;
		color: var(--vh-color-muted);
		font-size: 0.75rem;
	}

	/* R7: số có nhãn riêng (vd hotline tư vấn Sổ Lưu Trú bản demo) không bao giờ hiện trơ trọi. */
	.vh-header__tel--labelled .vh-header__tel-label {
		display: block;
	}

	.vh-header__tel-num {
		font-weight: var(--vh-fw-bold);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.vh-header__tel:hover .vh-header__tel-num {
		text-decoration: underline;
	}

	.vh-header__book {
		display: inline-flex;
	}

	.vh-lang--header {
		display: flex;
	}
}

/*
 * 1024–1279px: nhãn không được nới rộng cụm số (menu sẽ tràn); contain: inline-size cho nhãn
 * chỉ rộng bằng dòng số và tự xuống 2 dòng. Trình duyệt cũ không hỗ trợ thì max-width giữ cho gọn.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.vh-header__tel--labelled .vh-header__tel-label {
		max-width: 9.5rem;
		line-height: 1.2;
		contain: inline-size;
	}
}

@media (min-width: 1280px) {
	.vh-header__tel-label {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vh-header,
	.vh-nav__link::after,
	.vh-nav__link .vh-i {
		transition: none;
	}
}

/* Chuyển ngữ (chỉ hiện khi B1 có ≥2 ngôn ngữ). */
.vh-lang {
	gap: 2px;
}

.vh-lang a {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 8px;
	color: var(--vh-color-muted);
	font-size: 0.875rem;
	font-weight: var(--vh-fw-bold);
	text-decoration: none;
}

.vh-lang a:hover {
	color: var(--vh-color-text);
}

.vh-lang a[aria-current] {
	background: var(--vh-color-surface);
	color: var(--vh-color-text);
}

.vh-lang--sheet {
	display: flex;
	gap: 8px;
	padding: 12px 20px 4px;
}

.vh-lang--sheet a {
	min-width: 56px;
	min-height: 48px;
	border: 1px solid var(--vh-color-border);
}

/* ---------- Sheet menu điện thoại: mỗi mục 56px ---------- */
.vh-menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-menu-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px;
	border-bottom: 1px solid var(--vh-color-border);
	color: var(--vh-color-text);
	font-size: 1.0625rem;
	font-weight: var(--vh-fw-medium);
	text-decoration: none;
}

.vh-menu-list li:last-child a {
	border-bottom: 0;
}

.vh-menu-list a .vh-i {
	color: var(--vh-color-muted);
}

.vh-menu-list a:hover {
	background: var(--vh-color-surface);
	color: var(--vh-color-text);
}

.vh-menu-list a.is-active,
.vh-menu-list a[aria-current] {
	background: var(--vh-color-surface);
	box-shadow: inset 4px 0 0 var(--vh-color-primary);
	color: var(--vh-color-accent-ink);
}

.vh-menu-list a:focus-visible {
	outline-offset: -3px;
}

/* ---------- Chân trang (footer/columns) ---------- */
/* Màu chân trang qua biến cục bộ: mẫu có chân trang sáng (#8) đặt --vh-color-footer-bg/-text/-link/-focus. */
.vh-footer {
	--vh-f-bg: var(--vh-color-footer-bg, var(--vh-color-deep));
	--vh-f-text: var(--vh-color-footer-text, var(--vh-color-muted-on-deep));
	--vh-f-link: var(--vh-color-footer-link, var(--vh-color-link-on-deep, var(--vh-color-on-deep)));
	--vh-ring: var(--vh-color-footer-focus, var(--vh-color-focus-on-deep));
	position: relative;
	padding-top: clamp(40px, 8vw, 64px);
	/* Chừa chỗ cho thanh dính điện thoại. */
	padding-bottom: calc(var(--vh-sticky-bar-h) + env(safe-area-inset-bottom, 0px) + 16px);
	background: var(--vh-f-bg);
	color: var(--vh-f-text);
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.vh-footer {
		padding-bottom: 32px;
	}
}

.vh-footer a:not(.vh-btn),
.vh-footer.vh-on-deep a:not(.vh-btn) {
	color: var(--vh-f-link);
}

.vh-footer a:not(.vh-btn):hover {
	color: var(--vh-f-link);
	text-decoration-thickness: 2px;
}

.vh-footer__grid {
	display: grid;
	gap: 32px;
}

@media (min-width: 768px) {
	.vh-footer__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		column-gap: 40px;
	}

	.vh-footer__legal {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.vh-footer__grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr);
		column-gap: 48px;
	}

	.vh-footer__legal {
		grid-column: auto;
	}
}

.vh-footer__name {
	margin-bottom: 8px;
	color: var(--vh-f-link);
	font-size: 1.25rem;
}

.vh-footer__tagline {
	margin-bottom: 12px;
}

.vh-footer__h {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--vh-f-link);
	font-family: var(--vh-font-body);
	font-size: 1rem;
	font-weight: var(--vh-fw-bold);
	line-height: 1.4;
}

.vh-footer__contact,
.vh-footer__links,
.vh-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-footer__contact li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
}

.vh-footer__contact .vh-i {
	color: var(--vh-f-text);
}

.vh-footer__contact a,
.vh-footer__links a,
.vh-footer__social a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.vh-footer__links a {
	text-decoration: none;
}

.vh-footer__links a:hover {
	text-decoration: underline;
}

.vh-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin-top: 4px;
}

.vh-footer__bottom {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--vh-f-link) 16%, transparent);
	font-size: var(--vh-fs-small);
}

.vh-footer__bottom p {
	padding-block: 8px;
}

/* Khối pháp lý */
.vh-legal {
	font-size: var(--vh-fs-small);
	line-height: 1.55;
}

.vh-legal__name {
	margin-bottom: 6px;
	color: var(--vh-f-link, var(--vh-color-link-on-deep, var(--vh-color-on-deep)));
	font-weight: var(--vh-fw-medium);
}

.vh-legal__list {
	display: grid;
	gap: 4px;
	margin: 0;
}

.vh-legal__list dt {
	display: inline;
}

.vh-legal__list dt::after {
	content: ":";
}

.vh-legal__list dd {
	display: inline;
	margin: 0;
	color: var(--vh-f-link, var(--vh-color-link-on-deep, var(--vh-color-on-deep)));
}

.vh-legal__bct a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	font-weight: var(--vh-fw-medium);
}

/* ---------- Thanh dính điện thoại: [Gọi][Zalo][Đặt phòng 50%] ---------- */
.vh-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	height: calc(var(--vh-sticky-bar-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border-top: 1px solid var(--vh-color-border);
	background: var(--vh-color-bg);
	box-shadow: 0 -4px 16px rgb(var(--vh-color-overlay) / 0.08);
	transition: transform 0.2s ease, visibility 0.2s;
}

/* Có JS: chỉ hiện khi đã cuộn qua điểm mốc; giấu khi sheet hoặc bàn phím mở. */
.vh-js .vh-sticky:not(.is-shown),
.vh-sheet-open .vh-sticky,
.vh-kb .vh-sticky {
	visibility: hidden;
	transform: translateY(110%);
}

@media (min-width: 1024px) {
	.vh-sticky {
		display: none;
	}
}

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

.vh-sticky__cell {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	padding: 6px 4px;
	color: var(--vh-color-text);
	font-size: 0.8125rem;
	font-weight: var(--vh-fw-medium);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.vh-sticky__cell + .vh-sticky__cell {
	border-left: 1px solid var(--vh-color-border);
}

.vh-sticky__cell:focus-visible {
	outline-offset: -4px;
}

.vh-sticky__cell--call,
.vh-sticky__cell--call:hover {
	color: var(--vh-color-call);
}

.vh-sticky__cell--zalo,
.vh-sticky__cell--zalo:hover {
	color: var(--vh-color-zalo);
}

/* Nút đặt phòng: màu riêng --vh-color-book-bg khi mẫu có (vd vàng amber #2), không thì màu chính. */
.vh-sticky__cell--book {
	flex: 2 1 0;
	border-left: 0 !important;
	background: var(--vh-color-book-bg, var(--vh-color-primary));
	color: var(--vh-color-on-book, var(--vh-color-on-primary));
	font-size: 0.9375rem;
	font-weight: var(--vh-fw-bold);
	--vh-ring: var(--vh-color-focus-on-book, var(--vh-color-focus-on-deep));
}

.vh-sticky__cell--book:hover {
	background: var(--vh-color-book-hover, var(--vh-color-book-bg, var(--vh-color-primary-hover)));
	color: var(--vh-color-on-book, var(--vh-color-on-primary));
}

.vh-sticky__price {
	font-size: 0.75rem;
	font-weight: var(--vh-fw-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

/* =====================================================================
 * Biến thể khung trang theo mẫu (preset.chrome). Mini Gọn không bật lớp nào dưới đây
 * ngoài lớp mặc định, nên giao diện của nó giữ nguyên.
 * ===================================================================== */

.vh-header__book,
.vh-header__booklink {
	font-family: var(--vh-font-ui, var(--vh-font-body));
}

/* ---------- Thanh trên cùng: utility | promo | departments ---------- */
.vh-topbar {
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: 0.8125rem;
	line-height: 1.35;
}

.vh-topbar--deep {
	background: var(--vh-color-topbar-bg, var(--vh-color-deep));
	color: var(--vh-color-on-deep);
}

.vh-topbar--light {
	border-bottom: 1px solid var(--vh-color-border);
	background: var(--vh-color-topbar-bg, var(--vh-color-surface-2, var(--vh-color-surface)));
	color: var(--vh-color-text);
}

.vh-topbar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 24px;
	min-height: var(--vh-topbar-h, 36px);
}

.vh-topbar__l,
.vh-topbar__r {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 20px;
	min-width: 0;
}

.vh-topbar__text,
.vh-topbar a,
.vh-clock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
}

.vh-topbar a {
	color: inherit;
	text-decoration: none;
}

.vh-topbar--deep a:not(.vh-btn) {
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-topbar a:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vh-topbar .vh-i,
.vh-clock .vh-i {
	opacity: 0.85;
}

.vh-topbar__tel span,
.vh-clock time {
	font-variant-numeric: tabular-nums;
}

/* Utility, departments: chỉ máy tính (điện thoại đã có thanh dính Gọi/Zalo). */
.vh-topbar--utility,
.vh-topbar--departments {
	display: none;
}

@media (min-width: 1024px) {
	.vh-topbar--utility,
	.vh-topbar--departments {
		display: block;
	}

	/* Đầu trang thu gọn khi cuộn (shrink, headroom): thanh trên cùng nhường chỗ. */
	.vh-top.is-compact .vh-topbar--utility,
	.vh-top.is-compact .vh-topbar--departments {
		display: none;
	}
}

.vh-topbar--promo .vh-topbar__in {
	justify-content: center;
}

.vh-topbar .vh-topbar__promo {
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
	min-height: 40px;
	padding-block: 4px;
	text-align: center;
}

.vh-topbar__promo strong {
	font-weight: var(--vh-fw-bold);
}

.vh-lang--topbar {
	display: flex;
	gap: 2px;
}

.vh-topbar .vh-lang--topbar a {
	min-width: 36px;
	min-height: 32px;
	color: inherit;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.vh-topbar .vh-lang--topbar a[aria-current] {
	background: color-mix(in srgb, currentColor 14%, transparent);
	opacity: 1;
}

/* ---------- Đầu trang: phần phụ của biến thể bar ---------- */
.vh-header__issue,
.vh-header__manage,
.vh-header__zalo,
.vh-header__quote {
	display: none;
}

.vh-header__m--zalo,
.vh-header__m--zalo:hover {
	color: var(--vh-color-zalo);
}

@media (min-width: 1024px) {
	.vh-header__quote {
		display: inline-flex;
	}

	.vh-header__zalo {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 16px;
		border-radius: var(--vh-radius-chip);
		background: var(--vh-color-zalo);
		color: var(--vh-color-on-zalo, var(--vh-white));
		font-weight: var(--vh-fw-bold);
		text-decoration: none;
	}

	.vh-header__zalo:hover {
		box-shadow: inset 0 0 0 100vmax rgb(var(--vh-color-overlay) / 0.2);
		color: var(--vh-color-on-zalo, var(--vh-white));
	}
}

@media (min-width: 1280px) {
	.vh-header__issue {
		display: block;
		flex: none;
		color: var(--vh-color-muted);
		font-family: var(--vh-font-accent, var(--vh-font-body));
		font-size: 0.8125rem;
		letter-spacing: var(--vh-ls-label, 0.08em);
		white-space: nowrap;
	}

	.vh-header__manage {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		color: var(--vh-color-text);
		font-size: 0.875rem;
		font-weight: var(--vh-fw-medium);
		text-decoration: none;
		white-space: nowrap;
	}

	.vh-header__manage:hover {
		color: var(--vh-color-text);
		text-decoration: underline;
	}
}

/* ---------- Ô thả xuống của nhóm trang (menu trang) ---------- */
@media (min-width: 1024px) {
	.vh-nav__drop--start {
		right: auto;
		left: 0;
	}

	.vh-nav__drop--rich {
		min-width: 300px;
	}

	.vh-nav__drop--rich a {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2px;
		padding-block: 8px;
	}

	.vh-nav__drop-label {
		display: block;
	}

	.vh-nav__drop-sum {
		display: block;
		color: var(--vh-color-muted);
		font-size: var(--vh-fs-small);
		font-weight: var(--vh-fw-body);
		line-height: 1.4;
	}

	.vh-nav__drop-group ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.vh-nav__drop-h {
		display: block;
		padding: 10px 12px 2px;
		color: var(--vh-color-muted);
		font-size: 0.75rem;
		font-weight: var(--vh-fw-bold);
		letter-spacing: var(--vh-ls-label, 0.04em);
		text-transform: var(--vh-label-transform, none);
	}

	.vh-nav__drop .vh-nav__drop-group a {
		padding-left: 20px;
	}

	/* Menu trang ở 1024–1279px: ít mục hơn, phần dư đã nhân bản sẵn trong "Thêm" (ẩn ở màn rộng). */
	.vh-nav__drop > li.vh-nav__narrow {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.vh-nav__list > li.vh-nav__wide {
		display: none;
	}

	.vh-nav__drop > li.vh-nav__narrow {
		display: block;
	}
}

@media (min-width: 1280px) {
	.vh-nav__list > li.vh-nav__more-item--narrow {
		display: none;
	}

	/* Màn rộng: tên dài ("Cẩm Hải Grand Hotel & Convention") vẫn một dòng, mục menu dư dồn vào "Thêm". */
	.vh-header--bar .vh-logo__name {
		max-width: 26em;
	}
}

/*
 * Menu trang vừa bề ngang (nav[data-vh-fit], site.js): mục không vừa thanh đầu trang được ẩn (is-fit-off)
 * và bản sao của nó trong "Thêm" hiện ra (is-fit-on). Bản sao .vh-nav__fit mặc định ẩn ở mọi độ rộng.
 */
.vh-nav__drop > li.vh-nav__fit:not(.is-fit-on),
.vh-nav__list > li.vh-nav__more-item--fit:not(.is-fit-on) {
	display: none;
}

@media (min-width: 1024px) {
	.vh-nav__list > li.is-fit-off,
	.vh-header__issue.is-fit-off {
		display: none;
	}

	.vh-nav__list > li.vh-nav__more-item.is-fit-on {
		display: flex;
	}

	.vh-nav__drop > li.vh-nav__narrow.is-fit-on,
	.vh-nav__drop > li.vh-nav__fit.is-fit-on {
		display: block;
	}

	/* Nút đặt phòng ở đầu trang không bao giờ xuống hai dòng (chữ hoa giãn rộng như "ĐẶT PHÒNG"). */
	.vh-header__book {
		white-space: nowrap;
	}

	/* centered: thiếu chỗ (site.js gắn is-tight) thì giấu chữ tên cạnh chữ lồng, vẫn giữ cho trình đọc màn hình. */
	.vh-header--centered.is-tight .vh-logo--center.vh-logo--mono .vh-logo__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ---------- Đầu trang thu gọn khi cuộn (sticky: shrink | headroom) ----------
 * Đổi chiều cao tức thì (không chuyển động): site.js đo chênh lệch để bù vào lề dưới, nội dung không bị giật.
 */
@media (min-width: 1024px) {
	.vh-header.is-compact .vh-header__in,
	.vh-header.is-compact .vh-nav__list {
		height: var(--vh-header-h-compact, min(var(--vh-header-h), 64px));
	}

	.vh-header.is-compact .vh-logo__mark {
		width: 32px;
		height: 32px;
		font-size: 1rem;
	}

	.vh-header.is-compact .vh-logo--img img {
		max-height: 32px;
	}
}

/* headroom: cuộn xuống thì đầu trang trượt lên (dưới dải demo), cuộn lên thì hiện lại. */
.vh-js .vh-header.is-hidden {
	transform: translateY(-100%);
}

@media (min-width: 768px) {
	.vh-top--headroom {
		pointer-events: none;
	}

	.vh-top--headroom > * {
		pointer-events: auto;
	}

	.vh-top--headroom .vh-ribbon,
	.vh-top--headroom .vh-topbar {
		position: relative;
		z-index: 2;
	}

	.vh-top--headroom .vh-header {
		position: relative;
		z-index: 1;
	}
}

/* ---------- Biến thể centered: logo hoặc chữ lồng ở giữa, menu chia hai bên ---------- */
.vh-logo--mono .vh-logo__mark--mono {
	width: 40px;
	height: 40px;
	border: var(--vh-border-width, 1px) solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--vh-color-ornament, var(--vh-color-primary));
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
}

@media (min-width: 1024px) {
	.vh-header--centered .vh-logo--side {
		display: none;
	}

	/* Không khoảng cách thừa sau menu (cụm nút bên phải thường rỗng) để logo đúng giữa trang. */
	.vh-header--centered .vh-header__in {
		gap: 0;
	}

	.vh-header--centered .vh-lang--header {
		margin-left: 16px;
	}

	.vh-header--centered.is-compact .vh-header__in {
		gap: 24px;
	}

	.vh-header--centered .vh-nav--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: 24px;
	}

	.vh-header--centered .vh-nav__list--l {
		justify-content: flex-end;
	}

	.vh-header--centered .vh-nav__list--r {
		justify-content: flex-start;
	}

	.vh-header--centered .vh-nav__book {
		align-items: center;
		margin-left: auto;
		padding-left: 12px;
	}

	.vh-header--centered .vh-logo--center {
		margin: 0;
	}

	.vh-header--centered .vh-header__actions {
		flex: none;
	}

	/* Thu gọn: logo nhỏ sang trái, menu theo sau, nút đặt phòng sát phải. */
	.vh-header--centered.is-compact .vh-logo--side {
		display: inline-flex;
	}

	.vh-header--centered.is-compact .vh-logo--center {
		display: none;
	}

	.vh-header--centered.is-compact .vh-nav--split {
		display: flex;
	}

	.vh-header--centered.is-compact .vh-nav__list--l,
	.vh-header--centered.is-compact .vh-nav__list--r {
		justify-content: flex-start;
	}

	.vh-header--centered.is-compact .vh-nav__list--r {
		flex: 1 1 auto;
	}
}

/* ---------- Biến thể menu-overlay: "MENU" | logo giữa | ĐẶT PHÒNG ---------- */
.vh-header--menu-overlay .vh-header__in {
	display: grid;
	grid-template-columns: minmax(48px, 1fr) minmax(0, auto) minmax(48px, 1fr);
	align-items: center;
}

.vh-header--menu-overlay .vh-header__start {
	justify-self: start;
}

.vh-header--menu-overlay .vh-logo {
	justify-self: center;
	margin: 0;
}

.vh-header--menu-overlay .vh-header__actions {
	justify-self: end;
}

.vh-ovbtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 48px;
	min-height: 48px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--vh-color-text);
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: 0.8125rem;
	font-weight: var(--vh-fw-medium);
	letter-spacing: var(--vh-ls-label, 0.16em);
	text-decoration: none;
	text-transform: var(--vh-label-transform, uppercase);
	cursor: pointer;
}

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

.vh-ovbtn__bars {
	display: block;
	width: 24px;
	height: 8px;
	border-block: 2px solid currentColor;
}

.vh-ovbtn__label {
	display: none;
}

.vh-header__booklink {
	display: none;
	align-items: center;
	min-height: 48px;
	color: var(--vh-color-text);
	font-size: 0.8125rem;
	font-weight: var(--vh-fw-medium);
	letter-spacing: var(--vh-ls-label, 0.16em);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-transform: var(--vh-label-transform, uppercase);
	white-space: nowrap;
}

.vh-header__booklink:hover {
	color: var(--vh-color-text);
	text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
	.vh-ovbtn__label,
	.vh-header__booklink {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.vh-header--menu-overlay .vh-header__actions {
		gap: 20px;
	}
}

/* ---------- Đầu trang trong suốt trên hero (chrome.header.transparent) ----------
 * Chỉ khi khối đầu tiên của trang tự nhận nằm dưới đầu trang: hero fullbleed header_overlay (.vh-hero-fb--under-header)
 * hoặc khối bất kỳ có [data-vh-header-overlay]. Trình duyệt không có :has() thì đầu trang giữ nền đặc (an toàn).
 * Hero lo dải phủ đỉnh; đầu trang đổi màu chữ sáng và dùng vòng focus đôi (trắng trong, tối ngoài).
 * Kéo khối đầu lên đúng bằng chiều cao đầu trang kể cả viền 1px (lề âm), cố định theo bố cục nên không nhảy khi cuộn.
 */
@media (max-width: 767px) {
	.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent {
		margin-bottom: calc(-1 * min(var(--vh-header-h), 56px) - 1px);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-top--transparent {
		margin-bottom: calc(-1 * min(var(--vh-header-h), 56px) - 1px);
	}
}

@media (min-width: 1024px) {
	.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-top--transparent {
		margin-bottom: calc(-1 * var(--vh-header-h) - 1px);
	}
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) {
	border-bottom-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) :is(.vh-logo, .vh-logo:hover, .vh-logo__kind, .vh-nav__link, .vh-nav__link:hover, .vh-header__tel, .vh-header__tel:hover, .vh-header__tel-label, .vh-header__tel .vh-i, .vh-icon-btn, .vh-icon-btn:hover, .vh-lang a, .vh-ovbtn, .vh-ovbtn:hover, .vh-header__booklink, .vh-header__booklink:hover, .vh-header__issue, .vh-header__manage) {
	color: inherit;
}

/* Chữ lồng (monogram) trên ảnh hero: theo màu chữ sáng của đầu trang, không giữ màu ornament (~3:1 trên lớp phủ tối). */
.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) .vh-logo__mark--mono {
	color: inherit;
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) .vh-nav__link::after {
	background: currentColor;
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) .vh-icon-btn:hover {
	background: rgb(var(--vh-color-overlay) / 0.35);
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) > .vh-header__in :focus-visible {
	outline: 2px solid var(--vh-color-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--vh-color-focus-on-deep);
}

/* Logo ảnh: có bản nền tối (chrome.header.logo_light) thì đổi ảnh; không có thì đặt trên nền sáng nhỏ cho khỏi chìm. */
.vh-header--logo-swap .vh-logo__light {
	display: none;
	width: auto;
	max-height: 40px;
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--logo-swap:not(.is-solid) .vh-logo__light {
	display: block;
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--logo-swap:not(.is-solid) .custom-logo {
	display: none;
}

.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid):not(.vh-header--logo-swap) .vh-logo--img {
	padding: 2px 8px;
	border-radius: var(--vh-radius-button);
	background: var(--vh-color-bg);
}

/* ---------- Menu điện thoại: nhóm mở rộng, đánh số, các dạng khung ---------- */
.vh-menu-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 0 20px;
	border-bottom: 1px solid var(--vh-color-border);
	color: var(--vh-color-text);
	font-size: 1.0625rem;
	font-weight: var(--vh-fw-medium);
	list-style: none;
	cursor: pointer;
}

.vh-menu-group > summary::-webkit-details-marker {
	display: none;
}

.vh-menu-group > summary .vh-i {
	color: var(--vh-color-muted);
	transition: transform 0.15s;
}

.vh-menu-group[open] > summary .vh-i {
	transform: rotate(180deg);
}

.vh-menu-group > summary:hover {
	background: var(--vh-color-surface);
}

.vh-menu-group__sum.is-active {
	box-shadow: inset 4px 0 0 var(--vh-color-primary);
}

.vh-menu-group > summary:focus-visible {
	outline-offset: -3px;
}

.vh-menu-sub {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--vh-color-border);
	background: var(--vh-color-surface-2, var(--vh-color-surface));
	list-style: none;
}

.vh-menu-list .vh-menu-sub a {
	min-height: 52px;
	padding-left: 36px;
	border-bottom: 0;
	font-size: 1rem;
}

.vh-menu-list--num {
	counter-reset: vh-menu;
}

.vh-menu-list--num > li:not(.vh-menu-list__home) > a::before,
.vh-menu-list--num > li > .vh-menu-group > summary::before {
	content: counter(vh-menu, decimal-leading-zero);
	counter-increment: vh-menu;
	min-width: 2.5em;
	color: var(--vh-color-accent-ink);
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.vh-menu-list--roman > li:not(.vh-menu-list__home) > a::before,
.vh-menu-list--roman > li > .vh-menu-group > summary::before {
	content: counter(vh-menu, upper-roman);
}

/* "Trang chủ" không đánh số nhưng chừa đúng chỗ của số để chữ thẳng hàng. */
.vh-menu-list--num > li.vh-menu-list__home > a::before {
	content: "";
	min-width: 2.5em;
}

/* Có số: số đứng đầu, chữ ngay sau, mũi tên sát phải. */
.vh-menu-list--num > li > a,
.vh-menu-list--num > li > .vh-menu-group > summary {
	justify-content: flex-start;
}

.vh-menu-list--num > li > a > .vh-i,
.vh-menu-list--num > li > .vh-menu-group > summary > .vh-i {
	margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
	.vh-menu-group > summary .vh-i {
		transition: none;
	}
}

/* Ngăn kéo bên phải (drawer) và toàn màn hình (overlay): mọi độ rộng, không bo góc, không canh giữa như sheet. */
.vh-sheet--drawer,
.vh-sheet--overlay {
	align-items: stretch;
	padding: 0 !important;
}

.vh-sheet--drawer {
	justify-content: flex-end;
}

.vh-sheet--drawer .vh-sheet__panel {
	width: min(88vw, 420px);
	max-width: none;
	height: 100%;
	max-height: none;
	border-radius: 0;
	opacity: 1;
	transform: translateX(100%);
}

.vh-sheet--overlay .vh-sheet__panel {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	border-radius: 0;
	opacity: 0;
	transform: none;
	transition: opacity 0.2s ease;
}

.vh-sheet--overlay.is-open .vh-sheet__panel {
	opacity: 1;
}

.vh-sheet--overlay .vh-sheet__body {
	flex: 1 0 auto;
}

/* Nền tối (deep): chữ sáng, đường kẻ mờ theo màu chữ. */
.vh-sheet--deep .vh-sheet__panel,
.vh-sheet--deep .vh-sheet__head {
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

.vh-sheet--deep .vh-sheet__head,
.vh-sheet--deep .vh-sheet__foot,
.vh-sheet--deep .vh-menu-list a,
.vh-sheet--deep .vh-menu-group > summary,
.vh-sheet--deep .vh-menu-sub {
	border-color: color-mix(in srgb, var(--vh-color-on-deep) 18%, transparent);
}

.vh-sheet--deep .vh-icon-btn,
.vh-sheet--deep .vh-icon-btn:hover,
.vh-sheet--deep .vh-menu-group > summary {
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-sheet--deep .vh-icon-btn:hover,
.vh-sheet--deep .vh-menu-list a:hover,
.vh-sheet--deep .vh-menu-group > summary:hover {
	background: color-mix(in srgb, var(--vh-color-on-deep) 10%, transparent);
}

/* Luật chung .vh-menu-list a:hover đổi chữ sang màu chữ chính (tối): trên nền tối giữ chữ sáng khi rê, khi focus. */
.vh-sheet--deep .vh-menu-list a:hover,
.vh-sheet--deep .vh-menu-list a:focus-visible,
.vh-sheet--deep .vh-menu-group > summary:focus-visible {
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-sheet--deep .vh-menu-list a .vh-i,
.vh-sheet--deep .vh-menu-group > summary .vh-i {
	color: var(--vh-color-muted-on-deep);
}

.vh-sheet--deep .vh-menu-sub {
	background: color-mix(in srgb, var(--vh-color-on-deep) 6%, transparent);
}

.vh-sheet--deep .vh-menu-list a.is-active,
.vh-sheet--deep .vh-menu-list a[aria-current] {
	background: color-mix(in srgb, var(--vh-color-on-deep) 10%, transparent);
	box-shadow: inset 4px 0 0 var(--vh-color-accent-on-deep, var(--vh-color-focus-on-deep));
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-sheet--deep .vh-menu-group__sum.is-active {
	box-shadow: inset 4px 0 0 var(--vh-color-accent-on-deep, var(--vh-color-focus-on-deep));
}

.vh-sheet--deep .vh-menu-list--num > li > a::before,
.vh-sheet--deep .vh-menu-list--num > li > .vh-menu-group > summary::before {
	color: var(--vh-color-accent-on-deep, var(--vh-color-muted-on-deep));
}

.vh-sheet--deep .vh-lang--sheet a {
	border-color: color-mix(in srgb, var(--vh-color-on-deep) 30%, transparent);
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-sheet--deep .vh-lang--sheet a[aria-current] {
	background: color-mix(in srgb, var(--vh-color-on-deep) 14%, transparent);
}

/* Ô màu 2 cột (tiles): chữ luôn màu chữ chính trên nền màu nhạt. */
.vh-sheet--tiles .vh-menu-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 16px 20px;
}

.vh-sheet--tiles .vh-menu-list > li > a {
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 88px;
	padding: 12px 14px;
	border: 0;
	border-radius: var(--vh-radius-card);
	background: var(--vh-color-fun-1, var(--vh-color-surface));
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-bold);
}

.vh-sheet--tiles .vh-menu-list > li:nth-child(4n + 2) > a {
	background: var(--vh-color-fun-2, var(--vh-color-surface));
}

.vh-sheet--tiles .vh-menu-list > li:nth-child(4n + 3) > a {
	background: var(--vh-color-fun-3, var(--vh-color-surface));
}

.vh-sheet--tiles .vh-menu-list > li:nth-child(4n) > a {
	background: var(--vh-color-fun-4, var(--vh-color-surface));
}

.vh-sheet--tiles .vh-menu-list > li > a .vh-i {
	align-self: flex-end;
	color: var(--vh-color-text);
}

.vh-sheet--tiles .vh-menu-list > .vh-menu-list__group {
	grid-column: 1 / -1;
}

.vh-sheet--tiles .vh-menu-list > li > a.is-active,
.vh-sheet--tiles .vh-menu-list > li > a[aria-current] {
	box-shadow: inset 0 0 0 3px var(--vh-color-text);
	color: var(--vh-color-text);
}

/* Menu toàn màn hình của biến thể menu-overlay: chữ tiêu đề cỡ lớn, ảnh xem trước bên phải (máy tính). */
.vh-sheet--desktop .vh-menu-list > li > a,
.vh-sheet--desktop .vh-menu-group > summary {
	font-family: var(--vh-font-heading);
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.5rem);
	font-weight: var(--vh-fw-heading);
	line-height: var(--vh-lh-heading);
}

.vh-ov__preview {
	display: none;
}

@media (min-width: 1024px) {
	.vh-sheet--desktop .vh-sheet__panel {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}

	.vh-sheet--desktop .vh-sheet__head,
	.vh-sheet--desktop .vh-sheet__foot {
		grid-column: 1 / -1;
	}

	.vh-sheet--desktop .vh-sheet__head {
		padding-inline: clamp(24px, 5vw, 80px) clamp(16px, 4vw, 64px);
	}

	.vh-sheet--desktop .vh-sheet__body {
		grid-column: 1;
		padding: 24px clamp(24px, 5vw, 80px);
		overflow: auto;
	}

	.vh-sheet--desktop .vh-sheet__panel:not(:has(.vh-ov__preview)) .vh-sheet__body {
		grid-column: 1 / -1;
	}

	.vh-sheet--desktop .vh-menu-list > li > a,
	.vh-sheet--desktop .vh-menu-group > summary {
		min-height: 72px;
		padding-inline: 0;
		border-bottom: 0;
	}

	.vh-sheet--desktop .vh-menu-list a:hover,
	.vh-sheet--desktop .vh-menu-group > summary:hover {
		background: transparent;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	/* Mục đang xem: gạch chân thay cho vạch trái (chữ sát lề trái nên vạch sẽ đè chữ). */
	.vh-sheet--desktop .vh-menu-list > li > a[aria-current],
	.vh-sheet--desktop .vh-menu-group__sum.is-active {
		background: transparent;
		box-shadow: none;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.18em;
	}

	.vh-sheet--desktop .vh-menu-list .vh-menu-sub a {
		padding-left: 24px;
		font-family: var(--vh-font-body);
		font-size: 1.0625rem;
	}

	.vh-sheet--desktop .vh-ov__preview {
		display: block;
		grid-column: 2;
		grid-row: 2;
		padding: 24px clamp(24px, 4vw, 64px) 24px 0;
	}

	.vh-ov__preview img {
		width: 100%;
		height: 100%;
		max-height: 70vh;
		border-radius: var(--vh-radius-media);
		object-fit: cover;
		filter: var(--vh-media-filter, none);
	}

	.vh-sheet--desktop .vh-sheet__foot {
		grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
		align-items: center;
		padding-inline: clamp(24px, 5vw, 80px);
	}

	.vh-sheet--desktop .vh-sheet__foot .vh-pair {
		display: flex;
		gap: 12px;
	}
}

.vh-sheet__manage {
	justify-content: center;
}

/* ---------- Sheet "Nhắn tin": Zalo, Messenger, email, theo bộ phận ---------- */
.vh-msg__h {
	margin-top: 8px;
	font-weight: var(--vh-fw-bold);
}

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

.vh-msg__dep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	border-bottom: 1px solid var(--vh-color-border);
}

.vh-msg__dep:last-child {
	border-bottom: 0;
}

.vh-msg__dep-act {
	display: flex;
	flex: none;
	gap: 4px;
}

.vh-msg__call,
.vh-msg__call:hover {
	color: var(--vh-color-call);
}

.vh-msg__zalo,
.vh-msg__zalo:hover {
	color: var(--vh-color-zalo);
}

/* ---------- Chân trang: menu trang, trang trí, phần trên, chữ tên khổng lồ ---------- */
.vh-footer__grid--pages {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.vh-footer__grid--pages .vh-footer__brand,
.vh-footer__grid--pages .vh-footer__legal {
	grid-column: 1 / -1;
}

@media (min-width: 768px) {
	.vh-footer__grid--pages {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 40px;
	}
}

@media (min-width: 1024px) {
	.vh-footer__grid--pages {
		grid-template-columns: minmax(0, 1.4fr) repeat(var(--vh-fcols, 2), minmax(0, 1fr));
		column-gap: 40px;
	}

	.vh-footer__grid--pages .vh-footer__brand {
		grid-column: auto;
	}

	.vh-footer__grid--pages .vh-footer__legal {
		grid-column: 1 / -1;
	}
}

/* Khối pháp lý thành hàng riêng: kẻ trên, danh sách chia hai cột cho đỡ dài. */
.vh-footer__grid--pages .vh-footer__legal {
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--vh-f-link) 16%, transparent);
}

@media (min-width: 768px) {
	.vh-footer__grid--pages .vh-legal__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

.vh-footer__menu .vh-footer__links a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Trang trí mép trên (chỉ là hình; màu dựng từ biến). */
.vh-footer--deco-hairline {
	border-top: 1px solid var(--vh-color-ornament, color-mix(in srgb, var(--vh-f-link) 28%, transparent));
}

.vh-footer--deco-horizon::before,
.vh-footer--deco-wave::before,
.vh-footer--deco-contour::before {
	content: "";
	position: absolute;
	pointer-events: none;
}

.vh-footer--deco-horizon::before {
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--vh-color-accent-on-deep, var(--vh-color-accent)), transparent);
}

/* Sóng nằm đè lên phần đệm dưới của khối trước nên mép sóng lấy đúng màu nền khối đó. */
.vh-footer--deco-wave::before {
	right: 0;
	bottom: 100%;
	left: 0;
	height: 24px;
	background: var(--vh-f-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V14C20 2 40 2 60 14s40 12 60 0v10z'/%3E%3C/svg%3E") repeat-x 0 100% / 120px 24px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V14C20 2 40 2 60 14s40 12 60 0v10z'/%3E%3C/svg%3E") repeat-x 0 100% / 120px 24px;
}

.vh-footer--deco-contour::before {
	inset: 0;
	background: var(--vh-f-link);
	opacity: 0.06;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M18 122c0-52 42-94 104-92s100 44 98 92-46 96-102 94S18 172 18 122z'/%3E%3Cpath d='M48 120c0-36 32-62 72-61s68 29 68 62-32 65-70 64-70-30-70-65z'/%3E%3Cpath d='M80 121c0-19 17-33 40-32s37 15 37 33-17 34-38 33-39-15-39-34z'/%3E%3C/svg%3E") repeat 0 0 / 240px 240px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M18 122c0-52 42-94 104-92s100 44 98 92-46 96-102 94S18 172 18 122z'/%3E%3Cpath d='M48 120c0-36 32-62 72-61s68 29 68 62-32 65-70 64-70-30-70-65z'/%3E%3Cpath d='M80 121c0-19 17-33 40-32s37 15 37 33-17 34-38 33-39-15-39-34z'/%3E%3C/svg%3E") repeat 0 0 / 240px 240px;
}

.vh-footer--deco-contour > * {
	position: relative;
}

.vh-footer--deco-amber-rule .vh-footer__h,
.vh-footer--deco-amber-rule .vh-footer__name {
	padding-top: 14px;
	background: linear-gradient(var(--vh-color-book-bg, var(--vh-color-accent)), var(--vh-color-book-bg, var(--vh-color-accent))) no-repeat 0 0 / 32px 4px;
}

.vh-footer__deco {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(24px, 5vw, 40px);
}

.vh-footer__deco::before,
.vh-footer__deco::after {
	content: "";
	flex: 1 1 0;
	height: 5px;
	border-block: 1px solid var(--vh-color-ornament, color-mix(in srgb, var(--vh-f-link) 40%, transparent));
}

.vh-footer__mono {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--vh-color-ornament, color-mix(in srgb, var(--vh-f-link) 40%, transparent));
	border-radius: 50%;
	color: var(--vh-f-link);
	font-family: var(--vh-font-heading);
	font-size: 1.125rem;
	letter-spacing: 0.06em;
}

.vh-prefooter {
	margin-bottom: clamp(32px, 6vw, 48px);
	padding-bottom: clamp(32px, 6vw, 48px);
	border-bottom: 1px solid color-mix(in srgb, var(--vh-f-link) 16%, transparent);
}

.vh-prefooter__line {
	max-width: 28ch;
	color: var(--vh-f-link);
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-h2);
	font-weight: var(--vh-fw-heading);
	line-height: var(--vh-lh-heading);
	letter-spacing: var(--vh-ls-heading, 0);
	font-variation-settings: var(--vh-heading-variation, normal);
}

.vh-prefooter--statement .vh-prefooter__line {
	max-width: 20ch;
	font-size: var(--vh-fs-display, clamp(2rem, 1.3rem + 3vw, 4rem));
	line-height: var(--vh-lh-display, 1.15);
}

.vh-prefooter__note {
	margin-top: 12px;
}

.vh-prefooter__greeting {
	color: var(--vh-color-footer-accent, var(--vh-f-link));
	font-family: var(--vh-font-accent, var(--vh-font-heading));
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	line-height: 1.3;
}

.vh-prefooter__sig {
	margin-top: 4px;
	color: var(--vh-color-footer-accent, var(--vh-f-link));
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: 1.25rem;
}

.vh-prefooter__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

/*
 * Nút "Đặt phòng" phần trên chân trang nằm trên nền tối: mẫu cho màu riêng bằng --vh-color-footer-book-bg
 * + --vh-color-footer-on-book (vd than hồng accent-on-deep, chữ màu deep) mà không đổi nút đặt ở đầu trang, thanh dính.
 * Không đặt thì như nút đặt chung (book-bg, rồi primary).
 */
.vh-prefooter .vh-btn--book {
	--vh-btn-bg: var(--vh-color-footer-book-bg, var(--vh-color-book-bg, var(--vh-color-primary)));
	--vh-btn-fg: var(--vh-color-footer-on-book, var(--vh-color-on-book, var(--vh-color-on-primary)));
}

.vh-prefooter .vh-btn--book:hover {
	--vh-btn-bg: var(--vh-color-footer-book-hover, var(--vh-color-footer-book-bg, var(--vh-color-book-hover, var(--vh-color-book-bg, var(--vh-color-primary-hover)))));
}

.vh-footer__wordmark {
	overflow: hidden;
	margin: clamp(24px, 5vw, 48px) 0 0;
	padding-inline: var(--vh-page-pad);
	color: color-mix(in srgb, var(--vh-f-link) 14%, transparent);
	font-family: var(--vh-font-heading);
	font-size: 22vw;
	font-weight: var(--vh-fw-display, var(--vh-fw-heading));
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	container-type: inline-size;
}

/*
 * Tên dài phải nằm gọn trong khung: cỡ chữ = nhỏ hơn giữa cỡ thiết kế (1em = 22vw / 18vw) và
 * bề ngang khung chia bề ngang ước lượng của chữ (--vh-wm-em, footer.php). site.js đo lại sau khi font tải.
 */
.vh-footer__wm-text {
	display: block;
	font-size: min(1em, calc((100vw - 2 * var(--vh-page-pad)) / var(--vh-wm-em, 1)));
	font-size: min(1em, calc(100cqi / var(--vh-wm-em, 1)));
}

@media (min-width: 768px) {
	.vh-footer__wordmark {
		font-size: 18vw;
	}
}

/* ---------- Thanh dính: ô biểu tượng (icons) + nút đặt rộng; ô Nhắn tin, Báo giá ---------- */
.vh-sticky__cell--icon {
	flex: 0 0 auto;
	min-width: 56px;
}

.vh-sticky--icons .vh-sticky__cell--book {
	flex: 1 1 auto;
}

.vh-sticky__cell--msg,
.vh-sticky__cell--msg:hover {
	color: var(--vh-color-text);
}

.vh-sticky__cell--quote,
.vh-sticky__cell--quote:hover {
	color: var(--vh-color-accent-ink);
}

/* ---------- Logo SVG của mẫu (preset.brand, inc/brand.php, CONTRACT §6) ----------
 * SVG chèn thẳng vào trang: chữ logo fill="currentColor" theo màu chữ chỗ đặt; phần nhấn .vh-logo-accent, phần phụ .vh-logo-soft
 * theo biến --vh-logo-accent / --vh-logo-soft. Nền tối (chân trang, menu tối, đầu trang trong suốt trên ảnh) đổi sang
 * --vh-logo-accent-on-deep / --vh-logo-soft-on-deep (mặc định màu accent sáng / chữ mờ nền tối) nên một tệp SVG dùng được mọi nơi.
 * Màu riêng của logo (preset.brand.accent, accent_on_dark, soft, soft_on_dark, ink) theme in thành các biến này ở :root.
 * Cỡ theo chiều cao: --vh-logo-h (máy tính), --vh-logo-h-m (điện thoại), in ở :root từ preset.brand.logo_height*.
 */
.vh-brand {
	display: block;
	flex: none;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: var(--vh-logo-h-m, 32px);
	overflow: visible;
}

.vh-brand .vh-logo-accent {
	fill: var(--vh-logo-accent, var(--vh-color-primary));
}

.vh-brand .vh-logo-soft {
	fill: var(--vh-logo-soft, var(--vh-color-muted));
}

.vh-brand .vh-logo-accent-stroke {
	stroke: var(--vh-logo-accent, var(--vh-color-primary));
}

.vh-brand .vh-logo-soft-stroke {
	stroke: var(--vh-logo-soft, var(--vh-color-muted));
}

.vh-on-deep .vh-brand,
.vh-js:has(#main > section:first-of-type :is(.vh-hero-fb--under-header, [data-vh-header-overlay])) .vh-header--transparent:not(.is-solid) .vh-brand {
	--vh-logo-accent: var(--vh-logo-accent-on-deep, var(--vh-color-accent));
	--vh-logo-soft: var(--vh-logo-soft-on-deep, var(--vh-color-muted-on-deep));
}

/* Đầu trang: link logo giữ vùng chạm 48px, co được khi điện thoại hẹp (SVG thu nhỏ giữ tỷ lệ). */
.vh-logo--brand {
	flex: 0 1 auto;
	gap: 0;
	max-width: 100%;
	color: var(--vh-logo-ink, var(--vh-color-text));
}

.vh-logo--brand:hover {
	color: var(--vh-logo-ink, var(--vh-color-text));
}

@media (min-width: 1024px) {
	.vh-header .vh-logo--brand .vh-brand {
		height: var(--vh-logo-h, 40px);
	}

	.vh-header.is-compact .vh-logo--brand .vh-brand {
		height: min(var(--vh-logo-h, 40px), var(--vh-logo-h-compact, 32px));
	}

	.vh-header--bar .vh-logo--brand {
		flex-shrink: 0;
	}
}

/* Logo gọn một dòng (preset.brand.logo_compact): thay logo đầy đủ ở điện thoại và đầu trang thu gọn, nơi dòng phụ nhỏ quá không đọc được. */
.vh-logo--brand-compact .vh-brand--logo_compact {
	display: none;
}

@media (max-width: 1023px) {
	.vh-logo--brand-compact .vh-brand--has-compact {
		display: none;
	}

	.vh-logo--brand-compact .vh-brand--logo_compact {
		display: block;
	}
}

@media (min-width: 1024px) {
	.vh-header.is-compact .vh-logo--brand-compact .vh-brand--has-compact {
		display: none;
	}

	.vh-header.is-compact .vh-logo--brand-compact .vh-brand--logo_compact {
		display: block;
	}
}

/* Tiêu đề menu điện thoại / menu toàn màn hình: logo thay tên chữ (tên vẫn đọc được qua .vh-sr). */
.vh-sheet__title--brand {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 32px;
	line-height: 0;
}

.vh-sheet__title--brand .vh-brand {
	height: var(--vh-logo-h-sheet, min(var(--vh-logo-h-m, 32px), 32px));
}

/* Chân trang: logo ở cột thương hiệu (tiêu đề h2 giữ tên cho trình đọc màn hình), dấu thay chữ lồng ở double-rule. */
.vh-footer__name--brand {
	line-height: 0;
}

.vh-footer__name--brand .vh-brand {
	height: var(--vh-logo-h-footer, calc(var(--vh-logo-h, 40px) * 1.2));
}

.vh-footer__mono--brand {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
}

.vh-footer__mono--brand .vh-brand {
	height: var(--vh-logo-mark-footer, 56px);
}