/*
 * Header va footer.
 *
 * So do lay tu computed style cua cellphones.com.vn o viewport 1280:
 *   header ngoai   cao 98, nen chuyen mau vang #FFE566 -> #FFD700
 *   thanh tren     cao 26, dem 8px 0 0, chu 12px trang
 *   thanh chinh    1200 x 72, dem 16px 1px, khoang cach 16px
 *   logo           173 x 40
 *   nut Danh muc   cao 40, bo 8px, dem 8px 16px, khoang cach 4px, chu 14px/500
 *   o tim kiem     cao 40, nen trang, bo 10px, nut kinh lup 46px ben trai
 *   bang goi y     nen trang, bo 10px, cach o nhap 20px
 *   nut gio hang   cao 40
 *
 * Ba nut Danh muc / Gio hang / Dang nhap deu rong 140px, o tim kiem an het
 * phan con lai - trang mau ghim o tim kiem 400px vi con nut chon khu vuc,
 * ben minh da bo nut do nen de o tim kiem gian ra cho thanh khong bi ho.
 *   footer tren    nen #f4f4f4, dem 15px, 4 cot 306 dem 12px
 *   tieu de cot    16px/600 mau #363636, cach duoi 12px
 *   lien ket       14px/400 mau #4A4A4A, dong 21px
 *   footer duoi    nen #f4f4f4, dem 15px
 *
 * Muc luc:
 *   1. Khung trang
 *   2. Thanh tren
 *   3. Thanh dieu huong
 *   4. O tim kiem
 *   5. Bang danh muc
 *   6. Footer tren
 *   7. Footer duoi
 *   8. Man hinh nho
 */

/* ================================================================
   1. KHUNG TRANG
   ================================================================ */

/*
 * Flatsome dat "html { background-color: #4d4d4d }" (chung rule voi
 * .absolute-footer - chan trang mac dinh cua no). Bo cuc goc cua Flatsome co
 * mot lop bao mau trang de len nen do; ben minh dung khung rieng (.cps-page)
 * va de trong suot, nen mau xam lo ra o moi cho khong co nen: duoi noi dung
 * khi trang ngan hon man hinh, va khi keo qua da o hai dau. Trang mau de
 * html mau trang - dat lai cho khop.
 */
html {
	background-color: #fff;
}

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

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

/*
 * "padding-bottom" de noi dung khong dinh sat vao chan trang.
 *
 * Dat o day chu khong phai o tung khuon trang: moi trang cua site deu nam
 * trong the <main> nay, nen mot dong o day la ca site co khoang tho truoc
 * chan trang - khong phai nho them vao tung khuon moi.
 *
 * Khoi chan trang co nen xam, phan dem nay lay nen trang cua .cps-page nen
 * hai phan tach nhau ro.
 */
.cps-main {
	display: block;
	min-height: 40vh;
	padding-bottom: var(--cps-sp-8);
}

@media (max-width: 767px) {
	.cps-main {
		padding-bottom: var(--cps-sp-5);
	}
}

/* Trung hoa style mac dinh cua Flatsome trong pham vi header / footer. */
.cps-header :where(button, input, a),
.cps-footer :where(button, input, a) {
	margin: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
}

.cps-header :where(ul, ol, li),
.cps-footer :where(ul, ol, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-header :where(p),
.cps-footer :where(p) {
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* Lop phu toi khi mo menu hoac o tim kiem. */
.cps-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.53);
}

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

/* ================================================================
   2. THANH TREN
   ================================================================ */

