/*
 * Quảng Bình Ơi — Cháo bánh canh Quảng Bình
 * Bản xem trước giao diện trang chủ (HTML tĩnh).
 *
 * Bố cục bám sát bản thiết kế trang-chu.png:
 *  - Hero: ảnh bát tràn mép phải, chữ đè lên nền cream bên trái.
 *  - Thẻ món: chữ bên trái, ảnh bát cắt tròn bên phải.
 *  - Ram rán và "Vì sao chuẩn vị" nằm chung một hàng (35 / 65).
 *  - Địa chỉ, bản đồ, đánh giá nằm chung một hàng ba cột.
 *  - Kết trang bằng dải hành động chia đôi cam / teal.
 */

/* ==========================================================================
   1. BIẾN THIẾT KẾ
   ========================================================================== */
:root {
	--cream: #F7F3EA;          /* Nền chính */
	--cream-dam: #F2E7D5;      /* Dải phụ, nền nhấn nhẹ */
	--cream-the: #FDF9F1;      /* Nền thẻ */
	--trang: #FFFFFF;
	--muc: #181B1A;
	--teal: #155C58;
	--teal-hover: #0F4743;
	--teal-dam: #0E4340;       /* Thẻ chìm trong khối teal */
	--teal-nhat: #E4EFEC;
	--cam: #F05A24;
	--cam-hover: #D94717;
	--cam-nhat: #FFF0E8;
	--vang-gia: #E4B938;
	--ot: #C9362B;
	--vien: #E4D8C7;
	--chu-phu: #6F746F;

	--phong: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Phông tiêu đề: nét dày, thân vuông, đúng chất áp phích quán ăn */
	--phong-tieu-de: "Archivo", "Be Vietnam Pro", sans-serif;
	--phong-viet-tay: "Dancing Script", cursive;

	--kc-1: 4px;
	--kc-2: 8px;
	--kc-3: 12px;
	--kc-4: 16px;
	--kc-5: 24px;
	--kc-6: 32px;
	--kc-7: 48px;
	--kc-8: 64px;

	/* Bo góc theo bản thiết kế: thẻ mềm nhưng không tròn kiểu viên thuốc */
	--bo-the: 14px;
	--bo-nut: 10px;
	--bo-tron: 999px;

	--bong-the: 0 2px 10px rgba(24, 27, 26, 0.05);
	--bong-noi: 0 14px 36px rgba(24, 27, 26, 0.12);

	--rong-khung: 1240px;
	--cao-header: 74px;
	--cao-thanh-day: 64px;
}

/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cao-header) + 16px);
}

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

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--phong-tieu-de);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

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

.qbo-khung {
	width: 100%;
	max-width: var(--rong-khung);
	margin: 0 auto;
	padding: 0 24px;
}

.an-nhin {
	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
   ========================================================================== */

/* --- Nút --- */
.qbo-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kc-3);
	min-height: 48px;
	padding: 11px 24px;
	border: 0;
	border-radius: var(--bo-nut);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.qbo-nut svg { flex: 0 0 auto; }

.nut-cam { background: var(--cam); color: #fff; }
.nut-teal { background: var(--teal); color: #fff; }

.nut-vien {
	background: transparent;
	color: var(--teal);
	box-shadow: inset 0 0 0 2px var(--teal);
}

@media (hover: hover) {
	.nut-cam:hover { background: var(--cam-hover); transform: translateY(-2px); }
	.nut-teal:hover { background: var(--teal-hover); transform: translateY(-2px); }
	.nut-vien:hover { background: var(--teal); color: #fff; }
}

/* Nút gọi hai dòng: nhãn nhỏ ở trên, số điện thoại ở dưới */
.nut-goi-doi {
	padding: 10px 30px;
	min-height: 62px;
	text-align: left;
}

.nut-goi-doi .doi-dong {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.nut-goi-doi .doi-dong span:first-child {
	font-size: 14px;
	letter-spacing: 0.08em;
}

.nut-goi-doi .doi-dong span:last-child {
	font-size: 19px;
	letter-spacing: 0.02em;
}

/* --- Nhãn cam dạng vệt cọ, hai đầu cắt xéo không đều --- */
.nhan-co {
	display: inline-block;
	padding: 7px 20px 8px;
	background: var(--cam);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	clip-path: polygon(3% 14%, 97% 0, 100% 84%, 1% 100%);
}

/* --- Tiêu đề khối có hai gạch cam --- */
.tieu-de-khoi {
	text-align: center;
	margin-bottom: var(--kc-6);
}

.tieu-de-khoi h2 {
	display: inline-flex;
	align-items: center;
	gap: var(--kc-4);
	font-size: clamp(24px, 2.8vw, 32px);
	color: var(--teal);
	text-transform: uppercase;
}

.tieu-de-khoi h2::before,
.tieu-de-khoi h2::after {
	content: "";
	width: clamp(26px, 5vw, 58px);
	height: 3px;
	border-radius: 2px;
	background: var(--cam);
}

/* --- Chữ viết tay, chỉ dùng cho câu chữ ký --- */
.chu-ky {
	font-family: var(--phong-viet-tay);
	font-weight: 700;
	line-height: 1.3;
}

/* ==========================================================================
   4. ĐẦU TRANG
   ========================================================================== */
.qbo-dau-trang {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cream);
	border-bottom: 1px solid rgba(228, 216, 199, 0.7);
}

.qbo-dau-trang .qbo-khung {
	display: flex;
	align-items: center;
	gap: var(--kc-5);
	height: var(--cao-header);
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.logo img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.logo-chu {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.logo-chu strong {
	font-family: var(--phong-viet-tay);
	font-size: 25px;
	font-weight: 700;
	color: var(--teal);
}

.logo-chu span {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--cam);
	text-transform: uppercase;
}

.menu-chinh {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.menu-chinh a {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	padding: 6px 0;
	transition: color 0.2s ease;
}

.menu-chinh a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--cam);
	transition: right 0.25s ease;
}

@media (hover: hover) {
	.menu-chinh a:hover { color: var(--cam); }
	.menu-chinh a:hover::after { right: 0; }
}

.hanh-dong-header {
	display: flex;
	align-items: center;
	gap: var(--kc-4);
	flex: 0 0 auto;
}

.hotline-header {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 20px;
	font-weight: 800;
	color: var(--cam);
	white-space: nowrap;
}

.hotline-header .vong-tron {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cam);
	color: #fff;
}

.nut-header {
	min-height: 40px;
	padding: 9px 16px;
	font-size: 12px;
	letter-spacing: 0.05em;
	border-radius: var(--bo-nut);
}

.nut-menu {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--bo-nut);
	background: var(--teal);
	color: #fff;
	cursor: pointer;
	place-items: center;
}

/* ==========================================================================
   5. HERO — ẢNH BÁT TRÀN MÉP PHẢI
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--cream);
}

/* Ảnh bát chiếm 63% bên phải, chạm mép trên và mép phải màn hình */
.hero-anh {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 63%;
	z-index: 1;
}

.hero-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* Chuyển màu ở mép trái ảnh để chữ không bị ảnh cắt cụt */
.hero-anh::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	background: linear-gradient(to right, var(--cream) 22%, rgba(247, 243, 234, 0));
	z-index: 2;
}

