/*
 * Trang chi tiet san pham.
 *
 * Moi con so trong file nay (co chu, khoang cach, bo goc, mau) deu lay tu
 * ban do computed style cua cellphones.com.vn - xem bang token trong tokens.css.
 *
 * Muc luc:
 *  1. BO CUC CHUNG
 *  2. HEADER SAN PHAM
 *  3. GALLERY
 *  4. CHON PHIEN BAN / MAU SAC
 *  5. NUT MUA HANG
 *  6. THANH MUA HANG DINH
 *  7. SO SANH PHIEN BAN
 *  8. KHUYEN MAI DI KEM
 *  9. GOI BAO HANH
 * 10. MUA KEM GIA SOC
 * 11. KHOI GIA
 * 12. TINH NANG NOI BAT (slide dau bo anh)
 * 13. CAM KET SAN PHAM
 * 14. CAROUSEL NGANG (dung chung)
 * 15. UU DAI THANH TOAN
 * 16. FLASH SALE
 * 17. BANG THONG SO KY THUAT
 * 18. POPUP
 * 19. CO THE BAN CUNG THICH
 * 20. MAN HINH NHO
 */

/* ================================================================
   1. BO CUC CHUNG
   ================================================================ */

.cps-product {
	font-family: var(--cps-font);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	color: var(--cps-c-text);
}

.cps-product *,
.cps-product *::before,
.cps-product *::after {
	box-sizing: border-box;
}

/* Hai cot bang nhau 592px, cach nhau 16px - dung nhu trang mau. */
.cps-product__main {
	display: flex;
	gap: var(--cps-col-gap);
	align-items: flex-start;
}

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

.cps-product__bottom {
	display: flex;
	gap: var(--cps-col-gap);
	justify-content: space-between;
	align-items: flex-start;
	margin-top: var(--cps-sp-8);
}

.cps-product__content-left {
	flex: 0 1 var(--cps-content-left);
	min-width: 0;
}

.cps-product__content-right {
	flex: 0 0 var(--cps-content-right);
}

/* ================================================================
   2. HEADER SAN PHAM
   ================================================================ */

.cps-product-header {
	margin-bottom: var(--cps-sp-4);
}

.cps-product-title {
	margin: 0 10px 0 0;
	font-size: var(--cps-fs-xl);
	line-height: var(--cps-lh-xl);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-rating {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-1);
	min-height: 24px;
	margin-top: var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-semibold);
}

.cps-rating__count {
	font-weight: var(--cps-fw-regular);
}

.cps-rating__star .cps-icon {
	width: 18px;
	height: 18px;
	fill: #fbbf24;
	vertical-align: -3px;
}

.cps-rating__value {
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-strong);
}

.cps-rating__count {
	color: var(--cps-c-text);
	text-decoration: none;
}

.cps-rating__count:hover {
	text-decoration: underline;
}

/* Hang: Yeu thich / Hoi dap / Thong so / So sanh - cach nhau 20px. */
.cps-product-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-5);
	margin-top: var(--cps-sp-2);
	padding-left: 2px;
}

/* Trang mau: ca chu lan icon deu mau xanh var(--cps-c-primary-text), chu 14px/500. */
.cps-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-blue);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.cps-action .cps-icon {
	width: 20px;
	height: 20px;
}

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

/* Da thich: to dac trai tim va doi sang mau do. */
.cps-action--wishlist.is-active .cps-icon {
	fill: var(--cps-c-primary);
	stroke: var(--cps-c-primary);
}

/* ================================================================
   3. GALLERY
   ================================================================ */

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

.cps-gallery__main {
	position: relative;
	border: 1px solid var(--cps-c-border-gallery);
	border-radius: var(--cps-r-lg);
	overflow: hidden;
	background: var(--cps-c-bg);
}

.cps-gallery__track {
	position: relative;
	/* Giu ty le co dinh de trang khong bi nhay khi anh tai xong. */
	aspect-ratio: 592 / 325;
}

