/* =====================================================================
 * san-pham.css - CSS dùng chung cho:
 *   1. Card sản phẩm  : category-san-pham.php + shortcode [sp_grid]  (.sp-products)
 *   2. Trang danh mục : category-san-pham.php                        (.product-cat-wrapper)
 *   3. Trang single   : single-san-pham.php                          (.san-pham-single)
 * Đặt tại: child-theme/assets/css/san-pham.css
 * ===================================================================== */

:root {
	--sp-primary: #4f67a6;
	--sp-primary-dark: #415894;
	--sp-radius-lg: 12px;
	--sp-radius-md: 8px;
}

/* =====================================================================
 * 1. CARD SẢN PHẨM (.sp-products)  -  theo CSS "ux product" của site
 * ===================================================================== */

/* ===== WRAPPER ===== */
.sp-products .product-small.box {
	position: relative;
	overflow: hidden;
	border-radius: var(--sp-radius-lg);
}

.sp-products .product-small.box .box-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--sp-radius-lg);
}

.sp-products .box-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ===== GRADIENT NỀN (KHÔNG CHẶN MOUSE) ===== */
.sp-products .product-small.box .box-image:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 30%);
	pointer-events: none; /* FIX DELAY */
	z-index: 1;
}

/* ===== TITLE MẶC ĐỊNH ===== */
.sp-products .product-small.box .product-title-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 16px;
	text-align: center;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

.sp-products .product-small.box .product-title-overlay h4 {
	margin: 0;
	color: #fff;
}

/* ===== OVERLAY HOVER ===== */
.sp-products .product-small.box .product-hover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: flex-end;
	transform: translateY(100%);
	transition: transform 0.35s ease;
	z-index: 9;
	pointer-events: none;
	will-change: transform;
}

/* khi hover mới cho click */
.sp-products .product-small.box:hover .product-hover-overlay {
	transform: translateY(0);
	pointer-events: auto;
}

/* ===== INNER CONTENT ===== */
.sp-products .product-small.box .product-hover-overlay .inner {
	width: 100%;
	padding: 20px;
	color: #fff;
	position: relative;
	z-index: 3;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.25s ease;
  text-align: center;
}

.sp-products .product-small.box:hover .product-hover-overlay .inner {
	transform: translateY(0);
	opacity: 1;
}

/* ===== TITLE HOVER ===== */
.sp-products .product-small.box .product-hover-overlay h4 {
	margin-bottom: 10px;
	color: #fff !important;
}

/* ===== BUTTON ===== */
.sp-products .product-small.box .btn-group {
	display: flex;
	gap: 10px;
}

.sp-products .product-small.box .btn-group a {
	text-transform: capitalize;
	border: none;
	flex: 1;
	text-align: center;
	padding: 8px 10px;
	background: var(--fs-color-primary, var(--sp-primary));
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	border-radius: 6px;
	transition: all 0.25s ease;
	position: relative;
	z-index: 5;
}

.sp-products .product-small.box .btn-group a:hover {
	color: var(--fs-color-primary, var(--sp-primary));
	background: #fff;
}

/* ===== HOVER EFFECT ===== */
.sp-products .product-small.box:hover .product-title-overlay {
	opacity: 0;
	transform: translateY(10px);
}

/* Thiết bị cảm ứng: không có hover, bấm thẳng vào ảnh */
@media (hover: none) {
	.sp-products .product-small.box .product-hover-overlay {
		display: none;
	}

	.sp-products .product-small.box:hover .product-title-overlay {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 549px) {
	.sp-products .product-small.box .product-title-overlay h4 {
		font-size: 14px;
	}
}

/* =====================================================================
 * 2. TRANG DANH MỤC (.product-cat-wrapper)
 * ===================================================================== */
.product-cat-wrapper .product-cat__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}

.product-cat-wrapper .product-cat__empty {
	padding: 40px 20px;
	text-align: center;
	background: #f6f6f6;
	font-size: 18px;
	color: #666;
}

.product-cat-wrapper .product-cat__pagination {
	margin-top: 34px;
	text-align: center;
}

.product-cat-wrapper .product-cat__pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.product-cat-wrapper .product-cat__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: #f1f1f1;
	color: #111;
	text-decoration: none;
	font-weight: 600;
}

.product-cat-wrapper .product-cat__pagination .page-numbers.current,
.product-cat-wrapper .product-cat__pagination .page-numbers:hover {
	background: var(--sp-primary);
	color: #fff;
}

/* =====================================================================
 * 3. TRANG SINGLE (.san-pham-single)
 * ===================================================================== */
.san-pham-single .product-title {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
}

.san-pham-single .product-short-description {
	margin-bottom: 20px;
	font-size: 17px;
}

/* Gallery */
.san-pham-single .product-gallery-slider img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius-lg);
}

.san-pham-single .product-thumbnails .col {
	cursor: pointer;
}

.san-pham-single .product-thumbnails img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--sp-radius-md);
	border: 2px solid transparent;
	opacity: .7;
	transition: opacity .2s, border-color .2s;
}

.san-pham-single .product-thumbnails .col.is-nav-selected img,
.san-pham-single .product-thumbnails .col:hover img {
	opacity: 1;
	border-color: var(--sp-primary);
}

/* Đặc trưng */
.san-pham-single .info-pd {
	margin-top: 30px;
}

.san-pham-single .product-dac-trung ul {
	margin: 0;
	list-style: none;
}

.san-pham-single .product-dac-trung li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 28px;
}

.san-pham-single .product-dac-trung li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--sp-primary);
	font-weight: 700;
}

/* Thông số kỹ thuật */
.san-pham-single .product-thong-so table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.san-pham-single .product-thong-so td {
	padding: 10px 14px;
	border: 1px solid #e3e3e3;
	vertical-align: top;
}

.san-pham-single .product-thong-so td:first-child {
	width: 38%;
	font-weight: 700;
	background: #f1f1f1;
}

/* Mô tả chi tiết */
.san-pham-single .product-mo-ta-chi-tiet {
	margin-top: 10px;
}

.san-pham-single .product-mo-ta-chi-tiet img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sp-radius-md);
}

@media (max-width: 849px) {
	.san-pham-single .product-title {
		font-size: 24px;
	}
}