/* ==========================================================================
   SILVERLIFE B2B LANDING PAGE — EVEREST CARBON DESIGN SYSTEM
   Phong cách thiết kế: Everest Carbon (everestcarbon.com)
   Tuân thủ Brief: Phản Hồi Chỉnh Sửa Landing Page 24.8.26.pdf
   ========================================================================== */

/* ============ 1. DESIGN TOKENS & ROOT ============ */
:root {
  /* Warm Heritage Surfaces (Nền ngà ấm quý phái thay vì trắng lạnh) */
  --sl-white: #ffffff;
  --sl-bg: #fcf9f2;          /* Nền ngà ấm sang trọng */
  --sl-smoke: #f6f0e4;       /* Nền ngà nhạt ấm */
  --sl-silver: #ede5d5;      /* Nền xám ngà */
  --sl-border: #e2d7c3;      /* Viền ngà ấm */
  --sl-border-light: rgba(20, 42, 32, 0.08);
  --sl-border-dark: rgba(255, 255, 255, 0.14);

  /* Xanh Rừng (Canadian Forest Green - Màu chủ đạo 1) */
  --sl-forest-950: #0e2a20;   /* Xanh rừng sâu nhất */
  --sl-forest-900: #14352a;   /* Xanh rừng đậm */
  --sl-forest-800: #1b4334;   /* Xanh rừng quý phái */
  --sl-forest-700: #23503e;
  --sl-forest-600: #2e6450;
  --sl-green: #14352a;        /* Xanh rừng chủ đạo */
  --sl-green-hover: #0e2a20;
  --sl-green-soft: #eaf2ec;
  --sl-emerald-deep: #0e2a20;

  /* Nền Tối & Bề Mặt Xanh Rừng */
  --sl-dark: #0e2a20;         /* Xanh rừng đậm làm nền dark theme */
  --sl-dark-surface: #14352a;
  --sl-dark-card: rgba(255, 255, 255, 0.06);

  /* Vàng Gold (Canadian Luxury Gold - Màu chủ đạo 2) */
  --sl-gold: #c2974a;
  --sl-gold-hover: #ae8338;
  --sl-gold-light: #d8b878;
  --sl-gold-soft: #fbf5e8;
  --sl-gold-dark: #8f651e;
  --sl-gold-border: rgba(194, 151, 74, 0.4);

  /* Đỏ Rượu Vang (Wine Red / Burgundy / Bordeaux - Màu chủ đạo 3) */
  --sl-wine: #7e1927;         /* Đỏ rượu vang quý phái, chuyển đổi cao */
  --sl-wine-hover: #63121d;   /* Đỏ rượu vang đậm khi hover */
  --sl-wine-dark: #4d0a13;
  --sl-wine-light: #9c2333;
  --sl-wine-soft: #fcf0f2;
  --sl-wine-border: rgba(126, 25, 39, 0.28);

  /* Chữ & Tương Phản Thẩm Mỹ */
  --sl-ink: #10241b;          /* Chữ đen ánh xanh rừng sâu */
  --sl-body: #344339;         /* Chữ rêu xám ấm */
  --sl-muted: #5e6f64;
  --sl-light: #fbf7ee;
  --sl-light-muted: #b0c2b5;

  /* Typography */
  --sl-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Lora đứng trước Playfair: khớp bản cũ (1baa7cf). Playfair giữ lại làm fallback
     cho .drawer-brand vốn chỉ định --sl-serif. */
  --sl-serif: "Lora", "Playfair Display", Georgia, "Times New Roman", serif;
  --sl-tracking-tight: -0.02em;
  --sl-tracking-normal: var(--sl-tracking-tight);
  /* Heading serif dùng tracking DƯƠNG (bản cũ: .015em) — Lora ở cỡ lớn cần thoáng
     chân chữ, còn -0.02em là dành cho sans/numeral. */
  --sl-tracking-serif: 0.015em;

  /* Border Radii */
  --sl-r-sm: 0.75rem;     /* 12px */
  --sl-r: 1.25rem;        /* 20px */
  --sl-r-card: 2rem;      /* 32px */
  --sl-r-pill: 9999px;

  /* Shadows */
  --sl-shadow-subtle: 0 4px 20px -4px rgba(14, 42, 32, 0.08);
  --sl-shadow-card: 0 16px 40px -12px rgba(14, 42, 32, 0.12);
  --sl-shadow-hover: 0 24px 54px -16px rgba(14, 42, 32, 0.18);

  /* Glassmorphism System Tokens */
  --sl-glass-bg: rgba(255, 255, 255, 0.72);
  --sl-glass-bg-hover: rgba(255, 255, 255, 0.9);
  --sl-glass-border: rgba(255, 255, 255, 0.85);
  --sl-glass-border-subtle: rgba(226, 215, 195, 0.6);
  --sl-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --sl-glass-shadow: 0 16px 36px -10px rgba(14, 42, 32, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5);
  --sl-glass-shadow-hover: 0 24px 48px -12px rgba(14, 42, 32, 0.14), 0 0 0 1px rgba(194, 151, 74, 0.35);
  --sl-glass-blur: blur(16px) saturate(180%);

  /* Dark Theme Glassmorphism */
  --sl-glass-dark-bg: rgba(20, 53, 42, 0.75);
  --sl-glass-dark-bg-hover: rgba(20, 53, 42, 0.88);
  --sl-glass-dark-border: rgba(255, 255, 255, 0.15);
  --sl-glass-dark-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --sl-glass-dark-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);

  /* Layout */
  --sl-maxw: 1280px;
  --sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ 2. BASE & RESET ============ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* !important để thắng inline CSS của Flatsome (body{font-family:Lato}) không bị dequeue */
  font-family: var(--sl-font) !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sl-body);
  background-color: var(--sl-bg);
  letter-spacing: var(--sl-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* h1–h3 = serif, h4–h6 = sans. Khớp bản cũ (1baa7cf) và khớp luôn cách Flatsome
   phân cấp: tiêu đề lớn dùng serif, tiêu đề nhỏ/UI dùng sans cho dễ đọc.
   Tracking tách riêng: serif cần tracking DƯƠNG, sans/numeral dùng âm. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--sl-serif);
  color: var(--sl-forest-950);
  letter-spacing: var(--sl-tracking-serif);
  font-weight: 700;
  line-height: 1.25;
}

h4, h5, h6 {
  margin: 0;
  font-family: var(--sl-font);
  color: var(--sl-forest-950);
  letter-spacing: var(--sl-tracking-tight);
  font-weight: 700;
  line-height: 1.25;
}

/* Container Wrapper */
.wrap {
  width: 100%;
  max-width: var(--sl-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Base Section */
.section {
  padding: clamp(5rem, 8vw, 8rem) 0;
  position: relative;
}

/* Section Header (Everest Style) */
.sec-head {
  max-width: 860px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.sec-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sl-wine);
  margin-bottom: 0.875rem;
}

.sec-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--sl-forest-950);
  letter-spacing: var(--sl-tracking-serif);
}

.sec-desc {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  color: var(--sl-muted);
  line-height: 1.65;
  margin-top: 1rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ============ 3. BUTTONS & PILLS (Everest Style) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s var(--sl-ease);
  position: relative;
  overflow: hidden;
}

.btn-pill {
  border-radius: var(--sl-r-pill);
  padding: 1rem 2rem;
}

.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 1.25rem 2.5rem;
  font-size: 1rem;
}

