/**
 * Soi Cầu 247s.org UI Design System - Optimized Version
 * Áp dụng giao diện từ soicau247s.org vào soicau247.com
 * 
 * Features:
 * - Màu sắc chính xác từ soicau247s.org
 * - Timing animations tối ưu với cubic-bezier
 * - Breakpoints đầy đủ cho mọi screen sizes
 * - Performance optimization với GPU acceleration
 */

/* ============================================
   COLOR SYSTEM - Màu sắc chính xác từ soicau247s.org
   ============================================ */

:root {
  /* Primary Colors - Extract từ soicau247s.org */
  --sc-blue1: #004593;        /* Header, Footer, Links chính */
  --sc-blue2: #f0f8ff;        /* Background sections nhẹ */
  --sc-blue3: #007bff;         /* Blue accent */
  --sc-blue4: #0056b3;         /* Blue darker */
  --sc-blue-gray: #81A7B8;     /* Blue-gray từ website */
  
  /* Red Colors - Phân cấp màu đỏ */
  --sc-red1: #ed1c24;           /* Primary red - buttons, links hover */
  --sc-red2: #004593;          /* Darker red - headers, active states */
  --sc-red3: #d0021b;          /* Red hover state */
  --sc-red4: #a00304;          /* Red darkest */
  
  /* Orange/Accent Colors */
  --sc-orange: #ff7a00;        /* Orange accent từ website */
  --sc-orange-light: #ffa64d;  /* Light orange */
  --sc-orange-dark: #e66a00;   /* Dark orange */
  
  /* Text Colors - Hệ thống màu chữ */
  --sc-text-black1: #1d1d1d;   /* Primary text */
  --sc-text-black2: #3e3f42;   /* Secondary text */
  --sc-text-black3: #333333;   /* Tertiary text */
  --sc-text-black4: #000000;   /* Pure black */
  --sc-text-gray1: #6c757d;    /* Gray text */
  --sc-text-gray2: #868e96;    /* Light gray text */
  
  /* Background Colors */
  --sc-bg-white: #ffffff;
  --sc-bg-gray1: #f5f5f5;
  --sc-bg-gray2: #e9ecef;
  --sc-bg-yellow: #FFFFFF;      /* Section headers highlight */
  --sc-bg-blue-light: #e7f3ff;  /* Light blue background */
  
  /* Border Colors */
  --sc-border-gray: #dee2e6;
  --sc-border-dark: #dddfe2;
  --sc-border-light: #e9ecef;
  
  /* Shadow Colors */
  --sc-shadow-sm: rgba(0, 0, 0, 0.05);
  --sc-shadow-md: rgba(0, 0, 0, 0.1);
  --sc-shadow-lg: rgba(0, 0, 0, 0.15);
  --sc-shadow-xl: rgba(0, 0, 0, 0.2);
  
  /* Optimized Transition Timing - Cubic Bezier cho smooth hơn */
  --sc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);        /* Material Design standard */
  --sc-ease-out: cubic-bezier(0.0, 0, 0.2, 1);          /* Fast out */
  --sc-ease-in: cubic-bezier(0.4, 0, 1, 1);            /* Fast in */
  --sc-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth ease */
  
  /* Timing Durations - Tối ưu cho performance */
  --sc-duration-instant: 100ms;    /* Instant feedback */
  --sc-duration-fast: 150ms;      /* Fast interactions */
  --sc-duration-normal: 250ms;    /* Standard transitions */
  --sc-duration-slow: 400ms;       /* Slow animations */
  --sc-duration-slower: 600ms;     /* Very slow animations */
  
  /* Transition Presets */
  --sc-transition-fast: var(--sc-duration-fast) var(--sc-ease-out);
  --sc-transition-normal: var(--sc-duration-normal) var(--sc-ease-in-out);
  --sc-transition-slow: var(--sc-duration-slow) var(--sc-ease-smooth);
  
  /* Spacing Scale */
  --sc-spacing-xs: 4px;
  --sc-spacing-sm: 8px;
  --sc-spacing-md: 12px;
  --sc-spacing-lg: 16px;
  --sc-spacing-xl: 20px;
  --sc-spacing-2xl: 24px;
  --sc-spacing-3xl: 30px;
  --sc-spacing-4xl: 40px;
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