/* Dải cam lượn sóng ở chân hero */
.hero-dai-cam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 96px;
	background: var(--cam);
	clip-path: polygon(0 62%, 18% 50%, 42% 66%, 62% 40%, 82% 20%, 100% 30%, 100% 100%, 0 100%);
}

.hero-chu-ky {
	position: absolute;
	right: max(28px, calc((100% - var(--rong-khung)) / 2 + 24px));
	bottom: 20px;
	z-index: 4;
	margin: 0;
	font-size: clamp(20px, 2.2vw, 27px);
	color: #fff;
	white-space: nowrap;
}

.hero-noi-dung {
	position: relative;
	z-index: 5;
	max-width: 560px;
	padding: 58px 0 150px;
}

.hero h1 {
	margin: var(--kc-4) 0 0;
	font-size: clamp(46px, 6.6vw, 86px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.hero h1 .dong-teal { display: block; color: var(--teal); }
.hero h1 .dong-cam { display: block; color: var(--cam); }

/* Dòng tên quán: in hoa, nghiêng, có nét cọ cam gạch dưới */
.hero-ten-quan {
	position: relative;
	display: inline-block;
	margin: 12px 0 var(--kc-6);
	font-family: var(--phong-tieu-de);
	font-size: clamp(28px, 3.9vw, 52px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--teal);
	text-transform: uppercase;
}

/* Nét cọ cam quét dưới dòng tên quán */
.hero-ten-quan::after {
	content: "";
	position: absolute;
	left: 1%;
	right: -3%;
	bottom: -11px;
	height: 9px;
	background: var(--cam);
	clip-path: polygon(0 38%, 11% 6%, 33% 44%, 57% 2%, 78% 38%, 100% 10%, 100% 84%, 0 100%);
}

.hero-usp {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0 0 var(--kc-6);
	padding: 0;
	list-style: none;
}

.hero-usp li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.hero-usp .bieu-tuong {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--teal);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-4);
}

/* Nút đặt ship cao bằng nút gọi hai dòng bên cạnh */
.nut-ship-hero {
	min-height: 62px;
	padding: 11px 28px;
	font-size: 16px;
}

/* ==========================================================================
   6. KHỐI CÂU CHUYỆN "CHÁO HAY CANH?"
   ========================================================================== */
/*
 * Nền giấy cũ đã vẽ sẵn cảnh làng chài bên trái và nồi nấu bếp củi bên phải.
 * Neo theo mép dưới để hai hình vẽ luôn nằm đúng chân khối.
 */
.khoi-cau-chuyen {
	padding: var(--kc-6) 0 126px;
	background-color: #F7ECD9;
	background-image: url("../img/nen-cau-chuyen.jpg");
	background-repeat: no-repeat;
	/* Đẩy ảnh xuống quá đáy một chút để cắt dải giấy trống dưới cảnh làng chài */
	background-position: center calc(100% + 52px);
	background-size: cover;
}

.cau-chuyen-luoi {
	display: grid;
	grid-template-columns: 42fr 58fr;
	gap: var(--kc-7);
	align-items: center;
}

.cau-chuyen-noi-dung h2 {
	font-size: clamp(24px, 2.9vw, 33px);
	text-transform: uppercase;
	color: var(--teal);
	line-height: 1.18;
}

.cau-chuyen-noi-dung h2 .dong-cam {
	display: block;
	color: var(--cam);
}

