/*
 * Trang danh muc san pham.
 *
 * Cac con so lay tu ban do computed style cua cellphones.com.vn:
 *   luoi   flex-wrap, gap 20px doc / 16px ngang, 5 the moi hang
 *   the    227 x 487, padding 10px, bo goc 8px
 *   anh    160 x 160 nam giua vung 207 x 160
 *   ten    16px, 2 dong, cao 42px
 *   gia    16px / 700 mau vang dam #8a6a00
 *
 * Muc luc:
 *   0. Reset cuc bo
 *   1. Bo cuc
 *   2. Thuong hieu & danh muc con
 *   3. Thanh loc va sap xep
 *   4. Xem them / khong co ket qua
 *   5. Khoi cuoi trang
 *   6. Man hinh nho
 *
 * Rieng giao dien THE SAN PHAM nam o product-card.css vi trang chi tiet
 * cung dung lai the do cho khoi "Co the ban cung thich".
 */

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

.cps-archive {
	font-family: var(--cps-font);
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	color: var(--cps-c-text);
	padding-bottom: var(--cps-sp-8);
}

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

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

/* Tieu de nho cua tung khoi: "Chon thuong hieu", "Chon theo tieu chi"... */
/* ================================================================
   2. THUONG HIEU & DANH MUC CON
   ================================================================ */

.cps-brands,
.cps-subcats {
	margin-bottom: var(--cps-sp-5);
}

/* Truoc day cho nay la luoi SAU COT CHIA DEU, moi o cao 56px - trong khung
   1168px thanh ra o rong 190x56, to gap doi nut nhom loc (73x40) va chip loc
   (94x40) nam ngay duoi. Ba hang cung mot muc dich (chon dieu kien loc) ma
   ba co khac nhau.

   Nay xep hang ngang tu xuong dong, o co theo noi dung va cao 40px bang
   dung cac nut loc khac. */
.cps-brands__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-2);
}

.cps-brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 40px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-radius: var(--cps-r-sm);
	text-decoration: none;
}

.cps-brands__item.is-active .cps-brands__link {
	--cps-ctrl-vien: var(--cps-c-primary);
	--cps-ctrl-day: 2px;
}

/* Logo cao 22px de o co logo va o chi co chu cao bang nhau.

   Phai chan CA be ngang: o co day khong dat be rong co dinh, ma logo cua
   vai hang la anh rat ngang - de "max-width: 100%" thi anh giu nguyen be
   rong that va keo o phong len 272px, gap ba o ben canh. */
.cps-brands__link img {
	width: auto;
	max-width: 76px;
	max-height: 22px;
	object-fit: contain;
}

/* "inherit" chu khong phai mau co dinh: o thuong hieu doi mau chu khi ro
   chuot / focus, ma ten hang nam trong the con - dat mau cung o day thi
   ten hang tro thanh cho duy nhat khong doi mau theo. */
.cps-brands__name {
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-medium);
	color: inherit;
	text-align: center;
	white-space: nowrap;
}


.cps-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-3);
}

/* O danh muc con an theo dung bo trang thai cua cac nut loc (khai bao o
   muc 3 ben duoi) - chi rieng chieu cao la 40px cho bang cac nut do, du o
   nay co icon 28px ben trong. */
.cps-subcats__link {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	min-height: 40px;
	padding: var(--cps-sp-1) var(--cps-sp-4);
	border-radius: var(--cps-r-sm);
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-strong);
	text-decoration: none;
}

.cps-subcats__link img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* ================================================================
   3. THANH LOC VA SAP XEP
   ================================================================ */

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

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

/* Tieu de nam tren mot dong rieng, chip xep ben duoi - dung nhu trang mau
   va giong hang "Chon theo tieu chi" ngay tren no. */
.cps-toolbar__row--sort {
	margin-bottom: var(--cps-sp-5);
}

.cps-toolbar__filters,
.cps-toolbar__sorts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-2);
}

.cps-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	text-decoration: none;
	white-space: nowrap;
}

