/*
Theme Name: In Sài Gòn
Theme URI: https://insaigon.tech/
Author: In Sài Gòn
Description: Theme viết tay cho In Sài Gòn — phong cách tối giản cao cấp (khối toàn màn hình, tiêu đề lớn, nút viên thuốc, nền đen / xám nhạt / trắng). Dữ liệu gom trong inc/data.php, schema JSON-LD, form báo giá lưu đơn, nút liên hệ nổi, không page builder, không jQuery.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: insaigon
*/

/* ==========================================================================
   1. Tokens — đổi giao diện chủ yếu ở đây
   ========================================================================== */
:root {
	--c-brand: #5EBB46;          /* màu logo — điểm nhấn, chữ nổi trên nền đen */
	--c-primary: #2E8B1E;        /* nút, link trên nền sáng (đủ tương phản chữ trắng) */
	--c-primary-dark: #246f18;
	--c-accent: #5EBB46;
	--c-bg: #ffffff;
	--c-bg-alt: #f1f8ee;          /* xanh lá rất nhạt (từ #5EBB46) */
	--c-bg-dark: #10300c;         /* xanh rêu đậm (từ #5EBB46) */
	--c-bg-dark-2: #183f12;
	--c-text: #15210f;
	--c-text-muted: #5b6b55;
	--c-text-soft: #a7c39e;
	--c-text-invert: #f3faf0;
	--c-border: #d5e6cf;

	--f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--f-heading: var(--f-body);

	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1.0625rem;        /* 17px như mẫu */
	--fs-lg: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
	--fs-tagline: clamp(1.1875rem, 0.95rem + 1vw, 1.75rem);   /* 19 → 28px */
	--fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);             /* 24 → 40px */
	--fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);             /* 32 → 56px */
	--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);              /* 36 → 64px */
	--fs-stat: clamp(2.75rem, 2rem + 3vw, 5rem);

	--ls-tight: -0.015em;
	--radius: 22px;
	--radius-lg: 28px;
	--radius-sm: 12px;
	--radius-pill: 980px;
	--shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

	--space-section: clamp(4rem, 3rem + 4vw, 7rem);
	--container: 1180px;
	--container-wide: 1440px;
	--gutter: 20px;
	--header-h: 64px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.47; letter-spacing: -0.01em; color: var(--c-text); background: var(--c-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-heading); font-weight: 600; line-height: 1.08; letter-spacing: var(--ls-tight); margin: 0 0 0.4em; color: inherit; }
h1 { font-size: var(--fs-h1); text-wrap: balance; }
h2 { font-size: var(--fs-h2); text-wrap: balance; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
input, select, textarea, button { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 8px 16px; background: #fff; }
.icon { width: 1em; height: 1em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); color: var(--c-text-invert); }
.section__head { max-width: 820px; margin: 0 auto 3rem; text-align: center; }
.section__eyebrow { display: block; margin-bottom: 0.6rem; font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--ls-tight); color: var(--c-primary); }
.section__head h2::after { content: ""; display: block; width: 48px; height: 4px; margin: 0.5em auto 0; border-radius: 4px; background: var(--c-brand); }
.stage h2::after, .hero h1::after { content: none; }
.section--dark .section__eyebrow { color: var(--c-brand); }
.section__lead { margin-inline: auto; max-width: 720px; font-size: var(--fs-tagline); line-height: 1.3; color: var(--c-text-muted); }
.section--dark .section__lead { color: var(--c-text-soft); }
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.center { text-align: center; }

