/*
 * Phan NOI DUNG: danh sach bai viet, bai viet don, trang tinh, trang 404.
 *
 * Bon khuon nay dung chung mot bo phan nen gom mot file. Trang san pham va
 * duong mua hang co bo rieng, khong dinh toi day.
 */

.cps-noidung,
.cps-404 {
	padding: var(--cps-sp-5) 0 var(--cps-sp-8);
}

.cps-noidung__head {
	margin-bottom: var(--cps-sp-6);
}

.cps-noidung__title {
	width: auto;
	margin: 0 0 var(--cps-sp-2);
	font-size: var(--cps-fs-price);
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: uppercase;
}

/*
 * Trang tim kiem: KHONG viet hoa tieu de. Tieu de o day chua tu khoa
 * nguoi dung vua go ("Ket qua tim ..."), viet hoa het thanh ra ho lai
 * doc chinh chu minh vua go duoi mot dang khac.
 */
body.search .cps-noidung__title {
	text-transform: none;
}

.cps-noidung__mo-ta {
	max-width: 760px;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

/* ================================================================
   1. LUOI BAI VIET
   ================================================================ */

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

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

/*
 * Bai dau danh sach: anh nam ben trai, chu ben phai, chiem tron ca hang.
 * Bai moi nhat dang duoc doc nhieu nhat nen dang mot the to hon la dung.
 */
.cps-post-card--lon {
	grid-column: 1 / -1;
	flex-direction: row;
	gap: var(--cps-sp-5);
	align-items: center;
	padding-bottom: var(--cps-sp-5);
	margin-bottom: var(--cps-sp-1);
	border-bottom: 1px solid var(--cps-c-border);
}

.cps-post-card--lon .cps-post-card__anh {
	flex: none;
	width: 46%;
}

.cps-post-card--lon .cps-post-card__chu {
	flex: 1 1 auto;
	min-width: 0;
}

.cps-post-card--lon .cps-post-card__ten {
	font-size: var(--cps-fs-xl);
	line-height: 1.35;
}

.cps-post-card__anh {
	display: block;
	overflow: hidden;
	border-radius: var(--cps-r-md);
	background: var(--cps-c-bg-grey);
	/* Ghim ti le de khung khong nhay chieu cao luc anh chua tai xong. */
	aspect-ratio: 16 / 9;
}

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

.cps-post-card:hover .cps-post-card__anh img {
	transform: scale(1.04);
}

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

.cps-post-card__trong .cps-icon {
	width: 40px;
	height: 40px;
}

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

.cps-post-card__ten {
	width: auto;
	margin: var(--cps-sp-1) 0 var(--cps-sp-2);
	font-size: var(--cps-fs-base);
	line-height: 1.4;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
	text-transform: none;
}

.cps-post-card__ten a {
	color: inherit;
}

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

.cps-post-card__tom-tat {
	margin: 0;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-text);
}

/* ================================================================
   2. BAI VIET DON
   ================================================================ */

/*
 * Khung chu hep 760px. Dong chu dai qua chin muoi ky tu thi mat bat dau
 * nhay dong khi xuong hang - doc mot bai dai rat moi.
 */
.cps-noidung--bai .cps-bai,
.cps-noidung--bai .cps-bai__lienquan {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================
   2b. TRANG TINH (chinh sach, quy che, huong dan)
   ================================================================ */

/*
 * Hai cot: than trang ben trai, cot phu 300px ben phai.
 *
 * Than trang bat dau ngay LE TRAI CUA KHUNG - trung voi duong dan o tren.
 * Truoc day than trang la mot cot 760px can giua, nhin ra lech han so voi
 * duong dan va bo trong nua ben phai.
 *
 * Con lai cho than trang la 1200 - 300 - 40 = 860px. Hoi rong hon 760
 * mot chut nhung van trong khoang de doc, va bu lai thi trang can doi.
 */
/*
 * KHONG dat "align-items: start" o day. Lam vay thi o luoi ben phai chi
 * cao bang dung noi dung cot ben, ma "position: sticky" chi truot duoc
 * trong long o chua no - het cho truot thi cot ben cuon mat luon. De o
 * gian het chieu cao hang (mac dinh) thi muc luc moi dinh lai that.
 */
.cps-trang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--cps-sp-8);
}

