/* =====================================================================
 * [featured_tours] – Tour nổi bật (thẻ tour lấy từ tour-list.css, bộ chạy từ destination-slider)
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */
.fts-slider .ds-viewport {
	padding: 6px 4px 18px;              /* chừa chỗ cho bóng đổ & hiệu ứng nổi khi rê chuột */
	margin: -6px -4px -12px;
}
.fts-slider .ds-track > .fts-item {
	display: flex;
	flex: 0 0 calc((100% - (var(--ds-cols) - 1) * var(--ds-gap)) / var(--ds-cols));
	min-width: 0;
	scroll-snap-align: start;
}
.fts-slider .ds-track > .fts-item[hidden] { display: none; }
.fts-item { position: relative; } /* giữ chữ ẩn (screen-reader) trong thẻ, không làm tràn trang */
.fts-item .ctl-card { width: 100%; }

/* Chấm tròn (thay cho nút ‹ ›) */
.fts-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.fts-dots button {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0 !important;
	border-radius: 999px;
	background: color-mix(in srgb, var(--hg-text) 22%, #fff) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: width .25s, background .25s;
}
.fts-dots button.is-active { width: 22px; background: var(--hg-primary) !important; }
.fts-dots button:focus { outline: none; }
.fts-dots button:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }
.fts-slider.is-static .fts-dots { display: none; }

.fts-slider .ds-nav {
	top: calc(50% - 14px);
	background: rgba(255, 255, 255, .85) !important;
	box-shadow: 0 2px 10px rgba(22, 60, 54, .18) !important;
	opacity: .7;
	transition: opacity .25s, background-color .25s, color .25s, box-shadow .25s, transform .25s;
}
.fts-slider:hover .ds-nav { opacity: 1; }
.fts-slider .ds-nav:hover,
.fts-slider .ds-nav:focus-visible {
	background: var(--hg-primary) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-primary) 30%, transparent) !important;
	transform: scale(1.06);
}
@media (max-width: 549px) {
	.fts-slider { --ds-cols: 1.15; }
}
@media (hover: none), (max-width: 549px) {
	.fts-slider .ds-nav { display: none; }
}