/* ==========================================================================
   VINAAGRIGROUP ELEMENTOR v2.0
   Quy tắc:
   - Mọi màu, font, cỡ chữ, khoảng cách, bo góc, kích thước khai báo MỘT LẦN trong :root.
     Phần còn lại của file chỉ gọi var().
   - Bố cục chỉ dùng flexbox. Không CSS grid, không position absolute/fixed
     (chỉ thanh điều hướng dùng position: sticky).
   - Không dùng ::before / ::after cho chi tiết hiển thị: chấm, đường kẻ, icon là phần tử thật.
   - Ngoại lệ duy nhất: giá trị điểm ngắt trong @media (CSS không cho dùng var() ở đó).
   ========================================================================== */

:root {
	/* ---------- Màu ---------- */
	--color-dark: #022c22;
	--color-dark-2: #03352a;
	--color-dark-3: #0a4435;
	--color-card: #1d453b;
	--color-card-2: #34594f;
	--color-hero-card: rgba(36, 92, 76, 0.8);
	--color-lime: #c5f53f;
	--color-lime-glow: rgba(197, 245, 63, 0.28);
	--color-green: #1b8a4f;
	--color-blue: #0d6efd;
	--color-orange: #f97316;
	--color-ink: #06231c;
	--color-muted: #5f6b66;
	--color-line: #e4e8e6;
	--color-soft: #f4f8f2;
	--color-white: #ffffff;
	--color-step-tile: #f5faf5;
	--color-step-tile-alt: #eff5ff;
	--color-step-card-alt: #f6f9ff;
	--color-step-rail: #17684a;
	--color-step-ring: #dfe9e4;
	--color-notice: #f3f8e6;
	--color-notice-line: #9bc53d;
	--color-error: #b42318;
	--color-error-soft: #fef3f2;
	--color-on-dark-muted: rgba(255, 255, 255, 0.75);
	--color-on-dark-line: rgba(255, 255, 255, 0.12);
	--color-on-dark-soft: rgba(255, 255, 255, 0.1);
	--color-on-dark-border: rgba(255, 255, 255, 0.35);
	--color-on-lime-line: rgba(2, 44, 34, 0.2);
	--color-texture-dot: rgba(255, 255, 255, 0.045);
	--color-overlay-top: rgba(2, 44, 34, 0.28);
	--color-overlay-mid: rgba(2, 44, 34, 0.36);
	--color-overlay-bottom: rgba(2, 44, 34, 0.62);
	--color-overlay-soft: rgba(2, 44, 34, 0.15);
	--color-overlay-strong: rgba(2, 44, 34, 0.35);
	--color-header-scrolled: rgba(2, 44, 34, 0.97);
	--color-shadow: rgba(0, 0, 0, 0.25);
	--color-shadow-card: rgba(2, 44, 34, 0.12);
	--color-play-ring: rgba(255, 255, 255, 0.28);
	--color-video-bg: #000000;

	/* ---------- Font ---------- */
	--font-body: "Be Vietnam Pro", "Arial";
	--font-heading: "Be Vietnam Pro", "Arial";

	/* ---------- Cỡ chữ ---------- */
	--fs-body: clamp(16px, 0.55vw + 9.5px, 19px);
	--fs-xs: clamp(13px, 0.8vw, 15px);
	--fs-sm: clamp(14px, 0.9vw, 16px);
	--fs-md: clamp(15px, 0.95vw, 18px);
	--fs-lg: clamp(17px, 1.15vw, 22px);
	--fs-h4: clamp(19px, 1.3vw, 24px);
	--fs-h3: clamp(19px, 1.4vw, 26px);
	--fs-h3-lg: clamp(21px, 1.5vw, 28px);
	--fs-quote: clamp(17px, 1.25vw, 23px);
	--fs-h2: clamp(30px, 3.2vw, 60px);
	--fs-page-title: clamp(32px, 4.2vw, 72px);
	--fs-hero: clamp(30px, 4.2vw, 84px);
	--fs-hero-stat: clamp(28px, 2.4vw, 46px);
	--fs-brand: clamp(22px, 1.7vw, 30px);
	--fs-stat: clamp(36px, 3.4vw, 64px);
	--fs-step-number: clamp(22px, 1.6vw, 30px);
	--fs-badge-text: 17px;

	/* ---------- Độ đậm, giãn dòng, giãn chữ ---------- */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;
	--lh-tight: 1.1;
	--lh-heading: 1.18;
	--lh-snug: 1.3;
	--lh-body: 1.65;
	--lh-loose: 1.75;
	--ls-tight: -0.02em;
	--ls-heading: -0.012em;
	--ls-wide: 0.12em;

	/* ---------- Khoảng cách ---------- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: clamp(14px, 1.1vw, 20px);
	--space-md: clamp(18px, 1.6vw, 30px);
	--space-lg: clamp(24px, 2.4vw, 46px);
	--space-xl: clamp(32px, 3.6vw, 70px);
	--space-2xl: clamp(40px, 5vw, 96px);
	--space-section: clamp(56px, 5.4vw, 104px);
	--space-page: clamp(20px, 6.9vw, 260px);
	--space-header: clamp(18px, 2.6vw, 50px);
	--space-frame: clamp(10px, 1.05vw, 20px);
	--space-button-start: clamp(20px, 1.5vw, 28px);
	--space-button-end: 7px;

	/* ---------- Bo góc ---------- */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: clamp(24px, 2vw, 40px);
	--radius-xl: clamp(28px, 2.6vw, 52px);
	--radius-pill: 999px;
	--radius-round: 50%;

	/* ---------- Viền, nét ---------- */
	--border-thin: 1px;
	--border-medium: 2px;
	--border-thick: 3px;
	--border-ring: 4px;
	--icon-stroke: 2;

	/* ---------- Kích thước ---------- */
	--size-full: 100%;
	--size-glyph: 46%;
	--size-glyph-lg: 52%;
	--size-icon: clamp(48px, 3.6vw, 70px);
	--size-icon-sm: clamp(40px, 2.5vw, 48px);
	--size-icon-xs: 36px;
	--size-check: 1.3em;
	--size-star: clamp(16px, 1.1vw, 22px);
	--size-logo: clamp(42px, 3.3vw, 60px);
	--size-logo-img: clamp(54px, 4.6vw, 80px);
	--size-logo-img-footer: clamp(72px, 6vw, 104px);
	--shadow-logo: 0 4px 14px var(--color-shadow);
	--size-avatar: clamp(50px, 3.4vw, 66px);
	--size-play: clamp(68px, 4.6vw, 88px);
	--size-play-ring: 12px;
	--size-badge: clamp(150px, 11.6vw, 224px);
	--size-step-tile: clamp(96px, 6.5vw, 124px);
	--size-step-number: clamp(54px, 3.5vw, 66px);
	--size-step-card: clamp(250px, 21vw, 420px);
	--size-review-card: clamp(280px, 27vw, 520px);
	--size-category-image: clamp(110px, 8.6vw, 165px);
	--size-hero-min: 100svh;
	--size-header: clamp(76px, 6.4vw, 124px);
	--size-header-pull: calc(var(--size-header) * -1);
	--size-hero-card-min: clamp(170px, 10.5vw, 210px);
	--size-hero-stat: clamp(190px, 13.8vw, 265px);
	--size-tab-list: clamp(240px, 21vw, 374px);
	--size-tab-min: clamp(60px, 5vw, 96px);
	--size-project-image: clamp(260px, 30vw, 525px);
	--size-split-min: clamp(320px, 40vw, 760px);
	--size-why-image-min: 260px;
	--size-why-image-max: 460px;
	--size-text-max: 820px;
	--size-content-max: 1100px;
	--size-form-max: 720px;
	--size-textarea: 160px;
	--size-col-xs: 200px;
	--size-col-sm: 260px;
	--size-col-md: 320px;
	--size-col-lg: 420px;
	--size-faq-offset: clamp(40px, 5.6vw, 107px);
	--size-burger-line: 20px;
	--size-burger: 48px;
	--size-nav-underline: 2px;

	/* ---------- Tỉ lệ khung ảnh ---------- */
	--ratio-card: 1.34 / 1;
	--ratio-feature: 2.35 / 1;
	--ratio-why: 1.3 / 1;
	--ratio-project: 1.2 / 1;
	--ratio-service: 1 / 1.05;
	--ratio-faq: 1 / 1.12;
	--ratio-video: 16 / 9;

	/* ---------- Chuyển động, lớp, bóng ---------- */
	--speed-fast: 0.2s;
	--speed: 0.35s;
	--speed-slow: 0.7s;
	--speed-spin: 22s;
	--speed-pulse: 2.4s;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--lift: -3px;
	--nudge: 3px;
	--reveal-shift: 26px;
	--rotate-open: 45deg;
	--rotate-full: 360deg;
	--opacity-soft: 0.85;
	--opacity-hidden: 0;
	--opacity-full: 1;
	--z-header: 50;
	--shadow-header: 0 10px 30px var(--color-shadow);
	--shadow-card: 0 18px 40px var(--color-shadow-card);
	--shadow-button: 0 0 0 var(--border-thick) var(--color-lime-glow);
	--shadow-play: 0 0 0 var(--size-play-ring) var(--color-play-ring);
	--admin-offset: var(--wp-admin--admin-bar--height, 0px);
	--texture-size: 26px;
	--stop-mid: 60%;
	--stop-mask: 80%;
	--size-hero-media: 45%;
	--zoom: 1.06;
	--delay: 0s;
	--color-error-line: rgba(180, 35, 24, 0.25);
	--fs-h2-sm: clamp(24px, 2.2vw, 40px);
	--fs-value-number: clamp(48px, 4.4vw, 84px);
	--fs-quote-mark: clamp(80px, 8vw, 150px);
	--lh-mark: 0.8;
	--size-meter: 10px;
	--size-post-thumb: clamp(88px, 7vw, 120px);
	--size-chip-thumb: 56px;
	--size-timeline-dot: clamp(44px, 3.2vw, 56px);
	--ratio-solution: 4 / 3;
	--ratio-feature-post: 16 / 10;
	--ratio-square: 1 / 1;
	--size-product-media: clamp(130px, 11vw, 180px);
	--size-product-name: clamp(150px, 13vw, 210px);
	--size-product-buy: clamp(190px, 15vw, 240px);
	--size-bullet: 6px;
	--size-qty: 88px;
	--size-cart-icon: 22px;
	--size-cart-count: 22px;
	--fs-cell: clamp(14px, 0.85vw, 16px);
	--bullet-offset: 0.6em;
}

