/**
 * Thumb Slider — style.
 * Tự chứa (không phụ thuộc theme), không phá style của Flatsome.
 * Biến chỉnh nhanh: --tsld-accent (màu nhấn), --tsld-gap, --tsld-thumb-cols, --tsld-split, --tsld-thumb-ratio.
 *
 * @package ThumbSlider
 */

.tsld {
	--tsld-accent: #56b947;
	--tsld-gap: 16px;
	--tsld-thumb-cols: 1;
	--tsld-split: 38%;
	--tsld-thumb-ratio: auto;
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--tsld-gap);
	width: 100%;
}

/* Ở layout split, dải thumbnail không cần cao bằng banner */
.tsld-layout-right .tsld-thumbs-wrap,
.tsld-layout-left .tsld-thumbs-wrap {
	align-self: flex-start;
}

.tsld *,
.tsld *::before,
.tsld *::after {
	box-sizing: border-box;
}

/* ================= Banner chính ================= */
.tsld .tsld-main-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.tsld .tsld-main {
	width: 100%;
}

.tsld .tsld-main .tsld-slide {
	width: 100%;
	margin: 0;
}

.tsld .tsld-slide-link {
	display: block;
	text-decoration: none;
}

.tsld .tsld-media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--tsld-radius, 0);
}

.tsld .tsld-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ép tỉ lệ khung banner khi khai báo ratio="16:9" */
.tsld .tsld-media[style*="--tsld-ratio"] {
	aspect-ratio: var(--tsld-ratio);
}

.tsld .tsld-media[style*="--tsld-ratio"] img {
	height: 100%;
	object-fit: cover;
}

/* ================= Dải thumbnail (strip, không phải slider) ================= */
.tsld .tsld-thumbs-wrap {
	flex: 0 0 var(--tsld-split);
	max-width: var(--tsld-split);
	min-width: 0;
}

.tsld .tsld-thumbs-slider {
	display: grid;
	grid-template-columns: repeat(var(--tsld-thumb-cols), minmax(0, 1fr));
	gap: var(--tsld-gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

.tsld .tsld-thumb {
	margin: 0;
	opacity: .75;
	transition: opacity .2s ease;
	scroll-snap-align: start;
}

.tsld .tsld-thumb:hover,
.tsld .tsld-thumb:focus-within,
.tsld .tsld-thumb.is-selected {
	opacity: 1;
}

.tsld .tsld-thumb-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	position: relative;
	border-radius: var(--tsld-radius, 4px);
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.tsld .tsld-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tsld-radius, 4px);
}

/* Ép tỉ lệ thumbnail (attr thumb_ratio, ví dụ "5:2") */
.tsld[style*="--tsld-thumb-ratio"] .tsld-thumb img {
	aspect-ratio: var(--tsld-thumb-ratio);
	object-fit: cover;
}

.tsld .tsld-thumb-label {
	display: block;
	position: relative;
	font-size: 13px;
	line-height: 1.35;
	padding: 6px 4px 0;
	color: inherit;
	text-align: center;
}

/* ---------- Ô thumbnail CHỈ CÓ CHỮ (không ảnh) — kiểu thẻ như banner phụ ---------- */
.tsld .tsld-thumb--text .tsld-thumb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--tsld-border, #e3e8ec);
	line-height: 1.3;
}

.tsld .tsld-thumb--text .tsld-thumb-label {
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tsld-text, #1f2d3d);
}

.tsld .tsld-thumb--text.is-selected .tsld-thumb-btn {
	border-color: var(--tsld-accent);
	box-shadow: inset 4px 0 0 0 var(--tsld-accent), 0 0 0 2px var(--tsld-accent);
}

/* ---------- Kiểu nav = CHỮ (nav="text"): mọi ô là thẻ chữ, không ảnh ---------- */
.tsld[data-tsld-nav="text"] .tsld-thumb img {
	display: none;
}

.tsld[data-tsld-nav="text"] .tsld-thumb .tsld-thumb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--tsld-border, #e3e8ec);
	line-height: 1.3;
}