.cau-chuyen-noi-dung .doan-ke {
	margin: var(--kc-4) 0 var(--kc-5);
	font-size: 15px;
	line-height: 1.85;
	color: #3A3F3D;
}

.cau-ket {
	display: inline-block;
	font-size: 19px;
	font-weight: 800;
	color: var(--cam);
}

/*
 * Khối trích dẫn chỉ chiếm phần trái của cột, chừa khoảng bên phải
 * để lộ hình nồi nấu đã có sẵn trong ảnh nền.
 */
.cot-trich-dan {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 190px;
	align-items: center;
}

.the-trich-dan {
	position: relative;
	padding: 40px 34px 44px;
	background: var(--teal);
	color: #fff;
	/* Mép lượn mềm kiểu vệt cọ quét ngang, hình cắt khai báo trong index.html */
	clip-path: url(#vet-co);
}

.the-trich-dan .dau-nhay {
	position: absolute;
	top: 42px;
	left: 34px;
	font-family: Georgia, serif;
	font-size: 56px;
	line-height: 0.7;
	color: var(--cam);
}

.the-trich-dan blockquote {
	margin: 0 0 0 46px;
	font-size: clamp(19px, 1.75vw, 24px);
	font-weight: 500;
	line-height: 1.45;
}

.the-trich-dan cite {
	display: block;
	margin: var(--kc-5) 0 0 46px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}



/* ==========================================================================
   7. BA LOẠI BÁNH CANH — CHỮ TRÁI, ẢNH BÁT PHẢI
   ========================================================================== */
.khoi-mon {
	padding: var(--kc-7) 0 var(--kc-8);
}

.luoi-mon {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kc-5);
}

.the-mon {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 20px 0;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	background: var(--cream-the);
	box-shadow: var(--bong-the);
	/* Cắt phần ảnh bát tràn ra ngoài mép thẻ */
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Ba thẻ luôn cao bằng nhau dù số dòng mô tả khác nhau */
.luoi-mon > .the-mon { height: 100%; }

@media (hover: hover) {
	.the-mon:hover {
		transform: translateY(-5px);
		box-shadow: var(--bong-noi);
	}
}

/* Ảnh bát cắt tròn, đặt lệch sang phải và tràn nhẹ ra ngoài thẻ */
.the-mon-anh {
	position: absolute;
	top: 24px;
	right: -4px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	/* Viền trắng mảnh tách tô khỏi nền thẻ, bóng đổ nhẹ cho có chiều sâu */
	box-shadow: 0 0 0 5px var(--cream-the), 0 12px 26px rgba(24, 27, 26, 0.16);
}

/* Mặt nạ chỉ làm mượt đúng đường viền tròn, không đụng tới phần ruột ảnh */
.the-mon-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(closest-side, #000 97%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 97%, transparent 100%);
}

/* Cột chữ chỉ chiếm nửa trái để không bị ảnh đè lên */
/* Cột chữ chỉ chiếm phần trái để ảnh bát không đè lên dòng mô tả */
.the-mon-chu {
	position: relative;
	z-index: 2;
	width: 51%;
	min-height: 226px;
}

.the-mon-chu h3 {
	margin: var(--kc-3) 0 var(--kc-4);
	font-size: 27px;
	text-transform: uppercase;
	color: var(--teal);
}

.the-mon-chu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.the-mon-chu li {
	position: relative;
	padding-left: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #3A3F3D;
}

.the-mon-chu li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cam);
}

/* Badge giá cam, nằm dưới cột chữ */
.badge-gia {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	margin-bottom: 18px;
	padding: 7px 22px 8px;
	border-radius: 12px;
	background: var(--cam);
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Dải "ăn kèm" ở chân thẻ, tràn hết chiều ngang */
.the-mon-chan {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kc-3);
	margin: 0 -20px;
	padding: 11px 20px;
	background: var(--cream-dam);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #4A4F4C;
}

.the-mon-chan .net-gia-vi {
	flex: 0 0 auto;
	color: var(--ot);
}

/* ==========================================================================
   8. HÀNG: RAM RÁN GIÒN (35%) + VÌ SAO CHUẨN VỊ (65%)
   ========================================================================== */
.khoi-doi {
	padding-bottom: var(--kc-8);
}

.luoi-doi {
	display: grid;
	grid-template-columns: 35fr 65fr;
	gap: var(--kc-5);
	align-items: stretch;
}

/* --- Thẻ ram --- */
.the-ram {
	display: grid;
	grid-template-columns: 52fr 48fr;
	align-items: center;
	gap: var(--kc-3);
	padding: 22px 22px 22px 22px;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	background: var(--cream-the);
	box-shadow: var(--bong-the);
	overflow: hidden;
}

.the-ram h2 {
	margin: var(--kc-3) 0 var(--kc-4);
	font-size: clamp(20px, 1.85vw, 24px);
	letter-spacing: -0.035em;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--cam);
	line-height: 1.08;
}

.the-ram p {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: #3A3F3D;
}

.the-ram-anh {
	align-self: stretch;
	margin: 0;
}

/* Ảnh bo góc, mép trái tan dần vào nền thẻ thay vì cạnh cắt thẳng thô cứng */
.the-ram-anh img {
	width: 100%;
	height: 100%;
	min-height: 214px;
	object-fit: cover;
	border-radius: 12px;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 16%, #000 40%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 16%, #000 40%);
}