/* ==========================================================================
   Nền tảng
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-ink);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: var(--size-full); height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 var(--space-xs); font-family: var(--font-heading); line-height: var(--lh-heading); font-weight: var(--fw-bold); text-wrap: balance; }
p { margin: 0 0 var(--space-sm); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--border-thick) solid var(--color-green); outline-offset: var(--border-thick); }
.section-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .split :focus-visible { outline-color: var(--color-lime); }
.screen-reader-text { clip: rect(0 0 0 0); clip-path: inset(50%); height: var(--border-thin); width: var(--border-thin); overflow: hidden; white-space: nowrap; margin: calc(var(--border-thin) * -1); padding: 0; border: 0; }
.skip-link { display: flex; width: max-content; margin: 0; padding: 0; height: 0; overflow: hidden; }
.skip-link:focus { height: auto; padding: var(--space-xs) var(--space-md); background: var(--color-lime); color: var(--color-dark); font-weight: var(--fw-bold); }

.site-main { display: flex; flex-direction: column; overflow-x: clip; }
.container { width: var(--size-full); padding-inline: var(--space-page); }
.section { padding-block: var(--space-section); }
.section-dark { background: var(--color-dark); color: var(--color-white); }
.section-texture { background-image: radial-gradient(var(--color-texture-dot) var(--border-thin), transparent var(--border-thin)); background-size: var(--texture-size) var(--texture-size); }
.text-muted { color: var(--color-muted); }
.section-dark .text-muted, .split .text-muted, .site-footer .text-muted { color: var(--color-on-dark-muted); }

/* ---------- Tiêu đề khối ---------- */
.eyebrow { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.eyebrow-dot { width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-round); background: var(--color-lime); flex: none; }
.section:not(.section-dark) .eyebrow-dot, .about .eyebrow-dot { background: var(--color-green); }
.heading-section { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); margin-bottom: var(--space-sm); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-xl); }
.section-head-main { flex: 1 1 var(--size-col-lg); }
.section-head-main .heading-section { margin-bottom: 0; }
.section-head-text { flex: 1 1 var(--size-col-md); margin: 0; }

/* ---------- Icon SVG ---------- */
.icon { width: var(--size-full); height: var(--size-full); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-fill { fill: currentColor; stroke: none; }
.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-round); background: var(--color-lime); color: var(--color-dark); flex: none; }
.icon-badge .icon { width: var(--size-glyph); height: var(--size-glyph); }
.check-icon { display: inline-flex; width: var(--size-check); height: var(--size-check); color: var(--color-lime); flex: none; }
.section:not(.section-dark) .check-icon { color: var(--color-green); }

/* ---------- Nút ---------- */
.button-primary, .button-dark { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-button-end) var(--space-button-end) var(--space-button-end) var(--space-button-start); border: 0; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--fs-md); white-space: nowrap; transition: transform var(--speed-fast), box-shadow var(--speed-fast); }
.button-primary { background: var(--color-lime); color: var(--color-dark); box-shadow: var(--shadow-button); }
.button-dark { background: var(--color-dark); color: var(--color-white); }
.button-primary:hover, .button-dark:hover { transform: translateY(var(--lift)); }
.button-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-sm); height: var(--size-icon-sm); border-radius: var(--radius-round); background: var(--color-lime); color: var(--color-dark); flex: none; transition: transform var(--speed); }
.button-icon .icon { width: var(--size-glyph); height: var(--size-glyph); }
.button-primary .button-icon { background: var(--color-dark); color: var(--color-white); }
.button-primary:hover .button-icon, .button-dark:hover .button-icon, .box-link:hover .box-link-icon, .services-bar:hover .button-icon { transform: translateX(var(--nudge)); }
.button-wide { display: flex; justify-content: space-between; width: var(--size-full); }