/* ================================================================
   NEN CHUNG CHO MOI NUT LOC

   Nut nhom thuoc tinh, loc nhanh, khoang gia, sap xep, xoa loc va o
   thuong hieu deu la MOT ho. Hinh dang van khac nhau theo vai tro (o
   vuong cho dieu kien loc, vien tron cho sap xep), nhung NGON NGU TRANG
   THAI thi dung chung mot bo:

     nghi        vien xam 1px, nen trang
     ro chuot    vien vang 1px, nen vang rat nhat, chu vang dam
     dang chon   vien vang 2px, nen vang rat nhat, chu dam
     ban phim    vien vang + quang vang 3px toa ra ngoai
     dang bam    lun xuong 1px

   VIEN VE BANG box-shadow inset, KHONG dung outline.

   Truoc day vien ve bang "outline: 1px solid". Flatsome co san hai quy tac
   manh hon de len:

       a:focus:not(:focus-visible),
       button:focus:not(:focus-visible)  { outline: none }        (0,2,0)
       a:focus-visible, button:focus-visible
                        { outline: 2px solid currentColor }       (0,2,0)

   con ".cps-chip--filter" chi la (0,1,0). Hau qua do duoc bang may: bam
   chuot vao nut "Bo nho" xong thi computed style ra "outline-style: none"
   - VIEN BIEN MAT, va mat den khi bam ra cho khac. Di ban phim thi vien
   bi thay bang vong 2px mau chu, khong con la vien cua ta nua.

   Chuyen vien sang box-shadow thi hai quy tac kia khong con cho bam, va
   outline duoc de trong hoan toan cho vong focus.

   Ba bien ben duoi cho phep ghep trang thai: mot o vua DANG CHON vua DANG
   FOCUS se tu ra vien 2px kem quang, khong phai viet rieng truong hop do.
   ================================================================ */

.cps-facet__toggle,
.cps-chip--filter,
.cps-chip--sort,
.cps-chip--clear,
.cps-brands__link,
.cps-subcats__link {
	/*
	 * Luc NGHI: nen xam dac, KHONG vien - do lai tu trang mau (#F7F7F8, bo
	 * goc 8px, khong duong vien nao). Truoc day o day la nen trang + vien
	 * xam; mot hang muoi may o vien mong tren nen trang trong lo mo va roi
	 * rac, con nen dac thi ca hang thanh mot khoi ro rang.
	 *
	 * Vien van con nhung trong suot, de trang thai ro chuot / dang chon chi
	 * viec doi mau bien - o khong bi nhay 1px khi hien vien.
	 */
	--cps-ctrl-vien: transparent;
	--cps-ctrl-day: 1px;
	--cps-ctrl-quang: 0 0 rgba(0, 0, 0, 0);

	box-shadow:
		inset 0 0 0 var(--cps-ctrl-day) var(--cps-ctrl-vien),
		var(--cps-ctrl-quang);
	background: var(--cps-c-bg-grey);
	color: var(--cps-c-strong);
	transition:
		box-shadow 0.12s ease,
		background-color 0.12s ease,
		color 0.12s ease,
		transform 0.06s ease;
}

