/* ==========================================================================
   [DPS MODULAR ARCHITECTURE] - Shared Shelf Grid CSS (BHX Standard)
   File: assets/css/shelf.css
   Mục đích: Thiết kế kệ hàng dùng chung cho Trang Chủ và Trang Chi Tiết Sản Phẩm
   ========================================================================== */

/* === 1. Kệ Hàng Container === */
.ksf-bhx-shelf {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	padding: 16px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Shelf Header */
.ksf-bhx-shelf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 2px solid #f1f5f9;
}

.ksf-bhx-shelf-title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ksf-bhx-shelf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #008848;
}

.ksf-bhx-shelf-deal .ksf-bhx-shelf-icon {
	color: #d97706;
}

.ksf-bhx-shelf-title {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	line-height: 1.3;
}

.ksf-bhx-shelf-viewall {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: #008848;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	transition: all 0.15s ease;
}

.ksf-bhx-shelf-viewall:hover {
	background: #008848;
	color: #ffffff;
}

/* Kệ Deal Thùng Đặc Biệt */
.ksf-bhx-shelf-deal {
	background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
	border: 1.5px solid #fde68a;
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}

.ksf-bhx-shelf-deal .ksf-bhx-shelf-header {
	border-bottom-color: #fef3c7;
}

.ksf-bhx-shelf-deal .ksf-bhx-shelf-title {
	color: #b45309;
}

.ksf-bhx-shelf-deal .ksf-bhx-shelf-viewall {
	color: #b45309;
	background: #fef3c7;
	border-color: #fde68a;
}

.ksf-bhx-shelf-deal .ksf-bhx-shelf-viewall:hover {
	background: #d97706;
	color: #ffffff;
}

/* === 2. Grid Sản Phẩm Chuẩn BHX - 5 Cột Desktop === */
.ksf-bhx-shelf ul.products,
.ksf-bhx-shelf .woocommerce ul.products,
.woocommerce .ksf-bhx-shelf ul.products,
.woocommerce-page .ksf-bhx-shelf ul.products,
#ksf-single-related-shelf ul.products,
.ksf-related-section-wrap ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ksf-bhx-shelf ul.products li.product,
.ksf-bhx-shelf .woocommerce ul.products li.product,
.woocommerce .ksf-bhx-shelf ul.products li.product,
.woocommerce-page .ksf-bhx-shelf ul.products li.product,
#ksf-single-related-shelf ul.products li.product,
.ksf-related-section-wrap ul.products li.product {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: none !important;
	display: flex !important;
	float: none !important;
	box-sizing: border-box !important;
}

.ksf-bhx-shelf ul.products li.product .product-block {
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 10px !important;
	width: 100% !important;
	height: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.ksf-bhx-shelf ul.products li.product:hover .product-block {
	transform: translateY(-3px) !important;
	border-color: #008848 !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Ảnh sản phẩm vuông 1:1 */
.ksf-bhx-shelf ul.products li.product .product-transition {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	border-radius: 6px !important;
	background: #f8fafc !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px !important;
}

.ksf-bhx-shelf ul.products li.product .product-transition img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	transition: transform 0.2s ease !important;
}

.ksf-bhx-shelf ul.products li.product:hover .product-transition img {
	transform: scale(1.04) !important;
}

/* Tiêu đề 2 dòng */
.ksf-bhx-shelf ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px !important;
	line-height: 17px !important;
	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	text-overflow: ellipsis !important;
	margin: 2px 0 6px 0 !important;
}

.ksf-bhx-shelf ul.products li.product:hover .woocommerce-loop-product__title {
	color: #008848 !important;
}

/* Giá bán & Đơn vị */
.ksf-bhx-shelf ul.products li.product .price {
	margin-top: auto !important;
	margin-bottom: 8px !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 44px !important;
	justify-content: flex-end !important;
}

.ksf-bhx-shelf ul.products li.product .price .amount {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #008848 !important;
	line-height: 1.25 !important;
}

.ksf-main-price-wrap {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 3px !important;
}

.ksf-price-unit {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	margin-left: 2px !important;
}

/* === 3. Badge Mua Thùng Giá Sỉ Chuẩn BHX === */
.ksf-bhx-deal-badge {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	gap: 2px !important;
	margin: 4px auto 0 auto !important;
	background: #fff7ed !important;
	border: 1px solid #fed7aa !important;
	padding: 3px 6px !important;
	border-radius: 4px !important;
	font-size: 10.5px !important;
	line-height: 1.2 !important;
	color: #9a3412 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.ksf-bhx-deal-badge:hover {
	background: #ffedd5 !important;
	border-color: #f97316 !important;
	transform: translateY(-1px) !important;
}

.ksf-deal-top-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	width: 100% !important;
	color: #7c2d12 !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.ksf-deal-bottom-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: 100% !important;
	white-space: nowrap !important;
}

.ksf-deal-price,
.ksf-deal-price .amount {
	color: #c2410c !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
}

.ksf-deal-pct {
	background: #dc2626 !important;
	color: #ffffff !important;
	font-size: 9.5px !important;
	font-weight: 800 !important;
	padding: 1px 4px !important;
	border-radius: 3px !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
}

/* === 4. Nút MUA & Bộ Chọn Số Lượng Kamereo (Dùng chung Desktop & Mobile) === */
.ksf-qty-control,
.ksf-bhx-shelf .ksf-qty-control {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin-top: auto !important;
	box-sizing: border-box !important;
}