/* ---------- Hiệu ứng xuất hiện ---------- */
.js .reveal { opacity: var(--opacity-hidden); transform: translateY(var(--reveal-shift)); transition: opacity var(--speed-slow) ease var(--delay), transform var(--speed-slow) ease var(--delay), background var(--speed), color var(--speed); }
.js .reveal.is-in, .elementor-editor-active .reveal { opacity: var(--opacity-full); transform: none; }

/* ==========================================================================
   Header (component dùng chung, nằm trong template-parts/site-header.php)
   ========================================================================== */
.site-header { position: sticky; top: var(--admin-offset); z-index: var(--z-header); background: var(--color-dark); color: var(--color-white); transition: box-shadow var(--speed), background var(--speed); }
.site-header.is-scrolled { background: var(--color-header-scrolled); box-shadow: var(--shadow-header); }
/* Trang mở đầu bằng Hero/Banner: header trong suốt nằm đè lên ảnh, kéo nội dung lên bằng margin âm (không dùng absolute). */
.has-overlay-header .site-header { margin-bottom: var(--size-header-pull); background: transparent; }
.has-overlay-header .site-header.is-scrolled, .has-overlay-header .site-header.is-open { background: var(--color-header-scrolled); }
.has-overlay-header .hero, .has-overlay-header .page-banner { padding-top: var(--size-header); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--size-header); padding: 0 var(--space-header); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.site-brand { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-brand); font-weight: var(--fw-black); color: var(--color-white); white-space: nowrap; flex: none; }
.site-brand .custom-logo { display: block; height: var(--size-logo-img); max-height: none; width: auto; }
.site-footer .site-brand .custom-logo { height: var(--size-logo-img-footer); }
.custom-logo-link { display: flex; align-items: center; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-logo); }
.logo-mark { width: var(--size-logo); height: var(--size-logo); flex: none; }
.logo-mark-lime { fill: var(--color-lime); }
.logo-mark-white { fill: var(--color-white); }
.logo-word { color: var(--color-white); }
.logo-period { color: var(--color-lime); }

.site-nav { display: flex; align-items: center; gap: var(--space-md); flex: 1 1 auto; justify-content: space-between; min-width: 0; }
.menu { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.menu a { display: block; padding-block: var(--space-2xs); color: var(--color-white); white-space: nowrap; border-bottom: var(--size-nav-underline) solid transparent; transition: color var(--speed-fast), border-color var(--speed-fast); }
.menu a:hover, .menu .current-menu-item > a, .menu .current_page_item > a { color: var(--color-lime); border-bottom-color: var(--color-lime); }
.menu .sub-menu { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-md); flex: none; }
.call-box { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.call-box-text { display: flex; flex-direction: column; line-height: var(--lh-snug); }
.call-box-label { font-size: var(--fs-sm); opacity: var(--opacity-soft); }
.call-box-number { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.site-header .call-box .icon-badge { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-3xs); width: var(--size-burger); height: var(--size-burger); padding: 0; border-radius: var(--radius-round); border: var(--border-thin) solid var(--color-on-dark-border); background: var(--color-on-dark-soft); }
.nav-toggle-line { display: block; width: var(--size-burger-line); height: var(--border-medium); border-radius: var(--border-medium); background: var(--color-white); transition: opacity var(--speed-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) { opacity: var(--opacity-hidden); }

/* ==========================================================================
   Banner đầu trang trong
   ========================================================================== */
.page-banner { margin: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(to bottom, var(--color-dark), var(--color-dark-3)); color: var(--color-white); }
.page-banner-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-2xl) var(--space-header); text-align: center; }
.page-banner-title { margin: 0; font-size: var(--fs-page-title); font-weight: var(--fw-black); color: var(--color-lime); }
.page-banner-text { margin: 0; max-width: var(--size-text-max); color: var(--color-on-dark-muted); }
.breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
.breadcrumb a:hover { color: var(--color-lime); }
.breadcrumb-separator { color: var(--color-lime); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { display: flex; flex-direction: column; justify-content: space-between; min-height: var(--size-hero-min); margin: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; color: var(--color-white); background-color: var(--color-dark); background-image: linear-gradient(to bottom, var(--color-overlay-top), var(--color-overlay-mid) var(--stop-mid), var(--color-overlay-bottom)), var(--hero-image, none); background-size: cover; background-position: center top; padding-inline: var(--space-header); }
.hero-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: var(--space-lg); }
.hero-title { max-width: var(--size-full); margin: 0 0 var(--space-sm); color: var(--color-lime); text-transform: uppercase; font-weight: var(--fw-black); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.hero-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: var(--fs-md); }
.check-item { display: flex; align-items: center; gap: var(--space-2xs); }
.hero-cards { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md); }
.card-hero { flex: 1 1 var(--size-col-lg); display: flex; min-height: var(--size-hero-card-min); background: var(--color-hero-card); backdrop-filter: blur(var(--space-2xs)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.card-hero-media { flex: 0 0 var(--size-hero-media); }
.card-hero-media img { width: var(--size-full); height: var(--size-full); object-fit: cover; }
.card-hero-body { flex: 1; padding: var(--space-sm) var(--space-md); }
.card-hero-body .icon-badge { width: var(--size-icon-sm); height: var(--size-icon-sm); margin-bottom: var(--space-xs); }
.card-hero-title { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }
.card-hero-text { margin: 0; font-size: var(--fs-sm); opacity: var(--opacity-soft); }
.hero-stats { flex: 0 1 var(--size-hero-stat); min-height: var(--size-hero-card-min); display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); padding: var(--space-sm); background: var(--color-lime); color: var(--color-dark); border-radius: var(--radius-lg) var(--radius-lg) 0 0; text-align: center; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat + .hero-stat { border-top: var(--border-thin) solid var(--color-on-lime-line); padding-top: var(--space-xs); }
.hero-stat .stat-number { font-size: var(--fs-hero-stat); }
.hero-stat .stat-label { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.stat-number { display: block; font-size: var(--fs-stat); line-height: var(--lh-tight); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* ==========================================================================
   Giới thiệu
   ========================================================================== */
.about { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }
.about-media { flex: 1 1 var(--size-col-lg); }
.about-media img { width: var(--size-full); -webkit-mask-image: linear-gradient(var(--color-dark) var(--stop-mask), transparent); mask-image: linear-gradient(var(--color-dark) var(--stop-mask), transparent); }
.about-body { flex: 1 1 var(--size-col-lg); }
.box-links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block: var(--space-lg); }
.box-link { flex: 1 1 var(--size-col-xs); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-white); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); transition: transform var(--speed-fast); }
.box-link:hover { transform: translateY(var(--lift)); }
.box-link-icon { display: inline-flex; width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-lime); flex: none; transition: transform var(--speed); }
.about .call-box-label { color: var(--color-muted); opacity: var(--opacity-full); }