/* --- Khối teal "Vì sao chuẩn vị" --- */
.khoi-chuan-vi {
	padding: 26px;
	border-radius: var(--bo-the);
	background: var(--teal);
	color: #fff;
}

.khoi-chuan-vi > h2 {
	margin-bottom: var(--kc-5);
	font-size: clamp(21px, 2.2vw, 27px);
	text-transform: uppercase;
}

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

.the-chuan-vi {
	display: grid;
	grid-template-columns: 56fr 44fr;
	align-items: center;
	border-radius: 12px;
	overflow: hidden;
}

.the-chuan-vi.nen-trang { background: var(--trang); color: var(--muc); }

.the-chuan-vi.nen-teal {
	background: var(--teal-dam);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.the-chuan-vi-chu { padding: 18px 14px; }

.the-chuan-vi-chu h3 {
	font-size: 16px;
	letter-spacing: -0.02em;
	line-height: 1.22;
	text-transform: uppercase;
}

.the-chuan-vi.nen-trang h3 { color: var(--teal); }
.the-chuan-vi.nen-teal h3 { color: #fff; }

.the-chuan-vi-chu p {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.65;
}

.the-chuan-vi.nen-trang p { color: var(--chu-phu); }
.the-chuan-vi.nen-teal p { color: rgba(255, 255, 255, 0.78); }

.the-chuan-vi img {
	width: 100%;
	height: 100%;
	min-height: 148px;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 18%, #000 44%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 18%, #000 44%);
}

/* ==========================================================================
   9. HÀNG BA CỘT: ĐỊA CHỈ — BẢN ĐỒ — ĐÁNH GIÁ
   ========================================================================== */
.khoi-ba-cot {
	padding-bottom: var(--kc-8);
}

.luoi-ba-cot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kc-5);
	align-items: stretch;
}

.o-thong-tin {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	background: var(--cream-the);
	box-shadow: var(--bong-the);
}

.o-thong-tin > h2 {
	margin-bottom: var(--kc-4);
	font-size: 20px;
	text-transform: uppercase;
	color: var(--teal);
}

.dong-thong-tin {
	display: flex;
	gap: var(--kc-3);
	padding: 11px 0;
}

.dong-thong-tin .bieu-tuong {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--cam);
}

.dong-thong-tin strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 2px;
}

.dong-thong-tin span.mo-ta {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--chu-phu);
}

.o-thong-tin .qbo-nut {
	margin-top: auto;
	width: 100%;
}

/* --- Ô bản đồ --- */
.o-ban-do {
	position: relative;
	min-height: 300px;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	overflow: hidden;
	background: var(--teal-nhat);
}

.o-ban-do iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Nhãn tên quán nổi trên bản đồ, giống bản thiết kế */
.nhan-ban-do {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: calc(100% - 28px);
	padding: 9px 15px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 6px 18px rgba(24, 27, 26, 0.18);
	transform: translateX(-50%);
}

.nhan-ban-do .cham {
	flex: 0 0 auto;
	color: var(--ot);
}

.nhan-ban-do strong { display: block; font-size: 14px; }
.nhan-ban-do small { font-size: 12px; color: var(--chu-phu); }

/* --- Ô đánh giá --- */
/* Khung chứa các ý kiến, chồng lên nhau và chuyển bằng độ mờ */
.bang-danh-gia {
	position: relative;
	transition: height 0.3s ease;
}

.y-kien {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.y-kien.dang-hien {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Hàng chấm điều hướng */
.cham-danh-gia {
	display: flex;
	gap: 7px;
	margin-top: var(--kc-4);
}

.cham-danh-gia button {
	position: relative;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vien);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.cham-danh-gia button.dang-chon {
	width: 24px;
	border-radius: var(--bo-tron);
	background: var(--cam);
}

@media (hover: hover) {
	.cham-danh-gia button:not(.dang-chon):hover { background: var(--chu-phu); }
}

/* Vùng bấm thật rộng 44px cho ngón tay, phần nhìn thấy vẫn nhỏ */
.cham-danh-gia button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.o-danh-gia .dau-nhay-nho {
	font-family: Georgia, serif;
	font-size: 44px;
	line-height: 0.5;
	color: var(--teal-nhat);
}

.o-danh-gia blockquote {
	margin: var(--kc-3) 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: #3A3F3D;
}

.o-danh-gia cite {
	display: block;
	margin-top: var(--kc-3);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	text-align: right;
	color: var(--muc);
}

.hang-sao {
	display: flex;
	align-items: center;
	gap: var(--kc-3);
	margin-top: auto;
	padding-top: var(--kc-4);
	border-top: 1px dashed var(--vien);
}

.hang-sao .sao {
	color: var(--cam);
	font-size: 17px;
	letter-spacing: 2px;
}

.hang-sao .diem {
	font-size: 13px;
	color: var(--chu-phu);
}

/* ==========================================================================
   10. DẢI HÀNH ĐỘNG CUỐI TRANG — CHIA ĐÔI CAM / TEAL
   ========================================================================== */
.dai-cuoi {
	display: grid;
	grid-template-columns: 56fr 44fr;
}

.dai-cuoi > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kc-4);
	padding: 26px 24px;
	color: #fff;
	transition: background 0.2s ease;
}

