/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.0
Version: 1.9.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ==========================================================================
   Vịt Bầu Minh Hương — custom polish (bảng màu đã đổi trực tiếp trong theme.json)
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Header: sticky, đổ bóng nhẹ khi cuộn ---------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

header.wp-block-template-part .wp-block-group.has-base-background-color {
	box-shadow: 0 1px 0 rgba(31, 59, 38, 0.08), 0 6px 20px rgba(31, 59, 38, 0.05);
}

.wp-block-site-logo img {
	border-radius: 50%;
	transition: transform 0.25s ease;
}

.wp-block-site-logo:hover img {
	transform: scale(1.06);
}

.wp-block-site-title a {
	letter-spacing: 0.01em;
}

/* Menu điều hướng: gạch chân chạy khi hover */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: width 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2) !important;
	text-decoration: none !important;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* ---------- Tiêu đề: gạch nhấn vàng dưới H2 ---------- */
h2.wp-block-heading {
	position: relative;
}

h2.wp-block-heading::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 0.7rem;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

.has-text-align-center h2.wp-block-heading::after {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Nút bấm ---------- */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	box-shadow: 0 3px 10px rgba(31, 59, 38, 0.2);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(31, 59, 38, 0.3);
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ---------- Hình ảnh ---------- */
.wp-block-image img,
.wp-block-cover,
.wp-block-media-text__media img,
.wp-block-post-featured-image img,
.wp-block-gallery .wp-block-image img {
	border-radius: 14px;
}

.wp-block-image.alignfull img,
.wp-block-cover.alignfull {
	border-radius: 0;
}

.wp-block-image {
	overflow: hidden;
}

.wp-block-image a img {
	transition: transform 0.4s ease;
}

.wp-block-image a:hover img {
	transform: scale(1.04);
}

/* ---------- Trích dẫn / đường kẻ phân cách ---------- */
blockquote.wp-block-quote {
	background: var(--wp--preset--color--base-2);
	border-left: 3px solid var(--wp--preset--color--accent);
}

.wp-block-separator {
	opacity: 0.4;
}

/* ---------- Footer ---------- */
footer.wp-block-template-part {
	background: var(--wp--preset--color--base-2);
	border-top: 1px solid rgba(31, 59, 38, 0.12);
}

footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--accent-2) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	header.wp-block-template-part .wp-block-group.has-base-background-color {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}
}

/* ==========================================================================
   9. Nâng cấp toàn trang (áp dụng site-wide: Trang chủ, Sản Phẩm,
      Về Vịt Bầu Minh Hương, Liên Hệ...)
   ========================================================================== */

/* ---- Hero: eyebrow gạch vàng phía trên H1, nút có mũi tên ---- */
h1.wp-block-heading.has-text-align-center::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 0 auto 1.1rem;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

.wp-block-buttons .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform 0.2s ease;
}

.wp-block-buttons .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.wp-block-image.alignwide.size-full img {
	box-shadow: 0 24px 48px -16px rgba(31, 59, 38, 0.35);
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
}

/* ---- Tiêu đề trang (Sản Phẩm, Về..., Liên Hệ) ---- */
.wp-block-post-title {
	position: relative;
	padding-bottom: 1rem;
}

.wp-block-post-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

/* ---- Dải nền xen kẽ cho các section lớn trên trang chủ ---- */
main > .wp-block-group.alignfull:nth-of-type(2n) {
	background: var(--wp--preset--color--base-2);
}

/* ---- H2/H3 trong bài viết dài (Về..., Sản Phẩm) ---- */
.entry-content h2.wp-block-heading {
	margin-top: 3rem;
}

.entry-content h3.wp-block-heading {
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-2);
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}

/* ---- Đường phân cách dạng viên kim cương ở giữa ---- */
.entry-content hr.wp-block-separator {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(31, 59, 38, 0.25) 50%, transparent);
	margin: 3rem auto;
	position: relative;
	overflow: visible;
}

.entry-content hr.wp-block-separator::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	transform: translate(-50%, -50%) rotate(45deg);
	border-radius: 2px;
}

/* ---- Danh sách: chấm tròn màu accent thay cho dấu chấm mặc định ---- */
.entry-content ul.wp-block-list:not(.is-style-checkmark-list),
main ul.wp-block-list:not(.is-style-checkmark-list) {
	list-style: none;
	padding-left: 0;
}

.entry-content ul.wp-block-list:not(.is-style-checkmark-list) li,
main ul.wp-block-list:not(.is-style-checkmark-list) li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
}

.entry-content ul.wp-block-list:not(.is-style-checkmark-list) li::before,
main ul.wp-block-list:not(.is-style-checkmark-list) li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	border-radius: 50%;
}

