/*
 * Site Interiors - kieu dang cua THAN BAI.
 *
 * Chi nap o trang bai. Chu than bai co 17px theo ban thiet ke - nho hon tieu
 * de Prata rat nhieu, do la cho tuong phan chinh cua trang.
 */

.article-body {
	font-size: 17px;
	line-height: 1.75;
}

.article-body > p:first-of-type {
	font-size: 19px;
	line-height: 1.62;
	color: #3a2e30;
}

.article-body p { margin: 0 0 1.25em; }

.article-body a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.article-body a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Tieu de muc                                                         */
/* ------------------------------------------------------------------ */

.article-body h2,
.article-body .io-h2,
.io-swatches-head {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(23px, 4.4vw, 31px);
	line-height: 1.2;
	margin: 2.1em 0 0.55em;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	scroll-margin-top: 20px;
}

.article-body h3 {
	font-family: var(--body);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin: 2em 0 0.7em;
}

/* ------------------------------------------------------------------ */
/* Danh sach, anh, bang                                                */
/* ------------------------------------------------------------------ */

.article-body ul,
.article-body ol { margin: 0 0 1.3em; padding-left: 1.15em; }

.article-body li { margin: 0.45em 0; }

.article-body ul li::marker { color: var(--accent); }

.article-body figure {
	margin: 32px 0;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
}
.article-body figure img {
	margin: 0 auto;
	max-height: 380px;
	width: auto;
	object-fit: contain;
}
.article-body figcaption {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

/*
 * Bang thong so: gia tri trong bang nay co o dai toi vai chuc ky tu, o be
 * 375px bang se rong hon man hinh. Cho CHINH bang cuon ngang trong khung boc
 * (io_wrap_tables o inc/article.php) de ca trang khong bi keo theo.
 */
.io-table-wrap {
	margin: 30px 0;
	overflow-x: auto;
	background: var(--surface);
	border: 1px solid var(--line);
}

.article-body table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.article-body thead th {
	font-family: var(--body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--wash);
}

.article-body th,
.article-body td {
	border-bottom: 1px solid var(--line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.article-body tbody tr:last-child td { border-bottom: 0; }

.article-body tbody td:first-child {
	width: 38%;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* NUOC DI RIENG: hai mau vai                                          */
/* ------------------------------------------------------------------ */

.io-swatches { margin: 3em 0 2.4em; }

.io-swatches-note {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 58ch;
}

.io-swatch-pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.io-swatch {
	padding: 24px 22px 26px;
	/* Vien tren dam mot vach, nhu mep cat cua mot manh vai mau */
	border-top: 7px solid var(--swatch-a-edge);
}

.io-swatch--works { background: var(--swatch-a); }

.io-swatch--check {
	background: var(--swatch-b);
	border-top-color: var(--swatch-b-edge);
}

/*
 * Hai ben khac nhau bang MAU NEN va khoang cach, dung y ban thiet ke: khong
 * dau tich, khong dau X, khong cham tron - de nguoi doc tu can hai manh vai.
 */
.io-swatch-label {
	font-family: var(--display);
	font-size: 19px;
	line-height: 1.2;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(34, 27, 28, 0.16);
}

/*
 * Phai viet ca `.article-body` o dau: luat `.article-body ul` phia tren co do
 * uu tien cao hon `.io-swatch-list` mot bac, khong ghi kem thi le thut dau
 * dong cua danh sach than bai an sang day va chu trong the bi day vao trong.
 */
.article-body .io-swatch-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-body .io-swatch-list li {
	margin: 0;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.55;
}
.article-body .io-swatch-list li + li { border-top: 1px solid rgba(34, 27, 28, 0.10); }

.io-swatch-rest {
	margin-top: 22px;
	font-size: 15.5px;
	color: var(--muted);
}
.io-swatch-rest p:last-child { margin-bottom: 0; }

@media (min-width: 620px) {
	.io-swatch-pair { grid-template-columns: 1fr 1fr; gap: 18px; }
	.io-swatch { padding: 28px 26px 30px; }
}