/* ═══════════════════════════════════════════════════════════
   Vibe4VN — Giao Diện Thân Thiện Người Việt
   Phong cách: Sáng sủa · Tin cậy · Gần gũi · Dễ đọc
   Màu sắc: Xanh dương chủ đạo + Cam nhấn + Nền trắng
   Tham khảo: Tiki · Zalo · ViettelPay · BIDV
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Nunito:wght@700;800;900&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Màu chính — Xanh dương (tin cậy, chuyên nghiệp) */
  --blue:        #E8192C;
  --blue-dark:   #C8101F;
  --blue-light:  #FFF0F1;
  --blue-mid:    #E8192C;

  /* Màu nhấn — Cam đỏ (hành động, khuyến mãi) */
  --red:         #FF3D3D;
  --red-dark:    #E52D2D;
  --red-light:   #FFF0F0;
  --orange:      #E8192C;
  --orange-lt:   #FFF0F1;

  /* Màu phụ */
  --green:       #00A854;
  --green-light: #E6F7EE;
  --gold:        #FFA500;
  --gold-light:  #FFF8E1;

  /* Nền — Sáng, dễ đọc */
  --bg:          #F5F7FA;
  --bg-white:    #FFFFFF;
  --bg-2:        #F0F2F5;
  --bg-3:        #E8EBF0;

  /* Chữ */
  --text-1:      #1A1A1A;
  --text-2:      #3D4150;
  --text-3:      #6B7280;
  --text-muted:  #9CA3AF;

  /* Viền */
  --border:      #E5E7EB;
  --border-2:    #D1D5DB;
  --border-blue: rgba(232,25,44,0.25);

  /* Bo tròn */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;

  /* Bóng đổ */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-blue: 0 4px 16px rgba(232,25,44,0.25);
  --shadow-red:  0 4px 16px rgba(255,61,61,0.25);

  /* Font */
  --font:        'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-display:'Nunito', 'Be Vietnam Pro', system-ui, sans-serif;

  /* Hiệu ứng */
  --tf:  0.15s cubic-bezier(0.4,0,0.2,1);
  --tm:  0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-2);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(232,25,44,0.15); color: var(--blue-dark); }

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

/* ══════════════════════════════════════
   TICKER BAR — Thông báo trên cùng
══════════════════════════════════════ */
.event-ticker-bar {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue)) !important;
  height: 36px !important;
  border-bottom: none !important;
}
.ticker-item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.ticker-sep {
  background: rgba(255,255,255,0.35) !important;
}
.ticker-badge {
  background: rgba(255,255,255,0.2) !important;
}

/* ══════════════════════════════════════
   HEADER — Đầu trang
══════════════════════════════════════ */
.main-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 60px !important;
  background: var(--bg-white) !important;
  border-bottom: 1.5px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--tf) !important;
}
.main-header.scrolled {
  box-shadow: var(--shadow-md) !important;
  background: var(--bg-white) !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(--blue) !important;
  border-radius: var(--r-sm) !important;
}
.logo-name {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  color: var(--blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.logo-tag {
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* Nav */
.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;
}
.main-nav a:hover {
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}
.main-nav a::after { display: none !important; }

/* Nút Khóa học */
.nav-course-tab {
  background: var(--orange-lt) !important;
  color: var(--orange) !important;
  border: 1.5px solid rgba(255,107,0,0.2) !important;
}
.nav-course-tab:hover {
  background: #FFE0B2 !important;
  color: var(--orange) !important;
}

/* CTA Header */
.nav-cta {
  background: var(--blue) !important;
  color: #fff !important;
  padding: 7px 18px !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: var(--shadow-blue) !important;
  transition: all var(--tf) !important;
}
.nav-cta:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(232,25,44,0.35) !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(--blue-light) !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}
.cart-badge {
  background: var(--red) !important;
  color: #fff !important;
}

/* Hamburger menu */
.hamburger span {
  background: var(--text-2) !important;
}
.nav-mobile-overlay {
  background: rgba(26,26,46,0.5) !important;
}
.mobile-menu {
  background: var(--bg-white) !important;
  border-right: 1px solid var(--border) !important;
}
.mobile-menu .main-nav {
  flex-direction: column !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;
}

/* ══════════════════════════════════════
   HERO — Phần đầu trang chính
══════════════════════════════════════ */
.hero-section {
  background: linear-gradient(160deg, #FFF5F7 0%, #FFF9FA 40%, #FFFFFF 70%, #FFF5F0 100%) !important;
  padding: 100px 0 70px !important;
  min-height: auto !important;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232,25,44,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,107,0,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-bg { display: none !important; }
.orb { display: none !important; }

.hero-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative;
  z-index: 1;
}

/* Badge LIVE */
.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 rgba(232,25,44,0.2) !important;
  border-radius: 100px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  margin-bottom: 28px !important;
  box-shadow: var(--shadow-sm) !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;
}

/* Tiêu đề Hero */
.hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.1 !important;
  color: var(--text-1) !important;
  margin-bottom: 16px !important;
}
.hero-accent {
  color: var(--blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--blue) !important;
  display: inline !important;
  position: relative;
}
.hero-accent::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-mid));
  border-radius: 2px;
  opacity: 0.3;
}