/* Mép chia giữa hai nửa cắt xéo, nửa cam ăn lấn sang phải một chút */
.dai-cuoi .ben-goi {
	background: var(--cam);
	margin-right: -34px;
	padding-right: 58px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
}

.dai-cuoi .ben-ship { background: var(--teal); }

@media (hover: hover) {
	.dai-cuoi .ben-goi:hover { background: var(--cam-hover); }
	.dai-cuoi .ben-ship:hover { background: var(--teal-hover); }
}

.dai-cuoi .doi-dong { display: flex; flex-direction: column; line-height: 1.3; }

.dai-cuoi .doi-dong span:first-child {
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.dai-cuoi .doi-dong span:last-child {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   11. CHÂN TRANG
   ========================================================================== */
.qbo-chan-trang {
	padding: var(--kc-7) 0 var(--kc-5);
	background: var(--teal-dam);
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
}

.chan-luoi {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: var(--kc-7);
	padding-bottom: var(--kc-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.qbo-chan-trang .logo-chu strong { color: #fff; }
.qbo-chan-trang .logo-chu span { color: var(--vang-gia); }

.qbo-chan-trang h4 {
	margin-bottom: var(--kc-3);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
}

.qbo-chan-trang ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.qbo-chan-trang .gioi-thieu {
	margin-top: var(--kc-3);
	max-width: 40ch;
	line-height: 1.75;
}

@media (hover: hover) {
	.qbo-chan-trang a:hover { color: var(--vang-gia); }
}

.chan-ban-quyen {
	padding-top: var(--kc-4);
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   12. THANH HÀNH ĐỘNG CỐ ĐỊNH TRÊN ĐIỆN THOẠI
   ========================================================================== */
.thanh-day {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -6px 20px rgba(24, 27, 26, 0.18);
}

.thanh-day a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1;
	min-height: var(--cao-thanh-day);
	padding: 8px;
	color: #fff;
	font-weight: 800;
	line-height: 1.15;
}

.thanh-day .goi { background: var(--cam); }
.thanh-day .ship { background: var(--teal); }

.thanh-day .doi-dong { display: flex; flex-direction: column; }

.thanh-day .doi-dong span:first-child {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.thanh-day .doi-dong span:last-child { font-size: 16px; }

/* ==========================================================================
   13. NGĂN KÉO MENU ĐIỆN THOẠI
   ========================================================================== */
.qbo-lop-phu {
	position: fixed;
	inset: 0;
	z-index: 130;
	background: rgba(24, 27, 26, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ngan-keo {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 140;
	width: min(306px, 84vw);
	padding: var(--kc-5);
	background: var(--cream);
	transform: translateX(-100%);
	transition: transform 0.28s ease;
	overflow-y: auto;
}

body.mo-menu .qbo-lop-phu { 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-5);
	padding-bottom: var(--kc-4);
	border-bottom: 1px solid var(--vien);
}

.nut-dong {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--bo-nut);
	background: var(--teal-nhat);
	color: var(--teal);
	cursor: pointer;
}

.ngan-keo ul {
	margin: 0 0 var(--kc-5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.ngan-keo ul a {
	display: block;
	padding: 13px 12px;
	border-radius: var(--bo-nut);
	font-weight: 600;
}

.ngan-keo ul a:active { background: var(--teal-nhat); }

.ngan-keo .qbo-nut { width: 100%; margin-bottom: var(--kc-3); }

/* ==========================================================================
   14. MÁY TÍNH BẢNG
   ========================================================================== */
@media (max-width: 1100px) {
	.menu-chinh,
	.hanh-dong-header .nut-header {
		display: none;
	}

	.nut-menu { display: grid; }
	.hanh-dong-header { margin-left: auto; }

	.hero-anh { width: 52%; }
	.hero-noi-dung { max-width: 46%; padding-bottom: 130px; }
	.hero h1 { font-size: clamp(40px, 5.4vw, 62px); }

	.cau-chuyen-luoi { grid-template-columns: 1fr; gap: var(--kc-6); }
	.cot-trich-dan { grid-template-columns: 1fr 120px; }

	.luoi-mon { grid-template-columns: 1fr; }
	.the-mon-anh { width: 232px; height: 232px; top: 32px; }
	.the-mon-chu { width: 62%; min-height: 210px; }

	.luoi-doi { grid-template-columns: 1fr; }
	.luoi-ba-cot { grid-template-columns: 1fr 1fr; }
	.o-ban-do { min-height: 260px; }
	.chan-luoi { grid-template-columns: 1fr 1fr; gap: var(--kc-6); }
}

/* ==========================================================================
   15. ĐIỆN THOẠI — MỐC 390px
   ========================================================================== */
@media (max-width: 780px) {
	:root {
		--cao-header: 62px;
	}

	.qbo-khung { padding: 0 16px; }

	body {
		padding-bottom: calc(var(--cao-thanh-day) + env(safe-area-inset-bottom));
	}

	.thanh-day { display: flex; }

	.hotline-header .so { display: none; }

	/* Hero xếp dọc: ảnh lên trước, chữ xuống sau */
	.hero { display: flex; flex-direction: column; }

	.hero-anh {
		position: relative;
		order: -1;
		width: 100%;
		height: 262px;
	}

	.hero-anh::before { display: none; }

	.hero-noi-dung {
		max-width: 100%;
		padding: var(--kc-5) 0 118px;
	}

	.hero h1 { font-size: 42px; }
	.hero-ten-quan { font-size: 30px; }

	.hero-dai-cam { height: 74px; }

	.hero-chu-ky {
		right: auto;
		left: 16px;
		bottom: 16px;
		font-size: 19px;
		white-space: normal;
	}

	.hero-usp { gap: 9px 20px; }
	.hero-cta { gap: var(--kc-3); }
	.hero-cta .qbo-nut { width: 100%; }

	/* Phóng ảnh nền để cảnh làng chài nằm gọn dưới đáy, không đè lên khối trích dẫn */
	.khoi-cau-chuyen {
		padding: var(--kc-6) 0 106px;
		background-size: cover;
		background-position: left bottom;
	}
	.khoi-mon { padding: var(--kc-6) 0 var(--kc-7); }

	.cot-trich-dan { grid-template-columns: 1fr; }
	.net-noi-nau { display: none; }
	.the-trich-dan { padding: 34px 26px 38px; }
	.the-trich-dan .dau-nhay { top: 30px; left: 24px; font-size: 48px; }
	.the-trich-dan blockquote,
	.the-trich-dan cite { margin-left: 42px; }

	/* Thẻ món trên điện thoại: ảnh nhỏ lại, chữ vẫn nằm bên trái */
	.the-mon-anh {
		width: 176px;
		height: 176px;
		top: 20px;
		right: -14px;
	}

	.the-mon-chu { width: 60%; min-height: 190px; }
	.the-mon-chu h3 { font-size: 24px; }
	.badge-gia { font-size: 26px; }

	.the-ram {
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.the-ram-anh { margin: var(--kc-4) 0 0; }
	.the-ram-anh img {
		min-height: 200px;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 14%, #000 34%);
		mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 14%, #000 34%);
	}

	.luoi-chuan-vi { grid-template-columns: 1fr; }
	.luoi-ba-cot { grid-template-columns: 1fr; }

	.dai-cuoi { grid-template-columns: 1fr; }
	.dai-cuoi > a { padding: 20px 16px; }

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

@media (max-width: 400px) {
	.the-mon-anh { width: 154px; height: 154px; right: -12px; }
	.the-mon-chu { width: 63%; }
	.logo img { width: 38px; height: 38px; }
	.logo-chu strong { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   18. LIÊN KẾT SANG BÀI VIẾT CHI TIẾT
   ========================================================================== */

/* Liên kết trong thẻ món, nằm cùng hàng với badge giá */
.the-mon .badge-gia {
	margin-bottom: 10px;
}

.xem-chi-tiet,
.doc-them {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--teal);
	transition: gap 0.2s ease, color 0.2s ease;
}

.xem-chi-tiet {
	align-self: flex-start;
	margin-bottom: 16px;
}

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

.xem-chi-tiet::after,
.doc-them::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background: var(--cam);
	transition: right 0.25s ease;
}

@media (hover: hover) {
	.xem-chi-tiet:hover,
	.doc-them:hover {
		gap: 10px;
		color: var(--cam);
	}

	.xem-chi-tiet:hover::after,
	.doc-them:hover::after {
		right: 0;
	}
}

/* Khối câu chuyện dùng nền giấy nên liên kết cần đậm hơn cho dễ đọc */
.cau-chuyen-noi-dung .doc-them {
	display: block;
	width: fit-content;
}

/* Chân trang bốn cột khi có thêm cột bài viết */
.chan-luoi--4 {
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--kc-6);
}

@media (max-width: 1100px) {
	.chan-luoi--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
	.chan-luoi--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. GỠ KIỂU DÁNG MẶC ĐỊNH CỦA GIAO DIỆN CHA
   ========================================================================== */

/*
 * Giao diện cha đặt nền, viền trái và bo góc cho mọi thẻ blockquote.
 * Hai khối trích dẫn của trang chủ nằm trên nền teal nên phải gỡ sạch,
 * nếu không chữ trắng sẽ nằm trên hộp nền sáng và không đọc được.
 */
.the-trich-dan blockquote,
.y-kien blockquote,
.o-danh-gia blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
}

.the-trich-dan blockquote {
	margin-left: 46px;
	color: #fff;
}

.the-trich-dan cite,
.y-kien cite,
.o-danh-gia cite {
	font-style: normal;
}

/* ==========================================================================
   20. TRANG BÀI VIẾT VÀ TRANG TĨNH
   ========================================================================== */

/* --- Khung chung của trang trong --- */
.bai-don,
.trang-tinh {
	background: var(--trang);
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	padding: clamp(22px, 3vw, 40px);
	box-shadow: var(--bong-the);
}

.bai-don__dau {
	padding-bottom: var(--kc-5);
	margin-bottom: var(--kc-5);
	border-bottom: 2px solid var(--cream-dam);
}

.bai-don__tieu-de {
	font-family: var(--phong-tieu-de);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--teal);
}

/* Hàng thông tin ngày, tác giả, chuyên mục */
.bai-don__dau .meta-bai,
.bai-don__dau .meta-bai-viet {
	margin-top: var(--kc-4);
	font-size: 13px;
	color: var(--chu-phu);
}

/* --- Chữ trong thân bài --- */
.noi-dung-soan-thao {
	font-size: 17px;
	line-height: 1.8;
	color: #2E3331;
}

.noi-dung-soan-thao > p:first-child {
	font-size: 19px;
	line-height: 1.7;
	color: var(--muc);
}

.noi-dung-soan-thao h2 {
	margin: var(--kc-7) 0 var(--kc-4);
	padding-left: 16px;
	border-left: 5px solid var(--cam);
	font-family: var(--phong-tieu-de);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--teal);
}

.noi-dung-soan-thao h3 {
	margin: var(--kc-6) 0 var(--kc-3);
	font-family: var(--phong-tieu-de);
	font-size: clamp(18px, 2vw, 21px);
	font-weight: 800;
	color: var(--muc);
}

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

.noi-dung-soan-thao a {
	color: var(--teal);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(21, 92, 88, 0.32);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
	.noi-dung-soan-thao a:hover {
		color: var(--cam);
		text-decoration-color: var(--cam);
	}
}

.noi-dung-soan-thao strong { color: var(--muc); }

/* Danh sách có chấm cam */
.noi-dung-soan-thao ul {
	margin: 0 0 var(--kc-5);
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.noi-dung-soan-thao ul li {
	position: relative;
	padding-left: 24px;
}

.noi-dung-soan-thao ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cam);
}

.noi-dung-soan-thao ol {
	margin: 0 0 var(--kc-5);
	padding-left: 22px;
	display: grid;
	gap: 10px;
}

/* Bảng so sánh: cuộn ngang riêng trên máy hẹp, không làm tràn cả trang */
.noi-dung-soan-thao table {
	width: 100%;
	margin: 0 0 var(--kc-5);
	border-collapse: collapse;
	font-size: 15px;
	background: var(--cream-the);
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	overflow: hidden;
}

.noi-dung-soan-thao thead th {
	padding: 12px 14px;
	background: var(--teal);
	color: #fff;
	font-family: var(--phong-tieu-de);
	font-size: 14px;
	font-weight: 800;
	text-align: left;
	letter-spacing: 0.01em;
}

.noi-dung-soan-thao tbody td {
	padding: 11px 14px;
	border-top: 1px solid var(--vien);
	vertical-align: top;
}

.noi-dung-soan-thao tbody tr:nth-child(even) {
	background: rgba(242, 231, 213, 0.42);
}

/* Trích dẫn trong thân bài: vẫn dùng kiểu của quán, không dùng kiểu cha */
.noi-dung-soan-thao blockquote {
	position: relative;
	margin: var(--kc-5) 0;
	padding: 22px 26px 22px 60px;
	border: 0;
	border-radius: var(--bo-the);
	background: var(--teal);
	color: #fff;
	font-family: var(--phong-viet-tay);
	font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 700;
	font-style: normal;
	line-height: 1.4;
}

.noi-dung-soan-thao blockquote::before {
	content: "\201C";
	position: absolute;
	left: 22px;
	top: 14px;
	font-family: Georgia, serif;
	font-size: 52px;
	line-height: 1;
	color: var(--cam);
}

.noi-dung-soan-thao blockquote p { margin: 0; }

.noi-dung-soan-thao img {
	border-radius: var(--bo-the);
	margin: 0 0 var(--kc-5);
}

/* ==========================================================================
   21. CỘT BÊN
   ========================================================================== */
.qbo-cot-ben .cot-ben__trong {
	display: grid;
	gap: var(--kc-4);
}

.qbo-the-ben {
	padding: 22px;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	background: var(--cream-the);
	box-shadow: var(--bong-the);
}

.qbo-the-ben__tieu-de {
	margin-bottom: var(--kc-4);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cream-dam);
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--teal);
}

/* --- Thẻ thông tin quán --- */
.qbo-the-quan { background: var(--trang); }

.qbo-the-quan__dau {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: var(--kc-4);
	margin-bottom: var(--kc-4);
	border-bottom: 2px solid var(--cream-dam);
}

.qbo-the-quan__dau img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.qbo-the-quan__dau strong {
	display: block;
	font-family: var(--phong-viet-tay);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--teal);
}

.qbo-the-quan__dau small {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cam);
}

.qbo-the-quan__thong-tin {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 13px;
	font-size: 14.5px;
	line-height: 1.55;
}

.qbo-the-quan__thong-tin li {
	display: flex;
	gap: 11px;
}

.qbo-the-quan__thong-tin .bieu-tuong {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--cam);
}

.qbo-so-lon {
	font-family: var(--phong-tieu-de);
	font-size: 21px;
	font-weight: 900;
	letter-spacing: 0.01em;
	color: var(--cam);
	text-decoration: none;
}

.qbo-the-quan__nut {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: var(--kc-5);
}

.qbo-the-quan__nut .qbo-nut {
	min-height: 44px;
	padding: 10px 12px;
	font-size: 13px;
	gap: 7px;
}

.qbo-mo-ban-do {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--kc-4);
	font-size: 14px;
	font-weight: 700;
	color: var(--teal);
	transition: gap 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
	.qbo-mo-ban-do:hover { gap: 10px; color: var(--cam); }
}

