/*
 * Trang chu.
 *
 * So do do tu cellphones.com.vn o viewport 1440 (khung 1200px). Ghi lai con
 * so that thay vi uoc luong, de sau nay so lai voi mau khong phai do lai.
 *
 * Muc luc:
 *   1. Khung chung cua cac phan
 *   2. Hero
 */

/* ================================================================
   1. KHUNG CHUNG
   ================================================================ */

/* Trang mau de nen trang, khong phai xam - cac the trong hero noi len nho
   bong do chu khong nho khac mau nen. */
.cps-home {
	background: var(--cps-c-bg);
}

/* ================================================================
   2. HERO

   [ 224 danh muc ] 8 [ 736 slider + 3 banner ] 8 [ 224 uu dai ] = 1200
   ================================================================ */

.cps-hero {
	padding-top: var(--cps-sp-2);
}

/*
 * "stretch" chu khong phai "flex-start": cot phai phai cao DUNG BANG cot
 * giua nhu trang mau (496px o desktop), khong tu keo dai theo so muc uu
 * dai. Cot trai van co theo noi dung (align-self ben duoi).
 *
 * Chieu cao hang do CHINH cot giua quyet dinh, vi noi dung cot phai nam
 * trong mot lop absolute nen khong dong gop chieu cao nao.
 */
.cps-hero__inner {
	display: flex;
	align-items: stretch;
	gap: var(--cps-sp-2);
}

/* ---- Cot trai: danh muc ---- */

/*
 * Dung lai y nguyen kieu cot trai cua mega menu (.cps-catmenu__nav va
 * .cps-catmenu__tab trong header-footer.css) - o trang mau day dung la mot
 * thanh phan. Chi phai dat lai be rong va bong do vi trong mega menu hai
 * thu do nam o the boc ngoai.
 */
/*
 * CHO DAT cua mega menu - khong co noi dung.
 *
 * Danh sach danh muc hien o day la cot trai cua chinh #cps-category-menu
 * (mot dai absolute nam ngay duoi header, xem che do hero o muc 5). O nay
 * chi giu san 224px de bang truot khong chui xuong duoi no.
 */
.cps-hero__cats {
	flex: none;
	width: 224px;
}

/* ---- Cot giua ---- */

.cps-hero__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-4);
}

.cps-hero__slider {
	border-radius: var(--cps-r-xl);
	/* Bong hat LEN tren - do lai tu trang mau (shadow-top-200). Bong hat
	   xuong o day se de bong len hang banner nho ngay ben duoi. */
	box-shadow:
		0 -4px 20px -8px rgba(0, 0, 0, 0.11),
		0 -2px 32px -1px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/*
 * Bang truot cua slider KHONG co khe giua cac o.
 *
 * Carousel dung chung de gap 8px vi cac hang san pham can khe giua cac the.
 * O slider banner thi moi lan chuyen dung tron mot khung nhin (736px), ma
 * be rong that cua mot o cong khe lai la 744px - lech 8px, cong don qua
 * muoi anh thanh lech gan mot anh, va so cham cung ra 11 thay vi 10.
 */
.cps-hero__slider .cps-carousel__track {
	gap: 0;
}

/*
 * Hang cham cao 52px, nen trang, nam DUOI anh.
 *
 * Trang mau danh dung 52px do cho mot hang anh nho de nhay nhanh giua cac
 * banner; ta chua co du lieu nhan cho tung banner nen dat hang cham vao
 * cho ay. Nho vay khung slider van cao 372 (320 anh + 52) va cot giua van
 * dung 496 = 372 + 16 + 108, khop voi hai cot 224 hai ben.
 */
.cps-hero__slider .cps-carousel__dots {
	display: flex;
	align-items: center;
	height: 52px;
	background: var(--cps-c-bg);
}

/*
 * Chi con mot banner thi carousel.js an hang cham di. O day van phai GIU
 * CHO cua no, neu khong cot giua tut mat 52px va khong con bang hai cot
 * 224 hai ben - dung cai lech ma ta vua chua xong.
 */
.cps-hero__slider .cps-carousel__dots.is-hidden {
	display: flex;
	visibility: hidden;
}

/*
 * Hai mui ten hien SAN chu khong doi ro chuot moi hien - khong co dau hieu
 * nao khac thi khach khong biet day la bang truot. Kieu nut do lai tu trang
 * mau: 30x60, nen den mo.
 *
 * Can giua theo TAM ANH chu khong theo tam khung: khung con 52px hang cham
 * o duoi, lay 50% khung thi nut tut xuong 26px so voi giua anh.
 */
.cps-hero__slider .cps-carousel__nav {
	top: calc((100% - 52px) / 2);
	width: 30px;
	height: 60px;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.3);
	box-shadow: none;
	color: #fff;
	opacity: 1;
}

.cps-hero__slider .cps-carousel__nav:hover {
	background: rgba(0, 0, 0, 0.5);
}

.cps-hero__slider .cps-carousel__nav .cps-icon {
	width: 18px;
	height: 18px;
}

/* Sat han mep trai / phai cua anh. Goc phia MEP de vuong, goc phia trong
   bo tron - nut nhin nhu mot manh dinh vao canh anh chu khong phai mot the
   noi len tren. */
.cps-hero__slider .cps-carousel__nav--prev {
	left: 0;
	border-radius: 0 var(--cps-r-sm) var(--cps-r-sm) 0;
}

.cps-hero__slider .cps-carousel__nav--next {
	right: 0;
	border-radius: var(--cps-r-sm) 0 0 var(--cps-r-sm);
}

/*
 * Moi o rong TRON mot khung nhin: slider banner moi lan chuyen di dung mot
 * anh. Cac carousel khac (hang san pham) thi o hep hon khung nen nhieu o
 * cung hien mot luc.
 */
.cps-hero__slide {
	flex: 0 0 100%;
	width: 100%;
	display: block;
	line-height: 0;
}

/*
 * Ti le 736 x 320 - do lai cho dung.
 *
 * Truoc day o day de 736 x 372, va do la mot phep do sai: 372 la chieu cao
 * CA KHUNG slider ben trang mau, gom mot hang dieu huong cao 52 nam tren va
 * tam anh 320 nam duoi. Ep anh ti le 2.3 vao khung ti le 1.98 thi no bi cat
 * mat mot phan bay be ngang - dung la thu nhin "lech lac" o dau trang.
 */
.cps-hero__slide img {
	width: 100%;
	height: auto;
	aspect-ratio: 736 / 320;
	object-fit: cover;
	border-radius: var(--cps-r-xl) var(--cps-r-xl) 0 0;
}

.cps-hero__small {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cps-sp-2);
}

.cps-hero__small-item {
	display: block;
	border-radius: 12px;
	background: var(--cps-c-bg-grey);
	line-height: 0;
	overflow: hidden;
}

