/*
 * rieng.css — Bộ giao diện monngonquangbinh.com
 *
 * Viết theo DESIGN.md và ảnh mẫu trang-chu.png. Nạp sau cùng, phụ thuộc
 * aloxo-dien-thoai (tệp CSS cuối của giao diện cha) nên mọi quy tắc ở đây
 * luôn thắng mà không cần dùng !important.
 *
 * KHÔNG sửa giao diện cha aloxovn-base — bản cập nhật sau sẽ ghi đè mất.
 */

/* ==========================================================================
   1. TOKEN — màu, chữ, khoảng cách, bo góc, đổ bóng
   ========================================================================== */

:root {
	/* --- Màu nền và chữ --- */
	--mau-nen: #F8F6F1;          /* Trắng ngà — nền chính toàn site */
	--mau-nen-the: #FFFFFF;      /* Nền thẻ, header, vùng nội dung nổi */
	--mau-nen-phu: #E9E5DD;      /* Nền khối thông tin phụ */
	--mau-nen-kem: #FFF8EE;      /* Nền hero không ảnh, khối chuyển đổi B */
	--mau-chu: #20201E;          /* Than đen — chữ chính */
	--mau-chu-dam: #2B2A27;      /* Chữ phụ đậm */
	--mau-chu-nhat: #63605A;     /* Chữ phụ, mô tả, chú thích */
	--mau-vien: #D8D4CC;         /* Viền thẻ, đường phân cách */
	--mau-vien-dam: #BDB8AF;     /* Viền cần nhấn, trạng thái focus */

	/* --- Màu nhấn --- */
	--mau-do: #B83A2F;           /* Đỏ ớt — CTA chính, nhãn quan trọng */
	--mau-do-hover: #A93229;
	--mau-do-active: #8F2A23;
	--mau-dat-nung: #C66A45;     /* Trang trí, nét đồ hoạ — không đặt chữ nhỏ lên */
	--mau-dat-nung-dam: #9E5A2C; /* Nền nhãn có chữ trắng — đạt 5.31:1 theo WCAG AA */
	--mau-vang-nghe: #D5A83A;    /* Highlight, biểu tượng */
	--mau-reu: #8AA08A;          /* Nhãn nhóm phụ */
	--mau-reu-dam: #53634C;      /* Chữ trên nền sáng khi cần sắc xanh */
	--mau-bien: #1F4C6B;         /* Liên kết trong bài */

	/* --- Phông chữ --- */
	--phong-tieu-de: "Source Serif 4", Georgia, "Times New Roman", serif;
	--phong-giao-dien: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* --- Thang chữ 6 bậc --- */
	--co-display: 36px;  --cao-display: 1.12;
	--co-h1: 32px;       --cao-h1: 1.15;
	--co-h2: 24px;       --cao-h2: 1.28;
	--co-h3: 19px;       --cao-h3: 1.38;
	--co-body: 18px;     --cao-body: 1.72;
	--co-nho: 14px;      --cao-nho: 1.55;

	/* --- Khoảng cách 6 bậc --- */
	--kc-1: 4px;
	--kc-2: 8px;
	--kc-3: 12px;
	--kc-4: 20px;
	--kc-5: 32px;
	--kc-6: 48px;

	/* --- Bo góc 3 bậc --- */
	--bo-nho: 6px;
	--bo-vua: 12px;
	--bo-lon: 18px;

	/* --- Đổ bóng 3 bậc, rất nhẹ --- */
	--bong-nho: 0 1px 3px rgba(32, 32, 30, 0.08);
	--bong-vua: 0 6px 20px rgba(32, 32, 30, 0.10);
	--bong-lon: 0 14px 40px rgba(32, 32, 30, 0.14);

	/* --- Khung --- */
	--rong-khung: 1240px;
	--rong-cot-chu: 700px;
	--dem-ngang: 18px;
}

@media (min-width: 600px) {
	:root { --dem-ngang: 28px; }
}

@media (min-width: 900px) {
	:root {
		--co-h1: var(--co-display);
		--cao-h1: var(--cao-display);
	}
}

/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */

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

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

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--mau-nen);
	color: var(--mau-chu);
	font-family: var(--phong-giao-dien);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mau-bien); }

h1, h2, h3, h4 {
	font-family: var(--phong-tieu-de);
	color: var(--mau-chu);
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--co-h1); line-height: var(--cao-h1); }
h2 { font-size: var(--co-h2); line-height: var(--cao-h2); }
h3 { font-size: var(--co-h3); line-height: var(--cao-h3); font-weight: 600; }

p { margin: 0 0 var(--kc-4); }

.khung {
	max-width: var(--rong-khung);
	margin: 0 auto;
	padding-left: var(--dem-ngang);
	padding-right: var(--dem-ngang);
}

/*
 * Khớp đúng bề ngang của đầu trang để mọi thứ thẳng một lề với lô-gô.
 *
 * Bắt buộc phải có width: 100%. Khối bọc .trang-boc là lưới linh hoạt xếp dọc,
 * ô con nào không khai báo bề ngang sẽ tự co lại vừa nội dung — khi đó đường dẫn
 * phân cấp ngắn sẽ nằm chơ vơ giữa trang thay vì bám lề trái.
 */
.khung-hep {
	width: 100%;
	max-width: var(--rong-khung);
	margin: 0 auto;
	padding-left: var(--dem-ngang);
	padding-right: var(--dem-ngang);
}

/* Chỉ đọc được bằng trình đọc màn hình */
.an-di {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   3. THÀNH PHẦN DÙNG CHUNG
   ========================================================================== */

/* --- Nhãn chữ nhỏ mở đầu khối: KHÁM PHÁ, CÂU CHUYỆN HÔM NAY... --- */
.nhan-khoi {
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mau-do);
	margin: 0 0 var(--kc-3);
}

.nhan-khoi--tram { color: var(--mau-chu-nhat); }

/* --- Tiêu đề khối kèm đường kẻ chạy hết chiều ngang --- */
.tieu-de-khoi {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--kc-3) var(--kc-4);
	margin-bottom: var(--kc-4);
}

.tieu-de-khoi__chu {
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mau-chu-dam);
	white-space: nowrap;
}

.tieu-de-khoi__ke {
	flex: 1;
	height: 1px;
	background: var(--mau-vien);
}

.tieu-de-khoi__lien-ket {
	font-family: var(--phong-giao-dien);
	font-size: var(--co-nho);
	font-weight: 500;
	color: var(--mau-do);
	text-decoration: none;
	margin-left: auto;
}

/* Màn hình hẹp: cho phép xuống dòng thay vì đẩy tràn khỏi khung */
@media (min-width: 600px) {
	.tieu-de-khoi__lien-ket { white-space: nowrap; }
}

.tieu-de-khoi__lien-ket:hover { color: var(--mau-do-hover); text-decoration: underline; }