.cps-facet__toggle:hover,
.cps-chip--filter:hover,
.cps-chip--sort:hover,
.cps-chip--clear:hover,
.cps-brands__link:hover,
.cps-subcats__link:hover {
	--cps-ctrl-vien: var(--cps-c-primary);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

/*
 * Vong focus dung dung mot cong thuc voi o phien ban / mau sac o trang chi
 * tiet (single-product.css) - ca site chi co MOT kieu vong focus.
 *
 * "outline: none" o day la de go vong 2px cua Flatsome, khong phai bo dau
 * hieu focus: vong that duoc ve bang --cps-ctrl-quang ngay ben duoi.
 */
.cps-facet__toggle:focus-visible,
.cps-chip--filter:focus-visible,
.cps-chip--sort:focus-visible,
.cps-chip--clear:focus-visible,
.cps-brands__link:focus-visible,
.cps-subcats__link:focus-visible {
	--cps-ctrl-vien: var(--cps-c-primary);
	--cps-ctrl-quang: 0 0 0 3px rgba(255, 215, 0, 0.55);

	outline: none;
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

/* Dang bam: lun xuong mot chut cho co phan hoi cham vao. */
.cps-facet__toggle:active,
.cps-chip--filter:active,
.cps-chip--sort:active,
.cps-chip--clear:active,
.cps-brands__link:active,
.cps-subcats__link:active {
	transform: translateY(1px);
}

/* Dang chon: vien day gap doi. Khac ro-chuot mot bac de nhin luot qua van
   biet cai nao dang bat, cai nao chi dang co con tro. */
.cps-chip--filter.is-active,
.cps-chip--sort.is-active,
.cps-facet.is-chosen .cps-facet__toggle {
	--cps-ctrl-vien: var(--cps-c-primary);
	--cps-ctrl-day: 2px;

	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
	font-weight: var(--cps-fw-medium);
}

/*
 * Rieng o thuong hieu va o danh muc con giu nen TRANG kem mot vien mo.
 * Ben trong chung la LOGO va ICON - dat logo len nen xam thi logo nao cung
 * nhu bi o mot lop mo, dat len nen trang moi ra dung mau thuong hieu.
 */
.cps-brands__link,
.cps-subcats__link {
	--cps-ctrl-vien: var(--cps-c-border);

	background: var(--cps-c-bg);
}

/* ---- Hinh dang rieng cua tung loai ---- */

.cps-chip--filter {
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-radius: var(--cps-r-sm);
}

/* Chip sap xep bo TRON han - trang mau de bo goc 50px cho rieng hang nay,
   de phan biet voi cac o loc hinh chu nhat o tren. Moi chip mot icon rieng
   dat truoc chu. */
.cps-chip--sort {
	gap: 6px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-radius: var(--cps-r-full);
}

.cps-chip--sort .cps-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* Nut xoa loc: cung bo trang thai nhung mau chu trung tinh - no khong phai
   mot dieu kien loc de bat/tat, va khong bao gio o trang thai "dang chon". */
.cps-chip--clear {
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border-radius: var(--cps-r-sm);
	font-weight: var(--cps-fw-medium);
}

/* ----- Cac nhom loc theo thuoc tinh -----

   Moi nhom la mot nut mo mot bang chon nho ben duoi. Bang chon dat
   position:absolute de no NOI len tren luoi san pham thay vi day luoi xuong
   moi lan mo ra. */

.cps-facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-2);
}

.cps-facet {
	position: relative;
}

.cps-facet__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	white-space: nowrap;
	cursor: pointer;
}

.cps-facet__toggle .cps-icon {
	width: 8px;
	height: 12px;
	transform: rotate(180deg);
	transition: transform 0.15s ease;
}

.cps-facet__toggle[aria-expanded="true"] .cps-icon {
	transform: rotate(0deg);
}

/* Bang chon dang MO: to nhu luc ro chuot de nut khong "tat" di trong khi
   bang cua no van dang bung ra ben duoi. */
.cps-facet__toggle[aria-expanded="true"] {
	--cps-ctrl-vien: var(--cps-c-primary);
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-facet__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary);
	font-size: 11px;
	line-height: 1;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-on-primary);
}

.cps-facet__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 240px;
	max-width: 320px;
	max-height: 320px;
	padding: 6px;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg);
	box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.28);
	overflow-y: auto;
}

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

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

.cps-facet__list li {
	margin: 0;
}

.cps-facet__option {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	padding: 8px 10px;
	border-radius: var(--cps-r-sm);
	font-size: var(--cps-fs-md);
	line-height: 20px;
	color: var(--cps-c-text);
	text-decoration: none;
}

/* Dong trong bang chon khong phai "nut loc" nen khong an theo bo tren -
   no la mot dong danh sach. Nhung VONG FOCUS thi dung chung mot cong thuc,
   de di ban phim tu ngoai vao trong bang khong thay doi kieu danh dau. */
.cps-facet__option:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

.cps-facet__option:focus-visible {
	outline: none;
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
	box-shadow: 0 0 0 2px var(--cps-c-primary);
}

/* O tich ve bang CSS: day la the <a> chu khong phai <input>, nen khong co
   o tich that de dung. */
.cps-facet__box {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--cps-c-border);
	border-radius: 4px;
	background: #fff;
}

.cps-facet__option.is-active .cps-facet__box {
	border-color: var(--cps-c-primary);
	background: var(--cps-c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f1f1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

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

.cps-facet__option.is-active .cps-facet__name {
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
}

.cps-facet__count {
	flex: none;
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

/* ----- Hang "Dang loc" ----- */

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

.cps-toolbar__active-label {
	flex: none;
	font-size: var(--cps-fs-md);
	color: var(--cps-c-muted);
}

.cps-toolbar__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-2);
}

.cps-chip--active {
	gap: 6px;
	transition:
		box-shadow 0.12s ease,
		background-color 0.12s ease,
		color 0.12s ease,
		transform 0.06s ease;
	min-height: 32px;
	padding: 4px var(--cps-sp-3);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary-pale);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
}