.cps-header {
	position: relative;
	z-index: 100;
	/* Dai mau chay tu 0% den 100%. Chu tren header lay mau DEN chu khong
	   phai trang: vang #FFD700 voi trang chi dat 1.4:1, doc khong ra;
	   voi den #1F1F1F la 11.9:1. */
	background: linear-gradient(#ffe566 0%, #ffd700 100%);
	color: var(--cps-c-on-primary);
}

.cps-topbar {
	height: 26px;
	padding-top: var(--cps-sp-2);
	overflow: hidden;
}

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

.cps-topbar__promo {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

/*
 * Dai tin chay ngang. Danh sach duoc in 2 lan nen khi doan dau ra khoi man
 * hinh thi doan sau tiep noi lien mach.
 *
 * 28 giay cho nua quang duong - do lai theo trang mau (khoang 38px moi
 * giay). Truoc day de 40 giay, chi con 27px moi giay: nhin thoang qua
 * tuong dai tin dung yen.
 */
.cps-topbar__marquee {
	display: flex;
	gap: var(--cps-sp-6);
	width: max-content;
	/*
	 * Mot khe nua o CUOI hang. Khong co no thi vong lap bi giat.
	 *
	 * Ban in gom 8 muc va 7 khe, ma buoc chay lai la -50% be rong. Nua dau
	 * (4 muc) can dich di "4 muc + 4 khe" moi khop voi muc dau cua ban sau,
	 * trong khi 50% cua "8 muc + 7 khe" chi la "4 muc + 3,5 khe" - lech
	 * mot nua khe. Them mot khe o cuoi thi be rong thanh "8 muc + 8 khe",
	 * nua cua no dung bang "4 muc + 4 khe".
	 */
	padding-right: var(--cps-sp-6);
	animation: cps-marquee 28s linear infinite;
}

.cps-topbar__promo:hover .cps-topbar__marquee {
	animation-play-state: paused;
}

@keyframes cps-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/*
 * Moi cau mot dong, khong xuong hang. "inline-flex" chu khong phai "flex":
 * cac cau nam trong mot hang cuon ngang, de "flex" thi moi cau bi keo gian
 * bang nhau va khoang cach giua chung khong con deu.
 */
.cps-topbar__promo-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	color: var(--cps-c-on-primary);
	white-space: nowrap;
}

/*
 * Icon 16px, net manh - do theo trang mau. "flex: none" de icon khong bi
 * bop lai khi cau chu dai.
 */
.cps-topbar__promo-icon {
	flex: none;
	width: 16px;
	height: 16px;
	stroke-width: 1.6;
}

.cps-topbar__links {
	display: flex;
	flex: none;
	gap: var(--cps-sp-4);
}

.cps-topbar__links a {
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	color: var(--cps-c-on-primary);
	text-decoration: none;
	white-space: nowrap;
}

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

/*
 * KHONG dung dai tin theo "prefers-reduced-motion".
 *
 * Truoc day o day co mot @media tat han animation khi may bat che do giam
 * chuyen dong (Windows: Cai dat > Tro nang > Hieu ung hinh anh). Bo di vi
 * hai le:
 *
 *   1. Rat nhieu may Windows tat hieu ung san de chay nhe, chu khong phai
 *      nguoi dung co y xin bot chuyen dong. Voi ho dai tin dung im.
 *   2. Tat animation thi dai tin dai gap ba lan khung se bi overflow cat
 *      mat ba tin sau - khong con cach nao doc duoc.
 *
 * Bu lai cho phan tro nang: dai tin DUNG NGAY khi ro chuot vao hoac khi
 * ban phim di vao trong no (quy tac ben tren), nen ai thay kho chiu deu
 * dung duoc no lai.
 */
.cps-topbar__promo:focus-within .cps-topbar__marquee {
	animation-play-state: paused;
}

/* ================================================================
   3. THANH DIEU HUONG
   ================================================================ */

.cps-navbar {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-4);
	height: 72px;
	padding: var(--cps-sp-4) 1px;
}

/* Logo ve theo khung 200x50, cao 40px thi rong dung 160px. Truoc day o logo
   dat 173px nen thua 13px trong ben phai, keo o tim kiem lech sang phai. */