/* ==========================================================================
   Thẻ tính năng (nền tối)
   ========================================================================== */
.card-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.card-feature { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-card); color: var(--color-white); }
.card-feature.is-active { background: var(--color-lime); color: var(--color-ink); }
.card-feature-title { font-size: var(--fs-h3-lg); }
.card-feature-text { flex: 1; opacity: var(--opacity-soft); margin-bottom: var(--space-md); }
.card-feature-media { border-radius: var(--radius-md); overflow: hidden; }
.card-feature-media img { width: var(--size-full); aspect-ratio: var(--ratio-feature); object-fit: cover; }

/* ==========================================================================
   Vì sao chọn chúng tôi
   ========================================================================== */
.why-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md); margin-block: var(--space-xl); }
.why-media { flex: 1 1 var(--size-col-sm); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0; overflow: hidden; }
.why-media + .why-text + .why-media { border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg); }
.why-media img { width: var(--size-full); aspect-ratio: var(--ratio-why); object-fit: cover; }
.why-text { flex: 1 1 var(--size-col-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.why-rows { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-md); }
.why-rows-media { flex: 1 1 var(--size-col-sm); min-height: var(--size-why-image-min); max-height: var(--size-why-image-max); border-radius: var(--radius-lg); overflow: hidden; }
.why-rows-media img { width: var(--size-full); height: var(--size-full); object-fit: cover; }
.why-list { flex: 2 1 var(--size-col-lg); display: flex; flex-direction: column; }
.why-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--border-thin) solid var(--color-line); }
.why-item:last-child { border-bottom: 0; }
.why-item-title { flex: 1 1 var(--size-col-sm); display: flex; align-items: center; gap: var(--space-sm); }
.why-item-title h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.why-item-text { flex: 1 1 var(--size-col-sm); margin: 0; }

/* ==========================================================================
   Chia đôi + video
   ========================================================================== */
.split { display: flex; flex-wrap: wrap; background: var(--color-dark); color: var(--color-white); }
.split-content { flex: 1 1 var(--size-col-lg); padding: var(--space-2xl) var(--space-header); }
.split-content > p { max-width: var(--size-text-max); }
.icon-columns { display: flex; flex-wrap: wrap; gap: var(--space-md) 0; margin-block: var(--space-xl) var(--space-lg); padding-bottom: var(--space-lg); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.icon-column { flex: 1 1 var(--size-col-xs); display: flex; flex-direction: column; gap: var(--space-sm); padding-inline: var(--space-md); border-left: var(--border-thin) solid var(--color-on-dark-line); }
.icon-column:first-child { padding-left: 0; border-left: 0; }
.icon-column-title { font-size: var(--fs-h4); margin-bottom: var(--space-3xs); white-space: nowrap; }
.icon-column-text { margin: 0; font-size: var(--fs-sm); opacity: var(--opacity-soft); }
.experience { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.experience > p { flex: 1 1 var(--size-col-sm); margin: 0; }
.experience-badge { width: var(--size-badge); height: var(--size-badge); flex: none; }
.badge-ring { fill: var(--color-lime); }
.badge-core { fill: var(--color-dark); }
.badge-text { fill: var(--color-dark); font-size: var(--fs-badge-text); font-weight: var(--fw-black); font-family: var(--font-body); }
.badge-spin { transform-origin: center; transform-box: view-box; animation: vinaagrigroup-spin var(--speed-spin) linear infinite; }
@keyframes vinaagrigroup-spin { to { transform: rotate(var(--rotate-full)); } }
.split-media { flex: 1 1 var(--size-col-lg); min-height: var(--size-split-min); display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom, var(--color-overlay-soft), var(--color-overlay-strong)), var(--split-image, none); background-size: cover; background-position: center; }
.play-button { display: inline-flex; align-items: center; justify-content: center; width: var(--size-play); height: var(--size-play); border: 0; border-radius: var(--radius-round); background: var(--color-lime); color: var(--color-dark); box-shadow: var(--shadow-play); animation: vinaagrigroup-pulse var(--speed-pulse) ease-out infinite; }
.play-button .icon { width: var(--size-glyph); height: var(--size-glyph); }
@keyframes vinaagrigroup-pulse { from { box-shadow: 0 0 0 0 var(--color-lime-glow), var(--shadow-play); } to { box-shadow: 0 0 0 var(--reveal-shift) transparent, var(--shadow-play); } }
.split-media.is-playing { background: var(--color-video-bg); align-items: stretch; }
.video-frame { width: var(--size-full); min-height: var(--size-split-min); border: 0; }

/* ==========================================================================
   Dự án (tab)
   ========================================================================== */
.projects { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); }
.project-tabs { flex: 0 1 var(--size-tab-list); display: flex; flex-direction: column; gap: var(--space-sm); }
.tab-project { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--size-tab-min); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-button-start); border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-line); background: var(--color-white); color: var(--color-ink); font-size: var(--fs-lg); font-weight: var(--fw-semibold); text-align: left; transition: background var(--speed), color var(--speed), border-color var(--speed); }
.tab-project:hover { border-color: var(--color-dark); }
.tab-project .button-icon { background: transparent; color: transparent; }
.tab-project.is-active { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.tab-project.is-active .button-icon { background: var(--color-lime); color: var(--color-dark); }
.project-panels { flex: 1 1 var(--size-col-lg); }
.card-project { display: none; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md); }
.card-project.is-active { display: flex; }
.card-project-media { flex: 1 1 var(--size-project-image); max-width: var(--size-project-image); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0; overflow: hidden; }
.card-project-media img { width: var(--size-full); aspect-ratio: var(--ratio-project); object-fit: cover; }
.card-project-body { flex: 1 1 var(--size-col-sm); }
.card-project-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

/* ==========================================================================
   Thống kê
   ========================================================================== */
