/* Widget "Mua kem deal soc" (luong A - Addon) + "Mua de nhan qua" (luong B -
   Gift) tren trang chi tiet san pham - xem Lala_Promo_Addon_Storefront va
   Lala_Promo_Gift_Storefront. Dung CHUNG 1 cap file cho ca 2 widget vi giao
   dien gan nhu giong het nhau (chi khac tieu de/nhan) - tranh trung lap CSS.
   Dung chung mau cam Shopee (#ee4d2d) da dung o flashsale.css/combo.css. */
.lala-deal-widget {
	margin: 16px 0;
	padding: 14px 16px;
	background: #fff8f6;
	border: 1px solid #ffcfc2;
	border-radius: 8px;
}

.lala-deal-widget + .lala-deal-widget {
	margin-top: 12px;
}

.lala-deal-widget-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #ee4d2d;
	margin-bottom: 6px;
}

.lala-deal-widget-icon {
	font-size: 16px;
}

.lala-deal-widget-note {
	font-size: 12px;
	color: #888;
	margin-bottom: 10px;
}

.lala-deal-progress-wrap {
	margin-bottom: 10px;
}

.lala-deal-progress-msg {
	font-size: 13px;
	color: #555;
}

.lala-deal-progress-msg strong {
	color: #ee4d2d;
}

.lala-deal-progress-msg.is-max {
	color: #26aa26;
	font-weight: 600;
}

/* Danh sach san pham (mua kem / qua tang) */
.lala-deal-item-list {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.lala-deal-item {
	position: relative;
	flex: 0 0 110px;
	width: 110px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 6px;
	text-align: center;
}

.lala-deal-item-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: #f8f8f8;
	margin-bottom: 6px;
}

.lala-deal-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lala-deal-item-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.35;
	color: #333;
	text-decoration: none;
	min-height: 30px;
}

.lala-deal-item-price {
	display: flex;
	flex-direction: column;
	margin: 4px 0 6px;
}

.lala-deal-item-price-sale {
	font-size: 12px;
	font-weight: 700;
	color: #ee4d2d;
}

.lala-deal-item-price-regular {
	font-size: 10px;
	color: #999;
	text-decoration: line-through;
}

.lala-deal-item-badge-free {
	display: inline-block;
	margin: 4px 0 6px;
	font-size: 11px;
	font-weight: 700;
	color: #26aa26;
}

/* <select> chon phan loai + dong "Con lai: X" tren the qua tang (Gift) - dung
   chung style voi the mua kem cua Addon (.lala-addon-bundle-variant-select/
   .lala-addon-bundle-stock-note) cho dong bo giao dien giua 2 widget. */
.lala-gift-item-variant-select {
	width: 100%;
	font-size: 10px;
	padding: 2px 3px;
	margin-bottom: 4px;
	border: 1px solid #ee4d2d;
	border-radius: 3px;
	background: #fafafa;
	color: #ee4d2d;
}

.lala-deal-item-stock-note {
	display: block;
	font-size: 10px;
	color: #ee4d2d;
	margin-top: 2px;
}

.lala-deal-item-stock-note.is-hidden {
	display: none;
}

@media (max-width: 480px) {
	.lala-deal-item {
		flex-basis: 92px;
		width: 92px;
	}
}

/* Bo sung ngay 2026-07-30 (theo yeu cau nguoi dung): widget Gift gio DUNG
   CHUNG voi Addon 3 thanh phan - checkbox (.lala-addon-bundle-checkbox-wrap/
   -checkbox), bo dem so luong (.lala-addon-bundle-qty, xem quy uoc scale o
   khoi CSS "Bundle kieu Shopee" ben duoi) va dong canh bao han muc
   (.lala-addon-bundle-limit-note) + nut mua gop (.lala-addon-bundle-buy-btn) -
   CHI can chinh lai ty le/khoang cach cho vua khung the ".lala-deal-item" hep
   hon (110px, so voi 130px cua ".lala-addon-bundle-item") va vi tri dat TRUC
   TIEP trong ".lala-deal-widget" (khac Addon, dat trong ".lala-addon-bundle-summary"
   da co san khoang cach/can le rieng).
*/
.lala-deal-item .lala-addon-bundle-qty {
	transform: scale( .75 );
}

.lala-deal-widget .lala-addon-bundle-limit-note {
	margin-top: 10px;
}