/* The "dang loc" la mot dau hieu trang thai kem nut go, khong phai dieu
   kien de bat/tat - nen no to dac thay vi vien. Ro chuot / focus deu dao
   sang nen vang dac de bao "bam vao la go cai nay ra". */
.cps-chip--active:hover,
.cps-chip--active:focus-visible {
	background: var(--cps-c-primary);
	color: var(--cps-c-on-primary);
}

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

.cps-chip--active:active {
	transform: translateY(1px);
}

.cps-chip--active .cps-icon {
	width: 9px;
	height: 9px;
}

/* ================================================================
   4. XEM THEM / KHONG CO KET QUA
   ================================================================ */

.cps-archive__more {
	display: flex;
	justify-content: center;
	margin-bottom: var(--cps-sp-8);
}

/*
 * Nut "Xem them N san pham".
 *
 * So do lay tu trang mau: 260x48, bo goc 8px, nen mau thuong hieu nhat va
 * chu mau thuong hieu dam, KHONG vien. Trang mau dung cap xanh nhat /
 * xanh dam; ben minh la cap vang nhat / vang dam tuong ung.
 */
.cps-archive .cps-btn--more {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 260px;
	min-height: 48px;
	padding: 0 var(--cps-sp-6);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-primary-pale);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.cps-archive .cps-btn--more:hover {
	background: #fff2bf;
}

/* Vong focus dung chung mot cong thuc voi moi nut khac tren site. */
.cps-archive .cps-btn--more:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-archive .cps-btn--more:active {
	transform: translateY(1px);
}

.cps-archive .cps-btn--more .cps-icon {
	width: 12px;
	height: 12px;
}

.cps-archive .cps-btn--more.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

.cps-empty {
	padding: var(--cps-sp-8) 0;
	text-align: center;
}

.cps-empty__title {
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-empty__desc {
	margin: 0 0 var(--cps-sp-4);
	font-size: var(--cps-fs-md);
	color: var(--cps-c-text);
}

/* ================================================================
   5. KHOI CUOI TRANG
   ================================================================ */

/*
 * Phan duoi trang (bai gioi thieu + cau hoi thuong gap) trai HET be ngang.
 *
 * Truoc day cho nay chia hai cot 760 / 424, cot phai danh cho mot khu vuc
 * widget. Khu vuc do de trong nen cot trai bi ep con 760px giua khung
 * 1200px, doan gioi thieu thanh mot cot chu hep lech han sang trai trong
 * khi ben phai bo trong 424px.
 *
 * Cot phai van in ra, nhung chi CHIEM CHO khi trong no thuc su co widget.
 */
.cps-archive__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-col-gap);
	align-items: flex-start;
	margin-top: var(--cps-sp-8);
}

.cps-archive__bottom-left {
	flex: 1 1 100%;
	min-width: 0;
}

/* Co widget that thi quay lai hai cot nhu cu. Cot phai chi ton tai khi khu
   vuc widget co widget - xem content-bottom.php. */
.cps-archive__bottom:has(.cps-archive__bottom-right) .cps-archive__bottom-left {
	flex: 0 1 760px;
}

.cps-archive__bottom-right {
	flex: 0 0 424px;
}

/* Dung lai style noi dung / FAQ cua trang san pham, chi can khai bao
   lai vai muc rieng cho pham vi trang danh muc. */
.cps-archive .cps-content__body {
	position: relative;
	overflow: hidden;
}

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

.cps-archive .cps-content__body.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

/* ================================================================
   6. MAN HINH NHO
   ================================================================ */

@media (max-width: 1231px) {
	.cps-archive .cps-container {
		padding: 0 var(--cps-sp-4);
	}
}

