/* ==========================================================================
   LUOI SAN PHAM DUNG CHUNG - GIAO DIEN 1                      01/09/2026
   ==========================================================================
   Khoi <div class="row category-child"> xuat hien o RAT NHIEU trang cua giao
   dien 1: danh muc san pham, ket qua tim kiem, trang thuong hieu, "mua nhieu
   nhat", "moi nhat", phu tung, xe khac, xe can bang... Hai loi ben duoi vi
   the cung xuat hien o tat ca nhung trang do, nen luat sua nam o tep rieng
   duoc nap o MOI trang, thay vi chep lai trong tung tep css cua tung trang.
   ========================================================================== */

/* ---- Anh san pham: giu dung ti le, khong bop meo -------------------------
   Anh thumb that la 450x337 (4:3). Ban truoc dat width/height = 260x260 tren
   the <img> nen trinh duyet keo cho vua o vuong -> xe bi bop. Nay khung giu
   ti le 4/3 va anh dung object-fit:contain (thu gon vua khung, KHONG cat va
   KHONG keo gian). aspect-ratio giu cho san nen bo cuc khong nhay khi anh ve;
   trinh duyet cu khong hieu aspect-ratio thi roi ve chieu cao co dinh o duoi. */
.row.category-child .product-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.row.category-child .product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@supports not (aspect-ratio: 4 / 3) {
	.row.category-child .product-image { height: 200px; }
}

/* ---- Luoi san pham deu hang -------------------------------------------
   .product la cot float cua Bootstrap 3: the nao cao hon (ten san pham dai 2
   dong) se chan the sau no lai, tao ra nhung lo trong giua luoi. Doi ca hang
   sang flex-wrap thi moi hang tu cao bang nhau va khong the ket lai duoc. */
.row.category-child {
	display: flex;
	flex-wrap: wrap;
}

.row.category-child > .product {
	float: none;
	display: flex;
	flex-direction: column;
	/* min-width:0 la BAT BUOC khi doi cot Bootstrap thanh muc flex: mac dinh
	   muc flex co min-width:auto, tuc KHONG duoc co lai nho hon noi dung ben
	   trong no. Ten san pham dai hoac dong gia khong ngat duoc se day cot
	   phinh to hon 25% ma no khai bao. Do duoc dung loi do o 992px:
	   .row.category-child rong 965px nhung scrollWidth 1036px - ca trang tu
	   nhien cuon ngang duoc 50px. */
	min-width: 0;
}

/* Phan chu trong the gian ra het chieu cao con lai, nho vay dong gia luon
   nam SAT DAY the du ten san pham dai 1 hay 3 dong - truoc day ten ngan thi
   gia treo lung chung, nhin nhu cac the bi lech nhau. */
.row.category-child > .product > .product-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.row.category-child > .product > .product-info .priceInfo { margin-top: auto; }

/* ==========================================================================
   THE SAN PHAM CAO BANG NHAU - MOI TRANG, MOI BE RONG        02/09/2026
   ==========================================================================
   Yeu cau: "khac phuc triet de loi cao thap lech, keo tu 500 len 1366 khong
   bi nua". Do tren trang chu o 1366px: hang 6 san pham co 4 the cao 341px va
   2 the cuoi cao 321px - dung 2 the cuoi cung, ngay tren hang logo thuong
   hieu, dung nhu bao cao.

   BA NGUON GAY LECH, xu ly ca ba:

   1. DONG "GIA CU" LUC CO LUC KHONG. The <span class="old-price"> chi co chu
      khi san pham that su co gia goc; khong co thi the van duoc in ra nhung
      RONG -> khong sinh dong nao -> the thap di dung mot dong (do duoc:
      priceInfo 41px so voi 20px, lech 21px). Day chinh la 20px chenh o tren.
      Cach chua: the rong van chiem dung mot dong (dau cach cung).

   2. TEN SAN PHAM 1 HAY 2 DONG. Ten dai ngan khac nhau thi khoi chu cao thap
      khac nhau. Cach chua: ten luon chiem dung 2 dong - ngan hon thi de
      trong, dai hon thi cat bang dau "..." (chu van nam nguyen trong HTML
      nen bo may tim kiem doc du, va the <a> co san thuoc tinh title).

   3. HANG VAN LA FLOAT CUA BOOTSTRAP 3. Chi rieng .row.category-child da
      duoc doi sang flex (phan tren tep nay); cac hang o TRANG CHU chi mang
      lop .row tran nen van la float - the nao cao hon se chan the sau no,
      tao lo trong giua luoi. Cach chua: moi hang CO CHUA the .product deu
      thanh flex-wrap, khong chi .row.category-child.

   Sau ba viec nay moi the trong cung mot hang cao bang nhau o MOI be rong,
   nen cac duong ke giua cac o noi lien mach thay vi gay khuc.

   :has() chay tren moi trinh duyet hien hanh (du an da dung o
   css/rieng/chi-tiet-sp.css va css/chung/dap-ung.css). Trinh duyet qua cu
   khong hieu thi bo qua ca luat - luc do muc 1 va 2 van con tac dung, tuc
   van deu hon han ban cu, khong vo bo cuc.
   ========================================================================== */

