/* ═══════════════════════════════════════════════════════════════
   BẢNG KÈO NHÀ CÁI – bang-keo.css  v2.0
   Pixel-perfect clone của giao diện kèo thực tế Việt Nam
═══════════════════════════════════════════════════════════════ */

/* ── Reset inside widget ──────────────────────────────────── */
#bk-app, #bk-app * { box-sizing: border-box; margin: 0; padding: 0; }
#bk-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: #222; background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
#bk-app button { cursor: pointer; font-family: inherit; font-size: 13px; }
#bk-app a { text-decoration: none; }

/* ── HEADER ───────────────────────────────────────────────── */
.bk-header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #1a1a2e; }
.bk-title  { color: #ff6b35; font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.bk-hidden-label { color: #aaa; font-size: 12px; }
.bk-hidden-label a { color: #ff6b35; font-weight: 600; }

/* ── TOOLBAR 1: DATE ──────────────────────────────────────── */
.bk-toolbar1 { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #1a1a2e; border-top: 1px solid #2d2d4e; flex-wrap: wrap; }

.bk-tbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 6px; border: 1px solid #3a3a5a; background: transparent; color: #bbb; font-size: 12px; font-weight: 600; white-space: nowrap; transition: all .15s; }
.bk-tbtn:hover { border-color: #ff6b35; color: #ff6b35; }
.bk-active-date  { background: #ff6b35 !important; border-color: #ff6b35 !important; color: #fff !important; }

.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6b35; animation: bkDotPulse 1.3s ease-in-out infinite; flex-shrink: 0; }
.bk-dot-red { background: #e53e3e; }
.bk-live-btn { border-color: #ff6b35; color: #ff6b35; }
.bk-watch-btn { border-color: #e53e3e; color: #e53e3e; }

@keyframes bkDotPulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── TOOLBAR 2: FILTERS ───────────────────────────────────── */
.bk-toolbar2 { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: #f4f4f4; border-bottom: 2px solid #e0e0e0; flex-wrap: wrap; }

.bk-filter-btn { padding: 6px 15px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #333; font-size: 13px; font-weight: 500; transition: all .15s; }
.bk-filter-btn:hover, .bk-filter-btn.bk-active { border-color: #ff6b35; color: #ff6b35; }
.bk-filter-btn.bk-active { background: #fff5f0; }

/* Dropdown */
.bk-dd-wrap  { position: relative; display: inline-block; }
.bk-dd-btn   { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #333; white-space: nowrap; min-width: 130px; justify-content: space-between; transition: all .15s; }
.bk-dd-btn:hover, .bk-dd-btn.bk-dd-open { border-color: #ff6b35; color: #ff6b35; }
.bk-dd-btn.bk-dd-open { background: #ff6b35; color: #fff; border-color: #ff6b35; }
.bk-dd-btn.bk-dd-open .bk-arrow { transform: rotate(180deg); }
.bk-arrow { font-size: 10px; transition: transform .2s; display: inline-block; }

.bk-dd-menu { position: absolute; top: calc(100% + 3px); left: 0; z-index: 9999; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.14); min-width: 160px; display: none; overflow: hidden; }
.bk-dd-menu.bk-show { display: block; }
.bk-dd-item { padding: 9px 16px; cursor: pointer; color: #333; border-bottom: 1px solid #f5f5f5; font-size: 13px; transition: background .1s; }
.bk-dd-item:last-child { border-bottom: none; }
.bk-dd-item:hover { background: #fff5f0; color: #ff6b35; }
.bk-dd-item.bk-dd-selected { background: #fff5f0; color: #ff6b35; font-weight: 600; }

/* ── LEAGUE BLOCK ─────────────────────────────────────────── */
.bk-league-block { border-bottom: 3px solid #e8e8e8; }

.bk-league-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #f0f0f0; border-bottom: 1px solid #ddd; cursor: pointer; user-select: none; }
.bk-league-icon { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#ff6b35,#e53e3e); display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.bk-league-icon img { width: 100%; height: 100%; object-fit: contain; }
.bk-league-name { font-size: 13px; font-weight: 700; color: #1a1a2e; text-transform: uppercase; letter-spacing: .3px; }
.bk-league-toggle { margin-left: auto; font-size: 12px; color: #999; transition: transform .25s; }
.bk-league-block.bk-collapsed .bk-league-toggle { transform: rotate(180deg); }
.bk-league-body { overflow: hidden; }
.bk-league-block.bk-collapsed .bk-league-body { display: none; }

/* ── COLUMN HEADERS ───────────────────────────────────────── */
.bk-col-grid { display: grid; }

/* Two-row layout: [time 72px][score 48px][bell 32px][teams 1fr][H1-odds 196px][H1-1x2 74px][FT-odds 196px][FT-1x2 74px] */
.bk-layout-two .bk-col-grid,
.bk-layout-two .bk-match-grid { grid-template-columns: 72px 48px 32px 1fr 196px 74px 196px 74px; }

.bk-layout-one .bk-col-grid,
.bk-layout-one .bk-match-grid { grid-template-columns: 72px 48px 32px 1fr 196px 74px; }

.bk-layout-full .bk-col-grid,
.bk-layout-full .bk-match-grid { grid-template-columns: 72px 48px 32px 1fr 196px 74px; }

.bk-layout-h1 .bk-col-grid,
.bk-layout-h1 .bk-match-grid { grid-template-columns: 72px 48px 32px 1fr 196px 74px; }

.bk-col-group-row { background: #e8e8e8; border-bottom: 1px solid #d4d4d4; }
.bk-col-label-row { background: #efefef; border-bottom: 1px solid #d8d8d8; }

.bk-ch { font-size: 11px; color: #555; font-weight: 600; padding: 4px 4px; text-align: center; border-left: 1px solid #d8d8d8; white-space: nowrap; line-height: 1.3; }
.bk-ch:first-child { border-left: none; text-align: left; padding-left: 8px; }
.bk-ch-h1  { background: #e4e4e4; }
.bk-ch-ft  { background: #dcdcdc; }
.bk-ch-span { text-align: center !important; }

/* ── MATCH ROW ────────────────────────────────────────────── */
.bk-match-wrap { border-bottom: 1px solid #ebebeb; }
.bk-match-wrap.bk-hot-hidden { display: none; }
.bk-match-grid { display: grid; align-items: stretch; min-height: 56px; }

/* Live row */
.bk-match-wrap.bk-is-live .bk-match-grid { background: #fff8f8; }
.bk-match-wrap.bk-is-live .bk-td-time    { background: #fff8f8; }

/* ── CELLS ────────────────────────────────────────────────── */
.bk-td { border-right: 1px solid #ebebeb; display: flex; flex-direction: column; justify-content: center; }
.bk-td:last-child { border-right: none; }

/* Time */
.bk-td-time { align-items: center; padding: 4px 2px; grid-row: span 2; }
.bk-td-time .bk-time-hm  { font-size: 13px; font-weight: 700; color: #333; }
.bk-td-time .bk-time-date { font-size: 10px; color: #999; margin-top: 2px; }
.bk-live-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(229,62,62,.1); border: 1px solid rgba(229,62,62,.3); color: #e53e3e; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; }
.bk-live-min { font-size: 11px; color: #e67700; font-weight: 700; margin-top: 2px; }
.bk-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #e53e3e; animation: bkDotPulse 1.3s ease-in-out infinite; }

/* Score */
.bk-td-score { align-items: center; font-size: 11px; color: #e53e3e; grid-row: span 2; padding: 2px 4px; gap: 4px; }
.bk-score-val { font-size: 13px; font-weight: 700; }
.bk-score-val.bk-winning { color: #27ae60; }

/* Bell */
.bk-td-bell { align-items: center; justify-content: center; grid-row: span 2; }
.bk-td-bell svg { width: 14px; height: 14px; stroke: #bbb; fill: none; stroke-width: 1.8; }

/* Teams */
.bk-td-teams { padding: 6px 10px; gap: 5px; grid-row: span 2; justify-content: center; }
.bk-team-row { display: flex; align-items: center; gap: 6px; }
.bk-team-logo { width: 16px; height: 16px; border-radius: 50%; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 7px; color: #666; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.bk-team-logo img { width: 100%; height: 100%; object-fit: contain; }
.bk-team-name { font-size: 13px; color: #1a1a1a; font-weight: 500; line-height: 1.25; }

/* ── ODDS GROUP CELL ──────────────────────────────────────── */
.bk-td-odds { background: inherit; }
.bk-odds-line { display: grid; grid-template-columns: 42px 18px 52px 18px 52px; align-items: center; flex: 1; padding: 3px 5px; border-bottom: 1px solid #f5f5f5; gap: 1px; min-height: 27px; }
.bk-odds-line:last-child { border-bottom: none; }
.bk-td-ft-odds { background: #fafafa; }

/* Handicap label */
.bk-hdp { font-size: 11px; color: #666; text-align: right; white-space: nowrap; font-weight: 500; }

/* O / U label */
.bk-ou-lbl { font-size: 10px; color: #888; text-align: center; font-weight: 700; }

/* Odds value box */
.bk-ov { display: flex; align-items: center; justify-content: center; padding: 3px 3px; border-radius: 4px; font-size: 13px; font-weight: 700; color: #1a1a2e; background: #eef2ff; border: 1px solid #d4deff; min-height: 24px; text-align: center; cursor: default; position: relative; overflow: hidden; transition: background .2s, color .2s; white-space: nowrap; }
.bk-td-ft-odds .bk-ov { background: #f5f5f5; border-color: #e0e0e0; }

/* Flash animation on change */
.bk-ov.bk-up   { background: #f0fff4; border-color: #c6f6d5; color: #276749; animation: bkFlashGreen .8s ease; }
.bk-ov.bk-down { background: #fff0f0; border-color: #ffcccc; color: #c0392b; animation: bkFlashRed .8s ease; }
@keyframes bkFlashGreen { 0%{background:#c6f6d5} 100%{background:#f0fff4} }
@keyframes bkFlashRed   { 0%{background:#ffcccc} 100%{background:#fff0f0} }

/* Arrow indicator top-right */
.bk-ov::after { content:''; position:absolute; right:2px; top:2px; border:4px solid transparent; }
.bk-ov.bk-up::after   { border-bottom:5px solid #27ae60; border-top:none; }
.bk-ov.bk-down::after { border-top:5px solid #e53e3e; border-bottom:none; }

/* ── 1×2 CELL ─────────────────────────────────────────────── */
.bk-td-1x2 { }
.bk-td-ft-1x2 { background: #fafafa; }
.bk-1x2-slot { display: flex; align-items: center; justify-content: center; flex: 1; border-bottom: 1px solid #f5f5f5; padding: 3px 6px; min-height: 27px; }
.bk-1x2-slot:last-child { border-bottom: none; }
.bk-1x2v { font-size: 13px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: #fdf5ff; border: 1px solid #e8d5ff; color: #553c9a; min-width: 36px; text-align: center; white-space: nowrap; }
.bk-1x2v.bk-red   { background: #fff0f0; border-color: #ffcccc; color: #c0392b; }
.bk-1x2v.bk-green { background: #f0fff4; border-color: #c6f6d5; color: #276749; }
.bk-ou-line-val { font-size: 10px; color: #666; }

/* ── MATCH ACTION ROW ─────────────────────────────────────── */
.bk-match-actions { display: flex; align-items: center; gap: 12px; padding: 5px 14px; background: #fafafa; border-top: 1px solid #f0f0f0; }
.bk-act-btn { display: flex; align-items: center; gap: 4px; color: #bbb; background: none; border: none; padding: 2px 5px; border-radius: 4px; font-size: 11px; transition: color .1s; }
.bk-act-btn:hover { color: #ff6b35; }
.bk-act-btn svg { width: 13px; height: 13px; }
.bk-more-keo { margin-left: auto; color: #ff6b35; font-size: 11px; font-weight: 600; background: none; border: none; display: flex; align-items: center; gap: 3px; }
.bk-more-keo:hover { text-decoration: underline; }
.bk-live-rung { font-size: 11px; color: #e53e3e; font-weight: 600; }

/* ── LOADING / EMPTY ──────────────────────────────────────── */
.bk-loading { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; gap: 12px; color: #999; }
.bk-spinner { width: 32px; height: 32px; border: 3px solid #eee; border-top-color: #ff6b35; border-radius: 50%; animation: bkSpin .7s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }

.bk-empty { padding: 40px; text-align: center; color: #aaa; font-size: 14px; }
.bk-error  { padding: 20px 14px; background: #fff5f5; border-left: 3px solid #e53e3e; color: #c0392b; font-size: 13px; }
.bk-no-api { padding: 20px 14px; background: #fffbeb; border-left: 3px solid #ff6b35; color: #7d4a00; font-size: 13px; }
.bk-no-api a { color: #ff6b35; font-weight: 600; }

/* ── STATUS BAR ───────────────────────────────────────────── */
.bk-statusbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 14px; background: #f8f8f8; border-top: 1px solid #e8e8e8; font-size: 11px; color: #888; }
#bkMatchCount strong { color: #1a1a2e; }
#bkUpdateTime { color: #27ae60; }
#bkQuota { color: #ff6b35; }

/* ── MODAL ─────────────────────────────────────────────────── */
.bk-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99999; align-items: center; justify-content: center; }
.bk-overlay.bk-show { display: flex; }
.bk-modal { background: #fff; border-radius: 10px; width: 560px; max-width: 96vw; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 85vh; display: flex; flex-direction: column; }
.bk-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; }
.bk-modal-title { font-size: 14px; font-weight: 700; color: #1a1a2e; letter-spacing: .5px; }
.bk-modal-close { background: none; border: none; font-size: 18px; color: #999; padding: 2px 6px; border-radius: 4px; transition: color .1s; }
.bk-modal-close:hover { color: #333; }
.bk-modal-search { display: flex; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #eee; }
.bk-modal-search input { flex: 1; padding: 7px 11px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; outline: none; }
.bk-modal-search input:focus { border-color: #ff6b35; }
.bk-modal-search button { padding: 7px 14px; background: #7a1515; color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.bk-modal-tabs { display: flex; gap: 7px; padding: 9px 18px; border-bottom: 1px solid #eee; }
.bk-modal-tab { padding: 5px 13px; border-radius: 5px; border: 1px solid #ddd; background: #fff; color: #666; font-size: 13px; }
.bk-modal-tab.active { background: #ff6b35; border-color: #ff6b35; color: #fff; }
.bk-modal-body { overflow-y: auto; padding: 10px 18px; flex: 1; }
.bk-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bk-modal-item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background .1s; }
.bk-modal-item:hover { background: #fff5f0; }
.bk-modal-item input[type=checkbox] { width: 15px; height: 15px; accent-color: #ff6b35; flex-shrink: 0; cursor: pointer; }
.bk-modal-item-ico { width: 20px; height: 20px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #666; flex-shrink: 0; }
.bk-modal-item-name { font-size: 12px; color: #333; line-height: 1.3; }
.bk-modal-footer { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid #eee; background: #fafafa; }
.bk-sel-all-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; cursor: pointer; }
.bk-sel-all-label input { width: 14px; height: 14px; accent-color: #ff6b35; cursor: pointer; }
#bkModalConfirm { margin-left: auto; padding: 8px 28px; background: #7a1515; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; }
#bkModalConfirm:hover { background: #921a1a; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .bk-layout-two .bk-col-grid,
  .bk-layout-two .bk-match-grid { grid-template-columns: 62px 40px 28px 1fr 170px 62px; }
  .bk-layout-two .bk-col-h1-odds, .bk-layout-two .bk-col-h1-1x2 { display: none; }
  .bk-layout-two .bk-td-h1-odds,  .bk-layout-two .bk-td-h1-1x2  { display: none; }
}
@media (max-width: 600px) {
  .bk-toolbar1, .bk-toolbar2 { padding: 7px 10px; gap: 5px; }
  .bk-dd-btn { min-width: 110px; padding: 5px 10px; }
  .bk-modal  { max-height: 92vh; }
  .bk-modal-grid { grid-template-columns: 1fr; }
}