/* --- Nút --- */
.nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kc-2);
	min-height: 44px;
	padding: 0 var(--kc-4);
	border: 1px solid transparent;
	border-radius: var(--bo-nho);
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.nut--do { background: var(--mau-do); color: #FFFFFF; }
.nut--do:hover { background: var(--mau-do-hover); }
.nut--do:active { background: var(--mau-do-active); }

.nut--vien {
	background: transparent;
	color: var(--mau-do);
	border-color: var(--mau-do);
}
.nut--vien:hover { background: var(--mau-do); color: #FFFFFF; }

.nut--trang { background: #FFFFFF; color: var(--mau-do); }
.nut--trang:hover { background: #FFF1EE; }

.nut--rong { width: 100%; }

/*
 * Nút trong khối chuyển đổi giữa bài không kéo dài quá tay. Từ khi cột chữ nới
 * rộng cho khớp lề lô-gô, một nút chiếm trọn bề ngang trông thô và mắt phải đi
 * quá xa mới tới chữ trên nút.
 */
@media (min-width: 700px) {
	.chuyen-doi-a .nut--rong,
	.chuyen-doi-b .nut--rong { max-width: 340px; }
}

/* --- Liên kết "Đọc tiếp →" --- */
.doc-tiep {
	font-family: var(--phong-giao-dien);
	font-size: var(--co-nho);
	font-weight: 600;
	color: var(--mau-do);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.doc-tiep:hover { color: var(--mau-do-hover); }
.doc-tiep:hover .doc-tiep__mui { transform: translateX(3px); }
.doc-tiep__mui { transition: transform .18s ease; }

/* --- Nhãn danh mục --- */
.nhan-dm {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--bo-nho);
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--mau-do);
	text-decoration: none;
	white-space: nowrap;
}

.nhan-dm--dat-nung { background: var(--mau-dat-nung-dam); }

/*
 * Sáu màu nhãn chuyên mục. PHP gán lớp theo thứ tự chuyên mục nên mỗi chuyên
 * mục một màu, không trùng nhau. Cả sáu màu đều đo với chữ trắng đạt tương phản
 * trên 5:1 (chuẩn WCAG AA cho chữ nhỏ), và đều nằm trong tông đất – miền Trung
 * của bộ nhận diện, không dùng màu chói.
 */
.nhan-dm--m1 { background: #9E5A2C; } /* Đất nung đậm — 5,31:1 */
.nhan-dm--m2 { background: #1F4C6B; } /* Xanh biển — 8,29:1 */
.nhan-dm--m3 { background: #53634C; } /* Rêu đậm — 6,35:1 */
.nhan-dm--m4 { background: #B83A2F; } /* Đỏ ớt — 5,70:1 */
.nhan-dm--m5 { background: #7B3E5B; } /* Mận chín — 7,83:1 */
.nhan-dm--m6 { background: #8C6414; } /* Nghệ già — 5,32:1 */
.nhan-dm--reu { background: var(--mau-reu); color: var(--mau-chu); }
.nhan-dm--nhat {
	background: #F1EDE4;
	color: var(--mau-chu-dam);
	border: 1px solid var(--mau-vien);
}

/* Nhãn nổi trên ảnh, góc trên trái */
.nhan-dm--tren-anh {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	height: 22px;
	padding: 0 8px;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--bong-nho);
}

/* ==========================================================================
   4. ĐẦU TRANG
   ========================================================================== */

.dau-trang {
	background: var(--mau-nen-the);
	border-bottom: 1px solid var(--mau-vien);
	position: sticky;
	top: 0;
	z-index: 40;
}

.dau-trang__trong {
	display: flex;
	align-items: center;
	gap: var(--kc-4);
	height: 64px;
}

.dau-trang__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	text-decoration: none;
}

.dau-trang__logo img { max-height: 40px; width: auto; }

/* Tên site viết cạnh lô-gô chính thức, không lồng chữ vào lô-gô */
.dau-trang__ten {
	font-family: var(--phong-giao-dien);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--mau-do);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.dau-trang__ten b { font-weight: 700; color: var(--mau-chu); }

@media (max-width: 400px) {
	.dau-trang__ten { font-size: 15px; }
}

.dau-trang__nut-menu,
.dau-trang__nut-tim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--bo-nho);
	color: var(--mau-chu);
	cursor: pointer;
}

.dau-trang__nut-menu:hover,
.dau-trang__nut-tim:hover { background: var(--mau-nen-phu); }

.dau-trang__nut-menu { order: -1; margin-left: -8px; }

/* --- Điều hướng --- */
.dieu-huong { display: none; }

.dieu-huong ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.dieu-huong a {
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 500;
	color: var(--mau-chu-dam);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.dieu-huong a:hover { color: var(--mau-do); }

.dieu-huong .dang-xem a {
	color: var(--mau-do);
	border-bottom-color: var(--mau-do);
	font-weight: 600;
}

@media (min-width: 1000px) {
	.dau-trang__trong { height: 76px; }
	.dau-trang__nut-menu { display: none; }
	.dieu-huong { display: block; margin-left: auto; }
	.dau-trang__logo { margin-right: 0; }
	.dau-trang__nut-tim { margin-left: var(--kc-4); }
}

/* --- Ngăn kéo menu trên điện thoại --- */
.man-che {
	position: fixed;
	inset: 0;
	background: rgba(32, 32, 30, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
	z-index: 50;
}

.ngan-keo {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 280px;
	max-width: 84vw;
	background: var(--mau-nen-the);
	transform: translateX(-100%);
	transition: transform .24s ease;
	z-index: 51;
	padding: var(--kc-4);
	overflow-y: auto;
}

body.mo-menu .man-che { opacity: 1; visibility: visible; }
body.mo-menu .ngan-keo { transform: translateX(0); }

.ngan-keo__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--kc-4);
	padding-bottom: var(--kc-3);
	border-bottom: 1px solid var(--mau-vien);
}

.ngan-keo__dong {
	width: 40px; height: 40px;
	background: none; border: 0;
	color: var(--mau-chu);
	cursor: pointer;
}

.ngan-keo ul { list-style: none; margin: 0; padding: 0; }

.ngan-keo li + li { border-top: 1px solid var(--mau-vien); }

.ngan-keo a {
	display: block;
	padding: 14px 4px;
	font-family: var(--phong-giao-dien);
	font-size: 16px;
	font-weight: 500;
	color: var(--mau-chu);
	text-decoration: none;
}

.ngan-keo a:hover { color: var(--mau-do); }

/* ==========================================================================
   5. KHỐI MỞ ĐẦU TRANG CHỦ

   Điện thoại: ảnh trên, chữ dưới, thẻ món nổi bật xếp cuối.
   Máy tính: ảnh chiếm hai phần ba bên phải và tràn tới mép màn hình, mép giáp
   khối chữ được làm mờ dần về nền nên không có đường cắt cứng giữa hai vùng.
   ========================================================================== */

.mo-dau {
	position: relative;
	background: var(--mau-nen-the);
	border-bottom: 1px solid var(--mau-vien);
	overflow: hidden;
}

.mo-dau__anh {
	position: relative;
	aspect-ratio: 4 / 3;
}

.mo-dau__anh img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 56%;
}

/*
 * Băng chuyền: mọi ảnh món xếp chồng đúng một chỗ, chỉ ảnh đang xem hiện rõ.
 * Chuyển bằng độ mờ thay vì trượt ngang để dải chuyển tiếp bên mép trái của
 * .mo-dau__anh::after không bị lộ đường cắt trong lúc đổi ảnh.
 */
.mo-dau__hinh {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .7s ease;
}

.mo-dau__hinh.dang-xem { opacity: 1; }

.mo-dau__trong {
	position: relative;
	z-index: 2;
	max-width: var(--rong-khung);
	margin: 0 auto;
	padding-left: var(--dem-ngang);
	padding-right: var(--dem-ngang);
}

.mo-dau__chu { padding: var(--kc-5) 0; }

.mo-dau__nhan {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

/* Vạch đỏ mảnh nối nhãn với tiêu đề */
.mo-dau__nhan::after {
	content: "";
	width: 46px;
	height: 2px;
	background: var(--mau-do);
}

.mo-dau__nhan span {
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mau-do);
}

.mo-dau__tieu-de {
	font-size: var(--co-h1);
	line-height: var(--cao-h1);
	margin-bottom: 16px;
}

/* Đoạn dẫn nới rộng gần hết cột chữ để bên trái không bị trống so với ảnh món */
.mo-dau__dan {
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	line-height: 1.68;
	color: var(--mau-chu-dam);
	max-width: 46ch;
	margin-bottom: var(--kc-4);
}

/* Thẻ món nổi bật */
.mon-noi-bat {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	padding: 18px 20px 20px;
	margin-bottom: var(--kc-5);
}

/*
 * Tên món cắt theo dòng nên thẻ không cao thấp so le mỗi lần đổi món.
 * Trên điện thoại thẻ hẹp nên để hai dòng cho đọc được đủ ý; lên máy tính thẻ
 * rộng 500px thì siết về đúng một dòng như bản thiết kế.
 */
.mon-noi-bat__ten {
	font-size: var(--co-h3);
	line-height: 1.38;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Ba dòng mô tả bài, chiều cao cố định để mọi món trong băng chuyền cao bằng nhau */
.mon-noi-bat__mo-ta {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mau-chu-nhat);
	margin: 0 0 var(--kc-3);
	min-height: calc(3 * 1.6em);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Mỗi món một khối con, chỉ khối đang xem còn lại trong luồng */
.mon-noi-bat__slide { animation: mnqb-hien-len .45s ease both; }
.mon-noi-bat__slide[hidden] { display: none; }

@keyframes mnqb-hien-len {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Máy đang bật chế độ giảm chuyển động thì đổi thẳng, không hiệu ứng */
@media (prefers-reduced-motion: reduce) {
	.mo-dau__hinh { transition: none; }
	.mon-noi-bat__slide { animation: none; }
}

/* Bộ đếm và mũi tên chuyển ảnh */
.mo-dau__dieu-khien {
	display: flex;
	align-items: center;
	gap: var(--kc-4);
	margin-top: var(--kc-4);
}

.mo-dau__so {
	display: flex;
	align-items: center;
	gap: var(--kc-3);
	font-family: var(--phong-giao-dien);
	font-size: 13px;
	font-weight: 500;
	color: var(--mau-chu-nhat);
	letter-spacing: 0.06em;
}

.mo-dau__so span:first-child { color: var(--mau-chu); font-weight: 700; }
.mo-dau__vach { width: 56px; height: 1px; background: var(--mau-vien-dam); }

.mui-ten-tron {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mau-vien-dam);
	border-radius: 50%;
	background: transparent;
	color: var(--mau-chu);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mui-ten-tron:hover {
	background: var(--mau-do);
	border-color: var(--mau-do);
	color: #FFFFFF;
}

@media (min-width: 900px) {
	.mo-dau__anh {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 66%;
		aspect-ratio: auto;
		z-index: 1;
	}

	/*
	 * Dải chuyển tiếp: đặc màu nền ở mép trái rồi trong dần về phải.
	 * Nhờ vậy ảnh hoà vào vùng chữ thay vì bị một đường thẳng cắt đôi.
	 */
	.mo-dau__anh::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--mau-nen-the) 0%,
			rgba(255, 255, 255, 0.94) 10%,
			rgba(255, 255, 255, 0.70) 22%,
			rgba(255, 255, 255, 0.28) 34%,
			rgba(255, 255, 255, 0) 46%
		);
	}

	.mo-dau__trong { min-height: 500px; }

	.mo-dau__chu {
		width: 44%;
		min-height: 500px;
		padding: var(--kc-6) var(--kc-5) var(--kc-6) 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* Không có dòng này thì nút bị kéo rộng bằng cả cột */
		align-items: flex-start;
	}

	.mo-dau__tieu-de { font-size: 46px; line-height: 1.1; }

	.mon-noi-bat {
		position: absolute;
		right: var(--dem-ngang);
		bottom: 36px;
		width: min(500px, 42%);
		margin: 0;
		border: 0;
		box-shadow: var(--bong-lon);
		z-index: 3;

		/*
		 * Nền trắng mờ chứ không đặc, để ảnh món phía sau ăn nhập với thẻ thay vì
		 * bị một mảng trắng cắt rời. Lớp làm mờ hậu cảnh giữ cho chữ vẫn đọc rõ
		 * kể cả khi ảnh phía sau nhiều chi tiết. Trình duyệt cũ không hiểu
		 * backdrop-filter thì vẫn còn nền trắng 88% nên không có rủi ro.
		 */
		background: rgba(255, 255, 255, 0.88);
		backdrop-filter: blur(10px) saturate(1.08);
		-webkit-backdrop-filter: blur(10px) saturate(1.08);
	}

	/* Máy nào hiểu backdrop-filter thì hạ độ đục thêm một bậc cho thoáng */
	@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
		.mon-noi-bat { background: rgba(255, 255, 255, 0.82); }
	}

	/* Nhỏ hơn một bậc so với cỡ h3 để tên món dài vẫn đủ chỗ trong đúng một dòng */
	.mon-noi-bat__ten {
		font-size: 17px;
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}
}

/* ==========================================================================
   6. KHỐI CÂU CHUYỆN HÔM NAY — lời dẫn bên trái, bốn thẻ bài bên phải
   ========================================================================== */

.khoi { padding: var(--kc-6) 0; }
.khoi--sat { padding-top: var(--kc-5); }

.cau-chuyen__trong {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-5);
}

.cau-chuyen__dan-nhap { max-width: 30ch; }

.cau-chuyen__tieu-de {
	font-size: var(--co-h2);
	line-height: 1.24;
	margin-bottom: var(--kc-4);
}

.luoi-the {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-4);
}

