/*
 * Giao dien phan cua hang: the san pham trong danh sach, thanh loc, trang chi
 * tiet san pham va dropdown gio hang tren header.
 *
 * File nay nap o MOI trang (xem inc/shop.php) vi dropdown gio hang nam trong
 * header, khong the gioi han theo dieu kien trang nhu cart.css hay quick-buy.css.
 */

/*
 * Mau thuong hieu — do truc tiep tren site bang getComputedStyle tu khoi CSS
 * Flatsome tu sinh, khong phai mau doan tu anh mockup:
 *   primary   #3e8b08  (.primary.is-outline:hover{border-color})
 *   secondary #dd5726  (.button.secondary:not(.is-outline){background-color})
 * Khai bao MOT LAN o day — file nay nap o moi trang nen quick-buy.css va
 * cart.css deu dung lai duoc bien nay, khong can dinh nghia lai.
 */
:root {
	--bioseed-primary: #3e8b08;
	--bioseed-primary-dark: #2f6b06;
	--bioseed-secondary: #dd5726;
	/* Do cua nhan phan tram giam. Co y KHAC secondary (#dd5726, thien cam): nhan
	   nam ngay canh so tien mau secondary, cung tong mau thi hai thu dinh vao nhau
	   thanh mot mang. */
	--bioseed-sale: #e02b20;
}

/* ============================================================
   1. The san pham trong danh sach
   ============================================================ */

/*
 * Hai nut phai nam cung mot hang. Truoc do chung tran ra 305px trong o rong
 * 269px nen bi day xuong hai dong: Flatsome dat font-size 14.7px,
 * text-transform:uppercase va margin-right:1em cho moi .button — ca ba deu lam
 * nut phinh ra. Chan het o day roi cho hai nut chia deu chieu ngang.
 */
