/*
 * Thanh đặt phòng (parts/booking-bar.php), đọc preset.chrome.booking.
 * Phần 1 là lõi panel của Mini Gọn, chuyển nguyên văn từ base.css (giữ đúng giao diện hiện tại).
 * Phần sau: số phòng, tuổi bé, mã hiện sẵn, gợi ý, vị trí trong hero, bề mặt, vỏ inline, vỏ tabbed, dải mùa, lợi ích.
 * Chỉ dùng biến --vh-*; biến tùy chọn luôn có giá trị dự phòng.
 */

/* ---------- Lõi (booking-bar/panel, Mini Gọn) ---------- */
.vh-bb {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.vh-bb__dates,
.vh-bb__guest-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.vh-bb__guests {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vh-bb__guests > legend {
	margin-bottom: 6px;
	padding: 0;
}

.vh-bb__sel {
	display: block;
	min-width: 0;
}

.vh-bb__code {
	display: grid;
	gap: 8px;
}

.vh-bb__code-btn {
	justify-self: start;
}

.vh-no-js .vh-bb__code-btn {
	display: none;
}

/* Không JS thì nút không bấm được: hiện thẳng ô nhập mã. */
.vh-no-js .vh-bb__codebox[hidden] {
	display: grid !important;
}

.vh-bb__err {
	color: var(--vh-color-danger);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
}

.vh-bb__submit {
	margin-top: 4px;
}

.vh-bb__note {
	text-align: center;
}

.vh-bb--compact {
	gap: 10px;
}

.vh-bb--compact .vh-bb__submit {
	margin-top: 0;
}

/* Trang danh sách phòng: nằm ngang trên màn rộng. */
@media (min-width: 900px) {
	.vh-bb--page {
		grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
		align-items: end;
		column-gap: 16px;
	}

	.vh-bb--page .vh-bb__dates {
		grid-column: 1;
		grid-row: 1;
	}

	.vh-bb--page .vh-bb__guests {
		grid-column: 2;
		grid-row: 1;
	}

	.vh-bb--page .vh-bb__submit {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		margin-top: 0;
	}

	.vh-bb--page .vh-bb__code,
	.vh-bb--page .vh-bb__err,
	.vh-bb--page .vh-bb__note {
		grid-column: 1 / -1;
	}

	.vh-bb--page .vh-bb__note {
		text-align: left;
	}
}

/* ---------- Số phòng, tuổi bé, mã hiện sẵn, gợi ý chia phòng ---------- */
.vh-bb__sel--rooms {
	grid-column: 1 / -1;
}

.vh-bb__ages {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vh-bb__ages > legend {
	margin-bottom: 6px;
	padding: 0;
}

.vh-bb__age-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px 12px;
}

.vh-bb__age {
	gap: 4px;
}

.vh-bb__age-l {
	color: var(--vh-color-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.vh-bb__hint {
	padding: 8px 12px;
	border-radius: var(--vh-radius-input);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
}

/* ---------- Dòng phụ: mùa trong năm, ghi chú, lợi ích ---------- */
.vh-bb__extra {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.vh-bb__seasons,
.vh-bb__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vh-fs-small);
	line-height: 1.45;
}

.vh-bb__season,
.vh-bb__benefits li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vh-bb__season-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vh-color-accent-ink);
}

.vh-bb__season--primary .vh-bb__season-dot {
	background: var(--vh-color-primary);
}

.vh-bb__season--success .vh-bb__season-dot {
	background: var(--vh-color-success);
}

.vh-bb__season--low .vh-bb__season-dot {
	background: var(--vh-color-low-stock);
}

.vh-bb__season-msg {
	padding: 8px 12px;
	border-left: 3px solid var(--vh-color-accent-ink);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
	font-size: var(--vh-fs-small);
}

.vh-bb__season-msg:empty {
	display: none;
}

.vh-bb__line {
	color: var(--vh-color-muted);
	font-family: var(--vh-font-accent, inherit);
	font-size: var(--vh-fs-small);
	font-style: italic;
}

.vh-bb__benefits--checks .vh-i {
	color: var(--vh-color-success);
}

.vh-bb__benefits--chips li {
	padding: 4px 10px;
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-accent);
	color: var(--vh-color-accent-ink);
}

