/* ============================================================
   Caophantu — Flatsome Child Theme
   Design system ported from the original React/Tailwind site.
   Pure CSS, no runtime dependency.
   ============================================================ */

:root {
  --radius: 1.25rem;

  /* Bảng màu — nông nghiệp hiện đại: xanh rừng + lá non + vàng lúa + teal */
  --emerald-deep: #17633A;
  --emerald: #34A866;
  --leaf: #84CC16;
  --teal: #0EA5A8;
  --gold: #E6BE5A;
  --harvest: #D7A84A;
  --accent-light: #B9F56B;
  --cream: #F3FAF1;
  --ivory: #FFF8E8;
  --sky-soft: #E8F7F4;
  --ink: #1C4B37;

  --background: #FBFEFA;
  --foreground: var(--emerald-deep);

  --card: #FFFFFF;
  --card-foreground: var(--emerald-deep);

  --primary: var(--emerald);
  --primary-foreground: oklch(0.99 0.01 150);
  --secondary: #EAF7EF;
  --secondary-foreground: var(--emerald-deep);
  --muted: #EFF7F1;
  --muted-foreground: #5D7568;
  --accent: var(--gold);
  --accent-foreground: var(--emerald-deep);
  --border: #DCEBE1;
  --input: #D9EADF;
  --ring: var(--gold);

  --grad-primary: var(--emerald-deep);
  --grad-gold: var(--gold);
  --shadow-soft: 0 1px 2px oklch(0.22 0.04 155 / 0.05), 0 14px 32px -24px oklch(0.22 0.04 155 / 0.22);
  --shadow-elegant: 0 18px 42px -30px oklch(0.22 0.04 155 / 0.35);
  --shadow-gold: 0 12px 26px -22px oklch(0.72 0.165 56 / 0.42);
  --shadow-glow: 0 0 0 3px color-mix(in oklch, var(--emerald) 16%, transparent);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;

  /* ---- Design tokens mở rộng (Phase 0) — additive, không đổi giao diện ---- */
  /* Thang spacing đồng nhất (dùng dần khi refactor component) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

  /* Bán kính chuẩn hoá */
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;   /* = --radius hiện tại */
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  /* Thang đổ bóng (alias mở rộng cho hệ shadow hiện có) */
  --shadow-1: var(--shadow-soft);
  --shadow-2: 0 10px 24px -18px oklch(0.22 0.04 155 / 0.28);
  --shadow-3: var(--shadow-elegant);
  --shadow-4: 0 28px 60px -34px oklch(0.30 0.085 152 / 0.36);

  /* Typography fluid (clamp) — áp dụng dần ở Phase 2-3 */
  --fs-display: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 3vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-sm: 0.875rem;

  /* Breakpoint tham chiếu (đọc trong JS qua getComputedStyle nếu cần) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Layout */
  --header-h: 4.5rem;
  --header-h-scrolled: 3.75rem;
  --z-header: 50;
  --z-drawer: 60;
  --z-overlay: 55;
  --z-floating: 45;
}

/* ---------- Reset / base (scoped to our pages) ---------- */
.cph * { box-sizing: border-box; }
.cph {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  font-size: 16px;
}
.cph img { max-width: 100%; display: block; }
.cph a { color: inherit; text-decoration: none; }
.cph h1, .cph h2, .cph h3, .cph h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--emerald-deep);
  margin: 0;
  line-height: 1.1;
}
.cph p { margin: 0; }
.cph ul { margin: 0; padding: 0; list-style: none; }
.cph button { font-family: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }
html { scroll-padding-top: 5.5rem; }

/* ---------- Layout helpers ---------- */
.container-x { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container-x { padding-inline: 2rem; } }
.text-gradient { color: color-mix(in oklch, var(--emerald) 76%, var(--teal)); }
.text-muted { color: var(--muted-foreground); }
.grid-bg {
  background-image: radial-gradient(circle at 1px 1px, oklch(0.28 0.07 162 / 0.1) 1px, transparent 0);
  background-size: 28px 28px;
}

/* ---------- Buttons / chip / card ---------- */
.btn-primary, .btn-gold, .btn-ghost, .btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 1rem; padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 700;
  line-height: 1.25;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), background 0.24s var(--ease-out), color 0.24s var(--ease-out), border-color 0.24s var(--ease-out);
  border: 0; cursor: pointer;
}
.btn-primary { background: var(--emerald-deep); color: #fff; box-shadow: var(--shadow-elegant); }
.btn-primary:hover { background: color-mix(in oklch, var(--emerald-deep) 82%, var(--teal)); transform: translateY(-1px); box-shadow: 0 14px 30px -24px oklch(0.30 0.085 152 / 0.45); color: #fff; }
.btn-gold { background: var(--gold); color: var(--emerald-deep); box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: #D9B04E; transform: translateY(-1px); box-shadow: 0 14px 26px -22px oklch(0.72 0.13 74 / 0.42); color: var(--emerald-deep); }
.btn-ghost { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.btn-ghost:hover { background: var(--secondary); }
.btn-white { background: #fff; color: var(--foreground); }
.btn-icon { width: 1.1em; height: 1.1em; }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--emerald) 40%, transparent);
  background: color-mix(in oklch, var(--emerald) 12%, transparent);
  color: color-mix(in oklch, var(--emerald-deep) 75%, var(--emerald));
  padding: 0.25rem 0.75rem; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35;
}
.chip::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor; opacity: 0.65; flex-shrink: 0; }

.card-surface {
  border-radius: 1.25rem; border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%);
  padding: 2rem; box-shadow: var(--shadow-soft);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out), background 0.28s var(--ease-out);
}
.usp-card:hover, .prod-card:hover, .prod-item:hover, .blog-card:hover, .testi-card:hover, .stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -32px oklch(0.30 0.085 152 / 0.30);
  border-color: color-mix(in oklch, var(--emerald) 22%, transparent);
}

.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.icon-sm { width: 1rem; height: 1rem; }

.value-card,
.cap-card,
.phase-card,
.prod-item,
.blog-card,
.contact-grid .card-surface,
.product-desc {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(20px);
}
.header-inner { display: flex; height: 4.5rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-badge {
  display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center;
  border-radius: 1rem; background: var(--teal); box-shadow: var(--shadow-soft);
}
.brand-badge svg { height: 1.5rem; width: 1.5rem; color: #fff; }
.brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; color: var(--emerald-deep); line-height: 1.08; }
.brand-name span { color: var(--emerald); }
.brand-sub { margin-top: 0.22rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35; color: var(--emerald); }
.brand-logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.site-logo-img, .brand-logo .custom-logo { height: 54px; width: auto; display: block; }
@media (min-width: 768px) { .site-logo-img, .brand-logo .custom-logo { height: 60px; } }
.main-nav { display: none; align-items: center; gap: 0.25rem; }
.main-nav a { border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); transition: color 0.24s var(--ease-out), background 0.24s var(--ease-out); }
.main-nav a:hover { color: var(--foreground); background: color-mix(in oklch, var(--emerald) 8%, transparent); }
.main-nav a.is-active { font-weight: 700; color: var(--emerald-deep); background: color-mix(in oklch, var(--emerald) 12%, transparent); }
.header-cta { display: none; align-items: center; gap: 0.75rem; }
.header-phone { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--emerald-deep); }
.header-phone svg { color: var(--emerald); }
.btn-sm { padding: 0.625rem 1.25rem !important; font-size: 0.75rem !important; }
.menu-toggle { display: inline-flex; padding: 0.55rem; background: color-mix(in oklch, var(--emerald) 7%, transparent); border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent); border-radius: 0.8rem; color: var(--emerald-deep); }
.menu-toggle:hover { background: color-mix(in oklch, var(--emerald) 12%, transparent); }
.mobile-nav { display: block; max-height: 0; opacity: 0; overflow: hidden; border-top: 1px solid transparent; background: color-mix(in oklch, var(--background) 96%, white); transform: translateY(-4px); transition: max-height 0.34s var(--ease-out), opacity 0.24s var(--ease-out), transform 0.34s var(--ease-out), border-color 0.24s var(--ease-out); }
.mobile-nav.open { max-height: 85vh; overflow-y: auto; opacity: 1; border-top-color: var(--border); transform: translateY(0); }
.mobile-nav .inner { display: flex; flex-direction: column; padding-block: 1rem; gap: 0.25rem; }
.mobile-nav a { border-radius: 0.75rem; padding: 0.72rem 0.85rem; font-size: 0.875rem; font-weight: 600; transition: background 0.24s var(--ease-out), color 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
.mobile-nav a:hover { background: var(--secondary); transform: translateX(2px); }
.mobile-nav a.is-active { background: color-mix(in oklch, var(--emerald) 12%, transparent); color: var(--emerald-deep); }
@media (min-width: 1024px) {
  .main-nav, .header-cta { display: flex; }
  .menu-toggle { display: none; }
}

/* ---------- Menu dropdown (PC) ---------- */
.main-nav .nav-item.has-dropdown { position: relative; display: flex; align-items: center; }
.main-nav .nav-top { display: inline-flex; align-items: center; gap: 0.25rem; }
.nav-caret { transition: transform 0.24s var(--ease-out); opacity: 0.7; }
.dropdown {
  position: absolute; top: calc(100% + 0.55rem); left: 0;
  min-width: 14rem; padding: 0.4rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: var(--z-drawer);
}
.dropdown::before {  /* cầu nối hover, tránh mất hover khi rê chuột xuống */
  content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.dropdown a {
  display: block; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground);
  white-space: nowrap; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.dropdown a:hover { background: var(--secondary); color: var(--foreground); }
.dropdown a.is-active { color: var(--emerald-deep); background: color-mix(in oklch, var(--emerald) 12%, transparent); }

/* ---------- Menu accordion (mobile) ---------- */
.m-nav-group { display: flex; flex-direction: column; }
.m-nav-row { display: flex; align-items: center; gap: 0.25rem; }
.m-nav-parent { flex: 1; }
.m-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  background: none; border: 0; color: var(--muted-foreground); border-radius: 0.65rem;
}
.m-nav-toggle:hover { background: var(--secondary); }
.m-nav-toggle svg { transition: transform 0.24s var(--ease-out); }
.m-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-nav-sub {
  display: flex; flex-direction: column;
  max-height: 0; overflow: hidden; margin-left: 0.85rem; padding-left: 0.4rem;
  border-left: 2px solid var(--border);
  transition: max-height 0.3s var(--ease-out);
}
.m-nav-sub.open { max-height: 32rem; }
.m-nav-sub a { font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground); padding: 0.6rem 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  .nav-caret, .dropdown, .m-nav-toggle svg, .m-nav-sub { transition: none; }
}

/* ============================================================
   FOOTER + FLOATING
   ============================================================ */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  color: rgba(255,255,255,0.84);
  background:
    linear-gradient(90deg, rgba(18,84,50,0.97) 0%, rgba(24,105,62,0.92) 52%, rgba(14,82,59,0.96) 100%),
    url("../images/hero-orchard.jpg") center 68% / cover no-repeat;
  border-top: 1px solid color-mix(in oklch, var(--gold) 20%, transparent);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background-image:
    radial-gradient(circle at 14% 0%, color-mix(in oklch, var(--gold) 14%, transparent) 0, transparent 24%),
    radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--teal) 14%, transparent) 0, transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.22));
  pointer-events: none;
}
.site-footer::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -8rem;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent-light) 12%, transparent);
  filter: blur(18px);
  pointer-events: none;
}
.footer-grid { position: relative; z-index: 1; display: grid; gap: 2rem; padding-block: 3.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(16rem, 1.35fr) 0.7fr 1fr 0.9fr; align-items: start; } }
.site-footer .brand-name, .site-footer p { color: #fff; }
.site-footer .brand { align-items: center; gap: 0.7rem; }
.site-footer .site-logo-img, .site-footer .brand-logo .custom-logo { height: 4.25rem; width: auto; flex-shrink: 0; transform: translateY(-1px); filter: drop-shadow(0 10px 18px rgba(0,0,0,0.16)); }
.site-footer .leading-none { line-height: 1.25 !important; }
.site-footer .brand-name { line-height: 1.1; }
.site-footer .brand-sub { margin-top: 0.35rem; max-width: 16rem; color: color-mix(in oklch, var(--accent-light) 86%, white); line-height: 1.45; letter-spacing: 0.14em; }
.footer-col h4 { margin-bottom: 1rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35; color: var(--accent-light); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.875rem; line-height: 1.55; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 0.65rem; font-size: 0.875rem; margin-bottom: 0.75rem; line-height: 1.55; }
.footer-contact svg { color: var(--accent-light); flex-shrink: 0; margin-top: 0.2rem; }
.footer-desc { margin-top: 0.9rem; max-width: 19rem; font-size: 0.875rem; line-height: 1.65; color: rgba(255,255,255,0.82); }
.social-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.1rem; }
.social-btn { display: flex; height: 2.65rem; width: 2.65rem; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.08); transition: 0.2s; }
.social-btn:hover { background: var(--gold); color: var(--emerald-deep); }
.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: 1rem;
  text-align: center;
}
.footer-copy { font-size: 0.75rem; line-height: 1.55; color: rgba(255,255,255,0.66); }

.floating-contact {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.floating-contact a,
.floating-contact .cph-top {
  display: flex;
  height: 2.85rem;
  width: 2.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 12px 24px -20px rgba(0,0,0,0.32);
  transition: transform 0.28s var(--ease-out), background 0.28s var(--ease-out), filter 0.28s var(--ease-out);
}
.floating-contact a:hover,
.floating-contact .cph-top:hover { transform: translateY(-2px); filter: brightness(1.03); }
.fc-zalo { background: #14B8A6; }
.fc-phone { background: var(--harvest); color: var(--emerald-deep) !important; }

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.cph .section { padding-block: 5rem; display: block; }      /* ghi đè .section flex của Flatsome */
.section-sm { padding-block: 4rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.section-head h2, .center-head h2 { font-size: clamp(1.9rem, 1.25rem + 2.3vw, 2.8rem); font-weight: 800; margin-top: 0.75rem; line-height: 1.12; }
.center-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.center-head p { margin-top: 1rem; color: var(--muted-foreground); }
.grid { display: grid; gap: 1.25rem; }
.muted { color: var(--muted-foreground); }
.lead { line-height: 1.7; }
.home-band { position: relative; overflow: hidden; }
.home-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
}
.home-band > .container-x { position: relative; z-index: 1; }
.home-band-mint {
  background:
    radial-gradient(120% 70% at 50% 100%, color-mix(in oklch, var(--leaf) 9%, transparent) 0, transparent 62%),
    linear-gradient(180deg, var(--background) 0%, var(--cream) 50%, var(--background) 100%);
}
.home-band-ivory {
  background:
    radial-gradient(circle at 82% 10%, color-mix(in oklch, var(--gold) 16%, transparent) 0, transparent 30%),
    linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}
.home-band-sky {
  background:
    radial-gradient(circle at 14% 16%, color-mix(in oklch, var(--teal) 13%, transparent) 0, transparent 28%),
    linear-gradient(180deg, #fff 0%, var(--sky-soft) 100%);
}

/* ============================================================
   HOME — HERO BENTO
   ============================================================ */
.hero-section { padding: 2.5rem 1rem; background: var(--cream); }
@media (min-width: 1024px) { .hero-section { padding: 3.5rem 2rem; } }

/* ---------- Hero ảnh full-width ---------- */
.hero-full { position: relative; overflow: hidden; min-height: 72vh; display: flex; align-items: center; isolation: isolate; }
@media (min-width: 1024px) { .hero-full { min-height: 82vh; } }
.hero-full-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 42% 42%, color-mix(in oklch, var(--gold) 24%, transparent) 0, transparent 22%),
    radial-gradient(circle at 78% 20%, color-mix(in oklch, var(--teal) 16%, transparent) 0, transparent 24%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.72;
}
.hero-full-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--emerald-deep) 78%, transparent) 0%, color-mix(in oklch, var(--emerald-deep) 50%, transparent) 54%, color-mix(in oklch, var(--emerald-deep) 16%, transparent) 100%); }
/* Fade đáy hero → tan vào nền section dưới, xoá đường cắt ngang cứng. */
.hero-full::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 55%, transparent) 55%, var(--background) 100%);
  pointer-events: none;
}
.hero-full-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 980px) {
  .hero-full-content { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
}
.hero-copy { max-width: 36rem; }
.hero-full .hero-sub { color: rgba(255,255,255,0.92); }
@keyframes cphHeroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-full-bg { animation: cphHeroZoom 18s ease-out forwards; filter: saturate(1.05) brightness(1.04); }
@media (prefers-reduced-motion: reduce) { .hero-full-bg { animation: none; } }

/* ---------- Số liệu nổi (đè lên đáy hero) ---------- */
.home-stats { position: relative; z-index: 2; }
.stats-float {
  margin-top: -4.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 0.5rem;
  padding: 1.25rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
}
@media (min-width: 768px) {
  .stats-float {
    grid-template-columns: repeat(4, 1fr);
    margin-top: -4.5rem;
    padding: 1.85rem 1.5rem;
    gap: 0;
  }
}
.stat-float {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.6rem;
}
@media (min-width: 768px) { .stat-float { justify-content: center; padding: 0.4rem 1.25rem; } }
.stat-float-ico {
  display: flex;
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--emerald-deep);
  background: color-mix(in oklch, var(--emerald) 12%, #fff);
}
.stat-float:nth-child(2) .stat-float-ico { color: var(--teal); background: color-mix(in oklch, var(--teal) 13%, #fff); }
.stat-float:nth-child(3) .stat-float-ico { color: var(--harvest); background: color-mix(in oklch, var(--gold) 20%, #fff); }
.stat-float:nth-child(4) .stat-float-ico { color: color-mix(in oklch, var(--leaf) 72%, var(--emerald-deep)); background: color-mix(in oklch, var(--leaf) 16%, #fff); }
.stat-float-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.stat-float .num { font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.1rem); font-weight: 800; color: var(--emerald-deep); }
.stat-float .lbl { margin-top: 0.22rem; font-size: 12px; font-weight: 700; color: var(--muted-foreground); line-height: 1.3; }
/* vạch ngăn dọc giữa các mục (chỉ desktop) */
@media (min-width: 768px) {
  .stat-float + .stat-float::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2.75rem;
    width: 1px;
    background: var(--border);
  }
}

.bento { margin-inline: auto; max-width: 80rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); height: 900px; }
}
.bento-tile { position: relative; overflow: hidden; border-radius: 1.5rem; }
.tile-hero { background: var(--emerald-deep); box-shadow: var(--shadow-elegant); border: 1px solid rgba(255,255,255,0.05); }
.tile-product { background: var(--card); padding: 1.5rem; cursor: pointer; box-shadow: var(--shadow-soft); border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent); display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .tile-hero { grid-column: 1 / 9; grid-row: 1 / 5; }
  .tile-product { grid-column: 9 / 13; grid-row: 1 / 5; }
  .tile-stat1 { grid-column: 9 / 11; grid-row: 5 / 7; }
  .tile-stat2 { grid-column: 11 / 13; grid-row: 5 / 7; }
  .tile-expert { grid-column: 1 / 9; grid-row: 5 / 7; }
  /* Vùng ảnh sản phẩm co giãn để vừa khít ô, không bị cắt */
  .tile-product .img-wrap { flex: 1 1 auto; min-height: 0; }
  .tile-product .img-wrap img { height: 100%; }
}
.tile-hero img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0.42; mix-blend-mode: overlay; transition: transform 1.4s var(--ease-out); }
.tile-hero:hover img { transform: scale(1.025); }
.tile-hero .overlay { position: absolute; inset: 0; background: linear-gradient(95deg, color-mix(in oklch, var(--emerald-deep) 94%, transparent) 0%, color-mix(in oklch, var(--emerald-deep) 76%, transparent) 58%, color-mix(in oklch, var(--emerald-deep) 34%, transparent) 100%); }
.tile-hero .content { position: relative; height: 100%; padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; color: #fff; }
@media (min-width: 768px) { .tile-hero .content { padding: 3rem; } }
.hero-badge { display: inline-flex; width: fit-content; align-items: center; gap: 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); padding: 0.5rem 1rem; backdrop-filter: blur(8px); }
.hero-badge .dot { height: 0.5rem; width: 0.5rem; border-radius: 999px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero-badge span:last-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.35; color: var(--accent-light); }
.cph .hero-title { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.34); }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
.hero-title span { color: var(--accent-light); }
.hero-sub { margin-top: 1.5rem; max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: rgba(255,255,255,0.92); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-trust { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 34rem; }
.hero-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.12);
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.86);
  backdrop-filter: blur(8px);
}
.hero-advisory {
  display: none;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,202,112,0.1) 0, transparent 30%),
    linear-gradient(180deg, rgba(29,111,69,0.9) 0%, rgba(19,83,53,0.92) 100%);
  box-shadow: 0 28px 62px -42px rgba(0,0,0,0.64);
  padding: 1.25rem;
  backdrop-filter: blur(16px);
}
.hero-advisory::before {
  content: none;
}
@media (min-width: 980px) { .hero-advisory { display: block; } }
.hero-advisory-head { display: flex; align-items: flex-start; gap: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0); }
.hero-advisory-ico {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.1);
  color: var(--accent-light);
}
.hero-advisory .k { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.35; color: var(--accent-light); }
.hero-advisory h2 { margin-top: 0.25rem; color: #fff; font-size: 1.18rem; line-height: 1.2; letter-spacing: 0; }
.hero-advisory-head p { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.72); }
.hero-stage-list { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.hero-stage-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  align-items: center;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 0.66rem 0.72rem;
  transition: background 0.24s var(--ease-out), border-color 0.24s var(--ease-out);
}
.hero-stage-list li:hover { background: rgba(255,255,255,0.095); border-color: rgba(255,255,255,0.12); }
.hero-stage-list span {
  grid-row: span 2;
  display: flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(240,202,112,0.13);
  color: #F0CA70;
  font-size: 0.7rem;
  font-weight: 800;
}
.hero-stage-list strong { font-size: 0.88rem; line-height: 1.35; color: #fff; }
.hero-stage-list em { font-style: normal; font-size: 0.76rem; line-height: 1.45; color: rgba(255,255,255,0.72); }
.hero-advisory-foot { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1rem; }
.hero-advisory-foot a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.55rem;
  border-radius: 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}
