/* =========================================================
   COLLECTION HOT PRODUCTS
========================================================= */

.collection-hot-products {
	margin-bottom: 16px;
}

.collection-hot-products[hidden] {
	display: none !important;
}

.collection-hot-products > .card {
	padding: 14px 14px 10px;
	overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.collection-hot-products__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	gap: 16px;

	padding-bottom: 11px;
	margin-bottom: 12px;

	border-bottom: 1px solid #e8e8e8;
}

.collection-hot-products__title {
	position: relative;

	margin: 0;
	padding-left: 12px;

	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

/* Thanh đỏ nhỏ bên trái title */
.collection-hot-products__title::before {
	content: "";

	position: absolute;

	left: 0;
	top: 50%;

	width: 4px;
	height: 20px;

	border-radius: 3px;

	background: #d70018;

	transform: translateY(-50%);
}


.collection-hot-products__view-all {
	flex-shrink: 0;

	display: inline-flex;
	align-items: center;

	gap: 5px;

	font-size: 14px;
	font-weight: 500;
	line-height: 1;

	text-decoration: none;
}


/* =========================================================
   PRODUCT AREA
========================================================= */

.collection-hot-products .hot-products-view {
	width: 100%;
	overflow: hidden;
}

.collection-hot-products .hot-products-list {
	display: flex;

	flex-wrap: nowrap;
	justify-content: flex-start;
	width: 100%;

	margin-left: 0;
	margin-right: 0;

	padding: 0 0 5px;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	scroll-snap-type: x proximity;

	-webkit-overflow-scrolling: touch;

	/* Firefox */
	scrollbar-width: none;
}

/* Chrome / Edge / Safari */
.collection-hot-products .hot-products-list::-webkit-scrollbar {
	display: none;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

/*
 * Desktop:
 * 5 sản phẩm / viewport
 */
.collection-hot-products .hot-product-col {
	flex: 0 0 20%;
	max-width: 20%;

	padding-left: 5px;
	padding-right: 5px;

	scroll-snap-align: start;
}

.collection-hot-products .hot-product-col:first-child {
	padding-left: 0;
}

.collection-hot-products .hot-product-col:last-child {
	padding-right: 0;
}

.collection-hot-products .item_product_main {
	height: 100%;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1199px) {

	.collection-hot-products .hot-product-col {
		flex: 0 0 25%;
		max-width: 25%;
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

	.collection-hot-products .hot-product-col {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.collection-hot-products {
		margin-bottom: 10px;
	}

	.collection-hot-products > .card {
		padding: 11px 8px 8px;
	}

	.collection-hot-products__header {
		gap: 8px;

		padding-bottom: 9px;
		margin-bottom: 8px;
	}

	.collection-hot-products__title {
		padding-left: 10px;

		font-size: 17px;
	}

	.collection-hot-products__title::before {
		width: 3px;
		height: 17px;
	}

	.collection-hot-products__view-all {
		font-size: 13px;
	}


	/*
	 * Khoảng 2.15 sản phẩm.
	 *
	 * Việc để lộ một phần card thứ 3
	 * giúp khách biết danh sách kéo ngang được.
	 */
	.collection-hot-products .hot-product-col {
		flex: 0 0 46%;
		max-width: 46%;

		padding-left: 4px;
		padding-right: 4px;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 374px) {

	.collection-hot-products .hot-product-col {
		flex: 0 0 48%;
		max-width: 48%;
	}

	.collection-hot-products__title {
		font-size: 16px;
	}

}

/* =========================================================
   NAVIGATION ARROWS
========================================================= */

.collection-hot-products__body {
	position: relative;
}


.collection-hot-products__nav {
	position: absolute;

	top: 50%;

	z-index: 10;

	width: 38px;
	height: 38px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 1px solid #e5e5e5;
	border-radius: 50%;

	background: #fff;

	box-shadow: 0 2px 8px rgba(0,0,0,.12);

	cursor: pointer;

	transform: translateY(-50%);

	transition:
		opacity .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}


.collection-hot-products__nav i {
	font-size: 18px;
}


.collection-hot-products__nav:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.18);

	transform:
		translateY(-50%)
		scale(1.05);
}


.collection-hot-products__nav--prev {
	left: -8px;
}


.collection-hot-products__nav--next {
	right: -8px;
}


.collection-hot-products__nav.is-disabled {
	opacity: 0;
	pointer-events: none;
}


/* Mobile dùng swipe, không cần arrow */

@media (max-width: 767px) {

	.collection-hot-products__nav {
		display: none;
	}

}

/* =========================================================
   HOT PRODUCT CARD
========================================================= */

.collection-hot-products .hot-product-col {
	padding: 5px;
}


/* Frame riêng cho sản phẩm nổi bật */

.collection-hot-products .item_product_main {
	position: relative;

	height: 100%;

	background: #fff;

	border: 1px solid #e9e9e9;
	border-radius: 10px;

	overflow: hidden;

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}


/* Line đỏ phía trên */

.collection-hot-products .item_product_main::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	height: 3px;

	background: #d70018;

	opacity: 0;

	z-index: 5;

	transition: opacity .2s ease;
}


/* Hover PC */

@media (min-width: 768px) {

	.collection-hot-products .item_product_main:hover {
		border-color: rgba(215, 0, 24, .35);

		box-shadow:
			0 5px 16px rgba(0, 0, 0, .08);

		transform: translateY(-3px);
	}

	.collection-hot-products .item_product_main:hover::before {
		opacity: 1;
	}

}

.collection-hot-products .product-info {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

.collection-hot-products .product-thumbnail {
	margin: 6px 6px 0;
	border-radius: 8px;

	overflow: hidden;
}

.collection-hot-products .product-name {
	margin-top: 8px;
}

.collection-hot-products .product-thumbnail__img {
	transition: transform .3s ease;
}


@media (min-width: 768px) {

	.collection-hot-products
	.item_product_main:hover
	.product-thumbnail__img--primary {

		transform: scale(1.035);
	}

}

.collection-hot-products .price-box .price {
	font-weight: 700;
}

.collection-hot-products .compare-price {
	opacity: .7;
}