.cps-gallery__slide {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.cps-gallery__slide.is-active {
	display: flex;
}

.cps-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cps-gallery__video-play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Anh nen video phu kin khung thay vi thu vua: anh YouTube ty le 16:9, de
   "contain" thi con hai vien trong o tren duoi. */
.cps-gallery__slide--video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nut phat: dung dau hieu YouTube (chu nhat do bo goc + tam giac trang)
   thay vi mot tam giac trong vong tron den. Trang mau dung dung cai nay, va
   no cung noi ngay video se mo o dau. */
.cps-gallery__video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.cps-gallery__video-icon .cps-youtube-play {
	width: 68px;
	height: 48px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Ro chuot vao thi nut to len mot chut - bao rang bam duoc. */
.cps-gallery__video-play:hover .cps-gallery__video-icon {
	transform: translate(-50%, -50%) scale(1.08);
}

.cps-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-full);
	background: rgba(255, 255, 255, 0.9);
	color: var(--cps-c-strong);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cps-gallery__main:hover .cps-gallery__nav {
	opacity: 1;
}

.cps-gallery__nav .cps-icon {
	width: 14px;
	height: 14px;
}

.cps-gallery__nav--prev {
	left: var(--cps-sp-3);
}

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

.cps-gallery__nav--next {
	right: var(--cps-sp-3);
}

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

/* Dai anh nho: khung ngoai lam moc toa do cho hai nut truot. */
.cps-gallery__thumbs {
	position: relative;
	margin-top: var(--cps-sp-2);
}

/* Cua so nhin: cat phan dai vuot ra ngoai. */
.cps-gallery__thumbs-viewport {
	overflow: hidden;
}

/* Dai truot bang transform chu khong bang scroll: nhu vay cuon muot va
   khong bao gio hien thanh cuon o bat ky he dieu hanh nao. */
.cps-gallery__thumbs-track {
	display: flex;
	gap: 10px;
	padding: 1px;
	transition: transform 0.3s ease;
}

/* O anh nho 64x64 nhu trang mau.

   Vien ve bang box-shadow chu khong phai border hay outline: box-shadow
   khong an vao kich thuoc o, nen o dang chon (vien do) khong bi xe dich mot
   pixel so voi cac o khac - loi rat de gap khi dung border. */
.cps-gallery__thumb {
	position: relative;
	flex: none;
	width: var(--cps-h-thumb);
	height: var(--cps-h-thumb);
	padding: 2px;
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	box-shadow: 0 0 0 1px #d6d6d6;
	cursor: pointer;
	transition: box-shadow 0.12s ease;
}

.cps-gallery__thumb:hover {
	box-shadow: 0 0 0 1px var(--cps-c-primary);
}

.cps-gallery__thumb.is-active {
	box-shadow: 0 0 0 1px var(--cps-c-primary);
}

.cps-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

/* Hai nut truot: mot dai 52px phu len dau dai anh, to bang chuyen mau tu
   trang sang trong suot - anh cuoi bi mo dan di, nhin la biet con nua. */
.cps-gallery__thumbs-nav {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	width: 52px;
	height: var(--cps-h-thumb);
	padding: 0;
	border: 0;
	color: var(--cps-c-strong);
	cursor: pointer;
}

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

.cps-gallery__thumbs-nav .cps-icon {
	width: 16px;
	height: 16px;
}

.cps-gallery__thumbs-nav--prev {
	left: 0;
	justify-content: flex-start;
	background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, 0));
}

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

.cps-gallery__thumbs-nav--next {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(270deg, #fff 45%, rgba(255, 255, 255, 0));
}

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

/* O video trong dai anh nho: icon do + chu "Video", khong dung anh thu nho
   cua YouTube (ty le 16:9 nhet vao o vuong 64px se bi cat hoac vien den). */
.cps-gallery__thumb--video {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.cps-gallery__thumb-video-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary);
	color: var(--cps-c-on-primary);
}

.cps-gallery__thumb-video-icon .cps-icon {
	width: 11px;
	height: 11px;
	margin-left: 1px;
}

.cps-gallery__thumb-video-text {
	font-size: 11px;
	line-height: 14px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-strong);
}

/* ================================================================
   6. CHON PHIEN BAN / MAU SAC
   ================================================================ */

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

.cps-box__title {
	margin-bottom: var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	color: var(--cps-c-text);
}

/* minmax(0, 1fr) thay vi 1fr: bao dam 3 cot luon bang nhau ngay ca khi
   noi dung ben trong dai hon o (vi du ten mau dai). */
.cps-product .cps-variant-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cps-sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O chon dung outline thay vi border: outline khong chiem cho nen o khong
   bi nhay 1px khi chuyen tu trang thai thuong sang trang thai dang chon. */
.cps-variant {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cps-h-variant);
	padding: 2px var(--cps-sp-2);
	border: 0;
	border-radius: var(--cps-r-sm);
	outline: 1px solid var(--cps-c-border);
	outline-offset: -1px;
	background: var(--cps-c-bg);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-strong);
	text-align: center;
	cursor: pointer;
	transition: outline-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Ro chuot: dam vien lai va to nen hong rat nhat. Chi doi mau vien thoi thi
   o mot o rong 1px nhin gan nhu khong thay gi. */
.cps-variant:hover {
	outline-color: var(--cps-c-primary-light);
	background: #fff8f9;
}

/* DAU HIEU KHI DI BAN PHIM

   .cps-variant ve vien cua no bang "outline" - ma trinh duyet cung dung
   dung thuoc tinh do de ve vong focus. Vay la vong focus bi de mat: di
   ban phim qua cac o phien ban thi KHONG THAY o nao dang duoc chon.

   Nen ve vong focus bang box-shadow. Trang mau cung khong co dau hieu
   focus, nhung day la cho nen lam tot hon mau chu khong bat chuoc.

   Dung :focus-visible chu khong phai :focus - de vong nay chi hien khi di
   ban phim, bam chuot thi khong hien (bam chuot thi nguoi dung da biet
   minh vua bam vao dau roi).

   Hai cau truc khac nhau nen phai bat rieng:
     - o phien ban: chinh no la <button>
     - o mau sac:   <li> boc mot <button> ben trong, vien ve tren <li>
   Tach thanh hai quy tac roi vi trinh duyet cu khong hieu :has() se bo
   qua CA nhom neu viet chung. */