/* ==========================================================================
   3. Nút — viên thuốc như mẫu
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 22px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--fs-base); font-weight: 400; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn--brand { background: var(--c-brand); color: #0b2008; }
.btn--brand:hover { background: #6fcb57; color: #0b2008; }
.btn--ghost { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--ghost:hover { background: var(--c-primary); color: #fff; }
.section--dark .btn--primary, .tile--dark .btn--primary, .hero .btn--primary, .cta-band .btn--primary { background: var(--c-brand); color: #0b2008; }
.section--dark .btn--primary:hover, .tile--dark .btn--primary:hover, .hero .btn--primary:hover, .cta-band .btn--primary:hover { background: #75cf5d; color: #0b2008; }
.section--dark .btn--ghost, .tile--dark .btn--ghost, .hero .btn--ghost { border-color: var(--c-brand); color: var(--c-brand); }
.section--dark .btn--ghost:hover, .tile--dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--c-brand); color: #0b2008; }
.btn--sm { min-height: 34px; padding: 7px 16px; font-size: var(--fs-sm); }
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-group--center { justify-content: center; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-base); }
.link-more .icon { width: 0.9em; height: 0.9em; }

/* ==========================================================================
   4. Header — thanh mảnh, nền mờ
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.site-logo, .custom-logo-link { display: flex; align-items: center; flex: none; text-decoration: none; }
.site-logo img, .custom-logo-link img { height: 44px; width: auto; }
.site-logo span { font-weight: 700; color: var(--c-brand); font-size: 1.15rem; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 18px; height: 1.5px; background: var(--c-text); position: relative; transition: transform 0.2s; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-open .nav-toggle__bar { background: transparent; }
.nav-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
.primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; padding: 12px 32px 40px; overflow-y: auto; transform: translateY(-110%); opacity: 0; transition: transform 0.3s, opacity 0.3s; }
.nav-open .primary-nav { transform: none; opacity: 1; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; padding: 10px 0; color: var(--c-text); font-size: 1.5rem; font-weight: 600; letter-spacing: var(--ls-tight); text-decoration: none; }
.primary-nav .sub-menu a, .primary-nav .children a { padding: 6px 0 6px 12px; font-size: 1rem; font-weight: 400; color: var(--c-text-muted); }
.primary-nav .current-menu-item > a, .primary-nav a:hover { color: var(--c-primary); text-decoration: none; }
.header-cta { display: none; }

/* Ô tìm sản phẩm in */
.header-search { position: relative; flex: 1 1 auto; max-width: 260px; margin-left: auto; }
.header-search__icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; }
.header-search__input { width: 100%; height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--c-border); border-radius: 980px; background: var(--c-bg-alt); color: var(--c-text); font: inherit; font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.header-search__input::placeholder { color: var(--c-text-muted); }
.header-search__input:focus { outline: none; background: #fff; border-color: var(--c-brand); box-shadow: 0 0 0 4px rgba(94, 187, 70, 0.18); }
.header-search__input::-webkit-search-cancel-button { cursor: pointer; }
.header-search__list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 280px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 18px 40px rgba(16, 48, 12, 0.14); z-index: 60; max-height: 70vh; overflow-y: auto; }
.header-search__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 10px; color: var(--c-text); text-decoration: none; font-size: 15px; font-weight: 500; }
.header-search__list a span { flex: none; font-size: 13px; font-weight: 400; color: var(--c-primary); }
.header-search__list a:hover, .header-search__list .is-active a { background: var(--c-bg-alt); }
.header-search__list .is-empty { padding: 10px 14px; font-size: 14px; color: var(--c-text-muted); }

/* ==========================================================================
   5. Hero — nền đen, chữ canh giữa, ảnh lớn
   ========================================================================== */
