/* ═══════════════════════════════════════════════════════════
   VINHGROUP — Trang Chủ Tập Đoàn Đa Ngành
   Flatsome Child Theme Custom CSS v2.0
   Prefix: vg- (VinhGroup)
   Không xung đột với Flatsome theme
═══════════════════════════════════════════════════════════ */

/* ── 1. FONT IMPORT ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ── 2. CSS VARIABLES ────────────────────────────────────── */
:root {
  /* ── Hung Gia Investment Brand Colors ── */
  --vg-navy:   #0D1B2A;        /* Navy đậm — hero, footer, accents tối */
  --vg-gold:   #C9A840;        /* Vàng đồng chủ đạo — từ logo thương hiệu */
  --vg-gold-l: #DDB84E;        /* Vàng nhạt — hover, gradient */
  --vg-gold-d: #B89030;        /* Vàng đậm — text on light bg */
  --vg-beige:  #F5EFE3;        /* Nền kem ấm — section alternating */
  --vg-white:  #FAF7F2;        /* Nền pearl trắng ấm — body bg */
  --vg-cream:  #FBF8F2;        /* Nền sáng nhất — card bg */
  --vg-gray:   #6B5E4E;        /* Text phụ — warm brown-gray */
  --vg-gray-l: #EDE8DC;        /* Border/divider — warm gray */
  --vg-radius: 12px;
  --vg-shadow: 0 8px 40px rgba(0,0,0,0.10);
  --vg-shadow-gold: 0 6px 28px rgba(201,168,64,0.28);
  --vg-trans:  0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ── 3. GLOBAL ───────────────────────────────────────────── */
body { font-family: 'Manrope', sans-serif !important; }
html { scroll-behavior: smooth; }

/* ── 4. TICKER / MARQUEE ─────────────────────────────────── */
.vg-ticker-wrap {
  background: var(--vg-navy);
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(201,168,64,0.3);
}
.vg-ticker-label {
  background: var(--vg-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.vg-ticker-track {
  display: flex;
  animation: vg-ticker 30s linear infinite;
  width: max-content;
}
.vg-ticker-item {
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 12px 40px;
  white-space: nowrap;
}
.vg-ticker-item::after {
  content: '◆';
  color: var(--vg-gold);
  margin-left: 40px;
}
@keyframes vg-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 5. HERO ─────────────────────────────────────────────── */
.vg-hero { position: relative; }
.vg-hero .section-inner { position: relative; z-index: 2; }

/* Overlay tối phủ lên ảnh nền hero để chữ dễ đọc */
.vg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(13,27,42,0.82) 0%,
    rgba(13,27,42,0.60) 55%,
    rgba(13,27,42,0.30) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.vg-eyebrow {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vg-gold) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.vg-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--vg-gold);
  flex-shrink: 0;
}

.vg-hero-h1 em { color: var(--vg-gold) !important; font-style: italic; }

.vg-hero-desc {
  color: rgba(255,255,255,0.65) !important;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 600px;
}

/* KPI block */
.vg-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.vg-kpi-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,64,0.25);
  border-radius: var(--vg-radius);
  padding: 20px 16px;
  text-align: center;
  backdrop-filter: blur(8px);
}
.vg-kpi-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.vg-kpi-num span { color: var(--vg-gold); }
.vg-kpi-lbl {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}

/* Scroll indicator */
.vg-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.3);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 10;
}
.vg-scroll-hint::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(201,168,64,0.6), transparent);
  animation: vg-scrollpulse 2s ease-in-out infinite;
}
@keyframes vg-scrollpulse {
  0%,100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── 6. SECTION INTRO / GIỚI THIỆU ───────────────────────── */
.vg-intro { }
.vg-intro-img-wrap { position: relative; }
.vg-intro-badge {
  position: absolute !important;
  bottom: -24px;
  right: -24px;
  background: var(--vg-gold);
  padding: 24px 28px;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  text-align: center;
  z-index: 5;
}
.vg-badge-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: block;
}
.vg-badge-lbl {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-top: 4px;
  display: block;
}

.vg-section-label {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vg-gold) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.vg-section-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--vg-gold);
}