/* Ghi day du outline chu khong chi doi mau: Flatsome dat san
   "button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }".
   Neu o day chi doi mau thi do day 2px cua ho van giu, o CHUA chon lai co
   vien day bang o DA chon - nhin de nham. */
.cps-variant:focus-visible {
	outline: 1px solid var(--cps-c-primary);
	outline-offset: -1px;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-variant:has(.cps-variant__button:focus-visible) {
	outline: 1px solid var(--cps-c-primary);
	outline-offset: -1px;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

/* Nut ben trong o mau khong tu ve vong focus nua - vong da ve o the <li>
   bao ngoai, de ca hai se thanh hai vong long nhau. */
.cps-variant__button:focus-visible {
	outline: none;
}

/* Vien do cua o dang chon.

   Phai liet ke ca ba truong hop, khong duoc viet gon lai mot dong. Ly do:
   Flatsome co san quy tac

       button:focus:not(:focus-visible) { outline: none }

   manh hon (0,2,1) so voi ".cps-variant.is-active" (0,2,0). Hau qua thay
   duoc bang mat: bam chuot chon "256GB" xong thi VIEN DO BIEN MAT - khach
   khong con biet minh vua chon dung cai gi, mai den khi bam ra cho khac
   vien moi hien lai.

   Viet ".cps-variant.is-active:focus:not(:focus-visible)" thanh (0,4,0),
   du de thang. */
.cps-variant.is-active,
.cps-variant.is-active:focus,
.cps-variant.is-active:focus:not(:focus-visible),
.cps-variant.is-active:focus-visible {
	outline: 2px solid var(--cps-c-primary);
	outline-offset: -2px;
}

.cps-variant.is-active:has(.cps-variant__button:focus-visible) {
	outline: 2px solid var(--cps-c-primary);
	outline-offset: -2px;
}

/* O CHUA chon cung dinh dung quy tac tren cua Flatsome khi vua bam chuot
   vao - vien 1px cua no cung bi xoa. Giu lai. */
.cps-variant:focus:not(:focus-visible) {
	outline: 1px solid var(--cps-c-border);
	outline-offset: -1px;
}

.cps-variant.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* O het hang thi ro chuot vao cung khong doi gi - tranh moi goi bam vao mot
   thu khong bam duoc. */
.cps-variant.is-disabled:hover {
	outline-color: var(--cps-c-border);
	background: var(--cps-c-bg);
}

.cps-variant__name {
	font-weight: var(--cps-fw-regular);
}

/* O mau sac: anh 40px ben trai, ten + gia xep doc ben phai.
   Cao 54px thay vi 50px cho khop trang mau (o mau cao hon o phien ban). */
.cps-variant--color {
	min-height: 54px;
	padding: 0;
}

.cps-variant__button {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	width: 100%;
	height: 100%;
	min-height: var(--cps-h-variant);
	padding: var(--cps-sp-1) var(--cps-sp-3);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: none;
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	text-align: left;
	cursor: inherit;
}

.cps-variant__thumb {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

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

.cps-variant--color .cps-variant__name {
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-strong);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cps-variant--color .cps-variant__price {
	font-size: var(--cps-fs-md);
	color: var(--cps-c-text);
}

/* ================================================================
   7. NUT MUA HANG
   ================================================================ */

.cps-cta {
	margin-bottom: var(--cps-sp-4);
}

.cps-cta__row {
	display: flex;
	gap: var(--cps-sp-2);
	align-items: stretch;
}

.cps-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 0;
	border-radius: var(--cps-r-md);
	font-family: inherit;
	cursor: pointer;
	transition: filter 0.12s ease;
}

.cps-btn:hover {
	filter: brightness(1.05);
}

.cps-btn--buy {
	flex: 1 1 auto;
	min-height: var(--cps-h-cta);
	background: var(--cps-c-cta);
	color: var(--cps-c-on-primary);
}

.cps-btn--buy.is-disabled,
.cps-btn--buy:disabled {
	background: #d6d6d6;
	cursor: not-allowed;
	filter: none;
}

.cps-btn__label {
	font-size: var(--cps-fs-base);
	line-height: 20px;
	font-weight: var(--cps-fw-bold);
	text-transform: uppercase;
}

.cps-btn__sub {
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-xs);
	font-weight: var(--cps-fw-regular);
}

.cps-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

.cps-cta__message {
	margin: var(--cps-sp-2) 0 0;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-primary-text);
}

.cps-cta__message.is-success {
	color: #16a34a;
}

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

/* ================================================================
   9. THANH MUA HANG DINH
   ================================================================ */

.cps-sticky-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--cps-z-bar);
	background: var(--cps-c-bg);
	box-shadow: var(--cps-shadow-bar);
}

.cps-sticky-bar[hidden] {
	display: none;
}

.cps-sticky-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-4);
	min-height: 80px;
	padding-top: var(--cps-sp-3);
	padding-bottom: var(--cps-sp-3);
}

.cps-sticky-bar__product {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-3);
	min-width: 0;
}

.cps-sticky-bar__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.cps-sticky-bar__name {
	margin: 0;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cps-sticky-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-3);
}

.cps-sticky-bar__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
}

.cps-sticky-bar__price .cps-price {
	font-size: var(--cps-fs-lg);
}

