.kqbd {
  --bg: #0b1120;
  --bg-elev: #121a2e;
  --bg-hover: #18223c;
  --line: #22304f;
  --text: #e8edf7;
  --text-dim: #8f9dbb;
  --text-mute: #64748b;
  --accent: #38bdf8;
  --live: #22c55e;
  --live-bg: rgba(34, 197, 94, .12);
  --warn: #f59e0b;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: light) {
  .kqbd {
    --bg: #f4f6fb;
    --bg-elev: #ffffff;
    --bg-hover: #eef2fa;
    --line: #dfe5f0;
    --text: #0f1a30;
    --text-dim: #5a6884;
    --text-mute: #8794ab;
    --accent: #0284c7;
    --live: #16a34a;
    --live-bg: rgba(22, 163, 74, .1);
    --shadow: 0 1px 3px rgba(15,26,48,.08);
  }
}

.kqbd, .kqbd *, .kqbd *::before, .kqbd *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- lá chắn
   Đặt tiền tố kq- chỉ chặn được xung đột theo CLASS. Theme của trang chủ nhà
   thường còn style thẳng vào THẺ TRẦN (img, table, td, a), và không ít nơi kèm
   !important — thứ đó xuyên qua mọi tiền tố. Các dòng dưới khoá lại đúng những
   thuộc tính mà nếu bị đè sẽ làm vỡ widget.
   Tất cả đều nằm trong .kqbd nên KHÔNG rò ngược ra trang chủ nhà. */
.kqbd img {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; max-width: none !important;
  vertical-align: middle; display: inline-block;
}
.kqbd table {
  border: 0 !important; width: 100% !important; margin: 0 !important;
  background: none !important; border-collapse: collapse !important; font-size: 13.5px;
}
.kqbd th, .kqbd td { background: none !important; border-left: 0 !important; border-right: 0 !important; }
.kqbd a { text-decoration: none; background: none; }
.kqbd p, .kqbd h1, .kqbd h2, .kqbd h3 { margin: 0; }
.kqbd button, .kqbd input, .kqbd select { font-family: inherit; letter-spacing: normal; text-transform: none; }
.kqbd ul, .kqbd ol, .kqbd li { list-style: none; margin: 0; padding: 0; }

.kqbd {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.kqbd a { color: var(--accent); }

/* Widget tự dựng DOM nên không còn .wrap bao ngoài; padding đặt thẳng vào từng khối.
   Thanh trên và dải giải cần nền tràn hết chiều ngang, chỉ phần ruột mới thụt vào. */
.kq-topbar-inner, .kq-leagues-inner, .kq-viewbar, .kq-content, .kq-foot {
  padding-left: var(--pad, 16px);
  padding-right: var(--pad, 16px);
}

/* -------------------------------------------------------------- topbar */

.kq-topbar {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.kq-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.kq-brand { display: flex; align-items: center; gap: 10px; }
.kq-brand-mark { font-size: 26px; }
.kq-brand h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.kq-brand-sub { margin: 0; font-size: 12px; color: var(--text-mute); }
.kq-topbar-actions { display: flex; align-items: center; gap: 10px; }
.kq-refresh-state { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.kq-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--text-dim); font-size: 16px; cursor: pointer;
  transition: transform .3s, color .15s, background .15s;
}
.kq-icon-btn:hover { color: var(--accent); background: var(--bg-hover); }
.kq-icon-btn.kq-is-spinning { animation: kq-spin .7s linear infinite; }
@keyframes kq-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- leagues */

.kq-leagues {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 60px; z-index: 19;
}
.kq-leagues-inner { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.kq-leagues-inner::-webkit-scrollbar { display: none; }

.kq-league {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: .15s;
}
.kq-league:hover { background: var(--bg-hover); color: var(--text); }
.kq-league.kq-is-active { background: var(--accent); border-color: var(--accent); color: #04121f; }

/* ------------------------------------------------------------- viewbar */

.kq-viewbar { padding: 18px 0 12px; display: flex; flex-direction: column; gap: 12px; }

.kq-tabs { display: flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.kq-tab {
  flex: 1; padding: 8px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s;
}
.kq-tab:hover { color: var(--text); }
.kq-tab.kq-is-active { background: var(--bg-hover); color: var(--text); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.kq-tab.kq-is-active::after { content: ''; display: block; width: 20px; height: 2px; margin: 5px auto -2px; border-radius: 2px; background: var(--accent); }

.kq-datebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kq-datebar[hidden] { display: none; }
.kq-date-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.kq-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s;
  white-space: nowrap;
}
.kq-chip:hover { background: var(--bg-hover); color: var(--text); }
.kq-chip.kq-is-active { border-color: var(--accent); color: var(--accent); }
.kq-date-nav {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--text-dim); font-size: 17px; line-height: 1; cursor: pointer;
}
.kq-date-nav:hover { background: var(--bg-hover); color: var(--text); }
.kq-date-input {
  flex: 0 1 auto; min-width: 0;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--text); font-size: 12.5px;
  font-family: inherit; color-scheme: dark light;
}

/* ------------------------------------------------------------- content */

.kq-content { padding-bottom: 32px; min-height: 40vh; }

.kq-section { margin-bottom: 26px; }
.kq-section-head {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 0 2px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; letter-spacing: -.1px;
}
.kq-section-head small { font-weight: 500; font-size: 12.5px; color: var(--text-mute); }

.kq-group { margin-bottom: 22px; }
.kq-section .kq-group:last-child { margin-bottom: 0; }
.kq-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 8px; font-size: 13px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px;
}
.kq-group-head .kq-count { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-mute); }

