/* Live page: lean, mobile-first schedule styles */

/* Generic helpers */
.no-data { padding: 10px; font-style: italic; color: #888; text-align: center; }

/* Section heading on live page reuses site.css .xs_section */

/* Today schedule layout */
.today-schedule { margin: 14px 0 18px; }
.today-schedule h3 { margin: 0 0 10px; font-size: 18px; }

/* Tabs under schedule (Miền Bắc/Nam/Trung) */
.tab-nav {
  position: sticky;
  top: 56px;
  z-index: 5;
  background: #fff;
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.tab {
  appearance: none;
  border: 0;
  background: #f5f5f7;
  color: #111;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.tab:hover { transform: translateY(-1px); }
.tab.is-active { background: #e91e63; color: #fff; box-shadow: 0 4px 12px rgba(233,30,99,.25); }

.tab-panel { padding: 12px 0; }
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { display: block; }

/* 3 columns by default; degrade smoothly on small screens */
.sched-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .sched-columns { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .sched-columns { grid-template-columns: 1fr; } }

/* Schedule card */
.sched-col {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .03);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 160px; /* safe visual baseline */
  overflow: hidden; /* tránh nội dung tràn ra ngoài card */
}

/* Header row pinned height to keep cards even */
.sched-head {
  min-height: var(--head-h, 38px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  white-space: nowrap;
}
.sched-title { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.sched-time { margin-left: auto; font-size: 13px; color: #6b7280; }

/* Province list: responsive grid that wraps nicely on narrow widths */
.prov-list {
  order: 1; /* đảm bảo danh sách nằm trên countdown */
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  align-content: start;
}
.prov-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: #f7f7fb;
  border: 1px solid #eceff4;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  color: #111827;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap; /* không xuống dòng để các cột đều nhau */
  min-height: 30px;    /* chiều cao tối thiểu để hàng đều */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prov-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
.prov-pill:hover, .prov-pill:focus-visible { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); outline: none; }

/* Countdown area anchored at bottom of card */
.sched-countdown {
  order: 2; /* luôn ở dưới cùng của card */
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}
.cd-box {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.cd-box.is-live { background: #ffecec; border-color: #ffc9c9; color: #b91c1c; }
.cd-box.is-done { background: #ecfdf5; border-color: #bbf7d0; color: #065f46; }

/* Results table visuals (match site look) */
.xs_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
}
.xs_table thead th {
  background: #fafafa;
  font-weight: 700;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.xs_table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #f2f2f2;
  vertical-align: top;
}
.xs_table .col-g { width: 64px; text-align: center; font-weight: 700; background: #fffdf7; }
.xs_table .col-province { text-align: center; color: #0b5ed7; font-weight: 700; }
.xs_table .col-values { text-align: center; }

/* Zebra rows */
.xs_table tbody tr:nth-child(odd) td { background: #fff; }
.xs_table tbody tr:nth-child(even) td { background: #fbfdff; }

/* ĐB row highlight (last row) */
.xs_table tbody tr:last-child td { background: #fff3f3; color: #dc2626; font-weight: 700; }

/* Table caption as header band (for region titles) */
.xs_table__caption{
  caption-side: top;
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  background: #f6f8fc;
  border-bottom: 1px solid #e8edf5;
  color: #0b5ed7;
  font-family: inherit;
}


.xs_table .col-values .xs-live-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  justify-content:center;
}

.xs-live-list--pending{
  justify-content:flex-start;
}

.xs-live-list .val-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  background:#edf2ff;
  font-weight:600;
  letter-spacing:.35px;
  color:#1f2937;
  border:1px solid transparent;
  font-size:.95em;
}

.xs-live-list .val-chip--db{
  background:#ffecec;
  color:#dc2626;
}

.val-chip--placeholder{
  background:#f3f4f6;
  color:#9ca3af;
  border-color:#d1d5db;
  font-style:italic;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px 8px;
}

.val-chip--placeholder.val-chip--db{
  background:#fee2e2;
  color:#f87171;
  border-color:#fca5a5;
}

.val-chip--next{
  background:#fff6db;
  color:#92400e;
  border-color:#facc15;
  font-style:normal;
  font-weight:600;
}

.val-chip--next.val-chip--db{
  background:#fee4e2;
  color:#b91c1c;
  border-color:#fb7185;
}

.xs-live-list .val-status{
  font-size:12px;
  font-weight:500;
  color:#92400e;
  align-self:center;
}

.xs-live-list .digit-holder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.3em;
  height:1.3em;
  border-radius:5px;
  background:#e7eaf3;
  color:#6b7280;
  font-size:.85em;
}

.xs-live-list .digit-holder .fa-spin{
  font-size:.9em;
}

.roll-digit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35em;
  height:1.35em;
  border-radius:5px;
  margin:0 .5px;
  font-weight:700;
  font-family:'Fira Mono', 'Courier New', monospace;
  font-size:.95em;
  box-shadow:0 1px 4px rgba(15,23,42,0.08);
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}

.roll-digit[data-color="0"]{ background:#fee2e2; color:#b91c1c; }
.roll-digit[data-color="1"]{ background:#e0e7ff; color:#3730a3; }
.roll-digit[data-color="2"]{ background:#dcfce7; color:#047857; }
.roll-digit[data-color="3"]{ background:#fef3c7; color:#b45309; }
.roll-digit[data-color="4"]{ background:#ede9fe; color:#6b21a8; }

.xs-live-list--pending .val-status{
  margin-left:2px;
}

.xs-live-list .val-chip--next.val-chip--db + .val-status,
.xs-live-list .val-chip--placeholder.val-chip--db + .val-status{
  color:#b91c1c;
}

/* number chips */
.xs_values { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.xs_prize { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #edf2ff; font-weight: 600; letter-spacing: .5px; }
.xs_prize.prize_db { background: #ffecec; color: #dc2626; }
.xs_prize.color_red { color: #dc2626; }

@media (max-width: 640px){
  .xs_table{ font-size: 14px; }
  .xs_prize{ padding: 2px 6px; }
}

/* LOTO tables under results */
/* LOTO tables */
.loto-pair{ margin:8px 0 16px; }
.table-loto, .table-loto-pair{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; table-layout: fixed; }
.loto-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin:8px 0 16px; }
.table-loto thead th, .table-loto-pair thead th{ background:#f6f8fc; text-align:left; padding:8px 10px; border-bottom:1px solid #e8edf5; }
.table-loto tbody th, .table-loto-pair tbody th{ width:42px; text-align:center; background:#fffdf7; }
.table-loto td, .table-loto th, .table-loto-pair td, .table-loto-pair th{ padding:8px 10px; border-bottom:1px solid #f2f2f2; white-space: nowrap; }
.table-loto tbody tr:nth-child(even) td, .table-loto tbody tr:nth-child(even) th,
.table-loto-pair tbody tr:nth-child(even) td, .table-loto-pair tbody tr:nth-child(even) th{ background:#fbfdff; }
.table-loto-pair .sep{ width:8px; border-left:1px solid #eee; }
@media (max-width: 520px){
  .table-loto, .table-loto-pair{ font-size: 12.5px; }
}
@media (max-width: 360px){
  .table-loto, .table-loto-pair{ font-size: 11.5px; }
}

/* Loto switch (MN/MT) */
.loto-switch{ margin: 6px 0 16px; }
.loto-tabs{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding: 4px 0; }
.loto-tabs .chip{ padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; white-space:nowrap; cursor:pointer; }
.loto-tabs .chip.active{ background:#111; color:#fff; border-color:#111; }
.loto-panels .panel{ margin-top:8px; }

/* Siêu nhỏ: danh sách tỉnh 1 cột để tránh tràn */
/* Mobile: luôn chia đều 2 cột để tránh một bên trống */
@media (max-width: 480px){
  .prov-list{ display:block; column-count:2; column-gap:6px; }
  .prov-list > li{ break-inside: avoid; margin-bottom:6px; }
  /* Giữ flex để chấm xanh hiển thị đúng kích thước */
  .prov-pill{ display:flex; align-items:center; gap:8px; width:100%; padding:5px 8px; font-size:13px; }
  .prov-pill .dot{ display:inline-block; flex:0 0 6px; }
}
@media (max-width: 320px){
  .prov-list{ column-count:1; }
}