/*
 * Khối Ăn uống – feature-band: dải nền đậm (luôn đậm kể cả khi mẫu quên options.bg = deep), ảnh lớn 21:9 / 3:2,
 * nhãn mốc giờ, 2 điểm ăn uống hoặc 3 món đặc trưng + giá set, nút Giữ bàn / Xem thực đơn. Mobile trước, mốc 768px / 1024px.
 */

.vh-s-dining.vh-v-feature-band {
	--vh-ring: var(--vh-color-focus-on-deep);
	background: var(--vh-color-deep);
	color: var(--vh-color-on-deep);
}

/* Bảng trượt thực đơn mở trên nền sáng: trả vòng focus về màu thường. */
.vh-v-feature-band .vh-sheet {
	--vh-ring: var(--vh-color-focus);
}

.vh-dfb .vh-eyebrow {
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
}

.vh-dfb .vh-section-head .vh-lead,
.vh-dfb__intro .vh-sv-facts dt,
.vh-dfb__venues .vh-sv-facts dt,
.vh-dfb__intro .vh-sv-facts__lab,
.vh-dfb__venues .vh-sv-facts__lab,
.vh-dfb__intro .vh-sv-hint,
.vh-dfb__cuisine,
.vh-dfb__dish-desc {
	color: var(--vh-color-muted-on-deep);
}

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

.vh-dfb__media {
	margin-bottom: clamp(24px, 4vw, 48px);
	overflow: hidden;
	border-radius: var(--vh-radius-media);
}

.vh-dfb__media img {
	display: block;
	width: 100%;
	object-fit: cover;
	filter: var(--vh-media-filter, none);
}

.vh-dfb__grid {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
}

.vh-dfb__intro {
	display: grid;
	align-content: start;
	gap: 1.25rem;
}

.vh-dfb__head {
	margin-bottom: 0;
}

.vh-dfb__perk {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-weight: var(--vh-fw-medium);
}

.vh-dfb__perk .vh-i {
	flex: none;
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
}

.vh-dfb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.vh-dfb__actions:empty {
	display: none;
}

/* Nút trên nền đậm: nền sáng của mẫu, chữ màu nền đậm (cặp màu đã đạt tương phản như chữ on-deep). */
.vh-dfb__btn {
	--vh-btn-bg: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
	--vh-btn-fg: var(--vh-color-deep);
	--vh-btn-bd: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
}

.vh-dfb__btn:hover {
	--vh-btn-bg: var(--vh-color-on-deep);
	--vh-btn-bd: var(--vh-color-on-deep);
}

.vh-dfb__btn--ghost {
	--vh-btn-bg: transparent;
	--vh-btn-fg: var(--vh-color-on-deep);
	--vh-btn-bd: var(--vh-color-on-deep);
}

.vh-dfb__btn--ghost:hover {
	--vh-btn-bg: color-mix(in srgb, var(--vh-color-on-deep) 14%, transparent);
	--vh-btn-fg: var(--vh-color-on-deep);
}

/* ---- 2 điểm ăn uống ---- */

.vh-dfb__venues {
	display: grid;
	gap: var(--vh-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-dfb__venue {
	display: grid;
	align-content: start;
	gap: 0.625rem;
	padding: var(--vh-card-pad);
	border: 1px solid color-mix(in srgb, var(--vh-color-on-deep) 28%, transparent);
	border-radius: var(--vh-radius-card);
}

.vh-dfb__cuisine {
	margin: 0;
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-size: var(--vh-fs-small);
	text-transform: var(--vh-label-transform, none);
	letter-spacing: var(--vh-ls-label, 0);
}

.vh-dfb__name {
	margin: 0;
	font-size: var(--vh-fs-h3);
	line-height: max(1.25, var(--vh-lh-heading));
}

.vh-dfb__text {
	margin: 0;
	line-height: var(--vh-lh-body);
}

.vh-dfb__venue .vh-btn {
	justify-self: start;
	margin-top: 0.25rem;
}

/* ---- 3 món đặc trưng ---- */

.vh-dfb__sub {
	margin: 0 0 1rem;
	font-size: var(--vh-fs-h3);
	line-height: max(1.25, var(--vh-lh-heading));
}

.vh-dfb__dish-list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid color-mix(in srgb, var(--vh-color-on-deep) 28%, transparent);
}

.vh-dfb__dish {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--vh-color-on-deep) 28%, transparent);
}

.vh-dfb__dish-num {
	grid-row: 1 / span 2;
	color: var(--vh-color-accent-on-deep, var(--vh-color-on-deep));
	font-family: var(--vh-font-accent, var(--vh-font-body));
	font-variant-numeric: tabular-nums;
}

.vh-dfb__dish-name {
	font-family: var(--vh-font-heading);
	font-size: var(--vh-fs-lead);
	font-weight: var(--vh-fw-medium);
	overflow-wrap: anywhere;
}

.vh-dfb__dish-desc {
	grid-column: 2;
	font-size: var(--vh-fs-small);
}

.vh-dfb__dish-price {
	grid-column: 3;
	grid-row: 1;
	font-weight: var(--vh-fw-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.vh-dfb__venues--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vh-dfb__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

/* Thẻ điểm hẹp: nhãn và giá trị xếp chồng để giờ (không ngắt dòng) không tràn khỏi thẻ. */
.vh-dfb__venues .vh-sv-facts__row {
	grid-template-columns: minmax(0, 1fr);
}