/*
 * Khối quick-facts – chip-strip: 2–5 chip thông tin ngay dưới thanh đặt phòng.
 * Điện thoại cuộn ngang tràn mép (vùng cuộn có tabindex khi tràn, do hero.js gắn); từ 768px xuống dòng, căn giữa.
 */

.vh-s.vh-s-quick-facts {
	padding-block: clamp(12px, 3vw, 28px);
}

.vh-qf__scroll {
	margin-inline: calc(-1 * var(--vh-page-pad));
	padding: 4px var(--vh-page-pad);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--vh-page-pad);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.vh-qf__scroll::-webkit-scrollbar {
	display: none;
}

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

.vh-qf__list {
	display: flex;
	gap: 8px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-qf__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--vh-color-border);
	border-radius: var(--vh-radius-chip);
	background: var(--vh-color-card);
	color: var(--vh-color-text);
	font-size: var(--vh-fs-small);
	font-weight: var(--vh-fw-medium);
	line-height: 1.3;
	white-space: nowrap;
	scroll-snap-align: start;
}

.vh-qf__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	color: var(--vh-icon-color, var(--vh-color-primary));
}

.vh-qf__icon .vh-i {
	stroke-width: var(--vh-icon-stroke, 2);
}

/* Vòng tròn pastel (homestay): chữ và nét biểu tượng là màu mực. */
.vh-qf--circle .vh-qf__chip {
	padding-left: 6px;
}

.vh-qf--circle .vh-qf__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vh-color-fun-1, var(--vh-color-accent));
	color: var(--vh-color-text);
}

.vh-qf--circle .vh-qf__chip:nth-child(4n + 2) .vh-qf__icon {
	background: var(--vh-color-fun-2, var(--vh-color-accent));
}

.vh-qf--circle .vh-qf__chip:nth-child(4n + 3) .vh-qf__icon {
	background: var(--vh-color-fun-3, var(--vh-color-accent));
}

.vh-qf--circle .vh-qf__chip:nth-child(4n + 4) .vh-qf__icon {
	background: var(--vh-color-fun-4, var(--vh-color-accent));
}

.vh-deep .vh-qf__chip {
	border-color: transparent;
}

@media (min-width: 768px) {
	.vh-qf__scroll {
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.vh-qf__list {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		gap: 10px;
	}

	.vh-qf__chip {
		font-size: var(--vh-fs-body);
		white-space: normal;
	}
}