.cps-sticky-bar__price .cps-price-base {
	font-size: var(--cps-fs-md);
}

.cps-btn--sm {
	min-height: 40px;
	padding: 0 var(--cps-sp-4);
}

.cps-btn--sm .cps-btn__label {
	font-size: var(--cps-fs-md);
}

/* ================================================================
   7. SO SANH PHIEN BAN
   ================================================================ */

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

.cps-compare__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-sp-2);
	min-height: 42px;
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-link);
	text-decoration: none;
}

.cps-compare__link .cps-icon {
	width: 16px;
	height: 16px;
}

.cps-compare__link:hover {
	text-decoration: underline;
}

/* ================================================================
   8. KHUYEN MAI DI KEM
   ================================================================ */

.cps-promo {
	margin-bottom: var(--cps-sp-4);
	padding: var(--cps-sp-2) var(--cps-sp-3) var(--cps-sp-3);
	border: 1px solid var(--cps-c-promo-border);
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-promo-bg);
}

.cps-promo__title {
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-text);
}

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

.cps-promo__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-2);
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
}

.cps-promo__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary);
	font-size: 11px;
	line-height: 1;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-on-primary);
}

.cps-promo__more {
	margin-left: var(--cps-sp-1);
	color: var(--cps-c-link);
	text-decoration: none;
	white-space: nowrap;
}

.cps-promo__more:hover {
	text-decoration: underline;
}

.cps-promo__note {
	margin: var(--cps-sp-2) 0 0;
	font-size: var(--cps-fs-xs);
	line-height: 16px;
	color: #71717a;
}

/* ----- Thu cu len doi ----- */

.cps-tradein {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	margin-top: var(--cps-sp-3);
	padding-top: var(--cps-sp-3);
	border-top: 1px dashed var(--cps-c-promo-border);
}

.cps-tradein__price {
	margin: 0;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	color: var(--cps-c-text);
}

.cps-tradein__price strong {
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary-text);
}

.cps-tradein__sub {
	margin: 2px 0 0;
	font-size: var(--cps-fs-xs);
	line-height: 16px;
	color: #71717a;
}

.cps-tradein__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--cps-sp-4);
	border: 1px solid var(--cps-c-primary);
	border-radius: var(--cps-r-sm);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
	text-decoration: none;
}

.cps-tradein__btn:hover {
	background: var(--cps-c-primary);
	color: var(--cps-c-on-primary);
}

/* ================================================================
   9. GOI BAO HANH
   ================================================================ */

.cps-warranty {
	margin-bottom: var(--cps-sp-4);
	padding: var(--cps-sp-4);
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg-grey);
}

.cps-warranty__list {
	max-height: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
}

.cps-warranty__item {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-2) 0;
	border-bottom: 1px solid #e9e9e9;
	font-size: var(--cps-fs-md);
	line-height: 20px;
}

.cps-warranty__item:last-child {
	border-bottom: 0;
}

.cps-warranty__label {
	display: flex;
	align-items: flex-start;
	gap: var(--cps-sp-2);
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.cps-warranty__check,
.cps-bundle__check {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--cps-c-primary);
}

.cps-warranty__price {
	flex: none;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-strong);
}

/* Lien ket "Chi tiet": mot vien thuoc nho, luon nam GON TREN MOT HANG.

   Truoc day o day khong co quy tac nao ca nen no thanh mot khoi rong 38px
   va chu bi be doi thanh "Chi" / "tiet". Ba thu chua no lai:
     flex: none      - khong cho o co lai theo cho trong con thua
     white-space     - cam xuong dong giua hai chu

   Vien thuoc cao 26px con dong gia chi cao 20px, nen keo len 3px de tim hai
   thu trung nhau - o cha xep theo flex-start chu khong can giua. */
.cps-warranty__more {
	flex: none;
	margin-top: -3px;
	padding: 3px 10px;
	border: 1px solid #f2dd8a;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary-pale);
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.cps-warranty__more:hover,
.cps-warranty__more:focus-visible {
	border-color: var(--cps-c-primary);
	background: var(--cps-c-primary);
	color: var(--cps-c-on-primary);
}

/* ================================================================
   10. MUA KEM GIA SOC
   ================================================================ */

.cps-bundle {
	margin-bottom: var(--cps-sp-4);
	padding: var(--cps-sp-4);
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-xl);
}

.cps-bundle__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cps-bundle__desc {
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-md);
	line-height: 20px;
	color: var(--cps-c-primary-text);
}

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

.cps-bundle__item {
	padding: var(--cps-sp-2) 0;
	border-bottom: 1px solid #e9e9e9;
}

.cps-bundle__item:last-child {
	border-bottom: 0;
}

.cps-bundle__label {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	margin: 0;
	cursor: pointer;
}

.cps-bundle__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

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

.cps-bundle__name {
	font-size: var(--cps-fs-md);
	line-height: 20px;
	color: var(--cps-c-strong);
	text-decoration: none;
}

.cps-bundle__price {
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

.cps-bundle__price del {
	margin-left: var(--cps-sp-1);
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-muted);
}