.stats { padding-bottom: var(--space-section); }
.stats-row { display: flex; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-section); border-top: var(--border-thin) solid var(--color-line); }
.card-stat { flex: 1 1 var(--size-col-xs); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); }
.card-stat .stat-label { display: block; font-weight: var(--fw-regular); color: var(--color-muted); line-height: var(--lh-snug); margin-top: var(--space-2xs); }
.card-stat.is-highlight { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.card-stat.is-highlight .stat-label { color: var(--color-white); }

/* ==========================================================================
   Quy trình + danh mục
   ========================================================================== */
.steps { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.steps-nav { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; padding: 0; border: 0; border-radius: var(--radius-round); background: var(--color-white); color: var(--color-ink); box-shadow: var(--shadow-header); transition: background var(--speed-fast); }
.steps-nav .icon { width: var(--size-glyph); height: var(--size-glyph); }
.steps-nav:hover { background: var(--color-lime); }
.steps-track { flex: 1; display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.steps-track::-webkit-scrollbar { display: none; }
.card-step { flex: 0 0 var(--size-step-card); display: flex; flex-direction: column; scroll-snap-align: start; }
.card-step-media { height: var(--size-step-tile); border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; background: var(--color-step-tile); }
.card-step:nth-child(even) .card-step-media { background: var(--color-step-tile-alt); }
.card-step-media img { width: var(--size-full); height: var(--size-full); object-fit: contain; }
.step-marker { display: flex; align-items: center; }
.step-rail { flex: 1; height: var(--border-medium); background: var(--color-step-rail); }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: var(--size-step-number); height: var(--size-step-number); flex: none; border-radius: var(--radius-round); border: var(--border-ring) solid var(--color-step-ring); background: var(--color-green); color: var(--color-white); font-size: var(--fs-step-number); font-weight: var(--fw-bold); }
.card-step:nth-child(4n + 2) .step-number { background: var(--color-blue); }
.card-step:nth-child(4n + 3) .step-number { background: var(--color-orange); }
.card-step-body { flex: 1; padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); }
.card-step:nth-child(even) .card-step-body { background: var(--color-step-card-alt); }
.card-step-title { font-size: var(--fs-h3); }
.card-step-text { margin: 0; color: var(--color-muted); }
.categories { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-xl); background: var(--color-white); color: var(--color-ink); }
.card-category { flex: 1 1 var(--size-col-sm); display: flex; flex-direction: column; align-items: center; text-align: center; }
.card-category img { height: var(--size-category-image); width: auto; margin-bottom: var(--space-md); object-fit: contain; transition: transform var(--speed); }
.card-category:hover img { transform: translateY(var(--lift)); }
.card-category-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); transition: color var(--speed-fast); }
.card-category:hover .card-category-title { color: var(--color-green); }
.card-category-text { margin: 0; color: var(--color-muted); }

/* ==========================================================================
   Dịch vụ (những gì chúng tôi làm)
   ========================================================================== */
.services { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md) var(--space-lg); }
.services-intro { flex: 1 1 var(--size-col-md); }
.services-media { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; }
.services-image { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.services-image img { width: var(--size-full); aspect-ratio: var(--ratio-service); object-fit: cover; }
.services-bar { display: flex; align-items: stretch; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.services-bar-icon { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md); background: var(--color-dark); color: var(--color-lime); }
.services-bar-icon .icon { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.services-bar-text { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); background: var(--color-lime); color: var(--color-dark); }
.services-bar-text .button-icon { background: var(--color-dark); color: var(--color-white); }
.services-list { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.service-item-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.service-item-title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.service-item-text { margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); margin-top: var(--space-xl); }
.faq-media { flex: 1 1 var(--size-col-lg); display: flex; align-items: flex-start; gap: var(--space-md); }
.faq-image { flex: 1; border-radius: var(--radius-lg); overflow: hidden; }
.faq-image + .faq-image { margin-top: var(--size-faq-offset); }
.faq-image img { width: var(--size-full); aspect-ratio: var(--ratio-faq); object-fit: cover; }
.faq-list { flex: 1 1 var(--size-col-lg); display: flex; flex-direction: column; }
.faq-item { border-bottom: var(--border-thin) solid var(--color-line); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); width: var(--size-full); padding: var(--space-md) 0; border: 0; background: none; color: var(--color-ink); font-size: var(--fs-h4); font-weight: var(--fw-bold); text-align: left; line-height: var(--lh-snug); }
.faq-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-xs); height: var(--size-icon-xs); flex: none; border-radius: var(--radius-round); background: var(--color-soft); transition: transform var(--speed), background var(--speed); }
.faq-toggle .icon { width: var(--size-glyph-lg); height: var(--size-glyph-lg); }
.faq-item.is-open .faq-toggle { transform: rotate(var(--rotate-open)); background: var(--color-lime); }
.faq-answer { display: none; padding-bottom: var(--space-md); }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p { margin: 0; }

/* ==========================================================================
   Đánh giá khách hàng
   ========================================================================== */
.card-review { flex: 0 0 var(--size-review-card); scroll-snap-align: start; display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--radius-xl); background: linear-gradient(to bottom, var(--color-card), var(--color-card-2)); color: var(--color-white); }
.rating { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-sm); color: var(--color-lime); }
.rating .icon { width: var(--size-star); height: var(--size-star); }
.card-review-text { flex: 1; font-size: var(--fs-quote); line-height: var(--lh-loose); padding-bottom: var(--space-md); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.review-author { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-md); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--size-avatar); height: var(--size-avatar); flex: none; border-radius: var(--radius-round); background: var(--color-lime); color: var(--color-dark); font-weight: var(--fw-black); font-size: var(--fs-lg); overflow: hidden; }
.avatar img { width: var(--size-full); height: var(--size-full); object-fit: cover; }
.review-name { display: block; font-size: var(--fs-md); }
.review-role { font-size: var(--fs-sm); opacity: var(--opacity-soft); }

/* ==========================================================================
   Tin tức
   ========================================================================== */
.news-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.card-news { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.card-news-media { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.card-news-media img { width: var(--size-full); aspect-ratio: var(--ratio-card); object-fit: cover; transition: transform var(--speed-slow); }
.card-news:hover .card-news-media img { transform: scale(var(--zoom)); }
.card-news-date { padding-inline: var(--space-xs); padding-top: var(--space-xs); font-size: var(--fs-sm); color: var(--color-muted); }
.card-news-title { margin: 0; padding-inline: var(--space-xs); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); transition: color var(--speed-fast); }
.card-news:hover .card-news-title { color: var(--color-green); }
.pagination, .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xl); }
.pagination .page-numbers { display: inline-flex; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-line); }
.pagination .page-numbers.current { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.notice-box { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-notice); border: var(--border-thin) dashed var(--color-notice-line); }
.notice-box.is-error { background: var(--color-error-soft); border-color: var(--color-error); color: var(--color-error); }

/* ==========================================================================
   Kêu gọi hành động
   ========================================================================== */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-xl); background: var(--color-lime); color: var(--color-dark); }
.cta-text { flex: 1 1 var(--size-col-lg); }
.cta-title { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); }
.cta-text p { margin: 0; }
.cta .button-dark { flex: none; }

/* ==========================================================================
   Liên hệ
   ========================================================================== */
.contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); }
.contact-info { flex: 1 1 var(--size-col-md); }
.contact-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.contact-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); }
.contact-card-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.contact-card-label { font-size: var(--fs-sm); color: var(--color-muted); }
.contact-card-value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.contact-form { flex: 1 1 var(--size-col-lg); display: flex; flex-direction: column; gap: var(--space-md); max-width: var(--size-form-max); padding: var(--space-xl); border-radius: var(--radius-xl); background: var(--color-soft); }
.form-title { font-size: var(--fs-h3-lg); margin: 0; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.form-field { flex: 1 1 var(--size-col-xs); display: flex; flex-direction: column; gap: var(--space-2xs); }
.form-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.form-input { width: var(--size-full); padding: var(--space-xs) var(--space-sm); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); }
.form-input:focus { border-color: var(--color-green); outline: none; }
textarea.form-input { min-height: var(--size-textarea); resize: vertical; }
.form-trap { display: none; }
.contact-form .button-primary { align-self: flex-start; }