/*
 * Chan tren mot cot chu de doc, ke ca khi cot ben bi giau o man hinh hep:
 * o khoang 768-991px than trang duoc ca khung, dong chu dai gan mot nghin
 * pixel thi mat kho bat lai dau dong sau moi lan xuong hang.
 */
.cps-trang__chinh {
	max-width: 860px;
}

.cps-noidung--trang .cps-noidung__head {
	padding-bottom: var(--cps-sp-4);
	margin-bottom: var(--cps-sp-5);
	border-bottom: 1px solid var(--cps-c-border);
}

/*
 * Tieu de KHONG viet hoa. Trang mau de nguyen chu thuong o cac trang nay -
 * viet hoa mot dong dai kieu "CHINH SACH BAO HANH VA DOI TRA SAN PHAM"
 * doc rat nang.
 */
.cps-noidung--trang .cps-noidung__title {
	margin-bottom: var(--cps-sp-2);
	font-weight: var(--cps-fw-semibold);
	text-transform: none;
}

.cps-trang__capnhat {
	margin: 0;
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

/* ---- Cot ben ---- */

/*
 * Cot ben DINH LAI khi cuon. Trang chinh sach dai vai man hinh, muc luc
 * ma cuon mat theo thi khong con tac dung gi.
 */
.cps-trang__ben-dinh {
	position: sticky;
	top: var(--cps-sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-4);
}

.cps-mucluc,
.cps-trang-hotro {
	padding: var(--cps-sp-4);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg-grey);
}