/* Primary Action Button: Đỏ Rượu Vang Quý Phái & Hover Xanh Rừng Ánh Vàng */
.btn-dark {
  background: linear-gradient(135deg, var(--sl-wine) 0%, #68111e 100%);
  color: var(--sl-white);
  border: 1px solid var(--sl-gold-border);
  box-shadow: 0 10px 24px -6px rgba(126, 25, 39, 0.45);
}

.btn-dark:hover {
  background: linear-gradient(135deg, var(--sl-forest-900) 0%, var(--sl-forest-950) 100%);
  color: var(--sl-gold-light);
  border-color: var(--sl-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(14, 42, 32, 0.55);
}

.btn-wine {
  background: linear-gradient(135deg, var(--sl-wine) 0%, #68111e 100%);
  color: var(--sl-white);
  border: 1px solid var(--sl-gold-border);
  box-shadow: 0 10px 24px -6px rgba(126, 25, 39, 0.45);
}

.btn-wine:hover {
  background: linear-gradient(135deg, #5d0f1a 0%, var(--sl-wine) 100%);
  color: var(--sl-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(194, 151, 74, 0.5);
}

.btn-gold {
  background: linear-gradient(135deg, var(--sl-gold-light) 0%, var(--sl-gold) 100%);
  color: #1e2a22;
  font-weight: 700;
  box-shadow: 0 10px 24px -6px rgba(194, 151, 74, 0.4);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #e5cb93 0%, #c9a356 100%);
  color: var(--sl-forest-950);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(194, 151, 74, 0.6);
}

.btn-outline {
  border: 1.5px solid var(--sl-forest-800);
  background-color: transparent;
  color: var(--sl-forest-900);
  font-weight: 600;
}

.btn-outline:hover {
  border-color: var(--sl-forest-950);
  background-color: var(--sl-forest-950);
  color: var(--sl-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(14, 42, 32, 0.35);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Pill Badges */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 1rem;
  border-radius: var(--sl-r-pill);
  background-color: var(--sl-smoke);
  border: 1px solid var(--sl-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sl-ink);
  line-height: 1;
}

.pill-badge.on-dark {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--sl-white);
}

.flag-ca {
  display: inline-block;
  width: 18px;
  height: 12px;
  background-image: url('../images/flag-canada.svg');
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* ============ 4. SITE HEADER (thanh ngang full-width) ============ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  /* z-index phải > .nav-backdrop (9999): header tạo stacking context, nếu thấp hơn,
     toàn bộ drawer bên trong (kể cả z-index 10000) bị backdrop che và chặn click ở mobile. */
  z-index: 10000;
  background: rgba(252, 249, 242, 0.92);
  color: var(--sl-ink);
  /* Chiều cao thanh do padding + phần tử cao nhất quyết định (logo 34px / nút CTA
     35px). Giữ 14px mỗi bên → thanh ~63px, gọn hơn hẳn mức 82px trước đây. */
  padding: 0.875rem 0;
  border-bottom: 1px solid transparent;
  /* KHÔNG transition padding: header giữ NGUYÊN kích thước khi cuộn. */
  transition: background 0.35s var(--sl-ease), box-shadow 0.35s var(--sl-ease),
    border-color 0.35s var(--sl-ease);
}

/* Trạng thái khi cuộn CHỈ đổi nền/viền/đổ bóng — cố ý KHÔNG đụng tới padding hay
   kích thước, để thanh header không phình ra co lại lúc cuộn. */
.site-header.scrolled {
  background: rgba(252, 249, 242, 0.97);
  border-bottom-color: var(--sl-border);
  box-shadow: 0 10px 30px -22px rgba(20, 53, 42, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.375rem;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.site-nav-wrap {
  display: flex;
  align-items: center;
  margin-left: 0.875rem;
}

.drawer-head,
.drawer-foot {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.site-nav .nav-link {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sl-forest-900);
  position: relative;
  padding: 0.375rem 0;
  white-space: nowrap !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Gạch chân vàng chạy từ trái sang phải khi hover/active (kiểu header cũ).
   Dùng transform:scaleX thay vì animate `right` như bản cũ: hình ảnh y hệt
   nhưng chạy trên compositor, không repaint mỗi frame. */
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--sl-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--sl-ease);
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active,
.site-nav .nav-link.is-active {
  color: var(--sl-gold-dark);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after,
.site-nav .nav-link.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Nút vàng kiểu cũ: .btn base của theme mới không có padding/bo góc
   (phần đó nằm ở .btn-pill) nên phải bù lại ở đây.
   Đây là phần tử CAO NHẤT trong header ở desktop (svg 15px + padding 10px×2 = 35px,
   so với logo/nav 34px) nên cỡ của nó quyết định chiều cao thanh — muốn header gọn
   thì phải siết ở đây, không phải ở .site-header. */
.header-cta,
.drawer-cta {
  padding: 0.625rem 1.25rem;
  border-radius: var(--sl-r-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.drawer-cta {
  justify-content: center;
  /* Nút trong drawer là CTA chính trên mobile: giữ padding rộng hơn .header-cta
     để vùng chạm đạt ~44px (chuẩn tap target), không siết theo desktop. */
  padding: 0.875rem 1.5rem;
}

.header-cta svg,
.drawer-cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--sl-forest-900);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.burger svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.burger:hover {
  background-color: var(--sl-smoke);
}

/* Mobile Nav Backdrop Scrim */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(18, 26, 21, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--sl-ease);
}

.nav-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Offcanvas Drawer */

/* ============ 5. TRANG 1 — HERO BANNER ============ */
/* LƯU Ý: giữ nguyên tên class `hero-section`, KHÔNG đổi thành `hero`.
   ux-compat.css có rule `.section.hero{...!important}` (trỏ hero-bg.webp) cho
   element NATIVE của Flatsome; đổi tên sẽ khiến block này bị rule đó đè. */
.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  /* Cột dọc: .wrap giãn ra canh giữa phần nội dung, .hero-marquee là item cuối
     nằm sát mép đáy. Nhờ vậy không phải dùng `width:100vw` để tràn viền. */
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  /* padding-bottom = 0 để marquee dính liền mép dưới; khoảng thở giữa khối chữ
     và marquee do .hero-section > .wrap đảm nhiệm. */
  padding: clamp(6.5rem, 13vh, 8rem) 0 0;
  color: var(--sl-light);
  background-color: var(--sl-forest-950);
  background-image: var(--sl-hero-bg, url('../images/hero-bg.webp'));
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 0;
}

/* .hero-scrim là position:absolute, .wrap là static → phần tử định vị vẽ ĐÈ lên
   phần tử static. Phải positioning .wrap nếu không scrim che mất toàn bộ chữ. */
.hero-section > .wrap {
  position: relative;
  z-index: 1;
  /* Giãn hết phần còn lại và canh giữa nội dung theo chiều dọc. Cách này thay cho
     `align-items:center` cũ trên section (giờ section là cột, các item con xếp
     từ trên xuống). `flex:1 0 auto` + min-height ở section: nội dung cao hơn màn
     hình thì wrap tự cao lên, KHÔNG bị cắt — cùng lý do an toàn như bản cũ.
     Kèm padding đáy để khối chữ không dán sát dải marquee. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

/* Lớp phủ tối: gradient ngang gánh toàn bộ trách nhiệm tương phản (chữ nằm bên
   trái), gradient dọc chỉ để neo header kem ở đỉnh và làm nền cho dải kính ở đáy.
   Vùng tối đậm giữ tới ~44% rồi TẮT NHANH — khối chữ chỉ chiếm tới 60% bề ngang,
   nên từ ~58% trở đi phải là ảnh thật để củ nhân sâm hiện rõ (bố cục bản cũ).
   Bản cũ còn nhạt hơn (.05 tại 100%); ở đây giữ .10 để mép phải ảnh không chói. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(9, 26, 19, 0.94) 0%,
      rgba(9, 26, 19, 0.88) 30%,
      rgba(9, 26, 19, 0.76) 44%,
      rgba(9, 26, 19, 0.50) 56%,
      rgba(9, 26, 19, 0.22) 68%,
      rgba(9, 26, 19, 0.06) 82%,
      rgba(9, 26, 19, 0.03) 100%),
    linear-gradient(180deg,
      rgba(9, 26, 19, 0.58) 0%,
      rgba(9, 26, 19, 0) 26%,
      rgba(9, 26, 19, 0) 70%,
      rgba(9, 26, 19, 0.42) 100%);
}

/* Khối chữ: cap theo TỈ LỆ để nhường trọn vùng ảnh bên phải cho củ nhân sâm
   (bố cục bản cũ: chữ bên trái, củ sâm bên phải). Củ sâm nằm ở ~68-91% bề ngang
   ở 1440, nhưng ở 992 thì `cover` crop theo chiều cao nên nó lùi về ~67%.
   68% là mức RỘNG NHẤT còn giữ được khoảng trống trước củ sâm ở MỌI bề rộng
   desktop — đây là ràng buộc thật, không phải số chọn cho đẹp: dòng 1 của tiêu
   đề cần 827px ở cỡ chữ tối đa (xem .hero-title), nên cột phải đủ rộng để dòng
   đó không tự vỡ thêm lần nữa thành 3 dòng.
   Nhánh ≤991px BẮT BUỘC mở lại 100% — nếu không ở 375px chỉ còn ~255px. */
.hero-copy {
  max-width: min(838px, 68%);
}

.hero-pill {
  margin-bottom: 1.5rem;
}

/* Chấm nhấp nháy cạnh nhãn hero đã được bỏ theo yêu cầu — badge giờ chỉ còn
   cờ Canada + chữ. CSS cũ (chấm tròn + vòng sáng lan) đã xoá hẳn, không để lại
   quy tắc chết; xem git history nếu cần dựng lại. */

.hero-title {
  /* Cỡ chữ bị RÀNG BUỘC BỞI CỘT, không chọn theo thẩm mỹ: dòng 1
     "NGUỒN NGUYÊN LIỆU NHÂN SÂM" (33 ký tự, Lora 700) rộng 827px ở cỡ 48px và
     1034px ở cỡ 60px, trong khi .hero-copy chỉ cho 838px. Nên 48px là cỡ LỚN
     NHẤT còn giữ dòng 1 trên MỘT dòng — trần 3rem chính là mức đó; số hạng 3.35vw
     thu nhỏ dần khi hẹp lại, sàn 2.25rem giữ chữ không bé quá. Nhánh
     (max-height: 820px) còn siết thêm một nấc cho laptop màn thấp.
     Hệ quả cần nhớ: ĐỔI CHỮ Ở title_line1/title_line2 THÌ PHẢI ĐO LẠI hai số
     này, nếu không tiêu đề sẽ tự vỡ thêm dòng thứ ba ngay giữa từ. */
  font-size: clamp(2.25rem, 3.35vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  /* Serif (Lora) cần tracking DƯƠNG — dấu tiếng Việt (Ồ, Ậ, Ệ) sẽ chạm glyph
     trước nếu dùng tracking âm ở cỡ lớn. Bản cũ cũng dùng .015em. */
  letter-spacing: var(--sl-tracking-serif);
  color: var(--sl-light);
  margin-bottom: 1.5rem;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.6);
}

.hero-kicker {
  display: block;
  /* Nằm trong <h1> nên phải tự khai báo sans — h1 giờ là serif (Lora).
     Đây là nhãn UI in hoa, không phải tiêu đề. */
  font-family: var(--sl-font);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sl-gold);
  margin-bottom: 0.875rem;
}

/* Hai dòng tiêu đề là block CỐ Ý: ép đúng chỗ ngắt người biên tập muốn
   ("NGUỒN NGUYÊN LIỆU NHÂN SÂM" / "CANADA CHÍNH NGẠCH") thay vì để trình duyệt
   cắt giữa từ. Ở desktop hai dòng vừa khít cột (xem .hero-copy và .hero-title).
   Nhánh ≤991px trả về inline — ở đó dòng 1 không đủ chỗ trên một hàng nên ép
   block sẽ đẻ thêm một dòng so với để chữ tự chảy (đo ở 640px: 4 so với 3).
   Class .hero-line-2 trên dòng 2 chỉ để nhận diện, không cần style riêng. */
.hero-line-main {
  display: block;
  color: var(--sl-gold-light);
}

.hero-desc {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: #e6ebe7;
  max-width: 580px;
  margin-bottom: 2.25rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* CTA chính trên nền tối: giữ .btn-dark (wine) nhưng siết viền cho nổi khỏi scrim.
   :hover phải dùng 3 class để thắng .btn-dark:hover (0,2,0) — mặc định hover của
   .btn-dark chuyển sang nền xanh rừng, trùng màu scrim nên nút sẽ biến mất. */
.hero-actions .hero-cta {
  border-color: rgba(216, 184, 120, 0.55);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
}

.hero-actions .hero-cta:hover {
  background: linear-gradient(135deg, #8f1d2c 0%, #6d1220 100%);
  border-color: var(--sl-gold);
  color: var(--sl-white);
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.7);
}

/* CTA phụ: .btn-outline mặc định là viền + chữ xanh rừng → vô hình trên nền tối.
   Rule phải nằm TRONG block hero (sau .btn-outline ở line ~286) vì cùng
   specificity (0,1,0) nên source order quyết định. Trạng thái nghỉ cũng quan
   trọng không kém :hover — trên touch (hover:none) hover không bao giờ chạy. */
.hero-secondary-btn {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--sl-light);
  background: rgba(255, 255, 255, 0.06);
}

.hero-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--sl-gold-light);
  color: var(--sl-gold-light);
}

/* B2B Authority Stat Bar — 4 mục NGANG, mỗi mục = icon + nhãn MỘT DÒNG.
   KHÔNG khung bao: đã bỏ nền kính, viền, bo góc và đổ bóng để dải hoà vào ảnh nền
   hero đúng như mẫu. Cũng không còn vạch ngăn dọc (.h-stat-divider) và không còn
   con số — khoảng cách giữa các mục đủ phân tách. */
.hero-stats-bar {
  display: flex;
  flex-direction: row;
  /* stretch (không phải center) để 4 mục LUÔN cao bằng nhau → 4 icon nằm chung một
     trục ngang. Vẫn cần giữ vì nhãn dài ("Nhà máy & Đối tác") có thể chạm giới hạn
     bề rộng ở màn hẹp và bị đẩy xuống dòng. */
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.h-stat-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

/* Icon TRẦN, không còn ô vuông bao quanh — đúng mẫu.
   `flex-shrink:0` giữ icon không bị bóp khi nhãn bên cạnh dài. */
.h-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sl-gold-light);
}
/* SVG của silverlife_icon() mang sẵn width/height cứng; ép lại theo từng
   breakpoint vì icon phải co theo khi xuống mobile. */
.h-stat-icon svg {
  width: 18px;
  height: 18px;
}

/* Nhãn = chữ chính, MỘT DÒNG. `nowrap` giữ đúng yêu cầu; đi kèm `min-width:0`
   trên .h-stat-item để flex item được phép co xuống dưới bề rộng nội dung. */
.h-stat-lbl {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sl-light);
  line-height: 1.3;
  white-space: nowrap;
}

/* USP Marquee — dải chữ chạy NEO SÁT MÉP ĐÁY hero.
   Dải pill cũ bị bỏ vì nó chiếm một khối lớn giữa hero; chữ chạy chỉ cao ~1 dòng
   nên nhường được gần trọn vùng ảnh cho củ nhân sâm.
   Khối này là con TRỰC TIẾP của .hero-section (không nằm trong .wrap) nên đã sẵn
   full-bleed — không cần `width:100vw` (giá trị đó tính cả bề rộng scrollbar và
   sẽ đẩy trang tràn ngang ~15px ở desktop).
   Kỹ thuật: track chứa 2 bản sao giống hệt, dịch -50% rồi lặp → vòng lặp liền
   mạch (khi bản 1 vừa ra hết thì bản 2 đã ở đúng vị trí bản 1 lúc đầu).
   Dùng `overflow:hidden` trên khung, KHÔNG dùng mask: mask sẽ tạo stacking/containing
   context và cắt luôn hiệu ứng, đồng thời làm mờ cả phần chữ ở hai mép. */
.hero-marquee {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border-top: 1px solid rgba(216, 184, 120, 0.22);
  border-bottom: 1px solid rgba(216, 184, 120, 0.22);
  background: rgba(9, 26, 19, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.875rem 0;
}
/* LƯU Ý: KHÔNG gắn class `.reveal` cho dải này (xem markup).
   Dải neo sát mép dưới hero nên chỉ giao với vùng quan sát của IntersectionObserver
   một đoạn rất nhỏ; observer dùng `threshold: 0.1` + `rootMargin: '0px 0px -40px 0px'`
   nên phần giao không bao giờ đạt 10% → dải kẹt ở `opacity: 0` và biến mất hẳn.
   Cũng KHÔNG thể đè bằng `opacity: 1` tại đây: rule `.reveal{opacity:0}` nằm ở dưới
   (mục 16) cùng độ ưu tiên (0,1,0) nên thắng theo thứ tự nguồn. */

.marquee-track {
  display: flex;
  width: max-content;
  /* Vòng lặp = thời gian dịch hết bề rộng MỘT nhóm (~4100px). Chọn sao cho chữ
     trôi ~70px/s — đủ chậm để đọc, đủ nhanh để thấy là đang chạy. */
  animation: marqueeScroll 58s linear infinite;
  will-change: transform;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  /* CHỈ padding trái, và KHÔNG dùng `gap`.
     Vạch ngăn nằm ở CUỐI mỗi mục. Khoảng cách bên phải vạch = padding-left của
     mục kế tiếp; khoảng cách bên trái vạch = margin-left của ::after. Hai giá trị
     phải bằng nhau thì vạch mới nằm giữa. Nếu để padding hai bên thì bên phải
     thành 1.75 + 1.75 = 3.5rem, còn `gap` cũng bị cộng vào ngay trước ::after. */
  padding-left: 1.75rem;
  white-space: nowrap;
}

.marquee-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--sl-gold);
  margin-right: 0.625rem;
  flex-shrink: 0;
}

.marquee-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sl-light);
  letter-spacing: 0.01em;
}

/* Vạch ngăn giữa các mục: dùng ::after trên mục để không phải thêm phần tử
   (phần tử thừa sẽ lệch giữa 2 bản sao và làm vòng lặp giật). */
.marquee-item::after {
  content: "";
  width: 1px;
  height: 14px;
  margin-left: 1.75rem;
  background: rgba(216, 184, 120, 0.35);
  flex-shrink: 0;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Người bật "giảm chuyển động": chữ đứng yên, cho xuống dòng để đọc đủ 4 mục.
   Ẩn cả nhóm sao chép lẫn các bản lặp bên trong nhóm 1 → chỉ còn đúng 4 USP. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-group[aria-hidden="true"],
  .marquee-dup {
    display: none;
  }
  /* Bỏ luôn vạch ngăn ở bản tĩnh: các mục xuống dòng và canh giữa, vạch sẽ lơ lửng
     ở cuối mỗi dòng. Mỗi mục đã có sẵn chấm vàng làm dấu phân cách nên vẫn rõ ràng.
     (Không dùng :last-child được — mục cuối trong DOM là bản lặp đã bị ẩn.) */
  .marquee-item::after {
    display: none;
  }
  .marquee-item {
    padding: 0.25rem 0.875rem;
  }
}

/* ============ 6. TRANG 2 — VÌ SAO CHỌN SILVERLIFE ============ */
.vi-sao-section {
  background-color: var(--sl-smoke);
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(194, 151, 74, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(20, 53, 42, 0.05) 0%, transparent 45%);
}