@media (min-width: 600px) {
	.luoi-the { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.cau-chuyen__trong { grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
	.luoi-the { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.cau-chuyen__tieu-de { font-size: 28px; }
}

/* --- Thẻ bài viết --- */
.the-bai {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}

.the-bai:hover { box-shadow: var(--bong-vua); transform: translateY(-2px); }

.the-bai__anh {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--mau-nen-phu);
	flex: none;
}

.the-bai__anh img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-bai__than {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.the-bai__ten {
	font-size: 17.5px;
	line-height: 1.34;
	margin: 0;
}

.the-bai__ten a { color: inherit; text-decoration: none; }
.the-bai__ten a:hover { color: var(--mau-do); }

/*
 * Mô tả thẻ bài luôn dừng ở đúng ba dòng, dài hơn thì trình duyệt tự thêm dấu
 * ba chấm. Cắt theo DÒNG chứ không theo số từ nên mọi thẻ trong một hàng cao
 * bằng nhau, dù tên món dài ngắn khác nhau.
 *
 * Phần chiếm chỗ còn thừa của thẻ giao cho lớp bọc; đoạn chữ bên trong chỉ lo
 * việc cắt dòng, vì line-clamp không chạy trên một ô flex trực tiếp.
 */
.the-bai__tom-tat {
	flex: 1;
	min-height: 0;
}

.the-bai__mo-ta {
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--mau-chu-nhat);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Lưới ba cột có chỗ rộng hơn nên chữ được to lại một bậc */
.luoi-3 .the-bai__ten { font-size: var(--co-h3); line-height: 1.36; }
.luoi-3 .the-bai__mo-ta { font-size: var(--co-nho); }
.luoi-3 .the-bai__than { padding: var(--kc-4); gap: var(--kc-3); }

/* ==========================================================================
   7. KHỐI KHÁM PHÁ THEO CHỦ ĐỀ — ba thẻ ảnh lớn phủ lớp tối
   ========================================================================== */

.luoi-chu-de {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-4);
}

@media (min-width: 700px) {
	.luoi-chu-de { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.the-chu-de {
	position: relative;
	display: block;
	border-radius: var(--bo-vua);
	overflow: hidden;
	min-height: 210px;
	text-decoration: none;
	color: #FFFFFF;
}

.the-chu-de img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.the-chu-de:hover img { transform: scale(1.04); }

/* Lớp phủ đủ tối để chữ trắng luôn đọc được trên mọi ảnh */
.the-chu-de::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 19, 17, 0.88) 0%,
		rgba(20, 19, 17, 0.62) 45%,
		rgba(20, 19, 17, 0.22) 100%
	);
}

.the-chu-de__chu {
	position: relative;
	z-index: 2;
	padding: var(--kc-4);
	padding-right: 76px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.the-chu-de__ten {
	font-family: var(--phong-tieu-de);
	font-size: var(--co-h2);
	line-height: 1.2;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 var(--kc-2);
}

.the-chu-de__mo-ta {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
}

.the-chu-de__mui {
	position: absolute;
	right: var(--kc-4);
	bottom: var(--kc-4);
	z-index: 2;
	width: 42px; height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	transition: background-color .18s ease, color .18s ease;
}

.the-chu-de:hover .the-chu-de__mui { background: #FFFFFF; color: var(--mau-chu); }

/* ==========================================================================
   8. KHỐI HÀNG ORDER — gửi đặc sản về nhà
   ========================================================================== */

.luoi-san-pham {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-3);
}

@media (min-width: 700px)  { .luoi-san-pham { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .luoi-san-pham { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--kc-4); } }

.the-sp {
	display: flex;
	align-items: center;
	gap: var(--kc-3);
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	padding: var(--kc-3);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.the-sp:hover { border-color: var(--mau-vien-dam); box-shadow: var(--bong-nho); }

.the-sp__anh {
	flex: 0 0 62px;
	width: 62px; height: 62px;
	border-radius: var(--bo-nho);
	overflow: hidden;
	background: var(--mau-nen-kem);
}

.the-sp__anh { position: relative; }
.the-sp__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.the-sp__ten {
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 var(--kc-1);
	color: var(--mau-chu);
}

.the-sp__gia {
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 700;
	color: var(--mau-do);
	margin: 0;
}

/* ==========================================================================
   9. KHỐI QUẢNG BÌNH ƠI
   ========================================================================== */

.khoi-quan {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-lon);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
}

.khoi-quan__anh { aspect-ratio: 4 / 3; position: relative; }
.khoi-quan__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.khoi-quan__chu { padding: var(--kc-5) var(--kc-4); }

.khoi-quan__ten {
	font-size: 30px;
	line-height: 1.2;
	margin-bottom: var(--kc-2);
}

.khoi-quan__khau-hieu {
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 600;
	color: var(--mau-do);
	margin-bottom: var(--kc-3);
}

.khoi-quan__gioi-thieu {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	margin-bottom: var(--kc-4);
}

.khoi-quan__thong-tin {
	padding: var(--kc-5) var(--kc-4);
	border-top: 1px solid var(--mau-vien);
	display: flex;
	flex-direction: column;
	gap: var(--kc-4);
}

.dong-tt {
	display: flex;
	align-items: flex-start;
	gap: var(--kc-3);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mau-chu-dam);
}

.dong-tt__icon {
	flex: 0 0 34px;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #FBEFE9;
	color: var(--mau-do);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dong-tt strong { font-family: var(--phong-giao-dien); font-weight: 700; }

.dong-tt a { color: var(--mau-do); text-decoration: none; font-weight: 600; }
.dong-tt a:hover { text-decoration: underline; }

@media (min-width: 900px) {
	.khoi-quan { grid-template-columns: 34% 1fr 30%; }
	.khoi-quan__anh { aspect-ratio: auto; }
	.khoi-quan__chu { padding: var(--kc-5); }
	.khoi-quan__thong-tin {
		border-top: 0;
		border-left: 1px solid var(--mau-vien);
		justify-content: center;
		padding: var(--kc-5);
	}
}

/* ==========================================================================
   10. CHÂN TRANG
   ========================================================================== */

.chan-trang {
	background: var(--mau-nen-the);
	border-top: 1px solid var(--mau-vien);
	margin-top: var(--kc-6);
	padding: var(--kc-6) 0 var(--kc-4);
}

.chan-trang__luoi {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-5);
}

@media (min-width: 700px)  { .chan-trang__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .chan-trang__luoi { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--kc-6); } }

