/* ==========================================================================
   Trang danh muc san pham - GIAO DIEN 1                      01/09/2026
   ==========================================================================
   Chi nap o trang danh muc (xem library/header.php: if ($page == 'news_cate')).
   Gom 2 phan: thanh 4 o loc moi + bo phan trang dung chung voi giao dien 3
   (gd3_render_cate_pagination in ra class .gd3-category-pagination /
   .page-item / .page-link, ma CSS cua giao dien 3 khong duoc nap o day nen
   phai to lai o duoi).
   ========================================================================== */

/* ==========================================================================
   DAU TRANG DANH MUC: NAM KHOI, MOT LE, MOT NHIP           02/09/2026
   ==========================================================================
   Nam khoi tren cung, theo thu tu:
     [1] duong dan (.breadcrumbs)
     [2] <h1> + nut chia se (.dm-dau)
     [3] hang danh muc con (.dm-con-boc)
     [4] thanh 4 o loc (.dm-loc-boc)
     [5] anh banner (.padding-add)

   TRUOC KHI SUA, do duoc tren man hinh 500px:
     le trai:      25px / 10px / 10px / 20px / 10px   -> ba muc khac nhau
     khoang cach:   0px /  6px / 16px / 54px          -> khong theo nhip nao
   Tren 1366px cung so le 3px va khoang cach 10/6/10/30.

   Nguyen nhan la moi khoi nam o mot do sau khac nhau trong he thong cot
   Bootstrap, moi cap ".col-*" cong them 10px padding. Da go bot cac lop boc
   thua o library/template.php; khoi nay chot lai phan con lai.

   Moc chuan la mep trong cua <section class="main-content"> - cung mep voi
   luoi san pham ben duoi, nen ca trang thang mot hang doc.
   ========================================================================== */
.dm-dau,
.dm-con-boc,
.dm-loc-boc,
.padding-add {
	margin-left: 0;
	margin-right: 0;
}

/* Duong dan: duong-dan.php in ra ".row content > .col-lg-12", ma ".row" cua
   Bootstrap co le am -10px con ".col" co padding 10px - triet tieu nhau nen
   khong can chinh be ngang. Chi can go bo khoang cach doc bat thuong:
   style.css dat margin-top 15px + padding 8px cho .links-breadcrumbs, con
   .breadcrumbs lai keo nguoc len -10px. Cong lai ra mot khoang le khong
   giong bat ky khe nao khac tren trang. */
/* Tien to "body" la bat buoc: css/dap-ung.css co luat
   "body .breadcrumbs { margin: 0; padding: 0 }" trong khoi @media 767px.
   Viet ".breadcrumbs" tran o day thi thua ve do uu tien va khe duoi khong
   bao gio xuat hien - da do duoc dung 0px. */
body .breadcrumbs {
	margin-top: 0;
	margin-bottom: 8px;
}

/* library/duong-dan.php in ra ".row content > .col-lg-12". Cot do cong them
   10px padding, con ".row" thi khong co le am nao trong giao dien nay - nen
   hang duong dan thut vao so voi cac khoi khac. Go padding di; be rong
   dung do <section class="main-content"> ben ngoai quyet dinh, giong het
   bon khoi con lai (duong dan da duoc chuyen VAO trong section do - xem
   library/template.php). */
section.main-content > .row.content > .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
}

body .breadcrumbs .links-breadcrumbs {
	margin-top: 0;
	padding: 6px 0 8px;
}

/* Nhip doc: 10px giua cac khoi, rieng truoc anh banner 14px cho no tho ra
   mot chut (anh la khoi to nhat, sat qua thi thanh loc nhu dinh vao anh). */
/* Nhip doc dat ngay tai luat goc cua tung khoi (tim ".dm-dau {" va
   ".dm-con-boc {" ben duoi), khong dat o day: luat viet sau trong cung mot
   tep se de len luat viet truoc, va da mac dung loi do - ".dm-dau" o duoi
   con giu "margin: 0 0 6px" nen khe 10px o day khong bao gio co tac dung. */
.dm-loc-boc { margin-bottom: 14px; }

/* <h1> cao 20px trong khi hang nut chia se ben canh cao 34px - ten danh muc,
   thu quan trong nhat cua trang, lai nho hon may cai nut chia se. Nang len
   cho can, van du cho de ten dai khong day nut xuong dong. */