.tsld[data-tsld-nav="text"] .tsld-thumb .tsld-thumb-label {
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--tsld-text, #1f2d3d);
}

.tsld[data-tsld-nav="text"] .tsld-thumb.is-selected .tsld-thumb-btn {
	border-color: var(--tsld-accent);
	box-shadow: inset 4px 0 0 0 var(--tsld-accent), 0 0 0 2px var(--tsld-accent);
}

/* ---------- Chế độ mobile (xem trong @media bên dưới) ---------- */

.tsld .tsld-thumb.is-selected .tsld-thumb-btn {
	box-shadow: 0 0 0 2px var(--tsld-accent), 0 6px 18px rgba(0, 0, 0, .10);
}

.tsld .tsld-thumb-btn:focus-visible,
.tsld .tsld-thumb:focus-within .tsld-thumb-btn {
	outline: 2px solid var(--tsld-accent);
	outline-offset: 2px;
}

/* ================= Layout ================= */
.tsld-layout-left {
	flex-direction: row-reverse;
}

/* below: banner trên, dải thumbnail thành hàng ngang tự cuộn */
.tsld-layout-below {
	flex-direction: column;
}

.tsld-layout-below .tsld-thumbs-wrap {
	flex: 1 1 auto;
	max-width: 100%;
	width: 100%;
}

.tsld-layout-below .tsld-thumbs-slider {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

.tsld-layout-below .tsld-thumb {
	flex: 0 0 calc((100% - (var(--tsld-thumb-cols) - 1) * var(--tsld-gap)) / var(--tsld-thumb-cols));
	scroll-snap-align: start;
}

/* ================= Số hàng của cột thumbnail (chỉ khi Số cột = 1) =================
 * Cột thumbnail cao ĐÚNG bằng banner và chia đều N hàng; slide vượt quá N hàng thì
 * cuộn dọc trong khung (không kéo dài trang). Chiều cao khung do JS đặt
 * (tsld.js → syncRowsHeight) vì CSS không tự biết chiều cao banner. */
.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumbs-wrap {
	align-self: flex-start;
	overflow: hidden;
	/* Khớp đúng khung ảnh banner (JS đo ảnh và đặt biến này) */
	height: var(--tsld-banner-h, auto);
	max-height: var(--tsld-banner-h, none);
	width: 100%;
}

.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) {
	/* Không kéo giãn banner theo cột thumbnail → banner giữ đúng tỉ lệ ảnh */
	align-items: flex-start;
}

.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumbs-slider {
	height: 100%;
	/* proximity (KHÔNG dùng mandatory): mandatory + smooth làm Chrome CHẶN cuộn lập trình
	   ⇒ bấm mũi tên / con lăn / vòng lại đều không nhích. JS tự snap theo ô. */
	scroll-snap-type: y proximity;
	/* Mỗi hàng = (chiều cao khung - khoảng cách) / số hàng ⇒ đúng N hàng hiển thị,
	   slide vượt quá N hàng tạo hàng tiếp theo cùng chiều cao và cuộn dọc. */
	grid-template-rows: none;
	grid-auto-rows: calc((100% - (var(--tsld-thumb-rows) - 1) * var(--tsld-gap)) / var(--tsld-thumb-rows));
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
}

.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumb {
	min-height: 0;
}

.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumb-btn {
	height: 100%;
}

.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumb img {
	height: 100%;
	object-fit: cover;
}

/* ================= Dải nav kéo được như slider + mũi tên + fade =================
 * Kéo bằng CHUỘT để cuộn dải thumbnail (cảm giác như slider sản phẩm của Flatsome);
 * thiết bị cảm ứng vẫn cuộn tự nhiên. Mũi tên + lớp mờ chỉ hiện khi dải bị tràn. */
.tsld .tsld-thumbs-wrap {
	position: relative;
}

.tsld .tsld-thumbs-slider {
	cursor: grab;
}

.tsld .tsld-thumbs-slider.tsld-dragging {
	cursor: grabbing;
	user-select: none;
}