/* ================================================================
   11. KHOI GIA
   ================================================================

   Day la thu nguoi mua nhin dau tien khi quyet dinh, nen no phai la khoi
   dam nhat trong ca cot phai:

     [ gia ban do, 32px ]  [ gia goc gach ngang ]  [ huy hieu -14% ]
     [ Tiet kiem 5.000.000d ]

   Nen la mot dai mau hong rat nhat vien do nhat - du de tach khoi nen trang
   ma khong lan at nut MUA NGAY ngay ben duoi. */

.cps-price-box {
	margin-bottom: var(--cps-sp-4);
	padding: var(--cps-sp-3) var(--cps-sp-4);
	border: 1px solid #f2dd8a;
	border-radius: var(--cps-r-xl);
	background: linear-gradient(135deg, #fffae0 0%, #fffdf0 60%, #fffdf0 100%);
}

.cps-price-box__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cps-sp-2) var(--cps-sp-3);
}

/* Gia ban: to va DO. Truoc day gia mau den gan nhu chim vao nen; do la mau
   dat ra cho gia trong ca trang (the san pham, thanh mua hang dinh) nen o
   day cung phai vay. */
.cps-price {
	font-size: 32px;
	line-height: 38px;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary-text);
	letter-spacing: -0.5px;
}

.cps-price-base {
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-muted);
	text-decoration: line-through;
}

.cps-price-base[hidden] {
	display: none;
}

/* Huy hieu muc giam: nen do dac, chu trang - doc duoc tu xa. */
.cps-price-off {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary);
	font-size: var(--cps-fs-md);
	line-height: 20px;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-on-primary);
	white-space: nowrap;
}

.cps-price-off[hidden] {
	display: none;
}

/* Dong tiet kiem: noi ro bang tien mat khach do duoc bao nhieu - con so nay
   thuyet phuc hon mot con so phan tram. */
.cps-price-box__saving {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--cps-sp-2) 0 0;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	color: var(--cps-c-text);
}

.cps-price-box__saving[hidden] {
	display: none;
}

.cps-price-box__saving .cps-icon {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--cps-c-primary-text);
}

.cps-price-box__saving strong {
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

/* ================================================================
   12. TINH NANG NOI BAT (slide dau bo anh)
   ================================================================

   Trang mau: anh san pham 200x200 ben trai, noi dung ben phai,
   tren nen chuyen mau nhat. Tieu de 18px/600 chu KHONG viet hoa. */

/* Trang mau: nen chuyen mau hong -> cam, TOAN BO chu mau trang.
   Truoc day dung nen nhat va chu den nen nhin khac han ban goc. */
.cps-gallery__slide--ksp {
	align-items: center;
	padding: 10px;
	border-radius: 5px;
	background: linear-gradient(90deg, #dd5e89 0%, #f7bb97 100%);
	color: #fff;
}

.cps-ksp {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	width: 100%;
	color: #fff;
}

.cps-ksp__image {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	padding: 10px;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg);
}

.cps-gallery__slide--ksp .cps-ksp__image img {
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 180px;
	object-fit: contain;
}

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

.cps-ksp__title {
	margin: 0 0 5px;
	font-size: var(--cps-fs-lg);
	line-height: 20.25px;
	font-weight: var(--cps-fw-semibold);
	color: #fff;
	text-transform: uppercase;
}

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

.cps-ksp__list li {
	position: relative;
	margin: 0 0 5px;
	padding-left: var(--cps-sp-3);
	font-size: var(--cps-fs-md);
	line-height: 20.3px;
	color: #fff;
}

.cps-ksp__list li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: var(--cps-r-full);
	background: #fff;
}

.cps-gallery__thumb--ksp {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 12px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading-2);
	text-align: center;
}

/* ================================================================
   13. CAM KET SAN PHAM
   ================================================================

   Trang mau xep LUOI 2 COT, moi o 291x148, chu 12px/18px.
   Tieu de 16px/24px (khac voi tieu de khoi 20px o cac muc khac). */

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

/* Tieu de: 16px/700 mau #1f1f1f, le 10px tren duoi - dung nhu trang mau,
   khac voi tieu de khoi 20px o cac muc khac. */
.cps-commit__title {
	margin: 10px 0;
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-bold);
	color: #1f1f1f;
}

/* Luoi 2 hang, tran sang ngang: moi "trang" gom 4 o (2 cot x 2 hang).
   Viet kem .cps-commit__carousel de thang quy tac .cps-carousel__track
   (dat display:flex) nam o muc ben duoi. */
.cps-commit__carousel .cps-commit__grid,
.cps-commit__grid {
	display: grid;
	grid-template-rows: repeat(2, minmax(148px, auto));
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 10px) / 2);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O cam ket: nen xam #f4f4f4, bo goc 16px, KHONG vien, dem 12px.

   Icon nam TREN, chu nam DUOI - truoc day o day xep icon trai / chu phai,
   khac han trang mau. */
.cps-commit__item {
	display: block;
	margin: 0;
	padding: var(--cps-sp-3);
	border: 0;
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg-grey);
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	color: #4a4a4a;
	overflow: hidden;
}

/* Khung icon: o vuong 24px nen chuyen mau do, icon trang nhat nam giua. */
.cps-commit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin-bottom: 10px;
	border-radius: 4px;
	background: linear-gradient(231deg, #ffe566 -68.73%, #d9b400 91.14%);
}

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

