/* ==========================================================================
   [DPS MODULAR ARCHITECTURE] - Buy Together Widget CSS
   File: assets/css/buy-together.css
   Mục đích: Thiết kế khối "MUA KÈM TIẾT KIỆM HƠN" cột 3 trang sản phẩm
   ========================================================================== */

.ksf-buy-together-widget {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 14px 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	margin-top: 18px !important;
}

.ksf-bt-header {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 10px !important;
	padding-bottom: 8px !important;
	border-bottom: 2px solid #f1f5f9 !important;
}

.ksf-bt-header svg {
	color: #008848 !important;
	flex-shrink: 0 !important;
}

.ksf-bt-title {
	font-size: 13.5px !important;
	font-weight: 800 !important;
	color: #008848 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.ksf-bt-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.ksf-bt-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 8px 0 !important;
	border-bottom: 1px dashed #f1f5f9 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.ksf-bt-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.ksf-bt-thumb-link {
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	aspect-ratio: 1 / 1 !important;
	background: #f8fafc !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 3px !important;
	border: 1px solid #e2e8f0 !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
	transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.ksf-bt-thumb-link:hover {
	border-color: #008848 !important;
	transform: scale(1.03) !important;
}

.ksf-bt-thumb {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

.ksf-bt-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 0 4px !important;
}

.ksf-bt-name {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	line-height: 1.35 !important;
	margin: 0 0 3px 0 !important;
	text-decoration: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	word-break: break-word !important;
}

.ksf-bt-name:hover {
	color: #008848 !important;
}

.ksf-bt-price-row {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	flex-wrap: wrap !important;
}

.ksf-bt-price {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #008848 !important;
	display: inline-flex !important;
	align-items: baseline !important;
}

.ksf-bt-price .woocommerce-Price-amount,
.ksf-bt-price .amount {
	color: #008848 !important;
	font-weight: 700 !important;
}

.ksf-bt-uom {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #64748b !important;
	margin-left: 1px !important;
}

.ksf-bt-reg-price {
	font-size: 11px !important;
	color: #94a3b8 !important;
	text-decoration: line-through !important;
}

.ksf-bt-discount-tag {
	font-size: 10px !important;
	font-weight: 700 !important;
	color: #dc2626 !important;
	background: #fee2e2 !important;
	padding: 1px 4px !important;
	border-radius: 3px !important;
}

button.ksf-bt-buy-btn,
.ksf-bt-buy-btn {
	width: auto !important;
	min-width: 54px !important;
	max-width: 60px !important;
	height: 30px !important;
	line-height: 28px !important;
	padding: 0 12px !important;
	background: #ffffff !important;
	color: #008848 !important;
	border: 1px solid #008848 !important;
	border-radius: 6px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

button.ksf-bt-buy-btn:hover,
.ksf-bt-buy-btn:hover {
	background: #008848 !important;
	color: #ffffff !important;
	border-color: #008848 !important;
}

button.ksf-bt-buy-btn.is-added,
.ksf-bt-buy-btn.is-added {
	background: #16a34a !important;
	color: #ffffff !important;
	border-color: #16a34a !important;
}

button.ksf-bt-buy-btn.is-loading,
.ksf-bt-buy-btn.is-loading {
	opacity: 0.7 !important;
	cursor: wait !important;
}

/* Triệt tiêu nút "Xem giỏ hàng & Thanh toán" tự sinh của WooCommerce Core */
.ksf-buy-together-widget .added_to_cart,
.ksf-bt-item .added_to_cart {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}