.cps-hero__small-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 240 / 108;
	object-fit: cover;
}

/* ---- Cot phai ---- */

.cps-hero__side {
	position: relative;
	flex: none;
	width: 224px;
}

.cps-hero__side-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-2);
}

.cps-hero__welcome,
.cps-hero__promos {
	border-radius: 12px;
	background: var(--cps-c-bg);
	box-shadow:
		0 4px 20px -8px rgba(0, 0, 0, 0.11),
		0 0 32px -4px rgba(0, 0, 0, 0.06);
}

.cps-hero__welcome {
	padding: var(--cps-sp-2) var(--cps-sp-3);
}

.cps-hero__welcome-title {
	margin: 0 0 var(--cps-sp-1);
	font-size: var(--cps-fs-base);
	line-height: 22px;
	color: var(--cps-c-strong);
}

.cps-hero__welcome-text {
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	color: var(--cps-c-text);
}

.cps-hero__welcome-links {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-1);
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

.cps-hero__welcome-links a {
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
	text-decoration: none;
}

.cps-hero__welcome-links a:hover {
	text-decoration: underline;
}

.cps-hero__promos {
	padding: var(--cps-sp-2);
	/* Chieu cao con lai cua cot sau khi tru the chao mung, dung nhu trang
	   mau: hai the cong lai vua bang chieu cao cot giua. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.cps-hero__promo + .cps-hero__promo {
	margin-top: var(--cps-sp-3);
}

.cps-hero__promo-title {
	margin: 0 0 var(--cps-sp-1);
	padding: 0 var(--cps-sp-1);
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cps-hero__promo-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-hero__promo-list a {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-1);
	min-height: 24px;
	padding: 3px var(--cps-sp-1);
	border-radius: 6px;
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-strong);
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.cps-hero__promo-list a:hover,
.cps-hero__promo-list a:focus-visible {
	outline: none;
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

/* Mui ten chi sang phai, day ve sat le phai. */
.cps-hero__promo-list .cps-icon {
	flex: none;
	width: 14px;
	height: 14px;
	margin-left: auto;
	transform: rotate(-90deg);
	color: var(--cps-c-muted);
}

/* ================================================================
   MAN HINH NHO
   ================================================================ */

/* Duoi 1200px: bo cot danh muc di - o day da co nut "Danh muc" tren header,
   giu ca hai thi hero chiem gan het man hinh dau tien. */
@media (max-width: 1199px) {
	.cps-hero__cats {
		display: none;
	}
}

@media (max-width: 991px) {
	.cps-hero__inner {
		flex-wrap: wrap;
	}

	.cps-hero__main {
		flex: 1 1 100%;
	}

	/* Duoi 992px cot phai xuong hang duoi, khong con cot giua de bam
	   chieu cao nua - tra ve dong chay binh thuong. */
	.cps-hero__side {
		position: static;
		flex: 1 1 100%;
		width: 100%;
	}

	.cps-hero__side-inner {
		position: static;
		flex-direction: row;
	}

	/*
	 * O khoang nay hai the nam CANH NHAU nen chia doi be ngang. Con chieu
	 * cao thi thoi bam theo cot giua, phai de theo noi dung - giu nguyen
	 * "flex: 1 1 auto; min-height: 0" cua desktop thi danh sach uu dai co
	 * lai con tro mep va cat mat gan het cac muc.
	 */
	.cps-hero__welcome,
	.cps-hero__promos {
		flex: 1 1 0;
		min-width: 0;
	}

	.cps-hero__promos {
		overflow: visible;
	}
}

@media (max-width: 767px) {
	.cps-hero__side-inner {
		flex-direction: column;
	}

	/* Xep doc thi khong con chia doi be ngang nua - ca hai the cao va rong
	   theo noi dung. */
	.cps-hero__welcome,
	.cps-hero__promos {
		flex: 0 0 auto;
	}

	/* Ba banner nho xep hai hang tren dien thoai: ba o mot hang thi moi o
	   chi con khoang 110px, anh be den muc khong doc ra chu gi. */
	.cps-hero__small {
		grid-template-columns: repeat(2, 1fr);
	}

	.cps-hero__small-item:last-child {
		grid-column: span 2;
	}

	/*
	 * Hang cham thap lai. Tren desktop no cao 52px vi phai lap cho chieu cao
	 * khung 372 cua trang mau; o dien thoai anh chi con cao 170 nen giu 52px
	 * la mot mang trang chiem gan mot phan tu khung.
	 */
	.cps-hero__slider .cps-carousel__dots {
		height: 32px;
	}

	.cps-hero__slider .cps-carousel__nav {
		top: calc((100% - 32px) / 2);
	}
}

/* ================================================================
   3. DAI BANNER NGANG

   Do tu trang mau: 1200x75, cach hero 24px, KHONG bo goc (day la mot dai
   do het be ngang khung, bo goc se lam no nhin nhu mot the roi rac).
   ================================================================ */

.cps-strip {
	margin-top: var(--cps-sp-6);
}

.cps-strip__link {
	display: block;
	line-height: 0;
}

.cps-strip__link img {
	width: 100%;
	height: auto;
}

/* ================================================================
   4. HANG BANNER DOC

   5 x 224 + 4 khe 20 = 1200, vua dung khung.
   ================================================================ */

.cps-rails {
	margin-top: var(--cps-sp-8);
}

.cps-rails__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-4);
}

.cps-rails__head .cps-block-title {
	margin-bottom: var(--cps-sp-4);
}

.cps-rails__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--cps-sp-5);
}

.cps-rails__item {
	display: block;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg-grey);
	line-height: 0;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cps-rails__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.18);
}

.cps-rails__item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

/*
 * Anh goc cao khong deu nhau (557px va 672px). Ghim mot ti le chung roi
 * cat anh vao khung - de nguyen thi hang banner rang cua, moi cai mot
 * chieu cao.
 */
.cps-rails__item img {
	width: 100%;
	height: auto;
	aspect-ratio: 224 / 557;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.cps-rails__item,
	.cps-rails__item:hover {
		transform: none;
		transition: none;
	}
}

@media (max-width: 1023px) {
	/* 5 cot tren man hinh hep thi moi banner chi con hon 100px - chu tren
	   anh khong con doc duoc. Ba cot la nguong con nhin ra chu. */
	.cps-rails__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.cps-rails__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--cps-sp-3);
	}

	.cps-rails {
		margin-top: var(--cps-sp-6);
	}
}