.cps-navbar__logo {
	display: flex;
	align-items: center;
	flex: none;
	width: 160px;
	height: 40px;
	text-decoration: none;
}

.cps-navbar__logo img,
.cps-navbar__logo .cps-logo {
	width: auto;
	max-width: 100%;
	max-height: 40px;
	object-fit: contain;
}

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

/* Nut trong thanh: Danh muc, Gio hang, Dang nhap */
.cps-navbar__item {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-1);
	height: 40px;
	padding: var(--cps-sp-2) var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	/* To dac mot sac vang NHAT hon nen, khong dung lop trang mo - nhu vay
	   mau nut khong doi theo do dam cua nen chuyen mau ben duoi. */
	background: var(--cps-c-primary-light);
	font-size: var(--cps-fs-md);
	line-height: 17px;
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-on-primary);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

/* Nut gio hang KHONG to nen.

   Trang mau chi to nen cho hai nut "Danh muc" va "Dang nhap"; gio hang de
   trong suot. Nho vay hang nut ben phai khong thanh mot dai hong lien tuc,
   va nut "Dang nhap" - viec ho muon khach lam - noi han len. */
.cps-navbar__item--cart {
	background: none;
}

.cps-navbar__item--cart:hover {
	background: rgba(31, 31, 31, 0.08);
}

.cps-navbar__item:hover,
.cps-navbar__item[aria-expanded="true"] {
	background: #fff0a0;
	color: var(--cps-c-on-primary);
}

.cps-navbar__item .cps-icon {
	width: 24px;
	height: 24px;
}

.cps-navbar__item .cps-icon--chevron {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

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

.cps-navbar__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ba nut Danh muc / Gio hang / Dang nhap deu rong 156px - bang chieu rong nut
   Danh muc cua trang mau, va vua du de nhan chu dai nhat khong bi cat. Cho ca
   ba bang nhau thi hai dau thanh can nhau, o tim kiem o giua trong can doi. */
.cps-navbar__item--cat,
.cps-navbar__item--cart,
.cps-navbar__item--login {
	width: 156px;
}

.cps-navbar__item--cat {
	flex: none;
	justify-content: space-between;
}

/* Gio hang: so luong hien trong vong tron nho. */
.cps-navbar__item--cart,
.cps-navbar__item--login {
	justify-content: center;
}

.cps-navbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--cps-r-full);
	background: #fff;
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary-text);
}

/* ================================================================
   4. O TIM KIEM
   ================================================================ */

/* O tim kiem an het khoang trong con lai giua hai ben cua thanh. Truoc day no
   bi ghim cung 400px vi con nut Khu vuc chiem cho; bo nut do roi thi de no gian
   ra, thanh khong con khoang ho o giua. */
.cps-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	z-index: 95;
}

.cps-search__form {
	display: flex;
	align-items: center;
	height: 40px;
	/* Flatsome cho moi the <form> mot khoang cach duoi 1.3em. O tim kiem la
	   flex item nen le nay KHONG bi triet tieu ma cong them vao chieu cao,
	   day o tim kiem lech len tren so voi cac nut ben canh. */
	margin: 0;
	/* Trang mau: bo goc 6px va co mot vien xam nhat 1px - khong phai o
	   trang tron khong vien nhu truoc. */
	border: 1px solid #d6d6d6;
	border-radius: 6px;
	background: #fff;
}

/* Nut kinh lup: nam ben trai, la nut gui bieu mau luon.
   Trang mau: o 46px, dem trai 16px, icon 24px - tuc icon lech han sang trai
   chu khong nam giua o. */
.cps-search__go {
	display: flex;
	align-items: center;
	flex: none;
	width: 46px;
	height: 40px;
	padding: 0 6px 0 16px;
	border: 0;
	background: none;
	color: var(--cps-c-strong);
	cursor: pointer;
}

.cps-search__go .cps-icon {
	width: 24px;
	height: 24px;
}