/* ---- Nhấn mạnh (strong) theo màu thương hiệu ---- */
.entry-content p strong,
.entry-content li strong,
main p strong,
main li strong {
	color: var(--wp--preset--color--contrast-2);
}

/* ---- Nhãn nhỏ kiểu "kicker" cho đoạn chỉ có 1 strong (vd: GIÁ TRỊ CỐT LÕI) ---- */
main p:has(> strong:only-child) {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
}

/* ---- Khối gọi điện nổi bật (đoạn có emoji 📞) ---- */
.entry-content p:has(> img.emoji[alt="\1F4DE"]) {
	display: inline-block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.85rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(31, 59, 38, 0.25);
	font-size: 1.05rem;
}

.entry-content p:has(> img.emoji[alt="\1F4DE"]) strong {
	color: var(--wp--preset--color--accent);
}

/* ---- Khối gợi ý/mẹo nổi bật (đoạn có emoji 👉) ---- */
.entry-content p:has(> img.emoji[alt="\1F449"]) {
	display: block;
	background: var(--wp--preset--color--base-2);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding: 0.9rem 1.2rem;
	border-radius: 0 12px 12px 0;
	margin: 1.5rem 0;
}

/* ---- Hiệu ứng xuất hiện khi cuộn trang ---- */
.vbmh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.vbmh-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.vbmh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   10. Footer chuyên nghiệp: thương hiệu / liên hệ / mạng xã hội có icon
   ========================================================================== */
.vbmh-footer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2.5rem;
	max-width: none !important;
	width: 100%;
}

.vbmh-footer-brand {
	flex: 1 1 280px;
}

.vbmh-footer-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.vbmh-footer-logo img {
	border-radius: 50%;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.vbmh-footer-title {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.vbmh-footer-tagline {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-3);
}

.vbmh-footer-desc {
	max-width: 320px;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.vbmh-footer-contact,
.vbmh-footer-social {
	flex: 1 1 200px;
}

.vbmh-footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
	margin: 0 0 1.1rem;
}

.vbmh-footer-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	margin-bottom: 0.8rem;
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

.vbmh-footer-link:hover {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.vbmh-footer-link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.vbmh-social-icons {
	display: flex;
	gap: 0.75rem;
}

.vbmh-social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.vbmh-social-icons a:hover {
	background: var(--wp--preset--color--accent);
	transform: translateY(-3px);
}

.vbmh-social-icons svg {
	width: 19px;
	height: 19px;
}

.vbmh-footer-bottom {
	border-top: 1px solid rgba(31, 59, 38, 0.12);
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	text-align: center;
}

.vbmh-footer-bottom p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-3);
}

@media (max-width: 600px) {
	.vbmh-footer-grid {
		gap: 2rem;
	}
}

/* ==========================================================================
   11. Trang Liên Hệ: thông tin dạng card + bản đồ Google Maps
   ========================================================================== */
.vbmh-contact-wrap {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr);
	gap: 2.5rem;
	align-items: stretch;
	max-width: none !important;
	width: 100%;
}

.vbmh-contact-title {
	margin-top: 0;
}

.vbmh-contact-desc {
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.7;
	margin-bottom: 1.8rem;
}

.vbmh-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.2rem;
	margin-bottom: 0.9rem;
	background: var(--wp--preset--color--base-2);
	border-radius: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 10px rgba(31, 59, 38, 0.07);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.vbmh-contact-item:hover {
	box-shadow: 0 10px 24px rgba(31, 59, 38, 0.16);
	transform: translateY(-2px);
	text-decoration: none;
}

.vbmh-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	flex-shrink: 0;
}

.vbmh-contact-icon svg {
	width: 20px;
	height: 20px;
}

.vbmh-contact-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-top: 0.15rem;
}

.vbmh-contact-text strong {
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}

.vbmh-contact-sub {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.5;
}

.vbmh-contact-map {
	border-radius: 16px;
	overflow: hidden;
	min-height: 380px;
	box-shadow: 0 10px 30px rgba(31, 59, 38, 0.16);
}

.vbmh-contact-map iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	display: block;
}

@media (max-width: 782px) {
	.vbmh-contact-wrap {
		grid-template-columns: 1fr;
	}

	.vbmh-contact-map,
	.vbmh-contact-map iframe {
		min-height: 300px;
	}
}

/* ==========================================================================
   12. Trang chủ tái cấu trúc: thanh tin cậy / lưới giá trị / sản phẩm / CTA
   ========================================================================== */

/* ---- Thanh tin cậy ---- */
.vbmh-trust-strip {
	max-width: none !important;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.4rem 2.5rem;
}