body .dm-dau .headCategoryTitle {
	font-size: 22px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	body .dm-dau .headCategoryTitle { font-size: 19px; }
	.dm-loc-boc { margin-bottom: 12px; }
}

/* ---- Thanh bo loc ------------------------------------------------------ */

.dm-loc {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin: 0;
	padding: 0;
}

/* Tu 02/09/2026 khong con nhan chu ("Hang xe", "Quang duong"...) ben tren
   moi o - ten cua o da nam ngay trong lua chon dau tien ("Tat ca hang",
   "Moi quang duong", "Moi muc gia") nen dong nhan chi lap lai mot lan nua.
   Rieng o "Sap xep" thi lua chon dau la "Ban chay", khong tu noi len no la
   o sap xep - bu lai bang thuoc tinh title tren chinh o do.

   Ten cu duoc chuyen sang aria-label cua the <select> (xem
   library/template.php): bo phan nhin thay duoc thi trinh doc man hinh van
   phai doc duoc "day la o chon hang xe", khong the de no doc tron mot chu
   "Tat ca hang".

   Khong con flex-direction:column vi khong con hai dong xep chong. */
.dm-loc-o {
	margin: 0;
	font-weight: normal;
	min-width: 0;
	flex: 1 1 190px;
	max-width: 260px;
}

/* Select thuan cua trinh duyet (khong dung chosen.js nhu ban cu): tren dien
   thoai no mo bang bo chon cua he dieu hanh - go duoc bang mot ngon tay, doc
   duoc bang trinh doc man hinh, va khong ton them JS. */
/* Tien to "body" cho MOI luat ve o select: css/cssv3.css va
   css/cssv3-custom.css duoc menu-top.php nap SAU tep nay va co luat
   "select { background: ... }" xoa mat mui ten SVG dat o day - do duoc
   background-image tra ve "none" du da khai bao. Them "body" nang do uu tien
   len mot bac la du, khong phai dung !important. */
body .dm-loc-select {
	width: 100%;
	height: 36px;
	/* Chua cho mui ten ve bang CSS ben phai (xem .dm-loc-o::after). */
	padding: 0 30px 0 10px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	background: #fff;
	font-size: 13px;
	color: #333;
	line-height: 34px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	max-width: 100%;
	text-overflow: ellipsis;
}

/* Mui ten cua o select.
   appearance:none xoa mui ten mac dinh cua he dieu hanh nen phai tu ve lai,
   khong thi o select trong y het mot o nhap chu - khach khong biet la bam
   duoc. Ve bang TAM GIAC CSS (border) chu khong dat anh SVG dang data: URI:
   ban dung data: URI da thu va bi trinh duyet bo qua khai bao
   background-image do (do lai computed style tra ve "none"), ma tam giac
   border thi khong co gi de sai va cung khong ton them mot tep anh nao. */
.dm-loc-o {
	position: relative;
}

.dm-loc-o::after {
	content: "";
	position: absolute;
	right: 12px;
	/* Canh giua theo chieu cao o select. Ban truoc dat "bottom: 15px" vi con
	   dong nhan chu 17px nam ben tren; bo nhan roi thi moc do lech han. */
	top: 50%;
	margin-top: -3px;   /* nua chieu cao tam giac (6px) */
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #666;
	pointer-events: none;
}

/* ---- O "Hang xe" khi da duoc nang thanh nut + bang co o tim -------------
   js/o-chon.js an the <select> di va dat mot <button class="oc-nut"> vao
   cho no. Nut phai trong y het ba o <select> con lai, khong thi thanh loc
   nhin nhu co mot o bi hong.

   Mui ten: giu cai san co cua .dm-loc-o::after va TAT cai cua .oc-nut - hai
   cai chong len nhau se thanh hai mui ten. Khong dung :has() de tat
   .dm-loc-o::after vi trinh duyet cu (va Safari truoc 15.4) chua ho tro. */
.dm-loc-o .oc { width: 100%; }

.dm-loc-o .oc-nut {
	height: 36px;
	padding: 0 30px 0 10px;
	border-color: #d4d4d4;
	line-height: 34px;
}

.dm-loc-o .oc-nut::after { display: none; }

.dm-loc-o .oc-bang { min-width: 100%; }

body .dm-loc-select:focus {
	outline: none;
	border-color: #f5a623;
	box-shadow: 0 0 0 2px rgba(245, 166, 35, .2);
}