/* Khối nhận diện: lô-gô đứng cạnh tên miền, giống cách bày ở đầu trang */
.chan-trang__hieu {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--kc-3);
	text-decoration: none;
}

.chan-trang__hieu img {
	max-height: 38px;
	width: auto;
	flex: none;
}

.chan-trang__ten {
	font-family: var(--phong-giao-dien);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--mau-do);
	margin: 0;
}

.chan-trang__gioi-thieu {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	margin-bottom: var(--kc-4);
	max-width: 34ch;
}

/*
 * Mọi dòng chữ trong bốn cột chân trang đều thẳng mép trái, không thụt dòng đầu
 * và không dàn đều hai bên — dàn đều làm khoảng trắng giữa các chữ giãn không
 * đều nên nhìn rất luộm thuộm ở cột hẹp.
 */
.chan-trang__luoi,
.chan-trang__luoi p,
.chan-trang__luoi ul,
.chan-trang__luoi li,
.chan-trang__luoi a {
	text-align: left;
	text-indent: 0;
}

.chan-trang__muc {
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 700;
	color: var(--mau-chu);
	margin: 0 0 var(--kc-3);
}

.chan-trang ul { list-style: none; margin: 0; padding: 0; }
.chan-trang li { margin-bottom: 10px; }

.chan-trang li a {
	font-size: 14.5px;
	color: var(--mau-chu-nhat);
	text-decoration: none;
}

