/**
 * Design System Override với !important
 * Override các style cũ từ styleall.min.css và các file CSS khác
 */

/* ============================================
   GLOBAL - Override body và base styles
   ============================================ */

body {
  font-family: Arial, sans-serif !important;
  color: #1d1d1d !important;
  background-color: #ffffff !important;
  line-height: 1.5 !important;
}

/* ============================================
   HEADER - Override header styles
   ============================================ */

.header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding: 5px 0 !important;
}

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

.header-time {
  color: #3e3f42 !important;
  font-size: 15px !important;
  font-family: Arial, sans-serif !important;
}

/* ============================================
   NAVIGATION - Override nav styles
   ============================================ */

.nav_header {
  background: #ed1c24 !important;
  background-color: #ed1c24 !important;
}

.menu_a {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.menu_a:hover,
.menu_a.active {
  background: #c41e3a !important;
  color: #ffffff !important;
}

.nav-bottom-item {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: Arial, sans-serif !important;
}

.nav-bottom-item:hover {
  color: #ed1c24 !important;
}

/* ============================================
   TYPOGRAPHY - Override heading và text
   ============================================ */

h1, .h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.82 !important;
  color: #1d1d1d !important;
  font-family: Arial, sans-serif !important;
}

h2, .h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.69 !important;
  color: #1d1d1d !important;
  font-family: Arial, sans-serif !important;
}

h3, .h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1d1d1d !important;
  font-family: Arial, sans-serif !important;
}

.section-header h1,
.section-header h2 {
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.section-header2 h1,
.section-header2 h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
}

/* ============================================
   BUTTONS - Override button styles
   ============================================ */

.btn {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 3.75px !important;
  transition: all 0.3s ease !important;
}

.btn-primary {
  background-color: #004593 !important;
  color: #ffffff !important;
  border-color: #004593 !important;
}

.btn-primary:hover {
  background-color: #0056b3 !important;
  color: #ffffff !important;
  border-color: #0056b3 !important;
  box-shadow: 0 4px 8px rgba(0, 69, 147, 0.3) !important;
}

.btn-danger {
  background-color: #ed1c25 !important;
  color: #ffffff !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 3.75px !important;
}

.btn-danger:hover {
  background-color: #d0021b !important;
  opacity: 0.9 !important;
}

.btn-danger2,
.btn-danger3 {
  background-color: #ed1c25 !important;
  color: #ffffff !important;
  border-radius: 3.75px !important;
}

/* ============================================
   LINKS - Override link colors
   ============================================ */

a {
  color: #004593 !important;
  transition: color 0.15s ease !important;
}

a:hover {
  color: #cccccc !important;
}

a.color_red,
.color_red {
  color: #ed1c25 !important;
}

a.color_red:hover {
  color: #d0021b !important;
}

/* ============================================
   TABLES - Override table styles
   ============================================ */

.table-result th,
.table-loto th {
  background-color: #f0f8ff !important;
  font-weight: 500 !important;
  font-family: Arial, sans-serif !important;
}

.table-result td,
.table-loto td {
  border: 1px solid #dee2e6 !important;
  font-family: Arial, sans-serif !important;
}

.code-DB1,
.code-DB2,
.code-DB3,
.code-DB4,
.code-DB5,
.special-prize,
.prize1,
.prize2,
.prize3,
.prize4,
.prize5,
.prize6,
.prize7,
.xs_prize1,
.xs_prize2,
.xs_prize3,
.xs_prize4 {
  color: #ed1c25 !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
}

.number_DB {
  color: #ed1c25 !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
}

/* ============================================
   SECTIONS & WIDGETS
   ============================================ */

.section {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px !important;
  border-radius: 4px !important;
}

.section-header {
  background: #FFFFFF !important;
  border: solid 1px #dddfe2 !important;
}

.section-header2 {
  background: #f0f8ff !important;
  border: solid 1px #dddfe2 !important;
}

.widget {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px !important;
  border-radius: 4px !important;
}

.widget-title {
  background: #f0f8ff !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
}

.post-title,
.post-title2,
.article-title {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

.post-title a,
.post-title2 a,
.article-title a {
  color: #000000 !important;
}

.post-title a:hover,
.post-title2 a:hover,
.article-title a:hover {
  color: #ed1c25 !important;
}

.section-header h2 > a {
  color: #ed1c25 !important;
}

.section-header h2 > a:hover {
  color: #004593 !important;
}

.section-header2 h2 > a {
  color: #ed1c25 !important;
}

.section-header2 h2 > a:hover {
  color: #004593 !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: #f0f8ff !important;
  border-top: solid 1px #dddfe2 !important;
}

.footer a {
  color: #000000 !important;
}

.footer a:hover {
  color: #ed1c25 !important;
}

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

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  border: solid 1px #b3b3b3 !important;
  border-radius: 3.75px !important;
}

input:focus,
select:focus,
textarea:focus {
  border: solid 1px #007bff !important;
  box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem !important;
}

/* ============================================
   UTILITY CLASSES - Override
   ============================================ */

.text-danger {
  color: #ed1c25 !important;
}

.color_red {
  color: #ed1c25 !important;
}

.color_blue {
  color: #004593 !important;
}

.primary-color {
  color: #004593 !important;
}

.danger-color {
  color: #ed1c25 !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media only screen and (max-width: 960px) {
  .header-logo-img {
    max-height: 48px !important;
  }
  
  h1, .h1 {
    font-size: 20px !important;
  }
  
  h2, .h2 {
    font-size: 18px !important;
  }
}

@media only screen and (max-width: 768px) {
  h1, .h1 {
    font-size: 18px !important;
  }
  
  h2, .h2 {
    font-size: 16px !important;
  }
}