/* ==========================================================================
   1. KHAI BÁO FONT LOCAL (CHUẨN TỐI ƯU SIÊU TỐC ĐỘ GỐC CỦA BẠN)
   ========================================================================== */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/orbitron-v35-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0102-0103, U+0110-0111, U+0128-0129, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+02EA-02EB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-grotesk-v22-vietnamese-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0102-0103, U+0110-0111, U+0128-0129, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+02EA-02EB;
}

/* ==========================================================================
   2. KHÓA CỨNG HỆ THỐNG MÀU LUMIZEN (CHỐNG GHI ĐÈ TỪ BOOTSTRAP & THEME)
   ========================================================================== */
:root, [data-theme="dark"], [data-theme="light"], .dark, .light {
  /* Màu gốc Lumizen */
  --space-black: #111827;
  --light-cyan: #00E5FF;
  --pearl-white: #FBFBF9;
  --gray-light: #F3F4F6;
  --gray-dark: #1F2937;
  
  /* 1. Khóa toàn bộ biến màu của Hugo Profile (Cho cả 2 chế độ Sáng/Tối) */
  --background-color: var(--space-black) !important;
  --background-color-dark: var(--space-black) !important;
  --secondary-background-color: var(--gray-dark) !important;
  --secondary-background-color-dark: var(--gray-dark) !important;
  --primary-color: var(--light-cyan) !important;
  --primary-color-dark: var(--light-cyan) !important;
  --text-link-color: var(--light-cyan) !important;
  --text-link-color-dark: var(--light-cyan) !important;
  --text-color: var(--pearl-white) !important;
  --text-color-dark: var(--pearl-white) !important;
  --text-secondary-color: var(--gray-light) !important;
  --text-secondary-color-dark: var(--gray-light) !important;

  /* 2. Khóa biến lõi của Bootstrap 5 (Để đồng bộ Nav, Card, Button, Background) */
  --bs-body-bg: var(--space-black) !important;
  --bs-body-color: var(--pearl-white) !important;
  --bs-primary: var(--light-cyan) !important;
  --bs-link-color: var(--light-cyan) !important;
  --bs-link-hover-color: var(--pearl-white) !important;
}

/* Khóa nền đen không gian tuyệt đối cho toàn bộ khung trang web */
html, body, main, #content, #single, .bg-dark, .navbar, .page-content, .entry-content { 
  background-color: var(--space-black) !important; 
  color: var(--pearl-white) !important;
}

/* Ép màu Cyan cho các class màu đặc thù của theme */
.text-primary, .text-link, .text-cyan {
  color: var(--light-cyan) !important;
}

/* ==========================================================================
   3. KHÓA CỨNG TYPOGRAPHY (CHỐNG LỖI MẤT FONT TRÊN CÁC CLASS THEME)
   ========================================================================== */
/* Ép toàn bộ chữ 본 văn, danh sách, thẻ, menu dùng Space Grotesk */
body, p, span, li, time, a, .secondary-font, #secondary-font, .default-font, #default-font, .toc-content, .meta { 
  font-family: 'Space Grotesk', sans-serif !important; 
  line-height: 1.75 !important;
  letter-spacing: -0.01em !important;
}

p { 
  margin-bottom: 1.25rem !important; 
  color: rgba(251, 251, 249, 0.9) !important; /* Độ sáng 90% dịu mắt khi đọc */
}

.text-secondary, .meta, small, time, .toc-content, .tags-ul { 
  color: var(--gray-light) !important; 
  opacity: 0.8 !important;
}

/* Ép toàn bộ Tiêu đề, Logo, Nút bấm, class đặc thù dùng Orbitron */
.primary-font, #primary-font, h1, h2, h3, h4, h5, h6, .title, .card-title, .navbar-brand, .btn-primary, button, input[type="submit"], .widget-title, .toc-title { 
  font-family: 'Orbitron', sans-serif !important; 
  font-weight: 700 !important; 
  letter-spacing: 0.04em !important; 
  text-transform: uppercase !important; 
  color: var(--pearl-white) !important;
  line-height: 1.35 !important;
}

