/* =====================================================================
 * [destination_slider] + [destination_button]
 * Màu: chỉ dùng biến :root (--hg-primary, --hg-text, --hg-button, --green-natural)
 * ===================================================================== */

/* ---------- Nút "Xem tất cả điểm đến" ---------- */
.ds-btn-wrap { display: flex; margin: 0 0 16px; }
.ds-btn-wrap.align-left { justify-content: flex-start; }
.ds-btn-wrap.align-center { justify-content: center; }
.ds-btn-wrap.align-right { justify-content: flex-end; }
.ds-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--hg-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--hg-primary) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.ds-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.ds-btn:hover { background: var(--hg-primary); color: #fff !important; }
.ds-btn:hover svg { transform: translateX(3px); }

/* ---------- Slider ---------- */
.ds-slider { --ds-cols: 4; --ds-gap: 20px; position: relative; }
.ds-track {
	display: flex;
	gap: var(--ds-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.ds-track::-webkit-scrollbar { display: none; }

/* Có JS: trượt bằng transform (mượt) thay vì cuộn */
.ds-viewport { overflow: hidden; }
.ds-slider.is-js .ds-track { overflow: visible; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; will-change: transform; user-select: none; -webkit-user-select: none; }
.ds-slider.is-js .ds-track img { -webkit-user-drag: none; pointer-events: none; }
.ds-track > [hidden] { display: none !important; }

.ds-card {
	position: relative;
	display: block;
	flex: 0 0 calc((100% - (var(--ds-cols) - 1) * var(--ds-gap)) / var(--ds-cols));
	aspect-ratio: 239 / 275;
	overflow: hidden;
	border-radius: 16px;
	background: var(--hg-text);
	color: #fff !important;
	text-decoration: none !important;
	scroll-snap-align: start;
}
.ds-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; object-fit: cover; transition: transform .6s ease; }
.ds-noimg { background: linear-gradient(150deg, var(--hg-primary), var(--hg-text)); }
.ds-card:hover .ds-img { transform: scale(1.06); }

/* Lớp tối phía dưới để chữ dễ đọc */
.ds-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--hg-text) 0%, transparent) 0%, color-mix(in srgb, var(--hg-text) 50%, transparent) 50%, var(--hg-text) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--hg-text) 0%, transparent) 0%, var(--hg-text) 100%);
	opacity: .55;
	pointer-events: none;
}

.ds-info {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 16px;
}
.ds-text { flex: 1 1 auto; min-width: 0; }
.ds-title { 
    display: block; 
    color: #fff; 
    font-size: 20px; 
    font-weight: 600; 
    line-height: 1.35; 
}
.ds-sub { 
    display: block; 
    margin-top: 2px; 
    color: #fff; 
    font-size: 16px; 
    line-height: 1.4; 
}
.ds-arrow { flex: none; width: 22px; height: 22px; margin-bottom: 2px; color: #fff; transition: transform .2s; }
.ds-card:hover .ds-arrow { transform: translateX(4px); }

.ds-card:focus { outline: none; }
.ds-card:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: 2px; }

.ds-note { padding: 10px 14px; border: 1px dashed var(--hg-primary); border-radius: 8px; color: var(--hg-primary); }

/* ---------- Nút ‹ › ---------- */
.ds-slider .ds-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	min-height: 0;
	border: 0 !important;
	border-radius: 50%;
	background: #fff !important;
	color: var(--hg-primary) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--hg-primary) 18%, transparent) !important;
	cursor: pointer;
	transition: background .2s, color .2s, transform .2s;
}
.ds-slider .ds-nav svg { width: 20px; height: 20px; }
.ds-slider .ds-nav:hover { background: var(--hg-primary) !important; color: #fff !important; }
.ds-slider .ds-prev { left: -22px; }
.ds-slider .ds-next { right: -22px; }
.ds-slider .ds-nav:focus { outline: none; }
.ds-slider .ds-nav:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: 2px; }

/* Đủ chỗ hiện hết bài → không cần nút */
.ds-slider.is-static .ds-nav { display: none; }

/* ---------- Màn hình nhỏ hơn ---------- */
@media (max-width: 1099px) { .ds-slider { --ds-cols: 3; } }
@media (max-width: 849px)  { 
	.ds-slider { --ds-cols: 2; --ds-gap: 16px; } 

	/* Luôn hiện nút ‹ › trên tablet / điện thoại (thắng mọi đoạn "display: none" ở file khác) */
	.ds-slider:not(.is-static) .ds-nav { display: flex !important; }
	.ds-slider .ds-nav { width: 36px; height: 36px; margin-top: -18px; opacity: .9 !important; }
	.ds-slider .ds-nav svg { width: 18px; height: 18px; }
	.ds-slider .ds-prev { left: 6px; }
	.ds-slider .ds-next { right: 6px; }
	.fts-slider .ds-nav { top: 120px; }
}
@media (max-width: 549px) {
	.ds-slider { --ds-cols: 1.25; --ds-gap: 12px; }   /* thấy 1 phần thẻ kế tiếp → biết là kéo được */
	.ds-title { font-size: 16px; }
	.ds-btn-wrap { margin-bottom: 12px; }
	.ds-slider .ds-nav { width: 38px; height: 38px; margin-top: -19px; }
	.ds-slider .ds-prev { left: 6px; }
	.ds-slider .ds-next { right: 6px; }
}