.chan-trang li a:hover { color: var(--mau-do); }

.chan-trang__lien-he { font-size: 14.5px; line-height: 1.7; color: var(--mau-chu-nhat); }
.chan-trang__lien-he strong { color: var(--mau-chu); font-family: var(--phong-giao-dien); }

.mang-xa-hoi { display: flex; gap: var(--kc-3); margin-top: var(--kc-4); }

.mang-xa-hoi a {
	width: 36px; height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mau-chu);
	color: #FFFFFF;
	transition: background-color .18s ease;
}

.mang-xa-hoi a:hover { background: var(--mau-do); }

.chan-trang__ban-quyen {
	margin-top: var(--kc-5);
	padding-top: var(--kc-4);
	border-top: 1px solid var(--mau-vien);
	text-align: center;
	font-size: 13px;
	color: var(--mau-chu-nhat);
}

/* ==========================================================================
   11. ĐƯỜNG DẪN PHÂN CẤP
   ========================================================================== */

.duong-dan {
	font-family: var(--phong-giao-dien);
	font-size: 13px;
	color: var(--mau-chu-nhat);
	padding: var(--kc-3) 0;
}

.duong-dan a { color: var(--mau-chu-nhat); text-decoration: none; }
.duong-dan a:hover { color: var(--mau-do); }
.duong-dan span[aria-current] { color: var(--mau-chu); }
.duong-dan .tach { margin: 0 6px; color: var(--mau-vien-dam); }

/* ==========================================================================
   12. TRANG BÀI VIẾT
   ========================================================================== */

/* --- Khối mở đầu bài có ảnh --- */
.bai-mo-dau {
	position: relative;
	border-radius: var(--bo-vua);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--kc-5);
}

.bai-mo-dau > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bai-mo-dau::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 19, 17, 0.86) 0%,
		rgba(20, 19, 17, 0.5) 50%,
		rgba(20, 19, 17, 0.12) 100%
	);
}

.bai-mo-dau__chu {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--kc-4);
}

.bai-mo-dau__ten {
	color: #FFFFFF;
	font-size: var(--co-h1);
	line-height: var(--cao-h1);
	margin-top: var(--kc-3);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* --- Khối mở đầu bài không ảnh: chữ và một nét đồ hoạ mảnh --- */
.bai-mo-dau--khong-anh {
	aspect-ratio: auto;
	background: var(--mau-nen-kem);
	border: 1px solid var(--mau-vien);
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: var(--kc-5) var(--kc-4);
}

.bai-mo-dau--khong-anh::after { content: none; }

.bai-mo-dau--khong-anh .bai-mo-dau__chu {
	position: static;
	padding: 0;
	max-width: 62%;
}

.bai-mo-dau--khong-anh .bai-mo-dau__ten {
	color: var(--mau-chu);
	text-shadow: none;
}

.net-do-hoa {
	position: absolute;
	right: -20px;
	bottom: -30px;
	width: 260px;
	height: 260px;
	color: var(--mau-dat-nung);
	opacity: 0.3;
	pointer-events: none;
}

@media (min-width: 900px) {
	.bai-mo-dau { aspect-ratio: 16 / 9; }
	.bai-mo-dau__chu { padding: var(--kc-5); }
	.bai-mo-dau__ten { font-size: 42px; line-height: 1.14; }
	.bai-mo-dau--khong-anh {
		aspect-ratio: auto;
		min-height: 440px;
		padding: var(--kc-6);
	}
	.bai-mo-dau--khong-anh .bai-mo-dau__ten { font-size: 46px; margin-top: var(--kc-4); }
	.net-do-hoa { width: 340px; height: 340px; right: 20px; bottom: -40px; }
}

/* --- Thân bài --- */
.bai-viet { padding-top: var(--kc-4); }

.cot-chu { max-width: var(--rong-cot-chu); margin: 0 auto; }

.bai-dan {
	font-family: var(--phong-tieu-de);
	font-size: 20px;
	line-height: 1.62;
	font-weight: 600;
	color: var(--mau-chu-dam);
	margin-bottom: var(--kc-4);
}

.nhom-nhan { display: flex; flex-wrap: wrap; gap: var(--kc-2); margin-bottom: var(--kc-5); }

.noi-dung-bai {
	font-family: var(--phong-tieu-de);
	font-size: var(--co-body);
	line-height: var(--cao-body);
	color: var(--mau-chu);
}

.noi-dung-bai p { margin: 0 0 var(--kc-4); }

.noi-dung-bai h2 {
	font-size: var(--co-h2);
	line-height: var(--cao-h2);
	margin: var(--kc-6) 0 var(--kc-4);
}

.noi-dung-bai h3 {
	font-size: var(--co-h3);
	line-height: var(--cao-h3);
	margin: var(--kc-5) 0 var(--kc-3);
}

.noi-dung-bai a { color: var(--mau-bien); text-decoration: underline; text-underline-offset: 3px; }
.noi-dung-bai a:hover { color: var(--mau-do); }

.noi-dung-bai ul { padding-left: 22px; margin: 0 0 var(--kc-4); }
.noi-dung-bai li { margin-bottom: var(--kc-2); }

.noi-dung-bai figure { margin: var(--kc-5) 0; }
.noi-dung-bai figure img { border-radius: var(--bo-vua); width: 100%; }

.noi-dung-bai figcaption {
	font-size: var(--co-nho);
	line-height: var(--cao-nho);
	color: var(--mau-chu-nhat);
	margin-top: var(--kc-2);
	text-align: center;
}

/* ==========================================================================
   13. BA KHỐI CHUYỂN ĐỔI A / B / C
   ========================================================================== */

/* --- A: món đang bán tại quán. Nền đỏ, giá lớn, mời tới ăn --- */
.chuyen-doi-a {
	background: var(--mau-do);
	color: #FFFFFF;
	border-radius: var(--bo-vua);
	padding: var(--kc-4);
	margin: var(--kc-6) 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-4);
}