.usp-groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.usp-group-card {
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  border-radius: var(--sl-r-card);
  padding: clamp(2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
  transition: all 0.35s var(--sl-ease);
}

.usp-group-card:hover {
  transform: translateY(-4px);
  background: var(--sl-glass-bg-hover);
  box-shadow: var(--sl-glass-shadow-hover), var(--sl-glass-highlight);
  border-color: rgba(46, 111, 64, 0.35);
}

/* Nền là ẢNH chứ không còn gradient đặc: scrim nằm CÙNG LAYER với ảnh (layer
   gradient ở trên, ảnh ở dưới) nên tổng hợp lại là ĐỤC hoàn toàn — nền kem của
   section không lọt qua, và mọi tương phản chữ do scrim quyết định.
   Scrim lệch phải: đậm 0.84 ở mép trái (nơi có chữ) rồi nhạt dần còn 0.45 ở mép
   phải để lộ hồ/núi/rừng và lá phong đỏ — chính là phần ảnh đẹp nhất. Ảnh neo
   `right center` để ở mobile (card cao hẹp, `cover` chỉ còn thấy ~17% bề ngang
   ảnh) vẫn rơi đúng vào lá phong + rừng thông thay vì vùng hồ trống.
   Số alpha KHÔNG chọn theo cảm giác: đo trên ảnh thật ở 1440px, tương phản thấp
   nhất trong card là 5.06:1 (chữ mờ nhất .hl-desc 12px, nền sáng nhất L=0.049)
   và ở 375px là 5.75:1 — đều trên ngưỡng AA 4.5:1. Làm nhạt scrim hơn nữa sẽ
   rơi xuống dưới ngưỡng ở đúng vùng núi tuyết (L≈0.62). */
.usp-group-card.group-1 {
  grid-column: 1 / -1;
  background:
    linear-gradient(100deg,
      rgba(6, 22, 16, 0.84) 0%,
      rgba(7, 26, 19, 0.82) 45%,
      rgba(8, 30, 21, 0.72) 70%,
      rgba(10, 34, 24, 0.45) 100%),
    url('../images/contact-bg.webp') right center / cover no-repeat,
    #08170f;
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  color: var(--sl-white);
  border: 1px solid rgba(194, 151, 74, 0.35);
  box-shadow: 0 20px 48px -12px rgba(13, 39, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.usp-group-card.group-1::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 151, 74, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.usp-group-card.group-1 .usp-group-title {
  color: var(--sl-white);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
}

.usp-group-card.group-1 .usp-group-sub {
  color: #a3b8af;
  max-width: 800px;
  font-size: 1.0625rem;
}

.usp-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Badge trong row flex (Nhóm 1) không dùng margin-bottom dạng block
   của .usp-priority-badge thường, nếu không nó bị đẩy lệch trục giữa. */
.usp-badge-row .usp-priority-badge {
  margin-bottom: 0;
}

.usp-priority-badge.dark-accent {
  background: rgba(194, 151, 74, 0.2);
  color: #e5be74;
  border: 1px solid rgba(194, 151, 74, 0.38);
}

.usp-origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--sl-r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d8e5df;
}

.usp-highlight-metrics {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border-radius: var(--sl-r);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: fit-content;
}

.hl-metric {
  display: flex;
  flex-direction: column;
}

.hl-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: #e5be74;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hl-desc {
  font-size: 0.75rem;
  color: #9cb1a7;
  margin-top: 0.25rem;
}

.hl-metric-div {
  width: 1px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.15);
}

.usp-group-card.group-1 .usp-row {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--sl-white);
}

.usp-group-card.group-1 .usp-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.usp-group-card.group-1 .usp-icon-wrap {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(194, 151, 74, 0.35);
  color: #e5be74;
}

.usp-group-card.group-1 .usp-row-content h4 {
  color: var(--sl-white);
}

.usp-group-card.group-1 .usp-row-content p {
  color: #b0c2b9;
}

/* Nhóm 2 không còn dòng mô tả: mỗi row chỉ còn tiêu đề 1 dòng (21px) trong khi
   icon tròn cao 44px quyết định chiều cao row. Để nguyên flex-start của .usp-row
   thì chữ dồn lên đỉnh — đo được 20px trên / 43px dưới. Căn giữa lại cho cân.
   Chỉ áp cho nhóm 2: nhóm 1 vẫn có mô tả bên dưới tiêu đề nên flex-start mới đúng
   (icon thẳng hàng với dòng tiêu đề, không phải với tâm cả khối chữ). */
.usp-group-card.group-2 .usp-row {
  align-items: center;
}

.usp-card-top {
  margin-bottom: 2rem;
}

.usp-priority-badge {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--sl-r-pill);
  background-color: var(--sl-wine-soft);
  color: var(--sl-wine);
  border: 1px solid var(--sl-wine-border);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.usp-group-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sl-forest-950);
  margin-bottom: 0.5rem;
}

.usp-group-sub {
  font-size: 1rem;
  color: var(--sl-muted);
}

.usp-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.usp-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--sl-r);
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px -2px rgba(14, 42, 32, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.25s ease;
}

.usp-row:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--sl-forest-800);
  box-shadow: 0 8px 24px -4px rgba(14, 42, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.usp-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sl-smoke);
  border: 1px solid var(--sl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-forest-800);
  flex-shrink: 0;
}

.usp-row-content h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sl-forest-950);
  margin-bottom: 0.25rem;
}

.usp-row-content p {
  font-size: 0.9375rem;
  color: var(--sl-body);
  margin: 0;
}

.usp-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.usp-mini-card {
  padding: 1.25rem;
  border-radius: var(--sl-r);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px -2px rgba(14, 42, 32, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.25s ease;
}

.usp-mini-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(20, 53, 42, 0.3);
  box-shadow: 0 8px 20px -4px rgba(14, 42, 32, 0.08);
}

.mini-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sl-green);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.375rem;
}

.usp-mini-card h4 {
  font-size: 1rem;
  font-weight: 600;
}

/* ============ NHÓM 2 & 3 — NÂNG CẤP HIỂN THỊ ============
   Ba card nằm chung một lưới nên luôn cao bằng nhau, nhưng nội dung nhóm 2/3 ít
   hơn hẳn nhóm 1: card 2 chỉ có 2 hàng, mỗi hàng một dòng chữ (đo 68px) trong ô
   rộng ~490px → thừa nửa phải, và cả khối còn hở ~48px ở đáy card; card 3 là 4 ô
   nhỏ dẹt như nhau. Chữa bằng 2 việc, không thêm nội dung mới:
     1) Cho danh sách GIÃN theo chiều cao card (list flex:1 + mỗi phần tử tự giãn)
        → đáy card kín, các phần tử chia đều khoảng trống thay vì dồn lên trên.
     2) Dùng lại đúng hệ chất liệu của card 1 (nhóm tối): quầng vàng góc trên phải,
        dải nhấn màu ở mép trái, icon tròn to hơn — để 3 card đọc như một bộ chứ
        không còn 1 card "đặc biệt" + 2 card trắng trơn.
   MỌI rule ở đây phải đứng SAU .usp-row:hover (1134) và .usp-mini-card:hover
   (1183): hover cũ cùng specificity thấp hơn 1 cấp nên nếu đặt trước sẽ bị các
   rule nền mới đè mất phản hồi hover (đã phải khai lại hover bên dưới). */
.usp-group-card:not(.group-1) {
  position: relative;
  overflow: hidden;
}

/* Quầng vàng nhạt ở góc — cùng công thức .usp-group-card.group-1::before nhưng
   alpha thấp hơn hẳn (0.11 so với 0.15) và tắt sớm hơn (72%): trên nền kem sáng,
   0.16 đổ thành vệt vàng nhìn rõ ở góc trên phải chứ không còn là ánh nhẹ. */
.usp-group-card:not(.group-1)::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 151, 74, 0.11) 0%, transparent 72%);
  pointer-events: none;
}

/* Nội dung phải nổi lên trên quầng trang trí */
.usp-group-card:not(.group-1) > * {
  position: relative;
  z-index: 1;
}

.usp-group-card.group-2 .usp-list,
.usp-group-card.group-3 .usp-list-grid {
  flex: 1 1 auto;
}

/* Card 2 — 2 hàng chia đều chiều cao còn lại (mỗi hàng ~90px ở 1280 thay vì 68px
   rồi hở đáy), icon tròn 50px nền vàng nhạt, dải nhấn wine ở mép trái để hàng
   không còn là "nút trắng rỗng", và dấu ✓ ở cuối hàng lấp khoảng trống bên
   phải — mắt có điểm dừng thay vì trôi khỏi chữ. */
.usp-group-card.group-2 .usp-list {
  justify-content: space-between;
}
.usp-group-card.group-2 .usp-row {
  flex: 1 1 0;
  min-height: 84px;
  align-items: center;
  gap: 1.125rem;
  padding: 1.125rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.52) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-left: 3px solid rgba(126, 25, 39, 0.55);
  box-shadow: 0 6px 16px -4px rgba(14, 42, 32, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.usp-group-card.group-2 .usp-row:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.74) 100%);
  border-color: rgba(126, 25, 39, 0.28);
  border-left-color: var(--sl-wine);
}
.usp-group-card.group-2 .usp-row::after {
  content: "✓";
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: rgba(46, 111, 64, 0.12);
  color: var(--sl-green);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usp-group-card.group-2 .usp-icon-wrap {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 32% 26%, rgba(194, 151, 74, 0.26) 0%, rgba(194, 151, 74, 0.09) 72%);
  border-color: rgba(194, 151, 74, 0.45);
  color: var(--sl-wine);
}
.usp-group-card.group-2 .usp-row-content h4 {
  font-size: 1.125rem;
}

/* Card 3 — 2 hàng ô nhỏ cao đều nhau (grid-auto-rows 1fr + align-content stretch)
   để 4 ô lấp kín chiều cao như card 2; mỗi ô thêm dải nhấn xanh ở mép trái, chấm
   vàng trước nhãn, nội dung canh giữa theo chiều dọc để ô cao 90px không bị chữ
   dồn lên đỉnh. */
.usp-group-card.group-3 .usp-list-grid {
  align-content: stretch;
  grid-auto-rows: 1fr;
}
.usp-group-card.group-3 .usp-mini-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem 1.25rem;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.54) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-left: 3px solid rgba(46, 111, 64, 0.5);
  box-shadow: 0 6px 16px -4px rgba(14, 42, 32, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.usp-group-card.group-3 .usp-mini-card:hover {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.76) 100%);
  border-color: rgba(46, 111, 64, 0.3);
  border-left-color: var(--sl-green);
  transform: translateY(-2px);
}
.usp-group-card.group-3 .mini-tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sl-gold);
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.usp-group-card.group-3 .usp-mini-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
}

/* ============ 7+8. TRANG 3+4 GỘP — NỖI LO ĐỐI CHIẾU GIẢI PHÁP ============ */
/* Thay cho 2 section riêng trước đây (nỗi lo: grid 3 cột; giải pháp: 5 module xếp
   dọc) vốn chiếm 4287px ở 1440px — gần 5 màn hình. Nay mỗi cặp nỗi lo ↔ giải pháp
   nằm trên MỘT hàng, nên mắt quét ngang là thấy ngay tương quan Problem → Solution
   thay vì phải cuộn xuống rồi nhớ lại nội dung phía trên.
   Nền --sl-bg giữ đúng nhịp LUÂN PHIÊN của design system (xem .nguyen-lieu-section). */
.doi-chieu-section {
  background-color: var(--sl-bg);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(126, 25, 39, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(194, 151, 74, 0.06) 0%, transparent 45%);
}

/* Lưới 3 cột: [nỗi lo] [vách] [giải pháp], 15 ô nội dung tự chảy thành 5 hàng nên
   cặp nỗi lo ↔ giải pháp luôn nằm cùng hàng. Hàng do lưới tự sinh (không khai báo
   grid-template-rows) để mỗi hàng cao theo nội dung dài nhất của cặp đó. */
.dc-board {
  /* Bề rộng cột vách — khai báo MỘT LẦN ở đây rồi cả 2 lưới dùng chung biến này. Bắt
      buộc phải là một con số cụ thể, KHÔNG được để `auto`: lưới nội dung và lưới nền
      là 2 lưới độc lập, mà cột `auto` tự co theo nội dung của từng lưới — đo được
      lưới nền ra 615.5px/1px/615.5px còn lưới nội dung ra 584px/64px/584px, lệch
      nhau 31px và 2 card lệch khỏi cột chữ. Dùng chung biến thì không thể lệch.
      Nới 4rem xuống 3.5rem sau khi bỏ 5 nút mũi tên: 4rem được tính cho nút 2.5rem
      + halo, giờ khe chỉ còn 1 đường kẻ nên 3.5rem là vừa đủ thở mà 2 card lại sát
      nhau hơn — sát mới dễ đọc thành một cặp. */
  --dc-div-w: 3.5rem;
  /* Lề ngang trong card — khai báo MỘT lần ở đây: padding của head, vạch phân
     cách dưới head và lề của mỗi hàng đều đọc biến này, nên chữ tiêu đề với chữ
     từng hàng thẳng cột theo cấu trúc chứ không phải canh tay. Cùng giá trị với
     padding-head cũ nên không đẩy lệch chữ so với bản hiện có. */
  --dc-pad-x: clamp(1.75rem, 2.5vw, 2.25rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--dc-div-w) 1fr;
}

/* LỚP NỀN phủ tuyệt đối, cùng bề rộng và cùng định nghĩa cột với lưới nội dung nên
   2 card trùng khít đúng 2 cột — không phải canh bằng tay. Tách ra lớp riêng (thay
   vì để nền trên từng ô) là để mỗi card liền mạch suốt 5 hàng, không hở khe giữa
   hàng; nếu mỗi ô tự mang nền thì nhìn ra 5 dải rời chứ không ra 1 card. */
.dc-bg-layer {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr var(--dc-div-w) 1fr;
  pointer-events: none;
  z-index: 0;
}

/* Cột 1 — CARD NỖI LO (tối). Chất liệu lấy ĐÚNG công thức dark band (radial
   gold 88% 10% + linear 140deg 3 chặng xanh rừng), nên ăn khớp với dải claim-proof và
   .usp-group-card.group-1 ở section 2. Bo góc --sl-r-card như mọi card khác.
   overflow:hidden để quầng sáng ::before không tràn qua bo góc. */
.dc-bg-pain {
  grid-column: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--sl-r-card);
  background:
    linear-gradient(140deg, rgba(14, 42, 32, 0.97) 0%, rgba(20, 53, 42, 0.95) 68%, rgba(27, 67, 52, 0.98) 100%);
  border: 1px solid rgba(194, 151, 74, 0.35);
  box-shadow: 0 20px 48px -12px rgba(14, 42, 32, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Cột 3 — CARD GIẢI PHÁP (kính sáng), đúng vật liệu .usp-group-card. */
.dc-bg-sol {
  grid-column: 3;
  position: relative;
  overflow: hidden;
  border-radius: var(--sl-r-card);
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
}

/* TRANG TRÍ ĐỐI XỨNG QUA KHE: vệt gold của card này ở góc GIÁP KHE (trái: góc
   trên-phải, phải: góc trên-trái) nên 2 quầng sáng nhìn sang nhau như một cặp,
   thay vì 2 card xa cách chỉ cùng màu. Kèm 1 dải sáng mềm ở góc còn lại để nền
   không phẳng: trái là streak trắng mờ trên xanh rừng, phải là tint xanh rừng trên
   kính trắng — cùng vị trí, đảo cực theo nền, đúng công thức .usp-group-card.
   Đặt trong ::before chứ không ghép vào background để khỏi chồng lớp gradient nền
   và để đổi trang trí mà không phải sửa công thức nền. */
.dc-bg-pain::before,
.dc-bg-sol::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.dc-bg-pain::before {
  background:
    radial-gradient(circle at 88% 10%, rgba(194, 151, 74, 0.16) 0%, transparent 46%),
    radial-gradient(90% 50% at 0% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
}
.dc-bg-sol::before {
  background:
    radial-gradient(circle at 12% 10%, rgba(194, 151, 74, 0.2) 0%, transparent 46%),
    radial-gradient(90% 50% at 100% 100%, rgba(20, 53, 42, 0.07) 0%, transparent 65%);
}

/* Vạch phân cách là MỘT đường liền suốt cả section (grid-row 1/-1 trong lớp nền),
   không phải 5 đoạn rời mỗi hàng một đoạn — 5 đoạn rời sẽ đứt quãng ở các khe hàng
   và trông như lỗi render. Gradient mờ 2 đầu giống .journey-track bản cũ. */
.dc-bg-layer::before {
  content: '';
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: center;
  align-self: stretch;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--sl-gold-border) 12%, var(--sl-gold-border) 88%, transparent 100%);
}