/* ================================================================
   5. MEGA MENU O CHE DO HERO

   Trang mau: cot danh muc nam san o dau trang chu; ro chuot vao mot muc thi
   bang danh muc con bung ra PHU LEN cot giua va cot phai (do duoc: bang
   rong 968 = 736 + 8 + 224, cao 496), va KHONG co lop phu toi.

   Ca site chi co MOT ban mega menu - ban ma header in ra cho nut "Danh
   muc". Trang chu KHONG in them ban thu hai: mot la no chiem 76% HTML cua
   trang (324KB), hai la de hai ban thi nguoi sau sua mega menu se khong
   ngo con mot cho nua phai sua.

   Dung duoc lai vi ban do von la mot dai absolute rong het khung nam ngay
   duoi header - tuc da san o dung vi tri cua hero. Che do nay chi phai bo
   lop phu, keo khe va chieu cao ve so cua hero, va giau bang con di cho
   toi khi ro chuot.
   ================================================================ */

.cps-catmenu--hero {
	/* Hero co padding-top 8px; bo dem cua menu va day xuong dung 8px de cot
	   danh muc va bang truot bat dau tren cung mot duong. */
	padding: 0;
	margin-top: var(--cps-sp-2);
	/* Cho chuot bam xuyen qua vung trong cua dai - neu khong, ca dai (rong
	   het khung, cao 496) se chan het banner va cot uu dai ben duoi. */
	pointer-events: none;
}

/* Khong lam toi ca trang: day la bang mo ngay trong hero chu khong phai
   mot lop phu tren toan man hinh. */
.cps-catmenu--hero::before {
	display: none;
}

.cps-catmenu--hero .cps-catmenu__inner {
	gap: var(--cps-sp-2);
	height: 496px;
}

/* Tra lai kha nang bam cho hai khoi that su co noi dung. */
.cps-catmenu--hero .cps-catmenu__nav,
.cps-catmenu--hero .cps-catmenu__panels {
	pointer-events: auto;
}

/*
 * Cot danh muc: cao bang hai khoi kia cua hero.
 *
 * Trang mau co 12 muc x 40px + 16 dem = dung 496px. Ben minh chi co 11
 * danh muc cha nen tu nhien ra 456px - thap hon 40px, nhin ra ngay la ba
 * khoi khong bang nhau. Cho danh sach chia deu phan du: moi muc cao them
 * vai pixel, mat khong nhan ra ma cot lai day dan.
 */
.cps-catmenu--hero .cps-catmenu__nav {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cps-catmenu--hero .cps-catmenu__nav > li {
	display: flex;
	flex: 1 1 auto;
}

/* min-height giu cho muc khong bao gio thap hon o che do phu toan trang -
   them nhieu danh muc cha thi danh sach tu cuon chu khong be lai. */
.cps-catmenu--hero .cps-catmenu__tab {
	flex: 1 1 auto;
	min-height: 40px;
	height: auto;
}

/*
 * Bang con: an cho toi khi ro chuot vao mot muc.
 *
 * Dung visibility chu khong phai display: giu nguyen kich thuoc da tinh
 * san nen luc hien ra khong phai do lai, khong thay giat.
 */
.cps-catmenu--hero .cps-catmenu__panels {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.cps-catmenu--hero.is-open .cps-catmenu__panels {
	visibility: visible;
	opacity: 1;
}

/* Duoi 1200px hero bo cot danh muc; menu tro ve chi mo bang nut tren header. */
@media (max-width: 1199px) {
	.cps-catmenu--hero {
		display: none;
	}
}

/* ================================================================
   6. HANG SAN PHAM DUNG CHUNG

   Dung o shortcode [cps_san_pham] va o cac khoi cua trang chu.
   ================================================================ */

.cps-product-block {
	margin-top: var(--cps-sp-8);
}

.cps-product-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-4);
}

/* The trong hang giu dung be rong 224px nhu trang mau, khong co lai theo
   so mon - hai hang canh nhau nho vay bang the nhau. */
.cps-product-row__item {
	flex: none;
	width: 224px;
}

@media (max-width: 767px) {
	.cps-product-row__item {
		width: 174px;
	}
}

/* ================================================================
   7. KHOI BA TAB "DEAL SOC / HOT TREND / HANG MOI VE"

   So do do tu trang mau (khung 1200):
     khung      bo goc 16px, vien 2px mau nhan, KHONG vien tren
     tab ngoai  cao 64, bo goc 16px 16px 0 0
                dang mo: nen nhat, chu mau nhan 28px/800 in hoa
                tab kia: nen xam
     hang nhom  cao 32, vien tron, chu 14px/600, dem 5px 12px
     hang con   cao 36, bo goc 6px, chu 14px/600, dem 5px 12px
   ================================================================ */

.cps-tabs-block {
	margin-top: var(--cps-sp-8);
}

/*
 * Khung khoi - do lai day du tu trang mau, truoc day toi moi lam moi duong
 * vien nen no tro tro:
 *
 *   1. vien 3px (khong phai 2px), CHI o trai / phai / duoi
 *   2. nen khong phai mau trang ma la mot dai chuyen mau rat nhat, nghieng
 *      188.66deg - dam o tren, gan nhu trang o duoi
 *   3. hang tab thut ra hai ben dung bang be day vien, va nam TREN vien -
 *      nho vay tab an vao canh khung chu khong nhu mot thanh dat len tren
 *   4. tab dang mo dung DUNG mau dau cua dai chuyen mau, nen no chay lien
 *      mach xuong than khoi, khong co duong cat ngang
 */
.cps-tabs-block__box {
	position: relative;
	border: 3px solid var(--cps-c-primary);
	border-top: 0;
	border-radius: var(--cps-r-xl);
	background: linear-gradient(
		188.66deg,
		var(--cps-c-primary-pale) 28.75%,
		rgba(255, 253, 240, 0.4) 87.64%
	);
}

/* ---- Tang 1: ba tab lon ---- */

/* Thut ra hai ben dung bang be day vien va nam de len no. */
.cps-tabs-block__tabs {
	position: relative;
	z-index: 1;
	display: flex;
	margin: 0 -3px;
}