/* --- Bảng giá --- */
.qbo-bang-gia {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.qbo-bang-gia li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--vien);
	font-size: 15px;
}

.qbo-bang-gia li:last-child { border-bottom: 0; }

.qbo-bang-gia a {
	color: var(--muc);
	font-weight: 500;
	transition: color 0.2s ease;
}

@media (hover: hover) {
	.qbo-bang-gia a:hover { color: var(--cam); }
}

.qbo-bang-gia b {
	flex: 0 0 auto;
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	font-weight: 900;
	color: var(--cam);
}

/* --- Đọc tiếp --- */
.qbo-ds-doc-tiep {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.qbo-ds-doc-tiep a {
	display: block;
	padding: 11px 12px 11px 26px;
	position: relative;
	border-radius: var(--bo-nut);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	transition: background 0.2s ease, color 0.2s ease;
}

.qbo-ds-doc-tiep a::before {
	content: "→";
	position: absolute;
	left: 8px;
	color: var(--cam);
}

@media (hover: hover) {
	.qbo-ds-doc-tiep a:hover { background: var(--cam-nhat); color: var(--cam); }
}

@media (max-width: 780px) {
	.qbo-the-quan__nut { grid-template-columns: 1fr; }
	.noi-dung-soan-thao { font-size: 16px; }
	.noi-dung-soan-thao > p:first-child { font-size: 17px; }
}

/* ==========================================================================
   22. WIDGET CỦA QUÁN TRONG CỘT BÊN
   ========================================================================== */

/*
 * Khi ba khối chạy dưới dạng widget, giao diện cha bọc chúng bằng
 * <section class="widget qbo-the-ben ..."> và tiêu đề là <h2 class="widget__tieu-de">.
 * Ba quy tắc dưới đây gộp cả hai kiểu tên lớp để khối trông giống nhau
 * dù đang là widget hay bản dựng sẵn.
 */
.qbo-cot-ben .widget {
	margin-bottom: 0;
	padding: 22px;
	border: 1px solid var(--vien);
	border-radius: var(--bo-the);
	background: var(--cream-the);
	box-shadow: var(--bong-the);
}

.qbo-cot-ben .widget__tieu-de,
.qbo-the-ben__tieu-de {
	margin-bottom: var(--kc-4);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cream-dam);
	font-family: var(--phong-tieu-de);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--teal);
}

