/*
 * Site Living Room - kieu dang chung.
 *
 * Nguyen tac: khoang trang lam viec chia doan, khong phai duong ke. Chi co ba
 * cho duoc ke: gach chan o tim kiem, vien tren chan trang va duong dut trong
 * bang thong so. Moi thu khac tach nhau bang khoang cach.
 */

:root {
	--bg: #f4f5f1;
	--surface: #ffffff;
	--ink: #22261f;
	--muted: #6d7367;
	--line: #dfe2d9;
	--accent: #6b8f71;
	/* Nen nut mua: dam hon --accent de chu trang doc duoc */
	--accent-btn: #4f6d55;
	--accent-soft: #eef2ec;

	--display: "Marcellus", "Iowan Old Style", Georgia, serif;
	--body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1220px;
	--measure: 700px;
	--gap: 44px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.2;
	margin: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ten model kieu "CD2030AN-XL" khong co cho ngat - cho phep be giua tu de
   cot chu khong tho ra ngoai khung o be ngang 375px. */
h1, h2, h3, .lr-card__title, .lr-rail a { overflow-wrap: break-word; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: static; width: auto; height: auto; clip: auto; padding: 10px 16px; }

.lr-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.lr-dot { margin: 0 8px; color: var(--line); }

/* ------------------------------------------------------------------ */
/* Dau trang: mot dong mong, chu thuong, khong vien                    */
/* ------------------------------------------------------------------ */

.site-head {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 26px 32px 22px;
	display: flex;
	align-items: baseline;
	gap: 28px;
	flex-wrap: wrap;
}

.brand {
	font-family: var(--display);
	font-size: 21px;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.site-nav {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	white-space: nowrap;
}
.site-nav a {
	font-size: 14px;
	color: var(--muted);
	text-transform: lowercase;
	letter-spacing: 0.01em;
}

.site-head__search { flex: 0 0 auto; }

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 3px;
}
.search-form input[type="search"] {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	width: 130px;
	padding: 2px 0;
	min-width: 0;
}
.search-form input[type="search"]:focus { outline: none; }
.search-form button {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	padding: 2px 0;
}
.search-form button:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Trang chu                                                           */
/* ------------------------------------------------------------------ */

.lr-masthead { padding: 56px 0 40px; max-width: 760px; }
.lr-masthead h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.05; }
.lr-masthead p {
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 16px;
	max-width: 58ch;
}

.lr-block { margin: 0 0 88px; }
.lr-block--lead { margin-bottom: 96px; }

.lr-blockhead {
	font-size: 15px;
	font-family: var(--body);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 28px;
}
.lr-blocknote {
	margin: -18px 0 28px;
	font-size: 14px;
	color: var(--muted);
	max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* The bai - luoi hai cot, anh lon, chu nho ben duoi                   */
/* ------------------------------------------------------------------ */

.lr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px var(--gap);
}

.lr-card { min-width: 0; }

.lr-card__media {
	display: block;
	background: var(--surface);
	aspect-ratio: 4 / 3;
	padding: 30px;
	overflow: hidden;
}
.lr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 320ms ease;
}
.lr-card__media:hover img { transform: scale(1.03); }

.lr-card__text { padding-top: 18px; }

.lr-card__kicker {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}

.lr-card__title {
	font-family: var(--body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: 0;
	margin: 0;
}

.lr-card__meta {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--muted);
}
.lr-rate__num { color: var(--ink); font-weight: 600; }
.lr-rate__what { color: var(--muted); }
.lr-price { color: var(--ink); font-weight: 600; }

/* The mo dau: anh trai het be ngang, tieu de bang chu Marcellus co lon */
.lr-card--lg .lr-card__media { aspect-ratio: 16 / 9; padding: 44px; }
.lr-card--lg .lr-card__text {
	padding-top: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 8px 48px;
	align-items: start;
}
.lr-card--lg .lr-card__kicker { grid-column: 1 / -1; }
.lr-card--lg .lr-card__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.16;
	grid-row: span 2;
}
.lr-card--lg .lr-card__dek {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	align-self: end;
}
.lr-card--lg .lr-card__meta { margin: 0; align-self: start; }

/* ------------------------------------------------------------------ */
/* Dai chuyen muc                                                      */
/* ------------------------------------------------------------------ */

