/*
 * Carousel ngang dung chung.
 *
 * Truoc day nam trong single-product.css nen chi trang chi tiet moi co.
 * Trang chu dung lai y het cho slider banner va cac hang san pham, nen tach
 * ra day - mot ban cai, ba trang cung goi. Doi voi JS xem assets/js/carousel.js.
 *
 * Khuon HTML va cac thuoc tinh data-* duoc mo ta o dau file JS do.
 */

.cps-carousel {
	position: relative;
}

.cps-carousel__viewport {
	overflow: hidden;
}

.cps-carousel__track {
	display: flex;
	gap: var(--cps-sp-2);
	transition: transform 0.25s ease;
}

.cps-carousel__item {
	flex: none;
}

/*
 * Nut chuyen trang.
 *
 * PHAI go dem va le cua Flatsome: ho dat cho MOI the <button> mot bo
 * "padding: 0 18.6px; margin: 0 15.5px 15.5px 0". Hau qua do duoc bang may:
 * nut rong 39px thay vi 30px (dem ngang 37px lon hon ca be rong nen hop
 * phai no ra chua du dem), va nut ben phai bi le day ra 16px khoi mep -
 * dat "right: 0" cung khong sat mep duoc.
 */
.cps-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 48px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border-radius: var(--cps-r-sm);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
	color: var(--cps-c-strong);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cps-carousel:hover .cps-carousel__nav {
	opacity: 1;
}

.cps-carousel__nav[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

.cps-carousel__nav .cps-icon {
	width: 12px;
	height: 12px;
}

.cps-carousel__nav--prev {
	left: -4px;
}

.cps-carousel__nav--prev .cps-icon {
	transform: rotate(90deg);
}

.cps-carousel__nav--next {
	right: -4px;
}

.cps-carousel__nav--next .cps-icon {
	transform: rotate(-90deg);
}

.cps-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	height: 24px;
	align-items: center;
}

/* JS bat lop nay khi danh sach vua du mot trang. */
.cps-carousel__dots.is-hidden {
	display: none;
}

/*
 * PHAI go het bo dat cho <button> cua Flatsome, khong chi width/height.
 * Ho dat cho MOI the <button>:
 *
 *     min-width: 24px;  min-height: 2.5em;  line-height: 2.4em;
 *     margin: 0 1em 1em 0;  padding: 0 1.2em;  border: 1px solid transparent;
 *
 * "min-width" va "min-height" DE BE width/height minh dat: cham dang le
 * 6x6 bi keo thanh 24x39, con hai cai margin 1em thi day chung cach nhau
 * gan hai chuc pixel. Nhin ra mot hang nut chu khong phai hang cham.
 */
.cps-carousel__dot {
	box-sizing: border-box;
	width: 6px;
	min-width: 6px;
	height: 6px;
	min-height: 6px;
	padding: 0;
	margin: 0;
	border: 0;
	line-height: 0;
	border-radius: var(--cps-r-full);
	background: #d6d6d6;
	cursor: pointer;
}

/* Cham dang xem keo dai thanh vien thuoc - nho noi rong ca min-width. */
.cps-carousel__dot.is-active {
	width: 16px;
	min-width: 16px;
	background: var(--cps-c-primary);
}