/* ========================================
   Lottery Dashboard — Lodev1 Refactored CSS
   ──────────────────────────────────────────
   Design System:
     Spacing scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48
     Radius scale : 4 · 6 · 8 · 12
     Font sizes   : 12 · 13 · 14 · 15 · 16 · 18 · 20 · 24
   ======================================== */

/* ─── Design Tokens ───────────────────── */
:root {
  /* Color */
  --c-primary:       #C41A2E;
  --c-primary-dark:  #8B1520;
  --c-primary-light: rgba(196,26,46,.06);
  --c-gold:          #F5C342;
  --c-gold-light:    #FFD96A;
  --c-gold-muted:    rgba(245,195,66,.12);
  --c-brown-dark:    #2A0B12;
  --c-brown:         #381B00;
  --c-text:          #1E1E1F;
  --c-text-muted:    #6B6D70;
  --c-text-light:    #9B9DA0;
  --c-bg:            #FAFAF8;
  --c-bg-page:       #3A200D;
  --c-white:         #FFFFFF;
  --c-border:        #E8E5E1;
  --c-border-light:  #F0EDEA;
  --c-row-alt:       #FAF8F5;

  /* Spacing */
  --sp-4:  4px;
  --sp-8:  8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(42,11,18,.06);
  --shadow-md:  0 2px 8px rgba(42,11,18,.08);
  --shadow-lg:  0 4px 16px rgba(42,11,18,.10);

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


/* ═══════════════════════════════════════
   WIDGET CONTAINER
   ═══════════════════════════════════════ */
.lottery-widget {
  border: 2px solid var(--c-gold);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--shadow-lg);
  margin: var(--sp-16) 0;
}


/* ═══════════════════════════════════════
   A · REGION TABS
   ═══════════════════════════════════════ */
.tabs-list {
  display: flex;
  background: linear-gradient(135deg, #4A2510 0%, #5C3118 50%, #4A2510 100%);
  padding: var(--sp-8) var(--sp-12);
  gap: var(--sp-4);
  margin: 0;
  align-items: center;
  border-bottom: 2px solid var(--c-gold);
}

.my-custom-tab {
  padding: var(--sp-8) var(--sp-24);
  border-radius: 20px;
  background: transparent;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.my-custom-tab:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.15);
}

.my-custom-tab.is-active {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
  box-shadow: 0 2px 8px rgba(196,26,46,.3);
}

.single-region-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-text);
  margin: 0;
  padding: var(--sp-12) 0 var(--sp-4);
}


/* ═══════════════════════════════════════
   B · STICKY FILTER BAR
   ═══════════════════════════════════════ */
.lottery-sticky {
  background: var(--c-bg);
  padding: var(--sp-16) var(--sp-20);
  border-bottom: 1px solid var(--c-border);
}

.lottery-sticky.is-stuck {
  box-shadow: var(--shadow-md);
}

.lottery-filter-bar {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.filter-group {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
}

/* ─── Icons in filter ─── */
.icon-select {
  position: relative;
}

.select-icon {
  position: absolute;
  left: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.lucide-calendar {
  position: absolute;
  left: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ─── Shared input / select base ─── */
#datepicker-wrapper {
  position: relative;
  display: inline-block;
  width: 33%;
}

.flatpickr-input,
#day-dropdown,
#province-dropdown,
.highlight-input {
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  background: var(--c-bg) !important;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: border-color .2s;
}

.flatpickr-input:focus,
#day-dropdown:focus,
#province-dropdown:focus,
.highlight-input:focus {
  border-color: var(--c-gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--c-gold-muted);
}

.flatpickr-input {
  padding: 0 var(--sp-12) 0 36px !important;
  min-width: 150px;
  width: 100%;
}

#day-dropdown,
#province-dropdown {
  padding: 0 var(--sp-32) 0 36px !important;
  min-height: 40px;
}

.highlight-input {
  padding: 0 var(--sp-12) 0 36px !important;
  background: var(--c-white) !important;
  min-width: 140px;
}

.width-50 { width: 50%; }

/* ─── Select wrapper arrow ─── */
.select-wrapper {
  position: relative;
  display: inline-block;
  min-width: 150px;
  width: 33.33%;
}

.select-wrapper::after,
#datepicker-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-12);
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236B6D70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  z-index: 2;
}

#datepicker-wrapper svg {
  position: absolute;
  left: var(--sp-12);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--c-text-muted);
}

/* ─── Radio / Scan group ─── */
.filter-group2 {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 40px;
  padding: 0 var(--sp-12) !important;
  background: var(--c-bg) !important;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  width: 100%;
}

.radio-group {
  display: flex;
  gap: var(--sp-16);
  padding: var(--sp-8) 0;
}

.radio-option,
.filter-group2 .radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: 0 var(--sp-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text) !important;
  cursor: pointer;
  transition: color .2s;
  height: 100%;
  line-height: 1;
}

.radio-option:hover {
  color: var(--c-primary) !important;
}