.vg-feature-item {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: var(--vg-beige);
  border-left: 3px solid var(--vg-gold);
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
}
.vg-feature-icon {
  width: 40px;
  height: 40px;
  background: var(--vg-gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.vg-feature-text strong {
  display: block;
  color: var(--vg-navy);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.vg-feature-text span {
  color: var(--vg-gray);
  font-size: 13px;
  line-height: 1.6;
}

/* ── 7. STATS ────────────────────────────────────────────── */
.vg-stats {
  background: var(--vg-navy) !important;
}
.vg-stat-item { text-align: center; padding: 20px; }
.vg-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--vg-gold);
  line-height: 1;
  display: block;
}
.vg-stat-suffix { color: var(--vg-gold-l); font-size: 1.5rem; }
.vg-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
  display: block;
}
.vg-stat-sep {
  width: 1px;
  background: rgba(255,255,255,0.1);
  margin: auto;
}

/* ── 8. LĨNH VỰC HOẠT ĐỘNG (Fields) ─────────────────────── */
.vg-fields { }
.vg-field-card {
  position: relative;
  border-radius: var(--vg-radius) !important;
  overflow: hidden;
  cursor: pointer;
}
.vg-field-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.15) 50%, transparent 100%);
  z-index: 1;
  transition: var(--vg-trans);
  pointer-events: none; /* không chặn click */
}
.vg-field-card:hover::before {
  background: linear-gradient(to top, rgba(13,27,42,0.65) 0%, rgba(13,27,42,0.25) 60%, rgba(13,27,42,0.05) 100%);
}
.vg-field-card:hover img { transform: scale(1.07) !important; }
.vg-field-card img { transition: transform 0.7s ease !important; }

/* Banner link cover — Flatsome tạo <a class="banner"> bao phủ toàn card */
.vg-field-card a.banner,
.vg-field-card > a:first-of-type {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
}

/* ── Override Flatsome .text-box position → đưa xuống đáy card ── */
.vg-field-card .text-box.banner-layer {
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  transform: none !important;
  z-index: 4 !important;
  pointer-events: none;
}
.vg-field-card .text-box.banner-layer .text-inner {
  padding: 0 !important;
}

/* ── Glassmorphism content box ── */
.vg-field-content {
  padding: 20px 24px;
  pointer-events: none;

  /* Frosted glass effect */
  background: rgba(10, 20, 34, 0.38);
  backdrop-filter: blur(1px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(201,168,64,0.20);
  border-radius: 12px;
}
.vg-field-icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}
.vg-field-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.375rem !important;
  color: #fff !important;
  margin-bottom: 6px;
}
.vg-field-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-bottom: 14px;
}
.vg-field-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vg-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201,168,64,0.4);
  padding-bottom: 2px;
  transition: var(--vg-trans);
  pointer-events: auto; /* nút KHÁM PHÁ vẫn click được */
  position: relative;
  z-index: 5;
}
.vg-field-btn:hover { color: var(--vg-gold-l) !important; border-color: var(--vg-gold-l); }
.vg-field-btn::after { content: '→'; }

/* ── 9. LỊCH SỬ (Timeline) ───────────────────────────────── */
.vg-history { background: var(--vg-navy) !important; }
.vg-timeline {
  position: relative;
  padding-left: 40px;
}
.vg-timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--vg-gold), rgba(201,168,64,0.15));
}
.vg-timeline-item {
  position: relative;
  padding: 0 0 40px 0;
}
.vg-timeline-item::before {
  content: '';
  position: absolute;
  left: -44px; top: 6px;
  width: 10px; height: 10px;
  background: var(--vg-gold);
  border-radius: 50%;
  border: 2px solid var(--vg-navy);
  box-shadow: 0 0 0 4px rgba(201,168,64,0.2);
}
.vg-timeline-year {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--vg-gold);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.vg-timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.vg-timeline-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}

/* ── 10. DỰ ÁN NỔI BẬT (Projects) ───────────────────────── */
.vg-projects { }
.vg-project-card {
  border-radius: var(--vg-radius) !important;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: var(--vg-trans);
  background: #fff;
}
.vg-project-card:hover {
  box-shadow: var(--vg-shadow);
  transform: translateY(-6px);
}
.vg-project-card img { transition: transform 0.6s ease !important; }
.vg-project-card:hover img { transform: scale(1.05) !important; }
.vg-project-meta {
  padding: 20px;
}
.vg-project-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vg-gold);
  display: block;
  margin-bottom: 8px;
}
.vg-project-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.125rem;
  color: var(--vg-navy);
  margin-bottom: 6px;
  font-weight: 700;
}
.vg-project-loc {
  font-size: 12px;
  color: var(--vg-gray);
}