/* Ô nội dung: chỉ giữ padding + nhịp dọc, KHÔNG có nền (nền do .dc-bg-layer lo).
   z-index 1 để chắc chắn nổi trên lớp nền — không dựa vào thứ tự vẽ ngầm định, vì
   .reveal có transform nên mỗi ô tự tạo stacking context và thứ tự vẽ trở nên khó
   suy luận. Nói thẳng ra bằng z-index thì không phải đoán. */
/* .dc-col là nhóm bọc ngoài để mobile gom được thành khối. Desktop cho nó
   display:contents để các ô bên trong THOÁT RA nhập thẳng vào lưới .dc-board —
   nhờ vậy 5 cặp vẫn thẳng hàng mà DOM vẫn có nhóm sẵn cho mobile. */
.dc-col {
  display: contents;
}

/* MỖI Ô KHAI BÁO TƯỜNG MINH CẢ HÀNG LẪN CỘT — không để lưới tự xếp.
   Vì sao bắt buộc: DOM nhóm theo CỘT (5 nỗi lo, rồi 5 giải pháp) để mobile gom
   được thành 2 khối, nhưng lưới tự xếp theo HÀNG — nó lấp hàng 1 bằng những ô đầu
   tiên trong DOM, tức pain1/pain2/pain3, làm lệch toàn bộ (đo được 2 tiêu đề lệch
   nhau 1703px).
   Cũng KHÔNG thể chỉ khai báo cột rồi để hàng auto: thuật toán xếp cột-xác-định
   dùng con trỏ hàng chỉ tiến, không lùi — sau khi xếp pain5 ở hàng cuối, con trỏ
   đang ở đó nên sol1 (cột 3) sẽ rơi vào hàng cuối chứ không phải hàng đầu. Phải
   ghim hàng.

   HÀNG 1 LÀ TIÊU ĐỀ CARD (.dc-col-head), nội dung bắt đầu từ hàng 2. Cả 2 cột nay
   đều có đúng 6 con (tiêu đề + 5 mục) nên chỉ số nth-child khớp THẲNG số hàng và
   2 cột viết chung được vào 1 nhóm rule. Cột vách ở giữa ngày trước có 5 con (thiếu
   tiêu đề) nên lệch 1 đơn vị và phải tách rule riêng — nay đã bỏ mũi tên nên không
   còn chỗ nào lệch nữa. */
.dc-col-pain > *:nth-child(1),
.dc-col-sol > *:nth-child(1) { grid-row: 1; }
.dc-col-pain > *:nth-child(2),
.dc-col-sol > *:nth-child(2) { grid-row: 2; }
.dc-col-pain > *:nth-child(3),
.dc-col-sol > *:nth-child(3) { grid-row: 3; }
.dc-col-pain > *:nth-child(4),
.dc-col-sol > *:nth-child(4) { grid-row: 4; }
.dc-col-pain > *:nth-child(5),
.dc-col-sol > *:nth-child(5) { grid-row: 5; }
.dc-col-pain > *:nth-child(6),
.dc-col-sol > *:nth-child(6) { grid-row: 6; }

/* Tiêu đề từng card lớn — đặt tên cho 2 cột để không phải suy ra từ màu nền.
   Khoảng cách với mép card do tiêu đề gánh (padding-top); lề ngang đọc --dc-pad-x
   để thẳng cột với chữ của từng hàng bên dưới.
   ::after là VẠCH PHÂN CÁCH DƯỚI HEAD: kéo head thành một cái "đầu bảng" tách biệt
   với 5 hàng, thay vì tiêu đề bơi ngay trên hàng đầu. Cắt cụt 2 đầu bằng gradient
   để vạch không chạm mép card trông như lỗi khung. */
.dc-col-head {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(2rem, 3vw, 2.75rem) var(--dc-pad-x) 1.125rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.dc-col-head::after {
  content: '';
  position: absolute;
  left: var(--dc-pad-x);
  right: var(--dc-pad-x);
  bottom: 0;
  height: 1px;
}

.dc-col-pain > .dc-col-head::after {
  background: linear-gradient(90deg, rgba(194, 151, 74, 0.55) 0%, rgba(194, 151, 74, 0.14) 70%, transparent 100%);
}

.dc-col-sol > .dc-col-head::after {
  background: linear-gradient(90deg, rgba(20, 53, 42, 0.28) 0%, rgba(194, 151, 74, 0.45) 70%, transparent 100%);
}

.dc-col-pain > .dc-col-head {
  grid-column: 1;
  color: var(--sl-white);
}

.dc-col-sol > .dc-col-head {
  grid-column: 3;
  color: var(--sl-forest-950);
}

.dc-pain {
  grid-column: 1;
}

.dc-sol {
  grid-column: 3;
}

/* MỖI MỤC LÀ MỘT HÀNG DÒNG SỔ, không còn nền riêng — nền do .dc-bg-layer lo cho
   trọn card. Bỏ nền từng mục thì 5 chiếc hộp không còn chồng trong 1 chiếc hộp
   nữa (card-trong-card là lý do 2 card cũ trông nặng), và vạch 1px giữ nhịp thay
   cho khe hở. Cấu trúc 3 con: icon | (số thứ tự + tiêu đề) — mô tả, giống hệt
   nhau ở 2 cột nên mắt quét ngang vẫn so thẳng được từng tầng.

   Lề ngang = --dc-pad-x trừ bleed 0.75rem, cộng padding 0.75rem là đúng bằng
   --dc-pad-x: CHỮ hàng nên thẳng cột với CHỮ head, mà phần bleed vẫn nằm
   ngoài để khi hover nền trải ra gần mép card mà không đẩy chữ xô lệch. */
.dc-pain,
.dc-sol {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  margin: 0 calc(var(--dc-pad-x) - 0.75rem);
  padding: 1.25rem 0.75rem;
  border-radius: var(--sl-r-sm);
  transition: background-color 0.25s ease;
}

/* Vạch ngăn giữa các hàng. KHÔNG vẽ cho hàng đầu vì head đã có vạch ::after của
   nó — vẽ thêm nữa sẽ ra nét đôi. Cùng độ dày 1px như vạch head nên trong 1 card
   chỉ có MỘT loại nét, chứ không phải vạch head 1 kiểu, vạch hàng 1 kiểu. */
.dc-col-pain > .dc-pain + .dc-pain {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.dc-col-sol > .dc-sol + .dc-sol {
  border-top: 1px solid rgba(20, 53, 42, 0.1);
}

/* Hover: chỉ đổi nền, không translate — 10 hàng cùng nhảy sẽ thành trò hề, và
   hệ thống chỉ animate transform/opacity. Nền hover tint theo CỤM CỦA CARD:
   trắng mờ trên card tối, gold wash trên card sáng (đúng --sl-gold-soft của hệ). */
.dc-pain:hover {
  background: rgba(255, 255, 255, 0.07);
}

.dc-sol:hover {
  background: rgba(194, 151, 74, 0.13);
}

/* Hàng cuối: padding-bottom 1.25rem đã có sẵn, cộng thêm phần thiếu để tổng khoảng
   trống dưới cùng đúng bằng padding-top của head — 2 card khép lại cân trên/dưới.
   .dc-board không khai báo row-gap nên không có khoảng nào tự nhiên ở đây. */
.dc-pain.is-last,
.dc-sol.is-last {
  margin-bottom: calc(clamp(2rem, 3vw, 2.75rem) - 1.25rem);
}

/* Nhóm chữ của hàng: flex-1 để số thứ tự bị đẩy sang mép trong thay vì dính ngay
   sau tiêu đề, tạo thành cột số chạy suốt card như số trang. min-width:0 bắt buộc,
   không thì tiêu đề dài sẽ đẩy vỡ số ra ngoài card. */
.dc-body {
  flex: 1;
  min-width: 0;
}

.dc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* Số thứ tự 01–05: cùng font serif với tiêu đề nhưng nhẹ hơn hẳn để không tranh
   ngôi. Bên trái đặt màu gold, bên phải xanh rừng — đảo cực theo nền đúng như cách
   chữ tiêu đề đổi tông, nên số vẫn "thuộc về" card của nó. */
.dc-index {
  flex-shrink: 0;
  font-family: var(--sl-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.dc-pain .dc-index {
  color: rgba(229, 190, 116, 0.72);
}

.dc-sol .dc-index {
  color: rgba(20, 53, 42, 0.38);
}

/* Chữ trên nền tối: đổi sang thang trắng, GIỮ NGUYÊN vai trò của từng tầng để thứ
   bậc đọc y hệt nửa sáng, chỉ đảo cực.
   Icon: đúng công thức .usp-group-card.group-1 .usp-icon-wrap (nền trắng mờ + viền
   gold mờ + icon vàng nhạt) — ô icon trên nền xanh rừng đã có sẵn idiom trong hệ
   thống, không tự nghĩ ra. Dùng #e5be74 như bản gốc chứ không phải --sl-gold-light:
  giữ khớp từng ký tự với idiom đang chạy ở section 2. */
.dc-pain .dc-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(194, 151, 74, 0.35);
  color: #e5be74;
}

.dc-pain .dc-title {
  color: var(--sl-white);
}

.dc-pain .dc-detail {
  color: rgba(255, 255, 255, 0.68);
}

/* Icon cột GIẢI PHÁP: ĐẶC nền xanh rừng thay vì nền smoke nhạt như icon thường
   của hệ (.usp-icon-wrap). Lý do: 5/5 icon bên này là dấu check, mà check mảnh
   1.8px màu xanh trên nền kem là đối tượng mờ nhất của cả section — dấu "đã xử lý"
   lại là thứ khó thấy nhất. Đổ đặc nền + viền gold + check vàng (vật liệu gold-on-
   forest đang chạy ở card nỗi lo) thì cột phải có 1 điểm nhấn thật, và gold làm
   được việc phân cấp thay vì chỉ trang trí. */
.dc-sol .dc-icon {
  background: var(--sl-forest-800);
  border-color: rgba(194, 151, 74, 0.45);
  color: #e5be74;
  box-shadow: 0 4px 12px -6px rgba(14, 42, 32, 0.5);
}

/* Ô icon 44px nền smoke — đúng thông số .usp-icon-wrap (section 2). KHÔNG còn
   margin-bottom như bản chip: nay icon là con thứ nhất của hàng flex ngang nên
   khoảng cách icon ↔ chữ do gap của .dc-pain/.dc-sol quyết định (đổi 1 chỗ đổi
   cho cả 2 cột), còn margin-bottom ở đây sẽ đẩy icon chúc xuống dưới chữ. */
.dc-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sl-smoke);
  border: 1px solid var(--sl-border);
  color: var(--sl-forest-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Cỡ tiêu đề lấy theo tầng "card title" của hệ thống (.card-header h3,
   .form-success-card h3 = 1.25rem), không lấy 1.75rem của .usp-group-title: ở đó
   tiêu đề đứng một mình trên đầu khối, còn ở đây nó nằm trong card 2 cột nên phải
   nhỏ hơn để không tranh chấp với <h2> của section. */
.dc-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sl-forest-950);
  margin-bottom: 0.5rem;
}

/* MỘT rule dùng chung cho cả 2 cột (trước đây là .dc-detail + .dc-summary riêng):
   hai bên đã đồng nhất về cấu trúc thì mô tả cũng phải chung một cỡ chữ, nếu không
   mắt vẫn thấy 2 khối khác loại. 0.9375rem = cỡ body của .usp-row-content p. */
.dc-detail {
  font-size: 0.9375rem;
  color: var(--sl-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============ 9. TRANG 5 — PRODUCT CATALOGUE ============ */
/* Nền smoke (không phải --sl-bg) để giữ nhịp LUÂN PHIÊN của cả trang:
   vi-sao (smoke) → doi-chieu (bg) → nguyen-lieu (smoke) → ung-dung (bg) →
   chung-minh (smoke) → lien-he (dark). Section giữa dang-nguyen-lieu đã bị xoá
   2026-09-23 nên khi đó đổi ung-dung sang bg + chung-minh sang smoke để giữ
   nhịp; đổi màu 1 section thì PHẢI kiểm tra 2 section kề nó, không được để
   2 section cùng nền dính liền thành một mảng dài không có mốc phân cách. */
.nguyen-lieu-section {
  background-color: var(--sl-smoke);
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(194, 151, 74, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(20, 53, 42, 0.05) 0%, transparent 40%);
}

.catalogue-banner-note {
  margin-top: 1.5rem;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.625rem 1.25rem;
  border-radius: var(--sl-r-pill);
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  box-shadow: 0 4px 16px -2px rgba(14, 42, 32, 0.06), var(--sl-glass-highlight);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
  color: var(--sl-forest-900);
}

.catalogue-banner-note svg {
  color: var(--sl-wine);
  vertical-align: -3px;
  margin-right: 0.4rem;
}

/* ≤640px: chip ~327px, nội dung ~287px (padding 1.25rem hai bên) — text 14px
   ~634px → vỡ 3 dòng, dòng 3 chỉ còn "nghiệp.". Hạ 12px + padding 1rem:
   text ~540px ≤ 2×295px → gọn đúng 2 dòng. */
@media (max-width: 640px) {
  .catalogue-banner-note {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.catalogue-card {
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  border-radius: var(--sl-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
  transition: all 0.35s var(--sl-ease);
}

.catalogue-card:hover {
  transform: translateY(-5px);
  background: var(--sl-glass-bg-hover);
  border-color: var(--sl-gold-border);
  box-shadow: var(--sl-glass-shadow-hover), var(--sl-glass-highlight);
}

.card-img-box.white-bg {
  background-color: var(--sl-white); /* Must stay pure clean white for product clarity as per brief */
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--sl-border);
  min-height: 220px;
  cursor: pointer;
}

.card-num-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sl-gold-dark);
}

.card-img-box img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.catalogue-card:hover .card-img-box img {
  transform: scale(1.05);
}

.card-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-header {
  margin-bottom: 1rem;
}

.card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sl-forest-950);
  margin-bottom: 0.25rem;
}

.card-en {
  font-size: 0.75rem;
  color: var(--sl-muted);
  display: block;
}

.card-specs-brief {
  font-size: 0.8125rem;
  color: var(--sl-body);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
}

.btn-card-detail {
  padding: 0.75rem 1rem;
  /* 44px = chuẩn tap target (bản ~39px chưa đạt); content căn giữa nhờ align-items của .btn. */
  min-height: 44px;
  border-radius: var(--sl-r-pill);
  border: 1px solid var(--sl-border);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sl-forest-950);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s ease;
}