/* Anh do nguoi dung tu tai len thi de nguyen mau anh, khong to nen do
   ben duoi - anh thuong da co mau san, chong len nhau se ban. */
.cps-commit__icon--img {
	display: block;
	background: none;
	object-fit: contain;
}

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

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

/* ================================================================
   14. CAROUSEL NGANG
   ================================================================
   Da chuyen sang assets/css/carousel.css de trang chu dung chung. Giu so
   muc de doc file theo muc luc khong bi hut mot muc. */

/* ================================================================
   15. UU DAI THANH TOAN
   ================================================================ */

.cps-offers {
	margin-bottom: var(--cps-sp-4);
	padding: var(--cps-sp-2) var(--cps-sp-3) var(--cps-sp-3);
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg-grey);
}

.cps-offers__title,
.cps-warranty__title,
.cps-bundle__title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: 26px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

/* Icon the gia ve bang duong vien nen doi mau qua "color", khong dat fill. */
.cps-offers__title .cps-icon {
	width: 18px;
	height: 18px;
	color: var(--cps-c-primary-text);
}

/* Trang mau: o 232x75, nen trang, VIEN 1px #e9e9e9, bo goc 10px, dem 8px 12px. */
.cps-offers__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 232px;
	min-height: 75px;
	padding: var(--cps-sp-2) var(--cps-sp-3);
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg);
}

.cps-offers__logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.cps-offers__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	color: var(--cps-c-text);
}

.cps-offers__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-2);
	margin-top: auto;
}

.cps-offers__deadline {
	font-size: 11px;
	line-height: 16px;
	color: #71717a;
}

.cps-offers__more {
	font-size: 11px;
	color: var(--cps-c-link);
	text-decoration: none;
	white-space: nowrap;
}

.cps-offers__more:hover {
	text-decoration: underline;
}

/* ================================================================
   16. FLASH SALE
   ================================================================

   Trang mau cao 182px: dai bang ten chuong trinh, than khoi co dong ho
   dem nguoc, va thanh tien do so luong da ban. */

.cps-flash {
	margin-bottom: var(--cps-sp-4);
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-cta);
	color: var(--cps-c-on-primary);
	overflow: hidden;
}

.cps-flash__head {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	min-height: 69px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	background: rgba(0, 0, 0, 0.12);
}

.cps-flash__badge {
	flex: none;
	padding: 3px 10px;
	border-radius: var(--cps-r-sm);
	background: #fff;
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-bold);
	letter-spacing: 0.04em;
	color: var(--cps-c-primary-text);
}

.cps-flash__price {
	font-size: var(--cps-fs-md);
	line-height: 20px;
}

.cps-flash__price strong {
	font-size: var(--cps-fs-xl);
	font-weight: var(--cps-fw-bold);
}

.cps-flash__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	min-height: 78px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
}

.cps-flash__invite {
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	font-weight: var(--cps-fw-medium);
}

.cps-flash__timer {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.cps-flash__label {
	font-size: 11px;
	line-height: 16px;
	opacity: 0.9;
}

.cps-flash__clock {
	display: flex;
	align-items: center;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}

.cps-flash__unit {
	min-width: 28px;
	padding: 2px 4px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-bold);
	text-align: center;
}

.cps-flash__progress {
	padding: 0 var(--cps-sp-4) var(--cps-sp-3);
}

.cps-flash__bar {
	position: relative;
	height: 18px;
	border-radius: var(--cps-r-full);
	background: rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.cps-flash__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: var(--cps-r-full);
	background: linear-gradient(90deg, #fbbf24, #fde68a);
}

.cps-flash__bar-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: var(--cps-fw-semibold);
	color: #fff;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   17. BANG THONG SO KY THUAT
   ================================================================

   Trang mau:
     tieu de     20px/600, line-height 22.5px, mau #363636
     nut Xem tat ca  98x35, 12px/500, mau var(--cps-c-primary-text), nen trang, bo goc 10px
     bang        rong 592, bo goc 10px, vien #e9e9e9
     dong        14px/21px, o dem 8px 16px
     cot nhan    rong 30%, nen #e9e9e9 */

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

.cps-tech__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	min-height: 35px;
	margin-bottom: var(--cps-sp-2);
}

.cps-tech__title {
	margin: 0;
	font-size: var(--cps-fs-xl);
	line-height: 22.5px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading-2);
}

.cps-tech__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: none;
	min-height: 35px;
	padding: 5px 12px;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg);
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-blue);
	cursor: pointer;
}

.cps-tech__more:hover {
	background: #fffae0;
}

.cps-tech__more .cps-icon {
	width: 8px;
	height: 12px;
	transform: rotate(-90deg);
}

/* ----- Bang thong so (dung chung ca ngoai trang lan trong popup) ----- */

.cps-product .cps-spec-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--cps-c-border-table);
	border-radius: var(--cps-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
}

.cps-product .cps-spec-table td {
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-bottom: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-text);
	text-align: left;
	vertical-align: top;
}

.cps-product .cps-spec-table tr:last-child td {
	border-bottom: 0;
}

.cps-product .cps-spec-table__label {
	width: 30%;
	border-right: 1px solid var(--cps-c-border);
	background: var(--cps-c-bg-soft);
}