.radio-group input[type="radio"],
.filter-group2 input[type="radio"] {
  accent-color: var(--c-primary);
  transform: scale(1.2);
  cursor: pointer;
  margin: 0;
}


/* ═══════════════════════════════════════
   C · SECTION HEADERS
   ═══════════════════════════════════════ */
.table-lottery-header {
  background: var(--c-row-alt);
  color: var(--c-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  padding: var(--sp-12) var(--sp-16) !important;
  margin: 0;
  text-transform: capitalize;
  border-left: 4px solid var(--c-primary);
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
}

.lottery-header-content {
  padding: 0;
}

.lottery-title-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.lottery-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
}

.lottery-separator {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--c-border);
  margin: 0 var(--sp-8);
  vertical-align: middle;
}

.lottery-date {
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
}

.text-time-countdown {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-muted);
  margin: 0 var(--sp-4);
  text-transform: lowercase;
}

.line-gradient {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  margin: var(--sp-4) 0 0;
}

/* Province column header inside table */
.wrapper-table-data-region .table-lottery-header {
  border-radius: 0;
}


/* ═══════════════════════════════════════
   D · COUNTDOWN & NOTICE BOXES
   ═══════════════════════════════════════ */

/* Countdown number boxes */
.countdown-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  vertical-align: middle;
}

.countdown-display {
  display: inline-flex;
  gap: var(--sp-4);
  align-items: center;
}

.custom-countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
}

.custom-countdown-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  background: rgba(196, 26, 46, .08);
  border: 1.5px solid var(--c-primary);
  padding: 2px var(--sp-8);
  border-radius: var(--r-sm);
  min-width: 30px;
  min-height: 24px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: .5px;
  box-sizing: border-box;
}

.custom-countdown-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Notice / info banners */
.lottery-today-notice {
  padding: var(--sp-12) var(--sp-20);
  background: var(--c-gold-muted);
  border-left: 4px solid var(--c-gold);
  color: var(--c-brown);
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  margin: var(--sp-16) 0;
}

.countdown-timer {
  padding: var(--sp-12) var(--sp-20);
  background: var(--c-primary-light);
  border-left: 4px solid var(--c-primary);
  color: var(--c-primary);
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  margin: var(--sp-16) 0;
}

.live-draw-status {
  padding: var(--sp-12) var(--sp-20);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  border-left: 4px solid var(--c-gold);
  color: var(--c-white);
  border-radius: var(--r-md);
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  margin: var(--sp-16) 0;
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes pulse { 50% { opacity: .75; } }

.pulse-icon img {
  border: 2px solid var(--c-gold) !important;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}


/* ═══════════════════════════════════════
   E · RESULT TABLE
   ═══════════════════════════════════════ */
.wrapper-table-data-region {
  margin: var(--sp-16) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  background: var(--c-white);
}

.table-data-region {
  border: none !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}

.table-data-region thead th {
  border: none !important;
}

/* Province title row */
.table-title th,
.prize-name {
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  padding: var(--sp-8) var(--sp-12) !important;
  color: var(--c-text-muted);
  font-weight: 600;
  text-transform: capitalize;
  border-bottom: 1px solid var(--c-border) !important;
}

.title-province {
  color: var(--c-text) !important;
  font-size: 15px !important;
  font-weight: 700;
  background: var(--c-row-alt);
}

.col-giai {
  width: 130px;
  white-space: nowrap;
  background: var(--c-row-alt);
  border-right: 1px solid var(--c-border) !important;
}

.col-province {
  width: auto;
}

.prize-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-text-muted);
  white-space: nowrap;
  padding: var(--sp-12) var(--sp-8) !important;
  vertical-align: middle;
  border-right: 1px solid var(--c-border) !important;
}

/* Table rows */
.table-data-region tbody tr {
  border-bottom: 1px solid var(--c-border-light);
  transition: background .15s;
}

.table-data-region tbody tr:last-child {
  border-bottom: none;
}

.table-data-region tbody tr:nth-child(odd) {
  background: var(--c-white);
}

.table-data-region tbody tr:nth-child(even) {
  background: var(--c-row-alt);
}

.table-data-region tbody tr:hover {
  background: rgba(245,195,66,.04);
}

/* ─── Prize values ─── */
.prize-value {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  color: var(--c-text);
  padding: var(--sp-8) var(--sp-12) !important;
  vertical-align: middle;
  letter-spacing: .3px;
}

.prize-special {
  color: var(--c-primary) !important;
  font-size: 22px;
  font-weight: 800;
  line-height: 2;
  background: linear-gradient(
    180deg,
    rgba(196,26,46,.03) 0%,
    rgba(245,195,66,.05) 100%
  );
}

.bg-special {
  background: var(--c-row-alt);
}

.prize-col .number {
  display: block;
  padding: 2px 0;
}

.number .highlighted {
  background-color: var(--c-gold);
  border-radius: var(--r-sm);
  padding: 1px 4px;
}