/* Phân cấp nội dung bài viết sang trọng */
.content h2, main h2, .entry-content h2 {
  margin-bottom: 1rem !important;
  font-size: 1.4rem !important;
  border-bottom: 1px solid rgba(251, 251, 249, 0.1) !important;
  padding-bottom: 0.4rem !important;
}

.content h3, main h3, .entry-content h3 {
  margin-top: 1.8rem !important;
  margin-bottom: 0.8rem !important;
  font-size: 1.1rem !important;
  color: var(--light-cyan) !important;
}

code { 
  background-color: var(--gray-dark) !important; 
  color: var(--light-cyan) !important; 
  padding: 0.2em 0.4em !important; 
  border-radius: 3px !important; 
  font-size: 0.85em !important;
  font-family: monospace !important;
}

/* ==========================================================================
   4. HỆ THỐNG DANH SÁCH & ĐIỂM NHẤN TỪ KHÓA (GỌN NHẸ - SẮC BÉN)
   ========================================================================== */
.content ul, main ul, .entry-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.5rem 0 1.5rem !important;
}

.content li, main li, .entry-content li {
  position: relative !important;
  padding-left: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* Gạch đầu dòng mảnh Cyan */
.content ul li::before, main ul li::before, .entry-content ul li::before {
  content: "—" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--light-cyan) !important;
  opacity: 0.7 !important;
}

.widget ul, .tags-ul, #TableOfContents ul { 
  list-style: none !important; 
  padding-left: 0 !important; 
}

/* Tự động chuyển màu Cyan cho từ khóa in đậm trong danh sách */
strong, b { 
  color: var(--pearl-white) !important; 
  font-weight: 600 !important; 
}
.content li strong, main li strong, .entry-content li strong { 
  color: var(--light-cyan) !important; 
}

/* ==========================================================================
   5. LIÊN KẾT & NÚT BẤM (ANIMATION HIỆU NĂNG CAO - 60 FPS)
   ========================================================================== */
a { 
  color: var(--light-cyan) !important; 
  text-decoration: none !important; 
  transition: color 0.15s ease !important;
}

a:hover, .content a:hover, main a:hover { 
  color: var(--pearl-white) !important; 
  text-decoration: underline !important; 
  text-underline-offset: 4px !important;
}

.navbar-brand { 
  font-size: 1.7rem !important;  
}

.btn-primary, button, input[type="submit"] { 
  background-color: transparent !important; 
  border: 1px solid var(--light-cyan) !important; 
  color: var(--light-cyan) !important; 
  letter-spacing: 1px !important;
  padding: 8px 20px !important; 
  font-size: 0.8rem !important;
  border-radius: 2px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.btn-primary:hover, button:hover { 
  background-color: var(--light-cyan) !important; 
  color: var(--space-black) !important; 
  cursor: pointer !important; 
}

/* ==========================================================================
   6. CARDS & SIDEBAR (TỐI GIẢN - KHÔNG HỘP XÁM NẶNG NỀ)
   ========================================================================== */
.card { 
  border: none !important; 
  background: transparent !important; 
}
.card-title { 
  font-size: 1.05rem !important; 
  margin-bottom: 0.5rem !important; 
}

.widget-title, .toc-title {
  font-size: 0.85rem !important;
  color: var(--light-cyan) !important;
  margin-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(251, 251, 249, 0.08) !important;
  padding-bottom: 0.4rem !important;
}

/* Thẻ tag tối giản */
.tags-ul li a {
  display: inline-block !important;
  border: 1px solid rgba(251, 251, 249, 0.15) !important;
  color: rgba(251, 251, 249, 0.8) !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  font-size: 0.78rem !important;
}

.tags-ul li a:hover {
  border-color: var(--light-cyan) !important;
  color: var(--light-cyan) !important;
}
#hero {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}