/* GPU Acceleration - Chỉ apply cho elements cần animation */
.animate-element,
body .header,
body .nav_header,
body .menu_a,
body .nav-link,
body .btn,
body .table-result tr,
body .aside-news li {
  will-change: transform, opacity, background-color;
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden; /* Prevent flickering */
  perspective: 1000px; /* 3D context */
}

/* Disable animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   GLOBAL TRANSITIONS - Optimized
   ============================================ */

/* Selective transitions - Chỉ apply cho properties cần thiết */
a, button, .btn, .nav-link, .menu_a {
  transition: color var(--sc-transition-fast),
              background-color var(--sc-transition-fast),
              border-color var(--sc-transition-fast),
              transform var(--sc-transition-normal),
              box-shadow var(--sc-transition-fast) !important;
}

/* Smooth scroll - Chỉ khi cần */
html {
  scroll-behavior: smooth !important;
}

/* ============================================
   ANIMATIONS - Optimized với GPU acceleration
   ============================================ */

/* Fade in animation - Optimized */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0); /* GPU acceleration */
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Slide in animation - Optimized */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Pulse animation - Optimized cho special numbers */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

/* Fade in up - For content sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Scale in - For buttons */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* ============================================
   TYPOGRAPHY - Enhanced
   ============================================ */

html body {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--sc-text-black1) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Font Sizes */
.font-12 { font-size: 12px !important; }
.font-13 { font-size: 13px !important; }
.font-14 { font-size: 14px !important; }
.font-15 { font-size: 15px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }
.font-20 { font-size: 20px !important; }
.font-22 { font-size: 22px !important; }
.font-24 { font-size: 24px !important; }
.font-28 { font-size: 28px !important; }

