/* ==========================================================================
   DANH MUC TIN / CHINH SACH - GIAO DIEN 1                      02/09/2026
   ==========================================================================
   Khoi <div class="col-md-6 ... cates"> trong library/news_cate.php. Dung o
   /chinh-sach-dai-ly/, /tin-tuc-xe-dien/ va moi danh muc tin khac.

   BON LOI DO DUOC TREN MAN HINH 1366px TRUOC KHI SUA:

   1. LUOI THUNG MOT O. Cac the la cot float cua Bootstrap 3. Do vi tri that:
      the 1-2 o y=577, the 3 o y=1063 nhung nam CO PHAI, con o trai cua hang
      do BO TRONG, roi the 4-5 lai o y=1549. Giua trang co mot lo trong bang
      nguyen mot the. Doi hang sang flex thi khong con chuyen the nay chan
      the kia.

   2. THE DINH SAT NHAU. .cates co vien 1px nhung padding chi 0 3px va khong
      co margin: hai the cham vao nhau, chu nam sat vien, nhin nhu mot bang
      ke chu khong phai nhung the rieng.

   3. ANH KHONG CO TI LE CO DINH. <img> de object-fit:fill, chieu cao chay
      theo anh goc. Anh 560x292 bi keo len 665x346 (gian 19%, nhoe), va chi
      can mot anh ti le khac la ca hang lech nhau. Nay khung anh co ti le
      16/9 co dinh, anh cat vua khung (object-fit:cover) va khong gian qua co
      that.

   4. TIEU DE / TOM TAT DAI NGAN KHAC NHAU lam the cao thap khac nhau. Nay
      tieu de an dinh 2 dong, tom tat 3 dong.
   ========================================================================== */

/* ---- Hang the: flex thay cho float ---- */
.row:has(> .cates) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Thanh phan trang nam CUNG trong hang do (library/news_cate.php) - phai cho
   no chiem tron mot dong rieng, khong thi no thanh mot "the" thu tam. */
.row:has(> .cates) > .pnavigation {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ---- The tin ---- */
.cates {
	float: none;
	display: flex;
	flex-direction: column;
	/* Muc flex mac dinh co min-width:auto - khong duoc co nho hon noi dung,
	   nen mot tieu de dai co the day the phinh qua 50% va lam ca trang cuon
	   ngang duoc. Xem ghi chu day du o css/chung/luoi-san-pham.css. */
	min-width: 0;
	margin-bottom: 20px;
	padding: 0;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Khoang ho GIUA cac the: dung "gap" cua flex, KHONG dung le am.
   Ban dau o day keo hang -8px hai ben roi bu lai 8px cho tung the. Cach do
   cong them vao le am san co cua .row (Bootstrap) nen hang rong hon khung
   chua no - do duoc tren /khuyen-mai/: hang rong 506px trong khung 500px,
   ca trang cuon ngang duoc 3px. "gap" tao khe ho ma khong dong toi le. */
.row:has(> .cates) {
	gap: 16px;
	margin-left: 0;
	margin-right: 0;
}

.row:has(> .cates) > .cates.col-md-6 {
	flex: 0 0 calc(50% - 8px);
	max-width: calc(50% - 8px);
	margin: 0;
	padding: 0;
}

/* Hai the "khong phai the tin" nam chung trong hang: thanh phan trang va
   khung nut "Xem them". Ca hai chiem tron mot dong rieng. */
.row:has(> .cates) > .pnavigation,
.row:has(> .cates) > .xt-khung {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.cates:hover {
	border-color: #d8d8d8;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

/* ---- Anh: ti le co dinh, cat vua khung ---- */
.cates > .product-image {
	position: relative;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
	background-color: #f4f4f4;
}

.cates > .product-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.cates:hover > .product-image img { transform: scale(1.04); }

/* Nhan "HET HAN" / "KHUYEN MAI HOT!" - lui vao trong mot chut cho khoi dinh
   sat goc, va an han khi khong co chu (news_home = 4: PHP van in the <span>
   rong, de nguyen thi con mot vet den nho o goc anh). */
.cates > .product-image .product-tag {
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

.cates > .product-image .product-tag:empty { display: none; }

/* Nut "Xem ngay" - can giua that bang transform, thay cho "margin: 0 252px"
   (con so do trinh duyet tu tinh theo be rong hien tai, doi be rong la lech). */
.cates > .product-image .product-hover {
	top: 50%;
	left: 50%;
	right: auto;
	margin: 0;
	transform: translate(-50%, -50%) scale(.85);
	white-space: nowrap;
	border-radius: 4px;
}

.cates:hover > .product-image .product-hover {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ---- Phan chu ---- */
.cates > .product-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 12px 14px 14px;
}

.cates > .product-info h5 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px;
	min-height: 2.8em;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
}

.cates > .product-info h5 a { color: #222; }
.cates:hover > .product-info h5 a { color: #e42527; }

.cates > .product-info p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: #666;
	font-size: 13.5px;
	line-height: 1.55;
}

/* ==========================================================================
   MAN HINH VUA VA HEP
   ========================================================================== */

/* Duoi 768px Bootstrap cho .col-xs-12 => moi the mot dong. Chi can chinh lai
   be rong cho khop voi margin 8px hai ben. */
@media (max-width: 767px) {
	.row:has(> .cates) > .cates.col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.row:has(> .cates) { gap: 14px; }

	.cates { margin-bottom: 14px; }

	.cates > .product-info { padding: 10px 12px 12px; }

	.cates > .product-info h5 { font-size: 14.5px; }

	/* Tom tat rut con 2 dong: tren dien thoai moi the chiem tron be ngang nen
	   3 dong tom tat day the tiep theo xuong qua xa. */
	.cates > .product-info p { -webkit-line-clamp: 2; font-size: 13px; }

	.cates > .product-image .product-tag { top: 8px; left: 8px; font-size: 11px; }

	/* Man hinh cam tay khong co con tro chuot: khong co "hover" nao ca, nen
	   nut "Xem ngay" khong bao gio hien - ma ca the von da la mot lien ket.
	   An han cho khoi che mat anh. */
	.cates > .product-image .product-hover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cates,
	.cates > .product-image img,
	.cates > .product-image .product-hover { transition: none; }
	.cates:hover { transform: none; }
	.cates:hover > .product-image img { transform: none; }
}