.hero { padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); background: radial-gradient(120% 80% at 50% 0%, var(--c-bg-dark-2), var(--c-bg-dark) 60%); color: var(--c-text-invert); text-align: center; overflow: hidden; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.9rem; font-size: var(--fs-lg); font-weight: 600; color: var(--c-brand); }
.hero h1 { max-width: 920px; margin-inline: auto; color: #fff; }
.hero__tagline { margin: 0 auto 0.4rem; font-size: var(--fs-tagline); line-height: 1.25; color: #fff; }
.hero__lead { max-width: 640px; margin: 0 auto 1.6rem; font-size: var(--fs-base); color: var(--c-text-soft); }
.hero__media { position: relative; max-width: 940px; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; padding-inline: var(--gutter); }
.hero__media img { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
/* Bộ 3 ảnh xưởng: giữa lớn và nhô cao, hai bên thấp hơn; mobile: ảnh giữa trên, 2 ảnh dưới */
.hero__trio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1240px; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; padding: 0 var(--gutter) clamp(2rem, 4vw, 4rem); }
.hero__shot { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.hero__shot:hover img { transform: scale(1.04); }
.hero__shot--1 { grid-column: 1 / -1; order: -1; aspect-ratio: 4 / 3; }
.hero__shot--0, .hero__shot--2 { aspect-ratio: 4 / 3; }
.hero__shot--0 img { object-position: 60% 50%; }
.hero__shot--2 img { object-position: 70% 50%; }
@media (min-width: 768px) {
	.hero__trio { grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: start; }
	.hero__shot--1 { grid-column: auto; order: 0; aspect-ratio: 4 / 4.6; }
	.hero__shot--0, .hero__shot--2 { aspect-ratio: 4 / 4.4; margin-top: clamp(40px, 7vw, 110px); }
}
/* --- Hiệu ứng đầu trang (JS thêm .hero-anim; không JS / giảm chuyển động → tĩnh) --- */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: 50%; top: -20vmax; margin-left: -35vmax; border-radius: 50%; background: radial-gradient(circle, rgba(94, 187, 70, 0.22), transparent 62%); pointer-events: none; }
.hero-anim .hero::before { animation: isg-glow 14s ease-in-out infinite alternate; }
@keyframes isg-glow { 0% { transform: translate(-18%, 0) scale(0.9); } 50% { transform: translate(12%, 8%) scale(1.1); } 100% { transform: translate(20%, -6%) scale(0.95); } }
.hero-anim .hero__eyebrow, .hero-anim .hero__lead, .hero-anim .hero .btn-group { animation: isg-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-anim .hero__eyebrow { animation-delay: 0.05s; letter-spacing: 0.02em; }
.hero-anim .hero__lead { animation-delay: 1.15s; }
.hero-anim .hero .btn-group { animation-delay: 1.3s; }
.hero .w { display: inline-block; }
.hero-anim .hero h1 .w { animation: isg-word 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.18s + var(--i) * 0.07s); }
.hero-anim .hero__tagline .w { animation: isg-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.85s + var(--i) * 0.16s); }
.hero__tagline .w:nth-child(2) { color: var(--c-brand); }
@keyframes isg-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes isg-word { from { opacity: 0; transform: translateY(0.55em) rotate(4deg); filter: blur(10px); } }
@keyframes isg-pop { from { opacity: 0; transform: translateY(14px) scale(0.85); } }
/* Ảnh: hai bên trượt vào nghiêng, giữa nổi lên; xong thì bồng bềnh lệch nhịp */
.hero__shot { translate: var(--px, 0) var(--py, 0); transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-anim .hero__shot--0 { animation: isg-in-l 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both, isg-float 7s ease-in-out 2.2s infinite; }
.hero-anim .hero__shot--1 { animation: isg-in-up 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both, isg-float 8s ease-in-out 2s infinite reverse; }
.hero-anim .hero__shot--2 { animation: isg-in-r 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both, isg-float 7.5s ease-in-out 2.35s infinite; }
@keyframes isg-in-l { from { opacity: 0; transform: translate(-60px, 50px) rotate(-7deg) scale(0.9); } }
@keyframes isg-in-r { from { opacity: 0; transform: translate(60px, 50px) rotate(7deg) scale(0.9); } }
@keyframes isg-in-up { from { opacity: 0; transform: translateY(90px) scale(0.88); } }
@keyframes isg-float { 0%, 100% { transform: none; } 50% { transform: translateY(-12px); } }
.hero-anim .hero__shot img { animation: isg-zoom 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards; }
@keyframes isg-zoom { from { transform: scale(1.25); } }
.hero__media::after { content: ""; position: absolute; inset: auto var(--gutter) 0; height: 40%; background: linear-gradient(transparent, var(--c-bg-dark)); pointer-events: none; }

/* Sân khấu sản phẩm (khối toàn màn hình) */
.stage { padding-top: var(--space-section); text-align: center; overflow: hidden; }
.stage h2 { margin-bottom: 0.15em; }
.stage__tagline { margin: 0 auto 0.4rem; font-size: var(--fs-tagline); line-height: 1.25; }
.stage__price { margin: 0 auto 1.4rem; color: var(--c-text-muted); }
.section--dark .stage__price { color: var(--c-text-soft); }
.stage__media { max-width: 760px; margin: 2.5rem auto 0; }
.stage__media img { width: 100%; border-radius: var(--radius-lg); }
/* 4 sản phẩm bán chạy: hàng nút + lưới ảnh (mobile 2 cột, desktop 4 cột) */
.stage:has(.stage__grid) { padding-bottom: var(--space-section); }
.stage__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 1.4rem; }
.stage__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 1240px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; text-align: left; }
.stage__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: #fff; color: var(--c-text); text-decoration: none; box-shadow: 0 14px 34px rgba(16, 48, 12, 0.08); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s; }
.stage__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.stage__item:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(16, 48, 12, 0.16); }
.stage__item:hover img { transform: scale(1.05); }
.stage__cap { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.stage__cap strong { font-size: var(--fs-base, 1rem); font-weight: 600; }
.stage__cap span { font-size: var(--fs-sm); color: var(--c-primary); }
@media (min-width: 900px) { .stage__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* ==========================================================================
   6. Lưới ô lớn (tile) + thẻ
   ========================================================================== */
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 520px; padding: 48px 24px 0; background: var(--c-bg-alt); color: var(--c-text); text-align: center; overflow: hidden; }
.tile--dark { background: linear-gradient(180deg, var(--c-bg-dark-2), var(--c-bg-dark)); color: var(--c-text-invert); }
.tile h3 { margin-bottom: 0.15em; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.tile__tagline { margin: 0 0 0.2rem; font-size: var(--fs-lg); line-height: 1.3; }
.tile__price { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.tile--dark .tile__price { color: var(--c-text-soft); }
.tile .btn-group { gap: 10px; }
.tile__media { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 440px; margin-top: 20px; }
.tile__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }

.card { display: flex; flex-direction: column; background: var(--c-bg); border-radius: var(--radius); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.section--alt .card, .card--on-alt { background: #fff; }
.section:not(.section--alt) .card { background: var(--c-bg-alt); }
.card:hover { transform: scale(1.015); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4 / 3; background: var(--c-bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.card__title { margin-bottom: 0.35em; font-size: 1.3rem; letter-spacing: var(--ls-tight); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__text { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.card__meta { margin-top: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); }

/* Hàng thẻ cuộn ngang */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 24px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }

/* Dải thẻ chạy xoay vòng (toàn bề ngang, mờ dần hai mép) */
.marquee { --mq-w: 200px; --mq-gap: 16px; overflow: hidden; padding: 4px 0 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--mq-gap); width: max-content; animation: isg-marquee calc(var(--marquee-n) * 3.6s) linear infinite; }
.marquee__track > * { flex: none; width: var(--mq-w); }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes isg-marquee { to { transform: translate3d(calc(-50% - var(--mq-gap) / 2), 0, 0); } }
@media (min-width: 768px) { .marquee { --mq-w: 250px; --mq-gap: 20px; } }
.scroller > * { scroll-snap-align: start; }
.mini { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; color: var(--c-text); text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; }
.mini:hover { transform: scale(1.02); box-shadow: var(--shadow); text-decoration: none; }
.mini img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.mini__body { padding: 16px 20px 20px; }
.mini__title { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: var(--ls-tight); }
.mini__price { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ==========================================================================
   7. Số liệu, lý do, quy trình, đánh giá, đối tác
   ========================================================================== */
.stats { display: grid; gap: 40px; grid-template-columns: 1fr; text-align: center; }
.stat__num { display: block; font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--c-brand); }
.stat__label { display: block; margin-top: 10px; font-size: var(--fs-lg); color: var(--c-text-soft); }

.feature { padding: 32px 28px; border-radius: var(--radius); background: var(--c-bg-alt); }
.section--alt .feature { background: #fff; }
.feature__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: rgba(94, 187, 70, 0.14); color: var(--c-primary); font-size: 1.5rem; }
.feature h3 { margin-bottom: 0.35em; font-size: 1.3rem; }
.feature p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.55; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { counter-increment: step; position: relative; padding: 28px; border-radius: var(--radius); background: var(--c-bg-alt); }
.steps li::before { content: counter(step); display: block; margin-bottom: 14px; font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--c-brand); }
.steps h3 { margin-bottom: 0.3em; font-size: 1.2rem; }
.steps p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

.quote { display: flex; flex-direction: column; margin: 0; padding: 32px 28px; border-radius: var(--radius); background: #fff; }
.quote__stars { display: flex; gap: 2px; margin-bottom: 16px; color: #f5a623; }
.quote__stars .icon { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.quote blockquote { flex: 1; margin: 0 0 24px; font-size: 1.1rem; line-height: 1.5; letter-spacing: var(--ls-tight); }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote__name { display: block; font-weight: 600; }
.quote__role { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }

.partners img { max-width: 900px; width: 100%; margin-inline: auto; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.partners img:hover { filter: none; opacity: 1; }

.factory { display: grid; gap: 16px; grid-template-columns: 1fr; }
.factory figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; }
.factory img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.factory figcaption { padding: 18px 22px 22px; }
.factory strong { display: block; font-weight: 600; letter-spacing: var(--ls-tight); }
.factory span { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Bảng giá */
.pricing { position: relative; display: flex; flex-direction: column; padding: 32px 28px; background: var(--c-bg-alt); border-radius: var(--radius); }
.pricing--featured { background: var(--c-bg-dark); color: var(--c-text-invert); }
.pricing__tag { align-self: flex-start; margin-bottom: 12px; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--c-brand); color: #0b2008; font-size: var(--fs-xs); font-weight: 600; }
.pricing__name { margin-bottom: 0.2rem; font-size: 1.4rem; }
.pricing__price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--c-primary); }
.pricing--featured .pricing__price { color: var(--c-brand); }
.pricing__items { margin: 1rem 0 1.5rem; padding: 0; list-style: none; font-size: var(--fs-sm); }
.pricing__items li { padding: 8px 0 8px 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position: relative; }
.pricing--featured .pricing__items li { border-color: rgba(255, 255, 255, 0.12); }
.pricing__items li::before { content: "✓"; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }
.pricing .btn { margin-top: auto; align-self: flex-start; }

/* FAQ + album */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 22px 0; border: 0; background: none; text-align: left; font-weight: 600; font-size: 1.15rem; letter-spacing: var(--ls-tight); color: inherit; cursor: pointer; }
.faq__q::after { content: "+"; flex: none; font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--c-text-muted); transition: transform 0.25s; }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 22px; color: var(--c-text-muted); }
.faq__a[hidden] { display: none; }
.gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.gallery a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery a:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.92); }
.lightbox img { max-height: 90vh; width: auto; }
.lightbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; font-size: 1.5rem; cursor: pointer; }