/* ==========================================================================
   Footer (component dùng chung, nằm trong template-parts/site-footer.php)
   ========================================================================== */
.site-footer { padding-top: var(--space-section); padding-bottom: var(--space-md); background: linear-gradient(to bottom, var(--color-dark), var(--color-dark-2)); color: var(--color-white); }
.footer-cta { padding-bottom: var(--space-xl); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.footer-cta-title { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); }
.footer-cta-text { margin: 0; font-size: var(--fs-lg); }
.footer-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); padding-block: var(--space-xl); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.footer-about { flex: 1.2 1 var(--size-col-md); }
.footer-about-text { margin-block: var(--space-md); max-width: var(--size-text-max); line-height: var(--lh-loose); }
.footer-links { flex: 1 1 var(--size-col-xs); }
.footer-contact { flex: 1 1 var(--size-col-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-on-dark-soft); }
.footer-heading { font-size: var(--fs-h4); margin-bottom: var(--space-md); }
.footer-menu { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.footer-menu a { transition: color var(--speed-fast), padding var(--speed-fast); }
.footer-menu a:hover { color: var(--color-lime); padding-left: var(--space-2xs); }
.footer-contact-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.footer-contact-item { display: flex; align-items: center; gap: var(--space-sm); overflow-wrap: anywhere; }
.footer-contact-icon { display: inline-flex; width: var(--size-check); height: var(--size-check); color: var(--color-lime); flex: none; }
.footer-contact-item a:hover { color: var(--color-lime); }
.socials { display: flex; gap: var(--space-sm); }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-sm); height: var(--size-icon-sm); border-radius: var(--radius-round); border: var(--border-thin) solid var(--color-on-dark-border); transition: background var(--speed-fast), color var(--speed-fast), border-color var(--speed-fast); }
.social-link .icon { width: var(--size-glyph); height: var(--size-glyph); }
.social-link:hover { background: var(--color-lime); color: var(--color-dark); border-color: var(--color-lime); }
.footer-bottom { padding-top: var(--space-md); text-align: center; font-size: var(--fs-sm); }

/* ==========================================================================
   Nội dung thường (trang/bài không dựng bằng Elementor)
   ========================================================================== */
.content-area { padding-block: var(--space-section); }
.page-heading { padding-top: var(--space-xl); }
.page-heading .breadcrumb { justify-content: flex-start; color: var(--color-muted); }
.page-heading .breadcrumb-separator { color: var(--color-green); }
.page-heading-title { margin: var(--space-xs) 0 0; font-size: var(--fs-page-title); font-weight: var(--fw-black); color: var(--color-dark); }
.page-heading-text { margin: var(--space-xs) 0 0; max-width: var(--size-text-max); }
.page-heading + .content-area, .page-heading + .section { padding-top: var(--space-lg); }
.entry-content { max-width: var(--size-content-max); }
.entry-content > * + * { margin-top: var(--space-sm); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content a { color: var(--color-green); text-decoration: underline; }
.entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--fs-sm); }
.entry-thumbnail { margin-bottom: var(--space-lg); border-radius: var(--radius-lg); overflow: hidden; max-width: var(--size-content-max); }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); max-width: var(--size-content-max); }
.search-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-width: var(--size-form-max); }
.search-form label { flex: 1 1 var(--size-col-xs); }
.search-form .search-field { width: var(--size-full); padding: var(--space-xs) var(--space-sm); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-pill); }
.search-form .search-submit { padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-white); font-weight: var(--fw-bold); }
.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.comments-area { margin-top: var(--space-xl); max-width: var(--size-content-max); }

/* ==========================================================================
   Responsive (giá trị điểm ngắt viết trực tiếp vì @media không nhận var())
   ========================================================================== */
@media (max-width: 1440px) {
	.header-actions .call-box-text { display: none; }
}
@media (max-width: 1180px) {
	.nav-toggle { display: flex; }
	.site-nav { display: none; flex: 1 1 var(--size-full); flex-direction: column; align-items: stretch; gap: var(--space-md); padding-block: var(--space-sm) var(--space-md); }
	.site-nav.is-open { display: flex; }
	.menu { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--fs-h4); }
	.menu li { border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
	.menu a { padding-block: var(--space-sm); border-bottom: 0; }
	.menu .sub-menu { display: flex; flex-direction: column; padding-left: var(--space-md); list-style: none; }
	.header-actions { flex-wrap: wrap; }
	.header-actions .call-box-text { display: flex; }
}
@media (max-width: 760px) {
	.card-hero { flex-direction: column; }
	.card-hero-media { flex-basis: auto; }
	.hero-stats { flex: 1 1 var(--size-full); }
	.card-step { flex-basis: var(--size-col-sm); }
	.steps-nav { display: none; }
	.faq-image + .faq-image { margin-top: var(--space-xl); }
	.icon-column { flex-direction: row; padding-inline: 0; border-left: 0; }
	.button-primary, .button-dark { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js .reveal { opacity: var(--opacity-full); transform: none; }
}

/* ==========================================================================
   Bảng sản phẩm (widget "Vina Agri Group: Bảng sản phẩm", dữ liệu từ WooCommerce)
   ========================================================================== */
.product-table { display: flex; flex-direction: column; border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.product-head, .product-row { display: flex; align-items: stretch; }
.product-head { background: var(--color-dark); color: var(--color-white); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.product-row { border-top: var(--border-thin) solid var(--color-line); }
.product-row:nth-child(odd) { background: var(--color-soft); }
.product-th, .product-media, .product-name, .product-desc, .product-buy { padding: var(--space-md) var(--space-sm); border-left: var(--border-thin) solid var(--color-line); }
.product-head .product-th { border-left-color: var(--color-on-dark-line); display: flex; align-items: center; }
.product-th:first-child, .product-row > :first-child { border-left: 0; }
.product-media { flex: 0 0 var(--size-product-media); display: flex; align-items: flex-start; justify-content: center; }
.product-media img { width: var(--size-full); height: auto; object-fit: contain; }
.product-name { flex: 0 0 var(--size-product-name); display: flex; flex-direction: column; gap: var(--space-2xs); }
.product-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--color-dark); transition: color var(--speed-fast); }
.product-title:hover { color: var(--color-green); }
.product-spec { font-size: var(--fs-sm); color: var(--color-muted); }
.product-desc { flex: 1 1 0; min-width: 0; font-size: var(--fs-cell); line-height: var(--lh-body); }
.product-lines { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.product-line { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.product-bullet { flex: none; width: var(--size-bullet); height: var(--size-bullet); margin-top: var(--bullet-offset); border-radius: var(--radius-round); background: var(--color-green); }
.product-empty { margin: 0; color: var(--color-muted); }
.product-buy { flex: 0 0 var(--size-product-buy); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xs); }
.product-price { font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--color-green); }
.product-qty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
.product-qty .form-input { width: var(--size-qty); text-align: center; }
.product-buy .button-primary, .product-buy .button-dark { justify-content: space-between; white-space: normal; font-size: var(--fs-sm); }
.product-buy .add_to_cart_button.loading { opacity: var(--opacity-soft); }
.product-buy .added_to_cart, .product-call { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-green); text-decoration: underline; text-align: center; }
.product-label { display: none; margin-bottom: var(--space-3xs); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-muted); }