.chuyen-doi-a__nhan {
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 var(--kc-3);
}

.chuyen-doi-a__mon {
	font-family: var(--phong-tieu-de);
	font-size: var(--co-h2);
	line-height: 1.22;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 var(--kc-2);
}

.chuyen-doi-a__gia {
	font-family: var(--phong-giao-dien);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	color: #FFFFFF;
	margin: 0 0 var(--kc-3);
}

.chuyen-doi-a__dia-chi {
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 var(--kc-4);
}

.chuyen-doi-a__anh {
	position: relative;
	border-radius: var(--bo-nho);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.chuyen-doi-a__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 600px) {
	.chuyen-doi-a { grid-template-columns: 1fr 200px; padding: var(--kc-4) var(--kc-5); align-items: center; }
	.chuyen-doi-a__anh { aspect-ratio: 1 / 1; }
}

/* --- B: món không bán tại quán nhưng có sản phẩm liên quan --- */
.chuyen-doi-b {
	background: var(--mau-nen-kem);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	padding: var(--kc-4);
	margin: var(--kc-6) 0;
}

.chuyen-doi-b__tieu-de {
	font-family: var(--phong-giao-dien);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mau-do);
	margin: 0 0 var(--kc-3);
}

.chuyen-doi-b__giai-thich {
	font-family: var(--phong-tieu-de);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mau-chu-dam);
	margin: 0 0 var(--kc-4);
}

.chuyen-doi-b__dan {
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 600;
	color: var(--mau-chu);
	margin: 0 0 var(--kc-3);
}

.the-sp-lon {
	display: flex;
	align-items: center;
	gap: var(--kc-4);
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-nho);
	padding: var(--kc-3);
	margin-bottom: var(--kc-3);
	text-decoration: none;
	color: inherit;
}

.the-sp-lon:hover { border-color: var(--mau-vien-dam); }

.the-sp-lon__anh {
	flex: 0 0 76px;
	width: 76px; height: 76px;
	border-radius: var(--bo-nho);
	overflow: hidden;
}

.the-sp-lon__anh { position: relative; }
.the-sp-lon__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.the-sp-lon__ten {
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 var(--kc-1);
	color: var(--mau-chu);
}

.the-sp-lon__gia {
	font-family: var(--phong-giao-dien);
	font-size: 17px;
	font-weight: 700;
	color: var(--mau-do);
	margin: 0;
}

/* --- C: bài không gắn với sản phẩm nào, chỉ giới thiệu quán --- */
.chuyen-doi-c {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	padding: var(--kc-4);
	margin: var(--kc-6) 0;
}

.chuyen-doi-c__tieu-de {
	font-family: var(--phong-tieu-de);
	font-size: var(--co-h3);
	line-height: 1.4;
	font-weight: 700;
	margin: 0 0 var(--kc-3);
}

.chuyen-doi-c__mo-ta {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	margin: 0 0 var(--kc-4);
}

.bang-mon { list-style: none; margin: 0 0 var(--kc-4); padding: 0; }

.bang-mon li {
	display: flex;
	justify-content: space-between;
	gap: var(--kc-4);
	padding: 10px 0;
	border-bottom: 1px dashed var(--mau-vien);
	font-family: var(--phong-giao-dien);
	font-size: 15px;
}

.bang-mon li:last-child { border-bottom: 0; }
.bang-mon strong { font-weight: 700; color: var(--mau-do); white-space: nowrap; }

/* ==========================================================================
   14. KHỐI GỢI Ý ĐỌC TIẾP
   ========================================================================== */

.doc-them { margin-top: var(--kc-6); }

/* ==========================================================================
   15. TRANG DANH MỤC
   ========================================================================== */

.dau-danh-muc {
	background: var(--mau-nen-the);
	border-bottom: 1px solid var(--mau-vien);
	padding: var(--kc-5) 0;
}

.dau-danh-muc__ten { font-size: var(--co-h1); line-height: var(--cao-h1); margin-bottom: var(--kc-3); }

.dau-danh-muc__mo-ta {
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	max-width: 62ch;
	margin: 0;
}

/* Bài nổi bật của danh mục: ảnh trái, chữ phải */
.bai-noi-bat {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kc-4);
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-lon);
	overflow: hidden;
	margin-bottom: var(--kc-6);
}

.bai-noi-bat__anh { aspect-ratio: 16 / 10; position: relative; }
.bai-noi-bat__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bai-noi-bat__chu {
	padding: var(--kc-4);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--kc-3);
}

.bai-noi-bat__ten { font-size: var(--co-h2); line-height: 1.24; margin: 0; }
.bai-noi-bat__ten a { color: inherit; text-decoration: none; }
.bai-noi-bat__ten a:hover { color: var(--mau-do); }

.bai-noi-bat__mo-ta {
	font-family: var(--phong-tieu-de);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	margin: 0;
}

@media (min-width: 800px) {
	.bai-noi-bat { grid-template-columns: 1.15fr 1fr; gap: 0; }
	.bai-noi-bat__anh { aspect-ratio: auto; min-height: 320px; }
	.bai-noi-bat__chu { padding: var(--kc-5); }
	.bai-noi-bat__ten { font-size: 30px; }
}

.luoi-3 { display: grid; grid-template-columns: 1fr; gap: var(--kc-4); }

@media (min-width: 600px)  { .luoi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ==========================================================================
   16. PHÂN TRANG KIỂU GOOGLE
   ========================================================================== */

.phan-trang {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: var(--kc-6);
}

.trang-lien-ket {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-nho);
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 500;
	color: var(--mau-chu);
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.trang-lien-ket:hover { border-color: var(--mau-do); color: var(--mau-do); }

.trang-lien-ket.dang-xem {
	background: var(--mau-do);
	border-color: var(--mau-do);
	color: #FFFFFF;
	font-weight: 700;
	box-shadow: var(--bong-nho);
	pointer-events: none;
}

.trang-lien-ket.tat {
	opacity: 0.4;
	pointer-events: none;
}

.trang-cham {
	padding: 0 4px;
	color: var(--mau-chu-nhat);
	font-size: 14px;
}

/* ==========================================================================
   18. TRẠNG THÁI FOCUS — giữ được khả năng nhìn thấy trên mọi nền
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--mau-do);
	outline-offset: 2px;
	border-radius: var(--bo-nho);
}

.the-chu-de:focus-visible {
	outline-color: #FFFFFF;
}

/* ==========================================================================
   19. TRANG BÀI VIẾT HAI CỘT — nội dung bên trái, cột thông tin bên phải
   ========================================================================== */

.bai-viet__trong {
	max-width: var(--rong-khung);
	margin: 0 auto;
	padding-left: var(--dem-ngang);
	padding-right: var(--dem-ngang);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kc-6);
}