.cps-tabs-block__tab {
	flex: 1 1 0;
	/* Flatsome cam min-height va dem cho moi <button>; khong go thi tab cao
	   70px thay vi 64px. */
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	height: 64px;
	padding: 0 var(--cps-sp-3);
	margin: 0;
	border: 0;
	border-radius: var(--cps-r-xl) var(--cps-r-xl) 0 0;
	background: var(--cps-c-bg-grey);
	font-family: inherit;
	font-size: clamp(14px, 2vw, 28px);
	line-height: 1.1;
	font-weight: 800;
	color: var(--cps-c-muted);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cps-tabs-block__tab:hover {
	color: var(--cps-c-primary-text);
}

.cps-tabs-block__tab.is-active {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
	cursor: default;
}

/*
 * Hai nhan chong len nhau trong cung mot o, doi cho bang mo dan kem phong
 * nhe - do lai tu trang mau (scale .9 <-> 1, opacity 0 <-> 1, 300ms).
 *
 * Ca hai deu absolute nen o khong doi chieu cao luc doi nhan.
 */
.cps-tabs-block__tab {
	position: relative;
	overflow: hidden;
}

.cps-tabs-block__tab-chu,
.cps-tabs-block__tab-anh {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--cps-sp-2);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tab dang mo: an CHU, hien ANH. */
.cps-tabs-block__tab.is-active .cps-tabs-block__tab-chu {
	opacity: 0;
	transform: scale(0.9);
}

.cps-tabs-block__tab.is-active .cps-tabs-block__tab-anh {
	opacity: 1;
	transform: scale(1);
}

/* Tab khong mo: hien CHU, an ANH. */
.cps-tabs-block__tab-anh {
	opacity: 0;
	transform: scale(0.9);
}

/*
 * Nhan cua tab dang mo: mot huy hieu vang tron chua icon, roi den ten tab.
 *
 * Trang mau dat o day mot tam anh chu ve san. Ben minh ve bang icon + chu
 * that: net o moi do phan giai, doi ten tab hay doi bang mau khong phai
 * xuat lai anh, va khong phai tai them tep nao.
 */
.cps-tabs-block__tab-anh {
	gap: var(--cps-sp-2);
}

.cps-tabs-block__tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-cta);
	color: var(--cps-c-on-primary);
	box-shadow: 0 2px 8px -2px rgba(212, 175, 55, 0.7);
}

.cps-tabs-block__tab-icon .cps-icon {
	width: 22px;
	height: 22px;
}

/*
 * Ten tab: chu dam, co theo be rong o de khong bao gio tran.
 *
 * Gach chan bang mot vach vang mo dan - de nhan dang mo co mot chi tiet
 * rieng chu khong chi la chu to hon.
 */
.cps-tabs-block__tab-ten {
	position: relative;
	padding-bottom: 4px;
	font-size: clamp(13px, 1.7vw, 24px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--cps-c-primary-text);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.cps-tabs-block__tab-ten::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	border-radius: var(--cps-r-full);
	background: linear-gradient(90deg, var(--cps-c-primary), rgba(255, 215, 0, 0));
}

@media (max-width: 767px) {
	/* Man hinh hep: bo huy hieu icon di, ba tab da chat cho san. */
	.cps-tabs-block__tab-icon {
		display: none;
	}

	.cps-tabs-block__tab-ten {
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cps-tabs-block__tab-chu,
	.cps-tabs-block__tab-anh {
		transition: none;
	}
}

.cps-tabs-block__tab:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 0.55);
}

/* Than khoi de TRONG SUOT cho dai chuyen mau cua khung an qua. */
.cps-tabs-block__body {
	padding: var(--cps-sp-5);
}

/* ---- Tang 2 & 3: hai hang nut loc ---- */

/*
 * Hai hang nut KHONG xuong dong ma cuon ngang, kem hai mui ten o hai dau -
 * dung nhu trang mau. Cho xuong dong thi chin nhom danh muc se chiem hai ba
 * hang, day hang san pham xuong qua sau.
 */
.cps-tabs-block__scroller {
	position: relative;
}

.cps-tabs-block__scroller:has(.cps-tabs-block__subs:empty) {
	display: none;
}

.cps-tabs-block__groups,
.cps-tabs-block__subs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--cps-sp-2);
	overflow-x: auto;
	scroll-behavior: smooth;
	/* Giau thanh cuon: da co hai mui ten lam viec do. */
	scrollbar-width: none;
}

.cps-tabs-block__groups::-webkit-scrollbar,
.cps-tabs-block__subs::-webkit-scrollbar {
	display: none;
}

.cps-tabs-block__groups {
	margin-bottom: var(--cps-sp-3);
}

.cps-tabs-block__subs {
	margin-bottom: var(--cps-sp-5);
}

/* ---- Hai mui ten cua hang cuon ---- */

.cps-scroller-nav {
	position: absolute;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	min-width: 0;
	min-height: 0;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: var(--cps-c-strong);
	cursor: pointer;
}

.cps-scroller-nav[hidden] {
	display: none;
}

.cps-scroller-nav:hover {
	color: var(--cps-c-primary-text);
}

.cps-scroller-nav:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-scroller-nav .cps-icon {
	width: 12px;
	height: 12px;
}

.cps-scroller-nav--prev {
	left: 0;
}

.cps-scroller-nav--prev .cps-icon {
	transform: rotate(90deg);
}

.cps-scroller-nav--next {
	right: 0;
}

.cps-scroller-nav--next .cps-icon {
	transform: rotate(-90deg);
}

/* Hang danh muc con cao 36px nen mui ten cua no cung phai cao theo. */
.cps-tabs-block__scroller:has(.cps-tabs-block__subs) .cps-scroller-nav {
	height: 36px;
}

.cps-tabs-block__group,
.cps-tabs-block__sub {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	/*
	 * "flex: none" chu khong de mac dinh.
	 *
	 * Hang nay la flex-wrap: nowrap, ma o flex thi mac dinh duoc phep CO
	 * LAI (flex-shrink: 1). Hau qua do duoc bang may: tam trong chin nut bi
	 * bop hep hon be rong chu, "Điện thoại, Tablet" can 162px chi con 141px
	 * va cut mat duoi. Khoa lai thi nut giu dung be rong chu, con phan thua
	 * ra thi hang tu cuon - dung viec cua hai mui ten.
	 */
	flex: none;
	min-height: 32px;
	padding: 5px var(--cps-sp-3);
	margin: 0;
	border: 0;
	background: var(--cps-c-bg-grey);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-strong);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hang nhom vien tron han, hang con bo goc 6px - dung nhu trang mau, hai
   hang nho vay phan biet duoc voi nhau. */
.cps-tabs-block__group {
	border-radius: var(--cps-r-full);
}

/*
 * Chip danh muc con: chieu cao CO DINH 36px nhu trang mau, va bo dem doc.
 *
 * Icon cao dung 36px; con giu dem 5px tren duoi thi chip phinh len 46px va
 * ca hang cao them 10px so voi mau.
 */
.cps-tabs-block__sub {
	gap: 6px;
	height: 36px;
	min-height: 36px;
	padding: 0 var(--cps-sp-3);
	border-radius: 6px;
}

/*
 * Icon danh muc trong chip - do tu trang mau: 36x36, khong bo goc, khong
 * nen. Anh cao bang ca chip nen no tran ra khoi phan dem, dung nhu ben mau.
 *
 * Anh lay tu chinh anh danh muc da tai ve hoi lam mega menu, khong phai
 * tep moi.
 */
.cps-tabs-block__sub-anh {
	flex: none;
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.cps-tabs-block__group:hover,
.cps-tabs-block__sub:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-tabs-block__group.is-active,
.cps-tabs-block__sub.is-active {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
	cursor: default;
}

.cps-tabs-block__group:focus-visible,
.cps-tabs-block__sub:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

/* Dang goi may chu: lam mo hang hang lai chu khong xoa di - xoa thi khoi
   co lai roi bung ra, ca trang giat mot cai. */
.cps-tabs-block__row {
	min-height: 340px;
	transition: opacity 0.15s ease;
}

.cps-tabs-block__row.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 767px) {
	.cps-tabs-block__body {
		padding: var(--cps-sp-3);
	}

	.cps-tabs-block__tab {
		height: 52px;
	}

	/* Man hinh nho: vien mong hon mot chut - trang mau cung vay (2px thay
	   cho 3px). Hang tab thut ra phai doi theo dung bang be day vien. */
	.cps-tabs-block__box {
		border-width: 2px;
		border-top: 0;
	}

	.cps-tabs-block__tabs {
		margin: 0 -2px;
	}
}

/* ================================================================
   8. KHOI DANH MUC (dung chung cho ca nua duoi trang chu)

   So do do tu trang mau (viewport 1440, khung 1200):
     cot banner   224 rong, cac banner xep doc cach nhau 12
     khe giua     16
     cot phai     960
     hang tab     cao 60, moi tab chia deu, chu 16/600 in hoa 24px
                  dang mo: chu mau nhan, vach duoi, dai chuyen mau rat nhat
                  giua hai tab co vach doc 1 x 20
     hang nhu cau chip 153.33 x 58 (sau chip vua khung), nen xam, bo goc 8,
                  icon 48, chu 14/600
     hang hang    chip vien tron cao 32, chu 12/500; nut "Xem tat ca" 102x32
     bang san pham 2 hang x 4 cot, the 228, khe 16
   ================================================================ */

.cps-cblock {
	margin-top: var(--cps-sp-6);
}

.cps-cblock__layout {
	display: flex;
	gap: var(--cps-col-gap);
	align-items: stretch;
}

/* ---- Cot banner doc ---- */

/*
 * Cot banner cao bang cot phai, cac banner chia deu chieu cao do. Anh goc
 * cao khac nhau (557 va 672) nen phai cat vao khung - de nguyen thi mot
 * banner lung thung con banner kia tran ra.
 */
.cps-cblock__rail {
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--cps-sp-3);
	width: 224px;
}

/*
 * Cac banner chia deu chieu cao cot, khong dat tran tren duoi.
 *
 * Truoc day o day co "max-height: 620px" de do phan cat anh. Nhung khoi chi
 * co mot banner thi tran do lam banner dung som, chua het cot mot phan tu -
 * cot trai va cot phai khong con bang nhau, nhin nhu bi lech. Thoi thi cat
 * nhieu hon mot chut con hon la de hong bo cuc.
 */
.cps-cblock__rail-item {
	display: block;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--cps-r-md);
}

.cps-cblock__rail-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.cps-cblock__rail-item:hover img {
	transform: scale(1.03);
}

/*
 * Man hinh hep: bo cot banner di. Dat tren thi no day hang san pham xuong
 * qua man hinh dau tien, dat duoi thi phai cuon qua hai chuc mon moi thay.
 */
@media (max-width: 991px) {
	.cps-cblock__rail {
		display: none;
	}
}

.cps-cblock__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- Hang tab ---- */

.cps-cblock__tabs {
	display: flex;
	align-items: stretch;
	background: var(--cps-c-bg);
	border-radius: var(--cps-r-sm) var(--cps-r-sm) 0 0;
}

.cps-cblock__tab-vach {
	flex: none;
	align-self: center;
	width: 1px;
	height: 20px;
	background: var(--cps-c-border);
}

/*
 * PHAI go dem, le va min-height cua Flatsome: ho dat cho MOI the <button>
 * mot bo "padding: 0 18.6px; margin: 0 15.5px 15.5px 0; min-height". De
 * nguyen thi hang tab cao 76px thay vi 60px va cac tab khong chia deu.
 */
.cps-cblock__tab {
	flex: 1 1 0;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	height: 60px;
	padding: 0 var(--cps-sp-4);
	margin: 0;
	border: 0;
	border-bottom: 2px solid var(--cps-c-border);
	border-radius: 0;
	background: none;
	color: var(--cps-c-heading);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cps-cblock__tab-ten {
	margin: 0;
	font-family: inherit;
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-semibold);
	color: inherit;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cps-cblock__tab:hover {
	color: var(--cps-c-primary-text);
}

/*
 * Tab dang mo: chu mau nhan, vach duoi mau vang va mot dai chuyen mau rat
 * nhat dang tu duoi len - dung co che cua trang mau. Vang o day phai la hai
 * sac khac nhau: vang tuoi cho VACH (khong phai chu, khong can tuong phan),
 * vang toi cho CHU (5.1:1 tren nen trang).
 */
.cps-cblock__tab.is-active {
	border-bottom-color: var(--cps-c-primary);
	background-image: linear-gradient(
		to top,
		rgba(255, 215, 0, 0.22) 5%,
		rgba(255, 255, 255, 0.05) 60%
	);
	color: var(--cps-c-primary-text);
	cursor: default;
}

.cps-cblock__tab:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--cps-c-primary-dark);
}

/* ---- Ruot ---- */

.cps-cblock__body {
	margin-top: var(--cps-sp-4);
	transition: opacity 0.15s ease;
}

.cps-cblock__body.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

/* ---- Hang chip "nhu cau" ---- */

.cps-cblock__scroller {
	position: relative;
}

/* Hang nay chi cao 58px nen hai mui ten phai can giua, khong ghim tren. */
.cps-cblock__scroller .cps-scroller-nav {
	top: 50%;
	transform: translateY(-50%);
}

.cps-cblock__needs {
	display: flex;
	gap: var(--cps-sp-2);
	overflow-x: auto;
	scrollbar-width: none;
}

.cps-cblock__needs::-webkit-scrollbar {
	display: none;
}

/* Sau chip vua dung khung 960 - dung nhu trang mau (153.33 moi chip). */
.cps-cblock__need {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--cps-sp-1);
	box-sizing: border-box;
	width: calc((100% - 5 * var(--cps-sp-2)) / 6);
	height: 58px;
	padding: var(--cps-sp-1) 2px;
	border: 1px solid var(--cps-c-bg-grey);
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
	color: var(--cps-c-heading);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cps-cblock__need:hover {
	border-color: var(--cps-c-primary-dark);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-heading);
}