.lala-deal-widget .lala-gift-select-btn {
	width: 100%;
	margin-top: 10px;
	justify-content: center;
}

/* ======================================================================
   Bundle kieu Shopee cho widget Addon (Lala_Promo_Addon_Storefront::render_bundle_row())
   - the noi dau "+" + checkbox + khung tong tien/nut mua gop. Chi dung khi SP
   dang xem la SP don gian (xem han che o docblock dau class PHP). Widget Gift
   cung dung lai 1 phan cua khoi CSS nay (checkbox/bo dem so luong/dong canh
   bao han muc/nut mua gop - xem ghi chu rieng o tren), KHONG dung phan
   ".lala-addon-bundle-row"/"-summary" (khong co khai niem "Tong cong" vi qua
   tang luon mien phi).
   ====================================================================== */
.lala-addon-bundle {
	display: flex;
	align-items: stretch;
	gap: 16px;
	flex-wrap: wrap;
}

.lala-addon-bundle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 320px;
}

.lala-addon-bundle-plus {
	font-size: 20px;
	font-weight: 700;
	color: #ccc;
	flex: 0 0 auto;
}

.lala-addon-bundle-item {
	position: relative;
	flex: 0 0 130px;
	width: 130px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 8px;
	text-align: center;
	box-sizing: border-box;
}

.lala-addon-bundle-item.is-trigger {
	border-color: #ffcfc2;
}

.lala-addon-bundle-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: #ee4d2d;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 0 6px 0 6px;
}

.lala-addon-bundle-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: #ee4d2d;
	border: 1px solid #ee4d2d;
	border-radius: 3px;
	padding: 1px 4px;
	margin-bottom: 4px;
}

.lala-addon-bundle-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: #f8f8f8;
	margin-bottom: 6px;
}

.lala-addon-bundle-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lala-addon-bundle-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lala-addon-bundle-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.35;
	color: #333;
	text-decoration: none;
	min-height: 30px;
}

.lala-addon-bundle-variant-select {
	width: 100%;
	font-size: 10px;
	padding: 2px 3px;
	border: 1px solid #ee4d2d;
	border-radius: 3px;
	background: #fafafa;
	color: #ee4d2d;
}

.lala-addon-bundle-variant-label {
	font-size: 10px;
	color: #888;
}

.lala-addon-bundle-price {
	display: flex;
	flex-direction: column;
}

.lala-addon-bundle-price-sale {
	font-size: 13px;
	font-weight: 700;
	color: #ee4d2d;
}

.lala-addon-bundle-price-regular {
	font-size: 10px;
	color: #999;
	text-decoration: line-through;
}

.lala-addon-bundle-stock-note {
	display: block;
	font-size: 10px;
	color: #ee4d2d;
	margin-top: 2px;
}

/* Bo dem so luong "- 1 +" tren tung the (trigger lan mua kem) - bo sung ngay
   2026-07-29 theo yeu cau nguoi dung (kem anh mau). Doi sang dung DUNG
   markup+class co san cua bo dem so luong Flatsome (.ux-quantity/.quantity/
   .buttons_added/.plus/.minus/.qty - xem woocommerce/global/quantity-input.php
   cua theme cha va Lala_Promo_Addon_Storefront::render_qty_stepper()) nen
   KHONG tu viet CSS rieng cho nut/o so nua - CHI can 1 chut chinh vi tri/kich
   thuoc de vua khung the hep 130px (flatsome-shop.css dinh san cho form San
   pham/gio hang, rong hon nhieu so voi 1 the trong day bundle nay). */
.lala-addon-bundle-qty {
	margin-top: 6px;
	transform: scale( .85 );
	transform-origin: center;
}

.lala-addon-bundle-checkbox-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 6px;
	cursor: pointer;
}

.lala-addon-bundle-item.is-trigger .lala-addon-bundle-checkbox-wrap {
	cursor: default;
}

.lala-addon-bundle-checkbox {
	accent-color: #ee4d2d;
	width: 15px;
	height: 15px;
	margin: 0;
}

.lala-addon-bundle-checkbox-label {
	font-size: 9px;
	color: #999;
}

/* Khung tong tien + nut mua gop */
.lala-addon-bundle-summary {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	padding-left: 16px;
	border-left: 1px solid #f0f0f0;
	text-align: right;
}

.lala-addon-bundle-summary-line {
	font-size: 13px;
	color: #333;
}