/*
 * Khung bài viết rộng đúng bằng khung đầu trang nên lề trái của ảnh và chữ
 * thẳng hàng với lô-gô. Cột thông tin nới lên 360px, khoảng cách giữa hai cột
 * 72px; phần còn lại khoảng 750px dành cho cột chữ — vẫn nằm trong ngưỡng dễ
 * đọc mà không để thừa lề như trước.
 */
@media (min-width: 1000px) {
	.bai-viet__trong {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 72px;
		align-items: start;
	}
}

.bai-viet__chinh { min-width: 0; }

/* Trong bố cục hai cột, cột chữ đã đúng bề rộng nên không giới hạn thêm nữa */
.bai-viet__chinh .cot-chu { max-width: none; margin: 0; }

/* ==========================================================================
   20. CỘT THÔNG TIN
   ========================================================================== */

.cot-ben { min-width: 0; }

@media (min-width: 1000px) {
	/* Cột thông tin bám theo khi cuộn, trừ 88px cho đầu trang đang ghim */
	.cot-ben {
		position: sticky;
		top: 88px;
	}
}

.the-ben {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	overflow: hidden;
	margin-bottom: var(--kc-4);
}

.the-ben__than { padding: 18px; }

.the-ben__tieu-de {
	font-family: var(--phong-giao-dien);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mau-chu-dam);
	margin: 0;
	padding: 14px 18px;
	background: var(--mau-nen-phu);
	border-bottom: 1px solid var(--mau-vien);
}

/* --- Khối quán trong cột thông tin --- */
.the-ben__anh {
	position: relative;
	aspect-ratio: 16 / 10;
}

.the-ben__anh img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-ben__ten-quan {
	font-family: var(--phong-tieu-de);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 4px;
}

.the-ben__khau-hieu {
	font-family: var(--phong-giao-dien);
	font-size: 13px;
	font-weight: 600;
	color: var(--mau-do);
	margin: 0 0 14px;
}

.dong-ben {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mau-chu-dam);
	margin: 0 0 12px;
}

.dong-ben svg {
	flex: 0 0 16px;
	margin-top: 2px;
	color: var(--mau-do);
}

.dong-ben strong { font-family: var(--phong-giao-dien); font-weight: 700; }
.dong-ben a { color: var(--mau-do); text-decoration: none; font-weight: 600; }
.dong-ben a:hover { text-decoration: underline; }

/* --- Bảng giá trong cột thông tin --- */
.the-ben .bang-mon { margin: 0; }
.the-ben .bang-mon li { font-size: 14px; padding: 9px 0; }

.the-ben__ghi-chu {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mau-chu-nhat);
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--mau-vien);
}

/* --- Sản phẩm order trong cột thông tin --- */
.sp-ben {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--mau-vien);
	text-decoration: none;
	color: inherit;
}

.sp-ben:last-of-type { border-bottom: 0; padding-bottom: 0; }
.sp-ben:first-of-type { padding-top: 0; }

.sp-ben__anh {
	position: relative;
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: var(--bo-nho);
	overflow: hidden;
	background: var(--mau-nen-kem);
}

.sp-ben__anh img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-ben__ten {
	display: block;
	font-family: var(--phong-giao-dien);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 2px;
	color: var(--mau-chu);
}

.sp-ben__gia {
	display: block;
	font-family: var(--phong-giao-dien);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mau-do);
}

/* --- Bài cùng chuyên mục trong cột thông tin --- */
.bai-ben {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mau-vien);
	text-decoration: none;
	color: inherit;
}

.bai-ben:last-of-type { border-bottom: 0; padding-bottom: 0; }
.bai-ben:first-of-type { padding-top: 0; }

.bai-ben__anh {
	position: relative;
	flex: 0 0 84px;
	width: 84px;
	aspect-ratio: 4 / 3;
	border-radius: var(--bo-nho);
	overflow: hidden;
	background: var(--mau-nen-phu);
}

.bai-ben__anh img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bai-ben__ten {
	font-family: var(--phong-tieu-de);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 4px;
	color: var(--mau-chu);
}

.bai-ben:hover .bai-ben__ten { color: var(--mau-do); }

.bai-ben__nhan {
	font-family: var(--phong-giao-dien);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mau-chu-nhat);
}

/* Nút trong cột thông tin luôn chạy hết bề ngang thẻ */
.the-ben .nut { width: 100%; margin-top: 4px; }

/* Khối gợi ý đọc tiếp nằm trong cột hẹp: ba thẻ một hàng, chữ nhỏ lại một bậc */
@media (min-width: 1000px) {
	.bai-viet__chinh .doc-them .luoi-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.bai-viet__chinh .doc-them .the-bai__ten { font-size: 16px; line-height: 1.35; }
	.bai-viet__chinh .doc-them .the-bai__mo-ta { font-size: 13px; }
	.bai-viet__chinh .doc-them .the-bai__than { padding: 14px; gap: 8px; }
}

/* ==========================================================================
   21. ÁNH XẠ SANG MARKUP CỦA WORDPRESS

   Bản xem trước dùng markup viết tay; WordPress sinh ra tên lớp riêng cho menu,
   biểu mẫu, chú thích ảnh… Phần này nối hai bên lại để giao diện giữ nguyên
   hình thức đã duyệt.
   ========================================================================== */

/* --- Menu chính do wp_nav_menu sinh ra --- */
.dieu-huong .menu-chinh {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
}

.dieu-huong .menu-chinh li { position: relative; }

.dieu-huong .menu-chinh a {
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 500;
	color: var(--mau-chu-dam);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	display: inline-block;
}

.dieu-huong .menu-chinh a:hover { color: var(--mau-do); }

/* Mục đang xem: WordPress đánh dấu bằng nhiều lớp khác nhau tuỳ loại trang */
.dieu-huong .menu-chinh .current-menu-item > a,
.dieu-huong .menu-chinh .current_page_item > a,
.dieu-huong .menu-chinh .current-menu-ancestor > a,
.dieu-huong .menu-chinh .current-post-ancestor > a,
.dieu-huong .menu-chinh .current-menu-parent > a {
	color: var(--mau-do);
	border-bottom-color: var(--mau-do);
	font-weight: 600;
}

/* --- Menu cấp hai --- */
.dieu-huong .menu-chinh .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	box-shadow: var(--bong-vua);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
	z-index: 45;
}

.dieu-huong .menu-chinh li:hover > .sub-menu,
.dieu-huong .menu-chinh li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dieu-huong .menu-chinh .sub-menu a {
	display: block;
	padding: 8px 16px;
	border-bottom: 0;
	white-space: normal;
}