/* Giao diện cha vẽ thêm một gạch màu đỏ dưới tiêu đề widget, đổi sang màu cam */
.qbo-cot-ben .widget__tieu-de::after {
	background: var(--cam);
	width: 56px;
	height: 3px;
	bottom: -2.5px;
	border-radius: 2px;
}

/* Thẻ thông tin quán dùng nền trắng để nổi hơn hai thẻ còn lại */
.qbo-cot-ben .qbo-the-quan { background: var(--trang); }

/* Widget khác do chủ quán tự thêm vẫn theo kiểu chung của cột bên */
.qbo-cot-ben .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   23. GIÀNH LẠI MÀU CHỮ CHO LIÊN KẾT BÊN TRONG WIDGET
   ========================================================================== */

/*
 * Giao diện cha đặt ".widget a { color: var(--mau-chu) }" — độ ưu tiên 0,1,1,
 * cao hơn lớp đơn của quán nên nuốt mất màu cam của hotline và màu trắng
 * của chữ trong nút. Các quy tắc dưới đây cố ý viết dài hơn để thắng lại,
 * đồng thời đủ mạnh cả khi widget được kéo xuống chân trang
 * (nơi có ".chan-trang .widget a" với độ ưu tiên 0,2,1).
 */

/* Số hotline: cam đỏ, cỡ lớn, luôn nổi bật */
.widget a.qbo-so-lon,
.chan-trang .widget a.qbo-so-lon,
.qbo-the-quan a.qbo-so-lon {
	color: var(--cam);
	font-family: var(--phong-tieu-de);
	font-size: 23px;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-decoration: none;
}