/* ==========================================================================
   8. Form
   ========================================================================== */
.form { display: grid; gap: 14px; padding: 28px; background: #fff; color: var(--c-text); border-radius: var(--radius); }
.section:not(.section--alt) .form { background: var(--c-bg-alt); }
.form__row { display: grid; gap: 14px; }
.form label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; color: var(--c-text); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 4px rgba(46, 139, 30, 0.15); }
.form .btn { width: 100%; }
.form__hp { position: absolute; left: -9999px; }
.form__note { margin: 0; font-size: var(--fs-xs); color: var(--c-text-soft); text-align: center; }
.notice { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 4px; }
.notice--ok { background: #e7f6e3; color: #1f6b14; }
.notice--err { background: #fdecec; color: #9b1c1c; }
.contact-list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.section--dark .contact-list li { border-color: rgba(255, 255, 255, 0.14); }
.contact-list small { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.contact-list a { color: inherit; font-weight: 600; }

/* ==========================================================================
   9. Trang con, bài viết
   ========================================================================== */
.page-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: var(--c-bg-alt); text-align: center; }
.page-hero h1 { max-width: 900px; margin-inline: auto; }
.page-hero .section__lead { margin-bottom: 1.4rem; }
.page-hero__media { max-width: 560px; margin: 2rem auto 0; }
.page-hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(16, 48, 12, 0.12); }
.page-hero__price { margin: 0 0 1.4rem; font-size: var(--fs-lg); font-weight: 600; color: var(--c-primary); }
.breadcrumb { font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: 14px; }
.breadcrumb a { color: inherit; }
.entry { max-width: 760px; margin-inline: auto; font-size: 1.0625rem; line-height: 1.65; }
/* Canh đều đoạn văn dài cho cân đối; dòng cuối canh trái; ô bảng/chú thích ảnh giữ canh trái. */
.entry p, .entry li { text-align: justify; text-align-last: left; }
.entry td p, .entry th p, .entry figcaption { text-align: left; }
.entry img { border-radius: var(--radius-sm); }
.entry h2 { margin-top: 1.8em; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.entry h3 { margin-top: 1.4em; font-size: 1.3rem; }
.entry blockquote { margin: 1.5em 0; padding: 16px 22px; border-left: 3px solid var(--c-brand); background: var(--c-bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.entry table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.entry th, .entry td { padding: 12px 14px; border-bottom: 1px solid var(--c-border); text-align: left; }
.entry th { background: var(--c-bg-alt); font-weight: 600; }
.entry ul li::marker { color: var(--c-brand); }
.layout-aside { display: grid; gap: 40px; }
.aside-box { padding: 28px; border-radius: var(--radius); background: var(--c-bg-alt); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 2.5rem; }
.pagination .page-numbers { padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none; color: var(--c-text); }
.pagination .current { background: var(--c-primary); color: #fff; }

/* ==========================================================================
   10. CTA + Footer
   ========================================================================== */
.cta-band { padding-block: var(--space-section); background: var(--c-bg-dark); color: var(--c-text-invert); text-align: center; }
.cta-band h2 { margin-bottom: 0.2em; }
.cta-band p { font-size: var(--fs-tagline); color: var(--c-text-soft); }
.cta-band .btn-group { justify-content: center; }
.cta-band .btn--ghost { border-color: var(--c-brand); color: var(--c-brand); }
.site-footer { padding-top: 28px; background: var(--c-bg-alt); color: var(--c-text-muted); font-size: var(--fs-xs); line-height: 1.6; }
.site-footer a { color: var(--c-text-muted); }
.site-footer a:hover { color: var(--c-text); }
.site-footer__note { padding-bottom: 18px; border-bottom: 1px solid var(--c-border); }
.site-footer__cols { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; padding-block: 24px; }
.site-footer h3 { margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: var(--c-text); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer__logo img { height: 40px; width: auto; margin-bottom: 12px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 16px 96px; border-top: 1px solid var(--c-border); }

/* ==========================================================================
   11. Nút liên hệ nổi — mobile: thanh dưới đáy; desktop: cột nút tròn góc phải
   ========================================================================== */
.float-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid rgba(0, 0, 0, 0.08); padding: 8px; gap: 8px; }
.float-contact__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: none; }
.float-contact__btn:hover { color: #fff; text-decoration: none; }
.float-contact__btn svg { width: 20px; height: 20px; fill: currentColor; }
.float-contact__phone { background: var(--c-primary); }
.float-contact__zalo { background: #0068ff; }
.float-contact__mess { background: #a033ff; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (min-width: 600px) {
	.gallery { grid-template-columns: repeat(3, 1fr); }
	.form__row { grid-template-columns: 1fr 1fr; }
	.scroller { grid-auto-columns: minmax(240px, 40%); }
	.stats { grid-template-columns: repeat(3, 1fr); }
	.factory { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	:root { --gutter: 32px; }
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tiles { grid-template-columns: repeat(2, 1fr); }
	.tile { min-height: 600px; }
	.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
	.site-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.gallery { grid-template-columns: repeat(4, 1fr); }
	.scroller { grid-auto-columns: minmax(240px, calc((100% - 64px) / 5)); margin-inline: 0; padding-inline: 0; }
	.factory { grid-template-columns: repeat(4, 1fr); }
	.steps { grid-template-columns: repeat(4, 1fr); }
	.tile { min-height: 680px; padding-top: 56px; }
	.layout-aside { grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: stretch; }
	.layout-aside .entry { margin: 0; max-width: none; }
	.aside-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
	.float-contact { left: auto; right: 24px; bottom: 24px; grid-auto-flow: row; gap: 12px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.float-contact__btn { width: 54px; height: 54px; min-height: 0; border-radius: 50%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
	.float-contact__btn span { display: none; }
	.site-footer__bottom { padding-bottom: 20px; }
}
/* Thanh menu desktop: cao gấp đôi (104px), logo 68px, chữ tự to theo màn hình tới 26px (gấp đôi 13px).
   Dưới 1200px vẫn dùng nút ☰ để 9 mục menu không tràn. */
@media (min-width: 1200px) {
	:root { --header-h: 104px; }
	.site-header .container { max-width: 1680px; }
	.site-logo img, .custom-logo-link img { height: 68px; }
	.nav-toggle { display: none; }
	.primary-nav { position: static; transform: none; opacity: 1; padding: 0; overflow: visible; background: none; }
	.primary-nav > div > ul, .primary-nav > ul { display: flex; gap: 0; }
	.primary-nav a { padding: 10px clamp(5px, 0.55vw, 12px); font-size: clamp(14px, 1.3vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: rgba(21, 33, 15, 0.85); }
	.primary-nav li { position: relative; }
	.primary-nav .sub-menu, .primary-nav .children { position: absolute; top: 100%; left: -8px; min-width: 260px; max-height: 70vh; overflow-y: auto; padding: 12px 0; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s; }
	.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu,
	.primary-nav li:hover > .children, .primary-nav li:focus-within > .children { opacity: 1; visibility: visible; transform: none; }
	.primary-nav .sub-menu a, .primary-nav .children a { padding: 8px 22px; font-size: clamp(15px, 1vw, 18px); font-weight: 400; color: var(--c-text); white-space: nowrap; }
	.primary-nav a { white-space: nowrap; }
	/* Menu nằm giữa logo và ô tìm kiếm, các mục giãn đều — không chừa khoảng trống lớn */
	.primary-nav { flex: 1 1 auto; }
	.primary-nav > div > ul, .primary-nav > ul { justify-content: space-evenly; }
	.header-search { flex: 0 1 clamp(220px, 17vw, 340px); max-width: none; margin-left: 0; }
	.header-search__input { height: 56px; padding-left: 48px; font-size: clamp(15px, 1.05vw, 18px); }
	.header-search__icon { left: 18px; width: 20px; height: 20px; }
	.header-cta { display: inline-flex; min-height: 56px; padding: 14px 30px; font-size: clamp(16px, 1.3vw, 22px); }
}
/* Hiệu ứng xuất hiện khi cuộn (JS thêm .js-reveal / .rv / .is-in) */
.js-reveal .rv {
	opacity: 0;
	transform: translate3d(0, 48px, 0) scale(0.985);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--rv-d, 0ms);
}
.js-reveal .rv.is-in { opacity: 1; transform: none; }
/* Ảnh lớn: phóng nhẹ rồi thu về — cảm giác "mở màn" */
.js-reveal .rv img, .js-reveal img.rv {
	transform: scale(1.08);
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--rv-d, 0ms);
}
.js-reveal .rv.is-in img, .js-reveal img.rv.is-in { transform: none; }
.js-reveal .tile.rv { overflow: hidden; }
.stat__num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}