.elementor-9335 .elementor-element.elementor-element-a16daab{--spacer-size:50px;}.elementor-9335 .elementor-element.elementor-element-520e9d12 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;align-items:flex-start;}.elementor-9335 .elementor-element.elementor-element-520e9d12{padding:100px 50px 100px 50px;}.elementor-9335 .elementor-element.elementor-element-46937d56 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-9335 .elementor-element.elementor-element-46937d56 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9335 .elementor-element.elementor-element-54f7623{--spacer-size:50px;}@media(max-width:1024px){.elementor-9335 .elementor-element.elementor-element-520e9d12{padding:100px 0px 50px 0px;}}@media(max-width:767px){.elementor-9335 .elementor-element.elementor-element-520e9d12{padding:75px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-cf609ba *//* ==========================================================================
VNBG SECTION 1: HERO & FORM
Version: 2.1 (Fix Font Variable)
Status: Cleaned & Optimized
Dependency: Global Setting CSS (Must be loaded first)
Scope: .vnbg-scope
Date: Apr - 6 - 2026
========================================================================== */

/* LƯU Ý QUAN TRỌNG:
   - File này sử dụng biến từ Global Setting.
   - Tên biến đã được đồng bộ về format gốc: --primary, --font-main (không có tiền tố vnbg-)
*/

/* 1. HERO BACKGROUND (Full Width Breakout) */
.vnbg-scope .vnbg-header-hero {
  /* Kỹ thuật tràn viền màn hình nhưng giữ content ở giữa */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* Spacing & Background */
  padding: 120px 0;
  background-image: url("https://vietnambusinessgateway.com/wp-content/uploads/2025/11/Tax-Accounting-1.webp");
  background-size: cover;
  background-position: center top;

  /* Fallback background using Global Variable */
  /* FIX: Đổi --vnbg-primary thành --primary */
  background-color: var(--primary, #3c096c);

  /* FIX: Đổi --vnbg-white thành --white */
  color: var(--white, #ffffff);

  /* FIX: Đổi --vnbg-font-main thành --font-main và thêm fallback cứng Helvetica */
  font-family: var(--font-main, "Helvetica", "Arial", sans-serif) !important;
}

/* Overlay tối màu phủ lên ảnh nền */
.vnbg-scope .vnbg-header-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* FIX: Đổi biến màu */
  background-color: var(--primary, #3c096c);
  opacity: 0.7;
  z-index: 1;
}

/* Đảm bảo nội dung nằm trên lớp Overlay */
.vnbg-scope .vnbg-container {
  position: relative;
  z-index: 2;
}

/* 2. HERO CONTENT (Left Column) */

.vnbg-scope .vnbg-hero-tagline {
  margin-bottom: 32px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Tag */

/* 3. HERO FORM (Right Column) */
.vnbg-scope .vnbg-hero-form {
  background: var(--white, #ffffff);
  padding: 40px 0px 20px 0px !important;
  align-items: center;
  position: relative;
  z-index: 2;
  /* FIX: Đổi biến text */
  color: --vnbg-white;
}

/* 4. BUTTONS */
.vnbg-scope .vnbg-btn-hero {
  background: var(--white, #ffffff) !important;
  color: var(--primary, #3c096c) !important;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  transition: all 0.3s ease;
  border: none;
  font-family: var(--font-main, "Helvetica", "Arial", sans-serif) !important;
}

.vnbg-scope .vnbg-btn-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 5. GRID UTILS */
.vnbg-scope .vnbg-hero-grid-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .vnbg-scope .vnbg-hero-grid-layout {
    grid-template-columns: 1fr 1.3fr;
  }
}

/* =======================================================
   VNBG COMPONENT: PAGE INDEX
   Add this to your Global CSS or Section CSS
======================================================= */
/* Khai báo hành vi cuộn mượt (có thể bỏ nếu theme Elementor đã có) */
html {
  scroll-behavior: smooth;
}

/* Nút bật/tắt mục lục trên Mobile */
.vnbg-toc-mobile-btn {
  position: fixed;
  bottom: 75px;
  left: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--vnbg-primary);
  color: var(--vnbg-white);
  border: none;
  box-shadow: var(--vnbg-shadow-md, 0 10px 30px rgba(60, 9, 108, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999;
  transition: all 0.3s ease;
}
.vnbg-toc-mobile-btn:hover {
  background: var(--vnbg-accent) !important;
  transform: scale(1.05);
}
.vnbg-toc-mobile-btn .material-symbols-outlined {
  font-size: 28px;
}

/* Container Mục Lục - Glassmorphism */
.vnbg-toc-container {
  position: fixed;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 235px;
  z-index: 99990;

  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--vnbg-radius-md, 24px);
  box-shadow: 0 8px 32px rgba(60, 9, 108, 0.08);

  padding: 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--vnbg-font-main, sans-serif);
}

/* Header của Mục lục */
.vnbg-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(60, 9, 108, 0.1);
}
.vnbg-toc-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--vnbg-primary) !important;
}
.vnbg-toc-close {
  background: none;
  border: none;
  padding: 0;
  color: var(--vnbg-primary) !important;
  cursor: pointer;
  display: none; /* Chỉ hiện trên mobile */
}

/* Style cho nút thu gọn (Desktop) */
.vnbg-toc-minimize {
  background: none;
  border: none;
  padding: 0;
  color: var(--vnbg-primary) !important;
  cursor: pointer;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vnbg-toc-minimize:hover {
  color: var(--vnbg-accent) !important;
}

/* Chiếc tai (Tab) gọi mục lục ra trên Desktop khi đã thu gọn */
.vnbg-toc-desktop-trigger {
  position: fixed;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  width: 32px;
  height: 64px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-shadow: 4px 0 16px rgba(60, 9, 108, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99980;
  color: var(--vnbg-primary);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.vnbg-toc-desktop-trigger:hover {
  color: var(--vnbg-accent);
  background: rgba(255, 255, 255, 0.8);
}
.vnbg-toc-desktop-trigger.is-visible {
  left: 0;
}

/* Danh sách Link */
.vnbg-toc-list {
  list-style: none;
  padding: 10px 14px; /* Thêm padding ngang và dọc để tạo không gian cho hiệu ứng bóng phát sáng không bị cắt */
  margin: -10px -14px; /* Dùng margin âm bù lại đúng kích thước để giữ lề chữ thẳng hàng hoàn hảo */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Định dạng để cuộn và giới hạn 5 mục */
  position: relative;
  max-height: var(--toc-collapsed-height, 200px);
  overflow-y: hidden; /* Ẩn thanh cuộn lúc đầu, cuộn bằng JS */
  overflow-x: hidden; /* Đảm bảo không hiện thanh cuộn ngang */
  scroll-behavior: smooth;
  transition: max-height 0.4s ease;
}

/* Từng item (Chấm + Chữ) */
.vnbg-toc-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--vnbg-primary) !important;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

/* Chấm tròn (Dot Navigation) */
.vnbg-toc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cbd5e1;
  margin-right: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* Hiệu ứng Hover & Active (Sử dụng Accent Color) */
.vnbg-toc-item:hover {
  color: var(--vnbg-primary) !important;
}
.vnbg-toc-item:hover .vnbg-toc-dot {
  background-color: var(--vnbg-primary) !important;
  transform: scale(1.3);
}

.vnbg-toc-item.is-active {
  color: var(--vnbg-accent) !important;
  font-weight: 700;
}

.vnbg-toc-dot.is-active {
  color: var(--vnbg-accent) !important;
}

.vnbg-toc-item.is-active .vnbg-toc-dot {
  background-color: var(--vnbg-accent) !important;
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(247, 36, 133, 0.4); /* Glow nhẹ bằng màu accent */
}

/* Ẩn hiện trên thiết bị */
@media (min-width: 1024px) {
  .vnbg-toc-mobile-btn {
    display: none;
  }
  .vnbg-toc-close {
    display: none !important;
  }
  .vnbg-toc-container.is-minimized {
    left: -350px;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 1023px) {
  .vnbg-toc-container {
    /* Ẩn ngoài màn hình mặc định trên mobile */
    left: -100%;
    opacity: 0;
    pointer-events: none;
    top: 50%;
    width: calc(100% - 48px);
    max-width: 320px;
    background: rgba(
      255,
      255,
      255,
      0.85
    ); /* Tăng độ đục trên mobile để dễ đọc */
  }
  .vnbg-toc-container.is-open {
    left: 24px;
    opacity: 1;
    pointer-events: auto;
  }
  .vnbg-toc-close {
    display: block;
  }
  .vnbg-toc-minimize {
    display: none !important;
  }
  .vnbg-toc-desktop-trigger {
    display: none !important;
  }
}

/* Style cho thanh cuộn khi mở rộng đầy đủ */
.vnbg-toc-list::-webkit-scrollbar {
  width: 4px;
}
.vnbg-toc-list::-webkit-scrollbar-track {
  background: transparent;
}
.vnbg-toc-list::-webkit-scrollbar-thumb {
  background: rgba(60, 9, 108, 0.2);
  border-radius: 4px;
}

/* Class thêm vào khi người dùng ấn nút mở rộng */
.vnbg-toc-list.is-expanded {
  max-height: 50vh;
  overflow-y: auto;
}

/* Vùng chứa nút mở rộng */
.vnbg-toc-expand-wrapper {
  display: none; /* JS sẽ tự bật lên nếu có hơn 5 mục */
  text-align: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(60, 9, 108, 0.1);
}
.vnbg-toc-expand-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--vnbg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: all 0.3s ease;
}
.vnbg-toc-expand-btn:hover {
  color: var(--vnbg-accent);
}
.vnbg-toc-expand-btn .material-symbols-outlined {
  transition: transform 0.4s ease;
  font-size: 24px;
}

/* Xoay mũi tên lên khi mục lục được mở rộng */
.vnbg-toc-list.is-expanded
  ~ .vnbg-toc-expand-wrapper
  .material-symbols-outlined {
  transform: rotate(180deg);
}

/* ==========================================================================
   BỔ SUNG CSS RESPONSIVE (TƯƠNG THÍCH ĐA MÀN HÌNH - BẢN ĐẦY ĐỦ)
   Bao phủ tất cả Class của Section 1 (Hero/TOC) & Section 2 (Why Vietnam)
   ========================================================================== */

/* --------------------------------------------------------
   1. MÀN HÌNH TABLET (Nhỏ hơn 992px và lớn hơn 768px)
   Mục tiêu: Thu gọn padding, giảm nhẹ size chữ, cấu trúc vẫn giữ dạng Grid/Flex nhiều cột
-------------------------------------------------------- */
@media (max-width: 991px) {
  /* --- SECTION 1: HERO & TOC --- */
  .vnbg-scope .vnbg-header-hero {
    padding: 100px 0 80px 0 !important;
    margin-top: -100px;
  }
  .vnbg-scope .vnbg-hero-tagline {
    font-size: 18px;
  }
  .vnbg-scope .vnbg-hero-form {
    padding: 24px;
  }

  /* --- SECTION 2: WHY VIETNAM & OPTIONS --- */
  .vnbg-scope .vnbg-breakout-wrapper {
    padding: 60px 0; /* Giảm padding tổng của cả section */
  }
  .vnbg-scope .vnbg-wa-row {
    gap: 40px; /* Thu hẹp khoảng cách giữa ảnh và text (Why Vietnam) */
    align-items: center;
  }
  .vnbg-scope .vnbg-section-title,
  .vnbg-scope .vnbg-text-desc {
    font-size: 16px;
  }
  .vnbg-scope .vnbg-card-title {
    font-size: 20px;
  }
  .vnbg-scope .vnbg-usp-grid {
    gap: 24px; /* Giảm khoảng cách giữa các thẻ USP */
  }
  .vnbg-scope .vnbg-card-modern {
    padding: 24px; /* Giảm không gian trống trong thẻ Options */
  }
}

/* --------------------------------------------------------
   2. MÀN HÌNH MOBILE (Nhỏ hơn 768px)
   Mục tiêu: Đưa bố cục về 1 cột (Stack), tối ưu không gian, chữ nhỏ hơn, tối ưu chạm (Touch-friendly)
-------------------------------------------------------- */
@media (max-width: 767px) {
  /* --- SECTION 1: HERO & TOC --- */
  .vnbg-scope .vnbg-header-hero {
    padding: 80px 0 60px 0 !important;
    margin-top: -80px;
  }
  .vnbg-scope .vnbg-hero-tagline {
    font-size: 16px;
    margin-bottom: 24px;
  }
  .vnbg-scope .vnbg-hero-form {
    padding: 20px 16px;
  }

  /* TOC Touch-friendly (Mục lục trên Mobile) */
  .vnbg-toc-list {
    gap: 8px;
  }
  .vnbg-toc-item {
    font-size: 16px;
    padding: 10px 0; /* Nới rộng vùng bấm cho ngón tay */
  }
  .vnbg-toc-container.is-open {
    left: 16px;
    width: calc(100% - 32px);
  }
  .vnbg-toc-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  /* --- SECTION 2: WHY VIETNAM & OPTIONS --- */
  .vnbg-scope .vnbg-breakout-wrapper {
    padding: 40px 0; /* Thu gọn tối đa trên mobile */
  }
  .vnbg-scope .vnbg-wa-row {
    flex-direction: column; /* Ép ảnh và text xếp dọc (Chồng lên nhau) */
    gap: 24px;
  }
  .vnbg-scope .vnbg-section-title,
  .vnbg-scope .vnbg-text-desc {
    font-size: 15px;
  }
  .vnbg-scope .vnbg-card-title {
    font-size: 18px;
  }
  .vnbg-scope .vnbg-usp-grid {
    grid-template-columns: 1fr; /* Ép lưới USP thành 1 cột */
    gap: 16px;
  }
  .vnbg-scope .vnbg-card-modern {
    padding: 20px 16px;
  }
}

/* --------------------------------------------------------
   3. MÀN HÌNH MOBILE NHỎ (Nhỏ hơn 480px)
   Mục tiêu: Dành cho iPhone SE hoặc các dòng màn hình hẹp. Size chữ và button tối ưu cực hạn.
-------------------------------------------------------- */
@media (max-width: 479px) {
  /* --- SECTION 1: HERO & TOC --- */

  .vnbg-scope .vnbg-title-h1 {
    font-size: 60px; /* Tiếp tục giảm cho Mobile */
    margin-bottom: 16px;
  }

  .vnbg-scope .vnbg-hero-tag {
    font-size: 13px !important;
    padding: 6px 12px;
  }
  .vnbg-scope .vnbg-hero-tagline {
    font-size: 15px;
  }

  .vnbg-scope .vnbg-btn-hero {
    width: 100%; /* Nút full màn hình để dễ ấn */
    justify-content: center;
  }

  .vnbg-toc-mobile-btn {
    bottom: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
  }

  /* --- SECTION 2: WHY VIETNAM & OPTIONS --- */
  .vnbg-scope .vnbg-section-title,
  .vnbg-scope .vnbg-text-desc {
    font-size: 14px;
  }
  .vnbg-scope .vnbg-card-title {
    font-size: 16px;
  }
  .vnbg-scope .vnbg-btn-action {
    width: 100%; /* Nút CTA full màn hình */
    justify-content: center !important;
    text-align: center;
  }
}

/* =======================================================
   BỔ SUNG 6: CSS CHO FORM HUBSPOT TRƯỢT LÊN
   (Các class bắt đầu bằng hs- để không xung đột cấu trúc cũ)
======================================================== */

/* Container chính của Floating Form (Khung form nổi) */
.hs-custom-panel {
  position: fixed;
  bottom: -100%; /* Trạng thái mặc định: Ẩn sâu xuống dưới màn hình */
  right: 24px;
  width: 100%;
  max-width: 380px;
  height: 85vh; /* Chiều cao chiếm 85% màn hình để không che lấp hoàn toàn */
  max-height: 700px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px 16px 0 0; /* Bo tròn 2 góc trên */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  transition: bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Class được thêm vào bằng JavaScript để kích hoạt hiệu ứng trượt lên */
.hs-custom-panel.open {
  bottom: 0;
}

/* Khung chứa nội dung form bên trong (có thể cuộn được) */
.hs-form-scroll-area {
  padding: 40px 20px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

/* Tùy chỉnh thanh cuộn (scrollbar) để form nhìn tinh tế hơn */
.hs-form-scroll-area::-webkit-scrollbar {
  width: 6px;
}
.hs-form-scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.hs-form-scroll-area::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.hs-form-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Nút Close (X) nằm ở góc trên cùng bên phải của Form */
.hs-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  z-index: 10;
  transition: color 0.2s;
}
.hs-close-btn:hover {
  color: #f72485;
}

/* =======================================================
   BỔ SUNG CSS CHO NÚT FLOATING RETURN
   (Nút nổi "Return" đưa người dùng về vị trí cũ)
======================================================== */

/* CSS cho nút Floating Return (Ẩn theo mặc định) */
.hs-return-btn {
  position: fixed !important;
  right: 24px !important;
  bottom: 40px !important;

  /* Trạng thái ẩn: Đẩy xuống dưới, mờ đi và vô hiệu hóa tương tác */
  transform: translateY(100px) !important;
  opacity: 0 !important;
  visibility: hidden !important; /* Ẩn hoàn toàn khỏi DOM UI */
  pointer-events: none !important; /* Chặn mọi tương tác click/hover */

  background-color: var(--vnbg-primary, #f0f2f5) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 30px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  z-index: 2147483647 !important; /* Mức z-index cao nhất để không bị đè */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Biểu tượng mũi tên trong nút Return */
.hs-return-btn span {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Class kích hoạt hiển thị nút (Được thêm bằng JavaScript) */
.hs-return-btn.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important; /* Bật lại hiển thị */
  pointer-events: auto !important; /* Cho phép tương tác click trở lại */
}

/* Hiệu ứng hover cho nút Return */
.hs-return-btn:hover {
  background-color: var(--vnbg-accent, #f0f2f5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Tùy chỉnh kích thước và vị trí nút Return trên thiết bị di động */
@media (max-width: 480px) {
  .hs-return-btn {
    right: 16px !important;
    bottom: 24px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8837162 *//* =======================================================
   SECTION 2 - A1: WHY VIETNAM & BUSINESS OPTIONS
   Version: 5.4 (Added Entity Options Header & Badges)
   Dependency: Global Setting CSS
   Scope: .vnbg-scope
======================================================= */

/* 1. LAYOUT & UTILS */
.vnbg-scope .vnbg-breakout-wrapper {
  padding: 64px 0;
  color: var(--vnbg-text-body, #1e293b);
}

@media (min-width: 1024px) {
  .vnbg-scope .vnbg-breakout-wrapper {
    padding: 96px 0;
  }
}

/* Backgrounds */
.vnbg-scope .vnbg-bg-white {
  background-color: var(--vnbg-white, #ffffff);
}
.vnbg-scope .vnbg-bg-light {
  background-color: var(--vnbg-bg-light, #fbfaff);
}
.vnbg-scope .vnbg-bg-cool {
  background-color: var(--vnbg-bg-grey, #f0f2f5);
}

/* 2. PART 1: WHY VIETNAM (FLEX ROW) */
.vnbg-scope .vnbg-wa-row {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
@media (min-width: 992px) {
  .vnbg-scope .vnbg-wa-row {
    flex-direction: row;
    gap: 80px;
  }
}

.vnbg-scope .vnbg-img-card {
  border-radius: var(--vnbg-radius-md, 24px);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: rotate(-3deg);
  transition: transform 0.5s ease;
  border: 4px solid var(--vnbg-white, #ffffff);
}
.vnbg-scope .vnbg-img-card:hover {
  transform: rotate(0deg);
}
.vnbg-scope .vnbg-img-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Typography */
.vnbg-scope .vnbg-tag {
  background-color: rgba(60, 9, 108, 0.1);
  color: var(--vnbg-primary);
}
.vnbg-scope .vnbg-section-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--vnbg-text-body, #1e293b);
  margin-bottom: 24px;
  text-transform: none !important;
}
.vnbg-scope .vnbg-text-desc {
  font-size: 18px !important;
  color: var(--primary) !important;
  padding-top: 10px;
}
.vnbg-scope .vnbg-checklist li {
  color: var(--vnbg-text-body, #1e293b);
}
.vnbg-scope .vnbg-checklist li::before {
  color: var(--vnbg-accent, #f72485);
  font-size: 20px;
}

/* 3. USP GRID SECTION */
.vnbg-scope .vnbg-usp-wrapper {
  text-align: center;
  margin-bottom: 80px;
}
.vnbg-scope .vnbg-usp-header {
  margin-bottom: 48px;
}
.vnbg-scope .vnbg-usp-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  padding-top: 0px;
}
@media (min-width: 768px) {
  .vnbg-scope .vnbg-usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-usp-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vnbg-scope .vnbg-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vnbg-scope .vnbg-usp-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(247, 36, 133, 0.1);
  color: var(--vnbg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.vnbg-scope .vnbg-usp-item:hover .vnbg-usp-icon {
  transform: translateY(-5px);
  background: var(--vnbg-accent);
  color: white;
}
.vnbg-scope .vnbg-usp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--vnbg-primary);
  margin-bottom: 8px;
  text-transform: none !important;
}

/* 4. PART 2: BUSINESS OPTIONS */
/* Header for this section */
.vnbg-scope .vnbg-options-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 64px auto;
}

/* Background Blobs */
.vnbg-scope .vnbg-blob-container {
  position: relative;
}
.vnbg-scope .vnbg-bg-blob-left,
.vnbg-scope .vnbg-bg-blob-right {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.5;
}
.vnbg-scope .vnbg-bg-blob-left {
  top: 10%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--vnbg-primary) 0%, transparent 70%);
}
.vnbg-scope .vnbg-bg-blob-right {
  bottom: 0%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--vnbg-accent) 0%, transparent 70%);
}

/* Cards Grid */
@media (min-width: 768px) {
  .vnbg-scope .vnbg-modern-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
}
.vnbg-scope .vnbg-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(60, 9, 108, 0.1);
  border-color: var(--vnbg-accent);
}

/* Card Header Components */
.vnbg-scope .vnbg-line {
  background: var(--vnbg-accent);
}

.vnbg-scope .vnbg-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.vnbg-scope .vnbg-card-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: var(--vnbg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Badges */
.vnbg-scope .vnbg-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 50px;
  text-transform: uppercase;
}
.vnbg-scope .vnbg-badge {
  background: var(--vnbg-bg-grey);
  color: var(--vnbg-primary);
}

.vnbg-scope .vnbg-card-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  margin-top: 0;
}
.vnbg-scope .vnbg-card-desc {
  font-size: 16px;
  color: var(--vnbg-primary);
  line-height: 1.5;
  margin-bottom: 24px;
  flex-grow: 1;
  padding-top: 10px;
}

.vnbg-scope .vnbg-btn-card-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--vnbg-primary);
  text-decoration: none;
  border: 1px solid var(--vnbg-border);
  padding: 8px 16px;
  border-radius: 50px;
  display: inline-block;
  transition: all 0.3s ease;
}
.vnbg-scope .vnbg-btn-card-link:hover {
  background: var(--vnbg-bg-light);
  border-color: var(--vnbg-primary);
}

/* 5. TABLE & CTA */
.vnbg-scope .vnbg-table-wrapper {
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}
.vnbg-scope .vnbg-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  text-align: left;
}
.vnbg-scope .vnbg-compare-table th {
  background-color: var(--vnbg-primary);
  color: var(--vnbg-white);
  padding: 16px 24px;
  font-weight: 700;
}
.vnbg-scope .vnbg-compare-table td {
  padding: 16px 24px;
  font-size: 15px;
  border-bottom: 1px solid var(--vnbg-border);
}
.vnbg-scope .vnbg-compare-table tbody tr:nth-child(even) td {
  background-color: var(--vnbg-bg-light);
}

.vnbg-scope .vnbg-btn-action {
  font-family: Helvetica !important;
  text-decoration: none;
  color: var(--vnbg-primary);
  font-weight: 600;
  font-size: 16px;
  padding: 10px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s; /* Hiệu ứng chuyển màu mượt mà */
  display: inline-block;
  justify-content: center !important;
}
.vnbg-scope .vnbg-btn-action:hover {
  background-color: #f72485;
  border-color: #fbfaff;
  color: #fbfaff !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9bb3025 *//* =======================================================
   SECTION 2 - A2.1: LLC SERVICE DETAILS
   Version: 5.1 (Refined History Block)
   Dependency: Global Setting CSS
   Scope: .vnbg-scope
======================================================= */

/* -------------------------------------------------------
   1. LAYOUT & UTILS
------------------------------------------------------- */
.vnbg-scope .vnbg-breakout-wrapper {
  padding: 64px 0;
  font-family: var(--vnbg-font-main, "Inter", sans-serif) !important;
  color: var(--vnbg-text-body, #1e293b);
}

@media (min-width: 1024px) {
  .vnbg-scope .vnbg-breakout-wrapper {
    padding: 96px 0;
  }
}

/* Backgrounds */
.vnbg-scope .vnbg-bg-white {
  background-color: var(--vnbg-white, #ffffff);
}
.vnbg-scope .vnbg-bg-light {
  background-color: var(--vnbg-bg-light, #fbfaff);
}
.vnbg-scope .vnbg-bg-cool {
  background-color: var(--vnbg-bg-grey, #f0f2f5);
}
.vnbg-scope .vnbg-border-top {
  border-top: 1px solid var(--vnbg-border, #e5e7eb);
}

.vnbg-scope .vnbg-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px auto;
}

.vnbg-scope .vnbg-section-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--vnbg-text-body, #1e293b);
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .vnbg-scope .vnbg-section-title {
    font-size: 48px;
  }
}

.vnbg-scope .vnbg-text-highlight {
  color: var(--vnbg-accent, #f72485);
  font-weight: 700;
}

/* -------------------------------------------------------
   2. HERO SECTION
------------------------------------------------------- */
.vnbg-scope .vnbg-hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

.vnbg-scope .vnbg-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.vnbg-scope .vnbg-hero-image {
  position: relative;
  border-radius: var(--vnbg-radius-md, 24px);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.vnbg-scope .vnbg-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------
   3. TABLE MODULE
------------------------------------------------------- */
.vnbg-scope .vnbg-table-container {
  overflow-x: auto;
  border-radius: var(--vnbg-radius-md, 16px);
  box-shadow: var(--vnbg-shadow-sm, 0 4px 15px rgba(60, 9, 108, 0.05));
  background: var(--vnbg-white);
  margin-bottom: 40px;
}

.vnbg-scope .vnbg-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  text-align: left;
}
.vnbg-scope .vnbg-compare-table th {
  background-color: var(--vnbg-primary);
  color: var(--vnbg-white);
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16px;
  vertical-align: middle;
}
.vnbg-scope .vnbg-compare-table td {
  padding: 20px 24px;
  font-size: 15px;
  border-bottom: 1px solid var(--vnbg-border);
  vertical-align: top;
  line-height: 1.5;
}
.vnbg-scope .vnbg-compare-table tr:last-child td {
  border-bottom: none;
}
.vnbg-scope .vnbg-compare-table tr:nth-child(even) {
  background-color: var(--vnbg-bg-light);
}

/* Column Widths */
.vnbg-scope .vnbg-col-criteria {
  width: 25%;
}
.vnbg-scope .vnbg-col-entity {
  width: 37.5%;
}

.vnbg-scope .vnbg-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 6px;
}
.vnbg-scope .vnbg-badge.limit {
  color: #c2410c;
  background: #fff7ed;
}
.vnbg-scope .vnbg-badge.success {
  color: #047857;
  background: #ecfdf5;
}

.vnbg-scope .vnbg-cta-wrapper {
  text-align: center;
}

/* -------------------------------------------------------
   4. REQUIREMENTS MODULE
------------------------------------------------------- */
.vnbg-scope .vnbg-req-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .vnbg-scope .vnbg-req-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vnbg-scope .vnbg-req-card {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: var(--vnbg-radius-md, 24px);
  padding: 32px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vnbg-scope .vnbg-req-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vnbg-shadow-hover, 0 20px 40px rgba(60, 9, 108, 0.1));
  border-color: var(--vnbg-primary);
}

.vnbg-scope .vnbg-icon-box {
  width: 56px;
  height: 56px;
  display: flex;
  margin-bottom: 24px;
}
.vnbg-scope .vnbg-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--vnbg-primary);
}

/* -------------------------------------------------------
   5. DOCUMENTATION & HISTORY
------------------------------------------------------- */
.vnbg-scope .vnbg-doc-wrapper {
  background: var(--vnbg-bg-light);
  border-radius: 48px;
  padding: 48px 24px;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-doc-wrapper {
    padding: 80px;
  }
}

.vnbg-scope .vnbg-doc-grid {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-doc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.vnbg-scope .vnbg-doc-card {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: 32px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.vnbg-scope .vnbg-doc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vnbg-shadow-hover);
}

/* Reuse Checklist Style for Docs */
.vnbg-scope .vnbg-checklist {
  gap: 16px;
  margin: 0;
}
.vnbg-scope .vnbg-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
}

/* Timeline Components */
.vnbg-scope .vnbg-timeline {
  margin-top: 40px;
}
.vnbg-scope .vnbg-timeline-year {
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.vnbg-scope .vnbg-timeline-item h4 {
  margin: 4px 0;
  font-weight: 700;
  font-size: 16px;
}
.vnbg-scope .vnbg-timeline-item p {
  margin: 0;
  font-size: 14px;
  color: var(--vnbg-text-muted);
  line-height: 1.5;
}

/* -------------------------------------------------------
   6. DELIVERABLES & CTA
------------------------------------------------------- */
.vnbg-scope .vnbg-deliver-box {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--vnbg-shadow-sm);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-deliver-box {
    flex-direction: row;
  }
}

.vnbg-scope .vnbg-deliver-content {
  padding: 48px;
  flex: 3;
}
.vnbg-scope .vnbg-deliver-grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.vnbg-scope .vnbg-deliver-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.vnbg-scope .vnbg-deliver-cta {
  padding: 48px;
  flex: 2;
  background: var(--vnbg-bg-light);
  border-left: 1px solid var(--vnbg-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vnbg-scope .vnbg-cta-note {
  font-size: 12px;
  color: var(--vnbg-primary);
  margin-top: 16px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7eec740 *//* =======================================================
   SECTION 2 - A2.1: LLC SERVICE DETAILS
   Version: 5.1 (Refined History Block)
   Dependency: Global Setting CSS
   Scope: .vnbg-scope
======================================================= */

/* -------------------------------------------------------
   1. LAYOUT & UTILS
------------------------------------------------------- */
.vnbg-scope .vnbg-breakout-wrapper {
  padding: 64px 0;
  font-family: var(--vnbg-font-main, "Inter", sans-serif) !important;
  color: var(--vnbg-text-body, #1e293b);
}

@media (min-width: 1024px) {
  .vnbg-scope .vnbg-breakout-wrapper {
    padding: 96px 0;
  }
}

/* Backgrounds */
.vnbg-scope .vnbg-bg-white {
  background-color: var(--vnbg-white, #ffffff);
}
.vnbg-scope .vnbg-bg-light {
  background-color: var(--vnbg-bg-light, #fbfaff);
}
.vnbg-scope .vnbg-bg-cool {
  background-color: var(--vnbg-bg-grey, #f0f2f5);
}
.vnbg-scope .vnbg-border-top {
  border-top: 1px solid var(--vnbg-border, #e5e7eb);
}

/* Typography & Decoration */
.vnbg-scope .vnbg-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(60, 9, 108, 0.1);
  color: var(--vnbg-primary, #3c096c);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.vnbg-scope .vnbg-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px auto;
}

.vnbg-scope .vnbg-section-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--vnbg-text-body, #1e293b);
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .vnbg-scope .vnbg-section-title {
    font-size: 48px;
  }
}

.vnbg-scope .vnbg-text-desc {
  font-size: 18px;
  color: var(--vnbg-text-muted);
  margin-bottom: 0;
}

.vnbg-scope .vnbg-text-highlight {
  color: var(--vnbg-accent, #f72485);
  font-weight: 700;
}

/* -------------------------------------------------------
   2. HERO SECTION
------------------------------------------------------- */
.vnbg-scope .vnbg-hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
  }
}

.vnbg-scope .vnbg-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.vnbg-scope .vnbg-hero-image {
  position: relative;
  width: 100%;
  height: 100%; /* Chiếm toàn bộ chiều cao của cột Grid */
  min-height: 400px; /* Chiều cao tối thiểu cho Mobile */
  border-radius: var(--vnbg-radius-md, 24px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.vnbg-scope .vnbg-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------
   3. TABLE MODULE
------------------------------------------------------- */
.vnbg-scope .vnbg-table-container {
  overflow-x: auto;
  border-radius: var(--vnbg-radius-md, 16px);
  box-shadow: var(--vnbg-shadow-sm, 0 4px 15px rgba(60, 9, 108, 0.05));
  background: var(--vnbg-white);
  margin-bottom: 40px;
}

.vnbg-scope .vnbg-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  text-align: left;
}
.vnbg-scope .vnbg-compare-table th {
  background-color: var(--vnbg-primary);
  color: var(--vnbg-white);
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16px;
  vertical-align: middle;
}
.vnbg-scope .vnbg-compare-table td {
  padding: 20px 24px;
  font-size: 15px;
  border-bottom: 1px solid var(--vnbg-border);
  vertical-align: top;
  line-height: 1.5;
}
.vnbg-scope .vnbg-compare-table tr:last-child td {
  border-bottom: none;
}
.vnbg-scope .vnbg-compare-table tr:nth-child(even) {
  background-color: var(--vnbg-bg-light);
}

/* Column Widths */
.vnbg-scope .vnbg-col-criteria {
  width: 25%;
}
.vnbg-scope .vnbg-col-entity {
  width: 37.5%;
}

.vnbg-scope .vnbg-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 6px;
}
.vnbg-scope .vnbg-badge.limit {
  color: #c2410c;
  background: #fff7ed;
}
.vnbg-scope .vnbg-badge.success {
  color: #047857;
  background: #ecfdf5;
}

.vnbg-scope .text-center

/* -------------------------------------------------------
   4. REQUIREMENTS MODULE
------------------------------------------------------- */
.vnbg-scope .vnbg-req-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .vnbg-scope .vnbg-req-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vnbg-scope .vnbg-req-card {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: var(--vnbg-radius-md, 24px);
  padding: 32px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vnbg-scope .vnbg-req-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vnbg-shadow-hover, 0 20px 40px rgba(60, 9, 108, 0.1));
  border-color: var(--vnbg-primary);
}

.vnbg-scope .vnbg-icon-box {
  width: 56px;
  height: 56px;
  display: flex;
  margin-bottom: 24px;
}
.vnbg-scope .vnbg-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--vnbg-primary);
}

/* -------------------------------------------------------
   5. DOCUMENTATION & HISTORY
------------------------------------------------------- */
.vnbg-scope .vnbg-doc-wrapper {
  background: var(--vnbg-bg-light);
  border-radius: 48px;
  padding: 48px 24px;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-doc-wrapper {
    padding: 80px;
  }
}

.vnbg-scope .vnbg-doc-grid {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-doc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.vnbg-scope .vnbg-doc-card {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: 32px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 16px;
}
.vnbg-scope .vnbg-doc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--vnbg-shadow-hover);
}

/* Reuse Checklist Style for Docs */
.vnbg-scope .vnbg-checklist {
  gap: 16px;
  margin: 0;
}
.vnbg-scope .vnbg-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
}

/* Timeline Components */
.vnbg-scope .vnbg-timeline {
  margin-top: 40px;
}
.vnbg-scope .vnbg-timeline-year {
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.vnbg-scope .vnbg-timeline-item h4 {
  margin: 4px 0;
  font-weight: 700;
  font-size: 16px;
}
.vnbg-scope .vnbg-timeline-item p {
  margin: 0;
  font-size: 14px;
  color: var(--vnbg-text-muted);
  line-height: 1.5;
}

/* -------------------------------------------------------
   6. DELIVERABLES & CTA
------------------------------------------------------- */
.vnbg-scope .vnbg-deliver-box {
  background: var(--vnbg-white);
  border: 1px solid var(--vnbg-border);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--vnbg-shadow-sm);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-deliver-box {
    flex-direction: row;
  }
}

.vnbg-scope .vnbg-deliver-content {
  padding: 48px;
  flex: 3;
}
.vnbg-scope .vnbg-deliver-grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.vnbg-scope .vnbg-deliver-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.vnbg-scope .vnbg-deliver-cta {
  padding: 48px;
  flex: 2;
  background: var(--vnbg-bg-light);
  border-left: 1px solid var(--vnbg-border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8ca89f7 *//* =======================================================
   OPTIMIZED LOCAL CSS: RO COMPARISON GRID
   (Inherits completely from VNBG Global Design System)
======================================================= */

.vnbg-ro-comparison {
  padding: var(--vnbg-section-spacing) 0;
  background-color: var(--vnbg-bg-light);
}

/* --- HEADER --- */
.vnbg-ro-header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.vnbg-ro-header .vnbg-title-h2 {
  margin-bottom: 16px;
}

.vnbg-ro-desc {
  font-size: 18px;
  color: var(--vnbg-text-muted);
}

.vnbg-ro-grid {
  margin-bottom: 64px;
}

/* --- CARDS & TYPOGRAPHY --- */
.vnbg-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Cập nhật phần này để hỗ trợ cả h3, h4 và căn giữa hoàn hảo với icon */
.vnbg-card-header h3,
.vnbg-card-header h4,
.vnbg-card-header .vnbg-title-h4 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  display: flex;
  align-items: center;
}

.vnbg-card-subtitle {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vnbg-text-muted);
  margin-bottom: 24px;
}

/* --- CUSTOM ICONS (Ghi đè màu gốc của Design System) --- */
.vnbg-icon-positive {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
}

.vnbg-icon-negative {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}

/* Cập nhật viền card khi hover cho card Negative (Hạn chế) */
.vnbg-card-negative:hover {
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Override Checklist icon từ Check (Global) sang Close (Local) */
.vnbg-checklist-negative li::before {
  content: "close" !important;
  color: #dc2626 !important;
}

/* --- BOTTOM CTA CARD --- */
.vnbg-cta-card {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 32px;
}

.vnbg-cta-content h4 {
  margin-bottom: 8px;
}

.vnbg-cta-content p {
  color: var(--vnbg-text-muted);
  margin: 0;
}

@media (min-width: 768px) {
  .vnbg-cta-card {
    flex-direction: row;
    text-align: left;
    gap: 48px;
  }
  .vnbg-cta-action {
    flex-shrink: 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-acbf43b *//* =======================================================
   SECTION 2: MODULE 7 - M&A ADVISORY SERVICES
   Scope: .vnbg-scope
   Version: 1.0 (Tailwind Adapted to Global CSS)
======================================================= */

/* --- SHARED UTILS (M&A Specific) --- */

/* Tag nhỏ trên cùng */
.vnbg-scope .vnbg-tag-ma {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

/* Gradient Text (Primary -> Pink) */
.vnbg-scope .vnbg-text-gradient-ma {
  background: linear-gradient(to right, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* --- MODULE 7.1: M&A HERO (Intro) --- */
.vnbg-scope .vnbg-ma-hero-wrapper {
  padding-top: 80px;
  padding-bottom: 60px;
  background-color: var(--white) !important; /* Thêm nền trắng */
}

.vnbg-scope .vnbg-ma-title {
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1.1;
  color: var(--primary);
  margin-bottom: 24px;
}

.vnbg-scope .vnbg-ma-desc {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 800px;
}

/* --- MODULE 7.2: BUY-SIDE SECTION (Image Left - Content Right) --- */
.vnbg-scope .vnbg-ma-buyside-wrapper {
  padding-bottom: 80px;
  background-color: var(--white) !important;
}

.vnbg-scope .vnbg-ma-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .vnbg-scope .vnbg-ma-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* Image Styling */
.vnbg-scope .vnbg-ma-img-box {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); /* Shadow đậm hơn */
  aspect-ratio: 4/3;
}
.vnbg-scope .vnbg-ma-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.vnbg-scope .vnbg-ma-img-box:hover img {
  transform: scale(1.05);
}
.vnbg-scope .vnbg-ma-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(60, 9, 108, 0.1); /* Primary mờ */
  transition: background 0.5s ease;
}
.vnbg-scope .vnbg-ma-img-box:hover .vnbg-ma-img-overlay {
  background: transparent;
}

/* Content Styling */
.vnbg-scope .vnbg-ma-tag-pill {
  background: rgba(60, 9, 108, 0.1);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 16px;
}

.vnbg-scope .vnbg-ma-subtitle {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

/* Feature List (Icon + Text) */
.vnbg-scope .vnbg-ma-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.vnbg-scope .vnbg-ma-feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.vnbg-scope .vnbg-ma-icon-box {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.vnbg-scope .vnbg-ma-feature-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-body);
  margin: 0 0 4px 0;
}
.vnbg-scope .vnbg-ma-feature-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* --- MODULE 7.3: SELL-SIDE BANNER (Full Width Breakout) --- */
.vnbg-scope .vnbg-ma-sell-banner {
  /* Breakout Logic */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 120px 0;
  background-color: #111621; /* Fallback Dark */
  background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAY93MHRvsOKH0wm8ayyu5gIUb_414Q6LpBsvMGUPCirkVHrNzqC4f2_Y-ewOguzMrOxI2khIhY0-sXvL9T-KZR8C-gMVhFV6jugJoDaUc9bHDBTJ8QPCsPWL_l2b4V5kVW8i5BYQ5TyCpbsFDv0pC1XBw-uNa5-GJxaoGgXTX4rsnGVy98s2D5OOYhyatmLTHU-hgAbdfMCj3tuJXuxAPe0Tcnrw4D0jNB2zzTB1DjcNb7pn0gRH5lOPumiPhHBttfoF30b9osUReE");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #ffffff;
}

/* Overlay tối màu */
.vnbg-scope .vnbg-ma-sell-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 22, 33, 0.85); /* Dark Overlay */
  z-index: 0;
}
/* Gradient Overlay nhẹ */
.vnbg-scope .vnbg-ma-sell-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(60, 9, 108, 0.4), transparent);
  z-index: 0;
}

.vnbg-scope .vnbg-ma-banner-content {
  position: relative;
  z-index: 1; /* Đè lên overlay */
  max-width: 800px;
  margin: 0 auto;
}

.vnbg-scope .vnbg-ma-banner-title {
  font-size: 48px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 24px;
  line-height: 1.1;
}
.vnbg-scope .vnbg-ma-banner-desc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

/* White Button for Banner */
.vnbg-scope .vnbg-btn-white {
  background: #ffffff;
  color: var(--primary) !important;
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.vnbg-scope .vnbg-btn-white:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-be79205 *//* Tối ưu hóa: Loại bỏ grid cũ, dùng .vnbg-card-modern. 
   Chỉ bổ sung riêng hover riêng biệt (nếu muốn độ nảy khác mặc định) và sắp xếp layout flex cho chữ */

.cps-desc {
  margin-bottom: 24px;
}

/* Ghi đè hiệu ứng hover của thẻ nếu cần giống hệt code cũ (Nhấc lên -3px thay vì -5px của Global) */
.cps-card-hover:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* Đảm bảo nút nằm ở đáy thẻ */
.cps-card-hover {
  align-items: flex-start;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3a083ee *//* --------------------------------------------------------------------------
   PART C: FAQ ACCORDION STYLES (NEW)
   -------------------------------------------------------------------------- */

/* Details Tag acting as Card */
.vnbg-scope details.vnbg-card {
    padding: 0; /* Reset padding to handle inner spacing manually */
    margin-bottom: 16px; cursor: pointer;
}

.vnbg-scope details > summary {
    list-style: none; padding: 24px 32px;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 18px; color: var(--text-body);
    transition: color 0.3s ease;
}
.vnbg-scope details > summary::-webkit-details-marker { display: none; }

.vnbg-scope .vnbg-accordion-content {
    padding: 0 32px 32px 32px; color: var(--text-primary);
    border-top: 1px solid transparent; transition: all 0.3s ease;
}

/* OPEN STATE */
.vnbg-scope details[open] {
    border-color: var(--accent); box-shadow: var(--shadow-soft);
}
.vnbg-scope details[open] > summary { color: var(--accent); }

.vnbg-scope details[open] .vnbg-accordion-content {
    border-top-color: rgba(0,0,0,0.05);
    animation: vnbgSlideDown 0.3s ease-in-out;
}

@keyframes vnbgSlideDown {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Chevron Icon */
.vnbg-scope .chevron-icon {
    color: var(--text-muted); transition: transform 0.3s ease, color 0.3s ease; font-size: 24px;
}
.vnbg-scope details[open] .chevron-icon { transform: rotate(180deg); color: var(--accent); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f2b574e *//* ==========================================================================
   VNBG SECTION 1: HERO & FORM
   Version: 2.1 (Fix Font Variable)
   Status: Cleaned & Optimized
   Dependency: Global Setting CSS (Must be loaded first)
   Scope: .vnbg-scope
   ========================================================================== */

/* LƯU Ý QUAN TRỌNG:
   - File này sử dụng biến từ Global Setting.
   - Tên biến đã được đồng bộ về format gốc: --primary, --font-main (không có tiền tố vnbg-)
*/

/* 1. HERO BACKGROUND (Full Width Breakout) */
.vnbg-scope .vnbg-header-hero {
    /* Kỹ thuật tràn viền màn hình nhưng giữ content ở giữa */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -200px; 
    padding: 280px 0 120px 0 !important;
    
    /* Spacing & Background */
    padding: 120px 0;
    background-image: url('https://vietnambusinessgateway.com/wp-content/uploads/2025/11/Tax-Accounting-1.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    
    /* Fallback background using Global Variable */
    /* FIX: Đổi --vnbg-primary thành --primary */
    background-color: var(--primary, #3c096c); 
    
    /* FIX: Đổi --vnbg-white thành --white */
    color: var(--white, #ffffff);
    
    /* FIX: Đổi --vnbg-font-main thành --font-main và thêm fallback cứng Helvetica */
    font-family: var(--font-main, 'Helvetica', 'Arial', sans-serif) !important;
}

/* Overlay tối màu phủ lên ảnh nền */
.vnbg-scope .vnbg-header-hero::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* FIX: Đổi biến màu */
    background-color: var(--primary, #3c096c);
    opacity: 0.7; 
    z-index: 1;
}

/* Đảm bảo nội dung nằm trên lớp Overlay */
.vnbg-scope .vnbg-container {
    position: relative;
    z-index: 2;
}

/* 2. HERO CONTENT (Left Column) */
.vnbg-scope .vnbg-hero-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--white, #ffffff) !important;
    /* Đảm bảo tiêu đề cũng nhận đúng font */
    font-family: var(--font-main, 'Helvetica', 'Arial', sans-serif) !important;
    text-transform: none;
}

.vnbg-scope .vnbg-hero-tagline {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--font-main, 'Helvetica', 'Arial', sans-serif) !important;
}

/* Tag */
.vnbg-scope .vnbg-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 3. HERO FORM (Right Column) */
.vnbg-scope .vnbg-hero-form {
    background: var(--white, #ffffff);
    padding: 32px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    /* FIX: Đổi biến text */
    color: var(--text-body, #1e293b);
    font-family: var(--font-main, 'Helvetica', 'Arial', sans-serif) !important;
}

/* Tiêu đề trong Form */
.vnbg-scope .vnbg-hero-form h3 {
    text-align: center;
    text-transform: none;
    margin-bottom: 24px;
    font-weight: 700;
    /* FIX: Đổi biến màu */
    color: var(--primary, #3c096c) !important;
}

/* 4. BUTTONS */
.vnbg-scope .vnbg-btn-hero {
    background: var(--white, #ffffff) !important;
    color: var(--primary, #3c096c) !important;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    transition: all 0.3s ease;
    border: none;
    font-family: var(--font-main, 'Helvetica', 'Arial', sans-serif) !important;
}

.vnbg-scope .vnbg-btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 5. GRID UTILS */
.vnbg-scope .vnbg-hero-grid-layout {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .vnbg-scope .vnbg-hero-grid-layout {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}/* End custom CSS */