/* ── 11. ĐỐI TÁC (Partners) ─────────────────────────────── */
.vg-partners { background: var(--vg-beige) !important; }
.vg-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--vg-gray-l);
  transition: var(--vg-trans);
  min-height: 90px;
}
.vg-partner-logo:hover {
  border-color: var(--vg-gold);
  box-shadow: 0 4px 20px rgba(201,168,64,0.1);
}
.vg-partner-logo img {
  max-height: 50px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: var(--vg-trans);
}
.vg-partner-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.vg-partner-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--vg-navy);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ── 12. ESG / BỀN VỮNG ─────────────────────────────────── */
.vg-esg { }
.vg-esg-card {
  background: #fff;
  border-radius: var(--vg-radius);
  padding: 32px 28px;
  border: 1px solid var(--vg-gray-l);
  transition: var(--vg-trans);
  height: 100%;
}
.vg-esg-card:hover {
  border-color: var(--vg-gold);
  box-shadow: 0 8px 32px rgba(201,168,64,0.12);
  transform: translateY(-4px);
}
.vg-esg-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  display: block;
}
.vg-esg-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vg-navy);
  margin-bottom: 12px;
}
.vg-esg-desc {
  font-size: 14px;
  color: var(--vg-gray);
  line-height: 1.75;
}
.vg-esg-pct {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--vg-gold);
  font-family: 'Playfair Display', serif;
  margin-top: 16px;
  display: block;
}


/* ── 13. TIN TỨC (News / Blog Posts) ────────────────────── */

/* Wrapper section */
.vg-news {
  background: #F5EFE3 !important;
  position: relative;
}
.vg-news::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--vg-gold), rgba(201,168,64,0.12));
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────── */
/* Card: .col.post-item > .col-inner > .box.box-normal...     */
/* ─────────────────────────────────────────────────────────── */
.vg-news .post-item { position: relative; }
.vg-news .post-item .col-inner { height: 100%; }

.vg-news .post-item .box {
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(201,168,64,0.16) !important;
  box-shadow: 0 4px 24px rgba(13,27,42,0.07) !important;
  transition:
    transform 0.45s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.45s cubic-bezier(0.4,0,0.2,1),
    border-color 0.4s ease !important;
  position: relative !important;
  cursor: pointer !important;
  /* KHÔNG dùng display:flex hay height:100% — để Flatsome tự xử lý layout */
}
.vg-news .post-item .box.has-hover:hover {
  transform: translateY(-9px) !important;
  box-shadow: 0 28px 60px rgba(13,27,42,0.13) !important;
  border-color: rgba(201,168,64,0.50) !important;
}

/* Shimmer gold line trên đỉnh card khi hover */
.vg-news .post-item .box::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--vg-gold), transparent);
  transition: left 0.55s ease;
  z-index: 10;
  pointer-events: none;
}
.vg-news .post-item .box.has-hover:hover::after { left: 100%; }

/* ─── Ảnh: để Flatsome xử lý layout, chỉ thêm transition ─── */
.vg-news .post-item .box-image img {
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1) !important;
}
.vg-news .post-item .box.has-hover:hover .box-image img {
  transform: scale(1.06) !important;
}

/* ─── Date badge: gold solid, luôn hiển thị ─── */
/* flatsome.css: .badge-outline .badge-inner { background:#fff } → chữ trắng trên nền trắng */
/* Fix: badge cha = gold, badge-inner = transparent để lộ màu gold */
.vg-news .post-item .post-date.badge,
.vg-news .post-item .badge.post-date,
.vg-news .post-item .box .badge.absolute.post-date,
.vg-news .post-item .box.has-hover .badge.absolute.post-date {
  background: var(--vg-gold) !important;
  border-color: var(--vg-gold) !important;
  box-shadow: 0 4px 14px rgba(201,168,64,0.40) !important;
  border-radius: 10px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: none !important;
}
/* Quan trọng: xóa background trắng của .badge-inner do Flatsome set */
.vg-news .post-item .post-date .badge-inner {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
}
.vg-news .post-item .post-date .post-date-day {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.vg-news .post-item .post-date .post-date-month {
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}

/* ─── Body text ─── */
.vg-news .post-item .box-text {
  padding: 20px 22px 22px !important;
  text-align: left !important;
}
.vg-news .post-item .box-text-inner {
  text-align: left !important;
}

/* Category label */
.vg-news .post-item .cat-label {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--vg-gold) !important;
  background: rgba(201,168,64,0.10) !important;
  border: 1px solid rgba(201,168,64,0.28) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}

