/* ═══════════════════════════════════════════════════════════
   Vibe4VN — Theme Thống Nhất (Unified Light Theme)
   Palette: Nền trắng/hồng nhạt · Chữ tối · Accent đỏ/vàng/xanh
   File này load sau cùng — override toàn bộ CSS cũ
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. DESIGN TOKENS — Bộ màu thống nhất
══════════════════════════════════════ */
:root {
  /* === ACCENT CHÍNH === */
  --red:          #E8192C;   /* đỏ Việt Nam — CTA chính, giá, badge */
  --red-dark:     #C8101F;
  --red-light:    #FFF0F1;
  --red-glow:     rgba(232,25,44,0.15);

  --yellow:       #F5A623;   /* vàng — highlight, star, badge đặc biệt */
  --yellow-dark:  #D4890A;
  --yellow-light: #FFFBEC;

  --blue:         #E8192C;   /* xanh — link, badge phụ, icon */
  --blue-dark:    #C8101F;
  --blue-light:   #FFF0F1;

  --green:        #00A854;   /* xanh lá — "miễn phí", thành công */
  --green-light:  #E8F7EE;

  /* === NỀN === */
  --bg:           #FAFAFA;   /* nền tổng, body */
  --bg-white:     #FFFFFF;
  --bg-pink:      #FFF5F7;   /* hồng nhạt cho section xen kẽ */
  --bg-warm:      #FFF9F0;   /* kem nhạt */
  --bg-2:         #F3F4F6;   /* nền card, section phụ */
  --bg-3:         #EAECF0;

  /* === CHỮ === */
  --text-1:       #111827;   /* đậm — tiêu đề chính */
  --text-2:       #374151;   /* vừa — body text */
  --text-3:       #6B7280;   /* nhạt — mô tả phụ */
  --text-muted:   #9CA3AF;   /* rất nhạt */

  /* === VIỀN === */
  --border:       #E5E7EB;
  --border-2:     #D1D5DB;
  --border-red:   rgba(232,25,44,0.2);

  /* === BÓNG === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.11), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-red:   0 4px 18px rgba(232,25,44,0.22);
  --shadow-blue:  0 4px 16px rgba(232,25,44,0.22);

  /* === FONT === */
  --font:        'Be Vietnam Pro', 'Nunito', system-ui, sans-serif;
  --font-display:'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;

  /* === RADIUS === */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;

  /* === TRANSITION === */
  --tf: 0.15s cubic-bezier(0.4,0,0.2,1);
  --tm: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════
   2. BASE RESET
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text-2) !important;
  overflow-x: hidden !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  text-shadow: none !important;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--red-light); color: var(--red-dark); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }

/* ══════════════════════════════════════
   3. TICKER BAR — thanh thông báo đỏ
══════════════════════════════════════ */
.event-ticker-bar {
  background: linear-gradient(90deg, var(--red-dark), var(--red)) !important;
  height: 38px !important;
  border-bottom: none !important;
}
.ticker-item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.ticker-item a { color: #fff !important; }
.ticker-sep { background: rgba(255,255,255,0.35) !important; }
.ticker-badge {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.ticker-admin-btn,
.ticker-close-btn {
  background: rgba(0,0,0,0.15) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════
   4. HEADER — nền trắng, viền xám
══════════════════════════════════════ */
.main-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 62px !important;
  background: #ffffff !important;
  border-bottom: 1.5px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.main-header.scrolled {
  box-shadow: var(--shadow-md) !important;
  background: #ffffff !important;
}
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* Logo */
.logo { display: flex !important; align-items: center !important; gap: 10px !important; }
.logo-icon-wrap {
  background: var(--red) !important;
  border-radius: var(--r-sm) !important;
}
.logo-name {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--red) !important;
  background: none !important;
  -webkit-text-fill-color: var(--red) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.logo-tag {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
}

/* Nav links */
.main-nav a {
  color: var(--text-2) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--tf) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-2) !important;
  text-shadow: none !important;
}
.main-nav a:hover {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
}
.main-nav a::after,
.main-nav a::before { display: none !important; }

/* Nút Khóa học */
.nav-course-tab,
.main-nav a[href*="khoa-hoc"],
.main-nav a[href="#courses"] {
  background: var(--yellow-light) !important;
  color: var(--yellow-dark) !important;
  -webkit-text-fill-color: var(--yellow-dark) !important;
  border: 1.5px solid rgba(245,166,35,0.3) !important;
  font-weight: 700 !important;
}
.nav-course-tab:hover {
  background: #FFE0B2 !important;
  color: var(--yellow-dark) !important;
  -webkit-text-fill-color: var(--yellow-dark) !important;
}

/* CTA "Mua ngay" */
.nav-cta,
header .btn-cta,
.header-inner .btn-buy,
a.nav-cta {
  background: var(--red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 8px 20px !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  box-shadow: var(--shadow-red) !important;
  border: none !important;
  transition: all var(--tf) !important;
}
.nav-cta:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px) !important;
}