.btn-card-detail:hover {
  border-color: var(--sl-forest-950);
  background-color: var(--sl-forest-950);
  color: var(--sl-white);
}

/* ============ 11. TRANG 7 — INDUSTRY ECOSYSTEM ============ */
/* Tiêu đề section này là 2 dòng CỐ Ý, dòng 2 ("NHIỀU CƠ HỘI...SẢN PHẨM") dài
   hơn mọi section khác — nới sec-head ra gần hết wrap và hạ nhẹ size cap để
   chữ "PHẨM" không bị rớt xuống dòng 3 (mặc định sec-head chỉ 860px). */
.ung-dung-section .sec-head {
  max-width: 1180px;
}

.ung-dung-section .sec-title {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}

.ung-dung-section {
  background-color: var(--sl-bg);
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(194, 151, 74, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(20, 53, 42, 0.05) 0%, transparent 45%);
}

.ecosystem-container {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.ecosystem-nucleus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nucleus-circle {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(251, 246, 236, 0.82) 100%);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1.5px solid var(--sl-gold-border);
  box-shadow: 0 20px 48px -10px rgba(194, 151, 74, 0.25), var(--sl-glass-highlight);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.nucleus-img-wrap {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.nucleus-img-wrap img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}

.nucleus-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sl-wine);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.nucleus-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-forest-950);
  margin-bottom: 0.125rem;
}

.nucleus-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 151, 74, 0.22) 0%, rgba(20, 53, 42, 0.12) 50%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.nucleus-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(194, 151, 74, 0.35);
  pointer-events: none;
}

.nucleus-pulse-ring.ring-1 {
  width: 380px;
  height: 380px;
}

.nucleus-pulse-ring.ring-2 {
  width: 440px;
  height: 440px;
  border-style: dotted;
}

.nucleus-pulse-ring.ring-3 {
  width: 500px;
  height: 500px;
  border-style: dashed;
  border-color: rgba(194, 151, 74, 0.2);
}

.ecosystem-satellites-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.industry-sat-card {
  padding: 1.5rem;
  border-radius: var(--sl-r);
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
  display: flex;
  flex-direction: column;
  transition: all 0.3s var(--sl-ease);
}

.industry-sat-card:hover {
  background: var(--sl-glass-bg-hover);
  border-color: rgba(46, 111, 64, 0.4);
  transform: translateY(-4px);
  box-shadow: var(--sl-glass-shadow-hover), var(--sl-glass-highlight);
}

.ind-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ind-num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--sl-r-pill);
  background: var(--sl-smoke);
  border: 1px solid var(--sl-border);
  color: var(--sl-wine);
}

.ind-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sl-wine-soft);
  border: 1px solid rgba(126, 25, 39, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-wine);
}

.ind-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-forest-950);
  margin-bottom: 0.375rem;
}

.ind-desc {
  font-size: 0.8125rem;
  color: var(--sl-muted);
  line-height: 1.5;
  margin: 0;
}

/* CTA box dựng lại theo CTA BANNER cũ (commit 1baa7cf, block sec_landing_cta):
   card tối bo tròn, ảnh bg (cta-bg.webp — nhân sâm trên nền rêu) phủ bên phải,
   overlay gradient ngang tối→trong để chữ nằm yên trên vùng tối bên trái. */
.ecosystem-cta-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--sl-r-card);
  color: var(--sl-white);
  padding: 3.375rem 3.5rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  text-align: left;
  box-shadow: 0 20px 48px -12px rgba(14, 42, 32, 0.35);
  background: var(--sl-forest-950) url('../images/cta-bg.webp') right center / cover no-repeat;
}

.ecosystem-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(10, 28, 20, 0.94) 0%, rgba(10, 28, 20, 0.82) 40%, rgba(10, 28, 20, 0.32) 66%, rgba(10, 28, 20, 0) 100%);
}

.ecosystem-cta-box h3,
.ecosystem-cta-box p,
.ecosystem-cta-box .btn {
  position: relative;
  z-index: 1;
}

.ecosystem-cta-box h3 {
  font-family: var(--sl-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: var(--sl-tracking-serif);
  line-height: 1.24;
  max-width: 580px;
  color: var(--sl-gold-light);
  margin: 0;
}

.ecosystem-cta-box p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #c4d7cd;
  max-width: 480px;
  margin: 0;
}

.ecosystem-cta-box .btn {
  flex: 0 0 auto;
}

/* Mobile như CTA cũ: padding gọn, overlay chuyển sang dọc, nút full-width */
@media (max-width: 640px) {
  .ecosystem-cta-box {
    padding: 1.875rem 1.25rem;
    min-height: 0;
    text-align: left;
    border-radius: var(--sl-r);
  }
  .ecosystem-cta-box::before {
    background: linear-gradient(180deg, rgba(10, 28, 20, 0.94), rgba(10, 28, 20, 0.78));
  }
  .ecosystem-cta-box .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============ 12. TRANG 8 — NĂNG LỰC & BẰNG CHỨNG (CLAIM - PROOF) ============ */
/* Tiêu đề section này là 2 dòng CỐ Ý (nl2br) — nới sec-head như section Hệ Sinh
   Thái để từng dòng không bị vỡ thêm (mặc định sec-head chỉ 860px). */
.chung-minh-section .sec-head {
  max-width: 1180px;
}

.chung-minh-section {
  background-color: var(--sl-smoke);
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(194, 151, 74, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(20, 53, 42, 0.06) 0%, transparent 45%);
}

.claim-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.cp-card {
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  border-radius: var(--sl-r-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
  transition: all 0.35s var(--sl-ease);
}

.cp-card:hover {
  transform: translateY(-5px);
  background: var(--sl-glass-bg-hover);
  border-color: var(--sl-gold-border);
  box-shadow: var(--sl-glass-shadow-hover), var(--sl-glass-highlight);
}

.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.cp-num {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sl-gold);
}

.cp-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sl-wine);
  padding: 0.25rem 0.75rem;
  background: var(--sl-wine-soft);
  border: 1px solid rgba(126, 25, 39, 0.2);
  border-radius: var(--sl-r-pill);
}

.cp-verified-strip {
  margin-bottom: 0.875rem;
}

.cp-verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--sl-r-pill);
  background: var(--sl-wine-soft);
  color: var(--sl-wine);
  border: 1px solid rgba(126, 25, 39, 0.25);
}

.cp-verified-tag svg {
  color: var(--sl-wine);
  flex-shrink: 0;
}

.cp-claim {
  margin-bottom: 1.5rem;
}

.cp-claim h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--sl-forest-950);
  margin-bottom: 0.375rem;
}

.cp-claim p {
  font-size: 0.875rem;
  color: var(--sl-body);
  line-height: 1.55;
  margin: 0;
}

.cp-proof {
  margin-top: auto;
  border-top: 1px solid var(--sl-border);
  padding-top: 1.25rem;
}

.proof-media-wrap {
  position: relative;
  border-radius: var(--sl-r-sm);
  overflow: hidden;
  border: 1px solid var(--sl-border);
  cursor: pointer;
  background: var(--sl-smoke);
}

.proof-media-wrap img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.proof-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 32, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.proof-media-wrap:hover .proof-overlay {
  opacity: 1;
}

.proof-media-wrap:hover img {
  transform: scale(1.05);
}

.proof-view-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sl-white);
  padding: 0.5rem 1rem;
  border-radius: var(--sl-r-pill);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.proof-partner-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--sl-muted);
}

.proof-caption {
  font-size: 0.75rem;
  color: var(--sl-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.proof-media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.duo-item {
  position: relative;
  border-radius: var(--sl-r-sm);
  overflow: hidden;
  border: 1px solid var(--sl-border);
  cursor: pointer;
}

.duo-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.duo-item:hover img {
  transform: scale(1.06);
}

.duo-item span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14, 42, 32, 0.8);
  color: var(--sl-white);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.proof-dept-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dept-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sl-forest-900);
}

.dept-item svg {
  color: var(--sl-forest-800);
  flex-shrink: 0;
}

/* Logo Đối Tác & Nhà Máy */
.partners-block {
  padding: 2.5rem;
  border-radius: var(--sl-r-card);
  background: var(--sl-glass-bg);
  -webkit-backdrop-filter: var(--sl-glass-blur);
  backdrop-filter: var(--sl-glass-blur);
  border: 1px solid var(--sl-glass-border);
  box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
  text-align: center;
}

.partners-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sl-forest-900);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2rem;
}

.partners-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  flex-wrap: wrap;
}

.partner-logo-item {
  filter: grayscale(100%);
  opacity: 0.75;
  transition: all 0.3s ease;
}

.partner-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.partner-logo-item img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

/* ============ MEDIA CỤC BỘ ≤640px — CHỨNG MINH (bộ phận chưa có breakpoint) ============ */
@media (max-width: 640px) {
  /* 2 cột ở 375px mỗi ô chỉ ~130px: caption absolute đáy nhấn gần trọn ảnh scan
     chứng từ → xếp dọc, mỗi ảnh full-width. Kèm tăng chiều cao 110→160px (số của
     .proof-media-wrap): ô giờ rộng gấp đôi, giữ 110px thì object-fit:cover cắt
     ảnh quá mỏng. */
  .proof-media-duo {
    grid-template-columns: 1fr;
  }
  .duo-item img {
    height: 160px;
  }
  /* Card đối tác nội tại còn ~247px ở 375px (wrap 327 − padding 80): nới padding
     để 5 logo không bị nhồi quá chặt. */
  .partners-block {
    padding: 1.75rem 1.25rem;
  }
  .partners-logos-row {
    /* Base đã flex-wrap — chỉ siết gap (clamp cho 32px ở mobile) để logo không
       rời nhau quá mức khi wrap 2-3 hàng. */
    gap: 1.25rem 1.5rem;
  }
}

/* ============ 13. TRANG 8 (TIẾP) — FORM LEAD B2B (EVEREST DARK) ============ */
.lien-he-section.dark-theme {
  position: relative;
  background: var(--sl-forest-950) url('../images/contact-bg.webp') center center/cover no-repeat;
  color: var(--sl-light);
  border-radius: var(--sl-r-card) var(--sl-r-card) 0 0;
  padding-bottom: 6rem;
  overflow: hidden;
}

/* Lớp overlay tối giúp bảo đảm tương phản cao, làm nổi bật rõ nét toàn bộ nội dung & form */
.lien-he-section.dark-theme::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 20, 14, 0.94) 0%,
    rgba(10, 34, 25, 0.89) 50%,
    rgba(5, 18, 13, 0.95) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hiệu ứng hào quang vàng Gold ấm tinh tế góc trên bên phải */
.lien-he-section.dark-theme::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 85% 25%,
    rgba(194, 151, 74, 0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 1;
}

.lien-he-section.dark-theme .wrap {
  position: relative;
  z-index: 2;
}

.cta-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: flex-start;
}

.cta-info-col {
  padding-right: 1rem;
}

.cta-main-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  color: var(--sl-gold);
  line-height: 1.2;
  margin: 1.5rem 0;
}

.cta-desc {
  font-size: 1.0625rem;
  color: var(--sl-light-muted);
  line-height: 1.65;
  margin-bottom: 2.5rem;
}

.cta-highlights-box {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.hl-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.hl-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(194, 151, 74, 0.15);
  border: 1px solid var(--sl-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-gold);
  flex-shrink: 0;
}

.hl-item strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--sl-white);
  margin-bottom: 0.125rem;
}

.hl-item p {
  font-size: 0.8125rem;
  color: var(--sl-light-muted);
  margin: 0;
}

/* Glassmorphism Lead Form Card */
.glass-form-card {
  padding: clamp(2rem, 3.5vw, 3rem);
  border-radius: var(--sl-r-card);
  background-color: rgba(14, 42, 32, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(194, 151, 74, 0.45);
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 20px -2px rgba(194, 151, 74, 0.15);
  position: relative;
  overflow: hidden;
}

.glass-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), rgba(194, 151, 74, 0.6), transparent);
  pointer-events: none;
}

.form-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-gold-light);
  padding: 0.25rem 0.65rem;
  border-radius: var(--sl-r-pill);
  background: rgba(194, 151, 74, 0.15);
  border: 1px solid rgba(194, 151, 74, 0.35);
  margin-bottom: 0.875rem;
}

.form-secure-badge svg {
  color: var(--sl-gold);
  flex-shrink: 0;
}

/* ≤640px: card nội tại ~263px, badge ~11px + letter-spacing 0.06em cho text
   ~288px → vượt card, "NGHIỆP" rớt dòng 2. Siết font 10px + letter-spacing
   0.03em + padding/gap nhỏ hơn: text ~240px + icon nằm gọn 1 dòng ở 375px. */
@media (max-width: 640px) {
  .form-secure-badge {
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    gap: 0.3rem;
    white-space: nowrap;
  }
}

.form-card-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sl-white);
  margin-bottom: 0.5rem;
}

.form-card-header p {
  font-size: 0.875rem;
  color: var(--sl-light-muted);
  margin-bottom: 2rem;
  line-height: 1.55;
}

/* CF7 Form Elements Styling */
.wpcf7 form {
  margin: 0;
}

.wpcf7 form p,
.wpcf7 .field p {
  margin: 0;
  padding: 0;
  display: contents;
}

