/* Hàng card cuộn ngang bằng scroll-snap (mobile vuốt native, không cần JS).
   assets/js/scroller.js chỉ thêm mũi tên + dot. Biến thể --1/--3/--4/--5 = số card trên desktop; chỉ --1 có dot.
   <div class="vo-scroller vo-scroller--4" data-vo-scroller><ul class="vo-scroller__track"><li class="vo-scroller__item">...</li></ul></div> */

:root {
	/* Chỉnh ở đây (mọi scroller; scroller.js đọc 2 biến này) */
	--vo-scroller-dur: 450ms;                       /* Thời gian cuộn khi bấm mũi tên */
	--vo-scroller-ease: var(--vo-ease);             /* Kiểu chuyển động */
}

.vo-scroller {
	/* Chỉnh ở đây (riêng từng scroller qua style="" cũng được) */
	--vo-scroller-gap: var(--vo-space-3);           /* Khoảng cách giữa card (mọi màn hình) */
	--vo-scroller-nav: var(--vo-btn);               /* Cỡ nút mũi tên */
	--vo-scroller-nav-top: calc(50% - var(--_pad));   /* Vị trí dọc mũi tên; trừ --_pad vì track cao hơn card */
	--_per: 1;                                      /* Số card hiện cùng lúc (biến thể tự đặt) */
	--_pad: 6px;                                    /* Chừa chỗ cho viền focus / bóng card không bị cắt */

	position: relative;
}


/* Số card theo màn hình; số lẻ để lộ 1 phần card kế tiếp, báo "vuốt được" */
.vo-scroller--1 { --_per: 1; }
.vo-scroller--2 { --_per: 1.12; }
.vo-scroller--3 { --_per: 1.25; }
.vo-scroller--4 { --_per: 1.6; }
.vo-scroller--5 { --_per: 2.2; }
@media (min-width: 600px) {
	.vo-scroller--2 { --_per: 1.6; }
	.vo-scroller--3 { --_per: 2.3; }
	.vo-scroller--4 { --_per: 2.6; }
	.vo-scroller--5 { --_per: 3.3; }
}
@media (min-width: 981px) {
	.vo-scroller--2 { --_per: 2; }
	.vo-scroller--3 { --_per: 3; }
	.vo-scroller--4 { --_per: 4; }
	.vo-scroller--5 { --_per: 5; }
}

/* Hàng cuộn */
.vo-scroller__track {
	position: relative;                             /* JS đo vị trí card theo track */
	display: flex;
	gap: var(--vo-scroller-gap);
	margin: calc(var(--_pad) * -1) calc(var(--_pad) * -1) calc(var(--_pad) * -3);
	padding: var(--_pad) var(--_pad) calc(var(--_pad) * 3);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;                 /* vuốt tới cuối không kéo theo trang / nút back của trình duyệt */
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--_pad);
	scroll-behavior: auto;                          /* JS tự làm chuyển động mượt, không để trình duyệt chen vào */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.vo-scroller__track::-webkit-scrollbar { display: none; }

.vo-scroller__item {
	flex: 0 0 calc((100% - (var(--_per) - 1) * var(--vo-scroller-gap)) / var(--_per));
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}
.vo-scroller__item > * { height: 100%; }        /* card trong cùng hàng cao bằng nhau */

/* Mũi tên: nửa trong nửa ngoài */
.vo-scroller__nav {
	position: absolute;
	top: var(--vo-scroller-nav-top);
	margin-top: calc(var(--vo-scroller-nav) / -2);   /* căn giữa bằng margin, không dùng translate: translate lẻ pixel làm viền + mũi tên bị nhoè trên màn hình DPR lẻ (1.25) */
	z-index: 3;
	--vo-arrow-size: var(--vo-scroller-nav);       /* hình tròn + viền: .vo-arrow (button.css) */
	--vo-arrow-icon: 20px;
	background: var(--vo-header-glass);             /* kính mờ như header */
	-webkit-backdrop-filter: var(--vo-header-blur);
	backdrop-filter: var(--vo-header-blur);
	transition: opacity var(--vo-dur-fast) ease, visibility 0s linear 0s, background-color var(--vo-dur-fast) ease, transform var(--vo-dur-fast) ease;
}
.vo-scroller__nav--prev { left: calc(var(--vo-scroller-nav) / -2); }
.vo-scroller__nav--next { right: calc(var(--vo-scroller-nav) / -2); }
.vo-scroller__nav svg { width: 1em; height: 1em; fill: currentColor; }
@media (hover: hover) {
	.vo-scroller__nav.vo-arrow:not(:disabled):hover { background: var(--vo-surface); }
}
.vo-scroller__nav:active { transform: scale(.94); }

/* Ẩn ở đầu / cuối hàng */
.vo-scroller__nav[hidden] {
	display: grid;                                  /* giữ để còn chạy hiệu ứng mờ dần */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--vo-dur-fast) ease, visibility 0s linear var(--vo-dur-fast);
}

/* Mobile: chỉ vuốt, không mũi tên */
@media (max-width: 767px) {
	.vo-scroller__nav.vo-arrow { display: none; }   /* .vo-arrow (button.css, nạp sau) đặt display: grid; 2 class thắng mà không cần !important */
}

/* Dot kiểu TikTok: tối đa MAX_DOTS (scroller.js), nhiều hơn thì dải trượt, dot rìa nhỏ dần */
.vo-scroller__dots {
	--_dot: 6px;                                    /* Cỡ dot */
	--_dot-gap: var(--vo-space-2);
	display: flex;
	width: max-content;                             /* JS đặt bề rộng khi nhiều dot */
	margin: var(--vo-space-3) auto 0;
	overflow: hidden;
	pointer-events: none;
}
.vo-scroller__dots-strip {
	display: flex;
	gap: var(--_dot-gap);
	transition: transform var(--vo-dur) var(--vo-ease);
}
.vo-scroller__dot {
	flex: none;
	width: var(--_dot);
	height: var(--_dot);
	border-radius: 50%;
	background: var(--vo-primary);
	opacity: .25;
	transition: opacity var(--vo-dur-fast) ease, transform var(--vo-dur) var(--vo-ease);
}
.vo-scroller__dot.is-active { opacity: 1; }
.vo-scroller__dot[data-far="1"] { transform: scale(.66); }
.vo-scroller__dot[data-far="2"] { transform: scale(.4); }