/* Viet lien hai lop (.cps-search__form .cps-search__input) chu khong phai mot
   lop don: Flatsome dat kieu qua input[type="search"], ma bo chon co thuoc tinh
   nay manh ngang mot lop nen mot lop don se thua. */
.cps-search__form .cps-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 0 0 var(--cps-sp-2);
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: var(--cps-fs-base);
	line-height: 40px;
	/* Trang mau dung xam dam #52525b cho chu trong o tim kiem, khong phai
	   den tuyet doi - do lai bang computed style. */
	color: #52525b;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.cps-search__form .cps-search__input:focus {
	outline: none;
	box-shadow: none;
}

.cps-search__input::placeholder {
	color: #d6d6d6;
	opacity: 1;
}

/* An nut xoa mac dinh cua trinh duyet cho input[type=search] - da co nut rieng. */
.cps-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.cps-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #71717a;
	cursor: pointer;
}

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

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

/* ---- Bang xo xuong ----

   Dung chung cho ca hai bang: "Xu huong tim kiem" (khi o nhap con rong) va
   bang ket qua (khi da go). Hai bang KHONG bao gio cung hien, JS chi bat mot
   cai tai mot thoi diem.

   Cao toi da tinh theo man hinh chu khong phai mot so co dinh: 110px la phan
   header + khoang ho 20px o tren bang, tru di de bang khong bao gio dai qua
   day man hinh. */
.cps-search__panel {
	position: absolute;
	top: calc(100% + 20px);
	right: 0;
	left: 0;
	max-height: calc(100vh - 110px);
	border-radius: var(--cps-r-sm);
	background: #fff;
	/* Khong do bong: bang luon nam tren lop phu toi nen bong khong nhin thay.
	   overflow an cat goc cho dai tieu de xam khong tran ra goc bo tron. */
	overflow: hidden auto;
}

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

/* ---- Bang ket qua ---- */

/* Cac nhom ngan nhau bang mot vach xam day 4px thay vi khoang ho - the nay
   bang lien mach, khong bi "vo" thanh nhieu the roi rac. */
.cps-search__group:not(:last-child) {
	border-bottom: 4px solid #f4f4f4;
}

.cps-search__group-title {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px var(--cps-sp-2);
	background: #f4f4f4;
	font-size: var(--cps-fs-base);
	line-height: 24px;
	font-weight: var(--cps-fw-medium);
	color: #1f1f1f;
}

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

/* Nhom 1: tu khoa goi y, xep hai cot. */
.cps-search__cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-2);
}

.cps-search__cat {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-2);
	border-radius: 6px;
	color: #1f1f1f;
	text-decoration: none;
}

.cps-search__cat:hover {
	background: #f4f4f4;
	color: #1f1f1f;
}

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

.cps-search__cat-name {
	min-width: 0;
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nhom 2: san pham goi y. */
.cps-search__item {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	padding: var(--cps-sp-2);
	color: #1f1f1f;
	text-decoration: none;
}

.cps-search__item:hover {
	background: #f4f4f4;
	color: #1f1f1f;
}

.cps-search__item img {
	flex: none;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.cps-search__item-info {
	min-width: 0;
}

.cps-search__item-name {
	display: block;
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
}

.cps-search__item-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.cps-search__item-price {
	font-size: var(--cps-fs-md);
	line-height: 21px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

.cps-search__item-regular {
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-regular);
	color: #71717a;
	text-decoration: line-through;
}

/* Nhom 3: thong tin lien quan. */
.cps-search__pages {
	padding: 4px var(--cps-sp-2);
}

.cps-search__page {
	display: block;
	padding: 4px 0;
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-primary-text);
	text-decoration: none;
}

.cps-search__page:hover {
	color: var(--cps-c-primary-text);
	text-decoration: underline;
}

.cps-search__empty {
	padding: var(--cps-sp-4);
	font-size: var(--cps-fs-md);
	color: var(--cps-c-text);
	text-align: center;
}

/* ---- Bang xu huong tim kiem ---- */

#cps-search-trending {
	padding: 4px 0;
}