.dm-loc-nut {
	height: 36px;
	padding: 0 18px;
	border: none;
	border-radius: 4px;
	background: #e42527;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
}

.dm-loc-nut:hover,
.dm-loc-nut:focus {
	background: #c81d1f;
	color: #fff;
	text-decoration: none;
}

/* ---- Dong tom tat + nut xoa bo loc ------------------------------------- */

.dm-tomtat {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 0 0 8px;
	font-size: 13px;
	color: #555;
	border-bottom: 1px solid #eee;
}

.dm-tomtat-so strong {
	color: #e42527;
	font-size: 15px;
}

.dm-xoa-loc {
	color: #e42527;
	text-decoration: underline;
}

.dm-xoa-loc:hover {
	color: #c81d1f;
}

/* ---- Khong co ket qua --------------------------------------------------- */

.dm-trong {
	padding: 40px 15px;
	text-align: center;
	color: #666;
}

.dm-trong p {
	margin: 0 0 12px;
	font-size: 15px;
}

.dm-trong .dm-loc-nut {
	display: inline-block;
	line-height: 36px;
}

/* ---- Phan trang (dung chung markup voi giao dien 3) --------------------- */

.pnavigation {
	margin: 18px 0 6px;
	width: 100%;
	float: none;
}

 /* css/style.css cua giao dien 1 dat float:left cho .pagination, khien
   thanh so trang co lai vua du chu roi dat sat le trai - justify-content
   khong con tac dung vi the flex chi rong bang noi dung. Go float + cho
   rong het hang de canh giua nhu ban giao dien 3. */