.hero-advisory-foot a:first-child { background: #F0CA70; color: var(--emerald-deep); box-shadow: 0 14px 26px -24px rgba(240,202,112,0.6); }
.hero-advisory-foot a:last-child { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; }
.btn-outline-white { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 700; color: #fff; backdrop-filter: blur(8px); transition: background 0.24s var(--ease-out), transform 0.24s var(--ease-out), border-color 0.24s var(--ease-out); }
.btn-outline-white:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.42); transform: translateY(-1px); color: #fff; }

.tile-product .corner { position: absolute; right: -2rem; top: -2rem; height: 8rem; width: 8rem; border-bottom-left-radius: 4rem; background: var(--cream); transition: transform 0.35s var(--ease-out); }
.tile-product:hover .corner { transform: scale(1.04); }
.tile-product .badge-ico { display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: 1rem; color: #fff; background: var(--emerald-deep); box-shadow: 0 12px 26px -22px oklch(0.45 0.11 162 / 0.45); }
.tile-product h3 { margin-top: 1.75rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; line-height: 1.1; }
.tile-product .desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.tile-product .img-wrap { position: relative; margin-top: 1.5rem; overflow: hidden; border-radius: 1.25rem; background: color-mix(in oklch, var(--emerald-deep) 94%, white); }
.tile-product .img-wrap img { height: 11rem; width: 100%; object-fit: contain; padding: 1rem; transition: transform 0.35s var(--ease-out); }
.tile-product:hover .img-wrap img { transform: scale(1.025); }
.tile-product .more { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; }
.tile-product .more span:first-child { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.35; color: var(--emerald); }
.tile-product .more .arrow { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--cream); transition: 0.2s; }
.tile-product:hover .more .arrow { background: var(--emerald); color: #fff; }

.tile-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; color: #fff; }
.tile-stat1 { background: var(--emerald); }
.tile-stat2 { background: var(--emerald-deep); }
.tile-stat .num { position: relative; }
.tile-stat1 .num::after { content: ""; position: absolute; left: 50%; bottom: -0.4rem; transform: translateX(-50%); width: 2rem; height: 3px; border-radius: 3px; background: var(--gold); }
.tile-stat .num { font-family: var(--font-display); font-size: 3rem; font-weight: 800; }
.tile-stat2 .num { color: var(--accent-light); }
.tile-stat .lbl { margin-top: 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.35; opacity: 0.8; }

.tile-tech { display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 1.5rem; box-shadow: var(--shadow-soft); border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent); }
.tile-tech .lbl { display: flex; align-items: center; gap: 0.75rem; }
.tile-tech .pulse { height: 0.75rem; width: 0.75rem; border-radius: 999px; background: var(--gold); animation: cphpulse 2s infinite; }
.tile-tech .lbl span:last-child { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.35; color: var(--emerald-deep); }
.tile-tech .avatars { display: flex; }
.tile-tech .avatars span { height: 2rem; width: 2rem; border-radius: 999px; border: 2px solid var(--card); margin-left: -0.375rem; }
@keyframes cphpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.tile-expert { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; background: var(--card); border: 1px solid color-mix(in oklch, var(--emerald-deep) 12%, transparent); box-shadow: var(--shadow-soft); border-radius: 1.5rem; }
@media (min-width: 768px) { .tile-expert { flex-direction: row; padding: 2.5rem; } }
.tile-expert .who { display: flex; align-items: center; gap: 1.5rem; }
.tile-expert .photo { height: 6rem; width: 6rem; flex-shrink: 0; overflow: hidden; border-radius: 1.5rem; border: 4px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform: rotate(3deg); }
.tile-expert .photo img { height: 100%; width: 100%; object-fit: cover; }
.tile-expert h4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; }
.tile-expert .who p { margin-top: 0.5rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.tile-expert .cta { display: flex; width: 100%; flex-direction: column; gap: 0.5rem; }
@media (min-width: 768px) { .tile-expert .cta { width: auto; } }
.tile-expert .cta a.hot { text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.35; color: var(--emerald); }

/* ---------- USP ---------- */
.usp-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .usp-grid { grid-template-columns: repeat(4, 1fr); } }
.usp-card { transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out); }
.usp-card:hover { transform: translateY(-3px); }
.usp-ico { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 0.75rem; color: #fff; background: var(--emerald-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); }
.usp-card:nth-child(2) .usp-ico { background: var(--teal); }
.usp-card:nth-child(3) .usp-ico { background: var(--gold); color: var(--emerald-deep); }
.usp-card:nth-child(4) .usp-ico { background: var(--emerald); }
.usp-card h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; }
.usp-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
/* Mobile: thẻ USP dạng hàng ngang gọn (icon trái · nội dung phải) */
@media (max-width: 767px) {
  .usp-grid { gap: 0.7rem; }
  .usp-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    align-items: start;
    padding: 0.95rem 1.05rem;
  }
  .usp-card .usp-ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.6rem;
  }
  .usp-card h3 { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 0.98rem; line-height: 1.25; }
  .usp-card p { grid-column: 2; grid-row: 2; margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.5; }
}

/* ---------- INTRO ---------- */
.intro-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .intro-grid { grid-template-columns: repeat(2, 1fr); } }
.intro-img { position: relative; }
.intro-img > img { border-radius: 1.5rem; box-shadow: var(--shadow-soft); }
.intro-badge { position: absolute; bottom: -1.5rem; right: -1.5rem; max-width: 20rem; }
.intro-badge .cph-row { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 767px) { .intro-badge { display: none; } }
.intro-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.intro-list li { display: flex; gap: 0.75rem; font-size: 0.875rem; align-items: flex-start; }
.intro-list svg { color: var(--primary); flex-shrink: 0; }
.intro h2 { margin-top: 1rem; font-size: clamp(1.9rem, 1.25rem + 2.3vw, 2.6rem); font-weight: 800; line-height: 1.12; }
.intro .body { margin-top: 1.25rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---------- PRODUCTS ---------- */
.prod-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
.prod-card { overflow: hidden; }
.prod-card .media { position: relative; margin: -2rem -2rem 1.5rem; aspect-ratio: 1/1; border-radius: 1.25rem 1.25rem 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in oklch, var(--emerald) 9%, #fff), #fff); }
.prod-card .media::after, .prod-item .media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(23,99,58,0.08), transparent);
  pointer-events: none;
}
.prod-card .media .icon, .prod-item .media .icon { width: 3.25rem; height: 3.25rem; color: color-mix(in oklch, var(--emerald) 45%, transparent); }
.prod-card .media img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.35s var(--ease-out); }
.prod-card:hover .media img { transform: scale(1.025); }
.prod-card h3 { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 700; }
.prod-card p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.link-more { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); transition: gap 0.2s; }
.link-more:hover { gap: 0.5rem; }
.grad-1 { background: color-mix(in oklch, var(--emerald) 12%, white); }
.grad-2 { background: color-mix(in oklch, var(--gold) 16%, white); }
.grad-3 { background: color-mix(in oklch, var(--teal) 13%, white); }
.grad-4 { background: color-mix(in oklch, var(--leaf) 14%, white); }
.grad-5 { background: color-mix(in oklch, var(--harvest) 12%, white); }
.grad-6 { background: color-mix(in oklch, var(--emerald-deep) 9%, white); }

/* ---------- STAGES ---------- */
.stages-section { position: relative; padding-block: 6rem; background: #1A5D43; color: #fff; overflow: hidden; }
.stages-section .grid-bg { position: absolute; inset: 0; opacity: 0.3; }
.stages-section h2 { color: #fff; }
.stages-section .chip { background: color-mix(in oklch, var(--primary) 20%, transparent); color: var(--primary-foreground); border-color: color-mix(in oklch, var(--primary) 30%, transparent); }
.stages-grid { position: relative; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .stages-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stages-grid { grid-template-columns: repeat(5, 1fr); } }
.stage-card { position: relative; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.055); padding: 1.5rem; backdrop-filter: blur(8px); transition: background 0.28s var(--ease-out), border-color 0.28s var(--ease-out), transform 0.28s var(--ease-out); }
.stage-card:hover { border-color: color-mix(in oklch, var(--primary) 34%, transparent); background: rgba(255,255,255,0.09); transform: translateY(-2px); }
.stage-card .step { font-size: 0.75rem; color: var(--primary); font-weight: 700; margin-bottom: 0.75rem; }
.stage-card .ico { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 0.75rem; margin-bottom: 1rem; background: rgba(255,255,255,0.12); color: var(--gold); }
.stage-card:nth-child(2n) .ico { color: var(--accent-light); }
.stage-card:nth-child(3n) .ico { color: color-mix(in oklch, var(--teal) 55%, white); }
.stage-card h3 { color: #fff; font-size: 1rem; }
.stage-card p { margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.stage-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stage-tags span { font-size: 11px; border-radius: 999px; background: rgba(255,255,255,0.1); padding: 0.25rem 0.5rem; }
/* Mobile: thẻ giai đoạn dạng hàng ngang gọn (icon trái · nội dung phải) */
@media (max-width: 767px) {
  .stages-section { padding-block: 3.25rem; }
  .stages-section .center-head { margin-bottom: 1.75rem; }
  .stages-grid { gap: 0.7rem; }
  .stage-card {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 0.85rem;
    align-items: start;
    padding: 0.9rem 1rem;
  }
  .stage-card .ico {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    margin: 0;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.6rem;
  }
  .stage-card .step { grid-column: 2; grid-row: 1; margin: 0 0 0.1rem; }
  .stage-card h3 { grid-column: 2; grid-row: 2; line-height: 1.25; }
  .stage-card p { grid-column: 2; grid-row: 3; margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.5; }
  .stage-card .stage-tags { grid-column: 2; grid-row: 4; margin-top: 0.55rem; }
}

/* ---------- STATS ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-box { text-align: center; }
.stat-box .v { font-size: 2.25rem; font-weight: 800; color: var(--emerald); }
@media (min-width: 768px) { .stat-box .v { font-size: 3rem; } }
.stat-box .l { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- TESTIMONIALS ---------- */
.testi-carousel { position: relative; }
.testi-grid { display: grid; gap: 1.25rem; }
.testi-card .quote { width: 2rem; height: 2rem; color: color-mix(in oklch, var(--primary) 40%, transparent); }
.testi-card p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; }
.testi-card .who { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.testi-card .who .name { font-weight: 600; }
.testi-card .who .place { font-size: 0.75rem; color: var(--muted-foreground); }
.testi-card {
  width: 100%;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  text-align: left;
}
.testi-card:hover {
  transform: none;
}
.testi-card:not(.is-active):not(.is-prev):not(.is-next) { display: none; }
.testi-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
}
.testi-dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--emerald) 22%, transparent);
  transition: width 0.24s var(--ease-out), background 0.24s var(--ease-out);
}
.testi-dots span.active { width: 1.4rem; background: var(--emerald); }
@media (min-width: 900px) {
  .testi-grid {
    position: relative;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.36fr) minmax(0, 0.82fr);
    align-items: center;
    gap: 1.5rem;
    min-height: 26.5rem;
  }
  .testi-card.is-active {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 25rem;
    min-height: 25rem;
    padding: 3rem;
    text-align: center;
    color: #fff;
    background:
      radial-gradient(circle at 18% 16%, rgba(240,202,112,0.12) 0, transparent 28%),
      radial-gradient(circle at 84% 18%, rgba(14,165,168,0.12) 0, transparent 30%),
      linear-gradient(135deg, var(--emerald-deep) 0%, #1F7A48 58%, #155A38 100%);
    border-color: rgba(255,255,255,0.12);
  }
  .testi-card.is-active .quote { width: 3.25rem; height: 3.25rem; margin-inline: auto; color: var(--gold); }
  .testi-card.is-active p {
    max-width: 34rem;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.68;
    color: rgba(255,255,255,0.92);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .testi-card.is-active .who { border-top-color: rgba(255,255,255,0.18); }
  .testi-card.is-active .who .place { color: rgba(255,255,255,0.68); }
  .testi-card.is-prev,
  .testi-card.is-next {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 18rem;
    min-height: 18rem;
    padding: 2rem;
    cursor: pointer;
  }
  .testi-card.is-prev p,
  .testi-card.is-next p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.55;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .testi-card.is-prev .quote,
  .testi-card.is-next .quote { width: 1.6rem; height: 1.6rem; }
  .testi-card.is-prev .who,
  .testi-card.is-next .who { margin-top: 1rem; padding-top: 1rem; }
  .testi-card.is-prev {
    grid-column: 1;
    grid-row: 1;
    transform: none;
  }
  .testi-card.is-next {
    grid-column: 3;
    grid-row: 1;
    transform: none;
  }
  .testi-card.is-prev:hover,
  .testi-card.is-next:hover { transform: none; }
}
@media (max-width: 899px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card.is-active { display: block; }
  .testi-card.is-prev,
  .testi-card.is-next { display: none; }
}

/* ---------- BLOG ---------- */
.blog-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { cursor: pointer; padding: 1.35rem; transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out); }
.blog-card:hover { transform: translateY(-3px); }
.blog-card .media { aspect-ratio: 16/10; margin: -1.35rem -1.35rem 1.15rem; border-radius: 1rem 1rem 0 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in oklch, var(--emerald) 9%, #fff), #fff); overflow: hidden; }
.blog-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease-out); }
.blog-card:hover .media img { transform: scale(1.025); }
.blog-card .media svg { width: 3rem; height: 3rem; color: color-mix(in oklch, var(--primary) 40%, transparent); }
.blog-card .cat { font-size: 0.7rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.35; }
.blog-card h3 { margin-top: 0.55rem; font-size: 1rem; line-height: 1.38; transition: color 0.24s var(--ease-out); }
.blog-card:hover h3 { color: var(--primary); }
.blog-card .date { margin-top: 0.8rem; font-size: 0.75rem; color: var(--muted-foreground); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; line-height: 1.45; }
.blog-card .excerpt { margin-top: 0.65rem; font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.blog-card .link-more { margin-top: 1.05rem; }
@media (min-width: 900px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-auto-rows: auto;
    align-items: stretch;
  }
  .blog-card:first-child,
  .blog-card.is-featured {
    grid-row: span 2;
    padding: 1.5rem;
  }
  .blog-card:first-child .media,
  .blog-card.is-featured .media {
    margin: -1.5rem -1.5rem 1.25rem;
    aspect-ratio: 16/9;
    border-radius: 1rem 1rem 0 0;
  }
  .blog-card:first-child h3,
  .blog-card.is-featured h3 {
    max-width: 34rem;
    font-size: 1.35rem;
    line-height: 1.3;
  }
  .blog-card:not(.is-featured) {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: 0.28rem 1rem;
    align-items: start;
    min-height: 11.25rem;
    padding: 1.15rem;
  }
  .blog-card:not(.is-featured) .media {
    grid-row: 1 / 6;
    margin: 0;
    border-radius: 0.85rem;
    aspect-ratio: 0.92 / 1;
  }
  .blog-card:not(.is-featured) .cat,
  .blog-card:not(.is-featured) h3,
  .blog-card:not(.is-featured) .date,
  .blog-card:not(.is-featured) .excerpt,
  .blog-card:not(.is-featured) .link-more {
    grid-column: 2;
  }
  .blog-card:not(.is-featured) h3 {
    margin-top: 0;
    font-size: 0.98rem;
  }
  .blog-card:not(.is-featured) .date {
    margin-top: 0;
  }
  .blog-card:not(.is-featured) .excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .blog-card:not(.is-featured) .link-more {
    align-self: start;
    margin-top: 0.35rem;
  }
  .blog-card.is-featured {
    display: block;
  }
  .blog-card.is-featured .media,
  .blog-card.is-featured .cat,
  .blog-card.is-featured h3,
  .blog-card.is-featured .date,
  .blog-card.is-featured .excerpt,
  .blog-card.is-featured .link-more {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 2.5rem;
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in oklch, var(--gold) 16%, transparent) 0, transparent 28%),
    linear-gradient(135deg, var(--emerald-deep) 0%, #1A6D48 100%);
  box-shadow: var(--shadow-elegant);
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--gold) 18%, transparent);
  pointer-events: none;
}
@media (min-width: 768px) { .cta-banner { padding: 4rem; } }
.cta-banner .grid-bg { position: absolute; inset: 0; opacity: 0.2; }
.cta-banner h2 { color: #fff; font-size: 1.875rem; font-weight: 700; }
@media (min-width: 768px) { .cta-banner h2 { font-size: 2.25rem; } }
.cta-banner .inner { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .cta-banner .inner { grid-template-columns: repeat(2, 1fr); } }
.cta-banner p { margin-top: 1rem; color: rgba(255,255,255,0.9); }
.cta-actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .cta-actions { flex-direction: row; justify-content: flex-end; } }