/* Gia tri nhieu dong: moi dong mot the <p>, khong gach dau dong. */
.cps-spec-table__value p {
	margin: 0;
}

/* Bang ngoai trang chi in 7 dong dau (xem tech-summary.php); nut nay noi ro
   con bao nhieu dong nua va mo dung cai popup ma nut o tieu de van mo. */
.cps-tech__expand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 36px;
	margin-top: var(--cps-sp-2);
	padding: 6px 12px;
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-md);
	background: #fff;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-blue);
	cursor: pointer;
}

.cps-tech__expand:hover {
	border-color: var(--cps-c-blue);
	background: #fffae0;
}

.cps-tech__expand .cps-icon {
	width: 8px;
	height: 12px;
	transform: rotate(90deg);
}

/* ================================================================
   18. POPUP
   ================================================================ */

.cps-modal {
	position: fixed;
	inset: 0;
	z-index: var(--cps-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cps-sp-4);
}

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

.cps-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.cps-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 650px;
	max-height: 90vh;
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg);
	overflow: hidden;
}

/* JS dat tabindex="-1" roi dua con tro vao day khi mo popup. Dat bang ma
   lenh nen khong sinh :focus-visible - khong can ve vong sang quanh hop. */
.cps-modal__dialog:focus {
	outline: none;
}

.cps-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	min-height: 56px;
	padding: var(--cps-sp-4);
}

.cps-modal__title {
	margin: 0;
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: var(--cps-r-full);
	background: #f4f4f4;
	color: var(--cps-c-text);
	cursor: pointer;
}

.cps-modal__close .cps-icon {
	width: 10px;
	height: 10px;
}

/* Thanh tab dinh: bam mot nhom thi cuon toi dung nhom do ben duoi. */
.cps-modal__tabs {
	display: flex;
	flex: none;
	gap: var(--cps-sp-4);
	min-height: 54px;
	padding: 0 var(--cps-sp-4);
	border-bottom: 1px solid var(--cps-c-border);
	background: var(--cps-c-bg);
	overflow-x: auto;
	scrollbar-width: none;
}

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

.cps-modal__tab {
	position: relative;
	flex: none;
	padding: var(--cps-sp-4) 0;
	font-size: var(--cps-fs-md);
	line-height: 21px;
	font-weight: var(--cps-fw-regular);
	color: #71717a;
	white-space: nowrap;
	cursor: pointer;
}

.cps-modal__tab.is-active {
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

.cps-modal__tab.is-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--cps-c-primary);
}

.cps-modal__body {
	flex: 1 1 auto;
	padding: var(--cps-sp-4) var(--cps-sp-6);
	overflow-y: auto;
	scroll-behavior: smooth;
}

.cps-spec-group {
	padding-bottom: var(--cps-sp-3);
}

.cps-spec-group__title {
	margin: var(--cps-sp-2) 0;
	font-size: var(--cps-fs-base);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading-2);
}

/* Trong popup, ten thong so la chu xanh giong lien ket - dung nhu trang mau.
   Bang ngoai trang van giu chu xam binh thuong.
   Viet kem "td" de thang quy tac ".cps-product .cps-spec-table td" o tren. */
.cps-modal--specs .cps-spec-table td.cps-spec-table__label {
	color: var(--cps-c-blue);
}

/* ================================================================
   19. CO THE BAN CUNG THICH
   ================================================================

   Dung lai the san pham cua trang danh muc (product-card.css) dat trong
   carousel ngang dung chung o muc 14. The trong luoi tu chia theo phan tram
   be ngang cua luoi; o day carousel khong co be ngang co dinh nen phai neo
   the ve dung 240px - bang mot cot cua luoi 5 cot trong khung 1264px. */

.cps-suggested {
	margin-top: var(--cps-sp-8);
	margin-bottom: var(--cps-sp-6);
}

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

.cps-suggested__title {
	margin: 0;
	font-size: var(--cps-fs-xl);
	line-height: 22.5px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading-2);
}

/* Khe giua cac the rong hon mot chut so voi carousel uu dai, cho khop voi
   khe 16px cua luoi danh muc. */
.cps-suggested .cps-carousel__track {
	gap: var(--cps-sp-4);
	/* Chua bong do cua the, neu khong vien duoi bi vung cuon cat cut. */
	padding: 4px 0 var(--cps-sp-2);
}

.cps-suggested__item {
	width: 240px;
}

/* Trong luoi, the tu chia theo phan tram; trong carousel thi o cha da co
   be ngang co dinh nen the chi viec lap day o. */
.cps-suggested__item .cps-card {
	flex: 1 1 auto;
	max-width: none;
	height: 100%;
}

/* ================================================================
   20. MAN HINH NHO
   ================================================================

   Ba nguong, do truc tiep tren trang mau:
     >= 1232px : container co dinh 1200px, luoi bien the 3 cot
     768-1231px: container co gian, van 2 cot, luoi bien the 2 cot
     < 768px   : xep doc 1 cot, an cot ben phai, thanh mua hang co dinh day
   ================================================================ */

