/*
 * Thanh phan dung chung cho nhieu trang.
 *
 * Truoc day nhung quy tac nay nam trong single-product.css, ma file do chi
 * duoc nap o trang chi tiet san pham. Khi lam trang danh muc thi khung
 * container va breadcrumb bi mat, nen tach rieng ra day de ca hai cung dung.
 *
 * Muc luc:
 *   0. Reset cuc bo
 *   1. Khung container
 *   2. Icon
 *   3. Breadcrumb
 *   4. Tieu de khoi
 *   5. Khoi noi dung + nut Xem them
 *   6. Cau hoi thuong gap
 */

/* ================================================================
   0. RESET CUC BO
   ================================================================

   Flatsome ap dat kha nhieu style len the <button> va <table>: chu hoa,
   gian chu, margin-right/bottom 1em, font-size .97em, line-height 2.4em,
   do dam bold, do bong... Nhung style do lam sai lech giao dien.

   Cach viet ".cps-product :where(button)" cho do uu tien dung bang 1 class:
   - Cao hon quy tac cua Flatsome viet theo the ("button", "table"), du de
     trung hoa chung.
   - Bang voi cac quy tac thanh phan ben duoi; vi chung nam sau nen tu dong
     thang ma khong can them tien to cho tung dong.

   Khoi reset phai nam TRONG file dung chung nay va dat TRUOC cac thanh phan
   dung chung. Neu de trong single-product.css (nap sau common.css) thi no se
   de len ca nut FAQ va nut "Xem them", lam sai co chu va chieu cao. */

.cps-product :where(button, input[type="button"], input[type="submit"]),
.cps-archive :where(button, input[type="button"], input[type="submit"]) {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	min-height: 0;
	background: none;
	background-image: none;
	color: inherit;
}

/* Trang thai ro chuot / focus cua nut cung phai giu do manh (0,1,0) nhu
   khoi reset ben tren - nghia la :hover va :focus phai nam TRONG :where().
   Viet ":where(button):hover" thi thanh (0,2,0), manh hon ca quy tac cua
   thanh phan, va no de len that: nut mo bang chon o thanh loc bi "box-shadow:
   none" nay xoa mat VIEN (vien ve bang box-shadow inset, xem archive.css)
   ngay khi bam vao - bang chon bung ra ma nut thi tro tron. */
.cps-product :where(button:hover, button:focus),
.cps-archive :where(button:hover, button:focus) {
	box-shadow: none;
	text-shadow: none;
}

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

.cps-product :where(table),
.cps-archive :where(table) {
	margin: 0;
	font-size: inherit;
}

.cps-product :where(h1, h2, h3, p, strong, span, del),
.cps-archive :where(h1, h2, h3, p, strong, span, del) {
	text-transform: none;
	letter-spacing: normal;
}

/* Flatsome dat width:100% cho tieu de, khien margin ngang khong con tac dung
   (the bi tran ra ngoai thay vi thu hep lai). Tra ve cach tinh mac dinh. */
.cps-product :where(h1, h2, h3, h4),
.cps-archive :where(h1, h2, h3, h4) {
	width: auto;
}

/* ================================================================
   1. KHUNG CONTAINER
   ================================================================
   O desktop rong dung 1200px va khong co padding, de hai cot trong
   trang san pham cong lai ra dung 592 + 16 + 592 = 1200 nhu trang mau. */

.cps-container {
	width: 100%;
	max-width: var(--cps-container);
	margin: 0 auto;
	padding: 0;
}

/*
 * Man hinh hep hon khung 1200 thi khung phai co dem hai ben, khong thi
 * chu dinh sat mep man hinh. Dat o day - file nay tai o MOI trang - chu
 * khong dat rieng trong css tung trang: truoc day quy tac nay chi co
 * trong single-product.css va header-footer.css, nen gio hang, thanh
 * toan va cac trang chinh sach bi sat mep o khoang 768-1231px.
 */
@media (max-width: 1231px) {
	.cps-container {
		padding: 0 var(--cps-sp-4);
	}
}

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

/*
 * An khoi mat nhung VAN de trinh doc man hinh va Google doc duoc.
 *
 * Dung cho nhung chu can co trong cau truc trang ma thiet ke khong bay ra
 * - vi du the <h1> cua trang chu: trang mau khong in tieu de nao o day,
 * nhung mot trang khong co <h1> thi may tim kiem lan trinh doc man hinh
 * deu khong biet trang nay noi ve cai gi.
 *
 * KHONG dung "display: none" hay "visibility: hidden": hai cai do an ca
 * voi trinh doc man hinh.
 */
.cps-an-nhin {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ================================================================
   2. ICON
   ================================================================ */

/* Mau icon do thuoc tinh fill / stroke tren chinh the <svg> quyet dinh
   (xem cps_icon() trong inc/helpers.php). O day khong dat fill nua, neu
   khong cac icon ve bang duong vien se bi to dac thanh mot khoi den. */
.cps-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* ================================================================
   3. BREADCRUMB
   ================================================================ */

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

.cps-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cps-sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
}

.cps-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--cps-sp-1);
	margin: 0;
}

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

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

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

.cps-breadcrumb__current {
	color: var(--cps-c-heading);
	font-weight: var(--cps-fw-medium);
}

/* ================================================================
   4. TIEU DE KHOI
   ================================================================ */

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

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

.cps-link-more {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--cps-fs-md);
	line-height: var(--cps-lh-md);
	color: var(--cps-c-link);
	cursor: pointer;
}