/* ---- 3. Hang san pham: flex thay vi float ---- */
.row:has(> .product) {
	display: flex;
	flex-wrap: wrap;
}

.row:has(> .product) > .product {
	float: none;
	display: flex;
	flex-direction: column;
	min-width: 0;   /* xem ghi chu o luat .row.category-child > .product tren */
}

.row:has(> .product) > .product > .product-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Gia luon nam sat day the (giong luat da co cho .row.category-child). */
.row:has(> .product) > .product > .product-info .priceInfo { margin-top: auto; }

/* ---- 1. Dong "gia cu" luon chiem mot dong, ke ca khi rong ---- */
.product .product-info .old-price { display: block; }

.product .product-info .old-price:empty::before {
	content: "\00a0";   /* dau cach cung - sinh dong nhung khong hien chu */
}

/* ---- 2. Ten san pham luon dung 2 dong ---- */
.product .product-info h6 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* min-height = 2 dong: ten mot dong van chiem cho cua hai dong, nho vay
	   the ngan the dai deu cao bang nhau. 2.4em tinh theo line-height 1.2 cua
	   chinh the <h6>. */
	min-height: 2.4em;
	line-height: 1.2;
}

/* Cung ly do min-width:0 o tren, ap cho ca khoi chu ben trong the: no cung
   la mot muc flex (cua chinh the san pham). */
.row.category-child > .product > .product-info,
.row:has(> .product) > .product > .product-info { min-width: 0; }

/* ==========================================================================
   KHUNG ANH: BE RONG QUYET DINH CHIEU CAO, KHONG NGUOC LAI    02/09/2026
   ==========================================================================
   Loi do duoc o DUNG DAI 992-1199px: ca trang cuon ngang duoc 50px.

   Nguyen nhan la hai luat danh nhau. css/ke-thua/responsive.css, trong khoi
   @media (min-width:992px) and (max-width:1199px), khoa cung chieu cao khung
   anh:   .category-child .product .product-image { min-height:230px;
   max-height:230px }. Con tep nay dat aspect-ratio: 4/3. Khi mot hop co
   aspect-ratio ma CHIEU CAO bi khoa cung con be rong de "auto", trinh duyet
   suy nguoc: rong = 230 x 4/3 = 306,7px - trong khi cot chi rong 241px. Khung
   anh tran ra ngoai cot 65px, nhan voi cot cuoi cua hang la ca trang thua
   ra 50px de cuon ngang.

   Chua bang cach ghim be rong = 100% cot va tra chieu cao ve auto, de
   aspect-ratio tinh XUOI (rong -> cao) dung nhu y dinh. Tien the ap cho ca
   luoi o trang chu, de moi khung anh trong site deu mot ti le.

   Tien to "body" la de thang do uu tien: luat cu o responsive.css cung ba
   lop nhu luat nay, ma responsive.css duoc nap SAU tep nay (xem thu tu trong
   library/tai-nguyen.php) nen hoa nhau la no thang. */
body .row.category-child .product-image,
body .row:has(> .product) > .product .product-image {
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body .row.category-child .product-image img,
body .row:has(> .product) > .product .product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Trinh duyet khong ho tro aspect-ratio: quay ve chieu cao co dinh nhu cu,
   khong de "auto" (anh moi ve se lam nhay bo cuc). */
@supports not (aspect-ratio: 4 / 3) {
	body .row.category-child .product-image,
	body .row:has(> .product) > .product .product-image { height: 200px; }
}