.bioseed-loop-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.bioseed-loop-actions .button {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 9px 6px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

/*
 * "+ Them vao Don": chi vien va chu mau primary, khong do nen.
 * Phai ghi de ca trang thai :hover cua Flatsome (nut .button mac dinh doi nen
 * khi hover) nen liet ke ro tung trang thai thay vi trong cho ke thua.
 */
.bioseed-loop-actions .bioseed-add-to-cart {
	border: 1px solid var(--bioseed-primary);
	background: transparent;
	color: var(--bioseed-primary);
}
.bioseed-loop-actions .bioseed-add-to-cart:hover,
.bioseed-loop-actions .bioseed-add-to-cart:focus {
	background: var(--bioseed-primary);
	color: #fff;
}

/*
 * Sau khi them vao gio bang AJAX, WooCommerce chen them link "Xem don hang →"
 * ngay sau nut — no tro thanh phan tu flex thu ba va bop hai nut kia lai.
 * Cho no chiem tron mot dong rieng ben duoi.
 */
.bioseed-loop-actions .added_to_cart {
	flex: 1 1 100%;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: none;
	text-align: center;
}

/* Gia: in dam, mau secondary. Gia gach bo cua hang giam gia van giu mau nhat. */
.product-small .price-wrapper .price,
.product-small .price-wrapper .price ins,
.product-small .price-wrapper .price ins .amount,
.product-small .price-wrapper .price > .amount {
	font-weight: 700;
	color: var(--bioseed-secondary);
}
.product-small .price-wrapper .price del,
.product-small .price-wrapper .price del .amount {
	font-weight: 400;
	color: #9a9a9a;
}

/*
 * Badge "Giam gia!" to hon han badge "Moi" vi Flatsome chi them class .is-small
 * (font-size:.8em) cho badge moi, con badge giam gia thi ke thua co chu goc
 * 15.2px. Cho hai badge cung co chu.
 */
.badge-container .badge-inner.on-sale {
	font-size: .8em;
}

/*
 * Chieu cao card deu nhau du tieu de dai ngan khac nhau.
 *
 * Chuoi flex phai xuyen suot tu .col-inner (Flatsome da cho no het chieu cao
 * cot qua .products.row) xuong den .box-text: thieu mot mat xich la card lai
 * cao theo noi dung nhu cu.
 */
.products.row .product-small.col {
	display: flex;
}
.products.row .product-small.col .col-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.products.row .product-small.box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.products.row .box-text-products {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/*
 * Tieu de: giu cho co dinh 2 dong, dai hon thi cat bang dau ba cham. Nho vay
 * gia va nut luon nam cung mot do cao giua cac card, khong so le theo ten
 * san pham dai ngan.
 */
.products.row .product-title.woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
	line-height: 1.3em;
}

/*
 * Hang sao danh gia: khong phai san pham nao cung co, nhung phai chua cho san
 * de dong gia/nut van thang hang giua cac card co va khong co danh gia.
 */
.products.row .price-wrapper .star-rating--inline {
	min-height: 1.2em;
}

/* Day hang nut xuong sat day card, du khoi tieu de/gia phia tren cao thap khac nhau. */
.products.row .bioseed-loop-actions {
	margin-top: auto;
}

/* ============================================================
   2. Thanh loc / sap xep phia tren danh sach
   ============================================================ */

.woocommerce-result-count,
.woocommerce-ordering select.orderby {
	font-size: .85em;
}

/* ============================================================
   3. Stepper so luong (dung chung trang gio hang va trang chi tiet)
   ============================================================ */

/*
 * Mot dinh nghia duy nhat cho ca hai noi — trang gio hang (/cart/) va trang chi
 * tiet san pham dung cung mot markup .quantity cua WooCommerce.
 *
 * Hai nut la <input type="button"> nen khop selector
 * ".button, button, input[type=button], ..." cua flatsome.css, selector do dat
 * min-height:2.5em (~40px). min-height LUON thang height, nen neu chi khai
 * height:35px thi nut van render ra ~42.5px. Phai khai ca min-width/min-height.
 */
/*
 * Phai viet "div.quantity" chu khong phai ".quantity". Mini cart trong dropdown
 * gio hang cung dung class do cho dong "2 × 150.000 ₫", nhung la mot <span> —
 * ma dropdown do co mat tren MOI trang, ke ca trang chi tiet san pham, nen
 * ".single-product .quantity" se voi sang no va bien dong gia thanh flex. Chi
 * khung stepper that su moi la <div>.
 */
.woocommerce-cart-form div.quantity,
.single-product div.quantity {
	display: inline-flex;
	align-items: center;
	/* Ba phan tu dinh lien nhau thanh MOT khoi vien thuoc: hai dau bo tron, hai
	   moi noi o giua vuong. Khong dat gap — co khe ho thi khong con la mot khoi. */
	gap: 0;
}
.woocommerce-cart-form .quantity .minus.button,
.woocommerce-cart-form .quantity .plus.button,
.single-product .quantity .minus.button,
.single-product .quantity .plus.button {
	flex: 0 0 auto;
	width: 35px;
	min-width: 35px;
	height: 35px;
	min-height: 35px;
	margin: 0;
	padding: 0;
	border: 0;
	/*
	 * KHONG dung !important o day, va do la co y. flatsome-shop.css bo bon goc
	 * PHIA TRONG cua hai nut bang !important
	 * (".quantity .button.minus{border-top-right-radius:0!important; ...}").
	 * De nguyen nhu vay thi 50% chi con an o hai dau ngoai, dung hinh vien thuoc
	 * cat doi ma thiet ke can. Neu ep !important len ca bon goc thi hai nut
	 * thanh hai hinh tron roi, khong con lien khoi voi o nhap o giua.
	 */
	border-radius: 50%;
	background: #1e7145;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	/*
	 * Flatsome dat text-shadow:#fff 1px 1px 1px cho moi nut .is-form (vien
	 * "khac chim" tren nen sang). Nut nay nen xanh dam + chu trang nen quang
	 * trang do thanh vet nhoe quanh dau +/- thay vi lam chu ro hon. Tat han.
	 */
	text-shadow: none;
}
.woocommerce-cart-form .quantity .minus.button:hover,
.woocommerce-cart-form .quantity .plus.button:hover,
.single-product .quantity .minus.button:hover,
.single-product .quantity .plus.button:hover {
	background: #155734;
}
.woocommerce-cart-form .quantity input.qty,
.single-product .quantity input.qty {
	width: 72px;
	/*
	 * flatsome-shop.css dat ".quantity input[type=number]{max-width:2.5em;
	 * width:2.5em}". max-width LUON thang width — cung ho loi voi min-height o
	 * hai nut — nen neu chi khai width:72px thi o nhap van bi bop con 38px.
	 * Phai go max-width truoc. Vien bo goc cung bi bo bang !important o do.
	 */
	max-width: none;
	height: 35px;
	min-height: 35px;
	margin: 0;
	padding: 0;
	/* Doan giua cua vien thuoc: vuong bon goc, chi co vien tren va duoi de khong
	   ve hai vach doc ngay cho tiep giap voi hai nut xanh. */
	border: 1px solid #e3e6ea;
	border-left: 0;
	border-right: 0;
	background: #f7f8fa;
	box-shadow: none;
	text-align: center;
}

/* ============================================================
   4. Trang chi tiet san pham
   ============================================================ */

/*
 * Ba nut mua hang: "+ Them vao Don", "Mua ngay" va "Mua tai ..." (san pham
 * lien ket ngoai). Ca ba deu la .single_add_to_cart_button hoac
 * .bioseed-buy-now--single.
 */
/*
 * Them class .button vao selector de nang do dac hieu len (0,3,0). Khong co no
 * thi selector chi bang diem voi ".quantity + .button{font-size:1em}" cua
 * flatsome-shop.css — ma file do nap SAU shop.css nen thang khi bang diem, va
 * nut "+ Them vao Don" van giu co chu 15,2px.
 */