.cps-link-more:hover {
	text-decoration: underline;
}

/* ================================================================
   5. KHOI NOI DUNG + NUT XEM THEM
   ================================================================ */

.cps-content {
	margin-bottom: var(--cps-sp-8);
}

.cps-content .cps-section-title {
	margin-bottom: var(--cps-sp-4);
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-content__body {
	position: relative;
	overflow: hidden;
}

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

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

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

.cps-content__body h2,
.cps-content__body h3 {
	margin: var(--cps-sp-6) 0 var(--cps-sp-3);
	font-size: var(--cps-fs-lg);
	line-height: 27px;
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-heading-2);
}

.cps-content__body p {
	margin: 0 0 var(--cps-sp-4);
}

.cps-content__body table {
	width: 100%;
	margin-bottom: var(--cps-sp-4);
	border: 1px solid var(--cps-c-border-table);
	border-collapse: collapse;
	font-size: var(--cps-fs-md);
}

.cps-content__body table td,
.cps-content__body table th {
	padding: var(--cps-sp-2) var(--cps-sp-3);
	border: 1px solid var(--cps-c-border-table);
}

.cps-content__more {
	display: flex;
	justify-content: center;
	margin-top: var(--cps-sp-4);
}

/* Viet ".cps-btn.cps-btn--more" (2 class) de thang quy tac ".cps-btn" trong
   single-product.css - file do nap sau nen neu chi 1 class se bi de len,
   khien nut xep doc thay vi nam ngang. */
.cps-btn--more,
.cps-btn.cps-btn--more {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 var(--cps-sp-5);
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-sm);
	background: var(--cps-c-bg);
	font-family: inherit;
	font-size: var(--cps-fs-md);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-strong);
	text-decoration: none;
	cursor: pointer;
}

.cps-btn--more .cps-icon {
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}

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

/* ================================================================
   6. CAU HOI THUONG GAP
   ================================================================ */

.cps-faq {
	margin-bottom: var(--cps-sp-8);
}

.cps-faq__list {
	margin-top: var(--cps-sp-4);
	border: 1px solid var(--cps-c-border);
	border-radius: var(--cps-r-md);
	overflow: hidden;
}

.cps-faq__item + .cps-faq__item {
	border-top: 1px solid var(--cps-c-border);
}

.cps-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cps-sp-3);
	width: 100%;
	min-height: 58px;
	padding: var(--cps-sp-4);
	border: 0;
	background: var(--cps-c-bg);
	font-family: inherit;
	font-size: var(--cps-fs-base);
	line-height: var(--cps-lh-base);
	font-weight: var(--cps-fw-medium);
	color: var(--cps-c-heading-2);
	text-align: left;
	cursor: pointer;
}

.cps-faq__question .cps-icon {
	width: 12px;
	height: 12px;
	transition: transform 0.15s ease;
}

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

.cps-faq__answer {
	padding: 0 var(--cps-sp-4) var(--cps-sp-4);
	font-size: var(--cps-fs-md);
	line-height: 22px;
}

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

.cps-faq__answer p {
	margin: 0 0 var(--cps-sp-2);
	white-space: pre-line;
}

/* ================================================================
   TIEU DE KHOI

   Dung o CA trang danh muc ("Chon thuong hieu", "Chon theo tieu chi",
   "Sap xep theo") lan trang chu ("Uu dai noi bat"). Truoc day khai bao
   trong archive.css nen ra trang chu la mat kieu: khong nap archive.css
   o do, chu roi ve co mac dinh cua Flatsome (25.6px, khong vach vang).
   ================================================================ */

/*
 * Co chu 20px/700 do tu trang mau.
 *
 * Co chu 20px/700 do tu trang mau - truoc day o day la 16px/600, nho qua
 * nen ba khoi loc troi thanh mot mang khong co diem dung. Them mot vach
 * vang doc ben trai: trang mau khong co, nhung ta chi co MOT mau nhan nen
 * dung no de danh dau dau khoi cho mat bam vao.
 */
.cps-block-title {
	position: relative;
	margin: 0 0 var(--cps-sp-4);
	padding-left: var(--cps-sp-3);
	font-size: var(--cps-fs-xl);
	line-height: 30px;
	font-weight: var(--cps-fw-bold);
	color: var(--cps-c-heading);
}

.cps-block-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 20px;
	margin-top: -10px;
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary);
}

/* ================================================================
   DONG THONG TIN CUA BAI VIET

   Dat o day chu khong phai content.css: dong nay xuat hien ca o trang
   chu (hai khoi bai viet cuoi trang) lan o trang bai viet, ma trang chu
   khong nap content.css.
   ================================================================ */

.cps-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cps-sp-2);
	font-size: var(--cps-fs-xs);
	line-height: var(--cps-lh-xs);
	color: var(--cps-c-muted);
}

.cps-post__cat {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 var(--cps-sp-2);
	border-radius: var(--cps-r-full);
	background: var(--cps-c-primary-pale);
	font-weight: var(--cps-fw-semibold);
	color: var(--cps-c-primary-text);
}

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

/*
 * Dau cham giua ngay dang va thoi gian doc. Ve bang ::before de khong phai
 * chen ky tu vao HTML - trinh doc man hinh se doc ca dau cham do.
 */
.cps-post__doc::before {
	content: "•";
	margin-right: var(--cps-sp-2);
}