/* ============================================================
   FILTERS (products / knowledge)
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--border); background: var(--card); color: inherit; cursor: pointer; transition: background 0.24s var(--ease-out), color 0.24s var(--ease-out), border-color 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
.filter-btn:hover { background: var(--secondary); transform: translateY(-1px); }
.filter-btn.active { color: #fff; border-color: var(--emerald-deep); background: var(--emerald-deep); box-shadow: var(--shadow-glow); }
.filter-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

.prod-list { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .prod-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .prod-list { grid-template-columns: repeat(3, 1fr); } }
.prod-item { transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out); }
.prod-item:hover { transform: translateY(-3px); }
.prod-item .media {
  margin: -2rem -2rem 1.5rem;
  aspect-ratio: 1/1;
  border-radius: 1.25rem 1.25rem 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in oklch, var(--emerald) 9%, #fff), #fff);
  border: 0;
}
.prod-item .media img { width: 100%; height: 100%; object-fit: cover !important; padding: 0 !important; transition: transform 0.35s var(--ease-out); }
.prod-item:hover .media img { transform: scale(1.025); }
.prod-item h3 { margin-top: 0.75rem; font-size: 1.125rem; font-weight: 700; }
.prod-item .stage { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.prod-item p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.is-hidden { display: none !important; }
.cph-filter-fade { opacity: 1; transform: translateY(0); transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.cph-filter-fade.is-hiding { opacity: 0; transform: translateY(6px); }

/* ============================================================
   SOLUTIONS (giai-phap)
   ============================================================ */
.phase-list { display: flex; flex-direction: column; gap: 1.5rem; }
.phase-card { display: grid; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 1024px) { .phase-card { grid-template-columns: auto 1fr; } }
.phase-side { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .phase-side { flex-direction: column; align-items: flex-start; } }
.phase-ico { display: flex; height: 4rem; width: 4rem; align-items: center; justify-content: center; border-radius: 1rem; color: #fff; background: var(--emerald-deep); }
.phase-card:nth-child(2n) .phase-ico { background: var(--teal); }
.phase-card:nth-child(3n) .phase-ico { background: var(--gold); color: var(--emerald-deep); }
.phase-num { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
.phase-card h3 { font-size: 1.5rem; font-weight: 700; }
.phase-detail { margin-top: 1rem; display: grid; gap: 1rem 2rem; font-size: 0.875rem; }
@media (min-width: 768px) { .phase-detail { grid-template-columns: repeat(2, 1fr); } }
.phase-detail .full { grid-column: 1 / -1; }
.phase-detail .k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; color: var(--muted-foreground); font-weight: 700; margin-bottom: 0.3rem; }
.phase-tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   ABOUT (gioi-thieu)
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--emerald-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
}
.about-story {
  position: relative;
  overflow: hidden;
  padding-top: 5.5rem;
  background:
    linear-gradient(180deg, #fbfefa 0%, #f4fbf6 100%);
}
.about-story-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .about-story-grid { grid-template-columns: minmax(0, 0.95fr) minmax(28rem, 1fr); } }
.about-story-copy h1 {
  margin-top: 0.9rem;
  max-width: 42rem;
  font-size: clamp(2.35rem, 1.55rem + 3.2vw, 4.55rem);
  line-height: 1.04;
}
.about-body { margin-top: 1.45rem; display: grid; gap: 1rem; max-width: 42rem; color: var(--muted-foreground); line-height: 1.78; }
.about-body strong { color: var(--foreground); }
.about-proof-row {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.about-proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--emerald) 22%, transparent);
  background: rgba(255,255,255,0.72);
  padding: 0.48rem 0.85rem;
  color: var(--emerald-deep);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 10px 24px -22px rgba(0,0,0,0.22);
}
.about-story-media {
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 10%, transparent);
  background: var(--secondary);
  box-shadow: var(--shadow-elegant);
}
.about-story-media img { width: 100%; height: 100%; min-height: 26rem; object-fit: cover; filter: saturate(1.02) contrast(1.02); }
.about-story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,99,58,0) 45%, rgba(23,99,58,0.62) 100%);
  pointer-events: none;
}
.about-media-note {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.9);
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 34px -28px rgba(0,0,0,0.45);
}
.about-media-note strong { display: block; color: var(--emerald-deep); font-size: 1rem; line-height: 1.35; }
.about-media-note span { display: block; margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.88rem; line-height: 1.55; }

.about-process { background: #fff; }
.process-grid { display: grid; gap: 1rem; counter-reset: process; }
@media (min-width: 768px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
.process-step {
  position: relative;
  min-height: 15rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  background: linear-gradient(180deg, #fff 0%, #f8fcf8 100%);
  padding: 1.35rem;
  box-shadow: var(--shadow-soft);
}
.process-num {
  color: color-mix(in oklch, var(--emerald) 42%, white);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.process-ico {
  margin-top: 1.4rem;
  display: flex;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  color: #fff;
  background: var(--emerald-deep);
}
.process-step:nth-child(2) .process-ico { background: var(--teal); }
.process-step:nth-child(3) .process-ico { background: var(--gold); color: var(--emerald-deep); }
.process-step:nth-child(4) .process-ico { background: var(--emerald); }
.process-step h3 { margin-top: 1.15rem; font-size: 1.1rem; line-height: 1.25; }
.process-step p { margin-top: 0.55rem; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.65; }

.about-diff {
  background:
    radial-gradient(circle at 84% 12%, color-mix(in oklch, var(--gold) 14%, transparent) 0, transparent 28%),
    linear-gradient(180deg, #f8fcf8 0%, #fff 100%);
}
.about-diff-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .about-diff-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.about-diff h2 { margin-top: 0.8rem; font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.08; }
.diff-list { display: grid; gap: 0.9rem; }
.diff-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  background: rgba(255,255,255,0.86);
  padding: 1.15rem;
  box-shadow: var(--shadow-soft);
}
.diff-ico {
  display: flex;
  width: 2.65rem;
  height: 2.65rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  color: var(--emerald-deep);
  background: color-mix(in oklch, var(--gold) 20%, #fff);
}
.diff-item h3 { font-size: 1rem; line-height: 1.35; }
.diff-item p { margin-top: 0.35rem; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.65; }

.about-values {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 1024px) { .about-values { grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr); } }
.value-feature {
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, rgba(23,99,58,0.96), rgba(52,168,102,0.9)),
    url("../images/hero-orchard.jpg") center / cover no-repeat;
  padding: 2rem;
  color: rgba(255,255,255,0.84);
  box-shadow: var(--shadow-elegant);
}
.value-feature .eyebrow { color: var(--gold); }
.value-feature h2 { margin-top: 0.85rem; color: #fff; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); line-height: 1.08; }
.value-feature p { margin-top: 1rem; max-width: 30rem; line-height: 1.7; }
.value-grid, .cap-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .value-grid, .cap-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: 1.35rem; }
.value-card h3 { margin-top: 1.1rem; font-size: 1.12rem; line-height: 1.3; }
.value-card p { margin-top: 0.55rem; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.65; }
.value-ico { display: flex; height: 2.8rem; width: 2.8rem; align-items: center; justify-content: center; border-radius: 0.8rem; color: #fff; background: var(--emerald-deep); }
.value-card:nth-child(2) .value-ico { background: var(--teal); }
.value-card:nth-child(3) .value-ico { background: var(--gold); color: var(--emerald-deep); }

.about-cap { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.about-cap-panel {
  display: grid;
  gap: 2rem;
  align-items: center;
  border-radius: 1.35rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 9%, transparent);
  background: rgba(255,255,255,0.82);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 980px) { .about-cap-panel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }
.about-cap-panel h2 { margin-top: 0.8rem; font-size: clamp(1.9rem, 1.25rem + 2vw, 2.8rem); line-height: 1.1; }
.about-cap-panel p { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.7; }
.cap-card {
  text-align: left;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  background: #fff;
  padding: 1.25rem;
}
.cap-card .ico { display: flex; height: 2.6rem; width: 2.6rem; margin: 0 0 1rem; align-items: center; justify-content: center; border-radius: 0.8rem; color: #fff; background: var(--emerald-deep); }
.cap-card:nth-child(2) .ico { background: var(--teal); }
.cap-card:nth-child(3) .ico { background: var(--gold); color: var(--emerald-deep); }
.cap-card .v { font-size: 1.75rem; font-weight: 800; color: var(--emerald-deep); line-height: 1.1; }
.cap-card .l { margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted-foreground); }
.about-cta {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 2.5rem;
  text-align: center;
  color: rgba(255,255,255,0.86);
  background:
    linear-gradient(110deg, rgba(23,99,58,0.97), rgba(14,128,116,0.9)),
    url("../images/hero-orchard.jpg") center 62% / cover no-repeat;
  box-shadow: var(--shadow-elegant);
}
@media (min-width: 768px) { .about-cta { padding: 3.5rem; } }
.about-cta h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); }
.about-cta p { max-width: 39rem; margin: 0.85rem auto 0; line-height: 1.7; color: rgba(255,255,255,0.82); }
.about-cta svg { width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; color: var(--gold); }
.about-cta-actions { margin-top: 1.55rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
  padding: 0.875rem 1.75rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.16); color: #fff; transform: translateY(-1px); }
@media (max-width: 767px) {
  .about-story { padding-top: 3.25rem; }
  .about-proof-row span { width: 100%; justify-content: center; }
  .about-story-media, .about-story-media img { min-height: 20rem; }
  .process-step { min-height: auto; }
  .diff-item { grid-template-columns: 1fr; }
}
/* ============================================================
   CONTACT (lien-he)
   ============================================================ */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } }
.contact-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.field label { font-size: 0.75rem; font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; transition: color 0.24s var(--ease-out); }
.field:focus-within label { color: var(--emerald-deep); }
.field .control { margin-top: 0.375rem; }
.input { width: 100%; border: 1px solid var(--border); background: color-mix(in oklch, var(--card) 96%, var(--secondary)); border-radius: 0.75rem; padding: 0.65rem 0.85rem; font-size: 0.9rem; outline: none; transition: border-color 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), background 0.24s var(--ease-out), transform 0.24s var(--ease-out); font-family: inherit; }
.input:hover { border-color: color-mix(in oklch, var(--emerald) 28%, var(--border)); background: #fff; }
.input:focus { border-color: color-mix(in oklch, var(--emerald) 42%, var(--border)); background: #fff; box-shadow: 0 0 0 3px color-mix(in oklch, var(--emerald) 10%, transparent); }
.input::placeholder { color: color-mix(in oklch, var(--muted-foreground) 70%, white); }
textarea.input { min-height: 8rem; resize: vertical; }
.contact-side { display: flex; flex-direction: column; gap: 1.25rem; }
.info-list { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; margin-top: 1rem; }
.info-list li { display: flex; gap: 0.75rem; }
.info-ico { display: flex; height: 2.25rem; width: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); }
.info-list li:nth-child(2) .info-ico { background: color-mix(in oklch, var(--gold) 16%, white); color: var(--emerald-deep); }
.info-list li:nth-child(3) .info-ico { background: color-mix(in oklch, var(--teal) 14%, white); color: var(--teal); }
.info-list .t { font-size: 0.75rem; color: var(--muted-foreground); }
.info-list .v { font-weight: 600; }
.contact-social { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.contact-social a { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--secondary); transition: background 0.24s var(--ease-out), color 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
.contact-social a:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.map-wrap { padding: 0 !important; overflow: hidden; }
.map-wrap iframe { width: 100%; height: 18rem; border: 0; display: block; }
.form-success { margin-top: 2rem; border-radius: 0.75rem; background: color-mix(in oklch, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent); padding: 1.5rem; text-align: center; }
.form-success svg { width: 2.5rem; height: 2.5rem; color: var(--primary); margin: 0 auto 0.75rem; }

/* ---------- utility spacing used in templates ---------- */
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.cph-center { text-align: center; }

/* ============================================================
   OVERRIDE — thắng CSS Flatsome (nạp sau main.css)
   Đảm bảo chữ trên nút & ô chọn không bị mất.
   ============================================================ */
.cph a.btn-primary, .cph button.btn-primary { color: oklch(0.98 0.01 90) !important; background: var(--emerald-deep) !important; }
.cph a.btn-primary:hover, .cph button.btn-primary:hover { background: var(--emerald) !important; color: oklch(0.98 0.01 90) !important; }
.cph a.btn-gold, .cph button.btn-gold { color: var(--emerald-deep) !important; background: var(--gold) !important; }
.cph a.btn-gold:hover, .cph button.btn-gold:hover { background: #D9B04E !important; color: var(--emerald-deep) !important; }
.cph a.btn-white, .cph button.btn-white { color: var(--foreground) !important; background: #fff !important; }
.cph a.btn-ghost, .cph button.btn-ghost { color: var(--foreground) !important; background: var(--card) !important; }
.cph a.btn-outline-white { color: #fff !important; }
.cph .link-more, .cph a.link-more { color: var(--primary) !important; }

/* Ô input / select / textarea — chống Flatsome cắt chiều cao */
.cph .input,
.cph select.input,
.cph input.input,
.cph textarea.input {
  height: auto !important;
  min-height: 2.85rem;
  line-height: 1.5 !important;
  padding: 0.65rem 0.85rem !important;
  font-size: 0.9rem !important;
  color: var(--foreground) !important;
  background-color: color-mix(in oklch, var(--card) 96%, var(--secondary)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  margin: 0 !important;
  -webkit-appearance: auto;
  appearance: auto;
}
.cph textarea.input { min-height: 8rem !important; }
.cph select.input {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.65rem !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2314532D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.95rem center !important;
  background-size: 1rem 1rem !important;
}
.cph .input:hover { border-color: color-mix(in oklch, var(--emerald) 28%, var(--border)) !important; background-color: #fff !important; }
.cph .input:focus { border-color: color-mix(in oklch, var(--emerald) 42%, var(--border)) !important; background-color: #fff !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--emerald) 10%, transparent) !important; outline: none !important; }

/* ============================================================
   UX/UI — nâng cấp trải nghiệm
   ============================================================ */

/* Đổ bóng header khi cuộn */
.site-header { transition: box-shadow 0.28s var(--ease-out), background 0.28s var(--ease-out), border-color 0.28s var(--ease-out); }
.site-header.cph-scrolled { box-shadow: 0 14px 34px -30px oklch(0.28 0.07 162 / 0.42); border-color: color-mix(in oklch, var(--border) 82%, transparent); }

/* Focus rõ ràng (bàn phím) cho khả năng truy cập */
.cph a:focus-visible, .cph button:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--emerald) 50%, white); outline-offset: 3px; border-radius: 0.6rem;
}
.cph input:focus-visible,
.cph select:focus-visible,
.cph textarea:focus-visible {
  outline: none !important;
}

/* Hiệu ứng xuất hiện khi cuộn (chỉ bật khi có JS) */
.cph-reveal-on .cph-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out); }
.cph-reveal-on .cph-reveal.cph-in { opacity: 1; transform: none; }

/* Nút "lên đầu trang" */
.cph-top {
  display: flex; height: 2.9rem; width: 2.9rem; align-items: center; justify-content: center;
  border-radius: 999px; background: #1E7A48; color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 14px 28px -20px rgba(0,0,0,0.42);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s var(--ease-out), background 0.28s var(--ease-out);
}
.cph-top.show { opacity: 1; visibility: visible; transform: none; }
.cph-top:hover { transform: translateY(-1px); background: color-mix(in oklch, var(--emerald) 76%, var(--teal)); }

/* Mượt hơn cho mọi liên kết/nút khi rê chuột */
.cph a, .cph button { transition: color 0.24s var(--ease-out), background 0.24s var(--ease-out), transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.24s var(--ease-out); }
.cph a:active, .cph button:active, .filter-btn:active { transform: translateY(0) scale(0.99); }
.card-surface:focus-within { border-color: color-mix(in oklch, var(--emerald) 22%, transparent); box-shadow: 0 18px 42px -32px oklch(0.30 0.085 152 / 0.28); }

@media (prefers-reduced-motion: reduce) {
  .cph-reveal-on .cph-reveal { opacity: 1 !important; transform: none !important; }
  .cph-filter-fade { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Bỏ nhãn "pill" trang trí (eyebrow + badge hero) cho gọn, pro hơn.
   Giữ lại nhãn DANH MỤC trên thẻ sản phẩm (có ích cho người xem).
   ============================================================ */
.cph .hero-badge { display: none; }
.cph .chip { display: none; }
.cph .prod-card .chip,
.cph .prod-item .chip,
.cph .phase-tags .chip,
.cph .blog-card .cat {
  display: inline-flex;
}

/* ============================================================
   Đồng bộ trang chi tiết sản phẩm WooCommerce với giao diện chính
   ============================================================ */
.cph.woocommerce, .cph.woocommerce-page { font-family: var(--font-sans); }
.cph.woocommerce .product_title { color: var(--emerald-deep); }
.cph.woocommerce .price,
.cph.woocommerce .price .woocommerce-Price-amount,
.cph.woocommerce ins .woocommerce-Price-amount { color: var(--emerald-deep); font-weight: 800; }

.cph.woocommerce .button,
.cph.woocommerce a.button,
.cph.woocommerce button.button,
.cph .add_to_cart_button,
.cph .single_add_to_cart_button {
  background: var(--emerald-deep) !important;
  color: #fff !important;
  border-radius: 1rem !important;
  border: 0 !important;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.cph.woocommerce .button:hover,
.cph .add_to_cart_button:hover,
.cph .single_add_to_cart_button:hover {
  background: var(--emerald) !important; color: #fff !important; transform: translateY(-2px);
}
.cph.woocommerce .single_add_to_cart_button,
.cph.woocommerce .button.alt {
  background: var(--gold) !important; color: #fff !important;
}
.cph.woocommerce .single_add_to_cart_button:hover,
.cph.woocommerce .button.alt:hover {
  filter: brightness(1.04); color: #fff !important;
}

.cph .onsale { background: var(--gold) !important; color: #fff !important; border: 0 !important; }
.cph .star-rating span::before, .cph .star-rating::before { color: var(--gold); }

.cph .woocommerce-tabs ul.tabs li a { color: var(--muted-foreground); }
.cph .woocommerce-tabs ul.tabs li.active a { color: var(--emerald-deep); }
.cph .woocommerce-tabs ul.tabs li a:hover { color: var(--emerald); }

.cph .woocommerce-message, .cph .woocommerce-info { border-top-color: var(--emerald) !important; }
.cph .woocommerce-message::before, .cph .woocommerce-info::before { color: var(--emerald) !important; }
.cph.woocommerce a:not(.button):hover { color: var(--emerald); }

.cph.woocommerce .related > h2, .cph.woocommerce .up-sells > h2 { font-family: var(--font-display); color: var(--emerald-deep); }

/* ---------- Trang chi tiết sản phẩm (single-product.php tùy chỉnh) ---------- */
.cph-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 1.75rem; }
.cph-breadcrumb a { color: var(--muted-foreground); }
.cph-breadcrumb a:hover { color: var(--emerald); }
.cph-breadcrumb strong { color: var(--emerald-deep); font-weight: 700; }

.product-detail { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.product-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.product-media .pm-main { display: flex; align-items: center; justify-content: center; width: 100%; }
.product-media .pm-main img { max-height: 360px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0.75rem; }
.product-media .pm-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.product-media .pm-thumb { width: 60px; height: 60px; padding: 0; border-radius: 0.6rem; border: 2px solid color-mix(in oklch, var(--emerald-deep) 12%, transparent); background: #fff; cursor: pointer; overflow: hidden; }
.product-media .pm-thumb.active { border-color: var(--emerald); }
.product-media .pm-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.45rem; }
.product-media > svg { width: 5rem; height: 5rem; color: var(--emerald); opacity: 0.45; }
.product-info { padding-top: 0.5rem; }
.product-cat-label { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.35; color: var(--emerald); }
.product-info h2 { margin: 0.5rem 0 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.14; }
.product-price { margin-top: 0.85rem; font-size: 1.5rem; font-weight: 800; color: var(--emerald-deep); }
.product-lead { margin-top: 1rem; font-size: 1.1rem; line-height: 1.65; color: var(--muted-foreground); }
.product-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.product-desc { margin-top: 2.5rem; }
.product-desc h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.product-desc p { margin-bottom: 1rem; line-height: 1.75; color: var(--foreground); }
.product-single { padding-block: 2.5rem; }
.product-single .product-title { margin: 0.4rem 0 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.14; color: var(--emerald-deep); }
.product-others { margin-top: 3rem; }
.solution-cta { max-width: 620px; margin: 2.5rem auto 0; text-align: center; padding: 2.5rem 2rem; }
.solution-cta h3 { font-size: 1.4rem; }
.solution-cta p { margin: 0.75rem 0 1.5rem; color: var(--muted-foreground); line-height: 1.6; }

/* Trang sản phẩm Flatsome: giới hạn cỡ ảnh để không chiếm quá nhiều diện tích */
.cph.single-product .woocommerce-product-gallery { max-width: 460px; margin-left: auto; margin-right: auto; }
.cph.single-product .woocommerce-product-gallery img,
.cph.single-product div.product .images img { max-height: 380px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; object-fit: contain; }


/* ============================================================
   GLOBAL UX POLISH - áp dụng toàn website
   ============================================================ */
html { scrollbar-gutter: stable; }
.cph { overflow-x: hidden; text-rendering: optimizeLegibility; }
.cph ::selection { background: color-mix(in oklch, var(--gold) 38%, white); color: var(--emerald-deep); }
.cph :target { scroll-margin-top: 6rem; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  transform: translateY(-160%);
  border-radius: 999px;
  background: #fff;
  color: var(--emerald-deep);
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 18px 42px -28px rgba(0,0,0,0.35);
  transition: transform 0.22s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--gold); outline-offset: 3px; }

.site-header {
  min-height: 4.5rem;
  background: rgba(251,254,250,0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.site-header.cph-scrolled { background: rgba(251,254,250,0.94); }
.main-nav a,
.mobile-nav a,
.header-phone,
.footer-col a,
.link-more { text-underline-offset: 0.18em; }
.main-nav a { min-height: 2.35rem; display: inline-flex; align-items: center; }
.header-cta .btn-gold { color: var(--emerald-deep) !important; background: #F0CA70 !important; }
.header-cta .btn-gold:hover { background: var(--gold) !important; color: var(--emerald-deep) !important; }
.mobile-nav .inner { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.mobile-nav a.is-active,
.mobile-nav a[aria-current="page"] { background: color-mix(in oklch, var(--emerald) 13%, white); color: var(--emerald-deep); }

.btn-primary,
.btn-gold,
.btn-ghost,
.btn-white,
.btn-outline-white,
.filter-btn,
.link-more,
.header-phone,
.social-btn,
.floating-contact a,
.floating-contact .cph-top {
  -webkit-tap-highlight-color: transparent;
}
.btn-primary,
.btn-gold,
.btn-ghost,
.btn-white,
.btn-outline-white,
.filter-btn {
  min-height: 2.75rem;
  white-space: nowrap;
}
.link-more { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 800; }

.card-surface,
.prod-item,
.blog-card,
.phase-card,
.value-card,
.cap-card,
.diff-item,
.process-step,
.contact-grid .card-surface {
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (hover: hover) and (pointer: fine) {
  .card-surface:hover,
  .process-step:hover,
  .diff-item:hover,
  .cap-card:hover,
  .value-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -34px oklch(0.30 0.085 152 / 0.28);
  }
}
@media (hover: none) {
  .usp-card:hover, .prod-card:hover, .prod-item:hover, .blog-card:hover, .testi-card:hover, .stat-box:hover,
  .card-surface:hover, .process-step:hover, .diff-item:hover, .cap-card:hover, .value-card:hover {
    transform: none;
  }
}

.cph .section { padding-block: clamp(3.5rem, 7vw, 5.25rem); }
.section-sm { padding-block: clamp(3rem, 6vw, 4.25rem); }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.6rem); }
.center-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2,
.center-head h2 { text-wrap: balance; }
.cph p,
.blog-card h3,
.prod-item h3,
.phase-card h3 { overflow-wrap: anywhere; }

.input {
  caret-color: var(--emerald-deep);
}
.cph .input:focus {
  border-color: color-mix(in oklch, var(--emerald) 36%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--emerald) 8%, transparent) !important;
}
.cph input.input:-webkit-autofill,
.cph textarea.input:-webkit-autofill,
.cph select.input:-webkit-autofill {
  -webkit-text-fill-color: var(--emerald-deep);
  box-shadow: 0 0 0 1000px #fff inset !important;
}
.field:focus-within label { color: color-mix(in oklch, var(--emerald-deep) 82%, var(--teal)); }

.filter-label,
.filter-wrap { scroll-margin-top: 6rem; }
.filter-btn { box-shadow: none; }
.filter-btn.active { box-shadow: 0 10px 24px -22px rgba(0,0,0,0.28); }
.cph-filter-fade { will-change: opacity, transform; }

.floating-contact {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
}
.floating-contact a,
.floating-contact .cph-top {
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 16px 30px -24px rgba(0,0,0,0.42);
}
.floating-contact.is-over-footer { transform: translateY(-0.35rem); }
.floating-contact.is-over-footer a,
.floating-contact.is-over-footer .cph-top { box-shadow: 0 12px 26px -22px rgba(0,0,0,0.52); }
.fc-zalo { background: #16A9A7; }
.fc-phone { background: var(--gold); color: var(--emerald-deep) !important; }
.cph-top { background: #238354; }

.site-footer { isolation: isolate; }
.site-footer::after { opacity: 0.55; }
.footer-grid { gap: clamp(1.75rem, 4vw, 2.5rem); }
.footer-col a { color: rgba(255,255,255,0.82); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; }
.footer-copy { max-width: 38rem; margin-inline: auto; }

@media (max-width: 1023px) {
  .header-inner { gap: 1rem; }
  .brand-name { font-size: 1.25rem; }
  .brand-sub { max-width: 13rem; font-size: 9px; letter-spacing: 0.13em; }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 4.75rem; }
  .container-x { padding-inline: 1rem; }
  .header-inner { height: 4.25rem; }
  .site-logo-img, .brand-logo .custom-logo { height: 48px; }
  .brand-name { font-size: 1.08rem; }
  .brand-sub { max-width: 11.5rem; line-height: 1.25; }
  .btn-primary, .btn-gold, .btn-ghost, .btn-white, .btn-outline-white { width: 100%; }
  .hero-actions, .product-cta, .about-cta-actions { width: 100%; }
  .floating-contact { gap: 0.55rem; }
  .floating-contact a,
  .floating-contact .cph-top { width: 2.65rem; height: 2.65rem; }
  .footer-grid { padding-block: 2.75rem; }
  .site-footer .brand { align-items: flex-start; }
  .site-footer .site-logo-img, .site-footer .brand-logo .custom-logo { height: 3.65rem; }
}
@media (max-width: 480px) {
  .brand-text { max-width: 12rem; }
  .brand-sub { display: none; }
  .mobile-nav .btn-gold { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cph *, .cph *::before, .cph *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   SCROLL REVEAL - chuyển động hiện ra khi người dùng lướt
   ============================================================ */
.cph-reveal-on .cph-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 26px, 0) scale(0.985);
  transition:
    opacity 0.78s var(--ease-out),
    transform 0.78s var(--ease-out),
    filter 0.78s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out),
    background 0.28s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.cph-reveal-on .cph-reveal.cph-reveal-left { transform: translate3d(-28px, 14px, 0) scale(0.99); }
.cph-reveal-on .cph-reveal.cph-reveal-right { transform: translate3d(28px, 14px, 0) scale(0.99); }
.cph-reveal-on .cph-reveal.cph-reveal-card { transform: translate3d(0, 30px, 0) scale(0.975); }
.cph-reveal-on .cph-reveal.cph-in {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}
.cph-reveal-on .hero-copy > .cph-reveal {
  filter: blur(3px);
  transform: translate3d(0, 18px, 0);
}
.cph-reveal-on .hero-copy > .cph-reveal.cph-in { filter: blur(0); transform: none; }
.cph-reveal-on .trust-item.cph-reveal { transform: translate3d(0, 18px, 0) scale(0.985); }
.cph-reveal-on .trust-item.cph-in { transform: none; }
.cph-reveal-on .blog-card.cph-reveal,
.cph-reveal-on .prod-item.cph-reveal,
.cph-reveal-on .process-step.cph-reveal,
.cph-reveal-on .diff-item.cph-reveal {
  transform-origin: center bottom;
}
@media (max-width: 767px) {
  .cph-reveal-on .cph-reveal,
  .cph-reveal-on .cph-reveal.cph-reveal-left,
  .cph-reveal-on .cph-reveal.cph-reveal-right,
  .cph-reveal-on .cph-reveal.cph-reveal-card {
    transform: translate3d(0, 20px, 0) scale(0.99);
    filter: blur(3px);
  }
  .cph-reveal-on .cph-reveal.cph-in { transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cph-reveal-on .cph-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   PREMIUM EXPERIENCE - tinh tế, đồng bộ toàn website
   ============================================================ */
.cph-scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9998;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold) 0%, var(--emerald) 58%, var(--teal) 100%);
  box-shadow: 0 8px 20px -14px rgba(14,82,59,0.75);
  pointer-events: none;
  transition: transform 0.08s linear;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--gold) 42%, transparent), color-mix(in oklch, var(--teal) 24%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
  pointer-events: none;
}
.site-header.cph-scrolled::after { opacity: 1; }

.main-nav a {
  position: relative;
  isolation: isolate;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--emerald));
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: center;
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a.is-active::after,
.main-nav a[aria-current="page"]::after {
  opacity: 0.85;
  transform: scaleX(1);
}
.main-nav a.is-active,
.main-nav a[aria-current="page"] {
  background: color-mix(in oklch, var(--emerald) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--emerald) 8%, transparent);
}

.cph-pointer-glow {
  position: relative;
  isolation: isolate;
}
.cph-pointer-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(230,190,90,0.18), rgba(14,165,168,0.08) 28%, transparent 48%);
  pointer-events: none;
  transition: opacity 0.26s var(--ease-out);
}
.cph-pointer-glow:hover::after { opacity: 1; }
.cph-pointer-glow > * { position: relative; z-index: 1; }

.prod-item .media,
.blog-card .media,
.about-story-media,
.map-wrap {
  background-color: color-mix(in oklch, var(--emerald) 7%, white);
}
.prod-item .media img,
.blog-card .media img,
.about-story-media img {
  transform-origin: center;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prod-item:hover .media img,
  .blog-card:hover .media img,
  .about-story-media:hover img {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.03);
  }
}

.input {
  min-height: 3rem !important;
}
.contact-form .btn-primary,
.about-cta .btn-white,
.hero-actions .btn-gold,
.header-cta .btn-gold {
  position: relative;
  overflow: hidden;
}
.contact-form .btn-primary::before,
.about-cta .btn-white::before,
.hero-actions .btn-gold::before,
.header-cta .btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.42) 45%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.contact-form .btn-primary:hover::before,
.about-cta .btn-white:hover::before,
.hero-actions .btn-gold:hover::before,
.header-cta .btn-gold:hover::before {
  transform: translateX(120%);
}

.link-more svg,
.btn-icon {
  transition: transform 0.24s var(--ease-out);
}
.link-more:hover svg,
.btn-primary:hover .btn-icon,
.btn-gold:hover .btn-icon,
.btn-ghost:hover .btn-icon {
  transform: translateX(3px);
}

.footer-grid > * {
  min-width: 0;
}
.site-footer .brand,
.site-footer .footer-col {
  transform: translateZ(0);
}
.social-btn {
  position: relative;
  overflow: hidden;
}
.social-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

@media (max-width: 767px) {
  .cph-scroll-progress { height: 2px; }
  .main-nav a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cph-scroll-progress { transition: none; }
  .cph-pointer-glow::after,
  .contact-form .btn-primary::before,
  .about-cta .btn-white::before,
  .hero-actions .btn-gold::before,
  .header-cta .btn-gold::before { display: none; }
}

/* ============================================================
   NAV CLEANUP - bỏ underline gradient, giữ active tinh tế
   ============================================================ */