.kq-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.kq-match {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.kq-match:last-child { border-bottom: 0; }
.kq-match.kq-is-live { background: var(--live-bg); }

.kq-match-time { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; text-align: center; }
.kq-match-time .kq-status { display: block; font-size: 10px; margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.kq-match-time .kq-clock { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.kq-match.kq-is-live .kq-match-time .kq-status { color: var(--live); font-weight: 700; }
.kq-match.kq-is-postponed .kq-match-time .kq-status { color: var(--warn); }

.kq-teams { display: grid; gap: 7px; min-width: 0; }
.kq-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kq-team img { width: 20px !important; height: 20px !important; object-fit: contain; flex: 0 0 20px; }
.kq-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.kq-team.kq-is-loser .kq-team-name { color: var(--text-dim); }
.kq-team.kq-is-winner .kq-team-name { font-weight: 700; }

.kq-scores { display: grid; gap: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.kq-scores span { font-size: 15px; font-weight: 700; line-height: 20px; min-width: 22px; }
.kq-scores .kq-dim { color: var(--text-mute); font-weight: 500; }
.kq-match.kq-is-live .kq-scores span { color: var(--live); }

.kq-live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); margin-right: 4px; vertical-align: middle;
  animation: kq-pulse 1.6s ease-in-out infinite;
}
@keyframes kq-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------------------------- tables */

.kq-table-wrap { overflow-x: auto; }
.kqbd table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kqbd th, .kqbd td { padding: 9px 8px !important; text-align: center; white-space: nowrap; }
.kqbd th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); border-bottom: 1px solid var(--line); font-weight: 600; }
.kqbd td { border-bottom: 1px solid var(--line); }
.kqbd tr:last-child td { border-bottom: 0; }
.kq-col-team { text-align: left; width: 100%; }
.kq-col-team div { display: flex; align-items: center; gap: 8px; }
.kq-col-team img { width: 18px !important; height: 18px !important; object-fit: contain; flex: 0 0 18px; }
.kq-col-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kq-pos { color: var(--text-mute); font-variant-numeric: tabular-nums; width: 34px; }
.kq-pts { font-weight: 700; }
td.kq-num, th.kq-num { font-variant-numeric: tabular-nums; }
.kq-form { display: flex; gap: 3px; justify-content: center; }
.kq-form i {
  width: 15px; height: 15px; border-radius: 3px; font-style: normal;
  font-size: 9px; line-height: 15px; font-weight: 700; color: #04121f;
}
.kq-form .W { background: var(--live); }
.kq-form .D { background: var(--text-mute); }
.kq-form .L { background: #ef4444; color: #fff; }

.kq-zone-ucl { box-shadow: inset 3px 0 0 var(--accent); }
.kq-zone-uel { box-shadow: inset 3px 0 0 var(--warn); }
.kq-zone-rel { box-shadow: inset 3px 0 0 #ef4444; }

.kq-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 4px 0; font-size: 11.5px; color: var(--text-mute); }
.kq-legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* ------------------------------------------------------------- states */

.kq-empty, .kq-error, .kq-loading { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.kq-empty .kq-big, .kq-error .kq-big { font-size: 34px; display: block; margin-bottom: 10px; }
.kq-error { color: #f87171; }
.kq-error .kq-hint { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-mute); line-height: 1.7; }
.kq-error code { background: var(--bg-elev); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; }

.kq-skeleton { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kq-skeleton .kq-row { height: 62px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, var(--bg-hover), transparent); background-size: 200% 100%; animation: kq-shimmer 1.3s infinite; }
.kq-skeleton .kq-row:last-child { border-bottom: 0; }
@keyframes kq-shimmer { to { background-position: -200% 0; } }

.kq-foot { padding-top: 20px; padding-bottom: 28px; font-size: 12px; color: var(--text-mute); text-align: center; }
.kq-foot p { margin: 0; }

/* Màn rất hẹp: nhãn thời gian là thông tin phụ, nhường chỗ cho tên. */
@media (max-width: 400px) {
  .kq-refresh-state { display: none; }
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 560px) {
  .kq-brand-sub { display: none; }
  /* Tên dài nên phải thu nhỏ, nếu không sẽ vỡ 2 dòng trong thanh cao 60px.
     Kèm overflow:hidden — nowrap mà thiếu nó thì chữ tràn ra đè lên nhãn bên phải. */
  .kq-brand h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kq-brand, .kq-brand > div { min-width: 0; }
  .kq-refresh-state { white-space: nowrap; font-size: 11px; }
  .kq-topbar-actions { flex: 0 0 auto; }
  .kq-match { grid-template-columns: 58px 1fr auto; gap: 9px; padding: 11px 12px; }
  .kq-team-name { font-size: 13.5px; }
  .kqbd th, .kqbd td { padding: 8px 5px !important; }
  .kq-hide-sm { display: none; }
  .kq-tab { font-size: 12.5px; padding: 8px 4px; }

  /* Hẹp thì tách 2 hàng: hàng chip cuộn ngang, hàng dưới là ‹ lịch ›.
     Để chung một hàng thì 4 chip bị bóp thành cột dọc. */
  .kq-datebar { flex-wrap: wrap; justify-content: space-between; }
  .kq-date-quick { flex: 1 0 100%; order: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kq-date-quick::-webkit-scrollbar { display: none; }
  .kq-datebar > .kq-date-nav:first-child { order: 1; }
  .kq-date-input { order: 2; flex: 1 1 auto; }
  .kq-datebar > .kq-date-nav:last-child { order: 3; }
}