/* --- Menu trong ngăn kéo điện thoại --- */
.ngan-keo .menu-dien-thoai {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ngan-keo .menu-dien-thoai li + li { border-top: 1px solid var(--mau-vien); }

.ngan-keo .menu-dien-thoai a {
	display: block;
	padding: 14px 4px;
	font-family: var(--phong-giao-dien);
	font-size: 16px;
	font-weight: 500;
	color: var(--mau-chu);
	text-decoration: none;
}

.ngan-keo .menu-dien-thoai a:hover { color: var(--mau-do); }

.ngan-keo .menu-dien-thoai .current-menu-item > a { color: var(--mau-do); font-weight: 600; }

.ngan-keo .menu-dien-thoai .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
}

.ngan-keo .menu-dien-thoai .sub-menu a { font-size: 15px; padding: 10px 4px; }

/* Ngăn kéo và lớp phủ chỉ hiện trên màn hình nhỏ */
@media (min-width: 1000px) {
	.ngan-keo,
	.man-che { display: none; }
}

/* --- Danh sách liên kết ở chân trang do wp_nav_menu / wp_list_categories sinh ra --- */
.chan-trang .menu,
.chan-trang ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   22. BẢNG TÌM KIẾM VÀ BIỂU MẪU
   ========================================================================== */

.bang-tim-kiem {
	background: var(--mau-nen-the);
	border-bottom: 1px solid var(--mau-vien);
	padding: var(--kc-4) 0;
}

.bang-tim-kiem .khung {
	display: flex;
	align-items: center;
	gap: var(--kc-3);
}

.bang-tim-kiem form { flex: 1; display: flex; gap: var(--kc-2); }

.bang-tim-kiem__dong {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	background: none;
	border: 0;
	border-radius: var(--bo-nho);
	color: var(--mau-chu);
	cursor: pointer;
}

.bang-tim-kiem__dong:hover { background: var(--mau-nen-phu); }

.search-form,
form[role="search"] {
	display: flex;
	gap: var(--kc-2);
	width: 100%;
}

.search-form label { flex: 1; display: block; }

input[type="search"],
input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	color: var(--mau-chu);
	background: var(--mau-nen);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-nho);
}

input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: var(--mau-vien-dam);
	outline: 2px solid var(--mau-do);
	outline-offset: 1px;
}

.search-form input[type="submit"],
button[type="submit"],
input[type="submit"] {
	min-height: 44px;
	padding: 0 20px;
	font-family: var(--phong-giao-dien);
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF;
	background: var(--mau-do);
	border: 0;
	border-radius: var(--bo-nho);
	cursor: pointer;
	white-space: nowrap;
}

.search-form input[type="submit"]:hover,
button[type="submit"]:hover,
input[type="submit"]:hover { background: var(--mau-do-hover); }

/* ==========================================================================
   23. KHI KHÔNG CÓ NỘI DUNG
   ========================================================================== */

.khong-co-bai {
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-lon);
	padding: var(--kc-6) var(--kc-4);
	text-align: center;
	max-width: var(--rong-cot-chu);
	margin: var(--kc-5) auto;
}

.khong-co-bai h1,
.khong-co-bai h2 {
	font-size: var(--co-h2);
	line-height: var(--cao-h2);
	margin-bottom: var(--kc-3);
}

.khong-co-bai p {
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	line-height: 1.65;
	color: var(--mau-chu-nhat);
	max-width: 52ch;
	margin: 0 auto var(--kc-4);
}

.khong-co-bai form { max-width: 460px; margin: 0 auto; }

/* ==========================================================================
   24. TRANG TĨNH VÀ CÁC KHỐI DO TRÌNH SOẠN THẢO SINH RA
   ========================================================================== */

.trang-tinh .cot-chu { max-width: var(--rong-cot-chu); margin: 0 auto; }

.noi-dung-bai blockquote {
	margin: var(--kc-5) 0;
	padding: var(--kc-4) var(--kc-4) var(--kc-4) var(--kc-5);
	border-left: 3px solid var(--mau-do);
	background: var(--mau-nen-kem);
	border-radius: 0 var(--bo-vua) var(--bo-vua) 0;
	font-style: italic;
}

.noi-dung-bai blockquote p:last-child { margin-bottom: 0; }

.noi-dung-bai .wp-caption-text,
.noi-dung-bai .wp-element-caption {
	font-family: var(--phong-tieu-de);
	font-size: var(--co-nho);
	line-height: var(--cao-nho);
	color: var(--mau-chu-nhat);
	margin-top: var(--kc-2);
	text-align: center;
}

.noi-dung-bai .wp-block-image img,
.noi-dung-bai img { border-radius: var(--bo-vua); height: auto; }

.noi-dung-bai .alignleft,
.noi-dung-bai .alignright,
.noi-dung-bai .aligncenter { margin-bottom: var(--kc-4); }

.noi-dung-bai .aligncenter { margin-left: auto; margin-right: auto; display: block; }

.noi-dung-bai table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--kc-4) 0;
	font-family: var(--phong-giao-dien);
	font-size: 15px;
}

.noi-dung-bai th,
.noi-dung-bai td {
	padding: 10px 12px;
	border: 1px solid var(--mau-vien);
	text-align: left;
}

.noi-dung-bai th { background: var(--mau-nen-phu); font-weight: 700; }

/* Bảng rộng phải tự cuộn ngang, không được đẩy cả trang lệch */
.noi-dung-bai .wp-block-table { overflow-x: auto; }

/* ==========================================================================
   25. BÌNH LUẬN
   ========================================================================== */

.comments-area {
	margin-top: var(--kc-6);
	padding-top: var(--kc-5);
	border-top: 1px solid var(--mau-vien);
}

.comments-area .comment-list {
	list-style: none;
	margin: 0 0 var(--kc-5);
	padding: 0;
}

.comments-area .comment-body {
	padding: var(--kc-4);
	background: var(--mau-nen-the);
	border: 1px solid var(--mau-vien);
	border-radius: var(--bo-vua);
	margin-bottom: var(--kc-3);
}

.comments-area .comment-form label {
	display: block;
	font-family: var(--phong-giao-dien);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.comments-area .comment-form p { margin-bottom: var(--kc-3); }

/* ==========================================================================
   26. THANH QUẢN TRỊ VÀ VÙNG QUẢNG CÁO CỦA GIAO DIỆN CHA
   ========================================================================== */

/* Đầu trang ghim phải hạ xuống khi thanh quản trị của WordPress đang hiện */
.admin-bar .dau-trang { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .dau-trang { top: 46px; }
}

@media (min-width: 1000px) {
	.admin-bar .cot-ben { top: 120px; }
}

.vung-quang-cao {
	margin: var(--kc-4) auto;
	text-align: center;
}

.vung-quang-cao img { margin: 0 auto; border-radius: var(--bo-vua); }

/* Cụm nút liên hệ nổi của giao diện cha: giữ nhưng đặt màu theo bộ nhận diện */
.cum-nut-noi .nut-noi { background: var(--mau-do); }
.cum-nut-noi .nut-noi:hover { background: var(--mau-do-hover); }