.main-nav a::after {
  display: none !important;
}
.main-nav a {
  border: 1px solid transparent;
  background: transparent;
}
.main-nav a:hover {
  color: var(--emerald-deep);
  background: color-mix(in oklch, var(--emerald) 7%, white);
  border-color: color-mix(in oklch, var(--emerald) 10%, transparent);
}
.main-nav a.is-active,
.main-nav a[aria-current="page"] {
  color: var(--emerald-deep);
  background: color-mix(in oklch, var(--emerald) 11%, white);
  border-color: color-mix(in oklch, var(--emerald) 14%, transparent);
  box-shadow: none;
}

/* ============================================================
   ARTICLE SINGLE - đồng bộ trang chi tiết bài viết
   ============================================================ */
.article-single {
  background:
    radial-gradient(circle at 12% 4%, color-mix(in oklch, var(--teal) 9%, transparent) 0, transparent 28%),
    linear-gradient(180deg, #fbfefa 0%, #fff 34%, var(--cream) 100%);
}
.article-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 18%, color-mix(in oklch, var(--gold) 13%, transparent) 0, transparent 30%),
    radial-gradient(circle at 18% 80%, color-mix(in oklch, var(--emerald) 8%, transparent) 0, transparent 26%);
  pointer-events: none;
}
.article-hero-inner { position: relative; z-index: 1; }
.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.article-breadcrumb a:hover { color: var(--emerald-deep); }
.article-title-wrap { max-width: 54rem; }
.article-cat {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--emerald) 18%, transparent);
  background: color-mix(in oklch, var(--emerald) 8%, white);
  color: var(--emerald-deep);
  padding: 0.35rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-title-wrap h1 {
  margin-top: 1rem;
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 4.45rem);
  line-height: 1.04;
  text-wrap: balance;
}
.article-meta {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}
.article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta svg { color: var(--emerald); }
.article-excerpt {
  margin-top: 1.25rem;
  max-width: 44rem;
  color: var(--muted-foreground);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem);
  line-height: 1.75;
}
.article-shell {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 1024px) {
  .article-shell { grid-template-columns: minmax(0, 1fr) 16rem; }
  /* Nới rộng khung bài viết sang phải (rộng hơn container chung 80rem). */
  .cph .article-single .container-x { max-width: 96rem; }
}
.article-main { min-width: 0; }
.article-cover {
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  margin: 0 0 1.25rem;
  background: var(--secondary);
  box-shadow: var(--shadow-soft);
}
.article-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 34rem; object-fit: cover; }
.article-content {
  padding: clamp(1.35rem, 3vw, 2.25rem);
}
.article-content > * + * { margin-top: 1.05em; }
.article-content p,
.article-content li {
  color: color-mix(in oklch, var(--ink) 72%, #405B4A);
  font-size: clamp(0.98rem, 0.94rem + 0.18vw, 1.06rem);
  line-height: 1.86;
}
.article-content h2,
.article-content h3,
.article-content h4 {
  margin-top: 1.65em;
  line-height: 1.18;
  text-wrap: balance;
}
.article-content h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.2rem); }
.article-content h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); }
.article-content ul,
.article-content ol { padding-left: 1.25rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li + li { margin-top: 0.45rem; }
.article-content a { color: var(--emerald-deep); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.article-content blockquote {
  margin: 1.5rem 0;
  border-left: 4px solid var(--gold);
  border-radius: 0 1rem 1rem 0;
  background: color-mix(in oklch, var(--gold) 8%, white);
  padding: 1.1rem 1.25rem;
  color: var(--emerald-deep);
  font-weight: 600;
}
.article-content img {
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}
.article-pages { margin-top: 1.5rem; font-weight: 800; }
.article-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.article-tags a {
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--emerald) 18%, transparent);
  background: #fff;
  padding: 0.38rem 0.75rem;
  color: var(--emerald-deep);
  font-size: 0.78rem;
  font-weight: 700;
}
.article-nav {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) { .article-nav { grid-template-columns: repeat(2, 1fr); } }
.article-nav a {
  display: block;
  min-height: 6rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  background: rgba(255,255,255,0.82);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.article-nav span { display: block; color: var(--muted-foreground); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.article-nav strong { display: block; margin-top: 0.45rem; color: var(--emerald-deep); line-height: 1.35; }
.article-aside { position: sticky; top: 6rem; }
.article-advice {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid color-mix(in oklch, var(--emerald-deep) 12%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f2f8f3);
  box-shadow: 0 16px 40px rgba(7, 61, 35, .08);
  overflow: hidden;
}
.article-advice::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
}
.article-advice-ico {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 99, 58, .25);
}
.article-advice-ico svg { width: 1.5rem; height: 1.5rem; }
.article-advice h3 { margin-top: 1rem; font-size: 1.18rem; line-height: 1.3; color: var(--emerald-deep); }
.article-advice p { margin-top: 0.6rem; color: var(--muted-foreground); line-height: 1.65; font-size: 0.92rem; }
.article-advice-cta { margin-top: 1.15rem; width: 100%; justify-content: center; }
.article-advice-phone {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .75rem; padding-top: .85rem;
  border-top: 1px solid color-mix(in oklch, var(--emerald-deep) 10%, transparent);
  font-weight: 700; font-size: .98rem;
  color: var(--emerald-deep); text-decoration: none;
  transition: color .2s ease;
}
.article-advice-phone:hover { color: var(--emerald); }
.article-advice-phone svg { width: 1.05rem; height: 1.05rem; flex: none; }
.article-related { background: #fff; }
.related-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .article-aside { position: static; } }
@media (max-width: 767px) {
  .article-hero { padding-top: 2.25rem; }
  .article-content { border-radius: 1rem; }
  .article-nav a { min-height: auto; }
}

/* ============================================================
   PREMIUM HOVER - giảm nẩy card, tăng cảm giác mượt cao cấp
   ============================================================ */
.card-surface,
.usp-card,
.prod-card,
.prod-item,
.blog-card,
.phase-card,
.value-card,
.cap-card,
.diff-item,
.process-step,
.stat-box,
.hero-advisory,
.article-nav a,
.article-tags a {
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .usp-card:hover,
  .prod-card:hover,
  .prod-item:hover,
  .blog-card:hover,
  .testi-card:hover,
  .stat-box:hover,
  .card-surface:hover,
  .process-step:hover,
  .diff-item:hover,
  .cap-card:hover,
  .value-card:hover,
  .phase-card:hover,
  .hero-advisory:hover,
  .article-nav a:hover,
  .article-tags a:hover {
    transform: translate3d(0, -1px, 0) scale(1.002) !important;
    border-color: color-mix(in oklch, var(--emerald) 18%, transparent) !important;
    box-shadow:
      0 1px 2px rgba(18, 84, 50, 0.04),
      0 18px 44px -34px rgba(18, 84, 50, 0.36) !important;
  }
  .blog-card:hover,
  .prod-item:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(250,253,250,0.96) 100%) !important;
  }
  .trust-item:hover {
    transform: none !important;
  }
}
.prod-item .media img,
.blog-card .media img,
.about-story-media img,
.article-cover img {
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  .prod-item:hover .media img,
  .blog-card:hover .media img,
  .about-story-media:hover img,
  .article-cover:hover img {
    transform: scale(1.018) !important;
    filter: saturate(1.04) contrast(1.015) !important;
  }
}
.cph-pointer-glow::after {
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(230,190,90,0.13), rgba(14,165,168,0.055) 30%, transparent 52%) !important;
}
.cph-pointer-glow:hover::after { opacity: 0.9; }
.btn-primary:hover,
.btn-gold:hover,
.btn-ghost:hover,
.btn-white:hover,
.btn-outline-white:hover,
.filter-btn:hover,
.social-btn:hover,
.floating-contact a:hover,
.floating-contact .cph-top:hover {
  transform: translate3d(0, -1px, 0) !important;
}
.cph a:active,
.cph button:active,
.filter-btn:active {
  transform: translate3d(0, 0, 0) scale(0.998) !important;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .usp-card:hover,
  .prod-card:hover,
  .prod-item:hover,
  .blog-card:hover,
  .testi-card:hover,
  .stat-box:hover,
  .card-surface:hover,
  .process-step:hover,
  .diff-item:hover,
  .cap-card:hover,
  .value-card:hover,
  .phase-card:hover,
  .hero-advisory:hover,
  .article-nav a:hover,
  .article-tags a:hover {
    transform: none !important;
  }
}

/* ============================================================
   BLOG STANDARD - quy chuẩn card bài viết toàn website
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
  .blog-card.is-featured {
    grid-row: span 2;
  }
}
.blog-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-width: 0;
  min-height: 100%;
  border-radius: 1rem;
  padding: 1.15rem;
  background: rgba(255,255,255,0.94);
  border-color: color-mix(in oklch, var(--emerald-deep) 8%, transparent);
  box-shadow: 0 1px 2px rgba(18,84,50,0.04), 0 16px 34px -30px rgba(18,84,50,0.26);
}
.blog-card .media {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  aspect-ratio: 16 / 10;
  margin: -1.15rem -1.15rem 1rem;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  background: color-mix(in oklch, var(--emerald) 7%, white);
}
.blog-card .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.blog-card .media svg {
  width: 2.5rem;
  height: 2.5rem;
  color: color-mix(in oklch, var(--emerald) 44%, white);
}
.blog-card .date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-height: 1.45rem;
  margin: 0 !important;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}
.blog-card .date > span:not(.cat) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem !important;
  margin-left: 0 !important;
}
.blog-card .cat {
  display: inline-flex !important;
  align-items: center;
  max-width: 100%;
  color: var(--emerald);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.blog-card h3 {
  margin-top: 0.65rem;
  color: var(--emerald-deep);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .excerpt {
  margin-top: 0.55rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .link-more {
  align-self: end;
  width: fit-content;
  min-height: 2.35rem;
  margin-top: 0.85rem;
  color: color-mix(in oklch, var(--emerald) 78%, var(--emerald-deep)) !important;
  font-size: 0.9rem;
  font-weight: 800;
}
.blog-card.is-featured {
  padding: 1.35rem;
}
.blog-card.is-featured .media {
  aspect-ratio: 16 / 9;
  margin: -1.35rem -1.35rem 1.15rem;
  border-radius: 1rem 1rem 0 0;
}
.blog-card.is-featured h3 {
  margin-top: 0.75rem;
  font-size: clamp(1.18rem, 1rem + 0.65vw, 1.55rem);
  line-height: 1.25;
  -webkit-line-clamp: 2;
}
.blog-card.is-featured .excerpt {
  font-size: 0.94rem;
  -webkit-line-clamp: 2;
}
@media (min-width: 900px) {
  .blog-card:not(.is-featured) {
    grid-template-columns: minmax(8.25rem, 10.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1rem;
    row-gap: 0;
    min-height: 12.25rem;
    padding: 1rem;
  }
  .blog-card:not(.is-featured) .media {
    grid-row: 1 / span 4;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 9.25rem;
    height: 100%;
    margin: 0;
    border-radius: 0.82rem;
  }
  .blog-card:not(.is-featured) h3 {
    margin-top: 0.45rem;
    font-size: 0.98rem;
    line-height: 1.34;
  }
  .blog-card:not(.is-featured) .excerpt {
    margin-top: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.6;
  }
  .blog-card:not(.is-featured) .link-more {
    margin-top: 0.55rem;
    min-height: 2rem;
    font-size: 0.84rem;
  }
}
@media (min-width: 1180px) {
  .blog-card:not(.is-featured) {
    min-height: 13rem;
  }
}
.article-related .blog-grid,
.related-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.article-related .blog-card,
.related-grid .blog-card {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  min-height: 100% !important;
}
.article-related .blog-card .media,
.related-grid .blog-card .media {
  grid-row: auto !important;
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: -1.15rem -1.15rem 1rem !important;
  border-radius: 1rem 1rem 0 0 !important;
}
@media (min-width: 768px) {
  .article-related .blog-grid,
  .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .blog-card {
    padding: 1rem;
  }
  .blog-card .media,
  .blog-card.is-featured .media {
    margin: -1rem -1rem 0.9rem;
    border-radius: 0.95rem 0.95rem 0 0;
  }
  .blog-card h3 {
    font-size: 1.05rem;
  }
}

/* ============================================================
   BLOG STANDARD LOCK - khóa nhịp bài viết và bài liên quan
   ============================================================ */
.article-related .blog-card,
.related-grid .blog-card {
  padding: 1.15rem !important;
}
.article-related .blog-card.is-featured,
.related-grid .blog-card.is-featured {
  grid-row: auto !important;
  padding: 1.15rem !important;
}
.article-related .blog-card.is-featured h3,
.related-grid .blog-card.is-featured h3 {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem) !important;
  line-height: 1.32 !important;
}
.article-related .blog-card.is-featured .excerpt,
.related-grid .blog-card.is-featured .excerpt {
  font-size: 0.9rem !important;
}
.blog-card .date svg {
  width: 0.9rem;
  height: 0.9rem;
  color: color-mix(in oklch, var(--emerald) 64%, var(--muted-foreground));
}
.blog-card h3 a {
  display: inline;
  color: inherit !important;
}
.blog-card h3 a:hover {
  color: color-mix(in oklch, var(--emerald) 72%, var(--emerald-deep)) !important;
}
.blog-card .media:focus-visible,
.blog-card h3 a:focus-visible,
.blog-card .link-more:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--emerald) 38%, white);
  outline-offset: 3px;
}
@media (min-width: 900px) {
  .blog-grid:not(.related-grid) .blog-card:not(.is-featured) .date {
    align-self: start;
  }
  .blog-grid:not(.related-grid) .blog-card:not(.is-featured) .excerpt {
    align-self: start;
  }
}
@media (max-width: 899px) {
  .blog-grid {
    gap: 1rem;
  }
  .blog-card,
  .blog-card.is-featured {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto 1fr auto !important;
  }
}

/* ============================================================
   FOOTER COPYRIGHT ALIGN - khóa giữa toàn website
   ============================================================ */
.site-footer .footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 1.25rem !important;
  text-align: center !important;
}
.site-footer .footer-copy {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* -------------------------------------------------------------------------
 * Article next/previous navigation refinement
 * ---------------------------------------------------------------------- */
.article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 34px 0 10px;
}

.article-nav a {
    position: relative;
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 22px 24px;
    border: 1px solid rgba(34, 127, 79, .14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,253,249,.96));
    box-shadow: 0 16px 36px rgba(2, 65, 35, .08);
    color: var(--primary, #075f35);
    text-decoration: none;
    overflow: hidden;
    transform: translateY(0);
    transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease, background .24s ease;
}

.article-nav a::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #d9b24c, #34b36f);
    opacity: .72;
}

.article-nav a::after {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(34, 127, 79, .09);
    color: #0b6a3b;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    transition: background .24s ease, color .24s ease, transform .24s ease;
}

.article-nav .nav-previous {
    padding-left: 72px;
}

.article-nav .nav-next {
    align-items: flex-end;
    padding-right: 72px;
    text-align: right;
}

.article-nav .nav-previous::after {
    content: "‹";
    left: 24px;
}

.article-nav .nav-next::after {
    content: "›";
    right: 24px;
}

.article-nav a span {
    display: block;
    color: rgba(5, 85, 48, .62);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.article-nav a strong,
.article-nav a b {
    color: #075f35;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.35;
    font-weight: 800;
}

.article-nav a:hover {
    border-color: rgba(34, 127, 79, .28);
    background: #fff;
    box-shadow: 0 20px 42px rgba(2, 65, 35, .11);
    transform: translateY(-2px);
}

.article-nav a:hover::after {
    background: #0d6b3d;
    color: #fff;
}

@media (max-width: 767px) {
    .article-nav {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-nav a {
        min-height: 96px;
        border-radius: 18px;
    }

    .article-nav .nav-next {
        align-items: flex-start;
        padding-left: 72px;
        padding-right: 24px;
        text-align: left;
    }

    .article-nav .nav-next::after {
        left: 24px;
        right: auto;
    }
}

/* -------------------------------------------------------------------------
 * Article navigation - editorial premium override
 * ---------------------------------------------------------------------- */
.article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
    margin: clamp(34px, 4vw, 52px) 0 12px;
}

.article-nav a {
    isolation: isolate;
    position: relative;
    display: flex;
    min-height: 138px;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px 24px 86px;
    border: 1px solid rgba(13, 107, 61, .12);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 18%, rgba(232, 192, 83, .10), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 253, 249, .98));
    box-shadow: 0 18px 46px rgba(7, 61, 35, .08);
    color: #075f35;
    text-decoration: none;
    overflow: hidden;
    transform: translateY(0);
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease;
}

.article-nav a::before {
    content: "";
    position: absolute;
    inset: 16px auto 16px 22px;
    width: 42px;
    border-radius: 999px;
    background: rgba(13, 107, 61, .075);
    z-index: -1;
    transition: background .28s ease, transform .28s ease;
}

.article-nav a::after {
    position: absolute;
    top: 50%;
    left: 33px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #0d6b3d;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    transform: translateY(-54%);
    transition: color .28s ease, transform .28s ease;
}

.article-nav .nav-previous::after {
    content: "‹";
}

.article-nav .nav-next {
    align-items: flex-end;
    padding: 24px 86px 24px 28px;
    text-align: right;
}

.article-nav .nav-next::before {
    inset: 16px 22px 16px auto;
}

.article-nav .nav-next::after {
    content: "›";
    right: 33px;
    left: auto;
}

.article-nav a span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: rgba(5, 85, 48, .58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}

.article-nav a span::after {
    content: "";
    width: 28px;
    height: 1px;
    background: rgba(13, 107, 61, .20);
}

.article-nav .nav-next span {
    flex-direction: row-reverse;
}

.article-nav a strong,
.article-nav a b {
    display: block;
    max-width: 420px;
    color: #075f35;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.34;
    font-weight: 800;
    letter-spacing: 0;
}