.cps-search__banner {
	padding: 4px;
}

/* Trang mau de banner vuong goc, khong bo tron. */
.cps-search__banner img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.cps-search__trend {
	padding: 4px var(--cps-sp-2);
}

/* Muc nay KHONG co dai nen xam nhu tieu de nhom cua bang ket qua. */
.cps-search__trend-title {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: var(--cps-fs-md);
	line-height: 21px;
	font-weight: var(--cps-fw-semibold);
	color: #1f1f1f;
}

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

.cps-search__trend-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	margin-top: 4px;
}

.cps-search__trend-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 6px;
	color: #1f1f1f;
	text-decoration: none;
}

.cps-search__trend-item:hover {
	background: #f4f4f4;
	color: #1f1f1f;
}

.cps-search__trend-item img,
.cps-search__trend-blank {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.cps-search__trend-item span {
	min-width: 0;
	font-size: var(--cps-fs-md);
	line-height: 21px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ================================================================
   5. BANG DANH MUC
   ================================================================ */

/*
 * Bang danh muc nam NGOAI the .cps-header (no phai phu len noi dung trang),
 * nen phan trung hoa style o muc 1 khong voi toi. Trung hoa rieng o day -
 * neu khong, Flatsome van cham dau dong cho moi <li> va them le duoi.
 */
.cps-catmenu :where(ul, ol, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cps-catmenu :where(p) {
	margin: 0;
	letter-spacing: normal;
	text-transform: none;
}

.cps-catmenu :where(a) {
	text-decoration: none;
}

.cps-catmenu {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 99;
	padding: var(--cps-sp-3) 0 var(--cps-sp-5);
}

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

/*
 * Lop phu toi ca trang khi bang danh muc dang mo - do lai tu trang mau:
 * den 55% kem lam mo 3px.
 *
 * Nho lop nay ma hai cot cua bang KHONG can do bong: chung noi len nho nen
 * phia sau toi di, dung cach trang mau lam. Truoc day o day dung do bong,
 * bang van chim vao trang khi ben duoi la mot bang quang cao nhieu mau.
 */
.cps-catmenu::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/*
 * Chieu cao co dinh cho ca hai cot, va la con so tinh theo MAN HINH chu
 * khong phai theo so danh muc: 130px la phan header cong khoang ho tren
 * duoi. Nho vay bang khong bao gio dai qua man hinh - phan thua se cuon
 * ben trong cot phai.
 */
.cps-catmenu__inner {
	display: flex;
	align-items: stretch;
	/* Khe giua hai cot: 16px, do tu trang mau (truoc day 8px). */
	gap: var(--cps-sp-4);
	height: min(496px, calc(100vh - 130px));
}

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

.cps-catmenu__nav {
	flex: none;
	width: 224px;
	padding: var(--cps-sp-2) 0;
	border-radius: 12px;
	background: #fff;
	/*
	 * Khong do bong.
	 *
	 * Trang mau co bong o day, nhung o ta cot nay con lam cot trai cua hero
	 * tren nen TRANG - bong lam no nang va tach roi khoi hai khoi ben canh.
	 * Trong che do phu toan trang thi nen da toi san, bong cung khong thay.
	 */
	overflow: hidden auto;
}

.cps-catmenu__tab {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-2);
	height: 40px;
	padding: 0 12px;
	/* 12px / 600 - do tu chinh the <p> mang ten muc ben trang mau.
	   Vong truoc toi do nham vao the cha nen ra 16px va da sua sai len 16px;
	   day la con so dung. */
	font-size: var(--cps-fs-xs);
	line-height: 18px;
	font-weight: var(--cps-fw-semibold);
	color: #1f1f1f;
}

/* Ro chuot / dang mo: nen xam nhat va chu doi sang DO - trang mau doi mau
   chu chu khong chi doi do dam (chu von da 600 san). */
.cps-catmenu__tab:hover,
.cps-catmenu__tab.is-active {
	background: #f5f5f5;
	color: var(--cps-c-primary-text);
}

.cps-catmenu__tab .cps-caticon {
	flex: none;
	width: 28px;
	height: 28px;
	object-fit: contain;
	color: var(--cps-c-primary-text);
}

.cps-catmenu__tab-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tung phan cua ten ghep la mot lien ket rieng. Mau chu ke thua tu ca dong
   (den, doi sang do khi ro chuot vao dong); rieng phan dang tro chuot thi
   do dam han len de thay ro minh se bam vao dau. */
.cps-catmenu__tab-part {
	color: inherit;
}

.cps-catmenu__tab-part:hover {
	color: var(--cps-c-primary-text);
	text-decoration: underline;
}

/* Mui ten chi sang phai, khong phai chi xuong nhu o thanh dieu huong. */
.cps-catmenu__tab-arrow {
	flex: none;
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
	color: #8f8f8f;
}

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

.cps-catmenu__panels {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	overflow: hidden auto;
}

.cps-catmenu__panel {
	/* Trang mau: 16px tren duoi, 12px hai ben. */
	padding: 16px 12px;
}

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

/*
 * BA COT bang CSS columns chu khong phai luoi.
 *
 * Ly do: cac nhom dai ngan rat khac nhau (hang co 18 o, muc gia co 5). Voi
 * luoi thi moi hang cao bang o cao nhat, nhom ngan de lai mot mang trong
 * lon ben canh. Voi columns thi nhom nay het la nhom sau chay tiep ngay -
 * dung nhu bang cua trang mau.
 */
.cps-catmenu__cols {
	columns: 3;
	column-gap: var(--cps-sp-2);
}

.cps-catmenu__group {
	/* Khong cho mot nhom bi cat doi giua hai cot. */
	break-inside: avoid;
	margin-bottom: var(--cps-sp-4);
	padding: 0 4px;
}

.cps-catmenu__group-title {
	margin: 0 0 5px;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	font-weight: var(--cps-fw-medium);
	color: #1f1f1f;
}

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

/* O trong bang: cao 40px, vien mong, bo goc 6px, chu 12px - do dung theo
   ban do computed style cua trang mau. Ben trong o co the co ICON roi den
   chu (o danh muc), hoac chi mot LOGO (o thuong hieu). */
.cps-catmenu__chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 40px;
	/* Khong dem tren duoi: icon cao 36px cong vien vua khit trong 40px cua
	   min-height. Them 4px moi ben la o phong len 46px, hang o so le ngay. */
	padding: 0 var(--cps-sp-2);
	border: 1px solid #e9e9e9;
	border-radius: 6px;
	font-size: var(--cps-fs-xs);
	line-height: 16px;
	color: #1f1f1f;
	text-align: center;
}

/* Icon danh muc: rong 36px, cao theo anh, khong keo gian. Dung con so cua
   trang mau (w-9 tren anh cao 50px). */
.cps-catmenu__chip-anh {
	flex: none;
	width: 36px;
	/* Chan tren de anh cao bat thuong khong day o cao hon 40px, lam hang o
	   so le. Anh thap hon thi giu nguyen. */
	height: auto;
	max-height: 36px;
	object-fit: contain;
}

/*
 * Ten dai duoc xuong DONG THU HAI roi moi cat. Bo o mot dong thi "Bo Kit
 * Chuyen Du Lich Sony A7C" chi con "Bo Kit Chuyen Du Lich Son..." - doc
 * khong ra do la may gi. Hai dong 16px vua dung trong o cao 40px nen hang
 * o van thang.
 */
.cps-catmenu__chip-ten {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* O co nhan goc phai: chua san cho, neu khong nhan de len chu cuoi dong. */
.cps-catmenu__chip:has(.cps-catmenu__badge) {
	padding-right: 28px;
}

.cps-catmenu__chip:hover {
	border-color: #d6d6d6;
	background: #fafafa;
	color: var(--cps-c-primary-text);
}

/* O chua logo thuong hieu: logo cao 16px, rong toi da 72px, khong keo gian. */
.cps-catmenu__chip--logo .cps-catmenu__chip-anh {
	width: auto;
	max-width: 72px;
	max-height: 16px;
}

/* Nhan goc tren phai cua o, bo goc lom vao trong nhu trang mau. */
.cps-catmenu__badge {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	height: 12px;
	border-radius: 0 6px 0 8px;
	background: var(--cps-c-primary);
	font-size: 8px;
	line-height: 12px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-on-primary);
}

.cps-catmenu__foot {
	padding: 4px 4px 0;
}

.cps-catmenu__panel-all {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: var(--cps-fs-md);
	line-height: 20px;
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-primary-text);
}

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