/* Slogan & mô tả */
.hero-slogan {
  font-size: 16px !important;
  padding: 14px 20px !important;
  margin-bottom: 20px !important;
  border-left: 4px solid var(--blue) !important;
  background: var(--blue-light) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  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;
}
.hero-desc {
  font-size: 15px !important;
  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;
}

/* Nút hành động */
.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(--blue) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: var(--shadow-blue) !important;
  border: none !important;
  transition: all var(--tf) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.btn-primary:hover,
.hero-actions .btn:first-child:hover,
.hero-actions a:first-child:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(232,25,44,0.4) !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;
  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;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.btn-secondary:hover,
.hero-actions .btn:nth-child(2):hover,
.hero-actions a:nth-child(2):hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}

/* Thống kê Hero */
.hero-stats {
  display: flex !important;
  gap: 0 !important;
  justify-content: center !important;
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
.stat {
  flex: 1 !important;
  padding: 18px 12px !important;
  text-align: center !important;
  border-right: 1px solid var(--border) !important;
}
.stat:last-child { border-right: none !important; }
.stat strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--blue) !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}
.stat span {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.stat-line { display: none !important; }

/* ══════════════════════════════════════
   REWARD BANNER — Banner học viên
══════════════════════════════════════ */
.reward-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%) !important;
  border-radius: var(--r-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-blue) !important;
}
.reward-eyebrow { color: rgba(255,255,255,0.75) !important; }
.reward-eyebrow .dot { background: #4ADE80 !important; }
.reward-headline { color: #fff !important; }
.highlight { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; }
.reward-sub { 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.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.cd-sep { color: #fff !important; }
.reward-cta-btn {
  background: #FFD700 !important;
  color: #1A1A1A !important;
  border-radius: var(--r-md) !important;
  font-weight: 800 !important;
}
.reward-cta-btn:hover {
  background: #FFC300 !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   TRUST BAR — Thanh tín nhiệm
══════════════════════════════════════ */
.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-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}
.trust-item {
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: var(--bg-2) !important;
  border-radius: 100px !important;
  border: 1px solid var(--border) !important;
}
.trust-item svg { color: var(--blue) !important; flex-shrink: 0 !important; }
.trust-sep { display: none !important; }

/* ══════════════════════════════════════
   SECTIONS — Phần chung
══════════════════════════════════════ */
.section {
  padding: 72px 0 !important;
  position: relative !important;
}
.section::before { display: none !important; }

.section-head {
  margin-bottom: 48px !important;
  text-align: center !important;
}
.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(--blue) !important;
  background: var(--blue-light) !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
}
.section-label::before { display: none !important; }
.section-title {
  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;
  margin-bottom: 14px !important;
}
.section-desc {
  font-size: 15px !important;
  color: var(--text-3) !important;
  line-height: 1.7 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}

/* ══════════════════════════════════════
   FREE SECTION — Ứng dụng miễn phí
══════════════════════════════════════ */
.free-section {
  background: var(--bg-2) !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(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.free-card-badge {
  background: var(--green-light) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,168,84,0.2) !important;
}
.btn-free-use {
  background: var(--green) !important;
  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: #008C47 !important;
  transform: translateY(-1px) !important;
}
.free-loading { color: var(--text-3) !important; }
.free-spinner {
  border-color: var(--border-2) !important;
  border-top-color: var(--blue) !important;
}

/* Modal xem thử */
.free-modal-overlay { background: rgba(26,26,46,0.6) !important; }
.free-modal-box {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.free-modal-header {
  background: var(--bg-2) !important;
  border-bottom: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.free-modal-title { color: var(--text-1) !important; font-weight: 700 !important; }
.free-modal-close {
  background: var(--border) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
}
.free-modal-close:hover { background: var(--red-light) !important; color: var(--red) !important; }
.free-modal-badge {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(232,25,44,0.2) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
}

/* ══════════════════════════════════════
   PLATFORMS — Một file ba nền tảng
══════════════════════════════════════ */
.platforms-section { background: var(--bg-white) !important; }
.platform-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
.platform-card {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px 24px !important;
  text-align: center !important;
  transition: all var(--tm) !important;
  box-shadow: var(--shadow-sm) !important;
}
.platform-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
  background: var(--bg-white) !important;
}
.platform-icon {
  width: 60px !important;
  height: 60px !important;
  background: var(--blue-light) !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  color: var(--blue) !important;
}
.platform-badge {
  background: var(--green-light) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,168,84,0.2) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
}
.platform-name {
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--text-1) !important;
  margin-bottom: 10px !important;
}
.platform-desc {
  font-size: 13.5px !important;
  color: var(--text-3) !important;
  line-height: 1.65 !important;
  margin-bottom: 14px !important;
}
.platform-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
.platform-tags span {
  background: var(--bg-white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  font-weight: 600 !important;
}
.platform-note {
  background: var(--blue-light) !important;
  color: var(--blue-dark) !important;
  border: 1px solid rgba(232,25,44,0.2) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 18px !important;
  margin-top: 24px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.platform-note svg { color: var(--blue) !important; flex-shrink: 0 !important; }

/* ══════════════════════════════════════
   PRODUCTS — Kho ứng dụng
══════════════════════════════════════ */
.products-section { background: var(--bg) !important; }
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}
.product-card {
  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;
  position: relative !important;
}
.product-card::before { display: none !important; }
.product-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.product-card .product-img-wrap,
.product-card .product-thumb {
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
}
.product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--tm) !important;
}
.product-card:hover img { transform: scale(1.04) !important; }

.product-card .product-body { padding: 16px 18px !important; }
.product-card .product-title,
.product-card h3 {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--text-1) !important;
  margin-bottom: 7px !important;
  line-height: 1.35 !important;
}
.product-card .product-desc,
.product-card p {
  font-size: 13px !important;
  color: var(--text-3) !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}
.product-card .product-price,
.product-card .price {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--red) !important;
}
.product-card .price-old {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  text-decoration: line-through !important;
}
.product-card .price-badge {
  background: var(--red-light) !important;
  color: var(--red) !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
}
.product-card .btn-buy,
.product-card .buy-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
  width: 100% !important;
  font-size: 14px !important;
}
.product-card .btn-buy:hover,
.product-card .buy-btn:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-blue) !important;
}
.product-card .btn-demo {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
  font-size: 13px !important;
}
.product-card .btn-demo:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}
.product-card .rating {
  color: var(--gold) !important;
  font-weight: 700 !important;
}
.product-card .product-tag,
.product-card .tag {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border-radius: var(--r-xs) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}
.product-badge-hot {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  letter-spacing: 0.5px !important;
}
.product-badge-new {
  background: var(--green) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
}