/* Giỏ hàng */
.cart-btn {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
}
.cart-btn:hover {
  background: var(--red-light) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}
.cart-badge {
  background: var(--red) !important;
  color: #fff !important;
}

/* Hamburger */
.hamburger span { background: var(--text-2) !important; }
.nav-mobile-overlay { background: rgba(17,24,39,0.5) !important; }
.mobile-menu {
  background: var(--bg-white) !important;
  border-right: 1px solid var(--border) !important;
}
.mobile-menu .main-nav a {
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ══════════════════════════════════════
   5. HERO — gradient hồng nhạt sang trắng
══════════════════════════════════════ */
.hero-section {
  background: linear-gradient(160deg, #FFF5F7 0%, #FFF9F0 35%, #FFFFFF 65%, #FFF5F7 100%) !important;
  padding: 100px 0 72px !important;
  min-height: auto !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -80px;
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(232,25,44,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(232,25,44,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-bg,
.orb { display: none !important; }
.hero-inner {
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative;
  z-index: 1;
}

/* Badge "Đang có X người dùng" */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 18px !important;
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border-red) !important;
  border-radius: 100px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  margin-bottom: 26px !important;
  box-shadow: var(--shadow-sm) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  background-color: var(--bg-white) !important;
}
.badge-dot {
  width: 8px !important;
  height: 8px !important;
  background: #22C55E !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2) !important;
  flex-shrink: 0 !important;
}

/* Tiêu đề Hero */
.hero-title,
h1.hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 5.5vw, 60px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.1 !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
  margin-bottom: 16px !important;
}

/* Accent đỏ trong tiêu đề */
.hero-accent,
.hero-title .text-accent,
.hero-title span[style*="color:#E8"] {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Slogan */
.hero-slogan {
  font-size: 15px !important;
  padding: 12px 18px !important;
  margin-bottom: 20px !important;
  border-left: 4px solid var(--red) !important;
  background: var(--red-light) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  font-weight: 600 !important;
  text-align: left !important;
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-shadow: none !important;
}
.hero-desc {
  font-size: 15px !important;
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
  line-height: 1.75 !important;
  margin-bottom: 36px !important;
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-shadow: none !important;
}

/* Nút Hero */
.hero-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 44px !important;
}
.btn-primary,
.hero-actions .btn:first-child,
.hero-actions a:first-child {
  background: var(--red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 14px 32px !important;
  border-radius: var(--r-md) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: var(--shadow-red) !important;
  border: none !important;
  transition: all var(--tf) !important;
}
.btn-primary:hover,
.hero-actions .btn:first-child:hover,
.hero-actions a:first-child:hover {
  background: var(--red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(232,25,44,0.35) !important;
}
.btn-secondary,
.hero-actions .btn:nth-child(2),
.hero-actions a:nth-child(2) {
  background: var(--bg-white) !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  padding: 14px 28px !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: 1.5px solid var(--border-2) !important;
  transition: all var(--tf) !important;
}
.btn-secondary:hover,
.hero-actions .btn:nth-child(2):hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
}

/* Thống kê Hero */
.hero-stats {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
.stat { border-right: 1px solid var(--border) !important; padding: 18px 12px !important; }
.stat:last-child { border-right: none !important; }
.stat strong {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}
.stat span {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════
   6. TRUST BAR
══════════════════════════════════════ */
.trust-bar {
  background: var(--bg-white) !important;
  border-top: 1.5px solid var(--border) !important;
  border-bottom: 1.5px solid var(--border) !important;
  padding: 14px 0 !important;
}
.trust-item {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.trust-item svg,
.trust-item i { color: var(--red) !important; }
.trust-sep { display: none !important; }

/* ══════════════════════════════════════
   7. SECTIONS — Bố cục chung
══════════════════════════════════════ */
.section {
  padding: 72px 0 !important;
  position: relative !important;
}
.section::before,
.section::after { display: none !important; }

/* Section xen kẽ hồng nhạt */
.section:nth-of-type(even),
.free-section,
.reviews-section,
.why-section {
  background: var(--bg-pink) !important;
}

/* Đảm bảo section lẻ trắng */
.section:nth-of-type(odd),
.products-section,
.demo-section,
.contact-section {
  background: var(--bg-white) !important;
}

/* Label nhỏ trên tiêu đề */
.section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
  text-shadow: none !important;
}
.section-label::before,
.section-label::after { display: none !important; }

/* Tiêu đề section */
.section-title,
h2.section-title,
.section-head h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 3.5vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
  line-height: 1.15 !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
  margin-bottom: 14px !important;
}

/* Mô tả section */
.section-desc,
.section-head p {
  font-size: 15px !important;
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
  line-height: 1.7 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════
   8. REWARD BANNER
══════════════════════════════════════ */
.reward-banner {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%) !important;
  border-radius: var(--r-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-red) !important;
}
.reward-eyebrow { color: rgba(255,255,255,0.75) !important; }
.reward-eyebrow .dot { background: #4ADE80 !important; }
.reward-headline { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.highlight { color: var(--yellow) !important; -webkit-text-fill-color: var(--yellow) !important; }
.reward-sub { color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; }
.reward-chip {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.countdown-label { color: rgba(255,255,255,0.8) !important; }
.cd-block {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.cd-sep { color: rgba(255,255,255,0.6) !important; }
.reward-cta-btn {
  background: var(--yellow) !important;
  color: #1A1A1A !important;
  -webkit-text-fill-color: #1A1A1A !important;
  border-radius: var(--r-md) !important;
  font-weight: 800 !important;
  border: none !important;
}
.reward-cta-btn:hover {
  background: var(--yellow-dark) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   9. PRODUCT CARDS
══════════════════════════════════════ */
.product-card,
.product-card.glassmorphism {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  transition: all var(--tm) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.product-card:hover {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-red) !important;
  transform: translateY(-4px) !important;
}
.product-card::before { display: none !important; }

.product-card img.product-image,
.product-card .product-image {
  width: 100% !important;
  height: 170px !important;
  max-height: 170px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.product-card h3.product-name,
.product-card .product-name {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  margin: 14px 16px 6px !important;
  line-height: 1.35 !important;
  display: block !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}
.product-card p.product-description,
.product-card .product-description {
  font-size: 13px !important;
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
  line-height: 1.6 !important;
  margin: 0 16px 10px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-shadow: none !important;
}
.product-card p.product-price,
.product-card .product-price {
  font-weight: 900 !important;
  font-size: 20px !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  margin: 0 16px 12px !important;
  display: block !important;
  text-shadow: none !important;
}
.product-card .product-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 0 16px 16px !important;
  position: relative !important;
  z-index: 2 !important;
}
.product-card .btn-detail,
.product-card .btn-info,
#product-grid .product-card .btn-detail,
#product-grid .product-card .btn-info {
  flex: 1 !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: all var(--tf) !important;
  text-shadow: none !important;
}
.product-card .btn-detail:hover,
.product-card .btn-info:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
}
.product-card .btn-buy,
#product-grid .product-card .btn-buy {
  flex: 1.3 !important;
  background: var(--red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: all var(--tf) !important;
  text-shadow: none !important;
}
.product-card .btn-buy:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-red) !important;
}
.product-card-body-wrap {
  padding: 12px 0 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Badge giá */
[class*="badge"],
.price-badge {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}
.badge-free,
.free-badge,
.free-card-badge {
  background: var(--green-light) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,168,84,0.25) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* ══════════════════════════════════════
   10. FREE CARDS
══════════════════════════════════════ */
.free-section { background: var(--bg-pink) !important; }
.free-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  transition: all var(--tm) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}
.free-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--green) !important;
  box-shadow: 0 8px 24px rgba(0,168,84,0.15) !important;
}
.btn-free-use {
  background: var(--green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  border: none !important;
  transition: all var(--tf) !important;
}
.btn-free-use:hover {
  background: #008040 !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════
   11. REVIEWS — Đánh giá
══════════════════════════════════════ */
.reviews-section { background: var(--bg-warm) !important; }
.review-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--tm) !important;
}
.review-card:hover {
  border-color: var(--yellow) !important;
  box-shadow: 0 8px 24px rgba(245,166,35,0.15) !important;
  transform: translateY(-3px) !important;
}
.review-stars,
.star { color: var(--yellow) !important; }
.review-name,
.reviewer-name { color: var(--text-1) !important; -webkit-text-fill-color: var(--text-1) !important; font-weight: 700 !important; }
.review-text,
.reviewer-text { color: var(--text-2) !important; -webkit-text-fill-color: var(--text-2) !important; text-shadow: none !important; }

/* ══════════════════════════════════════
   12. WHY / FEATURES SECTION
══════════════════════════════════════ */
.why-section { background: var(--bg-pink) !important; }
.why-card,
.feature-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--tm) !important;
}
.why-card:hover,
.feature-card:hover {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-red) !important;
  transform: translateY(-3px) !important;
}
.why-icon,
.feature-icon {
  background: var(--red-light) !important;
  color: var(--red) !important;
  border-radius: var(--r-md) !important;
}
.why-title,
.feature-title { color: var(--text-1) !important; -webkit-text-fill-color: var(--text-1) !important; font-weight: 700 !important; text-shadow: none !important; }
.why-desc,
.feature-desc { color: var(--text-3) !important; -webkit-text-fill-color: var(--text-3) !important; text-shadow: none !important; }

