/*
 * Site Strategist - trang bai.
 *
 * Mot cot chu rong 700px. Ben phai cot chu la RAIL CAU HOI - nuoc di rieng
 * cua site nay: muc FAQ khong con nam trong mach bai nua ma treo doc le phai,
 * moi cau hoi mot the, cau tra loi bat ra khi tro chuot. Duoi 1180px rail xep
 * lai thanh accordion dat cuoi bai.
 */

/* ------------------------------------------------------------------ */
/* Dau bai                                                             */
/* ------------------------------------------------------------------ */

.st-article__head,
.st-body,
.st-article__foot {
	max-width: 1120px;
	margin: 0 auto;
	padding-left: var(--pad);
	padding-right: var(--pad);
}

.st-article__head { padding-top: 28px; }

.st-article__headin { max-width: 700px; }

.st-article__title {
	font-size: clamp(2.2rem, 7vw, 4.2rem);
	line-height: 0.98;
	font-weight: 500;
	margin: 0 0 16px;
}

.st-article__dek {
	font-size: 1.12rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 54ch;
	margin: 0 0 14px;
}

.st-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 10px 0;
	margin: 0 0 24px;
}

.st-byline a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.st-byline a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.st-byline__sep { color: var(--line); }

.st-article__art { margin: 0 0 30px; max-width: 700px; }