/* ----- Tablet va desktop hep ----- */
@media (max-width: 1231px) {

	/* Luoi bien the con 2 cot, giong trang mau o do rong nay. */
	.cps-product .cps-variant-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cps-product__content-left {
		flex: 1 1 auto;
	}

	.cps-product__content-right {
		flex: 0 0 283px;
	}
}

/* ----- Dien thoai ----- */
@media (max-width: 767px) {

	/* Xep doc: khoi trai (ten, anh, thong so) truoc, roi den gia va bien the. */
	.cps-product__main,
	.cps-product__bottom {
		display: block;
	}

	.cps-product__col--right {
		margin-top: var(--cps-sp-5);
	}

	/* Trang mau an hoan toan cot ben phai o dien thoai. */
	.cps-product__content-right {
		display: none;
	}

	.cps-product-title {
		margin-right: 0;
		font-size: var(--cps-fs-lg);
		line-height: 27px;
	}

	.cps-product-header__actions {
		gap: var(--cps-sp-4);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.cps-product-header__actions::-webkit-scrollbar {
		display: none;
	}

	.cps-gallery__track {
		aspect-ratio: 355 / 220;
	}

	/* Slide tinh nang noi bat: man hinh hep khong du cho ca anh lan chu,
	   nen bo anh di va cho phan chu cuon trong khung. */
	.cps-gallery__slide--ksp {
		align-items: flex-start;
		padding: var(--cps-sp-3);
		overflow-y: auto;
	}

	.cps-ksp {
		display: block;
	}

	.cps-ksp__image {
		display: none;
	}

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

	.cps-ksp__list li {
		font-size: var(--cps-fs-xs);
		line-height: 17px;
	}

	/* Cam ket: mot cot, o thap hon cho vua man hinh. */
	.cps-commit__carousel .cps-commit__grid,
	.cps-commit__grid {
		grid-template-rows: repeat(2, minmax(120px, auto));
		grid-auto-columns: 100%;
	}

	/* Khoi gia: ha co chu xuong cho gia, gia goc va huy hieu giam cung nam
	   gon mot hang tren man hinh 375px - de 32px thi huy hieu bi day xuong
	   dong rieng, khoi cao them 30px ma khong ro hon. */
	.cps-price-box__row {
		flex-wrap: wrap;
		gap: var(--cps-sp-1) 10px;
	}

	.cps-price {
		font-size: 26px;
		line-height: 32px;
	}

	.cps-price-off {
		padding: 2px 8px;
		font-size: var(--cps-fs-xs);
		line-height: 18px;
	}

	/* Flash sale: dong ho xuong hang rieng cho de doc. */
	.cps-flash__main {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cps-sp-2);
	}

	.cps-flash__timer {
		align-items: flex-start;
	}

	/* Tren dien thoai nguoi dung vuot ngang nen an nut mui ten. */
	.cps-gallery__nav {
		display: none;
	}

	.cps-variant {
		min-height: 52px;
		font-size: var(--cps-fs-xs);
	}

	.cps-variant--color {
		min-height: 52px;
	}

	.cps-variant__thumb {
		width: 32px;
		height: 32px;
	}

	.cps-variant--color .cps-variant__price {
		font-size: var(--cps-fs-xs);
	}

	.cps-section-title {
		font-size: var(--cps-fs-lg);
		line-height: 27px;
	}

	.cps-product .cps-tech__table td,
	.cps-product .cps-tech__table th {
		padding: var(--cps-sp-2) var(--cps-sp-3);
		font-size: var(--cps-fs-sm);
	}

	.cps-content__body.is-collapsed {
		max-height: 400px;
	}

	/* Thanh mua hang: 2 hang (gia o tren, nut o duoi) nhu ban mobile cua trang mau. */
	.cps-sticky-bar__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--cps-sp-2);
		min-height: 108px;
		padding: var(--cps-sp-3) var(--cps-sp-4);
	}

	.cps-sticky-bar__product {
		display: none;
	}

	.cps-sticky-bar__actions {
		justify-content: space-between;
	}

	.cps-sticky-bar__price {
		align-items: flex-start;
	}

	.cps-sticky-bar__actions .cps-btn--buy {
		flex: 1 1 auto;
	}

	/* Chua cho thanh mua hang co dinh, tranh che mat noi dung cuoi trang. */
	.cps-product {
		padding-bottom: 120px;
	}

	.cps-modal__dialog {
		max-height: 92vh;
	}

	/* Bang thong so tren man hinh hep: cot nhan 30% chi con khoang 90px nen
	   "Kich thuoc man hinh" bi be thanh bon dong. Noi cot nhan ra va thu bot
	   phan dem hai ben cho chu co cho tho. */
	.cps-product .cps-spec-table__label {
		width: 42%;
	}

	.cps-product .cps-spec-table td {
		padding: var(--cps-sp-2) var(--cps-sp-3);
	}

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

	/* The 240px chiem gan het be ngang dien thoai, chi thay noi mot the ruoi.
	   Thu ve 158px cho thay hon hai the, dung tam nhu trang mau. */
	.cps-suggested__item {
		width: 158px;
	}

	.cps-suggested .cps-carousel__track {
		gap: var(--cps-sp-2);
	}

	.cps-suggested__title {
		font-size: var(--cps-fs-lg);
		line-height: 27px;
	}
}