.cps-cblock__need:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-cblock__need-anh {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/*
 * Ten chip: hai dong la het. Chip chi rong 153px nen "Dien thoai chup anh
 * dep" khong the nam mot dong; cat o dong thu ba de moi chip cao bang nhau.
 */
.cps-cblock__need-ten {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-semibold);
}

/* ---- Hang chip thuong hieu ---- */

.cps-cblock__brandrow {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-3);
	margin: var(--cps-sp-4) 0;
}

.cps-cblock__scroller--brand {
	flex: 1 1 auto;
	min-width: 0;
}

.cps-cblock__brands {
	display: flex;
	gap: var(--cps-sp-2);
	overflow-x: auto;
	scrollbar-width: none;
}

.cps-cblock__brands::-webkit-scrollbar {
	display: none;
}

.cps-cblock__brand,
.cps-cblock__all {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: var(--cps-sp-1);
	box-sizing: border-box;
	height: 32px;
	padding: 0 var(--cps-sp-3);
	border: 1px solid var(--cps-c-border-gallery);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-medium);
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cps-cblock__brand {
	color: var(--cps-c-heading);
}

.cps-cblock__brand:hover,
.cps-cblock__all:hover {
	border-color: var(--cps-c-primary-dark);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-cblock__brand:focus-visible,
.cps-cblock__all:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-cblock__all {
	color: var(--cps-c-primary-text);
}

.cps-cblock__all .cps-icon {
	width: 10px;
	height: 10px;
	transform: rotate(-90deg);
}

/* ---- Bang truot san pham hai hang ---- */

/*
 * Moi "o" cua bang truot la mot COT san pham, khong phai mot the. Nho vay
 * buoc keo cua carousel.js (do be rong o dau tien) dung bang mot cot.
 *
 * Be rong o = mot phan tu cua khung, khong phai 224px co dinh nhu hang mot
 * tang: hang nay luon phai vua dung bon cot trong khung 960.
 */
.cps-product-row--nhieu-hang .cps-carousel__track {
	gap: var(--cps-sp-4);
}

.cps-product-row--nhieu-hang .cps-product-row__item {
	display: grid;
	grid-template-rows: repeat(var(--cps-hang, 2), auto);
	gap: var(--cps-sp-4);
	align-content: start;
	width: calc((100% - 3 * var(--cps-sp-4)) / 4);
}

/*
 * Bang truot nay nam trong khung hep hon nen hai mui ten phai nam han ben
 * trong, khong tran ra ngoai mep nhu slider banner.
 */
.cps-product-row--nhieu-hang .cps-carousel__nav--prev {
	left: 4px;
}

.cps-product-row--nhieu-hang .cps-carousel__nav--next {
	right: 4px;
}

@media (max-width: 1199px) {
	.cps-cblock__need {
		width: calc((100% - 4 * var(--cps-sp-2)) / 5);
	}

	.cps-product-row--nhieu-hang .cps-product-row__item {
		width: calc((100% - 2 * var(--cps-sp-4)) / 3);
	}
}

@media (max-width: 767px) {
	.cps-cblock {
		margin-top: var(--cps-sp-4);
	}

	.cps-cblock__tab {
		height: 48px;
		padding: 0 var(--cps-sp-2);
	}

	.cps-cblock__tab-ten {
		font-size: var(--cps-fs-md);
	}

	.cps-cblock__need {
		width: 150px;
	}

	.cps-product-row--nhieu-hang .cps-product-row__item {
		width: 174px;
	}

	.cps-cblock__brandrow {
		margin: var(--cps-sp-3) 0;
	}
}

/* ================================================================
   9. KHOI LUOI DANH MUC ("Phu kien", "Do gia dung", "Hang cu")

   So do do tu trang mau (viewport 1440, khung 1200):
     hang tieu de  cao 32; chu 20/700 in hoa, vach doc 1 x 24, chip thuong
                   hieu, nut "Xem tat ca" 102 x 32
     the           nen trang, bo goc 12, dem 8 / 16, do bong nhe
     luoi          6 cot, moi o 195 x 89, icon 72, chu 12/500
   ================================================================ */

.cps-cgrid {
	margin-top: var(--cps-sp-6);
}

/*
 * Cho xuong hang: hang chip thuong hieu dai bang nao thi dai, khung hep lai
 * thi no tut xuong dong duoi nguyen ven - hon la bi cat cut mot chip o mep
 * phai trong nhu loi hien thi.
 */
.cps-cgrid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cps-sp-3);
	min-height: 32px;
}

/*
 * "width: auto" la bat buoc: Flatsome dat "h1..h6 { width: 100% }", nen
 * the <h2> nay lam muc cua flex se chiem tron ca hang (1200px) - mot minh
 * no an het dong dau va day nut "Xem tat ca" xuong dong duoi.
 */
.cps-cgrid__title {
	flex: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	font-size: var(--cps-fs-xl);
	line-height: 1.5;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

.cps-cgrid__vach {
	flex: none;
	width: 1px;
	height: 24px;
	background: var(--cps-c-border);
}

.cps-cgrid__brands {
	display: flex;
	flex: 1 1 auto;
	gap: var(--cps-sp-2);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.cps-cgrid__brands::-webkit-scrollbar {
	display: none;
}

/* Chip cua hang tieu de dung y het chip cua khoi danh muc - cung mot vai
   tro thi phai cung mot hinh dang. */
.cps-cgrid__brand,
.cps-cgrid__all {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: var(--cps-sp-1);
	box-sizing: border-box;
	height: 32px;
	padding: 0 var(--cps-sp-3);
	border: 1px solid var(--cps-c-border-gallery);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-medium);
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cps-cgrid__brand {
	color: var(--cps-c-heading);
}

/* Nut nam ngay sau tieu de / hang chip, khong day sang mep phai - dung nhu
   trang mau. */
.cps-cgrid__all {
	color: var(--cps-c-primary-text);
}

.cps-cgrid__brand:hover,
.cps-cgrid__all:hover {
	border-color: var(--cps-c-primary-dark);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-cgrid__brand:focus-visible,
.cps-cgrid__all:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-cgrid__all .cps-icon {
	width: 10px;
	height: 10px;
	transform: rotate(-90deg);
}

/* ---- The chua luoi ---- */

.cps-cgrid__box {
	margin-top: var(--cps-sp-2);
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg);
	box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.11), 0 0 32px -4px rgba(0, 0, 0, 0.06);
}

/*
 * Ke chia cua luoi lam bang KHE 1px tren nen mau vien, khong phai bang
 * border cua tung o.
 *
 * Ly do: lam bang border thi o cot cuoi va hang cuoi de lai mot duong vien
 * chay doc mep the, phai di tat no bang :nth-child - ma so cot lai doi theo
 * be rong man hinh nen cong thuc :nth-child cung phai doi theo. Kieu khe
 * thi ke chi xuat hien o GIUA hai o, dung bao nhieu cot cung dung.
 */
.cps-cgrid__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	overflow: hidden;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
}