.lr-rail__label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}
.lr-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.lr-rail a {
	display: inline-block;
	background: var(--surface);
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 14px;
	text-transform: lowercase;
}
.lr-rail a:hover { background: var(--accent-soft); color: var(--ink); }
.lr-rail__n { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* ------------------------------------------------------------------ */
/* So lieu cuoi trang chu                                              */
/* ------------------------------------------------------------------ */

.lr-numbers dl {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	background: var(--surface);
	padding: 44px 40px;
}
.lr-numbers dt {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.lr-numbers dd {
	margin: 10px 0 0;
	font-family: var(--display);
	font-size: 34px;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Tieu de trang danh sach                                             */
/* ------------------------------------------------------------------ */

.crumbs {
	padding: 30px 0 0;
	font-size: 13px;
	color: var(--muted);
}
.crumbs a:hover { color: var(--accent); }

.lr-pagehead { padding: 30px 0 46px; max-width: 760px; }
.lr-pagehead h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; }
.lr-pagehead__sub {
	margin: 16px 0 0;
	color: var(--muted);
	font-size: 15px;
}
.lr-archive-intro {
	max-width: 62ch;
	margin: -22px 0 46px;
	color: var(--muted);
	font-size: 15px;
}
.lr-searchbox { margin: -20px 0 52px; max-width: 420px; }
.lr-searchbox .search-form input[type="search"] { width: 100%; font-size: 17px; }
.lr-empty { color: var(--muted); margin: 0 0 56px; }

/* ------------------------------------------------------------------ */
/* Phan trang                                                          */
/* ------------------------------------------------------------------ */

.pager { margin: 80px 0 0; }
.pager ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.pager a, .pager span {
	display: inline-block;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--muted);
	background: var(--surface);
}
.pager .current { color: var(--ink); background: var(--accent-soft); }

/* ------------------------------------------------------------------ */
/* Chan trang                                                          */
/* ------------------------------------------------------------------ */

.site-foot { margin-top: 40px; }
.site-foot__in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 52px 32px 72px;
	border-top: 1px solid var(--line);
}
.site-foot__brand {
	font-family: var(--display);
	font-size: 19px;
	margin: 0 0 20px;
}
.site-foot__nav ul {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.site-foot__nav a { font-size: 14px; color: var(--muted); text-transform: lowercase; }
.disclosure {
	max-width: 68ch;
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 18px;
}
.site-foot__year { font-size: 13px; color: var(--muted); margin: 0; }

/* Trang bai: khoi "doc them" dung chung luoi voi trang chu */
.lr-related { margin-top: 30px; }

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

@media (max-width: 900px) {
	.lr-numbers dl { grid-template-columns: 1fr; gap: 26px; padding: 34px 26px; }
	.lr-card--lg .lr-card__text { grid-template-columns: 1fr; gap: 12px; }
	.lr-card--lg .lr-card__title { grid-row: auto; }
}

@media (max-width: 740px) {
	body { font-size: 16px; }
	.lr-wrap { padding: 0 20px; }
	.site-head { padding: 20px; gap: 14px 18px; }
	.site-head__search { flex: 1 1 100%; }
	.search-form input[type="search"] { width: 100%; }
	.lr-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.lr-masthead { padding: 34px 0 30px; }
	.lr-block { margin-bottom: 64px; }
	.lr-card--lg .lr-card__media { aspect-ratio: 4 / 3; padding: 26px; }
	.site-foot__in { padding: 40px 20px 56px; }
}


/* === de mau chu huy hieu plugin === */
/*
 * Huy hieu cua plugin dat chu cung mau voi nen (nen la chinh mau do pha 10%
 * do duc), nen tuong phan chi 2.5-4.1 - duoi chuan AA 4.5, rieng nhan
 * 'Prime' gan nhu khong doc duoc.
 *
 * Chi doi MAU CHU, giu nguyen nen cua plugin. Dung hai lop cung ten de co do
 * uu tien cao hon luat goc ma khong phai dung !important.
 *
 * Khong sua tep CSS cua plugin: ban cap nhat sau nay se ghi de len.
 */
.acms-badge.acms-badge--prime   { color: #01607f; }
.acms-badge.acms-badge--danger  { color: #a81b1b; }
.acms-badge.acms-badge--success { color: #10693a; }
.acms-badge.acms-badge--warning { color: #8a5a06; }
.acms-badge.acms-badge--info    { color: #0b5e86; }


/* === mau chu phu cua plugin === */
/*
 * Plugin lay mau chu phu tu `var(--color-text-muted, #9ca3af)`. Khong theme
 * nao dat bien do nen no roi ve #9ca3af - tren nen trang chi duoc 2.54, duoi
 * chuan. Do bang Chrome that: nhan "/10", "ACMS Score" va dong "Updated: ..."
 * deu dinh.
 *
 * #6b7280 duoc 4.83, va chinh plugin cung dung mau nay o cho khac.
 */
:root { --color-text-muted: #6b7280; }

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Day lien ket trang tinh o chan trang.                                */
/* Mau chu ke thua cua chan trang: chu chan trang da qua vong do tuong  */
/* phan, con mau nhan cua site thi chua.                                */
/* ------------------------------------------------------------------ */
.lr-foot-pages {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
	line-height: 1.6;
}
.lr-foot-pages a {
	color: inherit;
	text-decoration: none;
	opacity: .82;
}
.lr-foot-pages a:hover,
.lr-foot-pages a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* --- Logo thuong hieu ------------------------------------------------ */
/* Dau hieu do bang em nen no lon nho theo chinh co chu cua ten site. */
.lr-lg { white-space: nowrap; }
.lr-lg__mark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.36em; }
.lr-lg__tld { font-weight: 400; opacity: .5; }

/* --- Lien ket chan trang --------------------------------------------- */
/* Viet .lr-mang .lr-mang__h chu khong phai .lr-mang__h: luat cua theme
   kieu .xx-foot__disclosure p co do uu tien (0,1,1), cao hon (0,1,0), nen ban
   ngan gon bi de mat. Da do that moi biet.

   Khong dung opacity de lam mo: no keo do tuong phan xuong duoi nguong doc
   duoc o phan lon theme. Phan cap bang co chu la du, va co san toi thieu 11px
   vi co theme dat khoi cong bo chi 12px. */
.lr-mang { margin: 22px 0 0; }
.lr-mang .lr-mang__h { margin: 0 0 8px; font-size: max(11px, .8em); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lr-mang .lr-mang__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: max(11px, .8em); line-height: 1.6; }
.lr-mang .lr-mang__list li { margin: 0; padding: 0; flex: 0 0 auto; width: auto; max-width: 100%; }
.lr-mang .lr-mang__list li::before { content: none; }
.lr-mang .lr-mang__list a { text-decoration: none; }
.lr-mang .lr-mang__list a:hover,
.lr-mang .lr-mang__list a:focus { text-decoration: underline; }
/* Mau chu chan trang cua theme do duoc 4.46, sat duoi nguong. Rieng
   khoi nay lay mot tone dam hon: #686e62 do duoc 4.7 tren nen #f4f5f1. */
.lr-mang .lr-mang__h,
.lr-mang .lr-mang__list a { color: #686e62; }