.cps-mucluc__tieude,
.cps-trang-hotro__tieude {
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

/*
 * KHONG danh so muc luc. Nhieu trang da tu danh so trong tieu de ("1.
 * Nguyen tac chung", "2. Quy trinh giao dich"), them mot bo dem CSS nua
 * thi ra "1. 1. Nguyen tac chung". Danh sach khong so van doc duoc.
 */
.cps-mucluc__ds {
	padding: 0;
	margin: 0;
	list-style: none;
}

.cps-mucluc__muc {
	margin: 0;
}

.cps-mucluc__muc + .cps-mucluc__muc {
	margin-top: 2px;
}

.cps-mucluc__link {
	display: block;
	padding: 6px var(--cps-sp-2);
	border-radius: var(--cps-r-sm);
	font-size: var(--cps-fs-md);
	line-height: 1.5;
	color: var(--cps-c-text);
	text-decoration: none;
	/* Vach nhan ben trai, chi hien khi tro chuot toi. */
	box-shadow: inset 2px 0 0 transparent;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cps-mucluc__link:hover {
	background: var(--cps-c-bg);
	box-shadow: inset 2px 0 0 var(--cps-c-primary);
	color: var(--cps-c-heading);
}

.cps-mucluc__link:focus-visible {
	outline: none;
	background: var(--cps-c-bg);
	box-shadow: 0 0 0 2px var(--cps-c-primary);
}

/* ---- O lien he ---- */

.cps-trang-hotro {
	background: var(--cps-c-primary-pale);
}

.cps-trang-hotro__so {
	display: inline-block;
	font-size: var(--cps-fs-xl);
	font-weight: var(--cps-fw-bold);
	line-height: 1.2;
	color: var(--cps-c-heading);
	text-decoration: none;
}

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

.cps-trang-hotro__gio {
	margin: 2px 0 var(--cps-sp-3);
	font-size: var(--cps-fs-xs);
	color: var(--cps-c-muted);
}

/*
 * Flatsome dat cho MOI the <dl> co "font-size: .85em; opacity: .9;
 * text-transform: uppercase". Phai go het, khong thi hai nhan Email /
 * Cua hang bi viet hoa va mo di.
 */
.cps-trang-hotro__ds {
	display: flex;
	flex-direction: column;
	gap: var(--cps-sp-2);
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-md);
	opacity: 1;
	text-transform: none;
}

.cps-trang-hotro__dong dt {
	margin: 0;
	font-size: var(--cps-fs-xs);
	font-weight: var(--cps-fw-regular);
	color: var(--cps-c-muted);
	text-transform: none;
}

.cps-trang-hotro__dong dd {
	margin: 0;
	line-height: 1.5;
	color: var(--cps-c-text);
	/* Dia chi va email dai hon cot - phai cho phep ngat giua tu. */
	overflow-wrap: anywhere;
}

.cps-trang-hotro__dong a {
	color: var(--cps-c-text);
	text-decoration: underline;
}

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

.cps-trang-hotro__nut {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: var(--cps-sp-3);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cps-trang-hotro__lien-ket {
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
	text-decoration: none;
}

.cps-trang-hotro__lien-ket::after {
	content: " ›";
	color: var(--cps-c-muted);
}

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

/* ---- Man hinh hep ---- */

@media (max-width: 991px) {

	/*
	 * Het cho cho cot ben: cho no xuong duoi than trang va bo dinh. Muc
	 * luc nam duoi bai thi khong con tac dung dieu huong, nhung o lien he
	 * thi van can - nen giau rieng muc luc.
	 */
	.cps-trang {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cps-sp-6);
	}

	/* Xuong duoi thi thang hang voi than trang, khong keo dai het khung. */
	.cps-trang__ben {
		max-width: 860px;
	}

	.cps-trang__ben-dinh {
		position: static;
	}

	.cps-mucluc {
		display: none;
	}
}

/* Khoi bai lien quan rong hon de xep duoc ba the. */
.cps-noidung--bai .cps-bai__lienquan {
	max-width: none;
	margin-top: var(--cps-sp-8);
}

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

.cps-bai__title {
	width: auto;
	margin: var(--cps-sp-2) 0 var(--cps-sp-3);
	font-size: 32px;
	line-height: 1.3;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: none;
}

.cps-bai__sapo {
	margin: 0;
	font-size: var(--cps-fs-lg);
	line-height: 1.6;
	color: var(--cps-c-text);
}

.cps-bai__anh {
	margin: 0 0 var(--cps-sp-5);
}

.cps-bai__anh img {
	width: 100%;
	height: auto;
	border-radius: var(--cps-r-lg);
}

/* ---- Than bai ---- */

.cps-bai__than,
.cps-trang__than {
	font-size: var(--cps-fs-base);
	line-height: 1.75;
	color: var(--cps-c-text);
}

.cps-bai__than > *,
.cps-trang__than > * {
	margin-bottom: var(--cps-sp-4);
}

.cps-bai__than h2,
.cps-trang__than h2 {
	width: auto;
	/* Nhay tu muc luc xuong thi tieu de dung sat mep tren, chua mot khoang. */
	scroll-margin-top: var(--cps-sp-4);
	margin: var(--cps-sp-6) 0 var(--cps-sp-3);
	font-size: var(--cps-fs-xl);
	line-height: 1.4;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
	text-transform: none;
}

.cps-bai__than h3,
.cps-trang__than h3 {
	width: auto;
	margin: var(--cps-sp-5) 0 var(--cps-sp-2);
	font-size: var(--cps-fs-lg);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-bai__than ul,
.cps-bai__than ol,
.cps-trang__than ul,
.cps-trang__than ol {
	padding-left: var(--cps-sp-5);
}

.cps-bai__than li,
.cps-trang__than li {
	margin-bottom: var(--cps-sp-2);
}

.cps-bai__than a,
.cps-trang__than a {
	color: var(--cps-c-primary-text);
	text-decoration: underline;
}

.cps-bai__than a:hover,
.cps-trang__than a:hover {
	text-decoration: none;
}

.cps-bai__than img,
.cps-trang__than img {
	height: auto;
	border-radius: var(--cps-r-md);
}

.cps-bai__than blockquote,
.cps-trang__than blockquote {
	padding: var(--cps-sp-3) var(--cps-sp-5);
	margin-left: 0;
	margin-right: 0;
	border-left: 4px solid var(--cps-c-primary);
	background: var(--cps-c-primary-pale);
	font-style: normal;
}

.cps-bai__than blockquote p:last-child,
.cps-trang__than blockquote p:last-child {
	margin-bottom: 0;
}

.cps-bai__than table,
.cps-trang__than table {
	width: 100%;
	border-collapse: collapse;
}

.cps-bai__than th,
.cps-bai__than td,
.cps-trang__than th,
.cps-trang__than td {
	padding: var(--cps-sp-2) var(--cps-sp-3);
	border: 1px solid var(--cps-c-border);
	text-align: left;
}

.cps-bai__than th,
.cps-trang__than th {
	background: var(--cps-c-bg-grey);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

/*
 * Bang rong hon khung chu thi cuon TRONG no, khong day ca trang tran
 * ngang. Bang thong so ky thuat trong bai hay bi vay.
 */
.cps-bai__than table,
.cps-trang__than table {
	display: block;
	overflow-x: auto;
}

.cps-bai__the {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cps-sp-2);
	padding-top: var(--cps-sp-5);
	margin-top: var(--cps-sp-5);
	border-top: 1px solid var(--cps-c-border);
	font-size: var(--cps-fs-xs);
}

.cps-bai__the-nhan {
	color: var(--cps-c-muted);
}

.cps-bai__the a {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 var(--cps-sp-3);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg-grey);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
}

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

.cps-bai__trang {
	padding-top: var(--cps-sp-4);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
}

/* ================================================================
   3. PHAN TRANG
   ================================================================ */

.cps-phantrang {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cps-sp-2);
	margin-top: var(--cps-sp-8);
}