@media (max-width: 1023px) {
	.cps-archive__bottom-right {
		display: none;
	}

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

@media (max-width: 767px) {
	.cps-archive .cps-container {
		padding: 0 10px;
	}

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

	/* Thanh loc cuon ngang thay vi xuong dong, do man hinh hep */
	.cps-toolbar__filters,
	.cps-toolbar__sorts {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.cps-toolbar__filters::-webkit-scrollbar,
	.cps-toolbar__sorts::-webkit-scrollbar {
		display: none;
	}

	.cps-toolbar__row--sort {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cps-sp-2);
	}
}

/* ================================================================
   7. BANG LOC TONG

   Trang mau dat nut "Bo loc" o dau hang loc, bam vao mo mot bang chua HET
   cac nhom. Voi muoi mot nhom loc thi day khong phai trang tri: mo tung
   bang chon mot de doi bon dieu kien la bon lan tai lai trang.
   ================================================================ */

/* Nut mo bang: nen TRANG kem mot vong mau thuong hieu - do lai tu trang
   mau (ho ve vong bang box-shadow chu khong phai border). No la nut duy
   nhat trong hang duoc to mau, de mat tim ra ngay. */
.cps-facet-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-primary);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.cps-facet-all:hover {
	background: var(--cps-c-primary-pale);
}

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

.cps-facet-all:active {
	transform: translateY(1px);
}

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

/* ---- Bang ---- */

.cps-filter-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-filter-modal[hidden] {
	display: none;
}

.cps-filter-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.cps-filter-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	/* Cao toi da 85% man hinh: phan than tu cuon, con dau va chan bang luon
	   nhin thay - nguoi dung khong phai cuon nguoc len de tim nut dong. */
	max-height: 85vh;
	border-radius: var(--cps-r-xl);
	background: var(--cps-c-bg);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.cps-filter-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-4);
	padding: var(--cps-sp-4) var(--cps-sp-5);
	border-bottom: 1px solid var(--cps-c-border);
}

.cps-filter-modal__title {
	margin: 0;
	font-size: var(--cps-fs-lg);
	line-height: 26px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-filter-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--cps-r-full);
	background: none;
	color: var(--cps-c-muted);
	cursor: pointer;
}

.cps-filter-modal__close:hover {
	background: var(--cps-c-bg-grey);
	color: var(--cps-c-strong);
}

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

.cps-filter-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--cps-sp-4) var(--cps-sp-5);
	overflow-y: auto;
}

.cps-filter-modal__group + .cps-filter-modal__group {
	margin-top: var(--cps-sp-5);
}

.cps-filter-modal__group-title {
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-md);
	line-height: 21px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-filter-modal__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cps-sp-2);
}

/*
 * Moi lua chon la mot o bam duoc, KHONG phai mot dong co tich vuong.
 * Cung ngon ngu voi cac nut loc o ngoai: nghi thi nen xam, chon thi vien
 * vang hai lop va chu vang dam.
 */
.cps-filter-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 var(--cps-sp-3);
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg-grey);
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-strong);
	cursor: pointer;
	transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.cps-filter-opt:hover {
	background: var(--cps-c-primary-pale);
	color: var(--cps-c-primary-text);
}

/* O tich that nam duoi lop phu - van con trong ma nguon cho ban phim va
   trinh doc man hinh, chi khong ve ra. */
.cps-filter-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.cps-filter-opt:has(input:checked) {
	background: var(--cps-c-primary-pale);
	box-shadow: inset 0 0 0 2px var(--cps-c-primary);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
}

.cps-filter-opt:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-filter-opt:has(input:checked):has(input:focus-visible) {
	box-shadow:
		inset 0 0 0 2px var(--cps-c-primary),
		0 0 0 3px rgba(255, 215, 0, 0.55);
}

.cps-filter-opt__count {
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

.cps-filter-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	padding: var(--cps-sp-3) var(--cps-sp-5);
	border-top: 1px solid var(--cps-c-border);
}

.cps-filter-modal__reset,
.cps-filter-modal__apply {
	min-height: 44px;
	padding: 0 var(--cps-sp-6);
	border: 0;
	border-radius: var(--cps-r-sm);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	cursor: pointer;
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.cps-filter-modal__reset {
	background: none;
	color: var(--cps-c-text);
}

.cps-filter-modal__reset:hover {
	background: var(--cps-c-bg-grey);
}

.cps-filter-modal__apply {
	flex: 1 1 auto;
	max-width: 280px;
	background: var(--cps-c-cta);
	color: var(--cps-c-on-primary);
	font-weight: var(--cps-fw-semibold);
}

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

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

@media (max-width: 767px) {
	/* Tren dien thoai bang chiem tron man hinh - 720px khong con y nghia. */
	.cps-filter-modal {
		padding: 0;
	}

	.cps-filter-modal__box {
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.cps-filter-modal__apply {
		max-width: none;
	}
}