/* ---------- Giỏ hàng trên header ---------- */
.cart-link { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-on-dark-border); color: var(--color-white); transition: background var(--speed-fast); }
.cart-link:hover { background: var(--color-on-dark-soft); }
.cart-link-icon { display: inline-flex; width: var(--size-cart-icon); height: var(--size-cart-icon); }
.cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-cart-count); height: var(--size-cart-count); padding-inline: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-lime); color: var(--color-dark); font-size: var(--fs-xs); font-weight: var(--fw-black); }

/* ---------- Đồng bộ màu sắc trang Cửa hàng, Giỏ hàng, Thanh toán ---------- */
.woocommerce-cart .entry-content, .woocommerce-checkout .entry-content, .woocommerce-account .entry-content { max-width: none; }
.wc-block-components-button:not(.is-link), .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border: 0; border-radius: var(--radius-pill); background: var(--color-dark); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-bold); text-decoration: none; }
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--color-lime); color: var(--color-dark); }
.wc-block-components-button:not(.is-link):hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--color-green); color: var(--color-white); }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__select, .woocommerce form .input-text, .woocommerce .quantity .qty { border-radius: var(--radius-md); font-family: var(--font-body); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .wc-block-components-product-price { color: var(--color-green); font-weight: var(--fw-bold); }
.woocommerce div.product .product_title { font-size: var(--fs-h2); color: var(--color-dark); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--color-green); }
.shop-area .entry-content { max-width: var(--size-content-max); }

@media (max-width: 1100px) {
	.product-head { display: none; }
	.product-row { flex-wrap: wrap; }
	.product-name { flex: 1 1 var(--size-col-xs); }
	.product-desc, .product-buy { flex: 1 1 var(--size-full); border-left: 0; border-top: var(--border-thin) solid var(--color-line); }
	.product-buy { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.product-buy .product-label { flex: 1 1 var(--size-full); }
	.product-label { display: block; }
	.product-name .product-label { display: none; }
}

/* ==========================================================================
   Công cụ tính liều lượng
   ========================================================================== */
.calculator { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-md); }
.card-calc { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-xl); background: var(--color-soft); }
.card-calc-title { margin: 0; font-size: var(--fs-h4); color: var(--color-dark); }
.card-calc select.form-input { appearance: auto; }
.calc-result { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-white); }
.calc-result-label { font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
.calc-value { font-size: var(--fs-h3-lg); font-weight: var(--fw-black); color: var(--color-lime); line-height: var(--lh-snug); margin-bottom: var(--space-2xs); }
.calc-formula { padding-top: var(--space-xs); border-top: var(--border-thin) solid var(--color-on-dark-line); font-size: var(--fs-xs); color: var(--color-on-dark-muted); }
@media (max-width: 760px) {
	.icon-column-title { white-space: normal; }
}
.contact-form > .form-field, .card-calc > .form-field { flex: none; }
.card-calc .form-row { gap: var(--space-sm); }

/* ==========================================================================
   Khối riêng cho trang Giới thiệu, Giải pháp, Tin tức
   ========================================================================== */
.section-soft { background: var(--color-soft); }

/* ---------- Mở đầu trang ---------- */
.intro { padding-block: var(--space-xl) var(--space-lg); background: linear-gradient(to bottom, var(--color-soft), var(--color-white)); }
.intro.is-dark { padding-bottom: var(--space-xl); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background-color: var(--color-dark); background-image: radial-gradient(var(--color-texture-dot) var(--border-thin), transparent var(--border-thin)); background-size: var(--texture-size) var(--texture-size); color: var(--color-white); }
.intro.is-dark .intro-title { color: var(--color-white); }
.intro.is-dark .intro-lead { color: var(--color-on-dark-muted); }
.intro.is-dark .fact-card { background: var(--color-card); }
.intro.is-dark .chip { border-color: var(--color-on-dark-line); background: var(--color-on-dark-soft); color: var(--color-white); }
.intro.is-dark .chip-dot { background: var(--color-lime); }
.intro-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); }
.intro-main { flex: 1.4 1 var(--size-col-lg); }
.intro-title { margin: 0 0 var(--space-md); font-size: var(--fs-page-title); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--color-dark); }
.intro-lead { max-width: var(--size-text-max); margin-bottom: var(--space-lg); font-size: var(--fs-lg); color: var(--color-muted); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-dark); font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: background var(--speed-fast), border-color var(--speed-fast); }
a.chip:hover { background: var(--color-lime); border-color: var(--color-lime); }
.chip-dot { width: var(--space-2xs); height: var(--space-2xs); flex: none; border-radius: var(--radius-round); background: var(--color-green); }
.fact-card { flex: 1 1 var(--size-col-md); padding: var(--space-lg); border-radius: var(--radius-xl); background: var(--color-dark); color: var(--color-white); }
.fact-card-title { margin-bottom: var(--space-md); font-size: var(--fs-h4); color: var(--color-lime); }
.fact-list { display: flex; flex-direction: column; margin: 0; }
.fact-row { display: flex; flex-direction: column; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: var(--border-thin) solid var(--color-on-dark-line); }
.fact-row:first-child { padding-top: 0; border-top: 0; }
.fact-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-on-dark-muted); }
.fact-value { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.fact-value a:hover { color: var(--color-lime); }

/* ---------- Giá trị cốt lõi ---------- */
.value-list { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.card-value { flex: 1 1 var(--size-col-xs); display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); border-top: var(--border-ring) solid var(--color-lime); background: var(--color-soft); }
.value-number { font-size: var(--fs-value-number); font-weight: var(--fw-black); line-height: var(--lh-tight); color: transparent; -webkit-text-stroke: var(--border-medium) var(--color-green); }
.card-value-title { margin: 0; font-size: var(--fs-h3); }
.card-value p { margin: 0; }

/* ---------- Hành trình ---------- */
.journey { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); }
.journey-head { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.journey-head p { margin: 0; }
.journey-media { margin-top: var(--space-sm); border-radius: var(--radius-xl); overflow: hidden; }
.journey-media img { width: var(--size-full); aspect-ratio: var(--ratio-solution); object-fit: cover; }
.timeline { flex: 1.3 1 var(--size-col-lg); display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline-item { display: flex; gap: var(--space-md); }
.timeline-marker { display: flex; flex-direction: column; align-items: center; flex: none; }
.timeline-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--size-timeline-dot); height: var(--size-timeline-dot); flex: none; border-radius: var(--radius-round); background: var(--color-lime); color: var(--color-dark); font-size: var(--fs-lg); font-weight: var(--fw-black); }
.timeline-line { flex: 1; width: var(--border-medium); margin-block: var(--space-2xs); background: var(--color-on-dark-line); }
.timeline-body { padding-bottom: var(--space-lg); }
.timeline-title { margin: var(--space-xs) 0 var(--space-2xs); font-size: var(--fs-h3); }
.timeline-body p { margin: 0; }

