/*
 * Site Living Room - trang bai.
 *
 * Than bai la mot luoi ba cot: hai cot le rong o hai ben, cot giua 700px cho
 * chu. Moi khoi mac dinh nam o cot giua; rieng anh dau bai va cac DAI XEN KE
 * duoc phep trai ra het be ngang. Nho vay chu van giu be doc de doc con anh
 * thi tho ra hai ben, dung kieu tap chi noi that.
 */

.article {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 32px 40px;
}

.article-head {
	max-width: var(--measure);
	margin: 0 auto;
	padding-bottom: 40px;
}

.article-kicker {
	margin: 26px 0 14px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}

.article-head h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.16;
	font-weight: 400;
}

.article-meta {
	margin: 22px 0 0;
	font-size: 13px;
	color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Luoi ba cot cua than bai                                            */
/* ------------------------------------------------------------------ */

.article-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(var(--measure), 100%) minmax(0, 1fr);
}
.article-body > * { grid-column: 2; min-width: 0; }

.article-body p {
	font-size: 18px;
	line-height: 1.78;
	margin: 0 0 1.25em;
}
.article-body p, .article-body li, .lr-hero figcaption { overflow-wrap: break-word; }
.article-body ul, .article-body ol { padding-left: 1.15em; margin: 0 0 1.4em; }
.article-body li { margin-bottom: 0.55em; line-height: 1.7; }
.article-body li::marker { color: var(--accent); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.lr-h2 {
	font-size: 27px;
	line-height: 1.24;
	margin: 0 0 22px;
}

/*
 * The figure con sot lai trong than bai. Gan het bai o site14 chi co mot the
 * figure va no da thanh anh dau bai; nhung mot so it bai co them muc "Other
 * Options" mang anh rieng - de nguyen thi anh do nam tro tren nen giay.
 */
.article-body figure:not(.lr-hero) {
	margin: 30px 0;
	background: var(--surface);
	padding: 28px;
}
.article-body figure:not(.lr-hero) img {
	margin: 0 auto;
	width: auto;
	max-height: 320px;
	object-fit: contain;
}
.article-body figure:not(.lr-hero) figcaption {
	margin-top: 16px;
	font-size: 13px;
	color: var(--muted);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Anh dau bai                                                         */
/* ------------------------------------------------------------------ */

.lr-hero {
	grid-column: 1 / -1;
	margin: 0 0 44px;
}
.lr-hero img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--surface);
	padding: 44px;
}
.lr-hero figcaption {
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.6;
}
.lr-hero__name { color: var(--ink); }
.lr-hero__note { color: var(--muted); margin-left: 10px; }
.lr-hero__note::before { content: "\2014"; margin-right: 10px; color: var(--line); }

/* ------------------------------------------------------------------ */
/* Phieu so lieu                                                       */
/* ------------------------------------------------------------------ */

.lr-facts {
	background: var(--surface);
	padding: 30px 32px;
	margin: 0 0 48px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 26px 34px;
	align-items: center;
}
.lr-facts__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 24px;
}
.lr-fact dt {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
}
.lr-fact dd {
	margin: 8px 0 0;
	font-family: var(--display);
	font-size: 23px;
	line-height: 1.2;
}
.lr-fact__of {
	font-family: var(--body);
	font-size: 13px;
	color: var(--muted);
}
.lr-fact dd.lr-fact__note {
	font-family: var(--body);
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
	margin-top: 6px;
}