.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sl-light-muted);
  margin-bottom: 0.375rem;
}

.field label .req {
  color: #ff7460;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  height: 48px;
  padding: 0.75rem 1.125rem;
  border-radius: var(--sl-r-sm);
  background-color: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--sl-white);
  font-family: inherit;
  font-size: 16px; /* 16px prevents iOS Safari auto viewport zoom */
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wpcf7 select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e5be74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.wpcf7 textarea {
  height: auto;
  min-height: 90px;
  resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--sl-gold);
  box-shadow: 0 0 0 3px rgba(194, 151, 74, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wpcf7 select option {
  background: var(--sl-forest-950);
  color: var(--sl-white);
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.field-radio {
  margin: 1.25rem 0;
  border: 0;
  padding: 0;
}

.field-radio > legend {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sl-light-muted);
  margin-bottom: 0.625rem;
}

.field-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
  margin-left: 0;
  cursor: pointer;
}

.field-radio .wpcf7-list-item label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-white);
  margin-bottom: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Vùng chạm 44px cho option (input radio chỉ 18px — quá nhỏ để bấm). Label đã
     bao trọn text nên phóng to label là đủ, không cần đổi kích thước input. */
  min-height: 44px;
}

.field-radio input[type="radio"] {
  accent-color: var(--sl-gold);
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}

.field-radio .wpcf7-list-item-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-white);
  cursor: pointer;
  user-select: none;
}

.wpcf7-not-valid-tip {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #ff9d9d;
  display: block;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
  border-color: rgba(255, 120, 120, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(255, 100, 100, 0.2) !important;
}

.wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: 0.875rem 1.25rem !important;
  border-radius: var(--sl-r-sm) !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  border: 1px solid var(--sl-gold-border) !important;
  background: rgba(14, 42, 32, 0.9) !important;
  color: var(--sl-gold-light) !important;
}

.wpcf7-spinner {
  display: none !important;
}

.form-submit-wrap {
  margin-top: 1.5rem;
}

.form-submit-wrap .wpcf7-submit {
  width: 100%;
}

/* CTA ngành dùng chung style nút submit của form liên hệ. */
.form-submit-wrap .wpcf7-submit,
.ecosystem-cta-box .btn {
  /* Nút full-width mọi breakpoint + .btn gốc có white-space:nowrap + overflow:hidden
     → chữ dài bị CẮT ở 375px. Cho phép 2 dòng, căn giữa. */
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  padding: 1.125rem 2rem;
  border-radius: var(--sl-r-pill);
  background: linear-gradient(135deg, var(--sl-wine) 0%, #68111e 100%) !important;
  color: var(--sl-white) !important;
  font-size: 1rem;
  font-weight: 700;
  border: 1.5px solid var(--sl-gold) !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 28px -6px rgba(126, 25, 39, 0.55);
}

.form-submit-wrap .wpcf7-submit:hover,
.ecosystem-cta-box .btn:hover {
  background: linear-gradient(135deg, #8b1e2d 0%, var(--sl-wine) 100%) !important;
  color: var(--sl-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -6px rgba(126, 25, 39, 0.7), 0 0 16px rgba(194, 151, 74, 0.4);
}

/* ≤640px: card nội tại ~263px → nút ~261px, padding 2rem mỗi bên chỉ còn ~194px
   cho chữ — "NHẬN TƯ VẤN & BÁO GIÁ →" (~240px ở 16px/700) bị wrap và arrow "→"
   rớt xuống dòng 2. Siết padding xuống 1rem (cộng thêm ~32px) + font 0.9rem
   (~214px) để text + arrow gọn trong 1 dòng. white-space:normal ở base vẫn giữ
   làm lưới an toàn: nếu copy dài hơn thì wrap có trật tự thay vì bị overflow
  :hidden của .btn cắt cụt. */
@media (max-width: 640px) {
  .form-submit-wrap .wpcf7-submit,
  .ecosystem-cta-box .btn {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

.form-note {
  font-size: 0.75rem;
  color: var(--sl-light-muted);
  text-align: center;
  margin-top: 1rem;
}

/* Form Success Confirmation Card */
.form-success-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: rgba(20, 53, 42, 0.7);
  border: 1px solid var(--sl-gold-border);
  border-radius: var(--sl-r);
  animation: modalFadeIn 0.4s var(--sl-ease);
}

.form-success-card.show {
  display: block !important;
}

.success-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sl-wine);
  color: var(--sl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 10px 25px rgba(126, 25, 39, 0.4);
}

.form-success-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-white);
  margin-bottom: 0.75rem;
}

.form-success-card p {
  font-size: 0.9375rem;
  color: var(--sl-light-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.form-success-card p strong {
  color: var(--sl-gold);
}

.success-hotline-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--sl-r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  color: var(--sl-white);
}

.success-hotline-note .hotline-link {
  color: var(--sl-gold);
  font-weight: 700;
}

/* ============ 14. FOOTER (EVEREST DARK) ============ */
.everest-footer {
  background-color: #081a13;
  color: var(--sl-white);
  padding: 5rem 0 3rem;
  border-top: 1px solid rgba(194, 151, 74, 0.25);
}

/* Logo bọc nền kem bo tròn cùng màu thanh header — đặt trên tagline cột Giới thiệu */
.footer-logo-box {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--sl-r-sm);
  background: var(--sl-bg);
  margin-bottom: 1.25rem;
}

.footer-brand-logo {
  display: inline-block;
}

.footer-brand-logo img {
  height: 30px;
  width: auto;
}

.footer-divider-line {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
  margin: 3rem 0;
}

.footer-content-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.footer-about-text {
  font-size: 0.9375rem;
  color: var(--sl-light-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--sl-r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(194, 151, 74, 0.2);
  color: var(--sl-white);
  font-size: 0.8125rem;
  transition: all 0.25s ease;
}

.social-pill:hover {
  background: var(--sl-wine);
  color: var(--sl-white);
  border-color: var(--sl-wine);
}

.footer-col-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-gold-light);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links-list a {
  font-size: 0.875rem;
  color: var(--sl-light-muted);
  transition: color 0.2s ease;
}

.footer-links-list a:hover {
  color: var(--sl-white);
}

.footer-contact-item {
  margin-bottom: 1.25rem;
}

.contact-lbl {
  font-size: 0.75rem;
  color: var(--sl-light-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.contact-val {
  font-size: 0.875rem;
  color: var(--sl-white);
  line-height: 1.5;
}

.contact-val.phone-highlight {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sl-gold);
}

.footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--sl-light-muted);
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-bottom-links a {
  color: var(--sl-light-muted);
}

.footer-bottom-links a:hover {
  color: var(--sl-white);
}

/* ============ 15. MODALS & LIGHTBOX ============ */
/* Universal Lightbox */
.custom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.custom-lightbox.is-active {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 15, 12, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-close-btn {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100002;
  color: var(--sl-white);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}

.lightbox-content {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 16px;
  border-radius: var(--sl-r);
  box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: calc(85vh - 60px);
  object-fit: contain;
  border-radius: var(--sl-r-sm);
}

.lightbox-caption {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-ink);
  margin-top: 10px;
  text-align: center;
}

/* Spec Modals */
.spec-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.spec-modal.is-active {
  display: flex;
}

.spec-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(18, 26, 21, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.spec-modal-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--sl-r-card);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 80px -12px rgba(14, 42, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: modalFadeIn 0.3s var(--sl-ease);
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.spec-modal-header {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--sl-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
}

.spec-modal-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}

.spec-modal-header p {
  font-size: 0.875rem;
  color: var(--sl-muted);
  margin: 0;
}

.spec-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sl-smoke);
  color: var(--sl-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.spec-modal-close:hover {
  background: var(--sl-border);
  transform: rotate(90deg);
}

.spec-modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.size-groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Modal Bột chỉ có 3 card (100g/200g/500g) → 3 cột trên desktop */
.size-groups-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Thẻ loại (Classic/Gold/Diamond/Premium): ảnh full-width trên, tên dưới.
   Nền trắng + viền vàng để tách khỏi nền modal, hover nhấc lên như product card. */
.size-group-item,
.duo-spec-card {
  padding: 0;
  border-radius: var(--sl-r);
  background: var(--sl-white);
  border: 1px solid var(--sl-gold-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px -10px rgba(14, 42, 32, 0.1);
  transition: transform 0.3s var(--sl-ease), box-shadow 0.3s var(--sl-ease), border-color 0.3s var(--sl-ease);
}

.size-group-item:hover,
.duo-spec-card:hover {
  transform: translateY(-6px);
  border-color: var(--sl-gold);
  box-shadow: 0 20px 40px -14px rgba(14, 42, 32, 0.22);
}

.size-group-item img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  padding: 1.25rem;
  background: linear-gradient(160deg, var(--sl-white) 0%, var(--sl-gold-soft) 100%);
  border-bottom: 1px solid var(--sl-border);
}

.size-group-item h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--sl-forest-950);
  margin: 0;
  padding: 0.875rem 1rem 1.125rem;
}

.size-group-item h4::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sl-gold-light), var(--sl-gold));
  margin: 0.5rem auto 0;
}

.duo-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Card Lát Mỏng / Lát Dày: header gradient vàng in hoa, thân trắng,
   bullet dạng chip vàng — đồng bộ với card modal Nguyên Củ / Bột. */
.duo-spec-card h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--sl-forest-950);
  margin: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(160deg, var(--sl-white) 0%, var(--sl-gold-soft) 100%);
  border-bottom: 1px solid var(--sl-border);
}

.duo-spec-card h4::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sl-gold-light), var(--sl-gold));
  margin: 0.5rem auto 0;
}

.duo-spec-card p {
  font-size: 0.875rem;
  color: var(--sl-muted);
  margin: 0;
  padding: 1rem 1.5rem 0;
  line-height: 1.6;
}

.duo-spec-card ul {
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: auto 1.5rem 1.5rem;
}

.duo-spec-card ul li {
  position: relative;
  margin-top: 1rem;
  padding: 0.5rem 0.875rem 0.5rem 2rem;
  border-radius: var(--sl-r-sm);
  background: var(--sl-gold-soft);
  border: 1px solid var(--sl-gold-border);
  color: var(--sl-forest-900);
  font-weight: 600;
}

.duo-spec-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  color: var(--sl-wine);
  font-weight: 700;
}

/* ============ 16. SCROLL REVEAL ANIMATIONS ============ */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--sl-ease), transform 0.7s var(--sl-ease);
}