.single-product .single_add_to_cart_button.button,
.single-product .bioseed-buy-now--single.button {
	padding: 11px 18px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Gia tren trang chi tiet: so tien dang ban mau secondary, gia goc gach bo mau
 * xam nhat. Bam vao class .product-page-price chu khong phai ".single-product
 * .price" — class body do con trum ca cac the san pham lien quan phia duoi trang.
 */
.price.product-page-price,
.price.product-page-price ins,
.price.product-page-price ins .amount,
.price.product-page-price > .amount,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .price ins,
.single-product .woocommerce-variation-price .price .amount {
	color: var(--bioseed-secondary);
	font-weight: 700;
	/* <ins> mac dinh cua trinh duyet co gach chan — o day no de bi doc nham thanh
	   gia bi gach bo, dung nguoc y nghia. */
	text-decoration: none;
}
.price.product-page-price del,
.price.product-page-price del .amount,
.single-product .woocommerce-variation-price .price del,
.single-product .woocommerce-variation-price .price del .amount {
	color: #9a9a9a;
	font-weight: 400;
}

/* Nhan "-39%" gan sau gia da giam (xem inc/sale-percent.php). */
.bioseed-sale-percent {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--bioseed-sale);
	color: #fff;
	font-size: .7em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	vertical-align: middle;
	/* "-39%" khong bao gio duoc tach dong giua dau tru va con so. */
	white-space: nowrap;
}

/* Khoi CTA duoi cung trang san pham (xem inc/product-cta.php). */
.bioseed-product-cta {
	margin-top: 30px;
}

/* Tab "Mo ta" / "Danh gia": chu to hon va cach nhau rong hon. */
.product-tabs.wc-tabs > li > a {
	font-size: 16px;
	font-weight: 600;
}
.product-tabs.wc-tabs > li {
	margin-right: 34px;
}
.product-tabs.wc-tabs > li:last-child {
	margin-right: 0;
}

/* ============================================================
   5. Dropdown gio hang tren header
   ============================================================ */

/*
 * Dung selector .widget_shopping_cart de trung ca hai kieu hien thi cua
 * Flatsome: dropdown xo xuong khi hover tren desktop va panel truot ra
 * (#cart-popup) khi bam icon — ca hai deu boc trong phan tu co class nay.
 */
.widget_shopping_cart .cart-popup-inner {
	/* Rong hon de hai nut du cho nam cung mot hang, khong bi xuong dong. */
	min-width: 330px;
}
.widget_shopping_cart .mini_cart_item a:not(.remove) {
	font-size: 13px;
	line-height: 1.4;
}
.widget_shopping_cart .mini_cart_item .quantity {
	font-size: 12px;
}

/* "Tam tinh" ben trai, so tien ben phai. */
.widget_shopping_cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
}
.widget_shopping_cart .woocommerce-mini-cart__total strong {
	font-weight: 600;
}
.widget_shopping_cart .woocommerce-mini-cart__total .amount {
	font-weight: 700;
	color: var(--bioseed-secondary);
	white-space: nowrap;
}

.widget_shopping_cart .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 8px;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 10px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: capitalize;
	white-space: nowrap;
}
/*
 * Nut dau ("Xem don hang") chi co vien; nut thu hai mang them class .checkout
 * nen loai no ra bang :not(.checkout) thay vi dua vao thu tu phan tu.
 *
 * Phai them ca .wc-forward vao selector. Flatsome tu sinh mot khoi <style> ngay
 * trong <head> voi quy tac
 * ".button.wc-forward:not(.checkout):not(.checkout-button){background-color:#3e8b08}"
 * — do dac hieu (0,4,0), y het selector nay neu thieu .wc-forward, va khoi
 * <style> do nam SAU the <link> cua shop.css nen thang khi hoa. Hau qua do duoc
 * tren trinh duyet: chu mau primary nam tren nen cung mau primary, nut bien mat.
 */
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
	border: 1px solid var(--bioseed-primary);
	background: transparent;
	color: var(--bioseed-primary);
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
	background: var(--bioseed-primary);
	color: #fff;
}

@media (max-width: 549px) {
	.widget_shopping_cart .cart-popup-inner {
		min-width: 0;
	}

	/*
	 * Danh sach chuyen sang 2 cot nen o chua nut chi con ~163px, moi nut duoc
	 * 75px trong khi "+ Them vao Don" can 98px tren mot dong — do that tren man
	 * hinh 375px, chu tran ra ngoai nut. Cho chu xuong dong trong nut de hai nut
	 * van dung canh nhau tren cung mot hang thay vi phai xep chong len nhau.
	 */
	.bioseed-loop-actions .button {
		padding: 7px 4px;
		white-space: normal;
	}
}