.st-article__art img {
	width: 100%;
	max-height: 44vh;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.st-article__art figcaption {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 8px;
	border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* Khung than bai + rail                                               */
/* ------------------------------------------------------------------ */

.st-body { display: block; }

/*
 * Chu trong than bai lay mau nhan. Luat nay do uu tien 0,1,1 nen no DE LEN moi
 * luat mot lop - ke ca luat mau chu cua nut mua (0,1,0). Dong ngay duoi la cai
 * giu cho nut mua con doc duoc; dung go no di.
 */
.st-body a { color: var(--accent); }
.st-body a.st-buy { color: #fff; }

.st-flow { min-width: 0; }

@media (min-width: 1180px) {
	.st-body {
		display: grid;
		grid-template-columns: minmax(0, 700px) 300px;
		column-gap: 56px;
		align-items: start;
		justify-content: start;
	}
	.st-body--norail { display: block; }
}

/* ------------------------------------------------------------------ */
/* Van xuoi                                                            */
/* ------------------------------------------------------------------ */

.st-lede,
.st-prose { max-width: 700px; }

.st-lede p:first-child {
	font-size: 1.16rem;
	line-height: 1.55;
}

.st-lede { margin-bottom: 8px; }

.st-prose p { margin: 0 0 1.05em; }

.st-prose a { text-decoration: underline; text-underline-offset: 2px; }

.st-prose ul,
.st-prose ol { margin: 0 0 1.1em; padding-left: 1.2em; }

.st-prose li { margin-bottom: 0.4em; }

.st-prose h3 {
	font-size: 1.4rem;
	margin: 1.4em 0 0.5em;
}

.st-prose figure { margin: 22px 0; }

.st-prose figure img {
	max-height: 380px;
	object-fit: contain;
	mix-blend-mode: multiply;
	margin: 0 auto;
}

.st-prose figcaption {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
	padding-top: 8px;
}

/* Nhan "Best for:" va hai danh sach uu / nhuoc. */
.st-lbl {
	margin: 0 0 4px;
	font-size: 0.95rem;
}

.st-lbl strong {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.st-lbl--best { color: var(--ink); }

.st-ul { list-style: none; margin: 0 0 1em; padding: 0; }

.st-ul li {
	position: relative;
	padding-left: 20px;
	font-size: 0.95rem;
	margin-bottom: 0.25em;
}

.st-ul li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.st-ul--pro li::before { content: "+"; color: var(--accent); }
.st-ul--con li::before { content: "\2013"; color: var(--muted); }

/* Bang so sanh: khung cuon rieng de o 375px khong tran trang. */
.st-tablewrap {
	overflow-x: auto;
	margin: 0 0 1.4em;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--line);
}

.st-tablewrap table {
	border-collapse: collapse;
	width: 100%;
	min-width: 520px;
	font-size: 0.88rem;
}

.st-tablewrap th,
.st-tablewrap td {
	text-align: left;
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.st-tablewrap th {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Muc noi chung                                                       */
/* ------------------------------------------------------------------ */

.st-sec { margin: 34px 0; max-width: 700px; }

.st-shead {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	border-top: 2px solid var(--ink);
	padding-top: 12px;
	margin: 0 0 14px;
}

/* Danh sach rut gon o dau bai. */
.st-short { list-style: none; margin: 4px 0 0; padding: 0; }

.st-short__row {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.st-short__no {
	font-family: var(--serif);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--num);
}

.st-short__name {
	font-family: var(--serif);
	font-size: 1.16rem;
	line-height: 1.2;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 2px;
}

.st-short__name strong { font-weight: 500; }
.st-short__name:hover { text-decoration: underline; }

.st-short__why {
	display: block;
	font-size: 0.92rem;
	color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Khoi mot san pham                                                   */
/* ------------------------------------------------------------------ */

.st-entry {
	margin: 40px 0;
	max-width: 700px;
	scroll-margin-top: 20px;
}

.st-entry__head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
	border-top: 2px solid var(--ink);
	padding-top: 14px;
	margin: 0 0 16px;
}

.st-entry__no {
	font-family: var(--serif);
	font-size: 2.6rem;
	line-height: 0.88;
	color: var(--num);
}

.st-entry__name {
	font-size: clamp(1.5rem, 5vw, 2.3rem);
	line-height: 1.02;
}

.st-entry__card {
	display: grid;
	gap: 8px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 18px;
	margin: 0 0 22px;
}

@media (min-width: 620px) {
	.st-entry__card { grid-template-columns: 210px minmax(0, 1fr); align-items: center; }
}

.st-entry__art { margin: 0; }

.st-entry__art img {
	width: 100%;
	height: 190px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.st-entry__art figcaption {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--muted);
	padding-top: 6px;
	text-align: center;
}

.st-entry__facts p { margin: 0 0 8px; }
.st-entry__facts p:last-child { margin-bottom: 0; }

.st-entry__price { line-height: 1.2; }

.st-entry__rate { font-size: 0.92rem; }

.st-entry__word {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.st-entry__bits {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/*
 * `--num` danh cho SO thu tu co lon (1.3-1.7rem) - o co do, muc tuong phan 3
 * la du. Nhan nay lai la chu thuong co nho ("Brand", "Price"), tren nen the
 * hoi nga #faf7fb chi duoc 2.99 - do bang Chrome that.
 *
 * Dung --muted nhu dong ben duoi: cung vai tro chu phu, cung mot muc.
 */
.st-bit__k { color: var(--muted); }
.st-bit__v { color: var(--muted); }

.st-flagline { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

.st-flag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ink);
	padding: 4px 9px;
}

.st-flag__why {
	font-size: 11px;
	color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* RAIL CAU HOI - nuoc di rieng cua site nay                           */
/* ------------------------------------------------------------------ */

.st-ask {
	margin: 40px 0 10px;
	border-top: 2px solid var(--ink);
	padding-top: 14px;
	min-width: 0;
}

.st-ask__head { font-size: 1.35rem; margin: 0 0 6px; }

.st-ask__hint {
	font-size: 0.84rem;
	color: var(--muted);
	margin: 0 0 12px;
}

.st-ask__lead { font-size: 0.9rem; color: var(--muted); }

.st-ask__item {
	position: relative;
	border-bottom: 1px solid var(--line);
}

/*
 * Summary la mot khoi thuong, luoi nam o lop .st-ask__qin ben trong. Dat luoi
 * thang len summary thi tam giac mo/dong cua trinh duyet chen vao lam o thu
 * nhat cua luoi va cau hoi bi day sang o thu ba khong co be rong.
 */
.st-ask__q {
	display: block;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
}

.st-ask__q::-webkit-details-marker { display: none; }
.st-ask__q::marker { content: ""; }

.st-ask__qin {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: 8px;
	align-items: baseline;
}

.st-ask__n {
	font-family: var(--serif);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
}

.st-ask__qt {
	font-family: var(--serif);
	font-size: 1.02rem;
	line-height: 1.26;
}

.st-ask__item:hover .st-ask__qt,
.st-ask__item:focus-within .st-ask__qt { color: var(--accent); }

.st-ask__a {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--muted);
	padding: 0 0 14px 42px;
}

.st-ask__a p:last-child { margin-bottom: 0; }

@media (min-width: 1180px) {
	.st-ask {
		position: sticky;
		top: 18px;
		align-self: start;
		margin: 0;
	}
	/*
	 * Khong dat overflow o day: cau tra loi bat ra BEN TRAI rail, ma overflow
	 * theo mot truc tu bat truc kia thanh "auto" - the la o nao cung bi cat.
	 */

	/*
	 * Tren man hinh rong the <details> khong con la accordion: cau tra loi
	 * duoc ve san ra ben canh roi giau bang opacity, tro chuot la hien.
	 *
	 * Hai dong duoi day giau cung mot thu o hai the he trinh duyet khac nhau:
	 *   - trinh duyet cu: bang kieu mac dinh dat display:none cho con cua
	 *     details khi chua mo;
	 *   - Chrome moi: dat content-visibility:hidden tren gia lop
	 *     ::details-content.
	 * Thieu mot trong hai thi mot nua so trinh duyet khong hien duoc gi.
	 */
	.st-ask__item > .st-ask__a { display: block; }
	.st-ask__item::details-content { content-visibility: visible; }

	.st-ask__item:hover { z-index: 6; }
	.st-ask__item:focus-within { z-index: 6; }

	.st-ask__a {
		position: absolute;
		top: -12px;
		right: calc(100% + 16px);
		width: 330px;
		padding: 16px 18px;
		background: var(--bg);
		border: 1px solid var(--ink);
		color: var(--ink);
		opacity: 0;
		visibility: hidden;
		transition: opacity 120ms linear;
		z-index: 6;
	}

	.st-ask__item:hover > .st-ask__a,
	.st-ask__item:focus-within > .st-ask__a,
	.st-ask__item[open] > .st-ask__a {
		opacity: 1;
		visibility: visible;
	}

	.st-ask__q { padding: 11px 0; }
}

/* ------------------------------------------------------------------ */
/* Cuoi bai                                                            */
/* ------------------------------------------------------------------ */

.st-article__foot { padding-bottom: 40px; }

.st-note {
	max-width: 700px;
	border-top: 2px solid var(--ink);
	padding-top: 14px;
	margin: 36px 0 24px;
	font-size: 0.88rem;
	color: var(--muted);
}

.st-note__head { font-size: 1.2rem; color: var(--ink); margin: 0 0 8px; }

.st-author {
	max-width: 700px;
	display: flex;
	align-items: center;
	gap: 14px;
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

.st-author__mark {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	border: 1px solid var(--ink);
}

.st-author__name {
	display: block;
	font-family: var(--serif);
	font-size: 1.15rem;
}

.st-author__more a {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}