/* Font Weights */
.font-weight-normal { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-bold { font-weight: 700 !important; }

/* Line Heights */
.lh-18px { line-height: 18px !important; }
.lh-20px { line-height: 20px !important; }
.lh-24px { line-height: 24px !important; }
.lh-28px { line-height: 28px !important; }
.lh-30px { line-height: 30px !important; }

/* Text Colors - Enhanced với màu từ website */
.text-blue1 { color: var(--sc-blue1) !important; }
.text-blue3 { color: var(--sc-blue3) !important; }
.text-blue-gray { color: var(--sc-blue-gray) !important; }
.text-red1 { color: var(--sc-red1) !important; }
.text-red2 { color: #004593!important; }
.text-orange { color: var(--sc-orange) !important; }
.text-black1 { color: var(--sc-text-black1) !important; }
.text-black2 { color: var(--sc-text-black2) !important; }
.text-black3 { color: var(--sc-text-black3) !important; }
.text-black4 { color: var(--sc-text-black4) !important; }
.text-gray1 { color: var(--sc-text-gray1) !important; }
.text-white { color: #ffffff !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
.text-white-70 { color: rgba(255, 255, 255, 0.7) !important; }

/* ============================================
   HEADER & NAVIGATION - Optimized
   ============================================ */

/* Top Bar */
.border-bottom {
  border-bottom: 1px solid var(--sc-border-gray) !important;
  transition: border-color var(--sc-transition-fast) !important;
}

/* Header Container - GPU optimized */
body .header,
html body .header {
  background-color: var(--sc-bg-white) !important;
  border-bottom: 1px solid var(--sc-border-gray) !important;
  box-shadow: 0 2px 4px var(--sc-shadow-sm) !important;
  position: relative !important;
  z-index: 1000 !important;
  animation: fadeIn var(--sc-duration-normal) var(--sc-ease-out) !important;
  contain: layout style paint !important; /* Performance optimization */
}

/* Logo - Optimized hover */
body .header-logo-img,
html body .header-logo-img,
body .img-logo,
html body .img-logo {
  max-height: 59px !important;
  height: auto !important;
  width: auto !important;
  transition: transform var(--sc-transition-normal) !important;
  will-change: transform !important;
}

body .header-logo-img:hover,
html body .header-logo-img:hover,
body .img-logo:hover,
html body .img-logo:hover {
  transform: scale3d(1.05, 1.05, 1) !important;
}

/* Navigation Menu - Màu đỏ #ed1c24 */
body .header-menu,
html body .header-menu,
body .nav_header,
html body .nav_header {
  background: #ed1c24 !important;
  background-color: #ed1c24 !important;
  box-shadow: 0 2px 8px var(--sc-shadow-md) !important;
  transition: background-color var(--sc-transition-normal) !important;
  contain: layout style !important;
}

body .bg-blue1,
html body .bg-blue1 {
  background-color: var(--sc-blue1) !important;
}

/* Menu Links - Optimized với GPU */
body .menu_a,
html body .menu_a,
body .nav-link,
html body .nav-link {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  transition: all var(--sc-transition-normal) !important;
  position: relative !important;
  display: inline-block !important;
  will-change: transform, background-color !important;
  transform: translateZ(0) !important;
}

body .menu_a::before,
html body .menu_a::before,
body .nav-link::before,
html body .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #ffffff;
  transition: width var(--sc-transition-normal) !important;
  will-change: width !important;
}

body .menu_a:hover::before,
html body .menu_a:hover::before,
body .nav-link:hover::before,
html body .nav-link:hover::before {
  width: 100%;
}

body .menu_a:hover,
body .menu_a.active,
html body .menu_a:hover,
html body .menu_a.active,
body .nav-link:hover,
body .nav-link.active,
html body .nav-link:hover,
html body .nav-link.active {
  background: #c41e3a !important;
  color: #ffffff !important;
  transform: translate3d(0, -2px, 0) !important;
}

/* Sub Menu */
body .sub-menu,
html body .sub-menu {
  background: rgba(0, 0, 0, 0.1) !important;
  animation: slideIn var(--sc-duration-normal) var(--sc-ease-out) !important;
  will-change: transform, opacity !important;
}

/* ============================================
   MAIN LAYOUT - Enhanced spacing
   ============================================ */

/* Container */
body .container,
html body .container {
  max-width: 1200px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Main Content Area */
body .main-home,
html body .main-home,
body .main-content,
html body .main-content {
  padding-top: var(--sc-spacing-xl) !important;
  padding-bottom: var(--sc-spacing-xl) !important;
  animation: fadeInUp var(--sc-duration-slow) var(--sc-ease-out) !important;
  will-change: transform, opacity !important;
}

/* Column Layouts */
body .col-xl-610,
html body .col-xl-610 {
  flex-grow: 1 !important;
  background: #fff !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 1rem !important;
  height: max-content !important;
}

@media only screen and (min-width: 992px) {
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 430px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media only screen and (min-width: 1200px) {
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 610px !important;
  }
}

@media only screen and (max-width: 479px) {
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 100% !important;
  }
}

@media (max-width: 991px) {
  body .col-xl-610 .row,
  html body .col-xl-610 .row {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }
  
  body .col-xl-610 [class*=col],
  html body .col-xl-610 [class*=col] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

body .col-xl-200,
html body .col-xl-200 {
  width: 100% !important;
}

@media only screen and (min-width: 768px) {
  body .col-xl-200,
  html body .col-xl-200 {
    max-width: 50% !important;
  }
}

@media only screen and (min-width: 992px) {
  body .col-xl-200,
  html body .col-xl-200 {
    max-width: 200px !important;
  }
}

@media only screen and (max-width: 479px) {
  body .col-xl-200,
  html body .col-xl-200 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 10px 0 10px !important;
  }
}

body .col-xl-300,
html body .col-xl-300 {
  font-size: 14px !important;
  width: 100% !important;
}

@media only screen and (min-width: 768px) {
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 50% !important;
  }
}

@media only screen and (min-width: 992px) {
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 300px !important;
  }
}