.article-nav a:hover {
    border-color: rgba(13, 107, 61, .24);
    background:
        radial-gradient(circle at 18% 18%, rgba(232, 192, 83, .14), transparent 34%),
        #fff;
    box-shadow: 0 24px 54px rgba(7, 61, 35, .12);
    transform: translateY(-3px);
}

.article-nav a:hover::before {
    background: rgba(13, 107, 61, .12);
    transform: scale(1.03);
}

.article-nav .nav-previous:hover::after {
    transform: translate(-3px, -54%);
}

.article-nav .nav-next:hover::after {
    transform: translate(3px, -54%);
}

.article-content {
    box-shadow: 0 24px 70px rgba(7, 61, 35, .075);
}

.article-related {
    margin-top: clamp(42px, 5vw, 64px);
}

@media (max-width: 767px) {
    .article-nav {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .article-nav a,
    .article-nav .nav-next {
        min-height: 116px;
        align-items: flex-start;
        padding: 22px 22px 22px 76px;
        text-align: left;
    }

    .article-nav .nav-next::before {
        inset: 14px auto 14px 20px;
    }

    .article-nav .nav-next::after {
        right: auto;
        left: 31px;
    }

    .article-nav .nav-next span {
        flex-direction: row;
    }
}

/* -------------------------------------------------------------------------
 * Article navigation layout - reading path
 * ---------------------------------------------------------------------- */
.article-nav {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 0;
    margin: clamp(38px, 5vw, 62px) 0 14px;
    padding: 10px;
    border: 1px solid rgba(13, 107, 61, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 22px 60px rgba(7, 61, 35, .08);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.article-nav::before {
    content: "";
    position: absolute;
    inset: 10px 50% 10px auto;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(13, 107, 61, .16), transparent);
    pointer-events: none;
}

.article-nav a,
.article-nav .nav-next,
.article-nav .nav-previous {
    min-height: 154px;
    padding: 26px 32px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.article-nav a::before {
    display: none;
}

.article-nav a::after {
    top: auto;
    bottom: 24px;
    left: auto;
    right: 28px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(13, 107, 61, .14);
    border-radius: 999px;
    background: rgba(13, 107, 61, .06);
    color: #0d6b3d;
    font-size: 24px;
    transform: none;
}

.article-nav .nav-previous::after {
    content: "‹";
    left: 28px;
    right: auto;
}

.article-nav .nav-previous {
    padding-left: 92px;
    opacity: .84;
}

.article-nav .nav-next {
    align-items: flex-start;
    padding-right: 92px;
    text-align: left;
    background:
        radial-gradient(circle at 92% 16%, rgba(224, 183, 72, .14), transparent 34%),
        linear-gradient(135deg, rgba(244, 251, 246, .96), rgba(255, 255, 255, .92));
}

.article-nav .nav-next::after {
    content: "›";
    right: 28px;
    left: auto;
}

.article-nav a span {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: rgba(5, 85, 48, .58);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.article-nav a span::after {
    content: "";
    flex: 1 1 auto;
    max-width: 54px;
    height: 1px;
    background: rgba(13, 107, 61, .18);
}

.article-nav .nav-next span::after {
    background: rgba(224, 183, 72, .38);
}

.article-nav a strong,
.article-nav a b {
    display: block;
    max-width: 460px;
    color: #075f35;
    font-size: clamp(17px, 1.35vw, 22px);
    line-height: 1.32;
    font-weight: 850;
    letter-spacing: 0;
}

.article-nav .nav-next strong,
.article-nav .nav-next b {
    font-size: clamp(19px, 1.55vw, 25px);
}

.article-nav .nav-next span::before {
    content: "Đọc tiếp";
    margin-right: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(224, 183, 72, .16);
    color: #8a6a13;
    letter-spacing: .08em;
}

.article-nav a:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, .68);
    box-shadow: none;
    transform: none;
}

.article-nav .nav-next:hover {
    background:
        radial-gradient(circle at 92% 16%, rgba(224, 183, 72, .20), transparent 36%),
        linear-gradient(135deg, rgba(239, 250, 243, 1), rgba(255, 255, 255, .96));
}

.article-nav a:hover::after {
    background: #0d6b3d;
    color: #fff;
    transform: none;
}

.article-nav .nav-previous:hover::after,
.article-nav .nav-next:hover::after {
    transform: none;
}

@media (max-width: 767px) {
    .article-nav {
        grid-template-columns: 1fr;
        padding: 8px;
        border-radius: 20px;
    }

    .article-nav::before {
        inset: 50% 14px auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(13, 107, 61, .14), transparent);
    }

    .article-nav a,
    .article-nav .nav-next,
    .article-nav .nav-previous {
        min-height: 126px;
        padding: 22px 72px 22px 24px;
        text-align: left;
    }

    .article-nav .nav-previous {
        padding-left: 72px;
        padding-right: 24px;
    }

    .article-nav a::after {
        right: 22px;
        bottom: 22px;
    }

    .article-nav .nav-previous::after {
        left: 22px;
        right: auto;
    }

    .article-nav .nav-next strong,
    .article-nav .nav-next b {
        font-size: clamp(18px, 5vw, 22px);
    }
}

/* -------------------------------------------------------------------------
 * Article reading path - final layout
 * ---------------------------------------------------------------------- */
.article-reading-path.article-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: clamp(40px, 5vw, 64px) 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.article-reading-path.article-nav::before {
    display: none;
}

.article-reading-path .reading-next,
.article-reading-path .reading-previous {
    text-decoration: none;
}

.article-reading-path .reading-next {
    display: grid;
    grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
    min-height: 220px;
    gap: 0;
    padding: 0;
    border: 1px solid rgba(13, 107, 61, .13);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(7, 61, 35, .09);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.article-reading-path .reading-next::before,
.article-reading-path .reading-next::after,
.article-reading-path .reading-previous::before,
.article-reading-path .reading-previous::after {
    display: none;
}

.article-reading-path .reading-next figure {
    min-height: 220px;
    margin: 0;
    background: linear-gradient(135deg, rgba(13, 107, 61, .10), rgba(224, 183, 72, .10));
    overflow: hidden;
}

.article-reading-path .reading-next figure img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.article-reading-path .reading-next figure svg {
    width: 46px;
    height: 46px;
    margin: 86px auto 0;
    color: rgba(13, 107, 61, .36);
}

.article-reading-path .reading-next-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 38px);
}

.article-reading-path .reading-next span,
.article-reading-path .reading-previous span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    color: rgba(5, 85, 48, .62);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.article-reading-path .reading-next span::after {
    content: "";
    width: 46px;
    height: 1px;
    background: rgba(224, 183, 72, .48);
}

.article-reading-path .reading-next strong {
    max-width: 620px;
    color: #075f35;
    font-size: clamp(24px, 2.55vw, 34px);
    line-height: 1.16;
    font-weight: 850;
    letter-spacing: 0;
}

.article-reading-path .reading-next p {
    max-width: 560px;
    margin: 0;
    color: rgba(4, 62, 36, .68);
    font-size: 15.5px;
    line-height: 1.75;
}

.article-reading-path .reading-next em {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(13, 107, 61, .08);
    color: #0d6b3d;
    font-style: normal;
    font-size: 14px;
    font-weight: 800;
    transition: background .25s ease, color .25s ease;
}

.article-reading-path .reading-next:hover {
    border-color: rgba(13, 107, 61, .24);
    box-shadow: 0 26px 68px rgba(7, 61, 35, .12);
    transform: translateY(-2px);
}

.article-reading-path .reading-next:hover figure img {
    transform: scale(1.035);
}

.article-reading-path .reading-next:hover em {
    background: #0d6b3d;
    color: #fff;
}

.article-reading-path .reading-previous {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(13, 107, 61, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
    color: #075f35;
    transition: border-color .25s ease, background .25s ease;
}

.article-reading-path .reading-previous span {
    flex: 0 0 auto;
}

.article-reading-path .reading-previous span::before {
    content: "←";
    margin-right: 2px;
    color: #0d6b3d;
    letter-spacing: 0;
}

.article-reading-path .reading-previous span::after {
    display: none;
}

.article-reading-path .reading-previous strong {
    max-width: 520px;
    overflow: hidden;
    color: #075f35;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-reading-path .reading-previous:hover {
    border-color: rgba(13, 107, 61, .22);
    background: #fff;
    transform: none;
}

@media (max-width: 767px) {
    .article-reading-path .reading-next {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 20px;
    }

    .article-reading-path .reading-next figure,
    .article-reading-path .reading-next figure img {
        min-height: 190px;
        aspect-ratio: 16 / 9;
    }

    .article-reading-path .reading-next-content {
        padding: 22px;
    }

    .article-reading-path .reading-next strong {
        font-size: clamp(22px, 7vw, 28px);
    }

    .article-reading-path .reading-previous {
        width: 100%;
        border-radius: 18px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .article-reading-path .reading-previous strong {
        max-width: 100%;
        white-space: normal;
    }
}

/* -------------------------------------------------------------------------
 * Article previous link alignment fix
 * ---------------------------------------------------------------------- */
.article-reading-path .reading-previous {
    width: auto;
    max-width: min(720px, 100%);
    min-height: 0;
    margin: 2px 0 0 clamp(12px, 3vw, 34px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    align-items: baseline;
    color: #075f35;
}

.article-reading-path .reading-previous span {
    grid-column: 1 / -1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: rgba(5, 85, 48, .58);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}

.article-reading-path .reading-previous span::before {
    content: "←";
    margin-right: 0;
    color: #0d6b3d;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
}

.article-reading-path .reading-previous strong {
    grid-column: 1 / -1;
    max-width: 100%;
    color: #075f35;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.4;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.article-reading-path .reading-previous:hover {
    background: transparent;
    border-color: transparent;
}

.article-reading-path .reading-previous:hover strong {
    text-decoration: underline;
    text-decoration-color: rgba(13, 107, 61, .28);
    text-underline-offset: 4px;
}

@media (max-width: 767px) {
    .article-reading-path .reading-previous {
        margin-left: 4px;
        padding: 0 4px;
        border-radius: 0;
        width: auto;
        align-items: baseline;
    }
}


/* =========================================================================
 * TRANG CHI TIẾT SẢN PHẨM — bố cục sạch, nền trắng/xám nhạt.
 * (Khối DUY NHẤT — đã gộp & dọn ~10 bản trùng cũ. Sửa ở đây là ăn ngay.)
 * ========================================================================= */
.cph .product-detail { align-items: start; }

/* ----- Khung ảnh: cột thumbnail dọc bên trái + ảnh chính bên phải ----- */
.cph .product-media {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.cph .product-media .pm-thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.cph .product-media .pm-main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    /* KHÔNG đổ nền màu — để nguyên nền có sẵn trong ảnh, chỉ bo 4 góc. */
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    line-height: 0;
}
.cph .product-media .pm-main img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    transform: none !important;
    background: transparent !important;
    filter: none !important;
}
.cph .product-media .pm-thumb {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cph .product-media .pm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
    border-radius: 10px;
}
.cph .product-media .pm-thumb:hover {
    border-color: color-mix(in oklch, var(--emerald) 55%, transparent);
}
.cph .product-media .pm-thumb.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--gold) 30%, transparent);
}

/* ----- Cột thông tin ----- */
.cph .product-title {
    margin: .4rem 0 0;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    line-height: 1.15;
    font-weight: 800;
    color: var(--emerald-deep);
}

/* ----- Khối cam kết (tăng độ tin cậy) ----- */
.cph .product-assurance {
    margin-top: 1.75rem;
    display: grid;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(23, 99, 58, .12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f6faf7);
}
.cph .product-assurance .pa-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
    color: var(--emerald-deep);
}
.cph .product-assurance .pa-item svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--emerald);
}

/* ----- Sản phẩm khác ----- */
.cph .product-others { margin-top: 3.5rem; }
.cph .product-others .prod-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.cph .product-others .prod-item .media {
    padding: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: transparent;
    overflow: hidden;
}
.cph .product-others .prod-item .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    background: transparent;
}
.cph .product-others .prod-item p {
    margin-top: .6rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ----- Responsive ----- */
@media (max-width: 899px) {
    .cph .product-media { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
    .cph .product-media .pm-thumb { width: 70px; height: 70px; }
    .cph .product-others .prod-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .cph .product-media { grid-template-columns: 1fr; }
    .cph .product-media .pm-main { grid-column: 1; grid-row: 1; }
    .cph .product-media .pm-thumbs {
        grid-column: 1; grid-row: 2;
        flex-direction: row; flex-wrap: wrap; justify-content: center;
    }
    .cph .product-media .pm-thumb { width: 58px; height: 58px; }
}

/* Mobile: "Sản phẩm khác" gọn 3 cột — giống lưới sản phẩm trang chủ. */
@media (max-width: 767px) {
  .cph .product-others { margin-top: 2.5rem; }
  .cph .product-others .prod-list { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .cph .product-others .prod-item { padding: 0.5rem; border-radius: 0.85rem; }
  .cph .product-others .prod-item .media {
    margin: -0.5rem -0.5rem 0.5rem;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .cph .product-others .prod-item .chip { display: none; }
  .cph .product-others .prod-item h3 {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cph .product-others .prod-item p { display: none; }
  .cph .product-others .prod-item .link-more { margin-top: 0.35rem; font-size: 0.7rem; }
  .cph .product-others .prod-item .link-more svg { width: 0.85rem; height: 0.85rem; }
}

/* -------------------------------------------------------------------------
 * Tiêu đề trang (h1) cho các trang con — hỗ trợ SEO + định hướng người dùng.
 * ---------------------------------------------------------------------- */
.cph .page-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding-top: clamp(1.75rem, 1rem + 2vw, 3rem);
}
.cph .page-head h1 {
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    line-height: 1.12;
    margin: .5rem 0 .75rem;
}
.cph .page-head p {
    color: var(--muted-foreground);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * Breadcrumb (trang chi tiết sản phẩm) — định hướng quay lại danh mục.
 * ---------------------------------------------------------------------- */
.cph .cph-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--muted-foreground);
    margin-bottom: 1.25rem;
}
.cph .cph-breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.cph .cph-breadcrumb a:hover { color: var(--emerald); }
.cph .cph-breadcrumb span[aria-current] { color: var(--emerald-deep); font-weight: 600; }

/* -------------------------------------------------------------------------
 * Trang 404 thân thiện
 * ---------------------------------------------------------------------- */
.cph .error-404 { text-align: center; }
.cph .error-404-inner { max-width: 720px; margin: 0 auto; }
.cph .error-404-code {
    font-size: clamp(4.5rem, 3rem + 12vw, 9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--emerald), var(--emerald-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .5rem;
}
.cph .error-404 h1 { margin: .25rem 0 .75rem; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
.cph .error-404 p { color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.65; }
.cph .error-404-actions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    justify-content: center; margin: 1.75rem 0 0;
}
.cph .error-404-suggest { margin-top: 3.5rem; }
.cph .error-404-suggest .prod-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 899px) { .cph .error-404-suggest .prod-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cph .error-404-suggest .prod-list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
 * Honeypot chống spam (ẩn với người, lộ với bot) + khoá cuộn khi mở menu
 * + phản hồi khi bấm (mobile) + trạng thái nút đang gửi.
 * ---------------------------------------------------------------------- */
.cph .cph-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
body.cph-nav-open { overflow: hidden; }

@media (hover: none) {
    .cph .btn-primary:active, .cph .btn-gold:active, .cph .btn-ghost:active,
    .cph .btn-white:active, .cph .btn-outline-white:active, .cph .link-more:active {
        transform: scale(.97);
    }
}
.cph button[aria-busy="true"] { opacity: .75; cursor: progress; pointer-events: none; }

/* -------------------------------------------------------------------------
 * Mục lục tự động trong bài viết (.cph-toc) — gập/mở bằng <details>, không cần JS.
 * ---------------------------------------------------------------------- */
.cph .cph-toc {
    margin: 1.5rem 0 2.25rem;
    padding: 1rem 1.35rem;
    border: 1px solid color-mix(in oklch, var(--emerald-deep) 14%, transparent);
    border-left: 4px solid var(--emerald);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f4f9f5);
    box-shadow: 0 10px 28px rgba(7, 61, 35, .05);
}
.cph .cph-toc-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--emerald-deep);
}
.cph .cph-toc-summary::-webkit-details-marker { display: none; }
.cph .cph-toc-summary::before {
    content: "";
    width: 0; height: 0;
    border-left: 7px solid var(--emerald);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .2s ease;
}
.cph .cph-toc[open] .cph-toc-summary::before { transform: rotate(90deg); }
.cph .cph-toc[open] .cph-toc-summary { margin-bottom: .85rem; }
.cph .cph-toc-list { margin: 0; padding-left: 1.1rem; list-style: none; }
.cph .cph-toc-list li { margin: .4rem 0; line-height: 1.5; position: relative; }
.cph .cph-toc-list li::before {
    content: "";
    position: absolute;
    left: -1.05rem; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--emerald) 55%, transparent);
}
.cph .cph-toc-list a { color: var(--foreground); text-decoration: none; }
.cph .cph-toc-list a:hover { color: var(--emerald); text-decoration: underline; }
.cph .cph-toc-l3 { margin-left: 1.25rem; font-size: .95em; }
.cph .cph-toc-l3::before { background: color-mix(in oklch, var(--emerald) 30%, transparent); }

/* -------------------------------------------------------------------------
 * Trang chi tiết sản phẩm — Bảng thông số kỹ thuật (chuyên nghiệp)
 * ---------------------------------------------------------------------- */
.product-body { margin-top: 2.5rem; display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 980px) {
	.product-body.has-specs { grid-template-columns: minmax(300px, 360px) 1fr; gap: 2.25rem; }
	.product-body.has-specs .product-specs { position: sticky; top: 1.25rem; }
}
.product-body .product-desc { margin-top: 0; }