.vbmh-trust-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	position: relative;
	padding-right: 2.5rem;
}

.vbmh-trust-item:last-child {
	padding-right: 0;
}

.vbmh-trust-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 22px;
	background: rgba(31, 59, 38, 0.15);
}

.vbmh-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	flex-shrink: 0;
}

.vbmh-trust-icon svg {
	width: 15px;
	height: 15px;
}

@media (max-width: 782px) {
	.vbmh-trust-item {
		padding-right: 0;
	}

	.vbmh-trust-item::after {
		display: none;
	}
}

/* ---- Tiêu đề section dùng chung ---- */
.vbmh-section-title {
	text-align: center;
	margin: 0 0 0.6rem;
}

.vbmh-section-sub {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.7;
}

/* ---- Lưới giá trị cốt lõi ---- */
.vbmh-values-wrap {
	max-width: none !important;
	width: 100%;
}

.vbmh-value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.vbmh-value-card {
	background: var(--wp--preset--color--base-2);
	border-radius: 16px;
	padding: 1.8rem 1.5rem;
	box-shadow: 0 2px 12px rgba(31, 59, 38, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbmh-value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(31, 59, 38, 0.14);
}

.vbmh-value-num {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.8rem;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6rem;
}

.vbmh-value-card h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast);
}

.vbmh-value-card p {
	font-size: 0.88rem;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 960px) {
	.vbmh-value-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.vbmh-value-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Dải ảnh minh họa ---- */
.vbmh-photo-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.vbmh-photo-strip-item {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(31, 59, 38, 0.14);
}

.vbmh-photo-strip-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vbmh-photo-strip-item:hover img {
	transform: scale(1.05);
}

@media (max-width: 640px) {
	.vbmh-photo-strip {
		grid-template-columns: 1fr;
	}
}

/* ---- Sản phẩm nổi bật ---- */
.vbmh-products-wrap {
	max-width: none !important;
	width: 100%;
}

.vbmh-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.vbmh-product-card {
	background: var(--wp--preset--color--base-2);
	border-radius: 18px;
	padding: 2.2rem;
	border-top: 3px solid var(--wp--preset--color--accent);
	box-shadow: 0 4px 20px rgba(31, 59, 38, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbmh-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(31, 59, 38, 0.16);
}

.vbmh-product-card h3 {
	margin: 0 0 0.7rem;
	font-size: 1.3rem;
	color: var(--wp--preset--color--contrast);
}

.vbmh-product-card p {
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.7;
	margin: 0 0 1.4rem;
}

.vbmh-product-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--accent-2);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.95rem;
	transition: gap 0.2s ease;
}

.vbmh-product-link:hover {
	gap: 0.7rem;
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.vbmh-product-link svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 700px) {
	.vbmh-product-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Banner CTA đóng trang ---- */
.vbmh-cta-banner {
	max-width: none !important;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-align: center;
	padding: 3rem 2rem;
	border-radius: 24px;
}

.vbmh-cta-banner h2 {
	color: var(--wp--preset--color--base);
	margin: 0 0 0.6rem;
}

.vbmh-cta-banner p {
	color: rgba(251, 248, 241, 0.75);
	margin: 0 0 1.8rem;
	font-size: 1.05rem;
}

.vbmh-cta-banner-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
}

.vbmh-cta-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
}

.vbmh-cta-phone svg {
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--accent);
}

.vbmh-cta-phone:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.vbmh-cta-button {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	padding: 0.85rem 1.8rem;
	border-radius: 0.33rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.vbmh-cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* ==========================================================================
   13. Menu điều hướng chuyên nghiệp hơn (nút hamburger + overlay mobile)
   ========================================================================== */

/* ---- Nút mở menu (hamburger) dạng badge tròn, đồng bộ icon toàn site ---- */
/* Lưu ý: .wp-block-navigation__responsive-container-content cũng chính là
   phần tử WordPress dùng để hiện menu ngang trên desktop (≥600px), nên MỌI
   rule bên dưới đều phải giới hạn trong ".is-menu-open" để không ảnh hưởng
   tới menu desktop. */
.wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--accent);
}

/* ---- Overlay menu mobile (chỉ khi is-menu-open) ---- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	background: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 10px rgba(31, 59, 38, 0.1);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--accent);
	transform: rotate(90deg);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 5rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Vịt Bầu Minh Hương";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(31, 59, 38, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	align-items: stretch !important;
	justify-content: center !important;
	text-align: center;
	border-bottom: 1px solid rgba(31, 59, 38, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:last-child {
	border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.1rem 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.4rem;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	justify-content: center !important;
	transition: color 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent-2) !important;
	text-decoration: none !important;
}