@media only screen and (max-width: 479px) {
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 100% !important;
    margin: 0 10px !important;
  }
}

/* Border Radius */
.border-radius-4 {
  border-radius: 4px !important;
}

.border-radius-top {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.border-radius-bottom {
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* ============================================
   SECTION HEADERS - Optimized
   ============================================ */

body .section-header h1,
body .section-header h2,
body .section-header h3,
html body .section-header h1,
html body .section-header h2,
html body .section-header h3 {
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transition: color var(--sc-transition-fast) !important;
}

body .h-35px,
html body .h-35px {
  height: 35px !important;
  line-height: 35px !important;
}

body .h-42px,
html body .h-42px {
  height: 42px !important;
  line-height: 42px !important;
}

body .h-lg-42px,
html body .h-lg-42px {
  height: 42px !important;
  line-height: 42px !important;
}

body .border-bottom.pb-1,
html body .border-bottom.pb-1 {
  border-bottom: 1px solid var(--sc-border-gray) !important;
  padding-bottom: 0.25rem !important;
  transition: border-color var(--sc-transition-fast) !important;
}

/* Aside Titles */
body .aside-title-blue,
html body .aside-title-blue {
  background: var(--sc-blue2) !important;
  color: var(--sc-blue1) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: var(--sc-spacing-md) var(--sc-spacing-lg) !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--sc-border-dark) !important;
  transition: all var(--sc-transition-normal) !important;
  will-change: background-color, box-shadow !important;
}

body .aside-title-blue:hover,
html body .aside-title-blue:hover {
  background: var(--sc-bg-blue-light) !important;
  box-shadow: 0 2px 4px var(--sc-shadow-sm) !important;
}

body .aside-title-red,
html body .aside-title-red {
  background: var(--sc-blue1) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: var(--sc-spacing-md) var(--sc-spacing-lg) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  transition: all var(--sc-transition-normal) !important;
  will-change: background-color, box-shadow !important;
}

body .aside-title-red:hover,
html body .aside-title-red:hover {
  background: var(--sc-blue4) !important;
  box-shadow: 0 2px 8px var(--sc-shadow-md) !important;
}

/* ============================================
   TABLES - Optimized với GPU
   ============================================ */

body .table-result th,
body .table-loto th,
body .table thead th,
html body .table-result th,
html body .table-loto th,
html body .table thead th {
  background-color: var(--sc-blue2) !important;
  font-weight: 500 !important;
  font-family: Arial, sans-serif !important;
  border: 1px solid var(--sc-border-gray) !important;
  padding: var(--sc-spacing-md) !important;
  transition: background-color var(--sc-transition-fast) !important;
}

body .table-result th:hover,
html body .table-result th:hover {
  background-color: var(--sc-bg-blue-light) !important;
}

body .table-result td,
body .table-loto td,
body .table td,
html body .table-result td,
html body .table-loto td,
html body .table td {
  border: 1px solid var(--sc-border-gray) !important;
  font-family: Arial, sans-serif !important;
  padding: var(--sc-spacing-md) !important;
  transition: background-color var(--sc-transition-fast) !important;
  will-change: background-color, transform !important;
}

body .table-result td:hover,
body .table-loto td:hover,
html body .table-result td:hover,
html body .table-loto td:hover {
  background-color: var(--sc-bg-gray1) !important;
}

body .table-striped tbody tr:nth-of-type(odd),
html body .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

body .table-striped tbody tr,
html body .table-striped tbody tr {
  transition: background-color var(--sc-transition-fast), transform var(--sc-transition-fast) !important;
  will-change: background-color, transform !important;
  transform: translateZ(0) !important;
}

body .table-striped tbody tr:hover,
html body .table-striped tbody tr:hover {
  background-color: var(--sc-bg-gray1) !important;
  transform: scale3d(1.01, 1, 1) !important;
}

body .result h3,
html body .result h3 {
  background: var(--sc-blue1) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: var(--sc-spacing-md) var(--sc-spacing-lg) !important;
  margin: 0 !important;
  transition: background-color var(--sc-transition-normal) !important;
  will-change: background-color !important;
}

body .result h3:hover,
html body .result h3:hover {
  background: var(--sc-blue4) !important;
}

body .text-number,
html body .text-number {
  color: var(--sc-text-black1) !important;
  font-weight: 500 !important;
  font-family: Arial, sans-serif !important;
  transition: color var(--sc-transition-fast) !important;
}

/* Special Prize Colors - Optimized pulse */
body .code-DB1,
body .code-DB2,
body .code-DB3,
body .code-DB4,
body .code-DB5,
body .special-prize,
body .prize1,
body .prize2,
body .prize3,
body .prize4,
body .prize5,
body .prize6,
body .prize7,
html body .code-DB1,
html body .code-DB2,
html body .code-DB3,
html body .code-DB4,
html body .code-DB5,
html body .special-prize,
html body .prize1,
html body .prize2,
html body .prize3,
html body .prize4,
html body .prize5,
html body .prize6,
html body .prize7 {
  color: var(--sc-red1) !important;
  font-weight: 700 !important;
  animation: pulse 2s var(--sc-ease-in-out) infinite !important;
  will-change: opacity, transform !important;
}

/* ============================================
   BUTTONS & LINKS - Optimized
   ============================================ */

body a,
html body a {
  color: var(--sc-blue1) !important;
  transition: color var(--sc-transition-fast) !important;
  text-decoration: none !important;
  position: relative !important;
}

body a::after,
html body a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--sc-blue1);
  transition: width var(--sc-transition-normal) !important;
  will-change: width !important;
  transform: translateZ(0) !important;
}