.gd3-category-pagination .pagination {
	float: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bootstrap 3 (dang nap o giao dien 1) to .pagination > li > a thanh mot
   day o vuong dinh lien nhau, bo goc 2 dau - ghi de het o day de tung o
   tach roi, tron deu, giong ban cua giao dien 3. */
.gd3-category-pagination .pagination > li,
.gd3-category-pagination .pagination > li:first-child,
.gd3-category-pagination .pagination > li:last-child {
	display: block;
	float: none;
}

.gd3-category-pagination .page-link {
	display: block;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 34px;
	text-align: center;
	text-decoration: none;
	margin: 0;
}

.gd3-category-pagination .page-link:hover,
.gd3-category-pagination .page-link:focus {
	border-color: #e42527;
	color: #e42527;
	background: #fff;
	text-decoration: none;
}

.gd3-category-pagination .page-item.active .page-link,
.gd3-category-pagination .page-item.active .page-link:hover,
.gd3-category-pagination .page-item.active .page-link:focus {
	background: #e42527;
	border-color: #e42527;
	color: #fff;
	font-weight: bold;
	cursor: default;
}

.gd3-category-pagination .page-item.disabled .page-link,
.gd3-category-pagination .gd3-page-dots .page-link {
	color: #bbb;
	background: #fafafa;
	cursor: default;
}

/* ---- Dien thoai --------------------------------------------------------- */

@media (max-width: 767px) {
	.dm-loc {
		gap: 8px;
	}

	/* 2 o loc moi hang thay vi 4 o chen nhau con mot dai hep */
	.dm-loc-o {
		flex: 1 1 calc(50% - 4px);
		max-width: none;
	}

	.dm-loc-nut {
		flex: 1 1 100%;
	}

	.dm-tomtat {
		font-size: 12px;
	}

	/* Man hinh hep: giau cac so trang o XA trang dang xem, giu lai trang
	   1/trang cuoi/2 trang ke ben - dung y bo phan trang cua giao dien 3. */
	.gd3-category-pagination .gd3-page-far {
		display: none;
	}

	.gd3-category-pagination .page-link {
		min-width: 34px;
		height: 34px;
		line-height: 32px;
		padding: 0 8px;
	}
}


/* ==========================================================================
   BO SUNG 01/09/2026
   ========================================================================== */

/* ---- O "Sap xep" tach sang phai ----------------------------------------
   3 o dau la DIEU KIEN LOC (cung nut "Xoa bo loc" di kem), o thu tu la CACH
   XEM - khong cung nhom, nen day han sang le phai cho de phan biet. */
.dm-loc-sap { margin-left: auto; }

/* Nut "Xoa bo loc" nam trong hang loc, ngay sau o "Muc gia" - can day duoi
   cung hang voi cac o select (chung co nhan chu o tren nen cao hon). */
.dm-loc .dm-xoa-loc {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #f0c9c9;
	border-radius: 4px;
	background: #fff5f5;
	color: #e42527;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.dm-loc .dm-xoa-loc:hover {
	border-color: #e42527;
	background: #e42527;
	color: #fff;
	text-decoration: none;
}

/* ---- Hang danh muc con --------------------------------------------------- */
.dm-con-boc {
	position: relative;
	margin: 0 0 10px;
}

.dm-con {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	/* An thanh cuon ngang: da co 2 nut trai/phai lam viec do, ma thanh cuon
	   mac dinh cua Windows chiem han mot dai 15px duoi hang. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dm-con::-webkit-scrollbar { display: none; }

.dm-con > li { flex: 0 0 auto; margin: 0; }

.dm-con a {
	display: block;
	padding: 6px 14px;
	border: 1px solid #e2e2e2;
	border-radius: 16px;
	background: #fafafa;
	color: #444;
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
}

.dm-con a:hover,
.dm-con a:focus {
	border-color: #e42527;
	background: #fff;
	color: #e42527;
	text-decoration: none;
}

.dm-con-nut {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	color: #555;
	font-size: 11px;
	line-height: 26px;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
}

.dm-con-nut:hover { border-color: #e42527; color: #e42527; }

/* js/danh-muc.js an/hien hai nut bang thuoc tinh "hidden". Trinh duyet ap
   [hidden]{display:none} tu bang mac dinh cua no, ma bang mac dinh LUON thua
   CSS cua trang - nen o dau co luat "display: ..." cho chinh hai nut nay
   (xem khoi @media 767px ben duoi) thi "hidden" mat tac dung va nut da an
   van hien ra. Luat nay tra lai dung y nghia cua "hidden". */
.dm-con-nut[hidden] { display: none !important; }

/* ---- Chua cho cho hai nut, va ve dai mo o mep ------------------------
   Lop .dm-con-tran do js/danh-muc.js gan khi hang pill dai hon khung.

   Truoc 02/09/2026 phan chua cho nay chi co trong khoi @media 767px, nen
   tren may tinh hai nut mui ten nam DE LEN chu: muc cuoi cung ("Xe đạp
   điện AVA...") bi cat ngang giua chu va co mot cai nut tron dap len tren,
   nhin nhu hong. Nay chua cho o moi be ngang - va chi khi that su co tran,
   de danh muc chi co 3-4 nhanh con khong bi thut le vo co.

   Dai mo (::before/::after cua .dm-con-boc): mot vet chuyen tu trang sang
   trong suot rong 40px o hai mep. No lam cho chu bi cat trong nhu "con nua
   o phia sau" chu khong phai "bi cat cut". Chi hien ben nao con di tiep
   duoc - dung cung dieu kien voi cai nut ben do.
   z-index 1: duoi nut (z-index 2) de nut khong bi mo theo. */
.dm-con-boc.dm-con-tran .dm-con {
	padding-left: 34px;
	padding-right: 34px;
}

.dm-con-boc.dm-con-tran .dm-con-trai { left: 0; }
.dm-con-boc.dm-con-tran .dm-con-phai { right: 0; }

.dm-con-boc::before,
.dm-con-boc::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 40px;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;   /* khong chan cu bam vao pill nam duoi */
}

.dm-con-boc::before {
	left: 0;
	background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
}

.dm-con-boc::after {
	right: 0;
	background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
}

.dm-con-boc.dm-con-con-trai::before,
.dm-con-boc.dm-con-con-phai::after { opacity: 1; }

.dm-con-trai { left: -6px; }
.dm-con-phai { right: -6px; }

@media (max-width: 767px) {
	.dm-loc-sap { margin-left: 0; }
	.dm-loc .dm-xoa-loc { flex: 1 1 100%; justify-content: center; }
	/* 02/09/2026: TRUOC day hai nut trai/phai cua hang danh muc con bi an tren
	   man hinh hep (chi con vuot ngon tay de cuon) - nhung tren dien thoai
	   khong co gi bao cho biet hang do con keo duoc, nen phan lon nguoi dung
	   khong biet ben phai con danh muc. Nay hien ro ca hai nut; js/danh-muc.js
	   van tu an nut nao khong con cho de di. */
	.dm-con-nut {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		line-height: 1;
		box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
	}
	/* (Phan chua cho cho hai nut da chuyen len khoi .dm-con-tran o tren -
	   ap dung cho MOI be ngang, khong rieng dien thoai.) */
	.dm-con { padding-bottom: 4px; }
}

/* ==========================================================================
   BANG CHAY 3 ANH GIOI THIEU CUA DANH MUC (library/template.php)
   ==========================================================================
   Tren dien thoai hien 2 anh mot luc, co 2 nut chay vong lap vo han
   (js/danh-muc.js). Tu 768px tro len ca 3 anh vua mot hang nen hai nut tu an.
   ========================================================================== */
.bn-boc { position: relative; margin: 10px 0 14px; }

/* overflow:hidden = "cua so" nhin vao bang; ban than bang (.bn-ds) truot
   ngang ben trong bang transform, khong dung scrollLeft - de con chay vong
   lap ma khong bi giat khi nhay ve dau. */
.bn-khung { overflow: hidden; }

.bn-ds {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

.bn-muc {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	padding: 0 4px;
	box-sizing: border-box;
	border: 0;
}

/* Chua san khung theo ti le anh banner (500x300 = 5/3) - CAN, vi cac anh nay
   tai theo cuon (loading="lazy"): khong chua cho thi truoc khi anh ve, o anh
   chi cao 17px roi bung ra khi anh den, day ca trang giat mot cai.
   Cac luat aspect-ratio o css/luoi-san-pham.css khong voi toi day duoc vi
   chung gioi han trong ".row.category-child". */
.bn-muc .product-image {
	padding: 0;
	position: relative;
	aspect-ratio: 5 / 3;
	overflow: hidden;
}

.bn-muc .product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;   /* anh ti le khac thi thu gon vua khung, khong cat, khong keo gian */
	display: block;
}

@supports not (aspect-ratio: 5 / 3) {
	.bn-muc .product-image { height: 110px; }
}
.bn-muc .product-info h6 { margin: 6px 0 0; font-size: 13px; line-height: 18px; }

.bn-nut {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	color: #333;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}

/* Nhu .dm-con-nut: .bn-nut co "display: flex" nen phai tu tra lai y nghia
   cho thuoc tinh "hidden" (js/danh-muc.js dung no de an nut khi ca 3 anh da
   vua mot hang, tuc tu 768px tro len). */
.bn-nut[hidden] { display: none !important; }

.bn-nut:hover { border-color: #e42527; color: #e42527; }
.bn-trai { left: -4px; }
.bn-phai { right: -4px; }

@media (max-width: 767px) {
	.bn-muc { flex: 0 0 50%; max-width: 50%; }
}

/* ==========================================================================
   HANG DAU TRANG DANH MUC: <h1> + BO NUT CHIA SE          02/09/2026
   ==========================================================================
   Mot hang duy nhat: ten danh muc ben trai, 5 nut chia se sat mep phai.
   flex-wrap:nowrap = KHONG bao gio cho xuong dong, du man hinh hep den dau;
   thay vao do ten danh muc bi cat bot bang dau "...".

   min-width:0 tren the <h1> la bat buoc: mac dinh mot o flex khong chiu co
   nho hon noi dung cua no (min-width:auto), nen neu thieu dong nay thi ten
   dai se day bo nut ra khoi khung thay vi tu cat.
   ========================================================================== */
.dm-dau {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;   /* cung nhip voi cac khoi con lai o dau trang */
}

.dm-dau .headCategoryTitle {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dm-dau .cs-hang {
	flex: 0 0 auto;
	flex-wrap: nowrap;   /* de trong .cs-hang cung khong duoc xuong dong */
	margin: 0;
}

/* Man hinh hep: thu nut lai cho ten danh muc con cho tho. 5 nut 30px + 4 khe
   6px = 174px; o khung 320px van con khoang 130px cho ten. */
@media (max-width: 767px) {
	.dm-dau { gap: 8px; }
	.dm-dau .cs-hang { gap: 6px; }
	.dm-dau .cs-nut { width: 30px; height: 30px; font-size: 14px; }
}

@media (max-width: 360px) {
	.dm-dau .cs-hang { gap: 5px; }
	.dm-dau .cs-nut { width: 27px; height: 27px; font-size: 13px; }
}


/* (Da chuyen: cac luat cua nut "Xem them" nay nam o css/rieng/xem-them.css -
   nut do gio dung chung cho ca trang danh muc tin, khuyen mai va video, khong
   con rieng trang danh muc san pham nua. 02/09/2026) */