/*
 * KQXS Hub — khung bảng kết quả. Màu đổi trong Cài đặt → KQXS Hub (biến --akqxs-*),
 * ghi đè bất kỳ phần tử nào bằng class akqxs-* (xem đầu file includes/render.php).
 */

.akqxs {
  --akqxs-primary: #c62828;
  --akqxs-text: #1f2937;
  --akqxs-muted: #6b7280;
  --akqxs-border: #e5e7eb;
  --akqxs-head-bg: #f3f4f6;
  --akqxs-head-text: #111827;
  --akqxs-stripe: #fafafa;
  --akqxs-special: #c62828;
  --akqxs-ball-bg: #c62828;
  --akqxs-ball-text: #ffffff;
  --akqxs-radius: 4px;
  color: var(--akqxs-text);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.5em;
  line-height: 1.4;
}
.akqxs *, .akqxs *::before, .akqxs *::after { box-sizing: border-box; }

/* ── Tiêu đề ─────────────────────────────────────────────────────────── */
.akqxs-title {
  background: var(--akqxs-primary);
  color: #fff;
  padding: 8px 12px;
  font-weight: 700;
  border-radius: var(--akqxs-radius) var(--akqxs-radius) 0 0;
}
.akqxs-title-date, .akqxs-title-station { font-weight: 400; opacity: .9; }
.akqxs-subtitle { font-weight: 700; margin: 1em 0 .4em; color: var(--akqxs-head-text); }
.akqxs-note { color: var(--akqxs-muted); font-size: .875em; margin: .4em 0; }
.akqxs-muted { color: var(--akqxs-muted); }