/* ══════════════════════════════════════
   13. DEMO SECTION
══════════════════════════════════════ */
.demo-section { background: var(--bg-white) !important; }
.demo-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--tm) !important;
  overflow: hidden !important;
}
.demo-card:hover {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-red) !important;
  transform: translateY(-3px) !important;
}
.btn-demo,
.btn-try {
  background: var(--red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  transition: all var(--tf) !important;
}
.btn-demo:hover { background: var(--red-dark) !important; transform: translateY(-1px) !important; }

/* ══════════════════════════════════════
   14. FAQ SECTION
══════════════════════════════════════ */
.faq-section,
#faq.faq-section { background: var(--bg-2) !important; }
.faq-item {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
}
.faq-item[open] {
  border-color: var(--red-glow) !important;
  box-shadow: 0 4px 16px var(--red-glow) !important;
  border-color: rgba(232,25,44,0.3) !important;
}
.faq-q,
details.faq-item > summary.faq-q,
.faq-section details > summary {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.faq-q::after { color: var(--red) !important; }
.faq-a,
.faq-section .faq-a {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.faq-a strong {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}
.faq-section .section-label,
#faq .section-label {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
  -webkit-background-clip: unset !important;
}
.faq-section .section-title,
#faq .section-title {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
}

/* ══════════════════════════════════════
   15. CONTACT / SOCIAL SECTION
══════════════════════════════════════ */
.contact-section,
#contact.contact-section { background: var(--bg-white) !important; }
.contact-section .section-label,
#contact .section-label {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  background: var(--red-light) !important;
  -webkit-background-clip: unset !important;
}
.contact-section .section-title,
#contact .section-title {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  background: none !important;
}
.contact-section .section-desc,
#contact .section-desc {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}
.social-card,
.contact-section .social-card {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--tm) !important;
}
.social-card:hover {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-red) !important;
  transform: translateY(-2px) !important;
}
.social-name,
.contact-section .social-name {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  font-weight: 700 !important;
}
.social-sub,
.contact-section .social-sub {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}
.social-arrow { color: var(--text-muted) !important; }
.share-label,
.contact-section .share-label {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}
.share-btn-fb   { background: #E8192C !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-tw   { background: #000 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-zalo { background: #E8192C !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-li   { background: #E8192C !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ══════════════════════════════════════
   16. FOOTER
══════════════════════════════════════ */
footer,
.main-footer,
.footer {
  background: #111827 !important;
  border-top: none !important;
}
.footer-logo-name { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.footer-desc,
.footer p { color: rgba(255,255,255,0.55) !important; -webkit-text-fill-color: rgba(255,255,255,0.55) !important; text-shadow: none !important; }
.footer-col h4,
.footer-heading,
.footer h4 { color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; font-weight: 700 !important; text-shadow: none !important; }
.footer a { color: rgba(255,255,255,0.55) !important; -webkit-text-fill-color: rgba(255,255,255,0.55) !important; transition: color var(--tf) !important; }
.footer a:hover { color: var(--yellow) !important; -webkit-text-fill-color: var(--yellow) !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.footer-copy,
.footer-bottom p { color: rgba(255,255,255,0.35) !important; -webkit-text-fill-color: rgba(255,255,255,0.35) !important; }

/* ══════════════════════════════════════
   17. MODAL & OVERLAY
══════════════════════════════════════ */
.modal-overlay,
.ticker-modal-overlay {
  background: rgba(17,24,39,0.7) !important;
}
.modal-box,
.ticker-modal {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header,
.ticker-modal-header {
  border-bottom: 1px solid var(--border) !important;
}
.modal-header h3,
.ticker-modal-header h3 { color: var(--text-1) !important; -webkit-text-fill-color: var(--text-1) !important; }
.ticker-input {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-1) !important;
}
.ticker-input:focus { border-color: var(--red) !important; outline: none !important; }
.ticker-add-btn { background: var(--red) !important; color: #fff !important; }
.ttype-btn.active,
.ttype-btn:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

/* ══════════════════════════════════════
   18. INLINE STYLES OVERRIDE (dark mode leftovers)
══════════════════════════════════════ */
/* Bắt các div dùng inline style nền tối */
[style*="background:#111"],
[style*="background: #111"],
[style*="background:#06060a"],
[style*="background:#0c0c14"],
[style*="background:#0f0f18"],
[style*="background:#181818"],
[style*="background:#1a1a"],
[style*="background-color:#111"],
[style*="background-color: #111"],
[style*="background-color:#06060a"],
[style*="background-color:#0c0c14"] {
  background: var(--bg-white) !important;
  background-color: var(--bg-white) !important;
}

/* Chữ trắng trên nền sáng — chuyển thành chữ tối */
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#F5F5F8"],
[style*="color:#FFFFFF"],
[style*="color: #FFFFFF"],
[style*="color:rgba(255,255,255"] {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}
/* Ngoại lệ: giữ trắng nếu phần tử cha có nền tối */
.event-ticker-bar *,
.reward-banner *,
footer *,
.main-footer *,
.nav-cta,
.btn-primary,
.btn-buy,
.btn-free-use {
  /* các nút/banner tối giữ chữ trắng, được xử lý riêng bên trên */
}

/* ══════════════════════════════════════
   19. GIÁ TIỀN — đỏ nhất quán
══════════════════════════════════════ */
[class*="price"]:not(.price-old):not(.price-original) {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
  text-shadow: none !important;
}
.price-old,
.price-original {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  text-decoration: line-through !important;
}
strong, b {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ══════════════════════════════════════
   20. PLATFORM / HOW-IT-WORKS SECTION
══════════════════════════════════════ */
.platform-section { background: var(--bg-2) !important; }
.platform-card,
.how-card,
.step-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.platform-card h3,
.how-card h3,
.step-title { color: var(--text-1) !important; -webkit-text-fill-color: var(--text-1) !important; font-weight: 700 !important; text-shadow: none !important; }
.platform-card p,
.how-card p,
.step-desc { color: var(--text-3) !important; -webkit-text-fill-color: var(--text-3) !important; text-shadow: none !important; }
.step-num,
.how-num {
  background: var(--red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 50% !important;
  font-weight: 900 !important;
}

/* ══════════════════════════════════════
   21. TICKER MODAL — nền trắng
══════════════════════════════════════ */
.ticker-modal {
  background: #fff !important;
}
.ticker-modal-header h3 { color: var(--text-1) !important; -webkit-text-fill-color: var(--text-1) !important; }
.ticker-modal-close {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
}
.ticker-modal-body h4 { color: var(--red) !important; -webkit-text-fill-color: var(--red) !important; }
.ticker-add-section,
.ticker-settings-section,
.ticker-items-section {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
}
.ticker-form-row label { color: var(--text-3) !important; }
.ttype-btn {
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
}

/* ══════════════════════════════════════
   22. REVEAL ANIMATION
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════
   23. RESPONSIVE MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-section { padding: 80px 0 52px !important; }
  .hero-title { font-size: 30px !important; letter-spacing: -0.8px !important; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; justify-content: center !important; }
  .hero-stats { flex-wrap: wrap !important; border-radius: var(--r-lg) !important; }
  .stat { min-width: 50% !important; }
  .stat strong { font-size: 20px !important; }
  .section { padding: 52px 0 !important; }
  .section-title { font-size: 24px !important; }
  .main-header { height: 56px !important; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px !important; }
  .hero-title { font-size: 26px !important; }
  .hero-badge { font-size: 11px !important; }
}

/* ══════════════════════════════════════
   24. CHỮ TRẮNG → ĐEN (toàn bộ nền sáng)
══════════════════════════════════════ */

/* Global: mọi chữ trắng trên nền sáng thành tối */
body,
.hero-section,
.section,
.products-section,
.free-section,
.reviews-section,
.why-section,
.demo-section,
.platform-section,
.faq-section,
.contact-section,
.trust-bar,
.hero-inner,
.section-head,
.product-card,
.free-card,
.review-card,
.why-card,
.demo-card,
.social-card,
.faq-item,
.modal-box {
  color: var(--text-2) !important;
}

/* Tiêu đề và chữ quan trọng */
h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.product-name,
.why-title,
.feature-title,
.step-title,
.review-name,
.social-name {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Body text / mô tả */
p,
.hero-desc,
.section-desc,
.product-description,
.why-desc,
.review-text,
.faq-a,
.social-sub,
.step-desc {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
  text-shadow: none !important;
}

/* Nav links — chữ tối */
.main-nav a,
.main-nav a:visited {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
}
.main-nav a:hover {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* Hero badge chữ đỏ */
.hero-badge {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* Hero slogan chữ tối */
.hero-slogan {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Trust items */
.trust-item {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* Stat labels */
.stat span {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/* FAQ câu hỏi */
.faq-q,
details.faq-item > summary.faq-q {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* Contact desc */
#contact .section-desc,
.contact-section .section-desc {
  color: var(--text-3) !important;
  -webkit-text-fill-color: var(--text-3) !important;
}

/* ── Ngoại lệ: giữ trắng nơi nền tối/đỏ ── */
.event-ticker-bar .ticker-item,
.event-ticker-bar .ticker-item *,
.event-ticker-bar a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.nav-cta,
.nav-cta *,
a.nav-cta {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.btn-primary,
.hero-actions .btn:first-child,
.hero-actions a:first-child,
button.btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.product-card .btn-buy,
#product-grid .product-card .btn-buy,
.btn-buy {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.btn-free-use,
button.btn-free-use {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.btn-demo,
.btn-try {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.reward-banner,
.reward-banner *:not(.reward-cta-btn):not(.reward-cta-btn *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.reward-cta-btn,
.reward-cta-btn * {
  color: #1A1A1A !important;
  -webkit-text-fill-color: #1A1A1A !important;
}
footer *,
.main-footer *,
.footer * {
  /* footer handled separately, keep white on dark */
}
footer p,
.footer p,
.footer-desc,
.footer-copy { color: rgba(255,255,255,0.55) !important; -webkit-text-fill-color: rgba(255,255,255,0.55) !important; }
footer h4,
.footer h4,
.footer-heading { color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; }
footer a,
.footer a { color: rgba(255,255,255,0.55) !important; -webkit-text-fill-color: rgba(255,255,255,0.55) !important; }
footer a:hover,
.footer a:hover { color: var(--yellow) !important; -webkit-text-fill-color: var(--yellow) !important; }
.cart-btn {
  color: var(--text-2) !important;
  -webkit-text-fill-color: var(--text-2) !important;
}

/* Section labels đỏ */
.section-label {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* Giá đỏ */
[class*="price"]:not(.price-old):not(.price-original),
.product-price,
.stat strong {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* Share buttons giữ màu riêng */
.share-btn-fb   { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-tw   { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-zalo { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.share-btn-li   { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Override inline style chữ trắng trên nền sáng ── */
[style*="-webkit-text-fill-color: #fff"],
[style*="-webkit-text-fill-color:#fff"],
[style*="-webkit-text-fill-color: white"],
[style*="color: #fff"]:not(header *):not(.event-ticker-bar *):not(footer *),
[style*="color:#fff"]:not(header *):not(.event-ticker-bar *):not(footer *),
[style*="color: white"]:not(header *):not(.event-ticker-bar *):not(footer *),
[style*="color: #F5F5F8"],
[style*="color:#F5F5F8"],
[style*="color: #FFFFFF"],
[style*="color:#FFFFFF"] {
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important;
}

/* ── Hero accent → đỏ ── */
.hero-accent,
.hero-title .text-accent,
span.accent,
span[style*="color:#E8"],
span[style*="color: #E8"] {
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* ══════════════════════════════════════
   25. OVERRIDE SECTION NỀN TỐI (inline style)
══════════════════════════════════════ */

/* AI Insights section — buộc nền trắng */
#ai-insights {
  background: #ffffff !important;
  border-top: 2px solid #E5E7EB !important;
}
#ai-insights * {
  text-shadow: none !important;
}
#ai-insights h2,
#ai-insights h3,
#ai-insights [style*="color:#fff"],
#ai-insights [style*="color: #fff"],
#ai-insights [style*="color:#FFFFFF"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
#ai-insights [style*="color:#aaa"],
#ai-insights [style*="color: #aaa"],
#ai-insights [style*="color:#ccc"],
#ai-insights [style*="color:#666"] {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
/* Cards trong insights */
#ai-insights [style*="background:rgba(255,255,255,0.04)"],
#ai-insights [style*="background: rgba(255,255,255,0.04)"] {
  background: #ffffff !important;
  border-color: #E5E7EB !important;
}
/* Insight box */
#ai-insights [style*="background:rgba(26,111,255"],
#ai-insights [style*="background: rgba(26,111,255"],
#ai-insights [style*="background:rgba(232,25,44"] {
  background: #FFF0F1 !important;
  border-color: rgba(232,25,44,0.25) !important;
}

/* Press section dark */
section[style*="background:#0a0a0a"],
section[style*="background: #0a0a0a"] {
  background: #F3F4F6 !important;
  border-top: 1.5px solid #E5E7EB !important;
}
section[style*="background:#0d0d14"],
section[style*="background: #0d0d14"],
div[style*="background:#0d0d14"],
div[style*="background: #0d0d14"] {
  background: #ffffff !important;
}

/* Mọi section/div còn dùng nền tối */
section[style*="background:#1a"],
section[style*="background:#0"],
div[style*="background:#06060a"],
div[style*="background:#111"],
div[style*="background:#18"] {
  background: #F3F4F6 !important;
}