.js .reveal.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============ 17. RESPONSIVE BREAKPOINTS ============ */
@media (max-width: 1200px) {
  .catalogue-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ecosystem-container {
    grid-template-columns: 1fr;
    text-align: center;
    /* Khi xếp dọc, row-gap là khoảng cách duy nhất giữa nucleus và lưới card. */
    row-gap: 2rem;
  }
  .ecosystem-nucleus {
    /* Stack DỌC (bắt đầu từ ≤1200 chứ không phải ≤640): ring 380/440/500px tràn
       ~90px lên trên (đè .sec-head) và xuống dưới (đè thẻ satellite) — phần tử
       absolute vẽ TRÊN nội dung thường dù đứng trước trong DOM. Clip theo đúng
       cách ≤640 đang làm: box = vòng tròn + padding, ring bị cắt ở mép box thay
       vì đè lên chữ/thẻ. Glow là gradient mềm nên cắt mép không lộ viền. */
    max-width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
  }
  .ecosystem-satellites-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .site-header {
    /* Ở mobile KHÔNG có nút CTA trong thanh (bị ẩn, xem .header-actions .header-cta);
       phần tử cao nhất là .burger 44px → thanh ~68px (vẫn dưới mốc an toàn 84px mà
       .hero-section dùng làm padding-top, và dưới scroll-padding-top 100px).
       Header giữ nguyên cỡ khi cuộn — .scrolled chỉ đổi nền/viền/bóng nên không cần
       (và không được) khai báo padding ở đây. */
    padding: 0.75rem 0;
  }
  .brand-logo {
    height: 30px;
  }
  .burger {
    /* 44×44 = chuẩn tap target (WCAG 2.5.5 / Apple HIG) — bản 36px trước đây
       nhỏ hơn ngưỡng chạm của ngón tay trên điện thoại. */
    display: flex;
    width: 44px;
    height: 44px;
  }
  .burger svg {
    width: 20px;
    height: 20px;
  }

  /* Mobile Drawer (off-canvas trượt từ phải, nền xanh rừng đậm kiểu header cũ) */
  .site-nav-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 340px);
    background: linear-gradient(165deg, var(--sl-forest-950) 0%, var(--sl-forest-800) 100%);
    color: var(--sl-light);
    border-left: none;
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.375rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    margin-left: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.42s var(--sl-ease), visibility 0s linear 0.42s;
  }

  .site-nav-wrap.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.42s var(--sl-ease), visibility 0s;
  }

  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid rgba(216, 184, 120, 0.2);
  }

  .drawer-brand {
    font-family: var(--sl-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sl-gold-light);
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
  }

  .drawer-brand .flag {
    width: 22px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .drawer-close {
    /* 44×44 — chuẩn tap target như .burger (bản 40px chưa đạt 44px). */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sl-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s var(--sl-ease), color 0.25s var(--sl-ease),
      transform 0.25s var(--sl-ease), border-color 0.25s var(--sl-ease);
  }

  .drawer-close:hover {
    background: var(--sl-gold-light);
    border-color: var(--sl-gold-light);
    color: var(--sl-forest-950);
    transform: rotate(90deg);
  }

  .site-nav-wrap .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin: 0.875rem 0 0.5rem;
  }

  .site-nav-wrap .site-nav li {
    width: 100%;
  }

  .site-nav-wrap .nav-link {
    display: block;
    width: 100%;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: none;
    color: #d6e2de;
    padding: 0.9375rem 0.375rem 0.9375rem 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: color 0.2s var(--sl-ease), transform 0.2s var(--sl-ease);
  }

  /* Trong drawer dùng thanh dọc bên trái thay cho gạch chân ngang */
  .site-nav-wrap .nav-link::after {
    display: none;
  }

  .site-nav-wrap .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--sl-gold-light);
    border-radius: 2px;
    transition: height 0.3s var(--sl-ease);
  }

  .site-nav-wrap .nav-link:hover,
  .site-nav-wrap .nav-link.active,
  .site-nav-wrap .nav-link.is-active {
    color: var(--sl-gold-light);
    transform: translateX(4px);
  }

  .site-nav-wrap .nav-link:hover::before,
  .site-nav-wrap .nav-link.active::before,
  .site-nav-wrap .nav-link.is-active::before {
    height: 58%;
  }

  .drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .drawer-cta {
    width: 100%;
    /* Nút full-width trong drawer: cho phép xuống dòng nếu chữ CTA dài hơn ~280px,
       tránh overflow:hidden của .btn cắt mất chữ. */
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.125rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .drawer-contact a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #cddcd7;
    margin-bottom: 0;
    transition: color 0.2s ease;
  }

  /* Icon phone & Zalo trong drawer: svg không có width/height attr → tự phóng to,
     cần định cỡ cố định đúng scale icon (20px) */
  .drawer-contact a svg {
    color: var(--sl-gold-light);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .drawer-contact a:hover {
    color: var(--sl-white);
  }

  .header-actions .header-cta {
    display: none;
  }

  /* Hero mobile/tablet: canh TRÁI (không canh giữa) — chữ canh giữa sẽ trôi sang
     vùng sáng bên phải (núi tuyết/củ sâm) và mất tác dụng bảo vệ của scrim.
     Bản cũ cũng canh trái ở mọi breakpoint.
     padding-top chừa chỗ cho header fixed: header mobile nay đo được 60px, nhưng
     GIỮ mốc 84px vì đây là mốc an toàn (thêm biên cho safe-area iPhone và cho
     trường hợp logo/ảnh nạp chậm làm thanh cao tạm thời). */
  .hero-section {
    padding-top: max(20vh, calc(84px + env(safe-area-inset-top, 0px)));
    /* KHÔNG set padding-bottom: dải marquee phải dính liền mép đáy ở mọi bề rộng.
       Khoảng thở dưới khối chữ do .hero-section > .wrap lo. */
    text-align: left;
  }
  .hero-section > .wrap {
    padding-bottom: 2rem;
  }
  /* BẮT BUỘC: desktop cap .hero-copy ở min(838px,68%) — ở 375px chỉ còn 255px,
     tiêu đề sẽ vỡ ra nhiều dòng. Mobile phải trả về full bề rộng. */
  .hero-copy {
    max-width: 100%;
  }
  /* Tiêu đề hero dưới 992px: KHÔNG đặt cỡ chữ ở đây — công thức theo bề rộng cột
     nằm ở 2 block cuối file (≤480px chạy 3 dòng, 481-991px giữ 2 dòng theo chỗ
     ngắt của người biên tập). Lý do tách: hai chế độ cần CÙNG một phép đo nhưng
     KHÁC mẫu số, xem chú thích ở đó. */
  /* Scrim dọc đậm hơn: trên mobile ảnh bị crop nên vùng sáng chiếm tỉ lệ lớn hơn */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(9, 26, 19, 0.88) 0%, rgba(9, 26, 19, 0.62) 45%, rgba(9, 26, 19, 0.55) 100%),
      linear-gradient(90deg, rgba(9, 26, 19, 0.80) 0%, rgba(9, 26, 19, 0.40) 70%, rgba(9, 26, 19, 0.15) 100%);
  }

  /* Grid Reductions */
  .usp-groups-grid {
    grid-template-columns: 1fr;
  }
  .usp-list-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile: 2 card XẾP DỌC (card nỗi lo trên, card giải pháp dưới), không phải 5
     hàng đôi — mỗi hàng đôi ở màn hẹp chỉ còn ~300px nên chữ dồn thành cột mảnh.
     Cách làm: .dc-board bỏ lưới, .dc-col từ display:contents chuyển thành flex
     column — nhóm bọc ngoài "hiện hình" và gom các ô lại thành một khối.
     Nhờ vậy KHÔNG cần canh ô bằng nth-of-type, và vạch dọc tự triệt tiêu (nó nằm
     trong .dc-bg-layer::before — ở đây bỏ luôn cả lớp nền, xem dưới). */
  .dc-board {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .dc-col {
    display: flex;
    flex-direction: column;
  }
  /* Lớp nền phủ tuyệt đối không dùng được nữa: 2 card xếp dọc nên mỗi card phải tự
     mang nền và tự cao theo nội dung. Chuyển nền về chính .dc-col-* và cho
     .dc-bg-layer biến mất — giữ nguyên 2 class .dc-bg-pain/.dc-bg-sol để không phải
     viết lại công thức chất liệu (màu nền, viền, bóng) ở 2 nơi. */
  .dc-bg-layer {
    display: none;
  }
  /* Chất liệu y hệt desktop (nền + viền + bóng), nhưng vì .dc-bg-layer đã bị bỏ
     ở trên nên quầng sáng đối xứng của 2 card phải tự tái tạo tại đây — nếu không
     mobile mất luôn trang trí mà không báo lỗi, chỉ là 2 khối màu phẳng. */
  .dc-col-pain {
    position: relative;
    border-radius: var(--sl-r-card);
    background:
      linear-gradient(140deg, rgba(14, 42, 32, 0.97) 0%, rgba(20, 53, 42, 0.95) 68%, rgba(27, 67, 52, 0.98) 100%);
    border: 1px solid rgba(194, 151, 74, 0.35);
    box-shadow: 0 20px 48px -12px rgba(14, 42, 32, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .dc-col-sol {
    position: relative;
    border-radius: var(--sl-r-card);
    background: var(--sl-glass-bg);
    -webkit-backdrop-filter: var(--sl-glass-blur);
    backdrop-filter: var(--sl-glass-blur);
    border: 1px solid var(--sl-glass-border);
    box-shadow: var(--sl-glass-shadow), var(--sl-glass-highlight);
    overflow: hidden;
  }
  .dc-col-pain::before,
  .dc-col-sol::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }
  .dc-col-pain::before {
    background:
      radial-gradient(circle at 88% 10%, rgba(194, 151, 74, 0.16) 0%, transparent 46%),
      radial-gradient(90% 50% at 0% 100%, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
  }
  .dc-col-sol::before {
    background:
      radial-gradient(circle at 12% 10%, rgba(194, 151, 74, 0.2) 0%, transparent 46%),
      radial-gradient(90% 50% at 100% 100%, rgba(20, 53, 42, 0.07) 0%, transparent 65%);
  }
  .claim-proof-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cta-layout-grid {
    grid-template-columns: 1fr;
  }
  .cta-info-col {
    /* Đã stack dọc → lề phải desktop không còn tác dụng, giữ lại thì chữ bị hụt
       16px so với form card bên dưới. */
    padding-right: 0;
  }
  .hero-stats-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    /* stretch — xem giải thích ở rule gốc: giữ 4 icon cùng một trục ngang */
    align-items: stretch;
    gap: 0.25rem;
    margin-top: 1.5rem;
  }
  .hero-stats-bar .h-stat-item {
    gap: 0.375rem;
    text-align: left;
  }
  .hero-stats-bar .h-stat-icon svg {
    width: 16px;
    height: 16px;
  }
  .hero-stats-bar .h-stat-lbl {
    font-size: 0.75rem;
    line-height: 1.25;
    /* 641–991px: 4 mục nhồi 1 hàng, mỗi mục ~140px — nếu giữ nowrap (rule gốc)
       chữ bị cắt/chồng. Cho phép xuống dòng: hành lang an toàn cho tới ≤640
       (nơi bar chuyển 2×2). */
    white-space: normal;
  }
  .usp-highlight-metrics {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  /* Marquee ở mobile: chữ nhỏ lại và mục sát nhau hơn cho vừa màn hẹp.
     Giữ đúng quy ước "chỉ padding-left" để vạch ngăn vẫn nằm giữa hai mục. */
  .marquee-item {
    padding-left: 1.125rem;
  }
  .marquee-item::after {
    margin-left: 1.125rem;
  }
  .marquee-text {
    font-size: 0.8125rem;
  }
}

@media (max-width: 768px) {
  .header-actions {
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  /* LƯU Ý: KHÔNG lặp lại .usp-groups-grid / .usp-list-grid ở đây — 2 rule đó đã
     được set 1fr trong block ≤991 phía trên (640 ≤ 991 nên vẫn áp dụng). Bản trùng
     trước đây đã xoá. */
  .usp-group-title,
  .usp-group-card.group-1 .usp-group-title {
    /* 1.75rem (group 2/3) và clamp cap 2.25rem (group 1) là cỡ desktop; card full-width
       ở 375px chỉ ~279px nội dung → hạ xuống 1.375rem cho vừa 2 dòng. */
    font-size: 1.375rem;
  }
  /* Mô tả nhóm dài 130+ ký tự nên ở 375px 16/17px ăn quá nhiều dòng; hạ còn 15px.
     Phải kèm selector group-1: rule .usp-group-card.group-1 .usp-group-sub (0,3,0)
     ở trên thắng .usp-group-sub (0,1,0) bất kể thứ tự media query. */
  .usp-group-sub,
  .usp-group-card.group-1 .usp-group-sub {
    font-size: 0.9375rem;
  }
  /* Card Ưu tiên 02 ở 375px: card rộng 327 - padding 32×2 = 263, rồi icon 50px +
     khe 18px + dấu ✓ 26px ăn tiếp → cột chữ chỉ còn ~145px, "Thành viên chính
     thức OGGA" vỡ 3 dòng. Bỏ dấu ✓ (trang trí, không mang thông tin), icon về
     44px, padding/khe về 1rem và chữ về 1.0625rem → cột chữ ~169px: hàng "COA
     theo từng lô" gọn 1 dòng, hàng OGGA còn 2 dòng. Mini-card nhóm 3 hạ cùng cỡ
     để hai card đọc đồng bộ. */
  .usp-group-card.group-2 .usp-row {
    padding: 1rem;
    gap: 1rem;
  }
  .usp-group-card.group-2 .usp-row::after {
    display: none;
  }
  .usp-group-card.group-2 .usp-icon-wrap {
    width: 44px;
    height: 44px;
  }
  .usp-group-card.group-2 .usp-row-content h4,
  .usp-group-card.group-3 .usp-mini-card h4 {
    font-size: 1.0625rem;
  }
  /* Title 5 section dùng chung .sec-head (doi_chieu, vi_sao, nguyen_lieu,
     ung_dung, chung_minh): floor 2rem=32px của clamp base + chữ serif IN HOA
     dài 33+ ký tự → ở 375px vỡ 4-5 dòng, chiếm gần trọn viewport. Hạ còn
     1.625rem (26px). Kèm selector .ung-dung (specificity 0,2,0 = rule riêng
     floor 1.875rem ở L1755) vì .sec-title trần (0,1,0) không thể thắng nó. */
  .sec-title,
  .ung-dung-section .sec-title {
    font-size: 1.625rem;
  }
  /* Cân lại hierarchy theo sec-title mới (26px) ở ≤640: các heading trước đây
     to bằng/vượt title chính — .cta-main-title floor 32px (vượt cả title),
     card-head/modal/form h3 = 24px (gần bằng title). Hạ về bậc dưới: 26 >
     22 > card-title 20 > body 15-16. Text body/label giữ nguyên. */
  .cta-main-title {
    font-size: 1.625rem;
  }
  .dc-col-head {
    font-size: 1.375rem;
  }
  .form-card-header h3,
  .spec-modal-header h3 {
    font-size: 1.375rem;
  }
  /* ≤640px: hàng của 2 card đổi sang icon TRÊN chữ. Giữ ngang như desktop thì câu
     chỉ còn ~230px (~30 ký tự/dòng) — lề trong card + ô icon 44px + gap ăn mất gần
     1/4 bề ngang, mô tả dài thòng 4-5 dòng và card cao lên vô ích. Đổi trục thì
     chữ được full bề ngang (~286px), đọc được ~38 ký tự/dòng.
     align-items: stretch là bắt buộc ở đây: trong flex-direction column thì trục
     chéo là NGANG, để flex-start thì .dc-body co theo nội dung và số thứ tự 01–05
     không còn bị đẩy sang mép phải. Đổi sang stretch không kéo vỡ ô icon vì ô icon
     đã khai báo width:44px (cross-size không còn auto thì stretch không áp). */
  .dc-pain,
  .dc-sol {
    flex-direction: column;
    align-items: stretch;
  }
  .catalogue-grid {
    grid-template-columns: 1fr;
  }
  .ecosystem-satellites-grid {
    grid-template-columns: 1fr;
  }
  .ecosystem-nucleus {
    max-width: 100%;
    overflow: hidden;
    padding: 1rem 0;
  }
  .nucleus-circle {
    width: 200px;
    height: 200px;
    padding: 1rem;
  }
  .nucleus-pulse-ring.ring-1 {
    width: 230px;
    height: 230px;
  }
  .nucleus-pulse-ring.ring-2 {
    width: 260px;
    height: 260px;
  }
  .nucleus-pulse-ring.ring-3 {
    width: 290px;
    height: 290px;
  }
  .nucleus-img-wrap {
    width: 80px;
    height: 80px;
  }
  .nucleus-img-wrap img {
    max-height: 65px;
  }
  .hero-stats-bar {
    display: flex;
    flex-direction: row;
    /* Màn hẹp: cho phép xuống 2 hàng 2 mục thay vì bóp chữ. Mỗi nhãn vẫn MỘT DÒNG;
       nhồi đủ 4 mục vào một hàng ở 320-414px thì mỗi mục chỉ còn ~70px, không đủ
       cho "Chính ngạch Ontario" trên một dòng ở cỡ chữ đọc được. */
    flex-wrap: wrap;
    /* stretch — xem giải thích ở rule gốc: giữ các icon cùng một trục ngang */
    align-items: stretch;
    justify-content: space-between;
    /* 0.75rem cả hai chiều: hai hàng stats trước dính nhau (0.5rem) nên khối
       nhìn như một cục; margin-top 1.25 → 1.5rem để tách khỏi cụm CTA phía trên. */
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .hero-stats-bar .h-stat-item {
    /* basis 40% → 2 mục mỗi hàng; flex-grow kéo giãn cho kín hàng */
    flex: 1 1 40%;
    gap: 0.375rem;
    text-align: left;
  }
  .hero-stats-bar .h-stat-icon svg {
    width: 15px;
    height: 15px;
  }
  .hero-stats-bar .h-stat-lbl {
    font-size: 0.75rem;
    line-height: 1.25;
  }
  /* Kicker "PANAX QUINQUEFOLIUS • ONTARIO CANADA": ở 13px + tracking 0.16em cần
     ~348px trong khi cột chỉ 327px → vỡ 2 dòng ngay dưới pill. Hạ 11px +
     tracking 0.1em còn ~270px → 1 dòng, đúng vai trò nhãn phụ. */
  .hero-kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
  /* ---- Nhịp dọc hero mobile ----
     a) padding-top: block ≤991 giữ 20vh = 162px ở màn 812 trong khi header
        mobile chỉ 60px. Đo được 154px trống dưới header mà cả khối nội dung chỉ
        496px → phần trên hero rỗng hơn hẳn phần dưới. .wrap canh giữa
        (justify-content: center) nên khoảng trống luôn chia đôi trên/dưới; hạ
        padding-top xuống ~89px (84px chừa header + safe-area, hoặc 11vh) đưa
        hai phía về 119/91 — mắt đọc thấy cân. KHÔNG hạ sát 84px vì iPhone
        safe-area và logo nạp chậm có thể làm header cao tạm thời.
     b) Khe giữa các khối trước lấy nguyên thang desktop: 24 (pill) / 24 (title)
        / 36 (desc) / 20 (stats) — nặng ở desc→CTA mà dính ở CTA→stats. Đưa về
        thang 20/20/28/24, đều mắt hơn ở màn hẹp.
     c) Tiêu đề mobile là 3 dòng nên line-height 1.12 (đủ cho 2 dòng desktop)
        hơi bí; 1.16 cho khối 3 dòng dễ đọc mà không làm cao thêm đáng kể. */
  .hero-section {
    padding-top: max(calc(84px + env(safe-area-inset-top, 0px)), 11vh);
  }
  .hero-section > .wrap {
    padding-bottom: 1.5rem;
  }
  .hero-pill {
    margin-bottom: 1.25rem;
  }
  .hero-title {
    margin-bottom: 1.25rem;
    line-height: 1.16;
  }
  .hero-desc {
    margin-bottom: 1.75rem;
  }
  .hero-actions {
    gap: 0.875rem;
  }
  .usp-highlight-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
  }
  .hl-metric-div {
    display: none;
  }
  .claim-proof-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .footer-content-grid {
    grid-template-columns: 1fr;
  }
  /* Bottom bar: 2 nhánh (copyright + links) + space-between ở 375px → nhánh links
     (~240px) không còn chỗ cho nhánh copyright cùng hàng và bị đẩy lệch trái.
     Xếp dọc + canh giữa cho cả 2, links tự wrap giữa hàng nếu quá dài. */
  .footer-bottom-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
  }
  .footer-socials {
    flex-wrap: wrap;
  }
  .footer-brand-logo img {
    /* attr width=180 height=40 không tự co + height:auto trước đây thả logo về
       kích thước raster thật → mobile bị to hơn desktop (dễ tràn cột Giới thiệu).
       Ghim 24px (nhỏ hơn 30px của desktop): width auto theo tỉ lệ → ~107px,
       thoải mái trong cột ~215px ở 375px, không méo. */
    height: 24px;
    width: auto;
    max-width: 100%;
  }
  .size-groups-grid,
  .size-groups-grid.cols-3,
  .duo-spec-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ HERO TITLE — CHỌN CHỖ NGẮT THEO SỐ ĐO ============
   Bề rộng từng cụm ở cỡ 48px (Lora 700, letter-spacing 0.015em, đo trực tiếp
   trong trình duyệt; số trong ngoặc = px chữ cho mỗi 1px font):
     "NGUỒN NGUYÊN LIỆU"          539.3  (11.24)
     "NGUỒN NGUYÊN LIỆU NHÂN"     699.4  (14.57)
     "NGUỒN NGUYÊN LIỆU NHÂN SÂM" 821.0  (17.10)
     "NHÂN SÂM CANADA"            485.0  (10.10)
     "NHÂN SÂM CANADA CHÍNH"      666.8  (13.89)
     "CANADA CHÍNH NGẠCH"         577.0  (12.02)
   Cột chữ = 100vw - 2×24px lề .wrap. Hai chế độ dùng chung phép đo này:
     ≤480px  → 3 dòng: "NGUỒN NGUYÊN LIỆU / NHÂN SÂM CANADA / CHÍNH NGẠCH"
     481-991 → 2 dòng theo chỗ ngắt biên tập, y hệt desktop.
   ĐỔI CHỮ Ở title_line1/title_line2 THÌ PHẢI ĐO LẠI CÁC SỐ NÀY. */

/* ≤480px — cho chữ tự chảy (inline) và đặt cỡ chữ vào đúng "cửa sổ" để greedy
   wrap rơi đúng 3 dòng mong muốn: dòng 1 phải chứa được tới "…LIỆU" (11.24)
   nhưng KHÔNG được chứa thêm "NHÂN" (14.57 → 1 dòng 1 mình), dòng 2 chứa được
   tới "…CANADA" (10.10) nhưng không thêm "CHÍNH" (13.89). Vậy cột/cỡ chữ phải
   nằm trong [11.24, 13.89); mẫu số 12.5 là giữa khoảng, chừa biên ~11% mỗi phía.
   Trần 2.0625rem (33px) bắt đầu chạm từ 461px và ở 480px tỉ số còn 13.09 (< 13.89
   → vẫn đúng 3 dòng); sàn 0.875rem để màn 240px không vỡ chữ. */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(0.875rem, calc((100vw - 48px) / 12.5), 2.0625rem);
  }
  .hero-line-main,
  .hero-line-2 {
    display: inline;
  }
}

/* 481-991px — hai span về block nên tiêu đề còn 2 dòng đúng chỗ ngắt biên tập;
   đổi lại dòng 1 dài 17.10 nên cỡ chữ phải ≤ cột/17.10. Mẫu số 17.4 chỉ chừa
   ~1.7% biên vì khoảng này cần chữ TO, siết quá thì phí chỗ; trần 2.0625rem
   ≈ 33px = đúng cỡ desktop ở 992px nên không có cú nhảy cỡ ở mốc 991/992. */
@media (min-width: 481px) and (max-width: 991px) {
  .hero-title {
    font-size: clamp(1.125rem, calc((100vw - 48px) / 17.4), 2.0625rem);
  }
}

@media (max-width: 480px) {
  /* (Đã xoá dead rule `.header-cta` ở đây: nút CTA trong thanh đã display:none
     từ ≤991 — .header-actions .header-cta — nên rule 480 không bao giờ render.) */
  .brand-logo {
    height: 28px;
  }
  .hero-actions .btn {
    width: 100%;
    /* full-width + nowrap của .btn → CTA dài tràn ở 320–480px. Cho wrap + căn giữa. */
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  /* (Đã xoá rule .hero-title ở đây: cỡ tiêu đề giờ do công thức theo bề rộng
     cột trong block ≤991 quyết định — rule cũ clamp(2.05rem, 8.2vw, 2.85rem)
     đè lên và làm dòng 1 vỡ thêm dòng.) */
  .spec-modal-header,
  .spec-modal-body {
    padding: 1.25rem;
  }
}

/* ============ LAPTOP MÀN HÌNH THẤP (1366×768, 1280×720) ============
   Hero full 100dvh + stats bar + marquee cần ~840px. Dưới 820px chiều cao thì
   siết lại để hero vẫn gọn trong 1 màn hình. Kèm min-width:992px để KHÔNG đụng
   vào mobile — ở mobile hero cao hơn màn hình là chấp nhận được. */
@media (max-height: 820px) and (min-width: 992px) {
  .hero-section {
    padding-top: clamp(5.5rem, 11vh, 6.5rem);
    /* Không set padding-bottom — dải marquee dính mép đáy như mọi bề rộng */
  }
  .hero-section > .wrap {
    padding-bottom: 1.5rem;
  }
  .hero-title {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    margin-bottom: 1.125rem;
  }
  .hero-desc {
    font-size: 1.0625rem;
    margin-bottom: 1.5rem;
  }
  .hero-stats-bar {
    margin-top: 1.25rem;
  }
  .hero-marquee {
    padding: 0.75rem 0;
  }
}

/* ============ 18. TOUCH DEVICE HOVER OPTIMIZATION ============ */
@media (hover: none) {
  .btn-dark:hover,
  .btn-gold:hover,
  .btn-card-detail:hover,
  .btn-outline:hover,
  .usp-group-card:hover,
  .catalogue-card:hover,
  .industry-sat-card:hover,
  .cp-card:hover,
  .size-group-item:hover,
  .duo-spec-card:hover,
  .ecosystem-cta-box .btn:hover {
    transform: none !important;
  }
  /* Touch: không có hover → overlay "Xem" của ảnh chứng từ (rule gốc opacity:0,
     chỉ hiện khi hover) không bao giờ hiện → người dùng không biết ảnh bấm được
     vào lightbox. Hiện scrim nhẹ dạng gradient ĐÁY + button xuống góc dưới thay
     vì phủ kín: phần trên của ảnh scan vẫn nhìn thấy nguyên vẹn. */
  .proof-media-wrap .proof-overlay {
    opacity: 1;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.5rem;
    background: linear-gradient(180deg, rgba(14, 42, 32, 0) 55%, rgba(14, 42, 32, 0.78) 100%);
  }
}

/* ============ 19. FLOATING CONTACT & SCROLL TOP (BẢN CŨ commit 1baa7cf) ============ */
/* Ẩn floating buttons & mobile bar khi menu drawer đang mở */
body.menu-open .float-contact-buttons,
body.menu-open .scroll-top,
body.menu-open .mobile-sticky-bar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.float-contact-buttons {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.float-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Nút tròn 54px khi idle → hover GIÃN THÀNH PILL + hiện chữ bên trong
   (easing spring cubic-bezier tham khảo code reference, chỉ desktop) */
.float-btn {
  height: 54px;
  min-width: 54px;
  width: auto;
  border-radius: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  overflow: hidden;
  color: var(--sl-white);
  box-shadow: 0 10px 28px -6px rgba(14, 42, 32, 0.45);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.float-btn:hover {
  animation: none; /* tắt pulse để thấy rõ bóng đổ khi hover */
  padding: 0 18px 0 15px;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px -4px rgba(14, 42, 32, 0.5);
}
.float-btn svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.float-btn-zalo {
  background: linear-gradient(135deg, #0080ff 0%, #0052cc 100%);
  animation: zalo-pulse 2.2s infinite;
}
.float-btn-phone {
  background: linear-gradient(135deg, var(--sl-forest-900) 0%, #0b221a 100%);
  border: 1.5px solid var(--sl-gold-light);
  color: var(--sl-gold-light);
  animation: phone-pulse 2.2s infinite;
}
/* Label ẩn trong nút (max-width 0) → hover nút giãn ra và chữ trượt ra
   kèm opacity + margin; duration dài + easing nhẹ để chuyển động mượt */
.float-btn .float-label,
.scroll-top .float-label {
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 600;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.float-btn:hover .float-label,
.scroll-top:hover .float-label {
  max-width: 260px;
  opacity: 1;
  margin-left: 10px;
}

/* Nút cuộn đầu trang: cùng pattern pill-expand khi hover */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 166px;
  z-index: 95;
  height: 44px;
  min-width: 44px;
  width: auto;
  border-radius: 22px;
  border: 1px solid rgba(216, 184, 120, 0.4);
  background: rgba(14, 42, 32, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--sl-gold-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s var(--sl-ease), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s, background 0.4s ease, color 0.4s ease, padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.3s var(--sl-ease), transform 0.3s var(--sl-ease), visibility 0s, background 0.25s, color 0.25s;
}
.scroll-top svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s var(--sl-ease);
}
.scroll-top:hover {
  background: linear-gradient(135deg, var(--sl-gold-light), var(--sl-gold));
  color: var(--sl-forest-950);
  border-color: var(--sl-gold);
  padding: 0 16px 0 13px;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px -4px rgba(174, 131, 56, 0.5);
}
.scroll-top:active {
  transform: scale(0.94);
}

/* ============ MOBILE STICKY TOOLBAR ============ */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--sl-forest-950);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(216, 184, 120, 0.35);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s var(--sl-ease), visibility 0.3s var(--sl-ease);
}
.mobile-sticky-bar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sl-gold-light) 50%, transparent 100%);
  opacity: 0.8;
}
.mobile-sticky-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mobile-sticky-btn {
  padding: 9px 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--sl-r);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  transition: transform 0.2s var(--sl-ease), box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.mobile-sticky-btn:active {
  transform: scale(0.95);
}
.mobile-sticky-btn svg {
  width: 20px;
  height: 20px;
}
.msb-outline {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(216, 184, 120, 0.4);
  color: var(--sl-gold-light);
}
.msb-zalo {
  background: linear-gradient(135deg, #0080ff 0%, #0052cc 100%);
  color: var(--sl-white);
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.4);
}
.msb-gold {
  background: linear-gradient(135deg, var(--sl-gold-light) 0%, var(--sl-gold) 100%);
  color: #1a271f;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(174, 131, 56, 0.45);
}

@keyframes zalo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }
}
@keyframes phone-pulse {
  0% { box-shadow: 0 0 0 0 rgba(216, 184, 120, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(216, 184, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 184, 120, 0); }
}

/* Desktop floating contact buttons */
@media (min-width: 1025px) {
  /* Cột float (2 nút 54px + right:24px ≈ 78px) nằm trên đáy footer khi cuộn hết
     trang → đè mất đuôi link "Cam kết bảo mật". Nhường cột đó cho links thay vì
     đẩy float (float là thiết kế cố định từ commit 1baa7cf). */
  .footer-bottom-links {
    padding-right: 88px;
  }
}

/* 641–1024px: sticky bar đã bù body padding-bottom, nhưng scroll-top (right:16,
   bottom:96 → vùng ~60px mép phải) vẫn nằm trên hàng links footer khi cuộn hết
   — nhường tương tự. ≤640 loại trừ vì links đã canh giữa (không còn ở mép phải). */
@media (min-width: 641px) and (max-width: 1024px) {
  .footer-bottom-links {
    padding-right: 64px;
  }
}

/* Mobile sticky toolbar & floating rules */
@media (max-width: 1024px) {
  .float-contact-buttons {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .mobile-sticky-bar {
    display: block !important;
  }
  .scroll-top {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}