/* ══════════════════════════════════════
   DEMO — Khu vực demo
══════════════════════════════════════ */
.demo-section { background: var(--bg-2) !important; }
.demo-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
.demo-card {
  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;
}
.demo-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.demo-thumb-wrap { position: relative !important; overflow: hidden !important; }
.demo-play-overlay {
  background: rgba(232,25,44,0.85) !important;
}
.demo-play-btn {
  background: #fff !important;
  color: var(--blue) !important;
}
.demo-title { color: var(--text-1) !important; font-weight: 700 !important; font-size: 15px !important; }
.demo-desc { color: var(--text-3) !important; font-size: 13px !important; }
.btn-open-demo {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
  font-size: 13.5px !important;
}
.btn-open-demo:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════
   WHY US — Tại sao chọn chúng tôi
══════════════════════════════════════ */
.why-section { background: var(--bg-white) !important; }
.why-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}
.why-card,
.feature-card {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  transition: all var(--tm) !important;
  position: relative !important;
  overflow: hidden !important;
}
.why-card::before,
.feature-card::before { display: none !important; }
.why-card:hover,
.feature-card:hover {
  border-color: var(--blue) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-blue) !important;
  background: var(--bg-white) !important;
}
.why-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.feature-title,
.why-card strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-1) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.why-card p,
.feature-card p {
  font-size: 13.5px !important;
  color: var(--text-3) !important;
  line-height: 1.65 !important;
}