.cps-cgrid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cps-sp-2);
	min-width: 0;
	min-height: 89px;
	padding: var(--cps-sp-2);
	background: var(--cps-c-bg);
	color: var(--cps-c-heading);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cps-cgrid__item:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-heading);
}

.cps-cgrid__item:hover .cps-cgrid__ten {
	text-decoration: underline;
}

.cps-cgrid__item:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--cps-c-primary-dark);
}

.cps-cgrid__anh {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.cps-cgrid__ten {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-xs);
	font-weight: var(--cps-fw-medium);
}

@media (max-width: 1199px) {
	.cps-cgrid__list {
		grid-template-columns: repeat(4, 1fr);
	}

	/*
	 * Cac luoi dai nhat co 18 o - chia het cho 6 va cho 3, nhung khong chia
	 * het cho 4. Bo hai o cuoi de hang duoi cung khong khuyet mot goc.
	 */
	.cps-cgrid__item:nth-child(n+17) {
		display: none;
	}
}

@media (max-width: 767px) {
	.cps-cgrid {
		margin-top: var(--cps-sp-4);
	}

	.cps-cgrid__title {
		font-size: var(--cps-fs-base);
	}

	/*
	 * Man hinh hep: ba cot, va icon nam TREN chu chu khong nam ben canh -
	 * dat canh nhau thi con lai chua toi bay muoi pixel cho chu.
	 */
	.cps-cgrid__list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Ba cot thi 18 lai chia het - bay lai hai o da tat o muc 4 cot. */
	.cps-cgrid__item:nth-child(n+17) {
		display: flex;
	}

	.cps-cgrid__item {
		flex-direction: column;
		gap: var(--cps-sp-1);
		min-height: 108px;
		padding: var(--cps-sp-2) var(--cps-sp-1);
	}

	.cps-cgrid__anh {
		width: 56px;
		height: 56px;
	}

	.cps-cgrid__ten {
		flex: none;
		text-align: center;
	}

	.cps-cgrid__box {
		padding: var(--cps-sp-2);
	}

	/* Hang tieu de hep: chip thuong hieu xuong hang duoi cho do chat. */
	.cps-cgrid__head {
		flex-wrap: wrap;
	}

	.cps-cgrid__vach {
		display: none;
	}
}

/* ================================================================
   10. HAI KHOI BAI VIET CUOI TRANG

   "Danh gia & Tren tay" bay kieu NOI BAT: mot bai lon ben trai, ba bai
   con lai xep doc ben phai. "Tin cong nghe" bay kieu LUOI: bon the deu
   nhau. Hai kieu khac nhau de hai khoi nam lien nhau khong doc thanh mot
   khoi dai.
   ================================================================ */

.cps-pblock {
	margin-top: var(--cps-sp-6);
}

.cps-pblock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-4);
	margin-bottom: var(--cps-sp-4);
}

/*
 * "inline-flex" cho ca nut: .cps-link-more von la kieu chu thuong nen mui
 * ten bi coi la mot tu rieng va tut xuong dong duoi khi cho hep.
 */
.cps-pblock__head .cps-link-more {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--cps-sp-1);
	white-space: nowrap;
}

.cps-pblock__more-icon {
	width: 10px;
	height: 10px;
	transform: rotate(-90deg);
}

/* ---- Kieu noi bat ---- */

.cps-pblock__than--noi-bat {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--cps-sp-5);
	align-items: stretch;
}

/*
 * Bon the ben phai CHIA DEU chieu cao cua bai lon ben trai.
 *
 * Dung grid bon hang bang nhau chu khong phai flex + space-between: cach
 * kia giu nguyen chieu cao that cua tung the (72px) roi day chung ra xa
 * nhau cho du 497px, thanh ra cot phai lo cho trong con cot trai thi dac -
 * dung cai lam hai cot nhin lech nhau.
 */
.cps-pblock__phu {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	gap: var(--cps-sp-3);
}

/* ---- Kieu luoi ---- */

.cps-pblock__than--luoi {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cps-sp-4);
}

/* ---- The bai viet ---- */

.cps-pcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cps-pcard__anh {
	display: block;
	overflow: hidden;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg-grey);
	/* Ghim ti le de hang the khong lech nhau luc anh chua tai xong. */
	aspect-ratio: 16 / 9;
}

.cps-pcard__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cps-pcard:hover .cps-pcard__anh img {
	transform: scale(1.04);
}

/* Bai chua co anh: o xam co icon, thay vi mot khoang trong. */
.cps-pcard__trong {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--cps-c-muted);
}

.cps-pcard__trong .cps-icon {
	width: 32px;
	height: 32px;
}

.cps-pcard__chu {
	padding-top: var(--cps-sp-3);
}

.cps-pcard__ten {
	width: auto;
	margin: var(--cps-sp-1) 0 0;
	font-size: var(--cps-fs-md);
	line-height: 1.4;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
	text-transform: none;
	/*
	 * Cat o dong thu ba. Tieu de bai cong nghe hay dai bon nam dong, de
	 * nguyen thi cac the trong mot hang cao thap khac nhau.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.cps-pcard__ten a {
	color: inherit;
}

.cps-pcard__ten a:hover {
	color: var(--cps-c-primary-text);
}

.cps-pcard__tom-tat {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: var(--cps-sp-2) 0 0;
	overflow: hidden;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

/* ---- The lon ---- */

.cps-pcard--lon .cps-pcard__ten {
	-webkit-line-clamp: 2;
	font-size: var(--cps-fs-xl);
	line-height: 1.35;
}

/* ---- The ngang (cot phai cua khoi noi bat) ---- */

.cps-pcard--ngang {
	flex-direction: row;
	gap: var(--cps-sp-3);
	align-items: flex-start;
}

/*
 * Anh cao het the chu khong ghim ti le 16:9: chieu cao the do grid chia,
 * ghim ti le thi anh thap hon the va de lai vien trang tren duoi.
 */
.cps-pcard--ngang .cps-pcard__anh {
	flex: none;
	width: 160px;
	height: 100%;
	aspect-ratio: auto;
}

.cps-pcard--ngang .cps-pcard__chu {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cps-pcard--ngang .cps-pcard__chu {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0;
}

.cps-pcard--ngang .cps-pcard__ten {
	margin-top: 0;
	margin-bottom: var(--cps-sp-1);
}

@media (max-width: 991px) {
	.cps-pblock__than--noi-bat {
		grid-template-columns: 1fr;
	}

	.cps-pblock__than--luoi {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.cps-pblock {
		margin-top: var(--cps-sp-4);
	}

	.cps-pblock__than--luoi {
		grid-template-columns: 1fr;
	}

	.cps-pcard--lon .cps-pcard__ten {
		font-size: var(--cps-fs-lg);
	}

	/*
	 * The ngang giu nguyen anh ben trai o man hinh hep - xep doc thi bon
	 * the lien nhau thanh mot cot anh rat dai.
	 */
	.cps-pcard--ngang .cps-pcard__anh {
		width: 104px;
	}
}

/* ================================================================
   11. KHOI "REVIEW SAN PHAM"

   So do do tu trang mau:
     hang tieu de  cao 40; vach doc 1 x 24; nut "Xem YouTube" 120 x 32
     the           bo goc 16, nen trang, do bong nhe, cat goc
     khung video   ti le 9:16
     phan duoi     anh san pham 64, ten cat hai dong, gia
   ================================================================ */

.cps-review {
	margin-top: var(--cps-sp-6);
}

.cps-review__head {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-3);
	margin-bottom: var(--cps-sp-4);
}

/*
 * Vach doc ngan cach tieu de va nut - dung nhu trang mau. Chi ve khi
 * THAT SU co nut ben canh; chua nhap link kenh YouTube thi nut khong in
 * ra, va mot cai vach lo lung sau tieu de la thua.
 */
.cps-review__head:has(.cps-review__kenh) .cps-block-title::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 24px;
	margin-left: var(--cps-sp-3);
	background: var(--cps-c-border);
	vertical-align: middle;
}

.cps-review__kenh {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--cps-sp-1);
	box-sizing: border-box;
	height: 32px;
	padding: 0 var(--cps-sp-3);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-border-gallery);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
	white-space: nowrap;
	transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cps-review__kenh:hover {
	background: var(--cps-c-primary-pale);
	box-shadow: inset 0 0 0 1px var(--cps-c-primary-dark);
	color: var(--cps-c-primary-text);
}