.tsld.tsld-has-overflow .tsld-thumbs-wrap::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
	z-index: 2;
}

.tsld .tsld-navbtn {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 26px;
	height: 26px;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	color: #3a4a5a;
	background: #fff;
	border: 1px solid var(--tsld-border, #e3e8ec);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	cursor: pointer;
}

.tsld.tsld-has-overflow .tsld-navbtn {
	display: flex;
}

.tsld .tsld-navbtn:hover {
	border-color: var(--tsld-accent);
	color: var(--tsld-accent);
}

.tsld .tsld-navbtn--prev {
	top: -13px;
}

.tsld .tsld-navbtn--next {
	bottom: -13px;
}

.tsld-layout-below .tsld-navbtn--prev {
	top: 50%;
	left: -13px;
	transform: translateY(-50%);
}

.tsld-layout-below .tsld-navbtn--next {
	top: 50%;
	left: auto;
	right: -13px;
	bottom: auto;
	transform: translateY(-50%);
}

/* ================= Chế độ tĩnh khi thiếu Flickity ================= */
/* Khi thiếu Flickity: KHÔNG ẩn ảnh nào — hiện toàn bộ ảnh xếp dọc để không mất nội dung */
.tsld.tsld-fallback .tsld-main .tsld-slide {
	display: block;
	margin-bottom: 10px;
}

.tsld.tsld-fallback .tsld-main .tsld-slide:last-child {
	margin-bottom: 0;
}

/* ================= Bù cấu trúc Flickity tối thiểu ================= */
.tsld .flickity-viewport {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.tsld .flickity-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ================= Mobile ================= */
@media (max-width: 849px) {
	/* Split → banner trên, thumbnail 1 hàng ngang bên dưới */
	.tsld:not(.tsld-layout-below) {
		flex-direction: column;
	}

	.tsld .tsld-thumbs-wrap,
	.tsld-layout-left .tsld-thumbs-wrap {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	.tsld:not(.tsld-layout-below) .tsld-thumbs-slider {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 4px;
	}

	.tsld:not(.tsld-layout-below) .tsld-thumb {
		/* Mobile: hiện 2 ô mỗi khung (sếp chốt 2 ô là đẹp nhất về UX) */
		flex: 0 0 calc((100% - var(--tsld-gap)) / 2);
		scroll-snap-align: start;
	}

	.tsld .tsld-thumb {
		opacity: 1;
	}

	/* SỬA LỖI MOBILE: ở layout cột, `align-items: flex-start` làm khung banner co về 0px
	 * (banner trắng trơn, chỉ thấy ảnh 1). Trên mobile phải trả về stretch + width 100%. */
	.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) {
		align-items: stretch;
	}

	.tsld[data-tsld-thumb-rows]:not([data-tsld-thumb-rows="0"]) .tsld-thumbs-wrap {
		height: auto;
		max-height: none;
	}

	.tsld .tsld-main-wrap {
		width: 100%;
	}

	/* Trên mobile dải nav không bị cắt theo chiều cao banner */
	.tsld .tsld-thumbs-slider {
		height: auto;
		overflow-y: visible;
	}

	/* Nav ở dưới banner — mobile cũng hiện 2 ô cho đồng nhất */
	.tsld-layout-below .tsld-thumb {
		flex: 0 0 calc((100% - var(--tsld-gap)) / 2);
	}

	/* ---------- Mobile: THUMBNAIL NHỎ GỌN ----------
	 * Trước đây mỗi ô cao theo tỉ lệ ảnh gốc (~200px) ⇒ chiếm gần nửa màn hình.
	 * Nay ép cao 84px + crop ảnh (object-fit: cover) cho gọn, vẫn thấy rõ nội dung. */
	/* Ô nav ĐỀU NHAU, ảnh giữ đúng tỉ lệ (contain — không crop/méo), chữ clamp 2 dòng */
	.tsld .tsld-thumb {
		min-width: 0;
		overflow: hidden;
	}

	.tsld .tsld-thumb-btn {
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.tsld .tsld-thumb img {
		width: 100%;
		height: 72px;
		object-fit: contain;
		background: #fff;
	}

	/* Ô chữ: nhỏ gọn, tối đa 2 dòng (không tràn ra ngoài gây lệch layout) */
	.tsld .tsld-thumb-label {
		font-size: 12px;
		line-height: 1.25;
		max-height: 72px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* Ô dạng CHỮ giữ nhỏ hơn nữa cho gọn */
	.tsld .tsld-thumb--text .tsld-thumb-btn,
	.tsld[data-tsld-nav="text"] .tsld-thumb .tsld-thumb-btn {
		height: auto;
		min-height: 48px;
	}

	/* Chế độ ẩn hẳn dải thumbnail trên mobile */
	.tsld[data-tsld-thumb-mobile="hide"] .tsld-thumbs-wrap {
		display: none;
	}

	/* Chế độ mobile = CHỮ: ẩn ảnh thumbnail, hiện chữ trên thẻ nav */
	.tsld[data-tsld-thumb-mobile="text"] .tsld-thumb--label img {
		display: none;
	}

	.tsld[data-tsld-thumb-mobile="text"] .tsld-thumb--label .tsld-thumb-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 72px;
		min-height: 0;
		padding: 6px 8px;
		overflow: hidden;
		background: #fff;
		border: 1px solid var(--tsld-border, #e3e8ec);
	}

	.tsld[data-tsld-thumb-mobile="text"] .tsld-thumb--label .tsld-thumb-label {
		padding: 0;
		font-size: 13px;
		font-weight: 600;
		color: var(--tsld-text, #1f2d3d);
	}

	.tsld[data-tsld-thumb-mobile="text"] .tsld-thumb--label.is-selected .tsld-thumb-btn {
		border-color: var(--tsld-accent);
		box-shadow: inset 3px 0 0 0 var(--tsld-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsld .tsld-thumb,
	.tsld .tsld-thumb-btn {
		transition: none;
	}
}
/* ==========================================================================
   ENGINE TU VIET (2.0.0) — .tsld-native: banner chay bang scroll-snap + JS,
   KHONG Flickity, KHONG jQuery. JS loi/chua tai thi nguoi dung VAN keo duoc.
   ========================================================================== */
.tsld-native .tsld-main {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.tsld-native .tsld-main::-webkit-scrollbar { display: none; }
.tsld-native .tsld-main.tsld-core-dragging { cursor: grabbing; }
.tsld-native .tsld-slide {
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
}
.tsld-native .tsld-slide img { display: block; width: 100%; height: auto; }
.tsld-native .tsld-core-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .45); color: #fff; font-size: 20px; line-height: 1;
	cursor: pointer; z-index: 3; opacity: 0; transition: opacity .2s;
}
.tsld-native:hover .tsld-core-arrow, .tsld-native .tsld-core-arrow:focus { opacity: 1; }
.tsld-native .tsld-core-arrow--prev { left: 8px; }
.tsld-native .tsld-core-arrow--next { right: 8px; }
.tsld-native .tsld-core-dots {
	position: absolute; left: 0; right: 0; bottom: 8px;
	display: flex; gap: 6px; justify-content: center; z-index: 3;
}
.tsld-native .tsld-core-dot {
	width: 9px; height: 9px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0;
}
.tsld-native .tsld-core-dot.is-selected { background: var(--tsld-accent, #56b947); transform: scale(1.3); }
@media (max-width: 849px) {
	.tsld-native .tsld-core-arrow { opacity: 1; width: 30px; height: 30px; }
}

/* Chong KEO-LINK native: slide boc trong <a> => Chrome tu keo ca link, de mat thao tac keo slider. */
.tsld-native .tsld-main a,
.tsld-native .tsld-main img {
	-webkit-user-drag: none;
	user-select: none;
}
.tsld-native .tsld-main.tsld-core-dragging a,
.tsld-native .tsld-main.tsld-core-dragging img { pointer-events: none; }