/* Khi số lượng = 0: Nút MUA xanh lá thanh lịch */
.ksf-qty-control:not(.has-items),
.ksf-bhx-shelf .ksf-qty-control:not(.has-items) {
	border: 1px solid #008848 !important;
	background: #f0fdf4 !important;
	border-radius: 4px !important;
	height: 32px !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all 0.15s ease !important;
	padding: 0 !important;
}

.ksf-qty-control:not(.has-items):hover,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items):hover {
	background: #008848 !important;
}

.ksf-qty-control:not(.has-items) .ksf-qty-minus,
.ksf-qty-control:not(.has-items) .ksf-qty-input,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items) .ksf-qty-minus,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items) .ksf-qty-input {
	display: none !important;
}

.ksf-qty-control:not(.has-items) .ksf-qty-plus,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items) .ksf-qty-plus {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	border: none !important;
	font-size: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.ksf-qty-control:not(.has-items) .ksf-qty-plus::after,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items) .ksf-qty-plus::after {
	content: 'MUA' !important;
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	color: #008848 !important;
	line-height: 30px !important;
	text-align: center !important;
}

.ksf-qty-control:not(.has-items):hover .ksf-qty-plus::after,
.ksf-bhx-shelf .ksf-qty-control:not(.has-items):hover .ksf-qty-plus::after {
	color: #ffffff !important;
}

/* Khi đã chọn mua (has-items): Bộ tăng giảm - [qty] + */
.ksf-qty-control.has-items,
.ksf-bhx-shelf .ksf-qty-control.has-items {
	border: 1px solid #cbd5e1 !important;
	border-radius: 4px !important;
	background: #ffffff !important;
	height: 32px !important;
	padding: 2px !important;
	box-sizing: border-box !important;
}

.ksf-qty-control.has-items .ksf-qty-btn,
.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-btn {
	width: 28px !important;
	height: 26px !important;
	border-radius: 3px !important;
	border: none !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.ksf-qty-control.has-items .ksf-qty-plus,
.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-plus {
	background: #008848 !important;
	color: #ffffff !important;
}

.ksf-qty-control.has-items .ksf-qty-plus::after,
.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-plus::after {
	content: none !important;
}

.ksf-qty-control.has-items .ksf-qty-minus,
.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-minus {
	background: #f1f5f9 !important;
	color: #334155 !important;
}

.ksf-qty-control.has-items .ksf-qty-input,
.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-input {
	display: block !important;
	width: calc(100% - 56px) !important;
	height: 26px !important;
	border: none !important;
	text-align: center !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #008848 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* === 5. Responsive Kệ Hàng === */
@media (max-width: 1024px) {
	.ksf-bhx-shelf ul.products,
	.ksf-bhx-shelf .woocommerce ul.products,
	.woocommerce .ksf-bhx-shelf ul.products,
	#ksf-single-related-shelf ul.products,
	.ksf-related-section-wrap ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px !important;
	}
}

@media (max-width: 768px) {
	.ksf-bhx-shelf {
		padding: 12px 8px !important;
		border-radius: 10px !important;
		margin-bottom: 14px !important;
	}

	.ksf-bhx-shelf-title {
		font-size: 15px !important;
	}

	.ksf-bhx-shelf-viewall {
		font-size: 11px !important;
		padding: 3px 8px !important;
	}

	/* Grid 3 Cột Chuẩn Mobile BHX */
	.ksf-bhx-shelf ul.products,
	.ksf-bhx-shelf .woocommerce ul.products,
	.woocommerce .ksf-bhx-shelf ul.products,
	.woocommerce-page .ksf-bhx-shelf ul.products,
	#ksf-single-related-shelf ul.products,
	.ksf-related-section-wrap ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 6px !important;
	}

	.ksf-bhx-shelf ul.products li.product .product-block {
		padding: 6px !important;
	}

	.ksf-bhx-shelf ul.products li.product .woocommerce-loop-product__title {
		font-size: 11px !important;
		line-height: 14px !important;
		height: 28px !important;
		min-height: 28px !important;
		max-height: 28px !important;
		margin: 2px 0 4px 0 !important;
	}

	.ksf-bhx-shelf ul.products li.product .price {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 0 6px 0 !important;
		min-height: auto !important;
	}

	.ksf-bhx-shelf ul.products li.product .price .amount {
		font-size: 12.5px !important;
	}

	/* Nút MUA mobile gọn gàng 28px */
	.ksf-qty-control:not(.has-items),
	.ksf-bhx-shelf .ksf-qty-control:not(.has-items) {
		height: 28px !important;
	}

	.ksf-qty-control:not(.has-items) .ksf-qty-plus::after,
	.ksf-bhx-shelf .ksf-qty-control:not(.has-items) .ksf-qty-plus::after {
		font-size: 11.5px !important;
		line-height: 26px !important;
	}

	.ksf-qty-control.has-items,
	.ksf-bhx-shelf .ksf-qty-control.has-items {
		height: 28px !important;
	}

	.ksf-qty-control.has-items .ksf-qty-btn,
	.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-btn {
		width: 24px !important;
		height: 24px !important;
		font-size: 13px !important;
	}

	.ksf-qty-control.has-items .ksf-qty-input,
	.ksf-bhx-shelf .ksf-qty-control.has-items .ksf-qty-input {
		height: 24px !important;
		font-size: 11px !important;
		width: calc(100% - 48px) !important;
	}
}