@media (hover: hover) {
	.widget a.qbo-so-lon:hover,
	.qbo-the-quan a.qbo-so-lon:hover {
		color: var(--cam-hover);
	}
}

/* Chữ và biểu tượng trong hai nút luôn trắng trên nền cam / teal */
.widget a.qbo-nut,
.widget a.qbo-nut.nut-cam,
.widget a.qbo-nut.nut-teal,
.chan-trang .widget a.qbo-nut,
.qbo-the-quan .qbo-nut {
	color: #fff;
}

@media (hover: hover) {
	.widget a.qbo-nut.nut-cam:hover,
	.qbo-the-quan .qbo-nut.nut-cam:hover { background: var(--cam-hover); color: #fff; }

	.widget a.qbo-nut.nut-teal:hover,
	.qbo-the-quan .qbo-nut.nut-teal:hover { background: var(--teal-hover); color: #fff; }
}

/* Liên kết mở bản đồ giữ màu teal của thương hiệu */
.widget a.qbo-mo-ban-do,
.qbo-the-quan a.qbo-mo-ban-do {
	color: var(--teal);
}

@media (hover: hover) {
	.widget a.qbo-mo-ban-do:hover,
	.qbo-the-quan a.qbo-mo-ban-do:hover { color: var(--cam); }
}

/* Giá trong bảng thực đơn cũng bị ".widget a" nuốt mất màu */
.widget .qbo-bang-gia b,
.qbo-the-gia .qbo-bang-gia b {
	color: var(--cam);
}

.widget .qbo-ds-doc-tiep a::before,
.qbo-the-doc-tiep .qbo-ds-doc-tiep a::before {
	color: var(--cam);
}