/*
 * Slider sản phẩm dùng chung TOÀN SITE — xem inc/product-slider.php
 *
 * Nạp ở mọi trang có carousel tour, KỂ CẢ trang tour đơn: nút mũi tên và cơ chế
 * trượt định nghĩa ở đây, tour-single.css chỉ lo bề rộng thẻ trong khối
 * "You may also like". Đừng chép lại luật ở hai nơi.
 *
 * Token giống bộ lọc / hero / tour card: hồng #d81372 · viền #ece8e4 · chữ #1b1b1f
 */

/* ---- đường ray trượt ---- */
/*
 * `overflow: hidden` ở lớp bọc là CHỐT AN TOÀN, không phải trang trí.
 * Nếu vì lý do nào đó `overflow-x:auto` ở đường ray không kẹp được (một tổ tiên
 * `display:contents`, hoặc CSS chủ đề chưa nạp kịp), thì hàng `flex-wrap:nowrap`
 * với 17 thẻ sẽ kéo TOÀN BỘ tài liệu rộng gấp 5-6 lần màn hình -> trang trông như
 * bị thu nhỏ và vỡ hết. Lớp bọc kẹp lại là hết đường lan ra.
 */
.vnin-pslider-wrap { position: relative; overflow: hidden; max-width: 100%; }
.vnin-pslider {
	/* Flatsome để `flex-flow: row wrap`; muốn thành đường ray thì phải nowrap */
	flex-wrap: nowrap !important;
	max-width: 100%; min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.vnin-pslider::-webkit-scrollbar { display: none; }
/*
 * Bề rộng cột vẫn do class `large-columns-3` v.v. của Flatsome quyết định
 * (`flex-basis:33.33%; max-width:33.33%`) — ở đây chỉ chặn co lại và bắt điểm dừng.
 */
.vnin-pslider > .col { flex-shrink: 0; scroll-snap-align: start; min-width: 0; }

/* ---- nút điều hướng ---- */
.vnin-ts-slide-nav { display: flex; gap: 8px; }
.vnin-pslider-nav { justify-content: flex-end; margin-bottom: 12px; }
.vnin-ts-arrow {
	all: unset; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 999px;
	border: 1px solid #ece8e4; background: #fff; cursor: pointer;
	font-family: inherit; font-size: 22px; line-height: 1; color: #1b1b1f;
}
.vnin-ts-arrow:hover { border-color: #d81372; color: #d81372; }
.vnin-ts-arrow:focus-visible { outline: 2px solid #d81372; outline-offset: 2px; }
.vnin-ts-arrow[disabled] { opacity: .35; cursor: default; }
.vnin-ts-arrow[disabled]:hover { border-color: #ece8e4; color: #1b1b1f; }

/*
 * Mũi tên cũ của Flickity: Flatsome vẫn in CSS cho chúng, nhưng thẻ nút chỉ do
 * Flickity tạo lúc chạy — nay không còn. Ẩn cho chắc, phòng khi một slider nào đó
 * vẫn khởi tạo được (ví dụ shortcode ngoài danh sách vnin_pslider_tags()).
 */
.vnin-pslider ~ .flickity-prev-next-button,
.vnin-pslider .flickity-page-dots { display: none; }

@media (max-width: 640px) {
	.vnin-ts-arrow { width: 32px; height: 32px; font-size: 20px; }
	.vnin-pslider-nav { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.vnin-pslider { scroll-behavior: auto; }
}