/* ====================================================================
   Brand Theme Stylesheet - VLXX.VN
   Color Palette strictly extracted from Official Brand Logo:
   - Royal Navy Blue: #084594 (KetQua text, Ball 68)
   - Deep Accent Blue: #0551a5
   - Vibrant Lottery Orange: #f26522 (XoSo text, Ball 39, swoop)
   - Emerald Green: #0e872e (.NET.VN badge, Ball 27)
   ==================================================================== */

:root {
  --bs-body-font-family: Arial, sans-serif !important;
  --bs-body-font-size: 15px !important;
  --bs-body-line-height: 25px !important;
  --bs-body-color: #000 !important;
  --brand-color: #084594 !important;
  --sub-brand-color: #0551a5 !important;
  --brand-blue: #084594 !important;
  --brand-orange: #f26522 !important;
  --brand-green: #0e872e !important;
  --highlight-color: #f26522 !important;
  --button-color: #0e872e !important;
  --link-color: #084594 !important;
}

/* Global Typography - Toàn trang */
body {
  font-family: Arial, sans-serif !important;
  line-height: 25px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

/* 1. Header & Logo Styling */
.header .logo {
  display: flex !important;
  align-items: center !important;
}

.header .logo img {
  width: auto !important;
  max-width: 220px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.header .divider {
  height: 48px !important;
}

.sidebar-header .logo img,
.admin-brand img,
.navbar-brand img {
  width: auto !important;
  max-width: 175px !important;
  max-height: 55px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

@media (max-width: 768px) {
  .header .logo img {
    max-width: 155px !important;
    max-height: 48px !important;
  }
  .sidebar-header .logo img,
  .admin-brand img {
    max-width: 135px !important;
    max-height: 42px !important;
  }
}

/* 2. Result Board Frame & Gradients */
.result-board {
  background: linear-gradient(135deg, #0551a5 0%, #084594 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(8, 69, 148, 0.15) !important;
}

.live-result-board {
  background: linear-gradient(135deg, #0551a5 0%, #084594 100%) !important;
  box-shadow: 0 4px 15px rgba(8, 69, 148, 0.15) !important;
}

.live-prize-box {
  background: linear-gradient(109deg, #084594, #0551a5) !important;
}

.bg-color-brand {
  background-color: #084594 !important;
}

.bg-color-sub-brand {
  background-color: #0551a5 !important;
}

.bg-linear-gradient {
  background-image: linear-gradient(109deg, #084594, #0551a5) !important;
}

.color-brand {
  color: #084594 !important;
}

.color-sub-brand {
  color: #f26522 !important;
}

/* 3. Special Prize & Number Highlights in Vibrant Orange */
.txt-special-prize,
.color-highlight,
.color-highlight.fw-bold {
  color: #f26522 !important;
  font-weight: 700 !important;
}

/* 4. Navigation Bar - Giữ nguyên quy tắc thiết kế chuẩn gốc */
.nav-bar {
  border-top: 1px solid #dee2e6 !important;
  border-bottom: 2px solid #084594 !important;
  background-color: #ffffff !important;
}

.nav-bar .nav-links {
  color: var(--content-color, #212529) !important;
  transition: background-color 0.15s ease !important;
}

.nav-bar .nav-links:hover,
.nav-bar .nav-items:hover > .nav-links {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--content-color, #212529) !important;
}

.nav-bar .dropdown-links {
  color: var(--content-color, #212529) !important;
}

.nav-bar .dropdown-links:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--content-color, #212529) !important;
}

.header .utilities a:hover,
.header .utilities a:hover > i {
  color: #084594 !important;
}

/* 5. Breadcrumb - Giữ nguyên quy tắc thiết kế gốc chuẩn Bootstrap */
.breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 0.75rem !important;
}

.breadcrumb-item,
.breadcrumb-item.active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.breadcrumb-item a {
  color: var(--content-color, #212529) !important;
  text-decoration: none !important;
}

.breadcrumb-item a:hover {
  text-decoration: underline !important;
  color: #084594 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d !important;
}

.breadcrumb-item.active {
  color: #6c757d !important; /* Màu xám chuẩn gốc của Bootstrap / ketqua.vn */
  font-weight: 400 !important;
}

/* 8. Buttons */
.btn-primary {
  background-color: #084594 !important;
  border-color: #084594 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0551a5 !important;
  border-color: #0551a5 !important;
  color: #ffffff !important;
}

.btn-brand,
.btn-orange {
  background-color: #f26522 !important;
  border-color: #f26522 !important;
  color: #ffffff !important;
}

.btn-brand:hover,
.btn-brand:focus,
.btn-orange:hover {
  background-color: #d9531e !important;
  border-color: #d9531e !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: #0e872e !important;
  border-color: #0e872e !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #0a6823 !important;
  border-color: #0a6823 !important;
  color: #ffffff !important;
}

/* 9. Scoped Active & Selected States (NO global .active pollution) */
.nav-pills .nav-link.active,
.tab-btn.active,
.btn-tab.active,
.view-mode .active {
  background-color: #084594 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.page-item.active .page-link {
  background-color: #084594 !important;
  border-color: #084594 !important;
  color: #ffffff !important;
}

.selected {
  background-color: #084594 !important;
  color: #ffffff !important;
}

.focus-box {
  border-color: #084594 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #084594 !important;
  border-color: #084594 !important;
}

/* 10. Badges & Accents */
.badge.bg-brand,
.blog-badge {
  background-color: #f26522 !important;
  color: #ffffff !important;
}

.badge.bg-primary {
  background-color: #084594 !important;
  color: #ffffff !important;
}

.badge.bg-success {
  background-color: #0e872e !important;
  color: #ffffff !important;
}

.category-pill:hover,
.category-pill.active {
  background: #084594 !important;
  color: #ffffff !important;
  border-color: #084594 !important;
}

/* 11. Admin Sidebar */
#sidebar {
  background: linear-gradient(180deg, #084594 0%, #05336d 100%) !important;
}

#sidebar .nav-link.active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-left: 4px solid #f26522 !important;
  color: #ffffff !important;
}

#sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffb88c !important;
}

/* 12. Calendar Utility Styling */
.txt-calendar {
  line-height: 80px !important;
}