.cps-review__kenh:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 1px var(--cps-c-primary-dark),
		0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-review__kenh-icon {
	width: 12px;
	height: 12px;
	color: #d70018;
}

/* ---- Hang the ---- */

/*
 * Cac the CHIA DEU chieu ngang khung, khong phai be rong co dinh: cua hang
 * moi chi co bon nam video thi de be rong co dinh se thua mot mang trong
 * ben phai. Co nhieu video hon thi hang tu cuon ngang.
 */
.cps-review__hang {
	display: flex;
	gap: var(--cps-sp-4);
	/*
	 * Cho bong do cua the co cho o TREN va DUOI, khong noi rong hai ben.
	 *
	 * De "padding: 4px; margin: -4px" cho ca bon phia thi hang rong hon
	 * khung dung 8px, va ca trang cuon ngang duoc 4px - it nhung tren dien
	 * thoai la thay ngay. Bong hai ben rat mo, cat di khong ai nhan ra.
	 */
	padding: 4px 0;
	margin: -4px 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.cps-review__hang::-webkit-scrollbar {
	display: none;
}

/*
 * "1 0 226px": the GIAN ra lap day khi it video, nhung KHONG CO lai khi
 * nhieu - luc do hang tu cuon ngang. Cho co lai thi o man hinh 900px moi
 * the chi con 164px, video xem khong ra gi.
 */
.cps-review__the {
	display: flex;
	flex: 1 0 226px;
	flex-direction: column;
	max-width: 288px;
	overflow: hidden;
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg);
	box-shadow:
		0 4px 20px -8px rgba(0, 0, 0, 0.11),
		0 0 32px -4px rgba(0, 0, 0, 0.06);
}

/* ---- Khung video ---- */

/*
 * Nut phat: PHAI go dem, le va min-height cua Flatsome - ho dat cho MOI
 * the <button> mot bo "padding: 0 18.6px; margin: 0 15.5px 15.5px 0;
 * min-height". De nguyen thi anh video thut vao va lech han xuong duoi.
 */
.cps-review__video {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	/* Video doc kieu Shorts - dung ti le cua trang mau. */
	aspect-ratio: 9 / 16;
	cursor: pointer;
}

.cps-review__anh {
	width: 100%;
	height: 100%;
	/*
	 * Anh dai dien cua YouTube luon la 16:9 ke ca voi video doc. Cat vao
	 * khung 9:16 thi mat hai ben, nhung phan giua - thu can nhin - thi
	 * giu duoc; de "contain" se ra hai vet den rat to tren duoi.
	 */
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.cps-review__video:hover .cps-review__anh {
	opacity: 0.82;
}

/*
 * Anh du phong la anh san pham (nen trang, chup thang) - de "cover" thi
 * bi cat mat dau duoi. Dat vua khung va them nen xam cho hai ben.
 */
.cps-review__anh--du-phong {
	object-fit: contain;
	background: var(--cps-c-bg-grey);
}

.cps-review__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--cps-r-full);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cps-review__video:hover .cps-review__play {
	background: #d70018;
	transform: translate(-50%, -50%) scale(1.08);
}

.cps-review__video:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--cps-c-primary);
}

.cps-review__play .cps-icon {
	width: 22px;
	height: 22px;
	/* Tam giac phat lech phai mot chut moi nhin can giua. */
	margin-left: 3px;
}

/* The iframe do JS chen vao thay cho nut phat. */
.cps-review__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
}

/* ---- Phan san pham ben duoi ---- */

.cps-review__sp {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-4) var(--cps-sp-3);
	color: var(--cps-c-heading);
	transition: background-color 0.15s ease;
}

.cps-review__sp:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-heading);
}

.cps-review__sp-anh {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--cps-r-sm);
	object-fit: contain;
	background: var(--cps-c-bg-grey);
}

.cps-review__sp-chu {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--cps-sp-1);
	min-width: 0;
}

/*
 * Ten cat o dong thu hai va GIU CHO du hai dong. Khong giu cho thi the
 * nao ten mot dong se thap hon han cac the ben canh.
 */
.cps-review__sp-ten {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-height: 42px;
	overflow: hidden;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-semibold);
}

.cps-review__sp:hover .cps-review__sp-ten {
	text-decoration: underline;
}

.cps-review__sp-gia,
.cps-review__sp-gia .price,
.cps-review__sp-gia ins {
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary-text);
	text-decoration: none;
}

.cps-review__sp-gia del,
.cps-review__sp-gia del .amount {
	margin-left: var(--cps-sp-1);
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-muted);
}

@media (max-width: 767px) {
	.cps-review {
		margin-top: var(--cps-sp-4);
	}

	/*
	 * Man hinh hep: the giu be rong co dinh va hang cuon ngang - chia deu
	 * thi moi the chi con hon mot tram pixel, video xem khong ra gi.
	 */
	.cps-review__the {
		flex: 0 0 200px;
		max-width: 200px;
	}
}