.product-specs { padding: 0; overflow: hidden; }
.product-specs .ps-head {
	display: flex; align-items: center; gap: .55rem;
	margin: 0; padding: 1rem 1.25rem;
	font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
	color: #fff;
	background: linear-gradient(100deg, var(--emerald-deep), var(--emerald));
}
.product-specs .ps-head svg { width: 1.15rem; height: 1.15rem; color: var(--accent-light); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table thead th {
	text-align: left; padding: .6rem 1.25rem;
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--muted-foreground); background: var(--muted);
	border-bottom: 1px solid var(--border);
}
.spec-table thead th:last-child { text-align: right; }
.spec-table tbody th {
	text-align: left; font-weight: 500; color: var(--foreground);
	padding: .62rem 1.25rem; border-bottom: 1px solid var(--border);
}
.spec-table tbody td {
	text-align: right; font-weight: 700; color: var(--emerald-deep); white-space: nowrap;
	padding: .62rem 1.25rem; border-bottom: 1px solid var(--border);
	font-variant-numeric: tabular-nums;
}
.spec-table tbody tr:nth-child(even) th,
.spec-table tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--cream) 60%, #fff); }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }

/* Nhấn các chỉ tiêu chính (Đạm – Lân – Kali – Hữu cơ) */
.spec-table tr.is-primary th { color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
.spec-table tr.is-primary th,
.spec-table tr.is-primary td { background: var(--sky-soft) !important; }
.spec-table tr.is-primary td { color: var(--emerald-deep); font-size: 1rem; }

.spec-note {
	margin: 0; padding: .8rem 1.25rem 1rem;
	font-size: .78rem; line-height: 1.5; font-style: italic; color: var(--muted-foreground);
	background: color-mix(in oklch, var(--cream) 60%, #fff);
}

/* Quy cách đóng gói */
.product-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.product-sizes .ps-label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--muted-foreground); font-size: .92rem; }
.product-sizes .ps-label svg { width: 1rem; height: 1rem; color: var(--emerald); }
.size-chip {
	display: inline-block; padding: .32rem .8rem; border-radius: 999px;
	font-size: .85rem; font-weight: 600; color: var(--emerald-deep);
	background: var(--sky-soft); border: 1px solid var(--border);
}

/* -------------------------------------------------------------------------
 * NÂNG CẤP UX (Phase 1-2): thanh CTA nổi mobile · hero mobile · card hover
 * ---------------------------------------------------------------------- */

/* Thanh CTA nổi đáy màn hình — chỉ mobile */
.mobile-cta-bar { display: none; }
@media (max-width: 899px) {
	.mobile-cta-bar {
		display: grid; grid-template-columns: repeat(3, 1fr);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: #fff; border-top: 1px solid var(--border);
		box-shadow: 0 -8px 26px -18px oklch(0.28 0.07 162 / 0.45);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.mobile-cta-bar .mcb-item {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		padding: .58rem .25rem; font-size: .72rem; font-weight: 700; line-height: 1; text-decoration: none;
		color: var(--emerald-deep);
	}
	.mobile-cta-bar .mcb-item svg { width: 1.35rem; height: 1.35rem; }
	.mobile-cta-bar .mcb-item + .mcb-item { border-left: 1px solid var(--border); }
	.mobile-cta-bar .mcb-zalo { color: #0068FF; }
	.mobile-cta-bar .mcb-advise { color: #fff; background: linear-gradient(180deg, var(--gold), var(--harvest)); }
	.mobile-cta-bar .mcb-item:active { filter: brightness(0.94); }

	/* chừa chỗ cho thanh; đẩy FAB lên & bỏ Zalo/phone trùng */
	body.cph { padding-bottom: 4.4rem; }
	.floating-contact { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0)); }
	.floating-contact .fc-zalo, .floating-contact .fc-phone { display: none; }

	/* hero: tối đều hơn để chữ trắng luôn đọc rõ trên vùng nắng sáng */
	.hero-full-overlay {
		background: linear-gradient(180deg,
			color-mix(in oklch, var(--emerald-deep) 64%, transparent) 0%,
			color-mix(in oklch, var(--emerald-deep) 56%, transparent) 45%,
			color-mix(in oklch, var(--emerald-deep) 88%, transparent) 100%);
	}
	/* chặn tràn ngang toàn cục */
	html, body { overflow-x: hidden; max-width: 100%; }
}

/* Card nhấc nhẹ + viền vàng khi hover (sản phẩm, bài viết) */
.prod-card, .prod-item, .blog-card {
	transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out);
}
@media (hover: hover) {
	.prod-card:hover, .prod-item:hover, .blog-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-elegant);
		border-color: color-mix(in oklch, var(--gold) 45%, transparent);
	}
}