.cps-catmenu__panel-all:hover {
	text-decoration: underline;
}

.cps-catmenu__empty {
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-muted);
}

/* ---- Bang dung Block cua Flatsome ----

   Block do UX Builder sinh ra, mac dinh no duoc thiet ke de nam tron mot
   trang: section co khoang dem tren duoi 30px, hang co be ngang toi da bang
   container, cot co khoang dem duoi 30px. Nhet nguyen nhu vay vao mot bang
   rong 944px thi thua khoang trong va hang bi bop lai.

   Cac dong duoi chi HA MUC MAC DINH xuong cho vua khung, va deu KHONG dung
   !important - nho vay khi bien tap vien tu dat khoang dem trong UX Builder
   thi gia tri cua ho van thang. */

.cps-catmenu__block .section {
	padding: 0;
	min-height: 0;
}

.cps-catmenu__block .section-bg,
.cps-catmenu__block .section-bg-overlay {
	border-radius: inherit;
}

.cps-catmenu__block .row {
	max-width: 100%;
	margin-bottom: 0;
}

.cps-catmenu__block .col {
	padding-bottom: var(--cps-sp-3);
}

/* Luoi logo thuong hieu: anh trong block co xu huong gian het o, ghim lai
   cho khong cai to cai nho. */
.cps-catmenu__block .col img {
	max-height: 40px;
	object-fit: contain;
}

/* ================================================================
   6. FOOTER TREN
   ================================================================ */

.cps-footer__top {
	padding: 15px 0;
	background: var(--cps-c-bg-grey);
}

.cps-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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

.cps-footer__title--sub {
	margin-top: var(--cps-sp-5);
}

.cps-footer__list li {
	margin-bottom: 6px;
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-text);
}

.cps-footer__list a {
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-text);
	text-decoration: none;
}

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

/* Trang mau de so tong dai cung co chu nhu lien ket thuong (14px/400 mau xam),
   khong to do. */
.cps-footer__phone {
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-text);
}

.cps-footer__hours {
	color: #71717a;
}

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

.cps-footer__subscribe {
	display: flex;
	gap: 6px;
}

.cps-footer__subscribe input {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 var(--cps-sp-3);
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-sm);
	background: #fff;
	font-family: inherit;
	font-size: var(--cps-fs-md);
	box-shadow: none;
}

.cps-footer__subscribe button {
	flex: none;
	height: 36px;
	padding: 0 var(--cps-sp-4);
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-primary);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-on-primary);
	cursor: pointer;
}

/* ================================================================
   7. FOOTER DUOI
   ================================================================ */

.cps-footer__bottom {
	padding: 15px 0;
	background: #f4f4f4;
}

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

.cps-footer__keywords a {
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-text);
	text-decoration: none;
}

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

.cps-footer__sep {
	color: #c4c4cc;
}