.cps-phantrang .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--cps-sp-2);
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-border);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

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

.cps-phantrang .page-numbers.current {
	background: var(--cps-c-primary);
	box-shadow: none;
	color: var(--cps-c-on-primary);
	font-weight: var(--cps-fw-bold);
}

.cps-phantrang .page-numbers.dots {
	box-shadow: none;
	background: none;
}

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

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

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

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

.cps-noidung__trong {
	padding: var(--cps-sp-8) var(--cps-sp-5);
	border-radius: var(--cps-r-lg);
	background: var(--cps-c-bg-grey);
	text-align: center;
}

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

.cps-noidung__tim,
.cps-404__tim {
	display: flex;
	gap: var(--cps-sp-2);
	max-width: 460px;
	margin: 0 auto;
}

.cps-noidung__tim input[type="search"],
.cps-404__tim input[type="search"] {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 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-border-gallery);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	color: var(--cps-c-strong);
}

.cps-noidung__tim input[type="search"]:focus,
.cps-404__tim input[type="search"]:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 2px var(--cps-c-primary-dark),
		0 0 0 3px rgba(255, 215, 0, 0.45);
}

/* Go dem, le va min-height ma Flatsome dat cho moi the <button>. */
.cps-noidung__tim button,
.cps-404__tim button {
	flex: none;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	height: 46px;
	padding: 0 var(--cps-sp-5);
	margin: 0;
	border: 0;
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-cta);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-on-primary);
	text-transform: uppercase;
	cursor: pointer;
}

.cps-noidung__tim button:hover,
.cps-404__tim button:hover {
	filter: brightness(1.06);
}

/* ================================================================
   5. TRANG 404
   ================================================================ */

.cps-404__dau {
	max-width: 560px;
	margin: 0 auto var(--cps-sp-8);
	text-align: center;
}

.cps-404__so {
	margin: 0;
	font-size: 96px;
	line-height: 1;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-primary);
	/* Vang tren nen trang rat nhat - them vien mong cho con so doc duoc. */
	-webkit-text-stroke: 1px var(--cps-c-primary-dark);
}

.cps-404__title {
	width: auto;
	margin: var(--cps-sp-2) 0;
	font-size: var(--cps-fs-xl);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-404__desc {
	margin: 0 0 var(--cps-sp-5);
	color: var(--cps-c-text);
}

.cps-404__khoi {
	max-width: 760px;
	margin: 0 auto var(--cps-sp-5);
	text-align: center;
}

.cps-404__phu {
	margin: 0 0 var(--cps-sp-3);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading);
}

.cps-404__nhom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cps-sp-2);
}

.cps-404__nhom a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 var(--cps-sp-4);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-bg);
	box-shadow: inset 0 0 0 1px var(--cps-c-border-gallery);
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading);
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

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

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

@media (max-width: 991px) {
	.cps-post-luoi {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.cps-post-luoi {
		grid-template-columns: 1fr;
		gap: var(--cps-sp-5);
	}

	/* Man hinh hep thi the lon tro lai xep doc nhu cac the khac. */
	.cps-post-card--lon {
		flex-direction: column;
		gap: 0;
	}

	.cps-post-card--lon .cps-post-card__anh {
		width: 100%;
	}

	.cps-post-card--lon .cps-post-card__ten {
		font-size: var(--cps-fs-lg);
	}

	.cps-bai__title {
		font-size: var(--cps-fs-price);
	}

	.cps-404__so {
		font-size: 72px;
	}

	.cps-noidung__tim,
	.cps-404__tim {
		flex-direction: column;
	}

	.cps-noidung__tim button,
	.cps-404__tim button {
		width: 100%;
	}
}