/* North prize grid */
.north-prize {
  display: flex;
  gap: 0;
  justify-content: space-around;
}

.north-prize-6 {
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.north-prize-6 > * {
  flex: 0 0 calc(33.33% - 6px);
  box-sizing: border-box;
}

.north-prize[data-quantity="2"] { grid-template-columns: repeat(2,1fr); }
.north-prize[data-quantity="3"],
.north-prize[data-quantity="6"],
.prize-row.bottom-data           { grid-template-columns: repeat(3,1fr); }
.north-prize[data-quantity="4"],
.prize-row.top-data              { grid-template-columns: repeat(4,1fr); }
.north-prize[data-quantity="5"]  { grid-template-columns: repeat(5,1fr); }
.north-prize[data-quantity="7"]  { grid-template-columns: repeat(7,1fr); }

.number,
.north-prize,
.north-prize * {
  border: none;
  outline: none;
}

.block-display { display: block; }


/* ═══════════════════════════════════════
   F · HISTORY SECTION
   ═══════════════════════════════════════ */
.text-title-region {
  padding: var(--sp-16) var(--sp-20);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  margin: var(--sp-16) 0;
}

.text-title-region h3 {
  margin-bottom: var(--sp-4);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
}

.text-title-region p,
.text-title-region .description-live {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--c-text-muted);
  margin: 0;
}


/* ═══════════════════════════════════════
   G · TAB CONTENT PANELS
   ═══════════════════════════════════════ */
#lottery-content-1,
#lottery-content-2,
#lottery-content-3 {
  background: var(--c-bg);
  padding: var(--sp-16) var(--sp-20) var(--sp-24);
}

.mb-10 { margin-bottom: var(--sp-8); }


/* ═══════════════════════════════════════
   H · LOADING OVERLAY
   ═══════════════════════════════════════ */
.lottery-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(250,250,248,.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-bottom: var(--sp-8);
}

/* In-cell loading spinner */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }





/* ═══════════════════════════════════════
   J · DISABLED STATES
   ═══════════════════════════════════════ */
input[disabled],
select[disabled],
button[disabled],
.disabled {
  cursor: not-allowed !important;
  opacity: .5;
}

#province-dropdown:not([disabled]) {
  cursor: pointer !important;
}

#province-dropdown:not([disabled]):hover {
  border-color: var(--c-primary) !important;
}


/* ═══════════════════════════════════════
   K · RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .filter-group           { gap: var(--sp-8); }
  .select-wrapper,
  .highlight-input,
  #datepicker-wrapper,
  .flatpickr-input         { min-width: 130px; }
  .lottery-filter-bar > *:not(.live-btn) { width: 100% !important; }
}

@media (max-width: 768px) {
  .filter-group            { gap: var(--sp-4); flex-wrap: wrap; }
  .select-wrapper,
  .highlight-input         { min-width: 0; flex: 1; }
  .width-50                { width: 100% !important; }
  .my-custom-tab           { padding: var(--sp-8) var(--sp-20); font-size: 14px; }
  .tabs-list               { padding: var(--sp-8) var(--sp-8) 0; }
  .lottery-sticky           { padding: var(--sp-12); }
  #lottery-content-1,
  #lottery-content-2,
  #lottery-content-3        { padding: var(--sp-12); }
  .prize-value              { font-size: 16px; }
  .prize-special            { font-size: 20px; }
  .table-lottery-header     { font-size: 16px; }
}

@media (max-width: 480px) {
  .filter-group {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .select-wrapper,
  #datepicker-wrapper {
    width: 100% !important;
  }

  .lottery-filter-bar > *:not(.live-btn) {
    width: 100% !important;
  }

  .north-prize[data-quantity="2"],
  .north-prize[data-quantity="3"],
  .north-prize[data-quantity="4"],
  .north-prize[data-quantity="5"],
  .north-prize[data-quantity="6"],
  .north-prize[data-quantity="7"],
  .prize-row.top-data,
  .prize-row.bottom-data {
    grid-template-columns: 1fr;
  }

  .prize-value              { font-size: 14px; line-height: 1.6; }
  .prize-special            { font-size: 17px; }
  .table-data-region thead th { font-size: 12px; }
  .col-giai                 { width: 80px; }
  .my-custom-tab            { padding: var(--sp-8) var(--sp-16); font-size: 13px; }
  .tabs-list                { padding: var(--sp-4) var(--sp-4) 0; gap: 2px; }
  .single-region-title      { font-size: 18px; }
  .lottery-sticky            { padding: var(--sp-8); }
  #lottery-content-1,
  #lottery-content-2,
  #lottery-content-3         { padding: var(--sp-8); }
  .custom-countdown-num     { font-size: 16px; min-width: 34px; padding: 3px 8px; }
  .filter-group2 .radio-option { font-size: 12px; padding: 0 2px; gap: 4px; }
  .lottery-today-notice,
  .countdown-timer,
  .live-draw-status          { font-size: 13px; padding: var(--sp-8) var(--sp-12); }
}