/* ══════════════════════════════════════
   REVIEWS — Đánh giá khách hàng
══════════════════════════════════════ */
.reviews-section { background: var(--bg) !important; }
.reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
}
.review-card {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--tm) !important;
}
.review-card:hover {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.review-stars { color: var(--gold) !important; }
.review-text { color: var(--text-2) !important; font-size: 13.5px !important; line-height: 1.65 !important; }
.review-author { color: var(--text-1) !important; font-weight: 700 !important; }
.review-meta { color: var(--text-muted) !important; font-size: 12px !important; }
.review-avatar {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════
   FAQ — Câu hỏi thường gặp
══════════════════════════════════════ */
.faq-section { background: var(--bg-2) !important; }
.faq-list {
  max-width: 720px !important;
  margin: 0 auto !important;
}
.faq-item {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all var(--tf) !important;
  box-shadow: var(--shadow-sm) !important;
}
.faq-item:hover { border-color: var(--border-2) !important; }
.faq-item[open] {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.faq-q {
  padding: 17px 20px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  transition: color var(--tf) !important;
}
.faq-q::-webkit-details-marker { display: none !important; }
.faq-q::after {
  content: '+' !important;
  font-size: 20px !important;
  color: var(--blue) !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  font-weight: 400 !important;
}
.faq-item[open] .faq-q {
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}
.faq-item[open] .faq-q::after { content: '−' !important; }
.faq-a {
  padding: 0 20px 18px !important;
  font-size: 14px !important;
  color: var(--text-2) !important;
  line-height: 1.75 !important;
}

/* ══════════════════════════════════════
   CONTACT / SOCIAL
══════════════════════════════════════ */
.contact-section { background: var(--bg-white) !important; }
.social-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
.social-card {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all var(--tm) !important;
  box-shadow: var(--shadow-sm) !important;
}
.social-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
.social-card--fb:hover { border-color: #E8192C !important; background: #FFF5F7 !important; }
.social-card--tt:hover { border-color: #000 !important; background: #F5F5F5 !important; }
.social-card--yt:hover { border-color: #FF0000 !important; background: #FFF5F5 !important; }
.social-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.social-card--fb .social-icon-wrap { background: #FFF0F1 !important; color: #E8192C !important; }
.social-card--tt .social-icon-wrap { background: #F0F0F0 !important; color: #000 !important; }
.social-card--yt .social-icon-wrap { background: #FFF0F0 !important; color: #FF0000 !important; }
.social-name { font-weight: 800 !important; font-size: 15px !important; color: var(--text-1) !important; display: block !important; }
.social-sub { font-size: 12px !important; color: var(--text-muted) !important; display: block !important; margin-top: 2px !important; }
.social-arrow { color: var(--text-muted) !important; margin-left: auto !important; }

/* ══════════════════════════════════════
   CART SIDEBAR
══════════════════════════════════════ */
.cart-overlay { background: rgba(26,26,46,0.5) !important; }
.cart-sidebar {
  background: var(--bg-white) !important;
  border-left: 1.5px solid var(--border) !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
}
.cart-header {
  background: var(--bg-2) !important;
  border-bottom: 1.5px solid var(--border) !important;
}
.cart-title { color: var(--text-1) !important; font-weight: 800 !important; }
.cart-heading { color: var(--text-1) !important; font-weight: 800 !important; }
.cart-close-btn { color: var(--text-2) !important; }
.cart-close-btn:hover { color: var(--red) !important; background: var(--red-light) !important; }
.cart-item {
  border-bottom: 1px solid var(--border) !important;
}
.cart-item-name { color: var(--text-1) !important; font-weight: 700 !important; font-size: 14px !important; }
.cart-item-price { color: var(--red) !important; font-weight: 800 !important; }
.cart-remove { color: var(--text-muted) !important; }
.cart-remove:hover { color: var(--red) !important; }
.cart-empty { color: var(--text-muted) !important; }
.cart-footer {
  background: var(--bg-2) !important;
  border-top: 1.5px solid var(--border) !important;
}
.cart-total-row span { color: var(--text-2) !important; font-weight: 600 !important; }
.cart-total-row strong { color: var(--text-1) !important; font-weight: 900 !important; font-size: 18px !important; }
.cart-checkout-btn,
#cart-checkout-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
  font-size: 15px !important;
}
.cart-checkout-btn:hover,
#cart-checkout-btn:hover {
  background: var(--blue-dark) !important;
}

/* ══════════════════════════════════════
   POPUPS — Modal chi tiết sản phẩm
══════════════════════════════════════ */
.popup-overlay {
  background: rgba(26,26,46,0.55) !important;
}
.popup-content {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-2) !important;
}
.close-btn {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  font-size: 22px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
}
.close-btn:hover { background: var(--red-light) !important; color: var(--red) !important; }
.popup-title { color: var(--text-1) !important; font-weight: 800 !important; }
.payment-header {
  background: var(--bg-2) !important;
  border-bottom: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.payment-qr-section { padding: 24px !important; }
.qr-code-image {
  border: 3px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  display: block !important;
  margin: 0 auto !important;
}
.payment-details { margin-top: 16px !important; }
.payment-details p { color: var(--text-2) !important; font-size: 14px !important; line-height: 1.7 !important; }
.payment-details strong { color: var(--text-1) !important; }

/* ══════════════════════════════════════
   PRODUCT DETAIL POPUP
══════════════════════════════════════ */
.product-detail-content h2,
.product-detail-content h3 { color: var(--text-1) !important; font-weight: 800 !important; }
.product-detail-content p { color: var(--text-2) !important; font-size: 14px !important; }
.product-detail-content .price { color: var(--red) !important; font-weight: 900 !important; }
.product-detail-content .btn-buy {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  padding: 13px 24px !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
}
.product-detail-content .btn-buy:hover { background: var(--blue-dark) !important; }
.product-detail-content ul li { color: var(--text-2) !important; font-size: 14px !important; }
.product-detail-content ul li::before { color: var(--blue) !important; }
.feature-list li::before,
.feature-list li .check { color: var(--blue) !important; }

/* ══════════════════════════════════════
   TICKER MODAL ADMIN
══════════════════════════════════════ */
.ticker-modal-overlay { background: rgba(26,26,46,0.6) !important; }
.ticker-modal {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ticker-modal-header {
  background: var(--bg-2) !important;
  border-bottom: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.ticker-modal-title { color: var(--text-1) !important; font-weight: 800 !important; }
.ticker-modal-close {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
}
.ticker-modal-close:hover { background: var(--red-light) !important; color: var(--red) !important; }
.ticker-modal-body { padding: 20px 24px !important; }
.ticker-form-label { color: var(--text-1) !important; font-weight: 700 !important; font-size: 13px !important; }
.ticker-form-input, .ticker-form-select, .ticker-form-textarea {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-sm) !important;
}
.ticker-form-input:focus, .ticker-form-select:focus { border-color: var(--blue) !important; outline: none !important; }
.ticker-btn-save {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
}
.ticker-btn-save:hover { background: var(--blue-dark) !important; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.main-footer {
  background: var(--text-1) !important;
  border-top: none !important;
  padding: 56px 0 28px !important;
}
.footer-col h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 14px !important;
}
.footer-nav a {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.65) !important;
  transition: color var(--tf) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.footer-nav a:hover { color: #fff !important; }
.footer-logo .logo-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.footer-logo .logo-tag { color: rgba(255,255,255,0.4) !important; }
.footer-desc { color: rgba(255,255,255,0.5) !important; font-size: 13px !important; line-height: 1.7 !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-top: 36px !important;
  padding-top: 20px !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 12.5px !important;
}
.footer-social a {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: var(--r-sm) !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--tf) !important;
}
.footer-social a:hover {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════
   ADSENSE BLOCKS
══════════════════════════════════════ */
.tt-ad-block {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════
   LUCKY WHEEL
══════════════════════════════════════ */
.wheel-overlay { background: rgba(26,26,46,0.7) !important; }
.wheel-modal {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-2xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.wheel-title { color: var(--text-1) !important; font-weight: 900 !important; }
.spin-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-xl) !important;
  font-weight: 800 !important;
}
.spin-btn:hover { background: var(--blue-dark) !important; }
.wheel-prize { color: var(--text-1) !important; }
.wheel-prize strong { color: var(--blue) !important; }

/* ══════════════════════════════════════
   CHATBOT
══════════════════════════════════════ */
.chatbot-toggle-btn {
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: var(--shadow-blue) !important;
  border: none !important;
}
.chatbot-toggle-btn:hover { background: var(--blue-dark) !important; }
.chatbot-window {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.chatbot-header {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.chatbot-header h3 { color: #fff !important; font-weight: 800 !important; }
.chatbot-header .chatbot-status { color: rgba(255,255,255,0.8) !important; }
.chatbot-body { background: var(--bg-2) !important; }
.chatbot-bubble-bot {
  background: var(--bg-white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg) !important;
}
.chatbot-bubble-user {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg) !important;
}
.chatbot-footer {
  background: var(--bg-white) !important;
  border-top: 1.5px solid var(--border) !important;
}
.chatbot-input {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
}
.chatbot-input:focus { border-color: var(--blue) !important; outline: none !important; }
.chatbot-send-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
}
.chatbot-send-btn:hover { background: var(--blue-dark) !important; }
.chatbot-quick-reply {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(232,25,44,0.2) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.chatbot-quick-reply:hover {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════
   PUSH NOTIFICATION
══════════════════════════════════════ */
.push-popup {
  background: var(--bg-white) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.push-popup-title { color: var(--text-1) !important; font-weight: 800 !important; }
.push-popup-desc { color: var(--text-3) !important; font-size: 13px !important; }
.push-allow {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
}
.push-deny {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

/* ══════════════════════════════════════
   SECTIONS NỀN XEN KẼ
══════════════════════════════════════ */
.free-section,
.demo-section,
.reviews-section,
.faq-section { background: var(--bg-2) !important; }

.platforms-section,
.why-section,
.contact-section,
.products-section { background: var(--bg-white) !important; }

/* ══════════════════════════════════════
   VIBECODIN ACADEMY (hoc-tao-app)
══════════════════════════════════════ */
.vc-section { background: var(--bg) !important; }
.vc-section-header h2 { color: var(--text-1) !important; }
.vc-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;
}
.vc-card:hover {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* ══════════════════════════════════════
   FORMS & INPUTS CHUNG
══════════════════════════════════════ */
input, textarea, select {
  background: var(--bg-2) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(232,25,44,0.12) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* ══════════════════════════════════════
   NỀN SOCIAL PROOF STRIP
══════════════════════════════════════ */
div[style*="background:#0f0f18"],
div[style*="background: #0f0f18"] {
  background: var(--bg-2) !important;
  border-top: 1.5px solid var(--border) !important;
  border-bottom: 1.5px solid var(--border) !important;
}
div[style*="background:#0f0f18"] > div,
div[style*="background: #0f0f18"] > div {
  border-color: var(--border) !important;
}
div[style*="color:#E8192C"],
div[style*="color: #E8192C"] {
  color: var(--blue) !important;
}
div[style*="color:#F0F0F5"],
div[style*="color: #F0F0F5"] {
  color: var(--text-1) !important;
}
div[style*="color:rgba(255,255,255,0.40)"],
div[style*="color: rgba(255,255,255,0.40)"] {
  color: var(--text-muted) !important;
}
div[style*="color:#F5A623"] { color: var(--gold) !important; }

/* ══════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-section { padding: 80px 0 56px !important; }
  .hero-title { font-size: 30px !important; letter-spacing: -0.8px !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; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; justify-content: center !important; }
  .product-grid, .free-grid, .demo-grid, .why-grid, .reviews-grid {
    grid-template-columns: 1fr !important;
  }
  .trust-row { gap: 6px !important; }
  .trust-item { font-size: 12px !important; padding: 5px 10px !important; }
  .platform-grid { grid-template-columns: 1fr !important; }
  .social-grid { grid-template-columns: 1fr !important; }
  .main-header { height: 56px !important; }
  .hero-slogan { font-size: 14px !important; }
}

@media (max-width: 480px) {
  .container { padding: 0 14px !important; }
  .hero-title { font-size: 26px !important; }
  .hero-badge { font-size: 11px !important; }
  .stat strong { font-size: 18px !important; }
}

/* ══════════════════════════════════════
   TINH CHỈNH CHO VIỆT NAM
══════════════════════════════════════ */

/* Nút CTA chính — nổi bật, dễ bấm */
.btn, button[class*="btn-"] {
  cursor: pointer !important;
  transition: all var(--tf) !important;
}

/* Giá tiền — màu đỏ như các sàn VN */
[class*="price"]:not(.price-old):not(.price-badge) { color: var(--red) !important; }

/* Badge giảm giá */
.badge-sale, .discount-badge {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* Highlight quan trọng */
strong, b { color: var(--text-1) !important; }
code {
  background: var(--blue-light) !important;
  color: var(--blue-dark) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
}

/* Reveal animation — nhẹ nhàng */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════
   DARK MODE OVERRIDE CŨ — Reset
══════════════════════════════════════ */
/* Bỏ tất cả gradient tối cũ */
body { text-shadow: none !important; }
.hero-section .hero-bg::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   BUG FIX v2 — Đúng class thực tế từ app.js (obfuscated)
   HTML thực: product-card glassmorphism > img.product-image
              > h3.product-name > p.product-description
              > p.product-price > div.product-actions
                > button.btn.btn-detail | button.btn.btn-buy
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1A: glassmorphism override ── */
.product-card.glassmorphism {
  background: var(--bg-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── FIX 1B: img.product-image — giới hạn chiều cao ── */
.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;
  transition: transform var(--tm) !important;
}
.product-card:hover img.product-image { transform: scale(1.04) !important; }

/* ── FIX 1C: Padding cho content trực tiếp trong card (không có wrapper) ── */
.product-card h3.product-name,
.product-card p.product-description,
.product-card p.product-price,
.product-card .product-actions {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ── FIX 1D: h3.product-name ── */
.product-card h3.product-name {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--text-1) !important;
  margin: 14px 0 6px !important;
  line-height: 1.35 !important;
  display: block !important;
}

/* ── FIX 1E: p.product-description ── */
.product-card p.product-description {
  font-size: 13px !important;
  color: var(--text-3) !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* ── FIX 1F: p.product-price ── */
.product-card p.product-price {
  font-weight: 900 !important;
  font-size: 20px !important;
  color: var(--red) !important;
  margin: 0 0 12px !important;
  display: block !important;
}

/* ── FIX 1G: .product-actions layout ── */
.product-card .product-actions {
  display: flex !important;
  gap: 8px !important;
  padding-bottom: 16px !important;
  margin-top: 0 !important;
}

/* ── FIX 1H: .btn-detail (class thực từ app.js, KHÔNG phải btn-info hay btn-demo) ── */
.product-card .btn-detail,
#product-grid .product-card .btn-detail {
  flex: 1 !important;
  background: var(--bg-2) !important;
  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;
  transition: all var(--tf) !important;
  display: block !important;
}
.product-card .btn-detail:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-light) !important;
}

/* ── FIX 1I: .btn-buy trong light theme ── */
.product-card .btn-buy,
#product-grid .product-card .btn-buy {
  flex: 1.3 !important;
  background: var(--blue) !important;
  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;
  transition: all var(--tf) !important;
  display: block !important;
}
.product-card .btn-buy:hover {
  background: var(--blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* ── FIX 2: FAQ — summary element default color bị mờ ── */
details.faq-item > summary.faq-q,
.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;
}

.faq-section,
#faq.faq-section {
  background: var(--bg-2) !important;
}

.faq-item {
  background: var(--bg-white) !important;
}

.faq-section .section-title,
#faq .section-title {
  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;
}

/* ── FIX 3: Contact heading rõ ràng ── */
#contact .section-title,
.contact-section .section-title {
  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;
}

/* ══════════════════════════════════════════════════════
   FIX: Free Product Card — override dark theme remnants
   Ensure stat-num, badge, banner match light red theme
══════════════════════════════════════════════════════ */
.free-product-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;
}
.free-product-card:hover {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}
.free-card-banner {
  background: linear-gradient(135deg, #FFF0F1 0%, #FFE4E6 100%) !important;
  border-bottom: 1px solid rgba(232,25,44,0.12) !important;
}
.free-badge-pill {
  background: rgba(232,25,44,0.10) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(232,25,44,0.25) !important;
}
.free-product-card .stat-num {
  color: var(--blue) !important;
  font-weight: 800 !important;
}
.free-product-card .product-stat {
  color: var(--text-3) !important;
}
.free-product-card .product-stat svg {
  color: var(--text-3) !important;
}
.free-product-card .product-name {
  color: var(--text-1) !important;
}
.free-product-card .product-card-body-wrap {
  background: transparent !important;
}
.free-product-card .btn-guide-free {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  border: 1.5px solid var(--border-2) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
}
.free-product-card .btn-guide-free:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}
.free-product-card .btn-free-use,
.free-product-card .btn-use-free {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
}
.free-product-card .btn-free-use:hover,
.free-product-card .btn-use-free:hover {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue)) !important;
  transform: translateY(-1px) !important;
}
/* stat-sep on white bg */
.free-product-card .stat-sep {
  background: var(--border) !important;
}

/* ══════════════════════════════════════
   FIX: Paid product card stat-num color
══════════════════════════════════════ */
.product-card .stat-num {
  color: var(--blue) !important;
}
.product-card .product-stat {
  color: var(--text-3) !important;
}
.product-card .stat-sep {
  background: var(--border) !important;
}

/* ══════════════════════════════════════
   FIX: Platform card — exe/apk colors
   Override dark theme purple/green remnants
══════════════════════════════════════ */
.platform-exe::before,
.platform-apk::before { background: var(--blue) !important; }

.platform-exe .platform-icon,
.platform-apk .platform-icon {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.platform-exe .platform-badge,
.platform-apk .platform-badge {
  color: var(--blue) !important;
}
.platform-web .platform-icon {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.platform-web .platform-badge {
  color: var(--blue) !important;
}

/* ══════════════════════════════════════
   FIX: free-card-banner strong tag
   Badge pill in free section
══════════════════════════════════════ */
.free-badge-pill {
  background: rgba(232,25,44,0.12) !important;
  color: var(--blue) !important;
  border-color: rgba(232,25,44,0.25) !important;
}

/* ══════════════════════════════════════
   FIX: vc-tag colors (course modules)
══════════════════════════════════════ */
.vc-tag-green { background: rgba(0,168,84,0.12) !important; color: #00A854 !important; }
.vc-tag-cyan  { background: rgba(232,25,44,0.10) !important; color: var(--blue) !important; }

/* ══════════════════════════════════════
   FIX: theme-unified.css overrides
   btn-free-use → red, free-card hover → red
══════════════════════════════════════ */
.btn-free-use,
.btn-use-free,
.free-product-card .btn-free-use,
.free-product-card .btn-use-free {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all var(--tf) !important;
}
.btn-free-use:hover,
.btn-use-free:hover {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue)) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-blue) !important;
}
.free-card:hover,
.free-product-card:hover {
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* ══════════════════════════════════════
   FIX: tt-toast success → green OK (keep)
   but tt-toast info → red
══════════════════════════════════════ */
.tt-toast--info {
  border-color: rgba(232,25,44,0.4) !important;
  background: rgba(232,25,44,0.08) !important;
  color: var(--blue) !important;
}