body a:hover::after,
html body a:hover::after {
  width: 100%;
}

body a:hover,
html body a:hover {
  color: var(--sc-blue1) !important;
  text-decoration: none !important;
}

body .btn,
html body .btn {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 3.75px !important;
  transition: all var(--sc-transition-normal) !important;
  padding: var(--sc-spacing-sm) var(--sc-spacing-lg) !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 2px 4px var(--sc-shadow-sm) !important;
  will-change: transform, box-shadow !important;
  transform: translateZ(0) !important;
}

body .btn:hover,
html body .btn:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow: 0 4px 8px var(--sc-shadow-md) !important;
}

body .btn:active,
html body .btn:active {
  transform: translate3d(0, 0, 0) !important;
  box-shadow: 0 2px 4px var(--sc-shadow-sm) !important;
  transition-duration: var(--sc-duration-instant) !important;
}

body .btn-primary,
html body .btn-primary {
  background-color: var(--sc-blue1) !important;
  color: #ffffff !important;
  border-color: var(--sc-blue1) !important;
}

body .btn-primary:hover,
html body .btn-primary:hover {
  background-color: var(--sc-blue4) !important;
  border-color: var(--sc-blue4) !important;
}

/* ============================================
   SIDEBAR & ASIDE - Optimized
   ============================================ */

body .aside-news ul,
body .aside-news2 ul,
html body .aside-news ul,
html body .aside-news2 ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body .aside-news li,
body .aside-news2 li,
html body .aside-news li,
html body .aside-news2 li {
  padding: var(--sc-spacing-sm) var(--sc-spacing-lg) !important;
  border-bottom: 1px solid var(--sc-border-gray) !important;
  transition: all var(--sc-transition-fast) !important;
  will-change: padding-left, background-color !important;
  transform: translateZ(0) !important;
}