/* ---------- Dinh dưỡng ---------- */
.nutrient-groups { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.card-nutrient { flex: 1 1 var(--size-col-xs); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-white); }
.card-nutrient-title { margin: 0; padding-bottom: var(--space-sm); border-bottom: var(--border-thin) solid var(--color-line); font-size: var(--fs-h4); }
.nutrient-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.nutrient-item { display: flex; align-items: flex-start; gap: var(--space-sm); }
.element-chip { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-icon-sm); height: var(--size-icon-sm); flex: none; padding-inline: var(--space-3xs); border-radius: var(--radius-md); background: var(--color-lime); color: var(--color-dark); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.nutrient-text { display: flex; flex-direction: column; gap: var(--space-3xs); line-height: var(--lh-snug); }
.nutrient-name { font-size: var(--fs-md); }
.nutrient-role { font-size: var(--fs-sm); color: var(--color-muted); }

/* ---------- Dải trích dẫn ---------- */
.quote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-xl); background-color: var(--color-dark); color: var(--color-white); }
.quote-mark { flex: none; font-size: var(--fs-quote-mark); font-weight: var(--fw-black); line-height: var(--lh-mark); color: var(--color-lime); }
.quote-body { flex: 1 1 var(--size-col-lg); }
.quote-text { margin: 0 0 var(--space-xs); font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.quote-sub { margin: 0; color: var(--color-on-dark-muted); }
.quote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.quote-link { color: var(--color-lime); font-weight: var(--fw-bold); text-decoration: underline; }

/* ---------- Giải pháp theo vấn đề ---------- */
.solution-list { display: flex; flex-direction: column; gap: var(--space-2xl); }
.solution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); scroll-margin-top: var(--size-header); }
.solution:nth-child(even) { flex-direction: row-reverse; }
.solution-media { flex: 1 1 var(--size-col-lg); border-radius: var(--radius-xl); overflow: hidden; }
.solution-media img { width: var(--size-full); aspect-ratio: var(--ratio-solution); object-fit: cover; }
.solution-body { flex: 1 1 var(--size-col-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.solution-index { align-self: flex-start; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-lime); color: var(--color-dark); font-size: var(--fs-xs); font-weight: var(--fw-black); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.solution-title { margin: 0; font-size: var(--fs-h2-sm); letter-spacing: var(--ls-heading); color: var(--color-dark); }
.solution-block { display: flex; flex-direction: column; gap: var(--space-xs); }
.solution-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-green); }
.dose-box { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-dark); color: var(--color-white); }
.dose-box .solution-label { color: var(--color-lime); }
.dose-box .product-bullet { background: var(--color-lime); }
.product-chip { display: flex; align-items: center; align-self: flex-start; gap: var(--space-sm); padding: var(--space-3xs) var(--space-md) var(--space-3xs) var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-on-dark-soft); transition: background var(--speed-fast); }
.product-chip:hover { background: var(--color-lime-glow); }
.product-chip-media { display: inline-flex; width: var(--size-chip-thumb); height: var(--size-chip-thumb); flex: none; border-radius: var(--radius-round); overflow: hidden; background: var(--color-white); }
.product-chip-media img { width: var(--size-full); height: var(--size-full); object-fit: contain; }
.product-chip-text { display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.product-chip-text span { color: var(--color-lime); }

/* ---------- Loại đất ---------- */
.soil-list { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.card-soil { flex: 1 1 var(--size-col-sm); display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-xl); background: var(--color-white); }
.card-soil-title { margin: 0; font-size: var(--fs-h3-lg); }
.soil-meter { display: flex; gap: var(--space-3xs); margin-bottom: var(--space-2xs); }
.soil-bar { flex: 1; height: var(--size-meter); border-radius: var(--radius-pill); background: var(--color-line); }
.soil-bar.is-on { background: var(--color-green); }
.soil-result { margin: 0; font-weight: var(--fw-bold); color: var(--color-dark); }

/* ---------- Nên / Không nên ---------- */
.notes { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.card-note { flex: 1 1 var(--size-col-md); padding: var(--space-lg); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-soft); }
.card-note.is-warning { border-color: var(--color-error-line); background: var(--color-error-soft); }
.card-note-title { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); font-size: var(--fs-h4); }
.note-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.note-item { display: flex; align-items: flex-start; gap: var(--space-xs); }
.note-icon { display: inline-flex; width: var(--size-check); height: var(--size-check); flex: none; color: var(--color-green); }
.is-warning .note-icon { color: var(--color-error); }

/* ---------- Tin tức dạng tạp chí ---------- */
.magazine-section { padding-top: var(--space-sm); }
.magazine { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-xl); }
.feature-post { flex: 1.5 1 var(--size-col-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.feature-post-media { display: block; border-radius: var(--radius-xl); overflow: hidden; }
.feature-post-media img { width: var(--size-full); aspect-ratio: var(--ratio-feature-post); object-fit: cover; transition: transform var(--speed-slow); }
.feature-post-media:hover img { transform: scale(var(--zoom)); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); font-size: var(--fs-sm); color: var(--color-muted); }
.feature-post-title { margin: 0; font-size: var(--fs-h2-sm); line-height: var(--lh-heading); }
.feature-post-title a:hover { color: var(--color-green); }
.feature-post p { margin: 0; }
.feature-post .button-dark { align-self: flex-start; }
.post-list { flex: 1 1 var(--size-col-md); display: flex; flex-direction: column; }
.post-list-title { margin: 0; padding-bottom: var(--space-sm); border-bottom: var(--border-ring) solid var(--color-lime); font-size: var(--fs-h4); }
.post-row { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--border-thin) solid var(--color-line); }
.post-row-media { flex: 0 0 var(--size-post-thumb); border-radius: var(--radius-md); overflow: hidden; }
.post-row-media img { width: var(--size-full); aspect-ratio: var(--ratio-square); object-fit: cover; }
.post-row-body { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.post-row-title { font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--color-dark); transition: color var(--speed-fast); }
.post-row:hover .post-row-title { color: var(--color-green); }

/* ---------- Từ điển nhà nông ---------- */
.glossary { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.term { flex: 1 1 var(--size-col-sm); display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); border-left: var(--border-ring) solid var(--color-lime); border-radius: var(--radius-md); background: var(--color-white); }
.term-name { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--color-dark); }
.term-text { margin: 0; color: var(--color-muted); }