/* ==========================================================================
   KHOI "SAN PHAM VUA XEM" - NAP O MOI TRANG                   02/09/2026
   ==========================================================================
   TRUOC day khoi nay chi co o trang chi tiet san pham nen CSS cua no nam
   cuoi css/rieng/chi-tiet-sp.css. Tu 02/09/2026 library/footer.php cung ve
   no ngay tren hang logo thuong hieu - tuc la o MOI trang - nen phai tach
   ra thanh tep rieng trong css/chung/.

   (library/vua-xem.php co co chan ve hai lan: trang chi tiet san pham ve o
   giua trang thi footer bo qua.)
   ========================================================================== */

/* ==========================================================================
   KHOI "SAN PHAM VUA XEM"                                     02/09/2026
   ==========================================================================
   Mot hang cuon ngang + hai nut truoc/sau, dat ngay duoi khoi Mua ngay /
   Mua tra gop. Day la khoi PHU TRO (khach da xem roi) nen phai gon: mot
   hang duy nhat, khong bao gio chiem het man hinh nhu luoi san pham chinh.
   ========================================================================== */
.vx-khoi {
	margin: 14px 0 0;
	padding: 12px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fff;
}

.vx-dau {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.vx-tieu-de {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vx-tieu-de i { margin-right: 6px; color: #d70018; }

.vx-dieu-khien { flex: 0 0 auto; display: flex; gap: 6px; }

.vx-nut {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	color: #333;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.vx-nut:hover:not([disabled]) { border-color: #111; background: #fff8db; color: #111; }

/* Da cham dau/cuoi hang: van hien nhung mo di va khong bam duoc - bo han
   thi ca cum nut nhay ngang mot doan moi lan cuon. */
.vx-nut[disabled] { opacity: .35; cursor: default; }

/* ---- Hang cuon ---------------------------------------------------------
   scroll-snap de moi lan cuon dung lai o dau mot the, khong bao gio de mot
   the bi cat doi giua khung. */
.vx-bang {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* An thanh cuon ngang: da co hai nut va vuot tay roi. */
	scrollbar-width: none;
	padding-bottom: 2px;
}

.vx-bang::-webkit-scrollbar { display: none; }

.vx-the {
	flex: 0 0 120px;
	max-width: 120px;
	scroll-snap-align: start;
	display: block;
	color: #333;
	text-decoration: none;
}

.vx-anh {
	display: block;
	margin-bottom: 6px;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	/* Nen TRANG (03/09/2026). Anh san pham deu tach nen trang, ma o nay truoc
	   la #fafafa - lech mot bac xam so voi chinh cai anh nam tren no, nhin ra
	   mot vien xam nhat quanh chiec xe. */
	background: #fff;
}

/* Ti le co dinh: anh san pham trong kho co du kich thuoc, khong khoa ti le
   thi moi the mot chieu cao va ca hang so le. */
.vx-anh img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transition: transform .25s ease;
}

.vx-the:hover .vx-anh { border-color: #ffd900; }
.vx-the:hover .vx-anh img { transform: scale(1.05); }

.vx-ten {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	font-size: 12px;
	line-height: 1.3;
	color: #333;
}

.vx-the:hover .vx-ten { color: #000; }

.vx-gia {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 700;
	color: #d70018;
}

@media (max-width: 767px) {
	.vx-khoi { padding: 10px; }
	.vx-the { flex-basis: 108px; max-width: 108px; }
	.vx-ten { font-size: 11.5px; }
}