.lala-addon-bundle-summary-regular {
	color: #999;
	text-decoration: line-through;
	font-size: 12px;
	margin-right: 4px;
}

.lala-addon-bundle-summary-sale {
	color: #ee4d2d;
	font-weight: 700;
	font-size: 16px;
}

.lala-addon-bundle-summary-save {
	font-size: 12px;
	color: #ee4d2d;
}

.lala-addon-bundle-limit-note {
	font-size: 11px;
	line-height: 1.4;
	color: #a35a00;
	background: #fff6e5;
	border: 1px solid #ffe1a8;
	border-radius: 4px;
	padding: 6px 8px;
	text-align: left;
}

.lala-addon-bundle-buy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 4px;
	border: 1px solid #ee4d2d;
	background: #fff;
	color: #ee4d2d;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.lala-addon-bundle-buy-btn:hover {
	background: #ee4d2d;
	color: #fff;
}

.lala-addon-bundle-buy-btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

.lala-addon-bundle-badge.is-hidden,
.lala-addon-bundle-price-regular.is-hidden,
.lala-addon-bundle-stock-note.is-hidden,
.lala-addon-bundle-summary-regular.is-hidden,
.lala-addon-bundle-summary-save.is-hidden {
	display: none;
}

@media (max-width: 768px) {
	.lala-addon-bundle-summary {
		flex-basis: 100%;
		align-items: stretch;
		text-align: left;
		border-left: none;
		border-top: 1px solid #f0f0f0;
		padding-left: 0;
		padding-top: 12px;
		margin-top: 8px;
	}

	.lala-addon-bundle-buy-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.lala-addon-bundle-item {
		flex-basis: 108px;
		width: 108px;
	}
}

/* Khoi gop "Mua kem deal soc" tren trang gio hang (cart.php cua theme
   "bacninhit", ham lala_cart_render_addon_bundle_group(), bo sung ngay
   2026-07-29 theo yeu cau nguoi dung) - gop 1 SP CHINH + cac SP mua kem DANG
   duoc ap gia uu dai thanh 1 .custom-cart-item DUY NHAT thay vi nhieu dong
   rieng le. .custom-cart-item mac dinh la 1 hang ngang (display:flex, xem
   main.css) - doi rieng bien the nay sang xep COT DOC de xep tieu de len
   tren, danh sach SP xuong duoi. */
.custom-cart-item.lala-addon-bundle-cart-group {
	flex-direction: column;
	align-items: stretch;
}

.lala-addon-bundle-cart-group-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #ee4d2d;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ffcfc2;
}

.lala-addon-bundle-cart-group-items {
	display: flex;
	flex-direction: column;
}

/* Tai tao lai dung bo cuc hang ngang (checkbox/anh/chi tiet/nut xoa) von co
   san cho MOI .custom-cart-item binh thuong (xem main.css) - ap dung rieng
   cho TUNG SP con ben trong khoi gop, vi ban than .custom-cart-item bao ngoai
   gio da doi sang xep cot (xem tren). QUAN TRONG: "position: relative" o day
   de .item-remove (position:absolute, xem main.css) dinh vi theo DUNG SP con
   nay, KHONG theo ca khoi gop (neu khong moi nut "Xoa" cua tung SP se chong
   len nhau dung 1 goc cua ca khoi). */
.lala-addon-bundle-cart-subitem {
	display: flex;
	align-items: center;
	position: relative;
	padding: 12px 0;
}

.lala-addon-bundle-cart-subitem + .lala-addon-bundle-cart-subitem {
	border-top: 1px solid #f2f2f2;
}

/* Nhan cam "Deal Sốc" truoc moi dong SP mua kem (khong co checkbox rieng,
   theo dung anh mau Shopee nguoi dung gui) - dung lai DUNG class
   .lala-addon-bundle-tag da co san (xem render_reward_card()), chi ghi de vai
   thuoc tinh khoang cach cho hop boi canh nam trong 1 hang flex thay vi 1
   khoi doc tren the san pham. */
.lala-addon-bundle-cart-tag {
	flex: 0 0 auto;
	align-self: center;
	margin: 0 10px 0 0;
	white-space: nowrap;
}

@media (max-width: 549px) {
	.lala-addon-bundle-cart-subitem {
		flex-wrap: wrap;
	}

	.lala-addon-bundle-cart-subitem.is-reward {
		padding-left: 0;
	}
}