/* Fix overflow hero trên mobile — chữ & chip vừa khít màn hình */
@media (max-width: 767px) {
	.hero-full-content { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 2.5rem 1rem; }
	.hero-copy, .hero-actions, .hero-trust { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
	.hero-actions > a { max-width: 100%; box-sizing: border-box; }
	.hero-full .hero-title { font-size: clamp(2rem, 8.4vw, 2.9rem); line-height: 1.08; overflow-wrap: anywhere; }
	.hero-full .hero-sub { font-size: 1rem; max-width: 100%; overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------------------
 * Khung ảnh sản phẩm: ảnh PHỦ KÍN khung (không viền trắng), bo góc TRÊN theo
 * card (nhờ khung .media có border-radius trên + overflow:hidden), góc dưới vuông.
 * ---------------------------------------------------------------------- */
.prod-card .media img,
.prod-item .media img {
	object-fit: cover !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 0 !important;
}

/* -------------------------------------------------------------------------
 * Header nav — pill mềm khi hover + active pill tinh tế (KHÔNG gạch chân)
 * ---------------------------------------------------------------------- */
.main-nav a:not(.is-active):hover {
	color: var(--emerald-deep);
	background: color-mix(in oklch, var(--emerald) 10%, transparent);
}
.main-nav a.is-active {
	background: linear-gradient(180deg,
		color-mix(in oklch, var(--emerald) 16%, #fff) 0%,
		color-mix(in oklch, var(--emerald) 9%, #fff) 100%) !important;
	box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--emerald) 18%, transparent);
}

/* ============================================================
   PHÂN TRANG (Cẩm nang / listing) — trước · số trang · sau
   ============================================================ */
.cph-pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem;
}
.cph-page-arrow,
.cph-page-num,
.cph-pagination .page-numbers {   /* .page-numbers: archive/search (paginate_links) */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card);
  color: var(--foreground); font-weight: 700; font-size: 0.9rem;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.cph-page-arrow span,
.cph-pagination .page-numbers span { line-height: 1; }
.cph-page-num.is-current,
.cph-pagination .page-numbers.current {
  background: var(--emerald-deep); color: #fff; border-color: var(--emerald-deep);
}
.cph-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
.cph-page-nums { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (hover: hover) and (pointer: fine) {
  .cph-page-arrow:hover,
  .cph-page-num:not(.is-current):hover,
  .cph-pagination a.page-numbers:not(.current):hover {
    background: var(--secondary);
    border-color: color-mix(in oklch, var(--emerald) 30%, transparent);
    transform: translateY(-1px);
  }
}
.cph-page-arrow.is-disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
@media (max-width: 480px) {
  .cph-page-arrow span,
  .cph-pagination .prev span,
  .cph-pagination .next span { display: none; }   /* mobile: chỉ hiện mũi tên */
  .cph-page-arrow,
  .cph-pagination .prev,
  .cph-pagination .next { min-width: 2.5rem; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cph-page-arrow, .cph-page-num, .cph-pagination .page-numbers { transition: none; }
}

/* ============================================================
   LANDING KHÓA HỌC (template-khoa-hoc.php)
   ============================================================ */
.kh-hero { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--emerald-deep), color-mix(in oklch, var(--emerald-deep) 64%, var(--teal)));
  padding: 3rem 0; }
.kh-hero .grid-bg { position: absolute; inset: 0; opacity: 0.5; }
.kh-hero-inner { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.kh-hero h1, .kh-hero-title { color: #fff; }
.kh-hero-title { font-size: var(--fs-display); line-height: 1.08; }
.kh-hero-sub { margin-top: 1rem; font-size: var(--fs-body); color: rgba(255,255,255,0.86); max-width: 34rem; line-height: 1.6; }
.kh-hero .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; }
.kh-hero .hero-badge .dot { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--accent-light); }
.kh-hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.75rem; }
.kh-stat { display: flex; flex-direction: column; }
.kh-stat .num { font-size: 1.75rem; font-weight: 800; color: var(--gold); line-height: 1.1; }
.kh-stat .lbl { font-size: 0.8rem; color: rgba(255,255,255,0.78); }
.kh-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.kh-hero-media { position: relative; }
.kh-hero-img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-4); aspect-ratio: 4 / 3; object-fit: cover; }
.kh-hero-ph { display: flex; align-items: center; justify-content: center; gap: 1rem; background: rgba(255,255,255,0.08); color: #fff; }
.kh-price-tag { position: absolute; bottom: -1.25rem; left: 1rem; display: flex; flex-direction: column; padding: 0.85rem 1.2rem; gap: 0.05rem; }
.kh-price-old { text-decoration: line-through; color: var(--muted-foreground); font-size: 0.9rem; }
.kh-price-now { font-size: 1.5rem; font-weight: 800; color: var(--emerald-deep); }
.kh-price-note { font-size: 0.78rem; color: var(--muted-foreground); }
@media (min-width: 1024px) {
  .kh-hero { padding: 4.5rem 0; }
  .kh-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.kh-benefits { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.kh-benefit { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem; font-weight: 600; }
.kh-benefit-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; background: color-mix(in oklch, var(--emerald) 14%, transparent); color: var(--emerald-deep); }
@media (min-width: 640px) { .kh-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kh-benefits { grid-template-columns: repeat(3, 1fr); } }

.kh-modules { display: grid; gap: 1rem; }
.kh-module { padding: 1.5rem; }
.kh-module-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.kh-module-no { flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.7rem; background: var(--emerald-deep); color: #fff; font-weight: 800; }
.kh-module-head h3 { font-size: 1.1rem; }
.kh-lessons { display: flex; flex-direction: column; gap: 0.5rem; }
.kh-lessons li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted-foreground); }
.kh-lessons svg { color: var(--emerald); flex-shrink: 0; }
@media (min-width: 768px) { .kh-modules { grid-template-columns: repeat(2, 1fr); } }

.kh-instructor { display: grid; gap: 1.5rem; padding: 2rem; }
.kh-ins-photo { width: 9rem; height: 9rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kh-ins-photo img { width: 100%; height: 100%; object-fit: cover; }
.kh-ins-title { color: var(--emerald); font-weight: 700; margin: 0.4rem 0 0.85rem; }
@media (min-width: 768px) { .kh-instructor { grid-template-columns: auto 1fr; align-items: center; } .kh-ins-photo { width: 12rem; height: 12rem; } }

.kh-enroll { display: grid; gap: 1.5rem; }
.kh-pricing { padding: 2rem; }
.kh-pricing-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.kh-pricing .kh-price-now { font-size: 2.25rem; }
.kh-included { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
.kh-included li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.kh-included svg { color: var(--emerald); flex-shrink: 0; }
.kh-form { padding: 2rem; }
.kh-form h2 { margin-bottom: 0.25rem; }
@media (min-width: 900px) { .kh-enroll { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

.kh-faq { display: flex; flex-direction: column; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.kh-faq-item { padding: 0; overflow: hidden; }
.kh-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; font-weight: 700; color: var(--emerald-deep); }
.kh-faq-item summary::-webkit-details-marker { display: none; }
.kh-faq-item summary svg { transition: transform 0.24s var(--ease-out); flex-shrink: 0; }
.kh-faq-item[open] summary svg { transform: rotate(180deg); }
.kh-faq-item p { padding: 0 1.5rem 1.25rem; color: var(--muted-foreground); line-height: 1.6; margin: 0; }

.kh-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-floating); background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px -18px rgba(0,0,0,0.25); transform: translateY(110%); transition: transform 0.3s var(--ease-out); }
.kh-sticky.show { transform: translateY(0); }
.kh-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.25rem; }
.kh-sticky-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kh-sticky-info strong { font-size: 0.9rem; color: var(--emerald-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }
.kh-sticky-info span { font-size: 0.85rem; color: var(--gold); font-weight: 800; }

/* Trang khóa học: ẩn thanh CTA mobile chung để tránh đè thanh đăng ký khóa học */
.kh-page .mobile-cta-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .kh-sticky, .kh-faq-item summary svg { transition: none; } }

/* ============================================================
   PHASE 2 — ATOMS: chuẩn hoá vùng chạm (touch target ≥ 44x44px)
   Theo khuyến nghị Apple HIG / Google Material cho thao tác ngón tay.
   Đặt cuối file để "last-wins" an toàn, gom 1 chỗ dễ rà soát/rollback.
   ============================================================ */

/* Nút mở menu (hamburger) — trước ~41.6px */
.menu-toggle {
  /* KHÔNG đặt display ở đây — để @media (min-width:1024px){display:none}
     vẫn ẩn được hamburger trên desktop. display:inline-flex đã có ở rule gốc. */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;          /* bỏ padding lệch để icon căn giữa tuyệt đối */
  line-height: 0;      /* tránh khoảng baseline đẩy icon lệch dọc */
  margin-top: 4px;     /* xịt nút hamburger xuống một chút cho cân với logo */
}
.menu-toggle svg,
.menu-toggle .icon { display: block; }

/* Nút bung menu con (accordion) trong mobile nav — trước 38.4px */
.m-nav-toggle {
  width: 44px;
  height: 44px;
}

/* Liên kết trong mobile nav — trước ~42.6px */
.mobile-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Nút lọc (sản phẩm / cẩm nang) — trước ~35px */
.filter-btn {
  min-height: 44px;
}

/* Mobile: hàng nút lọc cuộn ngang 1 dòng (gọn, không tràn nhiều hàng) */
@media (max-width: 767px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
            mask-image: linear-gradient(to right, #000 86%, transparent);
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    min-height: 2.35rem;
  }
  .filter-label { margin-bottom: 0.9rem; }
}

/* Chỉ áp cho thiết bị cảm ứng: nới vùng chạm cho liên kết footer & menu PC
   khi xem trên tablet/touch, không ảnh hưởng chuột trên desktop. */
@media (hover: none) {
  .footer-col a,
  .main-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   PHASE 6 — FIX: icon nút nổi (floating) quá nhỏ trông như chấm.
   Phóng to icon trong nút Zalo/Gọi và nút "lên đầu trang" cho rõ.
   CSS width/height đè thuộc tính width của <svg> (kể cả svg do JS chèn).
   ============================================================ */
.floating-contact a svg {
  width: 1.6rem !important;
  height: 1.6rem !important;
  max-width: none !important;
}
/* Nút "lên đầu trang": ẩn svg do JS chèn (bị Flatsome ép kích thước thành chấm);
   mũi tên được vẽ bằng background-image của chính nút ở khối bên dưới. */
.cph-top svg { display: none !important; }

/* ============================================================
   FIX: nút "lên đầu trang" (.cph-top) nền xanh trùng màu footer xanh
   nên nhìn như cục blob. Đổi nền trắng + mũi tên xanh đậm + viền + bóng
   để nổi rõ trên cả footer xanh lẫn nền sáng.
   ============================================================ */
.cph-top,
.floating-contact .cph-top,
.floating-contact.is-over-footer .cph-top {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2317633A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 1.45rem no-repeat !important;
  color: var(--emerald-deep) !important;
  border: 1px solid color-mix(in oklch, var(--emerald) 24%, #fff) !important;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.45) !important;
}
.cph-top:hover,
.floating-contact .cph-top:hover {
  color: var(--emerald) !important;
}

/* ============================================================
   FIX: thẻ "Phòng lab đạt chuẩn" (.intro-badge) bị rơi khỏi vị trí
   absolute (do Flatsome/cache đè) → trôi lơ lửng dưới-trái ảnh.
   Neo chắc lại bằng specificity cao + !important: dính góc dưới-trái ảnh,
   thò nhẹ ra ngoài cho nổi khối, không lấn sang cột chữ.
   ============================================================ */
.intro .intro-img { position: relative; }
.intro .intro-img .intro-badge {
  position: absolute !important;
  right: -1.5rem;
  left: auto;
  bottom: -1.5rem;
  max-width: 20rem;
  margin: 0;
  z-index: 2;
}
@media (max-width: 767px) {
  .intro .intro-img .intro-badge { display: none; }
}

/* ============================================================
   MOBILE: lưới sản phẩm trang chủ 3 cột (gọn như PC) — yêu cầu chủ site.
   Thu nhỏ card cho vừa 3 cột: ẩn chip & mô tả dài, tên rút 2 dòng,
   giữ ảnh + tên + link "Xem chi tiết".
   ============================================================ */
@media (max-width: 767px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .prod-grid .prod-card { padding: 0.5rem; border-radius: 0.85rem; }
  .prod-grid .prod-card .media {
    margin: -0.5rem -0.5rem 0.5rem;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .prod-grid .prod-card .chip { display: none; }
  .prod-grid .prod-card h3 {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-grid .prod-card p { display: none; }
  .prod-grid .prod-card .link-more { margin-top: 0.35rem; font-size: 0.7rem; }
  .prod-grid .prod-card .link-more svg { width: 0.85rem; height: 0.85rem; }
}

/* ============================================================
   MOBILE: trang /san-pham/ (.prod-list) gọn 3 cột — giống lưới sản phẩm
   trang chủ. Ẩn chip & mô tả, giữ ảnh + tên (2 dòng) + giá + "Xem chi tiết".
   ============================================================ */
@media (max-width: 767px) {
  .prod-list { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .prod-list .prod-item { padding: 0.5rem; border-radius: 0.85rem; }
  .prod-list .prod-item .media {
    margin: -0.5rem -0.5rem 0.5rem;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .prod-list .prod-item .chip { display: none; }
  .prod-list .prod-item h3 {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-list .prod-item .stage { margin-top: 0.2rem; font-size: 0.72rem; }
  .prod-list .prod-item p { display: none; }
  .prod-list .prod-item .link-more { margin-top: 0.35rem; font-size: 0.7rem; }
  .prod-list .prod-item .link-more svg { width: 0.85rem; height: 0.85rem; }
}

/* ============================================================
   MOBILE: lưới bài viết trang chủ nhiều cột (gọn như PC) — yêu cầu chủ site.
   2 cột (tiêu đề bài dài hơn sản phẩm nên 2 cột dễ đọc): ảnh + danh mục +
   tiêu đề 2 dòng + ngày; ẩn tóm tắt dài cho card đều & gọn.
   ============================================================ */
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .blog-grid .blog-card { padding: 0.55rem; border-radius: 0.85rem; }
  .blog-grid .blog-card .media {
    margin: -0.55rem -0.55rem 0.55rem;
    border-radius: 0.7rem 0.7rem 0 0;
    aspect-ratio: 16 / 10;
  }
  .blog-grid .blog-card .cat { font-size: 0.62rem; }
  .blog-grid .blog-card h3 {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-grid .blog-card .excerpt { display: none; }
  .blog-grid .blog-card .date { margin-top: 0.4rem; font-size: 0.68rem; }
  .blog-grid .blog-card .link-more { margin-top: 0.45rem; font-size: 0.7rem; }
  .blog-grid .blog-card .link-more svg { width: 0.85rem; height: 0.85rem; }
}

/* ============================================================
   FIX: slogan dưới logo luôn 1 hàng (không xuống dòng).
   Bỏ max-width gây wrap + nowrap. (≤480px slogan vốn đã ẩn.)
   ============================================================ */
.brand-text .brand-sub { white-space: nowrap; }
@media (max-width: 1023px) {
  .brand-text .brand-sub { max-width: none; }
}
@media (max-width: 767px) {
  .brand-text .brand-sub { max-width: none; }
}

/* ============================================================
   FIX HEADER DESKTOP: slogan 1 hàng làm rộng khối brand -> bóp menu
   khiến chữ menu & SĐT xuống 2 dòng. Giải pháp: menu + CTA không co,
   không wrap; khối brand là phần co được (slogan cắt '…' khi quá hẹp).
   ============================================================ */
@media (min-width: 1024px) {
  .main-nav { flex-shrink: 0; }
  .main-nav a { white-space: nowrap; padding-inline: 0.7rem; }
  .header-cta { flex-shrink: 0; }
  .header-phone { white-space: nowrap; }
  .brand-logo { min-width: 0; flex-shrink: 1; }
  .brand-text { min-width: 0; overflow: hidden; }
  /* giảm giãn cách slogan để vừa 1 hàng đầy đủ, chỉ cắt '…' khi rất hẹp */
  .brand-text .brand-sub { overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05em; }
}

/* ============================================================
   PHASE A1 — Đánh giá nhà vườn: .testi-card là <button> nên bị
   Flatsome ép text-transform:uppercase -> chữ HOA khó đọc. Trả về chữ thường.
   ============================================================ */
.testi-card,
.testi-card p,
.testi-card .name,
.testi-card .place {
  text-transform: none;
  letter-spacing: normal;
}

/* ============================================================
   ĐẶC SẮC HÓA TRANG CHỦ — Bước 1: chiều sâu & nhịp thị giác
   Thuần CSS, cộng thêm (additive). KHÔNG đụng markup PHP.
   Gỡ: xóa nguyên khối này là về y như cũ.
   ============================================================ */

/* 1) Vân chấm tinh tế cho các band phẳng (mint/ivory/sky) — bớt cảm giác khối màu trơn */
.home-band::before {
  background-image: radial-gradient(color-mix(in oklch, var(--emerald) 16%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
}

/* 2) Gạch vàng trang trí dưới tiêu đề section — cảm giác "được thiết kế", không default */
.section-head h2::after,
.center-head h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, color-mix(in oklch, var(--gold) 25%, transparent) 100%);
}
.center-head h2::after { margin-inline: auto; }
/* Section nền tối (Giai đoạn): gạch sáng hơn cho nổi trên nền xanh đậm */
.stages-section .center-head h2::after { background: linear-gradient(90deg, #F0CA70, transparent); }

/* 3) Icon USP có chiều sâu: phủ lớp sheen + đổ bóng màu thay vì nền phẳng */
.usp-card .usp-ico {
  background-image: linear-gradient(140deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 22px -16px rgba(23,99,58,0.55);
}

/* ============================================================
   ĐẶC SẮC HÓA TRANG CHỦ — Bước 2: card có chiều sâu
   Thuần CSS, additive. Gỡ: xóa nguyên khối này.
   ============================================================ */

/* Bóng 2 lớp → chiều sâu thực hơn bóng phẳng 1 lớp */
.usp-card, .prod-card, .blog-card {
  box-shadow: 0 2px 4px rgba(23,75,55,0.045), 0 20px 44px -30px rgba(23,75,55,0.30);
}
.usp-card:hover, .prod-card:hover, .blog-card:hover {
  box-shadow: 0 3px 8px rgba(23,75,55,0.06), 0 32px 62px -34px rgba(23,75,55,0.36);
}

/* Stage cards (nền xanh đậm) — chỗ phẳng nhất: thêm gạch sáng đỉnh + glow sau icon */
.stage-card::after {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(240,202,112,0.85), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.stage-card .ico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 26px -16px rgba(240,202,112,0.5);
}
.stage-card:hover { transform: translateY(-4px); }
.stage-card:hover::after { opacity: 1; }

/* ============================================================
   ĐẶC SẮC HÓA TRANG CHỦ — Bước 3: tách khối bằng "panel nổi"
   2 section màu đặc (thanh số liệu + giai đoạn) bo góc + lề hai bên
   → thoát cảm giác full-bleed khối nối khối. Thuần CSS, additive.
   ============================================================ */
.trust-bar, .stages-section {
  border-radius: 1.5rem;
  margin-inline: 1rem;
}
.stages-section { box-shadow: 0 30px 70px -50px rgba(0,0,0,0.55); }
.trust-bar { box-shadow: 0 24px 50px -40px rgba(23,99,58,0.55); }
@media (min-width: 768px) {
  .trust-bar, .stages-section { border-radius: 2.25rem; margin-inline: 2rem; }
}

/* ---------- Đẩy logo sang phải (thế chỗ chữ thương hiệu đã bỏ) ---------- */
@media (min-width: 1024px) {
  .site-header .brand-logo { margin-left: clamp(2rem, 7vw, 7rem); }
}
@media (min-width: 768px) {
  .site-footer .brand { margin-left: clamp(1rem, 4vw, 4rem); }
}
/* Logo header nhỏ lại một chút cho cân với menu (footer giữ nguyên) */
@media (min-width: 768px) {
  .site-header .site-logo-img, .site-header .brand-logo .custom-logo { height: 52px; }
}


/* ===== [Agent] Section "Vì sao chọn học" (home-trust) ===== */
/* =========================================================================
 * home-trust.css — Section "Vì sao chọn học cùng <brand>" (social-proof)
 * Tokens dùng: --emerald-deep, --emerald, --gold, --cream, --muted-foreground,
 *              --border, --radius, --shadow-soft, --ease-out, --font-display.
 * Scope: .home-trust .trust-item (tránh đụng .trust-bar đã bị xoá).
 * ========================================================================= */

.home-trust {
	background:
		radial-gradient(120% 80% at 50% 0%, var(--cream) 0%, transparent 60%),
		var(--background, #fff);
}

.home-trust .trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.home-trust .trust-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
}

.home-trust .trust-item:hover {
	transform: translateY(-4px);
	border-color: color-mix(in oklch, var(--emerald) 30%, var(--border));
	box-shadow: 0 22px 46px -30px oklch(0.30 0.085 152 / 0.40);
}

/* Icon trong ô bo tròn nền xanh nhạt */
.home-trust .trust-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.9rem;
	background: color-mix(in oklch, var(--emerald) 12%, var(--cream));
	color: var(--emerald-deep);
}

.home-trust .trust-item-icon .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.home-trust .trust-item:hover .trust-item-icon {
	background: color-mix(in oklch, var(--gold) 22%, var(--cream));
	color: var(--emerald-deep);
}

.home-trust .trust-item h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.075rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--emerald-deep);
}

.home-trust .trust-item p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--muted-foreground);
}

/* Lưới responsive: 1 cột → 2 (≥640) → 4 (≥1024) */
@media (min-width: 640px) {
	.home-trust .trust-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.home-trust .trust-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ===== [Agent] Breadcrumbs ===== */
/* ==========================================================================
   Breadcrumb hiển thị — .cph-crumbs (UX + SEO)
   Token màu: --muted-foreground #5D7568, --emerald #34A866, --border.
   ========================================================================== */

.cph-crumbs {
	/* Hàng ngang, gói gọn xuống dòng trên mobile. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;

	margin: 1rem 0 1.25rem;
	font-size: .8125rem;        /* ~13px, chữ nhỏ */
	line-height: 1.5;
	color: var(--muted-foreground, #5D7568);
}

/* Liên kết tổ tiên — màu muted, hover thành emerald. */
.cph-crumbs .cph-crumb {
	color: var(--muted-foreground, #5D7568);
	text-decoration: none;
	transition: color .15s ease;
}

.cph-crumbs a.cph-crumb:hover,
.cph-crumbs a.cph-crumb:focus-visible {
	color: var(--emerald, #34A866);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Mục hiện tại — đậm hơn, không bấm được. */
.cph-crumbs .cph-crumb-current {
	color: var(--emerald, #34A866);
	font-weight: 600;
}

/* Dấu phân cách › */
.cph-crumbs .cph-crumb-sep {
	color: var(--border, #D9E2DC);
	user-select: none;
}

/* Mobile: cho phép tên trang dài cắt gọn để không vỡ hàng quá nhiều. */
@media (max-width: 600px) {
	.cph-crumbs {
		font-size: .75rem;
		margin: .75rem 0 1rem;
	}

	.cph-crumbs .cph-crumb-current {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


/* ===== [Agent] Bài viết liên quan ===== */
/* =========================================================================
 * Caophantu Child — "Bài viết liên quan" (internal linking SEO)
 * Khối 3 thẻ bài viết cùng chuyên mục, chèn cuối bài Cẩm nang.
 * Dùng design token dùng chung của theme (:root).
 * ====================================================================== */

.cph-related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border, #DCEBE1);
}

.cph-related > h2 {
	margin: 0 0 1.25rem;
	font-family: var(--font-display, inherit);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	font-weight: 700;
	color: var(--emerald-deep, #17633A);
	line-height: 1.25;
}

/* Lưới: 1 cột mobile → 3 cột ≥ 768px. */
.cph-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.cph-related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Thẻ bài viết
 * ---------------------------------------------------------------------- */
.cph-related-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--card, #fff);
	border: 1px solid var(--border, #DCEBE1);
	border-radius: var(--radius-md, 1rem);
	box-shadow: var(--shadow-soft, 0 4px 16px rgba(23, 99, 58, 0.06));
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cph-related-card:hover,
.cph-related-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--emerald, #34A866);
	box-shadow: 0 12px 28px rgba(23, 99, 58, 0.14);
}

.cph-related-card:focus-visible {
	outline: 2px solid var(--emerald, #34A866);
	outline-offset: 2px;
}

/* Ảnh tỉ lệ 16/10, bo góc trên theo card. */
.cph-related-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--border, #DCEBE1);
}

.cph-related-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cph-related-card:hover .cph-related-img {
	transform: scale(1.05);
}

.cph-related-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.1rem 1.25rem;
}

.cph-related-cat {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--emerald, #34A866);
}

/* Tiêu đề: clamp 2 dòng. */
.cph-related-title {
	font-family: var(--font-display, inherit);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--emerald-deep, #17633A);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cph-related-card:hover .cph-related-title {
	color: var(--emerald, #34A866);
}

/* Khi thẻ không có ảnh: thân thẻ chiếm trọn, vẫn cân đối. */
.cph-related-card:not(:has(.cph-related-thumb)) .cph-related-body {
	padding-top: 1.25rem;
}

/* Giảm chuyển động khi người dùng yêu cầu. */
@media (prefers-reduced-motion: reduce) {
	.cph-related-card,
	.cph-related-img {
		transition: none;
	}

	.cph-related-card:hover {
		transform: none;
	}

	.cph-related-card:hover .cph-related-img {
		transform: none;
	}
}


/* ===== [Agent] Popup ưu đãi ===== */
/**
 * Popup ưu đãi.
 * Thiết kế theo tông Emerald Prestige của caophantu.vn.
 */

.cph-promo {
	--emerald-deep: #17633A;
	--gold: #E6BE5A;
	--card: #fff;
	--radius: 1.25rem;
	--shadow-elegant: 0 1.5rem 3.5rem rgba(15, 43, 28, 0.28);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--muted-foreground: #5D7568;

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;

	/* Trạng thái đóng: mờ dần. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

.cph-promo.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s var(--ease-out);
}

/* Ẩn hoàn toàn khi có thuộc tính hidden (trước khi JS mở). */
.cph-promo[hidden] {
	display: none;
}

/* Lớp phủ mờ toàn màn hình. */
.cph-promo__overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 31, 21, 0.6);
	backdrop-filter: blur(2px);
}

/* Hộp nội dung (card trắng). */
.cph-promo__box {
	position: relative;
	width: 100%;
	max-width: 30rem;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow-elegant);
	padding: 2.5rem 2rem 2rem;
	text-align: center;

	/* Animation scale nhẹ khi mở. */
	transform: scale(0.94) translateY(0.5rem);
	transition: transform 0.35s var(--ease-out);
}

.cph-promo.is-open .cph-promo__box {
	transform: scale(1) translateY(0);
}

/* Nút đóng góc phải trên. */
.cph-promo__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--muted-foreground);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.cph-promo__close:hover,
.cph-promo__close:focus-visible {
	background: rgba(23, 99, 58, 0.08);
	color: var(--emerald-deep);
}

.cph-promo__title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--emerald-deep);
}

.cph-promo__text {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}

/* Nút CTA nổi. */
.cph-promo__cta {
	display: inline-block;
	padding: 0.875rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--emerald-deep);
	background: var(--gold);
	border-radius: 999px;
	box-shadow: 0 0.5rem 1.25rem rgba(230, 190, 90, 0.4);
	transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.cph-promo__cta:hover,
.cph-promo__cta:focus-visible {
	transform: translateY(-2px);
	background: var(--emerald-deep);
	color: var(--gold);
	box-shadow: 0 0.75rem 1.5rem rgba(23, 99, 58, 0.35);
}

/* Responsive mobile. */
@media (max-width: 30rem) {
	.cph-promo {
		padding: 1rem;
	}

	.cph-promo__box {
		padding: 2.25rem 1.25rem 1.5rem;
	}

	.cph-promo__title {
		font-size: 1.3rem;
	}

	.cph-promo__cta {
		display: block;
		width: 100%;
	}
}

/* Tôn trọng giảm chuyển động. */
@media (prefers-reduced-motion: reduce) {
	.cph-promo,
	.cph-promo.is-open,
	.cph-promo__box,
	.cph-promo.is-open .cph-promo__box {
		transition: none;
	}

	.cph-promo__box {
		transform: none;
	}
}


/* ===== [Agent] Khóa học & SP liên quan cuối bài ===== */
/* =========================================================================
   Caophantu Child — Khối "Khóa học & sản phẩm liên quan" cuối bài viết
   (CSS NHÁP — chèn tay vào assets/css/main.css hoặc enqueue riêng)

   Tokens dùng: --emerald-deep, --gold, --cream, --card, --border,
                --radius-md, --shadow-soft, --muted-foreground, --font-display
   ========================================================================= */

.cph-postrel {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border);
}

.cph-postrel > h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.25;
  color: var(--emerald-deep);
  margin: 0 0 1.5rem;
}

/* Dấu nhấn vàng dưới tiêu đề */
.cph-postrel > h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: .6rem;
  border-radius: 99px;
  background: var(--gold);
}

.cph-postrel-group {
  margin-top: 1.75rem;
}

.cph-postrel-group:first-of-type {
  margin-top: 0;
}

.cph-postrel-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--emerald-deep);
  margin: 0 0 1rem;
}

/* --- Lưới sản phẩm: 1 → 2 → 3 cột responsive --- */
.cph-postrel-prods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .cph-postrel-prods {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .cph-postrel-prods {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Thẻ sản phẩm: card mềm, viền --border, bo --radius-md, hover nâng --- */
.cph-postrel-prod {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cph-postrel-prod:hover,
.cph-postrel-prod:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 28px -18px rgba(23, 99, 58, .45);
}

/* Ảnh tỉ lệ vuông, object-fit cover */
.cph-postrel-prod-media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cream);
}

.cph-postrel-prod-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback icon khi không có ảnh */
.cph-postrel-prod-media svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38%;
  height: 38%;
  opacity: .35;
  color: var(--emerald-deep);
}

.cph-postrel-prod-name {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--emerald-deep);
  padding: .85rem .9rem .35rem;
}

/* Giá: emerald-deep đậm */
.cph-postrel-prod-price {
  display: block;
  margin-top: auto;
  padding: 0 .9rem 1rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--emerald-deep);
}

.cph-postrel-prod-price del {
  color: var(--muted-foreground);
  font-weight: 500;
  font-size: .85em;
  margin-right: .35rem;
}

.cph-postrel-prod-price ins {
  text-decoration: none;
}

/* --- Mobile gọn --- */
@media (max-width: 479px) {
  .cph-postrel {
    margin-top: 2rem;
  }

  .cph-postrel-prod-name {
    font-size: .9rem;
    padding: .7rem .75rem .3rem;
  }

  .cph-postrel-prod-price {
    padding: 0 .75rem .8rem;
    font-size: .95rem;
  }
}