body .aside-news li:hover,
body .aside-news2 li:hover,
html body .aside-news li:hover,
html body .aside-news2 li:hover {
  background-color: var(--sc-bg-gray1) !important;
  padding-left: var(--sc-spacing-xl) !important;
}

body .aside-news li:last-child,
body .aside-news2 li:last-child,
html body .aside-news li:last-child,
html body .aside-news2 li:last-child {
  border-bottom: none !important;
}

body .aside-news a,
body .aside-news2 a,
html body .aside-news a,
html body .aside-news2 a {
  color: var(--sc-text-black1) !important;
  font-size: 14px !important;
  display: block !important;
  transition: color var(--sc-transition-fast) !important;
}

body .aside-news a:hover,
body .aside-news2 a:hover,
html body .aside-news a:hover,
html body .aside-news2 a:hover {
  color: var(--sc-blue1) !important;
}

/* ============================================
   FOOTER - Enhanced
   ============================================ */

body .footer,
html body .footer {
  background: var(--sc-blue1) !important;
  color: #ffffff !important;
  padding: var(--sc-spacing-3xl) 0 !important;
  box-shadow: 0 -2px 8px var(--sc-shadow-md) !important;
}

body .footer a,
html body .footer a {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: color var(--sc-transition-fast), transform var(--sc-transition-fast) !important;
  will-change: transform !important;
  display: inline-block !important;
}

body .footer a:hover,
html body .footer a:hover {
  color: #ffffff !important;
  transform: translate3d(5px, 0, 0) !important;
}

body .footer h4,
html body .footer h4 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: var(--sc-spacing-lg) !important;
}

/* ============================================
   TABS & PILLS - Optimized
   ============================================ */

body .nav-pills .nav-link,
html body .nav-pills .nav-link {
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  transition: all var(--sc-transition-normal) !important;
  padding: var(--sc-spacing-md) var(--sc-spacing-lg) !important;
  will-change: background-color, box-shadow !important;
}

body .nav-pills .nav-link:hover,
html body .nav-pills .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

body .nav-pills .nav-link.active,
html body .nav-pills .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -3px 0 #ffffff !important;
}

body .nav-menu-result-home,
html body .nav-menu-result-home {
  background: var(--sc-blue1) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Override các class đang dùng màu đỏ làm primary */
body .bg-red2,
html body .bg-red2 {
  background-color: var(--sc-blue1) !important;
}

body .bg-red1,
html body .bg-red1 {
  background-color: var(--sc-blue1) !important;
}

/* ============================================
   SPACING SYSTEM
   ============================================ */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--sc-spacing-xs) !important; }
.mt-2 { margin-top: var(--sc-spacing-sm) !important; }
.mt-3 { margin-top: var(--sc-spacing-md) !important; }
.mt-4 { margin-top: var(--sc-spacing-lg) !important; }
.mt-5 { margin-top: var(--sc-spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--sc-spacing-xs) !important; }
.mb-2 { margin-bottom: var(--sc-spacing-sm) !important; }
.mb-3 { margin-bottom: var(--sc-spacing-md) !important; }
.mb-4 { margin-bottom: var(--sc-spacing-lg) !important; }
.mb-5 { margin-bottom: var(--sc-spacing-xl) !important; }