/* ── Bảng chung ──────────────────────────────────────────────────────── */
.akqxs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.akqxs table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  background: #fff;
  font-size: 15px;
}
.akqxs th, .akqxs td {
  border: 1px solid var(--akqxs-border);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
.akqxs thead th, .akqxs .akqxs-head th {
  background: var(--akqxs-head-bg);
  color: var(--akqxs-head-text);
  font-weight: 700;
}
.akqxs tbody tr:nth-child(even) td { background: var(--akqxs-stripe); }
.akqxs .akqxs-label {
  width: 56px;
  background: var(--akqxs-head-bg);
  color: var(--akqxs-muted);
  font-weight: 600;
  font-size: .875em;
}

/* ── Bảng kết quả ────────────────────────────────────────────────────── */
.akqxs-board { table-layout: fixed; }
.akqxs-board .akqxs-num {
  display: inline-block;
  padding: 1px 4px;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: .5px;
}
/* Miền Nam / Trung: mỗi số một dòng trong cột đài */
.akqxs-board-mn .akqxs-num, .akqxs-board-mt .akqxs-num { display: block; }
/* Bảng MỘT đài (miền Bắc, trang tỉnh): số trải ngang, chia đều trong ô */
.akqxs-board.akqxs-cols-1 .akqxs-num { display: inline-block; font-size: 1.35em; }
.akqxs-board.akqxs-cols-1 .akqxs-g2 .akqxs-num,
.akqxs-board-mn.akqxs-cols-1 .akqxs-g3 .akqxs-num,
.akqxs-board-mt.akqxs-cols-1 .akqxs-g3 .akqxs-num { width: 50%; }
.akqxs-board-mb .akqxs-g3 .akqxs-num,
.akqxs-board.akqxs-cols-1 .akqxs-g5 .akqxs-num,
.akqxs-board.akqxs-cols-1 .akqxs-g6 .akqxs-num { width: 33.33%; }
.akqxs-board.akqxs-cols-1 .akqxs-g4 .akqxs-num,
.akqxs-board-mb .akqxs-g7 .akqxs-num { width: 25%; }
.akqxs-board-mn.akqxs-cols-1 .akqxs-g5 .akqxs-num,
.akqxs-board-mt.akqxs-cols-1 .akqxs-g5 .akqxs-num { width: 100%; }

.akqxs-board .akqxs-special .akqxs-num { color: var(--akqxs-special); font-size: 1.6em; }
/* Giải vừa về (trực tiếp): tô nền như các site lớn, nhạt dần */
.akqxs-num.akqxs-new { background: #fdeebd; color: #e07b00; animation: akqxs-flash 4s ease-out forwards; }
@keyframes akqxs-flash { 0%, 70% { background: #fdeebd; } 100% { background: transparent; } }
.akqxs-board .akqxs-g8 .akqxs-num, .akqxs-board-mb .akqxs-g7 .akqxs-num { color: var(--akqxs-special); font-size: 1.35em; }
.akqxs-board .akqxs-madb { font-weight: 600; color: var(--akqxs-muted); }
/* Bốn đài thì chữ nhỏ lại cho vừa màn hình hẹp */
.akqxs-cols-4 .akqxs-num { font-size: 1em; }
.akqxs-cols-4 .akqxs-special .akqxs-num { font-size: 1.35em; }

/* Ô chờ khi đang quay */
.akqxs-wait { min-height: 1.4em; }
.akqxs-wait::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  background: var(--akqxs-loading) center / contain no-repeat;
}
/* Ô đang quay: số nhảy liên tục trên nền vàng */
.akqxs-num.akqxs-rolling { background: #fdeebd; color: #e07b00; font-variant-numeric: tabular-nums; }

/* ── Lô tô ───────────────────────────────────────────────────────────── */
.akqxs-loto { table-layout: fixed; }
.akqxs-loto td { text-align: left; }
.akqxs-loto-dual .akqxs-loto-heads { text-align: right; }
.akqxs-loto-dual .akqxs-label { color: var(--akqxs-primary); font-weight: 700; }
.akqxs-loto-num { display: inline-block; margin-right: 8px; font-weight: 600; }

/* ── Trực tiếp ───────────────────────────────────────────────────────── */
.akqxs-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--akqxs-radius);
  font-size: .875em;
  font-weight: 600;
  background: var(--akqxs-head-bg);
  color: var(--akqxs-muted);
}
.akqxs-live-status.akqxs-is-live { background: #fef2f2; color: var(--akqxs-primary); }
.akqxs-live-status.akqxs-is-done { background: #ecfdf5; color: #047857; }
.akqxs-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akqxs-primary);
  animation: akqxs-pulse 1.2s ease-in-out infinite;
}
@keyframes akqxs-pulse { 50% { opacity: .25; } }

/* ── Vietlott & điện toán ────────────────────────────────────────────── */
.akqxs-vietlott, .akqxs-dientoan { border: 1px solid var(--akqxs-border); border-radius: var(--akqxs-radius); }
.akqxs-vietlott > *:not(.akqxs-title), .akqxs-dientoan > *:not(.akqxs-title) { margin-left: 12px; margin-right: 12px; }
.akqxs-vietlott .akqxs-table-wrap, .akqxs-dientoan .akqxs-table-wrap { width: auto; }
.akqxs-balls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; margin-bottom: 12px; }
.akqxs-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--akqxs-ball-bg);
  color: var(--akqxs-ball-text);
  font-weight: 700;
  font-size: 1.05em;
}
.akqxs-ball-bonus { background: #f59e0b; }
.akqxs-jackpot { margin: 6px 0; }
.akqxs-jackpot-value { color: var(--akqxs-special); font-size: 1.15em; }
.akqxs-prizes .akqxs-num { display: inline-block; margin: 0 6px; font-weight: 700; color: var(--akqxs-special); }
.akqxs-rule { font-size: .8em; color: var(--akqxs-muted); }
.akqxs-dot { display: inline-block; width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; background: var(--akqxs-ball-bg); }
.akqxs-dot-bonus { background: #f59e0b; }

/* ── Thống kê ────────────────────────────────────────────────────────── */
.akqxs-stats .akqxs-title { margin-bottom: 8px; }
.akqxs-stat-table .akqxs-num { font-weight: 700; }
.akqxs-stat-table .akqxs-label { width: auto; white-space: nowrap; color: var(--akqxs-text); }
.akqxs-week td { min-width: 64px; }
.akqxs-grid-date { display: block; font-size: .75em; color: var(--akqxs-muted); }
.akqxs-matrix th, .akqxs-matrix td { padding: 3px 5px; font-size: .8em; }
.akqxs-hit-1 { background: #fee2e2 !important; }
.akqxs-hit-2 { background: #fca5a5 !important; }
.akqxs-hit-3 { background: #f87171 !important; color: #fff; }
.akqxs-calendar td { font-size: .85em; }

/* ── Dò vé ───────────────────────────────────────────────────────────── */
.akqxs-check-form, .akqxs-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.akqxs-field { display: flex; flex-direction: column; gap: 4px; font-size: .875em; color: var(--akqxs-muted); }
.akqxs-field input, .akqxs-field select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--akqxs-border);
  border-radius: var(--akqxs-radius);
  font-size: 15px;
  color: var(--akqxs-text);
  background: #fff;
}
.akqxs-button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--akqxs-radius);
  background: var(--akqxs-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.akqxs-check-result { padding: 10px 12px; margin-bottom: 10px; border-radius: var(--akqxs-radius); font-weight: 600; background: var(--akqxs-head-bg); }
.akqxs-check-result.akqxs-is-win { background: #ecfdf5; color: #047857; }
.akqxs-check-result.akqxs-is-lose { color: var(--akqxs-muted); }

/* ── Chip, Pascal, quay thử ─────────────────────────────────────────── */
.akqxs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1em; }
.akqxs-chip { padding: 2px 8px; border: 1px solid var(--akqxs-border); border-radius: var(--akqxs-radius); font-weight: 600; }
.akqxs-prize { margin-left: 2px; color: var(--akqxs-muted); font-weight: 400; }
.akqxs-special-text { color: var(--akqxs-special); }
.akqxs-pascal { margin-bottom: 1em; padding: 12px; border: 1px solid var(--akqxs-border); border-radius: var(--akqxs-radius); text-align: center; }
.akqxs-pascal-source { margin-bottom: 10px; color: var(--akqxs-muted); font-size: .9em; }
.akqxs-pascal-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.akqxs-pascal-digit {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--akqxs-border); border-radius: var(--akqxs-radius); font-weight: 600; background: var(--akqxs-stripe);
}
.akqxs-pascal-special { color: var(--akqxs-special); border-color: var(--akqxs-special); }
.akqxs-pascal-result { background: var(--akqxs-primary); border-color: var(--akqxs-primary); color: #fff; }
.akqxs-pascal-pair { margin-top: 10px; font-weight: 600; }
.akqxs-pascal-pair .akqxs-ball { margin: 0 4px; }
.akqxs-trial-roll { margin-bottom: 12px; }
.akqxs-trial-roll:disabled { opacity: .6; cursor: wait; }
.akqxs-ball.akqxs-wait { background: var(--akqxs-head-bg); }
.akqxs-ball.akqxs-wait::before { width: 60%; height: 60%; }

/* ── Trang ngày ─────────────────────────────────────────────────────── */
.akqxs-day-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.akqxs-day-nav a { text-decoration: none; }
.akqxs-day-regions { display: flex; flex-wrap: wrap; gap: 4px; }
.akqxs-day-region { padding: 4px 10px; border: 1px solid var(--akqxs-border, #e5e7eb); border-radius: 4px; color: inherit; }
.akqxs-day-region.akqxs-is-active { background: var(--akqxs-primary, #c62828); border-color: var(--akqxs-primary, #c62828); color: #fff; }
.akqxs-empty { padding: 12px; margin-bottom: 1em; border: 1px dashed var(--akqxs-border); color: var(--akqxs-muted); }

/* ── Quay thử: bảng chọn ─────────────────────────────────────────────── */
.akqxs-trial-picker { margin-bottom: 14px; border: 1px solid var(--akqxs-primary); border-radius: var(--akqxs-radius); overflow: hidden; }
.akqxs-tabs { display: flex; flex-wrap: wrap; }
.akqxs-tab {
  flex: 1 1 25%; padding: 10px 8px; border: 0; border-right: 1px solid var(--akqxs-border);
  background: var(--akqxs-head-bg); color: var(--akqxs-text); cursor: pointer; font-size: 15px;
}
.akqxs-tab:last-child { border-right: 0; }
.akqxs-tab.akqxs-is-active { background: var(--akqxs-primary); color: #fff; font-weight: 700; }
.akqxs-trial-form { justify-content: center; padding: 14px 12px 4px; margin: 0; }
.akqxs-trial-today { padding: 4px 12px 12px; font-size: .9em; color: var(--akqxs-muted); }
.akqxs-trial-today > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.akqxs-trial-today .akqxs-chip { cursor: pointer; background: var(--akqxs-head-bg); font-weight: 400; font-size: 14px; }
.akqxs-trial .akqxs-only-vl { display: none; }
.akqxs-trial.akqxs-trial-vietlott .akqxs-only-vl { display: flex; }
.akqxs-trial.akqxs-trial-vietlott .akqxs-only-xs { display: none; }
.akqxs-headtail-count .akqxs-zero { color: var(--akqxs-muted); }

/* ── Huy hiệu "Đang trực tiếp" ───────────────────────────────────────── */
.akqxs-live-badge { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 10px 14px; background: #fdf8e1; border-radius: var(--akqxs-radius); }
.akqxs-live-badge[hidden] { display: none !important; }
.akqxs-live-badge-item { display: flex; align-items: center; gap: 8px; }
.akqxs-live-badge a { color: var(--akqxs-primary); font-weight: 700; text-decoration: none; }
.akqxs-live-badge-dot { width: 14px; height: 14px; border-radius: 50%; background: #e53935; animation: akqxs-pulse 1.2s ease-in-out infinite; }

/* ── Lịch quay ───────────────────────────────────────────────────────── */
.akqxs-schedule .akqxs-is-today td, .akqxs-schedule .akqxs-is-today th { background: #fff7ed !important; font-weight: 600; }

.akqxs-error { padding: 10px 12px; border: 1px dashed var(--akqxs-border); color: var(--akqxs-muted); font-size: .9em; }

@media (max-width: 600px) {
  .akqxs table { font-size: 13px; }
  .akqxs th, .akqxs td { padding: 4px; }
  .akqxs .akqxs-label { width: 40px; }
  .akqxs-board .akqxs-special .akqxs-num { font-size: 1.3em; }
  .akqxs-cols-4 .akqxs-num { font-size: .9em; letter-spacing: 0; }
}