.lr-facts__cta, .lr-outro__cta { margin: 0; }
.lr-facts__buy, .lr-outro__buy {
	display: inline-block;
	background: var(--accent-btn);
	color: #ffffff;
	padding: 14px 24px;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
}
.article-body a.lr-facts__buy, .article-body a.lr-outro__buy { color: #ffffff; text-decoration: none; }
.lr-facts__buy:hover, .lr-outro__buy:hover,
.article-body a.lr-facts__buy:hover, .article-body a.lr-outro__buy:hover {
	background: #587a5e;
	color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Doan mo dau                                                         */
/* ------------------------------------------------------------------ */

.lr-lead { margin: 0 0 20px; }
.lr-lead p { font-size: 19px; line-height: 1.75; }
.lr-lead p:first-of-type { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* NUOC DI RIENG: dai xen ke anh - chu                                 */
/* ------------------------------------------------------------------ */

.lr-band {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	margin: 76px 0;
}
.lr-band--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.lr-band--flip .lr-band__media { order: 2; }

.lr-band__media {
	background: var(--surface);
	aspect-ratio: 1 / 1;
	padding: 34px;
	position: sticky;
	top: 28px;
}
.lr-band__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lr-band__text { min-width: 0; padding-top: 4px; }
.lr-band__text > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Cac muc mot cot                                                     */
/* ------------------------------------------------------------------ */

.lr-sec { margin: 76px 0; }
.lr-sec > *:last-child { margin-bottom: 0; }

/* Thong so: khong ke khung, chi mot duong dut giua cac dong */
.lr-sec--specs table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.lr-sec--specs th {
	text-align: left;
	font-family: var(--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 0 12px;
	border-bottom: 1px solid var(--line);
}
.lr-sec--specs td {
	padding: 14px 0;
	border-bottom: 1px dashed var(--line);
	vertical-align: top;
	font-size: 16px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
.lr-sec--specs td:first-child {
	width: 44%;
	padding-right: 24px;
	color: var(--muted);
}
.lr-sec--specs th:first-child { padding-right: 24px; }

/* Uu / nhuoc: hai tam the canh nhau, khong dau tich, chi khac mau dau dong */
.lr-sec--pros {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 32px;
	align-items: start;
}
.lr-sec--pros > .lr-h2, .lr-sec--pros > p { grid-column: 1 / -1; }
.lr-pc {
	background: var(--surface);
	padding: 26px 26px 12px;
	height: 100%;
}
.lr-pc h3 {
	font-family: var(--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}
.lr-pc ul { margin-bottom: 1em; }
.lr-pc li { font-size: 16px; }
.lr-sec--pros > div:nth-of-type(2) li::marker { color: var(--muted); }

/* Ket luan: mot tam nen trang rong rai */
.lr-sec--verdict {
	background: var(--surface);
	padding: 44px 42px 30px;
}
.lr-sec--verdict .lr-h2 { margin-bottom: 20px; }

/* Hoi dap: moi cau hoi mot dong ke mong o tren */
.lr-sec--faq h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	margin: 36px 0 12px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.lr-sec--faq h3:first-of-type { margin-top: 10px; padding-top: 0; border-top: 0; }

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

.lr-outro {
	margin: 76px 0 0;
	padding-top: 36px;
	border-top: 1px solid var(--line);
}
.lr-outro__note {
	margin: 18px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}

.article-tags {
	max-width: var(--measure);
	margin: 56px auto 0;
}
.article-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.article-tags a {
	display: inline-block;
	background: var(--surface);
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
}
.article-tags a:hover { background: var(--accent-soft); }

/* ------------------------------------------------------------------ */
/* Be ngang nho                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 980px) {
	.lr-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		max-width: var(--measure);
		margin-left: auto;
		margin-right: auto;
	}
	.lr-band--flip { grid-template-columns: minmax(0, 1fr); }
	.lr-band--flip .lr-band__media { order: 0; }
	.lr-band__media { position: static; aspect-ratio: 4 / 3; padding: 26px; }
}

@media (max-width: 740px) {
	.article { padding: 0 20px 30px; }
	.article-body p { font-size: 17px; }
	.lr-lead p { font-size: 18px; }
	.lr-h2 { font-size: 23px; }
	.lr-hero img { padding: 22px; aspect-ratio: 4 / 3; }
	.lr-facts { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
	.lr-facts__buy { text-align: center; white-space: normal; }
	.lr-sec, .lr-band { margin: 56px 0; }
	.lr-sec--pros { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.lr-sec--verdict { padding: 30px 24px 18px; }
	.lr-sec--specs td:first-child { width: 42%; }
	.lr-sec--specs td { font-size: 15px; }
}