.ml-1 { margin-left: var(--sc-spacing-xs) !important; }
.ml-2 { margin-left: var(--sc-spacing-sm) !important; }
.ml-3 { margin-left: var(--sc-spacing-md) !important; }
.mr-1 { margin-right: var(--sc-spacing-xs) !important; }
.mr-2 { margin-right: var(--sc-spacing-sm) !important; }
.mr-3 { margin-right: var(--sc-spacing-md) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--sc-spacing-xs) !important; }
.p-2 { padding: var(--sc-spacing-sm) !important; }
.p-3 { padding: var(--sc-spacing-md) !important; }
.p-4 { padding: var(--sc-spacing-lg) !important; }
.p-5 { padding: var(--sc-spacing-xl) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--sc-spacing-xs) !important; padding-right: var(--sc-spacing-xs) !important; }
.px-2 { padding-left: var(--sc-spacing-sm) !important; padding-right: var(--sc-spacing-sm) !important; }
.px-3 { padding-left: var(--sc-spacing-md) !important; padding-right: var(--sc-spacing-md) !important; }
.px-4 { padding-left: var(--sc-spacing-lg) !important; padding-right: var(--sc-spacing-lg) !important; }
.px-5 { padding-left: var(--sc-spacing-xl) !important; padding-right: var(--sc-spacing-xl) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--sc-spacing-xs) !important; padding-bottom: var(--sc-spacing-xs) !important; }
.py-2 { padding-top: var(--sc-spacing-sm) !important; padding-bottom: var(--sc-spacing-sm) !important; }
.py-3 { padding-top: var(--sc-spacing-md) !important; padding-bottom: var(--sc-spacing-md) !important; }
.py-4 { padding-top: var(--sc-spacing-lg) !important; padding-bottom: var(--sc-spacing-lg) !important; }
.py-5 { padding-top: var(--sc-spacing-xl) !important; padding-bottom: var(--sc-spacing-xl) !important; }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-justify { text-align: justify !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

/* ============================================
   RESPONSIVE - Enhanced breakpoints
   ============================================ */

/* Ultra Wide (1920px+) */
@media only screen and (min-width: 1920px) {
  body .container,
  html body .container {
    max-width: 1600px !important;
  }
}

/* Large Desktop (1440px - 1919px) */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  body .container,
  html body .container {
    max-width: 1400px !important;
  }
}

/* Desktop (1280px - 1439px) */
@media only screen and (min-width: 1280px) and (max-width: 1439px) {
  body .container,
  html body .container {
    max-width: 1200px !important;
  }
}

/* Desktop Standard (1024px - 1279px) */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  body .container,
  html body .container {
    max-width: 1024px !important;
  }
  
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 100% !important;
    padding-right: var(--sc-spacing-md) !important;
  }
  
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 100% !important;
    padding-left: var(--sc-spacing-md) !important;
    margin-top: var(--sc-spacing-xl) !important;
  }
}

/* Tablet Landscape (992px - 1023px) */
@media only screen and (min-width: 992px) and (max-width: 1023px) {
  body .container,
  html body .container {
    max-width: 960px !important;
  }
  
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 100% !important;
    padding-right: var(--sc-spacing-md) !important;
  }
  
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 100% !important;
    padding-left: var(--sc-spacing-md) !important;
    margin-top: var(--sc-spacing-xl) !important;
  }
}

/* Tablet Portrait (768px - 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  body .col-xl-610,
  html body .col-xl-610 {
    max-width: 100% !important;
    padding-right: var(--sc-spacing-sm) !important;
  }
  
  body .col-xl-300,
  html body .col-xl-300 {
    max-width: 100% !important;
    padding-left: var(--sc-spacing-sm) !important;
    margin-top: var(--sc-spacing-lg) !important;
  }
  
  body .header-logo-img,
  html body .header-logo-img {
    max-height: 52px !important;
  }
  
  body .font-18,
  html body .font-18 {
    font-size: 17px !important;
  }
  
  body .font-16,
  html body .font-16 {
    font-size: 15px !important;
  }
}

/* Mobile Landscape (640px - 767px) */
@media only screen and (min-width: 640px) and (max-width: 767px) {
  body .header-logo-img,
  html body .header-logo-img {
    max-height: 48px !important;
  }
  
  body .font-18,
  html body .font-18 {
    font-size: 16px !important;
  }
  
  body .font-16,
  html body .font-16 {
    font-size: 14px !important;
  }
  
  body .font-14,
  html body .font-14 {
    font-size: 13px !important;
  }
  
  body .main-home,
  html body .main-home,
  body .main-content,
  html body .main-content {
    padding-top: var(--sc-spacing-lg) !important;
    padding-bottom: var(--sc-spacing-lg) !important;
  }
  
  body .container,
  html body .container {
    padding-left: var(--sc-spacing-sm) !important;
    padding-right: var(--sc-spacing-sm) !important;
  }
}

/* Mobile Portrait (480px - 639px) */
@media only screen and (min-width: 480px) and (max-width: 639px) {
  body .header-logo-img,
  html body .header-logo-img {
    max-height: 46px !important;
  }
  
  body .font-18,
  html body .font-18 {
    font-size: 15px !important;
  }
  
  body .font-16,
  html body .font-16 {
    font-size: 14px !important;
  }
  
  body .font-14,
  html body .font-14 {
    font-size: 12px !important;
  }
  
  body .main-home,
  html body .main-home,
  body .main-content,
  html body .main-content {
    padding-top: var(--sc-spacing-md) !important;
    padding-bottom: var(--sc-spacing-md) !important;
  }
  
  body .container,
  html body .container {
    padding-left: var(--sc-spacing-xs) !important;
    padding-right: var(--sc-spacing-xs) !important;
  }
  
  body .menu_a,
  html body .menu_a,
  body .nav-link,
  html body .nav-link {
    font-size: 13px !important;
    padding: var(--sc-spacing-xs) var(--sc-spacing-sm) !important;
  }
  
  body .btn,
  html body .btn {
    font-size: 14px !important;
    padding: var(--sc-spacing-xs) var(--sc-spacing-md) !important;
  }
}

/* Small Mobile (320px - 479px) */
@media only screen and (min-width: 320px) and (max-width: 479px) {
  body .header-logo-img,
  html body .header-logo-img {
    max-height: 44px !important;
  }
  
  body .font-18,
  html body .font-18 {
    font-size: 14px !important;
  }
  
  body .font-16,
  html body .font-16 {
    font-size: 13px !important;
  }
  
  body .font-14,
  html body .font-14 {
    font-size: 12px !important;
  }
  
  body .main-home,
  html body .main-home,
  body .main-content,
  html body .main-content {
    padding-top: var(--sc-spacing-sm) !important;
    padding-bottom: var(--sc-spacing-sm) !important;
  }
  
  body .container,
  html body .container {
    padding-left: var(--sc-spacing-xs) !important;
    padding-right: var(--sc-spacing-xs) !important;
  }
  
  body .menu_a,
  html body .menu_a,
  body .nav-link,
  html body .nav-link {
    font-size: 12px !important;
    padding: var(--sc-spacing-xs) !important;
  }
  
  body .btn,
  html body .btn {
    font-size: 13px !important;
    padding: var(--sc-spacing-xs) var(--sc-spacing-sm) !important;
  }
  
  body .aside-title-blue,
  html body .aside-title-blue,
  body .aside-title-red,
  html body .aside-title-red {
    font-size: 12px !important;
    padding: var(--sc-spacing-xs) var(--sc-spacing-sm) !important;
  }
}

/* Extra Small Mobile (up to 319px) */
@media only screen and (max-width: 319px) {
  body .header-logo-img,
  html body .header-logo-img {
    max-height: 40px !important;
  }
  
  body .font-18,
  html body .font-18 {
    font-size: 13px !important;
  }
  
  body .font-16,
  html body .font-16 {
    font-size: 12px !important;
  }
  
  body .font-14,
  html body .font-14 {
    font-size: 11px !important;
  }
  
  body .container,
  html body .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  body .menu_a,
  html body .menu_a,
  body .nav-link,
  html body .nav-link {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body .header,
  body .nav_header,
  body .footer,
  body .aside-news,
  body .aside-news2 {
    display: none !important;
  }
  
  body .main-content,
  html body .main-content {
    padding: 0 !important;
  }
  
  * {
    will-change: auto !important;
    animation: none !important;
  }
}