/**
 * Khuon BAI VIET /blog/{slug} — CLONE ban mau Fabrica.
 * Bang so day du xem dau file `single.php`.
 */

/* Khuon nay tu lo nhip doc, `.w22-than` khong dat khe. */
.single-post .w22-than {
	gap: 0;
}

.w22-bv {
	padding-inline: var(--w22-le);
}

/*
 * Khung chia DOI: cot trai bo trong, noi dung nua phai. Tu 1024 xuong thi bo
 * cot trong (do that: ban mau khong con phan tu <Filler> o kho do).
 */
.w22-bv-khung {
	width: 100%;
	max-width: 1520px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.w22-bv-cot {
	min-width: 0;
}

/* ---------- Anh bia DAN CUNG o nua trai ----------
 * Ban mau: `position: fixed`, rong 42vw (do that: 605 @1440 va 806 @1920,
 * deu ra 42%), top 60 (duoi thanh header), le trai 6, day 6, bo 25.
 * Anh dung yen trong khi cot chu ben phai cuon qua.
 * Tu 1024 xuong: ban mau doi han sang BANNER NGANG tren dau, cuon theo trang.
 */
.w22-bv-anh {
	position: fixed;
	top: 60px;
	left: 6px;
	bottom: 6px;
	z-index: 0;
	width: 42vw;
	overflow: hidden;
	border-radius: 25px;
	background: var(--w22-nen-the);
}

/*
 * 🔴 `contain` chu KHONG `cover` nhu ban mau — ho bay §40, lan thu ba.
 * O anh o desktop la khung DOC (605x1034, ti le 0,585) trong khi anh dai dien
 * bai cua Web22 la banner og 1200x630 NAM NGANG va CO CHU IN TRONG ANH. Cover
 * se cat mat gan 2/3 be ngang, chu trong anh vo thanh manh vun.
 * `contain` cho thay tron ven banner, nam giua o.
 * O kho hep thi o anh lai la khung NGANG (1012x550, ti le 1,84) — gan trung
 * ti le banner nen tra ve `cover` dung nhu ban mau (xem @1024).
 */
.w22-bv-anh__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * 🔴 Chan trang phai NAM TREN anh dan cung.
 * Anh `position: fixed` co `z-index: 0` nen no ve DE LEN chan trang khi cuon
 * toi day — do that: `elementFromPoint` o vung chong lan tra ve chinh anh.
 * Ban mau khong dinh loi nay vi khoi anh cua no la anh em ĐỨNG TRƯỚC `main`,
 * con chan trang dung sau nen tu ve de len. O day anh nam trong `article` nen
 * phai nang chan trang len bang z-index. Chi ap trong trang bai viet.
 */
.single-post .w22-chan {
	position: relative;
	z-index: 1;
}

/* ---------- Man mo dau ----------
 * Cao 100vh, chu NEO DAY. Do that: `dau` cao dung bang chieu cao khung nhin
 * o ca hai lan do (1100 va 1200), tuc min-height: 100vh.
 */
.w22-bv-dau {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 60px;
	padding-bottom: 140px;
}

.w22-bv-tieu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.w22-bv-ngay {
	margin-bottom: 26px;
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-bv-h1 {
	font-size: 60px;
	line-height: 1.1;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-bv-dan {
	margin-top: 36px;
	max-width: 500px;
	font-size: var(--w22-chu-18);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Khoi tac gia ---------- */
.w22-bv-tac-gia {
	display: flex;
	align-items: center;
	gap: 14px;
}

.w22-bv-tac-gia__anh {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--w22-bo-tron);
	object-fit: cover;
}

.w22-bv-tac-gia__chu {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.w22-bv-tac-gia__ten {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-bv-tac-gia__vai {
	font-size: var(--w22-chu-14);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

/* ---------- Than bai ---------- */
.w22-bv-than {
	display: flex;
	flex-direction: column;
	gap: 70px;
	padding-bottom: 140px;
}

.w22-bv-chu {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* Doan mo bai: 30/36, rong HET COT (khac than bai chi 600). */
.w22-bv-mo {
	font-size: var(--w22-chu-30);
	line-height: 1.2;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/* ---------- Kho chu WordPress ----------
 * Than bai rong 600 (ban mau), p 17/23,8.
 * Nhip doc do that o ban mau: moi khoi cach nhau 20, rieng h2/h3 cach 30,
 * danh sach DINH LIEN doan dan no (khe 0).
 */
.w22-bv-noi-dung {
	max-width: 600px;
	font-size: 17px;
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-bv-noi-dung > * + * {
	margin-top: 20px;
}

.w22-bv-noi-dung > h2,
.w22-bv-noi-dung > h3,
.w22-bv-noi-dung > h4 {
	margin-top: 30px;
	font-weight: var(--w22-dam);
	letter-spacing: var(--w22-gian-to);
	color: var(--w22-muc);
}

.w22-bv-noi-dung > h2 {
	font-size: 23px;
	line-height: 1.3;
}

.w22-bv-noi-dung > h3 {
	font-size: var(--w22-chu-18);
	line-height: 1.4;
}

.w22-bv-noi-dung > h4 {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
}

/* Danh sach di lien voi doan dan no. */
.w22-bv-noi-dung > ul,
.w22-bv-noi-dung > ol {
	margin-top: 0;
	padding-left: 22px;
}

.w22-bv-noi-dung li + li {
	margin-top: 6px;
}

.w22-bv-noi-dung ul > li {
	list-style: disc;
}

.w22-bv-noi-dung ol > li {
	list-style: decimal;
}

.w22-bv-noi-dung a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(10, 10, 10, 0.35);
	transition: text-decoration-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-noi-dung a:hover {
	text-decoration-color: currentColor;
}

.w22-bv-noi-dung strong,
.w22-bv-noi-dung b {
	font-weight: var(--w22-dam);
}

.w22-bv-noi-dung blockquote {
	padding-left: 22px;
	border-left: 2px solid var(--w22-muc);
	font-size: var(--w22-chu-20);
	line-height: 1.4;
}

/* ---------- Luoi an toan cho kho chu ----------
 * Nguoi viet bai dan duoc bat ky thu gi vao day. Nam quy tac duoi giu cho
 * khong co gi lam TRAN NGANG ca trang o kho hep.
 */
.w22-bv-noi-dung img,
.w22-bv-noi-dung video,
.w22-bv-noi-dung iframe {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.w22-bv-noi-dung figure {
	margin: 0;
}

.w22-bv-noi-dung figcaption {
	margin-top: 10px;
	font-size: var(--w22-chu-14);
	line-height: 1.4;
	color: var(--w22-muc);
	opacity: 0.6;
}

/* Bang rong hon cot thi CUON RIENG trong o cua no, khong day ca trang. */
.w22-bv-noi-dung .wp-block-table,
.w22-bv-noi-dung figure.wp-block-table {
	overflow-x: auto;
}

.w22-bv-noi-dung table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--w22-chu-15);
}

.w22-bv-noi-dung th,
.w22-bv-noi-dung td {
	padding: 10px 12px;
	border: 1px solid var(--w22-luoi, #f1f1f1);
	text-align: left;
	vertical-align: top;
}

.w22-bv-noi-dung pre {
	overflow-x: auto;
	padding: 18px;
	border-radius: 12px;
	background: var(--w22-nen-the);
	font-family: Consolas, ui-monospace, monospace;
	font-size: var(--w22-chu-14);
	line-height: 1.5;
}

.w22-bv-noi-dung code {
	font-family: Consolas, ui-monospace, monospace;
	font-size: 0.92em;
}

/* Chuoi dai khong dau cach (duong dan, ma) khong duoc pha cot. */
.w22-bv-noi-dung p,
.w22-bv-noi-dung li {
	overflow-wrap: anywhere;
}

/* ---------- Bai truoc / bai sau ---------- */
.w22-bv-dieu-huong {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--w22-khe-the);
	max-width: 600px;
}

.w22-bv-dieu-huong__o {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border-radius: 18px;
	background: var(--w22-nen-the);
	transition: background-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-dieu-huong__o:hover,
.w22-bv-dieu-huong__o:focus-visible {
	background: #ebebeb;
}

.w22-bv-dieu-huong__o--sau {
	text-align: right;
}

.w22-bv-dieu-huong__nhan {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-bv-dieu-huong__ten {
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

/* ---------- Khoi ket noi ---------- */
.w22-bv-ket {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.w22-bv-ket__chu {
	max-width: 500px;
	font-size: var(--w22-chu-20);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-bv-ket__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.w22-bv-ket__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 18px;
	border-radius: 50px;
	background: var(--w22-toi);
	font-size: var(--w22-chu-14);
	line-height: 1;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-tren-toi);
	transition: background-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-ket__link:hover,
.w22-bv-ket__link:focus-visible {
	background: #000;
}

/* ============================================================ @1024 */
@media (max-width: 1024px) {
	/* Ban mau BO cot trong o kho nay — noi dung tran het be ngang. */
	.w22-bv-khung {
		grid-template-columns: 1fr;
	}

	.w22-bv-trong {
		display: none;
	}

	/*
	 * Anh bia thoi DAN CUNG, thanh banner ngang tren dau va cuon theo trang.
	 * Do that ban mau: 1012x550 @1024 (tuc rong het khung tru 12, cao 550).
	 * Ti le 1,84 gan trung banner og 1,9 nen tra ve `cover` dung ban mau.
	 */
	.w22-bv-anh {
		position: static;
		width: auto;
		height: 550px;
		margin-bottom: 60px;
		inset: auto;
	}

	.w22-bv-anh__img {
		object-fit: cover;
	}

	/* Man mo dau khong con chiem tron mot khung nhin khi da co banner tren dau. */
	.w22-bv-dau {
		min-height: 0;
	}

	.w22-bv-dau {
		gap: 50px;
		padding-bottom: 50px;
	}

	.w22-bv-h1 {
		font-size: 50px;
	}

	.w22-bv-ngay {
		font-size: 13px;
	}

	.w22-bv-dan {
		font-size: var(--w22-chu-16);
	}

	.w22-bv-mo {
		font-size: 28px;
	}

	.w22-bv-noi-dung {
		font-size: var(--w22-chu-16);
	}

	.w22-bv-noi-dung > h2 {
		font-size: 22px;
	}

	.w22-bv-than {
		padding-bottom: 100px;
	}
}

/* ============================================================ @600 */
@media (max-width: 600px) {
	.w22-bv-dau {
		gap: 40px;
		padding-bottom: 30px;
	}

	/* Do that ban mau @390: 382x500, bo 16, le 4. */
	.w22-bv-anh {
		height: 500px;
		margin-bottom: 40px;
		border-radius: 16px;
	}

	.w22-bv-h1 {
		font-size: 36px;
	}

	.w22-bv-ngay {
		margin-bottom: 18px;
		font-size: var(--w22-chu-12);
	}

	.w22-bv-dan {
		margin-top: 24px;
		font-size: var(--w22-chu-15);
		max-width: none;
	}

	.w22-bv-mo {
		font-size: 24px;
	}

	.w22-bv-chu {
		gap: 34px;
	}

	.w22-bv-noi-dung {
		max-width: none;
		font-size: var(--w22-chu-15);
	}

	.w22-bv-noi-dung > h2 {
		font-size: var(--w22-chu-20);
		line-height: 1.2;
	}

	.w22-bv-than {
		gap: 50px;
		padding-bottom: 70px;
	}

	/* Hai o bai truoc/sau xep doc o kho hep, o thu hai tra ve canh trai. */
	.w22-bv-dieu-huong {
		grid-template-columns: 1fr;
	}

	.w22-bv-dieu-huong__o--sau {
		text-align: left;
	}
}

/* ---------- NOI SILO: dich vu lien quan + bai cung cum (31/08) ----------
 * Hai khoi nay dat GIUA than bai va khoi ket, trong `.w22-bv-than` nen an theo
 * khe doc san co cua no — khong tu khai margin, de nhip bai khong troi.
 *
 * 🔴 Be ngang bam theo `.w22-bv-dieu-huong` (600px) chu khong tran het cot:
 * day la khoi DIEU HUONG, de rong bang kho chu thi no doi mat voi than bai va
 * nguoi doc tuong con noi dung.
 */
.w22-bv-silo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 600px;
}

.w22-bv-silo__h2 {
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
	text-transform: none;
}

/* The hub: to hon cac dong spoke vi day la diem den chinh cua chieu link LEN. */
.w22-bv-silo__hub {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	border-radius: 18px;
	background: var(--w22-nen-the);
	transition: background-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-silo__hub:hover,
.w22-bv-silo__hub:focus-visible {
	background: #ebebeb;
}

.w22-bv-silo__hub-ten {
	font-size: var(--w22-chu-20);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
}

.w22-bv-silo__hub-mo {
	font-size: var(--w22-chu-14);
	line-height: 1.5;
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.6;
}

.w22-bv-silo__ds,
.w22-bv-silo__bai {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.w22-bv-silo__ds a,
.w22-bv-silo__bai a {
	display: block;
	padding: 12px 0;
	border-top: 1px solid var(--w22-net);
	font-size: var(--w22-chu-16);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	transition: opacity var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-silo__ds a:hover,
.w22-bv-silo__ds a:focus-visible,
.w22-bv-silo__bai a:hover,
.w22-bv-silo__bai a:focus-visible {
	opacity: 0.55;
}

@media (max-width: 600px) {
	.w22-bv-silo__hub {
		padding: 20px;
	}

	.w22-bv-silo__hub-ten {
		font-size: var(--w22-chu-16);
	}

	.w22-bv-silo__ds a,
	.w22-bv-silo__bai a {
		font-size: var(--w22-chu-14);
	}
}

/* ---------- MUC LUC BAI VIET (01/09) ----------
 * Dat GIUA doan mo bai va than bai, trong `.w22-bv-chu` (flex column khe 50).
 * Be ngang bam theo than bai (600) chu khong tran het cot — de no doc nhu mot
 * phan cua bai, khong phai mot khoi lat vao.
 *
 * 🔴 `scroll-margin-top` tren h2 la BAT BUOC, khong phai trang tri: thanh header
 * `position:fixed` cao ~60px, bam mot muc trong muc luc ma khong chua cho thi
 * tieu de nhay len nam DUOI thanh header, nguoi doc tuong bam hong. Cung luat
 * da ap cho trang dich vu (`trang-dich-vu.css`).
 */
.w22-bv-ml {
	max-width: 600px;
	padding: 22px 24px;
	border: 1px solid var(--w22-net);
	border-radius: 14px;
}

.w22-bv-ml__nhan {
	margin-bottom: 14px;
	font-size: var(--w22-chu-12);
	line-height: 1.3;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	opacity: 0.55;
}

.w22-bv-ml__ds {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: w22bvml;
}

.w22-bv-ml__ds li {
	counter-increment: w22bvml;
	display: flex;
	gap: 10px;
	margin: 0;
}

.w22-bv-ml__ds li::before {
	content: counter(w22bvml, decimal-leading-zero);
	flex: none;
	font-size: var(--w22-chu-12);
	line-height: 1.55;
	font-weight: var(--w22-vua);
	color: var(--w22-muc);
	opacity: 0.4;
	font-variant-numeric: tabular-nums;
}

/* Chuyen biet keo len de thang luat gach chan cua kho chu — ho bay §73. */
.w22-bv-chu .w22-bv-ml__ds a,
.w22-bv-ml__ds a {
	font-size: var(--w22-chu-15);
	line-height: 1.4;
	font-weight: var(--w22-vua);
	letter-spacing: var(--w22-gian);
	color: var(--w22-muc);
	text-decoration: none;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--w22-vua-tg) var(--w22-duong-cong);
}

.w22-bv-chu .w22-bv-ml__ds a:hover,
.w22-bv-chu .w22-bv-ml__ds a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
}

/* Chua cho cho thanh header co dinh — xem ghi chu dau khoi. */
.w22-bv-noi-dung > h2 {
	scroll-margin-top: calc(var(--w22-header-cao) + 24px);
}

@media (max-width: 600px) {
	.w22-bv-ml {
		padding: 18px 20px;
	}

	.w22-bv-chu .w22-bv-ml__ds a,
	.w22-bv-ml__ds a {
		font-size: var(--w22-chu-14);
	}
}