.vh-bb__alt {
	font-size: var(--vh-fs-small);
}

/* ---------- Bề mặt của thanh rộng (overlap, floating, horizontal, below-hero) ---------- */
.vh-bb--panel.vh-bb--s-solid,
.vh-bb--panel.vh-bb--s-glass,
.vh-bb--panel.vh-bb--s-paper,
.vh-bb--panel.vh-bb--s-ledger,
.vh-bb-tabs {
	padding: var(--vh-card-pad);
	border-radius: var(--vh-radius-panel, var(--vh-radius-card));
}

.vh-bb--s-solid,
.vh-bb-tabs--s-solid {
	border: var(--vh-border-width, 1px) solid var(--vh-color-border);
	background: var(--vh-color-card);
	box-shadow: var(--vh-shadow-panel, var(--vh-shadow-card));
}

/* Kính mờ: trình duyệt không có backdrop-filter (hoặc color-mix) thì giữ nền thẻ đặc. */
.vh-bb--s-glass,
.vh-bb-tabs--s-glass {
	background: var(--vh-color-card);
	box-shadow: var(--vh-shadow-panel, var(--vh-shadow-card));
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	.vh-bb--s-glass,
	.vh-bb-tabs--s-glass {
		background: color-mix(in srgb, var(--vh-color-card) 92%, transparent);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

.vh-bb--s-paper,
.vh-bb-tabs--s-paper {
	border: var(--vh-border-width, 1px) solid var(--vh-color-border-strong);
	background: var(--vh-color-surface-2, var(--vh-color-surface));
}

/* Sổ cái: kẻ đôi trên dưới, đường kẻ màu trang trí giữa các ô. */
.vh-bb--s-ledger,
.vh-bb--panel.vh-bb--s-ledger,
.vh-bb-tabs--s-ledger {
	--vh-bb-rule: var(--vh-color-ornament, var(--vh-color-border-strong));
	border-block: 3px double var(--vh-bb-rule);
	border-radius: 0;
	background: var(--vh-color-surface-2, var(--vh-color-bg));
}

.vh-bb--s-ledger .vh-input {
	border-color: var(--vh-bb-rule);
	border-radius: 0;
}

/* Trong hub tab, thẻ là khung hub: form bên trong không vẽ thẻ thứ hai. */
.vh-bb-tabs .vh-bb--panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ---------- Vị trí trong hero ---------- */
.vh-bbw {
	position: relative;
	z-index: 3;
	min-width: 0;
}

/* Đè mép dưới hero: điện thoại 24px, máy tính 48px (đổi bằng --vh-bb-overlap). */
.vh-bbw--overlap,
.vh-bbw--floating {
	margin-top: calc(-1 * var(--vh-bb-overlap-mobile, 24px));
}

/* Dải ngang dưới đầu trang: chính dải là bề mặt, form không vẽ thẻ. */
.vh-bbw--horizontal {
	padding-block: 12px 16px;
	border-bottom: 1px solid var(--vh-color-border);
	background: var(--vh-color-card);
}

.vh-bbw--horizontal .vh-bb--panel,
.vh-bbw--horizontal .vh-bb-tabs {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.vh-bbw--horizontal .vh-bb-tabs__list {
	margin-inline: 0;
	padding-inline: 0;
}

.vh-bbw--below-hero {
	padding-block: clamp(20px, 3vw, 32px);
}

/* Trên hero (điện thoại: dải nền đậm dưới ảnh; máy tính: nằm trên lớp phủ ở đáy ảnh). */
.vh-bbw--on-hero {
	--vh-ring: var(--vh-color-focus-on-deep);
	padding-block: 16px 20px;
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

.vh-bbw--on-hero .vh-label,
.vh-bbw--on-hero .vh-bb__age-l {
	color: inherit;
}

.vh-bbw--on-hero .vh-muted,
.vh-bbw--on-hero .vh-bb__line {
	color: var(--vh-color-muted-on-deep);
}

.vh-bbw--on-hero .vh-link {
	color: var(--vh-color-link-on-deep, var(--vh-color-on-deep));
}

.vh-bbw--on-hero .vh-input {
	color-scheme: dark;
}

.vh-bbw--on-hero option {
	background-color: var(--vh-color-bg);
	color: var(--vh-color-text);
}

/* Đỏ trên nền tối không đủ tương phản: thông báo lỗi nằm trên ô nền sáng. */
.vh-bbw--on-hero .vh-bb__err {
	justify-self: start;
	padding: 4px 10px;
	border-radius: var(--vh-radius-input);
	background: var(--vh-color-bg);
}

.vh-bbw--on-hero .vh-bb__benefits--checks .vh-i {
	color: currentColor;
}

@media (min-width: 900px) {
	.vh-bbw--overlap {
		margin-top: calc(-1 * var(--vh-bb-overlap, 48px));
	}

	/* Nổi trên ảnh: khung cao 0, thanh treo phía trên mép dưới hero nên không đẩy nội dung. */
	.vh-bbw--floating,
	.vh-bbw--on-hero {
		height: 0;
		margin-top: 0;
		padding-block: 0;
		background: none;
	}

	.vh-bbw--floating > .vh-wrap,
	.vh-bbw--on-hero > .vh-wrap {
		position: relative;
	}

	.vh-bbw--floating > .vh-wrap > .vh-bb,
	.vh-bbw--floating > .vh-wrap > .vh-bb-tabs,
	.vh-bbw--on-hero > .vh-wrap > .vh-bb,
	.vh-bbw--on-hero > .vh-wrap > .vh-bb-tabs {
		position: absolute;
		right: var(--vh-page-pad);
		bottom: var(--vh-bb-float-gap, 32px);
		left: var(--vh-page-pad);
	}

	/* Lớp phủ riêng dưới thanh: chữ trắng nhỏ cần nền tối ≥ .85 ở mọi điểm ảnh (4,5:1). */
	.vh-bbw--on-hero::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: var(--vh-bb-scrim-h, 300px);
		background: linear-gradient(to top, rgb(var(--vh-color-overlay) / 0.88) 0, rgb(var(--vh-color-overlay) / 0.85) 62%, rgb(var(--vh-color-overlay) / 0) 100%);
		pointer-events: none;
	}
}

/* Ô chọn khách trong thanh rộng: bớt lề trái để "2 người lớn" không bị cắt trên điện thoại 360px. */
.vh-bb--row .vh-bb__guest-row .vh-select {
	padding-left: 12px;
}

/* Ô ngày của thanh rộng: lề 10px để "25/10/2026" và biểu tượng lịch không bị cắt. */
.vh-bb--row .vh-bb__dates .vh-input {
	padding-inline: 10px;
}

/* ---------- Một hàng trên màn rộng (mọi vị trí trừ thẻ hero) ----------
 * Ô ngày giãn theo chỗ trống, ô khách và nút rộng theo nội dung. Có thêm ô số phòng hoặc mã ưu đãi
 * thì dưới 1200px tách hai hàng để ô ngày không bị cắt chữ; có cả hai thì luôn hai hàng.
 */
@media (min-width: 900px) {
	.vh-bb--row {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: end;
		column-gap: 16px;
	}

	.vh-bb--row > * {
		grid-column: 1 / -1;
	}

	.vh-bb--row > .vh-bb__dates {
		grid-column: 1;
		grid-row: 1;
	}

	.vh-bb--row > .vh-bb__guests {
		grid-column: 2;
		grid-row: 1;
	}

	.vh-bb--row > .vh-bb__submit {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		margin-top: 0;
	}

	.vh-bb--row .vh-bb__guest-row {
		grid-template-columns: repeat(2, auto);
	}

	.vh-bb--row.vh-bb--rooms .vh-bb__guest-row {
		grid-template-columns: repeat(3, auto);
	}

	.vh-bb--row .vh-bb__sel--rooms {
		grid-column: auto;
	}

	.vh-bb--row:is(.vh-bb--rooms, .vh-bb--code-visible) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.vh-bb--row:is(.vh-bb--rooms, .vh-bb--code-visible) > .vh-bb__code--visible {
		grid-column: 1;
		grid-row: 2;
	}

	.vh-bb--row:is(.vh-bb--rooms, .vh-bb--code-visible) > .vh-bb__submit {
		grid-column: 2;
		grid-row: 2;
	}

	.vh-bb--row .vh-bb__note {
		text-align: left;
	}

	.vh-bb--row .vh-bb__extra {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 24px;
	}

	.vh-bb--row .vh-bb__extra > * {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.vh-bb--row.vh-bb--rooms:not(.vh-bb--code-visible) {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.vh-bb--row.vh-bb--rooms:not(.vh-bb--code-visible) > .vh-bb__submit {
		grid-column: 3;
		grid-row: 1;
	}

	.vh-bb--row.vh-bb--code-visible:not(.vh-bb--rooms) {
		grid-template-columns: minmax(0, 1fr) auto minmax(150px, 200px) auto;
	}

	.vh-bb--row.vh-bb--code-visible:not(.vh-bb--rooms) > .vh-bb__code--visible {
		grid-column: 3;
		grid-row: 1;
	}

	.vh-bb--row.vh-bb--code-visible:not(.vh-bb--rooms) > .vh-bb__submit {
		grid-column: 4;
		grid-row: 1;
	}
}

/* Form ngắn của tab Bàn / Spa / Dịch vụ: ngày + số người + nút. */
.vh-bb--mini {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}

.vh-bb--mini > .vh-bb__submit {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.vh-bb--row.vh-bb--mini {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	}

	.vh-bb--row.vh-bb--mini > .vh-field {
		grid-column: 1;
		grid-row: 1;
	}

	.vh-bb--row.vh-bb--mini > .vh-field ~ .vh-field {
		grid-column: 2;
	}

	.vh-bb--row.vh-bb--mini > .vh-bb__submit {
		grid-column: 3;
		grid-row: 1;
	}
}

/* ---------- Vỏ inline: không thẻ, kẻ đường mảnh hoặc sổ cái, nhãn chữ nhỏ viết hoa, giá trị chữ lớn ---------- */
.vh-bb--inline {
	--vh-bb-rule: var(--vh-color-border-strong);
	gap: 0;
	border-block: 1px solid var(--vh-bb-rule);
}

.vh-bb--inline.vh-bb--s-hairline {
	--vh-bb-rule: color-mix(in srgb, currentColor 60%, transparent);
}

.vh-bb--inline.vh-bb--s-ledger {
	--vh-bb-rule: var(--vh-color-ornament, var(--vh-color-border-strong));
	padding: 0;
	border-block: 3px double var(--vh-bb-rule);
	background: none;
}

.vh-bb--inline > .vh-bb__dates,
.vh-bb--inline > .vh-bb__guests,
.vh-bb--inline > .vh-bb__ages,
.vh-bb--inline > .vh-bb__code,
.vh-bb--inline > .vh-bb__extra {
	padding-block: 10px;
	border-bottom: 1px solid var(--vh-bb-rule);
}

.vh-bb--inline .vh-bb__dates > .vh-field + .vh-field {
	padding-left: 12px;
	border-left: 1px solid var(--vh-bb-rule);
}

/* Legend nổi để nằm trong vùng đệm như nhãn ô khác (legend mặc định đè lên mép trên). */
.vh-bb--inline .vh-bb__guests > legend,
.vh-bb--inline .vh-bb__ages > legend {
	float: left;
	width: 100%;
}

.vh-bb--inline .vh-bb__guest-row,
.vh-bb--inline .vh-bb__age-row {
	clear: both;
}

.vh-bb--inline .vh-label,
.vh-bb--inline .vh-bb__age-l {
	color: inherit;
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: 0.75rem;
	letter-spacing: var(--vh-ls-label, 0.08em);
	text-transform: var(--vh-label-transform, uppercase);
}

.vh-bb--inline .vh-input {
	min-height: 44px;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font-family: var(--vh-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.vh-bb--inline .vh-select {
	padding-right: 32px;
}

/* Ô ngày có thêm biểu tượng lịch: chữ nhỏ hơn một chút trên điện thoại để không bị cắt. */
.vh-bb--inline .vh-bb__dates .vh-input {
	font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
}

.vh-bb--inline .vh-input:hover {
	border-bottom-color: currentColor;
}

.vh-bb--inline > .vh-bb__submit {
	margin-top: 14px;
}

.vh-bb--inline > .vh-bb__note,
.vh-bb--inline > .vh-bb__err,
.vh-bb--inline > .vh-bb__hint {
	margin-top: 10px;
}

.vh-bb--inline > .vh-bb__note {
	text-align: left;
}

@media (min-width: 900px) {
	.vh-bb--inline {
		column-gap: 0;
	}

	.vh-bb--inline > .vh-bb__dates,
	.vh-bb--inline > .vh-bb__guests,
	.vh-bb--inline > .vh-bb__code--visible {
		align-self: stretch;
		padding: 14px 20px;
		border-right: 1px solid var(--vh-bb-rule);
		border-bottom: 0;
	}

	.vh-bb--inline > .vh-bb__dates {
		padding-left: 0;
	}

	.vh-bb--inline .vh-bb__dates > .vh-field + .vh-field {
		padding-left: 20px;
	}

	.vh-bb--inline > .vh-bb__submit {
		align-self: center;
		margin: 0 0 0 20px;
	}

	.vh-bb--inline > .vh-bb__ages,
	.vh-bb--inline > .vh-bb__code:not(.vh-bb__code--visible),
	.vh-bb--inline > .vh-bb__extra {
		border-top: 1px solid var(--vh-bb-rule);
		border-bottom: 0;
	}

	.vh-bb--inline > .vh-bb__note {
		margin-block: 8px 10px;
	}
}

/* ---------- Vỏ tabbed: hub nhiều tab, tab đang mở gạch chân màu nhấn ---------- */
.vh-bb-tabs {
	min-width: 0;
	padding-top: 0;
}

.vh-bb-tabs__list {
	display: flex;
	gap: 4px;
	margin: 0 calc(-1 * var(--vh-card-pad)) var(--vh-card-pad);
	padding: 0 var(--vh-card-pad);
	overflow-x: auto;
	border-bottom: 1px solid var(--vh-color-border);
	scrollbar-width: none;
}

.vh-bb-tabs__list::-webkit-scrollbar {
	display: none;
}

.vh-bb-tabs__tab {
	position: relative;
	flex: none;
	min-height: 48px;
	padding: 12px 14px;
	border: 0;
	background: none;
	color: var(--vh-color-muted);
	font-family: var(--vh-font-ui, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	letter-spacing: var(--vh-ls-label, 0.04em);
	line-height: 1.4;
	text-transform: var(--vh-label-transform, uppercase);
	cursor: pointer;
}

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

/* Danh sách tab cuộn ngang cắt viền ngoài: vòng focus vẽ vào trong. */
.vh-bb-tabs__tab:focus-visible {
	outline-offset: -3px;
}

.vh-bb-tabs__tab[aria-selected="true"] {
	color: var(--vh-color-text);
	font-weight: var(--vh-fw-bold);
}

.vh-bb-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: -1px;
	left: 14px;
	height: 3px;
	background: var(--vh-color-ornament, var(--vh-color-primary));
}

.vh-bb-tabs__ptitle {
	margin-bottom: 8px;
	font-weight: var(--vh-fw-bold);
}

.vh-bb-tabs__msg {
	display: grid;
	gap: 12px;
}

.vh-bb-tabs__msg .vh-pair {
	max-width: 420px;
}

@media (min-width: 900px) {
	.vh-bb-tabs__msg {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 24px;
	}

	.vh-bb-tabs__msg .vh-pair {
		min-width: 280px;
	}
}

/* Không JS: thanh tab ẩn, mọi tab xếp dọc kèm tiêu đề riêng. */
.vh-no-js .vh-bb-tabs {
	padding-top: var(--vh-card-pad);
}

.vh-no-js .vh-bb-tabs__panel[hidden] {
	display: block !important;
}

.vh-no-js .vh-bb-tabs__panel + .vh-bb-tabs__panel {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--vh-color-border);
}