.cps-footer__company {
	font-size: var(--cps-fs-md);
	line-height: 21px;
	color: var(--cps-c-text);
}

.cps-footer__company p {
	margin: 0 0 4px;
}

/* Cau tra loi sau khi bam "Dang ky". */
.cps-footer__dk-bao {
	margin: var(--cps-sp-2) 0 0;
	font-size: var(--cps-fs-xs);
	line-height: 1.5;
}

.cps-footer__dk-bao--xong {
	color: #1a7f37;
}

.cps-footer__dk-bao--loi {
	color: #c1121f;
}

/* ================================================================
   8. MAN HINH NHO
   ================================================================ */

@media (max-width: 1231px) {

	.cps-header .cps-container,
	.cps-footer .cps-container {
		padding: 0 var(--cps-sp-4);
	}

	/* Man hinh hep dan: thu cot danh muc cha lai, nhuong cho cho danh muc con. */
	.cps-catmenu__nav {
		width: 200px;
	}
}

@media (max-width: 1023px) {

	/* Man hinh hep: bo nhan chu o hai nut ben phai, chi con icon. */
	.cps-navbar__item--cat {
		width: auto;
	}

	.cps-navbar__item--cart,
	.cps-navbar__item--login {
		width: auto;
		padding: var(--cps-sp-2) var(--cps-sp-3);
	}

	.cps-navbar__item--cart .cps-navbar__text,
	.cps-navbar__item--login .cps-navbar__text {
		display: none;
	}

	.cps-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cps-catmenu__nav {
		width: 180px;
	}
}

@media (max-width: 767px) {

	.cps-header .cps-container,
	.cps-footer .cps-container {
		padding: 0 10px;
	}

	/* Thanh tren khong con cho tren dien thoai. */
	.cps-topbar {
		display: none;
	}

	/* Thanh chinh xuong 2 hang: logo + gio hang o tren, tim kiem o duoi. */
	.cps-navbar {
		flex-wrap: wrap;
		height: auto;
		gap: var(--cps-sp-2);
		padding: var(--cps-sp-2) 0;
	}

	.cps-navbar__item--cat {
		order: 0;
	}

	.cps-navbar__logo {
		width: auto;
		max-width: 130px;
		order: 1;
	}

	.cps-navbar__group {
		order: 2;
		margin-left: auto;
	}

	.cps-search {
		order: 3;
		flex: 1 1 100%;
	}

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

	.cps-search__go {
		width: 38px;
	}

	/* Bang goi y bam sat o nhap tren dien thoai vi khong con thanh tren. */
	.cps-search__panel {
		top: calc(100% + 6px);
	}

	.cps-navbar__item .cps-navbar__text,
	.cps-navbar__item .cps-icon--chevron {
		display: none;
	}

	/* Dien thoai khong du cho cho hai cot canh nhau: xep chong len nhau.
	   Danh muc cha o tren (gioi han chieu cao, cuon rieng), danh muc con o
	   duoi an not phan con lai. */
	.cps-catmenu__inner {
		flex-direction: column;
	}

	.cps-catmenu__nav {
		width: 100%;
		max-height: 200px;
	}

	.cps-catmenu__panels {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Ba cot tren man hinh 375px thi moi cot chi con khoang 110px - ten
	   danh muc bi be thanh bon nam dong. Hai cot la vua. */
	.cps-catmenu__cols {
		columns: 2;
	}

	/* O de chu chay het be ngang thay vi can giua: hai cot da hep san. */
	.cps-catmenu__chip {
		justify-content: flex-start;
		text-align: left;
	}

	.cps-catmenu__chip--logo {
		justify-content: center;
	}

	/* Nut Danh muc tren dien thoai chi con icon, nen mui ten chi sang phai
	   trong bang khong bi rule an chevron o tren cuon di theo. */
	.cps-catmenu__tab-arrow {
		display: block;
	}

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