/* Tiêu đề: h5.post-title.is-large */
.vg-news .post-item h5.post-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--vg-navy) !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.vg-news .post-item h5.post-title a {
  color: var(--vg-navy) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
}
.vg-news .post-item .box.has-hover:hover h5.post-title a {
  color: var(--vg-gold) !important;
}

/* Divider: .is-divider — đổi thành gold */
.vg-news .post-item .is-divider {
  background: var(--vg-gold) !important;
  width: 32px !important;
  height: 2px !important;
  margin: 12px 0 14px !important;
  opacity: 0.65 !important;
  transition: width 0.4s, opacity 0.4s !important;
}
.vg-news .post-item .box.has-hover:hover .is-divider {
  width: 50px !important;
  opacity: 1 !important;
}

/* Excerpt: p.from_the_blog_excerpt */
.vg-news .post-item .from_the_blog_excerpt {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--vg-gray) !important;
  line-height: 1.75 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}
/* Ẩn excerpt theo mặc định Flatsome, hiện khi hover */
.vg-news .post-item .from_the_blog_excerpt.show-on-hover {
  display: -webkit-box !important;
  opacity: 1 !important;
  max-height: none !important;
}


/* ── 14. CTA ─────────────────────────────────────────────── */
.vg-cta { position: relative; overflow: hidden; }
.vg-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201,168,64,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.vg-cta-label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vg-gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.vg-cta-label::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--vg-gold);
}

/* Button overrides */
.vg-btn-gold {
  background: var(--vg-gold) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition: var(--vg-trans) !important;
}
.vg-btn-gold:hover {
  background: var(--vg-gold-l) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(201,168,64,0.35) !important;
}
.vg-btn-outline-champagne { border: 1px solid rgba(13,27,42,0.25) !important; color: var(--vg-navy) !important; border-radius: 4px !important; font-weight: 600 !important; transition: var(--vg-trans) !important; }
.vg-btn-outline-white:hover { border-color: #fff !important; background: rgba(255,255,255,0.08) !important; }
.vg-btn-navy { background: var(--vg-navy) !important; color: #fff !important; border-radius: 4px !important; font-weight: 600 !important; transition: var(--vg-trans) !important; }
.vg-btn-navy:hover {
  background: #162436 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(13,27,42,0.3) !important;
}

/* ── 15. CHỨNG NHẬN ──────────────────────────────────────── */
.vg-cert { background: var(--vg-beige) !important; }
.vg-cert-card {
  background: #fff !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: var(--vg-trans);
  border: 1px solid var(--vg-gray-l) !important;
  padding: 28px 20px !important;
  text-align: center;
}
.vg-cert-card:hover {
  box-shadow: 0 8px 32px rgba(201,168,64,0.14) !important;
  border-color: var(--vg-gold) !important;
  transform: translateY(-4px);
}

/* ── 16. HEADING TYPOGRAPHY ──────────────────────────────── */
[class*="vg-"] h1,
[class*="vg-"] h2,
[class*="vg-"] h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Hero H1 */
.vg-hero .vg-hero-h1,
.vg-hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #FAF7F2 !important;
  margin-bottom: 20px !important;
}

/* Section H2 */
.vg-h2, .vg-intro h2, .vg-fields h2, .vg-history h2,
.vg-projects h2, .vg-partners h2, .vg-esg h2,
.vg-news h2, .vg-cert h2, .vg-cta h2, .vg-stats h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

/* ── 17. FLATSOME SECTION OVERRIDES ─────────────────────── */
.vg-full-width .section-inner {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Remove default section padding conflicts */
.vg-no-pad { padding: 0 !important; }

/* Divider line gold */
.vg-divider-gold {
  height: 2px;
  background: linear-gradient(to right, var(--vg-gold), rgba(201,168,64,0.1));
  width: 60px;
  margin: 16px 0 24px;
}

/* ── 18. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .vg-kpi-grid { grid-template-columns: 1fr 1fr; }
  .vg-intro-badge { right: 0; bottom: -16px; }
  .vg-scroll-hint { display: none; }
  .vg-timeline { padding-left: 24px; }
  .vg-timeline-item::before { left: -28px; }
  .vg-stat-num { font-size: 2rem; }
  .vg-field-content { padding: 20px; }
  .vg-field-title { font-size: 1.125rem !important; }
}

@media (max-width: 480px) {
  .vg-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vg-kpi-num { font-size: 1.75rem; }
  .vg-hero-h1 { font-size: clamp(2rem, 9vw, 3.5rem) !important; }
  .vg-esg-card, .vg-cert-card { margin-bottom: 16px; }
}