/*
Theme Name: JBO CEO - Cổng Bảo Trợ Hội Viên & Link Vào JBO Chính Thức
Theme URI: https://jboceo.com/
Author: JBO CEO Executive Team
Author URI: https://jboceo.com/
Description: Theme WordPress độc quyền dành riêng cho JBOCEO.COM - Kênh bảo trợ quyền lợi hội viên, điều phối đường truyền link gốc thời gian thực và tiếng nói trực tiếp từ Ban Điều Hành JBO Châu Á. Tối ưu chuẩn SEO Onpage Google 2026, Mô hình 2 Tầng Siêu Tinh Gọn (Ultra-Flat 2-Tier Silo), tốc độ tải trang Core Web Vitals < 1.2s, tích hợp Real-Time Link Gateway chống chặn, Persona CEO E-E-A-T Schema Graph 2026, Breadcrumbs, Mục lục TOC và Mobile Bottom Floating Bar.
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jbo-theme
Tags: esports, gaming, sports-betting, affiliate, dark-mode, responsive-layout, seo-optimized, fast-loading, jbo-ceo
*/

/* ========================================================
   CSS VARIABLES & GLOBAL DESIGN TOKENS
   ======================================================== */
:root {
  --bg-body: #080c14;
  --bg-card: #0f1726;
  --bg-card-hover: #162238;
  --bg-header: rgba(8, 12, 20, 0.96);
  --primary: #00FF66; /* JBO Signature Neon Green */
  --primary-glow: rgba(0, 255, 102, 0.35);
  --primary-dark: #00b347;
  --accent-cyan: #00E5FF;
  --accent-gold: #FFD700;
  --accent-red: #FF3366;
  --text-main: #f0f4f8;
  --text-muted: #8b9bb4;
  --border-glow: 1px solid rgba(0, 255, 102, 0.2);
  --font-heading: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sub: 'Be Vietnam Pro', sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --max-width: 1400px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  background-color: var(--bg-body);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-main);
  background-color: var(--bg-body);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(0, 255, 102, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(0, 229, 255, 0.04) 0%, transparent 45%);
  background-attachment: fixed;
  overflow-x: hidden;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}

a:hover {
  color: var(--primary);
}

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Base Typography */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #00FF66 0%, #00cc52 100%);
  color: #05080e;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0, 255, 102, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #26ff7d 0%, #00e65c 100%);
  box-shadow: 0 6px 22px rgba(0, 255, 102, 0.6);
  transform: translateY(-2px);
  color: #000;
}

.btn-outline {
  background: transparent;
  color: #e0e8f5;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.2);
}

/* Layout Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }