/**
 * Design Tokens Complete - Áp dụng toàn bộ UI từ soicau247s.org
 * Từ màu chữ, header, navigation đến toàn bộ components
 * Generated từ design tokens JSON
 */

/* ============================================
   DESIGN TOKENS - Complete System
   ============================================ */

:root {
  /* ============================================
     COLORS - Chính xác từ soicau247s.org
     ============================================ */
  
  /* Primary Brand Colors */
  --dt-primary-blue: #004593;        /* Header, Footer, Navigation */
  --dt-primary-blue-dark: #0a4381;   /* Darker blue */
  --dt-primary-blue-light: #3198c7;  /* Light blue */
  --dt-primary-blue-lighter: #00aecd; /* Lighter blue */
  --dt-primary-blue-pale: #81a7b8;   /* Pale blue-gray */
  
  /* Red Colors - Cho số xổ số, highlights */
  --dt-red-primary: #ed1c24;         /* Primary red */
  --dt-red-bright: #ff0c2a;          /* Bright red */
  --dt-red-dark: #d0021b;            /* Dark red */
  --dt-red-medium: #a32b31;         /* Medium red */
  
  /* Text Colors */
  --dt-text-primary: #1d1d1d;        /* Main text - Black */
  --dt-text-secondary: #3e3f42;      /* Secondary text */
  --dt-text-muted: #777777;          /* Muted text */
  --dt-text-light: #dee2e6;          /* Light text */
  --dt-text-white: #ffffff;          /* White text */
  --dt-text-gray: #777777;           /* Gray text */
  
  /* Background Colors */
  --dt-bg-white: #ffffff;            /* White background */
  --dt-bg-light: #f8f9fa;            /* Light gray background */
  --dt-bg-yellow: #FFFFFF;           /* Yellow header background */
  --dt-bg-blue-light: #f0f8ff;       /* Light blue background */
  --dt-bg-gray: #dee2e6;             /* Gray background */
  --dt-bg-dark: #1d1d1d;             /* Dark background */
  
  /* Border Colors */
  --dt-border-gray: #dee2e6;         /* Gray border */
  --dt-border-dark: #212529;         /* Dark border */
  --dt-border-light: #cccccc;        /* Light border */
  
  /* Link Colors */
  --dt-link: #004593;                 /* Link color - Blue */
  --dt-link-hover: #0056b3;          /* Link hover - Darker blue */
  --dt-link-active: #d0021b;          /* Link active - Red */
  
  /* ============================================
     TYPOGRAPHY - Chính xác từ soicau247s.org
     ============================================ */
  
  --dt-font-family: Arial, sans-serif;
  --dt-font-size-base: 15px;
  --dt-font-size-small: 14px;
  --dt-font-size-caption: 13px;
  --dt-font-size-tiny: 12px;
  
  --dt-font-weight-normal: 400;
  --dt-font-weight-medium: 500;
  --dt-font-weight-bold: 700;
  
  --dt-line-height-base: 1.5;
  --dt-line-height-tight: 1.0;
  --dt-line-height-relaxed: 1.82;
  
  /* ============================================
     SPACING - Chính xác từ soicau247s.org
     ============================================ */
  
  --dt-spacing-xs: 4px;
  --dt-spacing-sm: 8px;
  --dt-spacing-md: 12px;
  --dt-spacing-lg: 16px;
  --dt-spacing-xl: 20px;
  --dt-spacing-2xl: 24px;
  --dt-spacing-3xl: 30px;
  
  /* ============================================
     BORDERS & RADIUS
     ============================================ */
  
  --dt-border-radius-sm: 3.75px;
  --dt-border-radius-md: 4px;
  --dt-border-radius-lg: 8px;
  
  /* ============================================
     SHADOWS
     ============================================ */
  
  --dt-shadow-sm: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
  --dt-shadow-md: rgba(0, 0, 0, 0.25) 0px 4px 8px 0px;
  --dt-shadow-lg: rgba(0, 0, 0, 0.15) 0px 0px 12px;
}

/* ============================================
   GLOBAL RESET - Áp dụng design tokens
   ============================================ */

html body {
  font-family: var(--dt-font-family) !important;
  font-size: var(--dt-font-size-base) !important;
  line-height: var(--dt-line-height-base) !important;
  color: var(--dt-text-primary) !important;
  background-color: var(--dt-bg-white) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   HEADER - Áp dụng design tokens
   ============================================ */

body .header,
html body .header {
  background-color: var(--dt-bg-white) !important;
  border-bottom: 1px solid var(--dt-border-gray) !important;
  box-shadow: var(--dt-shadow-sm) !important;
}

body .header-logo-img,
html body .header-logo-img {
  max-height: 59px !important;
  height: auto !important;
}

body .header-time,
html body .header-time {
  color: var(--dt-text-secondary) !important;
  font-size: var(--dt-font-size-base) !important;
  font-family: var(--dt-font-family) !important;
}

/* ============================================
   NAVIGATION - Màu đỏ #ed1c24
   ============================================ */

body .nav_header,
html body .nav_header,
body .header-menu,
html body .header-menu {
  background: #ed1c24 !important;
  background-color: #ed1c24 !important;
  box-shadow: var(--dt-shadow-md) !important;
}

body .menu_a,
html body .menu_a,
body .nav-link,
html body .nav-link {
  font-family: var(--dt-font-family) !important;
  font-size: var(--dt-font-size-small) !important;
  color: var(--dt-text-white) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
  transition: all 0.3s ease !important;
}

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: var(--dt-text-white) !important;
}

body .nav-bottom-item,
html body .nav-bottom-item {
  color: var(--dt-text-primary) !important;
  font-size: var(--dt-font-size-small) !important;
  font-weight: var(--dt-font-weight-medium) !important;
  font-family: var(--dt-font-family) !important;
}

body .nav-bottom-item:hover,
html body .nav-bottom-item:hover {
  color: var(--dt-primary-blue) !important;
}

/* ============================================
   TYPOGRAPHY - Áp dụng design tokens
   ============================================ */

body h1,
body .h1,
html body h1,
html body .h1 {
  font-size: 28px !important;
  font-weight: var(--dt-font-weight-bold) !important;
  line-height: var(--dt-line-height-relaxed) !important;
  color: var(--dt-text-primary) !important;
  font-family: var(--dt-font-family) !important;
}

body h2,
body .h2,
html body h2,
html body .h2 {
  font-size: 24px !important;
  font-weight: var(--dt-font-weight-bold) !important;
  line-height: 1.69 !important;
  color: var(--dt-text-primary) !important;
  font-family: var(--dt-font-family) !important;
}

body h3,
body .h3,
html body h3,
html body .h3 {
  font-size: 20px !important;
  font-weight: var(--dt-font-weight-bold) !important;
  color: var(--dt-text-primary) !important;
  font-family: var(--dt-font-family) !important;
}

body p,
body .body-text,
html body p,
html body .body-text {
  font-size: var(--dt-font-size-base) !important;
  line-height: var(--dt-line-height-base) !important;
  color: var(--dt-text-primary) !important;
  font-family: var(--dt-font-family) !important;
}

/* ============================================
   SECTION HEADERS - Màu vàng nhạt
   ============================================ */

body .section-header,
html body .section-header {
  background: var(--dt-bg-yellow) !important;
  border: 1px solid var(--dt-border-gray) !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
}

body .section-header h1,
body .section-header h2,
html body .section-header h1,
html body .section-header h2 {
  font-family: var(--dt-font-family) !important;
  font-size: 22px !important;
  font-weight: var(--dt-font-weight-bold) !important;
  color: var(--dt-text-primary) !important;
  margin: 0 !important;
}

body .section-header h2 > a,
html body .section-header h2 > a {
  color: var(--dt-red-primary) !important;
}

body .section-header h2 > a:hover,
html body .section-header h2 > a:hover {
  color: var(--dt-primary-blue) !important;
}

body .section-header2,
html body .section-header2 {
  background: var(--dt-bg-blue-light) !important;
  border: 1px solid var(--dt-border-gray) !important;
}

body .section-header2 h1,
body .section-header2 h2,
html body .section-header2 h1,
html body .section-header2 h2 {
  font-size: 16px !important;
  font-weight: var(--dt-font-weight-bold) !important;
  font-family: var(--dt-font-family) !important;
}

body .section-header2 h2 > a,
html body .section-header2 h2 > a {
  color: var(--dt-red-primary) !important;
}

body .section-header2 h2 > a:hover,
html body .section-header2 h2 > a:hover {
  color: var(--dt-primary-blue) !important;
}

/* ============================================
   LINKS - Màu xanh chủ đạo
   ============================================ */

body a,
html body a {
  color: var(--dt-link) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

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

body a:active,
html body a:active {
  color: var(--dt-link-active) !important;
}

body a.color_red,
body .color_red,
html body a.color_red,
html body .color_red {
  color: var(--dt-red-primary) !important;
}

body a.color_red:hover,
html body a.color_red:hover {
  color: var(--dt-red-dark) !important;
}

/* ============================================
   BUTTONS - Áp dụng design tokens
   ============================================ */

body .btn,
html body .btn {
  font-family: var(--dt-font-family) !important;
  font-size: var(--dt-font-size-base) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  border-radius: var(--dt-border-radius-sm) !important;
  padding: var(--dt-spacing-sm) var(--dt-spacing-lg) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: var(--dt-shadow-sm) !important;
}

body .btn-primary,
html body .btn-primary {
  background-color: var(--dt-primary-blue) !important;
  color: var(--dt-text-white) !important;
  border-color: var(--dt-primary-blue) !important;
}

body .btn-primary:hover,
html body .btn-primary:hover {
  background-color: var(--dt-primary-blue-dark) !important;
  border-color: var(--dt-primary-blue-dark) !important;
  box-shadow: var(--dt-shadow-md) !important;
}

body .btn-danger,
body .btn-danger2,
body .btn-danger3,
html body .btn-danger,
html body .btn-danger2,
html body .btn-danger3 {
  background-color: var(--dt-red-primary) !important;
  color: var(--dt-text-white) !important;
  border-radius: var(--dt-border-radius-sm) !important;
}

body .btn-danger:hover,
html body .btn-danger:hover {
  background-color: var(--dt-red-dark) !important;
}

/* ============================================
   TABLES - Kết quả xổ số
   ============================================ */

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(--dt-bg-blue-light) !important;
  font-weight: var(--dt-font-weight-medium) !important;
  font-family: var(--dt-font-family) !important;
  border: 1px solid var(--dt-border-gray) !important;
  padding: var(--dt-spacing-md) !important;
  color: var(--dt-text-primary) !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(--dt-border-gray) !important;
  font-family: var(--dt-font-family) !important;
  padding: var(--dt-spacing-md) !important;
  color: var(--dt-text-primary) !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;
}

/* Result Table Title - Màu đỏ như website gốc */
body .result h3,
html body .result h3 {
  background: var(--dt-red-primary) !important;
  color: var(--dt-text-white) !important;
  text-transform: uppercase !important;
  font-weight: var(--dt-font-weight-bold) !important;
  font-size: 16px !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
  margin: 0 !important;
}

body .result h3:hover,
html body .result h3:hover {
  background: var(--dt-red-dark) !important;
}

/* Number Display */
body .text-number,
html body .text-number {
  color: var(--dt-text-primary) !important;
  font-weight: var(--dt-font-weight-medium) !important;
  font-family: var(--dt-font-family) !important;
}

/* Special Prize Colors - Màu đỏ cho số đặc biệt */
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,
body .xs_prize1,
body .xs_prize2,
body .xs_prize3,
body .xs_prize4,
body .number_DB,
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,
html body .xs_prize1,
html body .xs_prize2,
html body .xs_prize3,
html body .xs_prize4,
html body .number_DB {
  color: var(--dt-red-primary) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  font-family: var(--dt-font-family) !important;
}

/* ============================================
   POST TITLES & ARTICLES
   ============================================ */

body .post-title,
body .post-title2,
body .article-title,
html body .post-title,
html body .post-title2,
html body .article-title {
  font-family: var(--dt-font-family) !important;
  font-size: 16px !important;
  font-weight: var(--dt-font-weight-normal) !important;
  color: var(--dt-text-primary) !important;
}

body .post-title a,
body .post-title2 a,
body .article-title a,
html body .post-title a,
html body .post-title2 a,
html body .article-title a {
  color: var(--dt-text-primary) !important;
}

body .post-title a:hover,
body .post-title2 a:hover,
body .article-title a:hover,
html body .post-title a:hover,
html body .post-title2 a:hover,
html body .article-title a:hover {
  color: var(--dt-red-primary) !important;
}

/* ============================================
   WIDGETS & ASIDE
   ============================================ */

body .widget-title,
html body .widget-title {
  background: var(--dt-bg-blue-light) !important;
  font-family: var(--dt-font-family) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
  border-bottom: 1px solid var(--dt-border-gray) !important;
}

body .widget-title h3,
html body .widget-title h3 {
  font-size: var(--dt-font-size-caption) !important;
  font-family: var(--dt-font-family) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  color: var(--dt-primary-blue) !important;
  margin: 0 !important;
}

body .aside-title-blue,
html body .aside-title-blue {
  background: var(--dt-bg-blue-light) !important;
  color: var(--dt-primary-blue) !important;
  font-size: var(--dt-font-size-small) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--dt-border-gray) !important;
}

body .aside-title-red,
html body .aside-title-red {
  background: var(--dt-red-primary) !important;
  color: var(--dt-text-white) !important;
  font-size: var(--dt-font-size-small) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

body .aside-news a,
body .aside-news2 a,
html body .aside-news a,
html body .aside-news2 a {
  color: var(--dt-text-primary) !important;
  font-size: var(--dt-font-size-small) !important;
  font-family: var(--dt-font-family) !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(--dt-primary-blue) !important;
}

/* ============================================
   FOOTER - Màu xanh chủ đạo
   ============================================ */

body .footer,
html body .footer {
  background: var(--dt-primary-blue) !important;
  color: var(--dt-text-white) !important;
  padding: var(--dt-spacing-3xl) 0 !important;
  box-shadow: 0 -2px 8px var(--dt-shadow-md) !important;
}

body .footer a,
html body .footer a {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: color 0.15s ease !important;
}

body .footer a:hover,
html body .footer a:hover {
  color: var(--dt-text-white) !important;
}

body .footer h4,
html body .footer h4 {
  color: var(--dt-text-white) !important;
  font-weight: var(--dt-font-weight-bold) !important;
  font-size: 16px !important;
  margin-bottom: var(--dt-spacing-lg) !important;
  font-family: var(--dt-font-family) !important;
}

/* ============================================
   TABS & PILLS
   ============================================ */

body .nav-pills .nav-link,
html body .nav-pills .nav-link {
  background-color: transparent !important;
  color: var(--dt-text-white) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
  padding: var(--dt-spacing-md) var(--dt-spacing-lg) !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: var(--dt-text-white) !important;
  box-shadow: inset 0 -3px 0 #ffffff !important;
}

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

/* ============================================
   FORMS
   ============================================ */

body input[type="text"],
body input[type="number"],
body input[type="email"],
body select,
body textarea,
html body input[type="text"],
html body input[type="number"],
html body input[type="email"],
html body select,
html body textarea {
  font-family: var(--dt-font-family) !important;
  font-size: var(--dt-font-size-base) !important;
  border: 1px solid var(--dt-border-gray) !important;
  border-radius: var(--dt-border-radius-sm) !important;
  padding: var(--dt-spacing-sm) var(--dt-spacing-md) !important;
  color: var(--dt-text-primary) !important;
}

body input:focus,
body select:focus,
body textarea:focus,
html body input:focus,
html body select:focus,
html body textarea:focus {
  border: 1px solid var(--dt-primary-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 69, 147, 0.25) !important;
  outline: none !important;
}

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

.text-primary { color: var(--dt-primary-blue) !important; }
.text-red { color: var(--dt-red-primary) !important; }
.text-dark { color: var(--dt-text-primary) !important; }
.text-muted { color: var(--dt-text-muted) !important; }
.text-white { color: var(--dt-text-white) !important; }

.bg-primary { background-color: var(--dt-primary-blue) !important; }
.bg-red { background-color: var(--dt-red-primary) !important; }
.bg-light { background-color: var(--dt-bg-light) !important; }
.bg-yellow { background-color: var(--dt-bg-yellow) !important; }

/* ============================================
   OVERRIDE CÁC CLASS CŨ
   ============================================ */

body .bg-red1,
body .bg-red2,
html body .bg-red1,
html body .bg-red2 {
  background-color: var(--dt-red-primary) !important;
}

body .text-red1,
body .text-red2,
html body .text-red1,
html body .text-red2 {
  color: var(--dt-red-primary) !important;
}