.date-tabs .tab-button {
color: var(--knc-text) !important;
background: var(--knc-white) !important;
border-color: var(--knc-border) !important;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.date-tabs .tab-button:hover {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
border-color: var(--knc-gold) !important;
}
.date-tabs .tab-button.active {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark) 0%,
var(--knc-gold) 45%,
var(--knc-gold-light) 100%
) !important;
border-color: var(--knc-gold) !important;
box-shadow:
0 2px 7px rgba(var(--knc-gold-rgb),.25) !important;
}
.date-tabs .tab-btn-live {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
border-color: var(--knc-gold) !important;
}
.date-tabs .tab-btn-live:hover {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark),
var(--knc-gold)
) !important;
}
.date-tabs .home_filterbar-live.red,
.date-tabs .home_filterbar-live {
color: var(--knc-gold) !important;
background-color: var(--knc-gold) !important;
}
.date-tabs .home_filterbar-live.red::before,
.date-tabs .home_filterbar-live.red::after,
.date-tabs .home_filterbar-live::before,
.date-tabs .home_filterbar-live::after {
background-color: var(--knc-gold) !important;
border-color: var(--knc-gold) !important;
}
.fixture-filter .filter-league-btn,
.fixture-filter .filter-dropdown-btn,
.fixture-filter .sound-toggle-btn {
color: var(--knc-text) !important;
background: var(--knc-white) !important;
border: 1px solid var(--knc-border) !important;
box-shadow: none !important;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.fixture-filter .filter-league-btn:hover,
.fixture-filter .filter-dropdown-btn:hover,
.fixture-filter .sound-toggle-btn:hover {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
border-color: var(--knc-gold) !important;
box-shadow:
0 2px 6px rgba(var(--knc-gold-rgb),.15) !important;
}
.fixture-filter .filter-league-btn svg,
.fixture-filter .filter-dropdown-btn svg,
.fixture-filter .sound-toggle-btn svg {
color: var(--knc-gold) !important;
}
.fixture-filter .filter-league-btn svg path,
.fixture-filter .filter-dropdown-btn svg path {
stroke: var(--knc-gold) !important;
fill: none !important;
}
.fixture-filter .sound-toggle-btn svg path {
stroke: currentColor !important;
}
.fixture-filter button.active,
.fixture-filter .filter-league-btn.active,
.fixture-filter .filter-dropdown-btn.active {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark),
var(--knc-gold),
var(--knc-gold-light)
) !important;
border-color: var(--knc-gold) !important;
box-shadow:
0 2px 7px rgba(var(--knc-gold-rgb),.25) !important;
}
.fixture-filter .dropdown-menu,
.fixture-filter .filter-dropdown,
.fixture-filter .sixinone-dropdown-menu {
background: var(--knc-white) !important;
border: 1px solid var(--knc-border) !important;
box-shadow:
0 8px 24px rgba(0,0,0,.12) !important;
}
.fixture-filter .dropdown-menu a,
.fixture-filter .dropdown-menu li,
.fixture-filter .sixinone-dropdown-menu a,
.fixture-filter .sixinone-dropdown-menu li {
color: var(--knc-text) !important;
background: var(--knc-white) !important;
}
.fixture-filter .dropdown-menu a:hover,
.fixture-filter .dropdown-menu li:hover,
.fixture-filter .sixinone-dropdown-menu a:hover,
.fixture-filter .sixinone-dropdown-menu li:hover {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
}
button,
.button,
a.button {
--knc-button-gold: var(--knc-gold);
}
#main button,
#main .button,
#main a.button {
border-color: var(--knc-gold);
}
#main button.red,
#main .button.red,
#main a.button.red {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark) 0%,
var(--knc-gold) 50%,
var(--knc-gold-light) 100%
) !important;
border-color: var(--knc-gold) !important;
}
#main button.red:hover,
#main .button.red:hover,
#main a.button.red:hover {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-hover-dark) 0%,
var(--knc-gold-hover-mid) 50%,
var(--knc-gold-hover-light) 100%
) !important;
border-color: var(--knc-gold-dark) !important;
}
#main .red {
color: var(--knc-gold) !important;
}
#main .red.tab-button,
#main .red.button,
#main button.red,
#main .red-btn {
color: var(--knc-white) !important;
background: var(--knc-gold) !important;
border-color: var(--knc-gold) !important;
}
#main .live,
#main .live-badge,
#main .live-tag {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark),
var(--knc-gold)
) !important;
border-color: var(--knc-gold) !important;
}
#main button:focus,
#main .button:focus,
#main .tab-button:focus {
outline: none !important;
border-color: var(--knc-gold) !important;
box-shadow:
0 0 0 2px rgba(var(--knc-gold-rgb),.18) !important;
}
.date-tabs .tab-button.active {
position: relative;
border: 1px solid var(--knc-gold) !important;
}
#main [class*="red"] {
--red: var(--knc-gold) !important;
}
#main {
--red: var(--knc-gold);
--danger: var(--knc-gold);
--primary: var(--knc-gold);
--primary-color: var(--knc-gold);
}
@media (max-width: 849px) {
.date-tabs .tab-button {
border-color: var(--knc-border) !important;
}
.date-tabs .tab-button.active {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark),
var(--knc-gold)
) !important;
border-color: var(--knc-gold) !important;
}
.fixture-filter .filter-league-btn,
.fixture-filter .filter-dropdown-btn,
.fixture-filter .sound-toggle-btn {
border-color: var(--knc-border) !important;
}
}
.league-name {
color: var(--knc-text) !important;
font-weight: 700 !important;
}
.league-name:hover {
color: var(--knc-gold-dark) !important;
}
.sixinone-dropdown-content {
background: var(--knc-white) !important;
border: 1px solid rgba(var(--knc-gold-rgb),.35) !important;
border-radius: 0 0 8px 8px !important;
box-shadow:
0 8px 22px rgba(0,0,0,.14),
0 2px 6px rgba(var(--knc-gold-rgb),.10) !important;
overflow: hidden !important;
}
.sixinone-dropdown-content > *,
.sixinone-dropdown-content li,
.sixinone-dropdown-content a,
.sixinone-dropdown-content .dropdown-item {
color: var(--knc-text) !important;
background: var(--knc-white) !important;
}
.sixinone-dropdown-content li:hover,
.sixinone-dropdown-content a:hover,
.sixinone-dropdown-content .dropdown-item:hover,
.sixinone-dropdown-content > *:hover {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
}
.sixinone-dropdown-content .active,
.sixinone-dropdown-content .selected,
.sixinone-dropdown-content .current,
.sixinone-dropdown-content .is-active,
.sixinone-dropdown-content .is-selected {
color: var(--knc-white) !important;
background: var(--knc-gold) !important;
font-weight: 700 !important;
}
.sixinone-dropdown-content .active:hover,
.sixinone-dropdown-content .selected:hover,
.sixinone-dropdown-content .current:hover,
.sixinone-dropdown-content .is-active:hover,
.sixinone-dropdown-content .is-selected:hover {
color: var(--knc-white) !important;
background: var(--knc-gold-dark) !important;
}
.sixinone-dropdown-content span,
.sixinone-dropdown-content div,
.sixinone-dropdown-content p {
color: inherit !important;
}
.sixinone-dropdown-content li,
.sixinone-dropdown-content a {
border-bottom: 1px solid var(--knc-border-light) !important;
}
.sixinone-dropdown-content li:last-child,
.sixinone-dropdown-content a:last-child {
border-bottom: 0 !important;
}
.sixinone-dropdown {
color: var(--knc-text) !important;
}
.sixinone-dropdown svg,
.sixinone-dropdown i,
.sixinone-dropdown .icon {
color: var(--knc-gold) !important;
fill: var(--knc-gold) !important;
}
.sixinone-dropdown:focus,
.sixinone-dropdown:focus-within,
.sixinone-dropdown.active,
.sixinone-dropdown.open {
border-color: var(--knc-gold) !important;
box-shadow:
0 0 0 1px rgba(var(--knc-gold-rgb),.18),
0 5px 16px rgba(0,0,0,.10) !important;
}
.leaguebox {
color: var(--knc-text-strong) !important;
background: var(--knc-white) !important;
}
.leaguebox .leaguebox-header {
background:
linear-gradient(
135deg,
var(--knc-gold-dark) 0%,
var(--knc-gold) 45%,
var(--knc-gold-bright) 72%,
var(--knc-gold-rich) 100%
) !important;
color: var(--knc-white) !important;
border-bottom: 1px solid rgba(var(--knc-gold-shadow-rgb),.45) !important;
}
.leaguebox .leaguebox-header h2 {
color: var(--knc-white) !important;
}
.leaguebox .close-btn {
color: var(--knc-white) !important;
border-color: rgba(255,255,255,.65) !important;
background: rgba(0,0,0,.10) !important;
}
.leaguebox .close-btn:hover {
color: var(--knc-white) !important;
background: rgba(0,0,0,.20) !important;
border-color: var(--knc-white) !important;
}
.leaguebox .search-input-wrap {
background: var(--knc-white) !important;
border-color: var(--knc-border-beige) !important;
}
.leaguebox .search-input-wrap:focus-within {
border-color: var(--knc-gold) !important;
box-shadow:
0 0 0 2px rgba(var(--knc-gold-rgb),.15) !important;
}
.leaguebox .search-icon {
color: var(--knc-gold) !important;
}
.leaguebox .search-input-wrap input {
color: var(--knc-text-strong) !important;
}
.leaguebox .search-input-wrap input::placeholder {
color: var(--knc-gray-500) !important;
}
.leaguebox .filter-row .label {
color: var(--knc-text-strong) !important;
}
.leaguebox .toggle-group {
border-color: var(--knc-border-sand) !important;
background: var(--knc-surface-warm) !important;
}
.leaguebox .toggle-btn.inactive {
color: var(--knc-text-strong) !important;
background: transparent !important;
}
.leaguebox .toggle-btn.active {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark) 0%,
var(--knc-gold) 50%,
var(--knc-gold-bright) 100%
) !important;
box-shadow:
0 2px 6px rgba(var(--knc-gold-shadow-rgb),.25) !important;
}
.leaguebox .toggle-btn:hover {
color: var(--knc-gold-dark) !important;
}
.leaguebox .toggle-btn.active:hover {
color: var(--knc-white) !important;
}
.leaguebox .country-name {
color: var(--knc-text-strong) !important;
background:
linear-gradient(
90deg,
var(--knc-surface-neutral-1) 0%,
var(--knc-surface-neutral-2) 100%
) !important;
border-color: var(--knc-border-neutral) !important;
}
.leaguebox .country-name svg {
color: var(--knc-gold-dark) !important;
}
.leaguebox .country-name svg path {
fill: currentColor !important;
}
.leaguebox .country-name:hover {
color: var(--knc-gold-dark) !important;
background:
linear-gradient(
90deg,
var(--knc-gold-bg) 0%,
var(--knc-surface-cream-6) 100%
) !important;
}
.leaguebox .league-name {
color: var(--knc-text-blue-light) !important;
font-weight: 600 !important;
}
.leaguebox .league-name.is_hot {
color: var(--knc-gold-dark) !important;
font-weight: 700 !important;
}
.leaguebox .league-name .tag {
color: var(--knc-gold-dark) !important;
font-weight: 700 !important;
}
.leaguebox .league-name:hover {
color: var(--knc-gold) !important;
}
.leaguebox .cb {
background: var(--knc-gold) !important;
border-color: var(--knc-gold) !important;
color: var(--knc-white) !important;
}
.leaguebox .cb:hover {
background: var(--knc-gold-dark) !important;
border-color: var(--knc-gold-dark) !important;
}
.leaguebox .cb.unchecked {
background: var(--knc-white) !important;
border: 2px solid var(--knc-gold) !important;
color: transparent !important;
}
.leaguebox .footer-check-item {
color: var(--knc-text-strong) !important;
}
.leaguebox .footer-check-item .cb {
background: var(--knc-gold) !important;
border-color: var(--knc-gold) !important;
}
.leaguebox .footer-check-item .cb.unchecked {
background: var(--knc-white) !important;
border: 2px solid var(--knc-gold) !important;
}
.leaguebox .btn-confirm {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-dark) 0%,
var(--knc-gold) 45%,
var(--knc-gold-bright) 100%
) !important;
border: 1px solid var(--knc-gold-rich) !important;
box-shadow:
0 4px 12px rgba(var(--knc-gold-shadow-rgb),.25) !important;
}
.leaguebox .btn-confirm:hover {
color: var(--knc-white) !important;
background:
linear-gradient(
135deg,
var(--knc-gold-pressed-dark) 0%,
var(--knc-gold-rich) 45%,
var(--knc-gold-pressed-light) 100%
) !important;
box-shadow:
0 5px 16px rgba(var(--knc-gold-shadow-rgb),.35) !important;
transform: translateY(-1px);
}
.leaguebox .league-item {
background: var(--knc-white) !important;
border-color: var(--knc-border-neutral-light) !important;
}
.leaguebox .league-item:hover {
background:
linear-gradient(
90deg,
var(--knc-surface-white-warm) 0%,
var(--knc-surface-cream-7) 100%
) !important;
}
.sixinone-dropdown-content {
background: var(--knc-white) !important;
border: 1px solid var(--knc-border-cream) !important;
box-shadow:
0 8px 22px rgba(0,0,0,.12) !important;
}
.sixinone-dropdown-content > *,
.sixinone-dropdown-content .dropdown-item,
.sixinone-dropdown-content li {
color: var(--knc-text-strong) !important;
background: var(--knc-white) !important;
border-bottom-color: var(--knc-border-warm) !important;
}
.sixinone-dropdown-content > *:hover,
.sixinone-dropdown-content .dropdown-item:hover,
.sixinone-dropdown-content li:hover {
color: var(--knc-gold-dark) !important;
background:
linear-gradient(
90deg,
var(--knc-gold-bg) 0%,
var(--knc-gold-tint) 100%
) !important;
}
.sixinone-dropdown-content .active,
.sixinone-dropdown-content .selected,
.sixinone-dropdown-content .is-active,
.sixinone-dropdown-content .current {
color: var(--knc-gold-dark) !important;
background:
linear-gradient(
90deg,
var(--knc-gold-tint) 0%,
var(--knc-surface-cream-8) 100%
) !important;
font-weight: 700 !important;
}
.sixinone-dropdown-content button {
color: var(--knc-text-strong) !important;
background: var(--knc-white) !important;
border-color: var(--knc-border-warm) !important;
}
.sixinone-dropdown-content button:hover {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-bg) !important;
}
.sixinone-dropdown-content button.active,
.sixinone-dropdown-content button.selected {
color: var(--knc-gold-dark) !important;
background: var(--knc-gold-tint) !important;
font-weight: 700 !important;
}
.sixinone-dropdown .filter-dropdown-btn {
color: var(--knc-text-strong) !important;
background: var(--knc-white) !important;
border-color: var(--knc-border-gray) !important;
}
.sixinone-dropdown .filter-dropdown-btn:hover {
color: var(--knc-gold-dark) !important;
border-color: var(--knc-gold) !important;
}
.sixinone-dropdown .filter-dropdown-btn svg {
color: var(--knc-gold) !important;
}
.leaguebox svg {
color: var(--knc-gold-dark);
}
.leaguebox svg path {
fill: currentColor;
}
.leaguebox input:focus,
.leaguebox button:focus {
outline: none !important;
}
.leaguebox input:focus-visible,
.leaguebox button:focus-visible {
outline: 2px solid rgba(var(--knc-gold-rgb),.35) !important;
outline-offset: 1px;
}
.leaguebox ::-webkit-scrollbar {
width: 7px;
}
.leaguebox ::-webkit-scrollbar-track {
background: var(--knc-surface-neutral-3);
}
.leaguebox ::-webkit-scrollbar-thumb {
background: var(--knc-gold-muted);
border-radius: 10px;
}
.leaguebox ::-webkit-scrollbar-thumb:hover {
background: var(--knc-gold-dark);
}

.bdk-page-scroll {
  --bdk-brand: var(--knc-gold);
  --bdk-brand-dark: var(--knc-gold-dark);
  --bdk-brand-soft: var(--knc-gold-bg);
}

.bdk-page-scroll .bdk-section-header {
  background: linear-gradient(90deg, var(--knc-gold-dark), var(--knc-gold)) !important;
  border-color: var(--knc-gold-dark) !important;
}

.bdk-page-scroll .bdk-section-header,
.bdk-page-scroll .bdk-section-header .bdk-sh-title,
.bdk-page-scroll .bdk-section-header .bdk-sh-label {
  color: var(--knc-white) !important;
}

.bdk-page-scroll .bdk-time.is-live-text,
.bdk-page-scroll .bdk-time.is-live-text .bdk-time-text,
.bdk-page-scroll .bdk-score,
.bdk-page-scroll .bdk-mc-score,
.bdk-page-scroll .bdk-mc-status-time {
  color: var(--bdk-brand-dark) !important;
}

.bdk-page-scroll .bdk-action-btn,
.bdk-page-scroll .bdk-mc-btn {
  background: var(--bdk-brand) !important;
  border-color: var(--bdk-brand) !important;
  color: var(--knc-white) !important;
}

.bdk-page-scroll .bdk-action-btn:hover,
.bdk-page-scroll .bdk-mc-btn:hover {
  background: var(--bdk-brand-dark) !important;
  border-color: var(--bdk-brand-dark) !important;
}

.bdk-page-scroll .bdk-time-stream-wrap svg [fill="#e8503a"] {
  fill: var(--bdk-brand) !important;
}

.bdk-page-scroll .bdk-odds .down.odd_box {
  background: var(--bdk-brand-soft) !important;
  border-color: var(--knc-border-gold) !important;
  color: var(--bdk-brand-dark) !important;
}

.bdk-page-scroll .bdk-odds .down.odd_box .box-icon {
  color: var(--bdk-brand-dark) !important;
}

.bdk-page-scroll .bdk-mc-odd:has(.bdk-mc-arrow-down) {
  background: var(--bdk-brand-soft) !important;
}

.bdk-page-scroll .bdk-mc-arrow-down {
  color: var(--bdk-brand-dark) !important;
}

#wp-sport-app-2 {
  --live-gold: var(--knc-gold);
  --live-gold-dark: var(--knc-gold-dark);
  --live-gold-bg: var(--knc-gold-bg);
  --live-text: var(--knc-text);
}

#wp-sport-app-2 .filter-tabs .tab-button.active {
  color: var(--knc-white) !important;
  background: linear-gradient(110deg, var(--knc-gold-dark), var(--knc-gold)) !important;
  border-color: var(--live-gold) !important;
}

#wp-sport-app-2 .filter-tabs .tab-button:not(.active):hover {
  color: var(--live-gold-dark) !important;
  background: var(--live-gold-bg) !important;
  border-color: var(--live-gold) !important;
}

#wp-sport-app-2 .home_filterbar-live.red {
  background: var(--live-gold) !important;
  border-color: var(--live-gold) !important;
  box-shadow: 0 0 0 3px rgba(var(--knc-gold-rgb),.16) !important;
}

#wp-sport-app-2 .match-time,
#wp-sport-app-2 .match-status,
#wp-sport-app-2 .match-score,
#wp-sport-app-2 .half-time-score {
  color: var(--live-gold-dark) !important;
}

#wp-sport-app-2 .filter-leagues-btn:hover,
#wp-sport-app-2 .date-nav-btn:hover,
#wp-sport-app-2 .date-display-btn:hover {
  color: var(--live-gold-dark) !important;
  background: var(--live-gold-bg) !important;
  border-color: var(--live-gold) !important;
}

#wp-sport-app-2 .vc-container .vc-title,
#wp-sport-app-2 .vc-container .vc-weekday {
  color: var(--live-text) !important;
}

#wp-sport-app-2 .vc-container .vc-day-content {
  color: var(--live-text) !important;
}

#wp-sport-app-2 .vc-container .is-not-in-month .vc-day-content {
  color: var(--knc-gray-400) !important;
}

#wp-sport-app-2 .vc-container .vc-highlight-bg-solid {
  background: var(--live-gold) !important;
}

#wp-sport-app-2
.vc-container
.vc-day-content.vc-highlight-content-solid {
  color: var(--knc-white) !important;
}

#wp-sport-app-2
.vc-container
.vc-day-content.vc-red:not(.vc-highlight-content-solid) {
  color: var(--live-gold-dark) !important;
}

#wp-sport-app-2 .vc-container .vc-dot {
  background: var(--live-gold) !important;
}

#wp-sport-app-2 .vc-container .vc-footer-btn {
  color: var(--live-gold-dark) !important;
}

#wp-sport-app-2 .vc-container .vc-prev:hover,
#wp-sport-app-2 .vc-container .vc-next:hover {
  color: var(--live-gold-dark) !important;
}

#wp-sport-app .page-container .league-selector-item.active {
  background: var(--knc-gold) !important;
  border-color: var(--knc-gold) !important;
  color: var(--knc-white) !important;
}

#wp-sport-app .page-container .stage-btn.active {
  background: var(--knc-gold) !important;
  border-color: var(--knc-gold) !important;
  color: var(--knc-white) !important;
}

#wp-sport-app .page-container .league-selector-arrow:not(:disabled) {
  color: var(--knc-gold-dark) !important;
  border-color: var(--knc-gold) !important;
}

#wp-sport-app .page-container .league-selector-arrow:not(:disabled):hover {
  background: var(--knc-gold-bg) !important;
}

#wp-sport-app .page-container .league-selector-arrow:disabled {
  color: var(--knc-gray-450) !important;
}
.hot-matches__time-badge {
  background: var(--knc-gold) !important;
  border-color: var(--knc-gold-dark) !important;
  color: var(--knc-white) !important;
}

.row-table.row-header.row-two-line.sticky-header,
.row-table.row-header.row-two-line.sticky-header > .th-cell,
.row-table.row-header.row-two-line.sticky-header .th-odd-cell > span {
  background: #fff8e7 !important;
  background-image: none !important;
  color: #25344a !important;
  border-color: #d8bd7a !important;
}

.row-table.row-header.row-two-line.sticky-header > .th-cell {
  font-weight: 600;
}

.row-table.row-header.row-two-line.sticky-header svg {
  color: #25344a !important;
}
/* =====================================================
   WIDGET THỂ THAO – HỆ MÀU GOLD CỦA SITE
   Đặt ở cuối toàn bộ CSS hiện tại
   ===================================================== */

/* ---------- Dòng trận đấu ---------- */

.wp-sport-app .match-row {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.wp-sport-app .match-row:hover {
    background-color: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border-color: var(--knc-gold, #B68728) !important;
    box-shadow:
        inset 3px 0 0 var(--knc-gold, #B68728),
        0 2px 7px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.12) !important;
}

/* Chữ và tỷ số khi hover */
.wp-sport-app .match-row:hover .match-date,
.wp-sport-app .match-row:hover .team-name,
.wp-sport-app .match-row:hover .score-value {
    color: var(--knc-gold-dark, #8A641B) !important;
}

/* Không đổi màu logo */
.wp-sport-app .match-row:hover .team-logo {
    filter: none !important;
}


/* =====================================================
   NÚT XEM THÊM
   ===================================================== */

.wp-sport-app button.toggle-btn {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border: 1px solid var(--knc-gold, #B68728) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.wp-sport-app button.toggle-btn:hover,
.wp-sport-app button.toggle-btn:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 9px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.28) !important;
    outline: none !important;
}


/* =====================================================
   TAB BÀN THẮNG – KIẾN TẠO – THẺ PHẠT
   ===================================================== */

.wp-sport-app .tabs .tab-btn {
    color: var(--knc-text, #25344A) !important;
    background: var(--knc-white, #FFFFFF) !important;
    background-image: none !important;
    border-color: var(--knc-border, #E3E3E3) !important;
    box-shadow: none !important;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Tab chưa active khi hover */
.wp-sport-app .tabs .tab-btn:not(.active):hover,
.wp-sport-app .tabs .tab-btn:not(.active):focus {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border-color: var(--knc-gold, #B68728) !important;
    box-shadow:
        0 2px 6px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.15) !important;
    outline: none !important;
}

/* Tab đang active */
.wp-sport-app .tabs .tab-btn.active,
.wp-sport-app .tabs .tab-btn.active:hover,
.wp-sport-app .tabs .tab-btn.active:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 9px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.28) !important;
    outline: none !important;
}

/* =====================================================
   NÚT SHOW MORE – MÀU GOLD
   ===================================================== */

.wp-sport-app button.show-more-btn {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border: 1px solid var(--knc-gold, #B68728) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.wp-sport-app button.show-more-btn:hover,
.wp-sport-app button.show-more-btn:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 9px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.28) !important;
    outline: none !important;
}

/* Mũi tên trong nút */
.wp-sport-app button.show-more-btn .arrow {
    color: inherit !important;
}


/* =====================================================
   XÓA NỀN HỒNG BAO QUANH CÁC TAB
   ===================================================== */

.wp-sport-app .tabs-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Đổi nền hồng của nhóm tab thành nền gold nhạt */
.wp-sport-app .tabs-wrapper > .tabs,
.wp-sport-app .tabs-wrapper .tabs {
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-color: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border: 1px solid var(--knc-border-gold, #E9D5A5) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* Loại bỏ màu hồng nếu plugin tạo bằng pseudo-element */
.wp-sport-app .tabs-wrapper::before,
.wp-sport-app .tabs-wrapper::after,
.wp-sport-app .tabs::before,
.wp-sport-app .tabs::after {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}


/* =====================================================
   CÁC NÚT TAB
   ===================================================== */

.wp-sport-app .tabs-wrapper .tab-btn {
    color: var(--knc-text, #25344A) !important;
    background: var(--knc-white, #FFFFFF) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Tab chưa được chọn khi hover */
.wp-sport-app .tabs-wrapper .tab-btn:not(.active):hover,
.wp-sport-app .tabs-wrapper .tab-btn:not(.active):focus {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-surface-cream-5, #FFF0BD) !important;
    background-image: none !important;
    border-color: var(--knc-gold, #B68728) !important;
    outline: none !important;
}

/* Tab đang được chọn */
.wp-sport-app .tabs-wrapper .tab-btn.active,
.wp-sport-app .tabs-wrapper .tab-btn.active:hover,
.wp-sport-app .tabs-wrapper .tab-btn.active:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 9px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.28) !important;
    outline: none !important;
}

/* =====================================================
   TRANG GIẢI ĐẤU – CHUYỂN MÀU ĐỎ SANG GOLD
   ===================================================== */

/* ---------- Thanh tiến độ ---------- */

.wp-sport-app .progress-bar {
    background: linear-gradient(
        90deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    background-color: var(--knc-gold, #B68728) !important;
    border-color: var(--knc-gold, #B68728) !important;
    box-shadow:
        0 1px 4px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.25) !important;
}

/* Nếu thanh tiến độ có hiệu ứng hoặc pseudo-element */
.wp-sport-app .progress-bar::before,
.wp-sport-app .progress-bar::after {
    background: var(--knc-gold-light, #D9B653) !important;
    border-color: var(--knc-gold, #B68728) !important;
}


/* =====================================================
   TAB TỔNG QUAN – LỊCH THI ĐẤU – BẢNG XẾP HẠNG
   ===================================================== */

.wp-sport-app .tabs-container .tab-button {
    color: var(--knc-text-light, #667085) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Icon sử dụng cùng màu với chữ */
.wp-sport-app .tabs-container .tab-button .tab-icon,
.wp-sport-app .tabs-container .tab-button svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* Tab chưa active khi hover */
.wp-sport-app .tabs-container .tab-button:not(.active):hover,
.wp-sport-app .tabs-container .tab-button:not(.active):focus {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border-color: var(--knc-border-gold, #E9D5A5) !important;
    box-shadow:
        0 2px 7px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.16) !important;
    outline: none !important;
}

/* Tab đang được chọn */
.wp-sport-app .tabs-container .tab-button.active,
.wp-sport-app .tabs-container .tab-button.active:hover,
.wp-sport-app .tabs-container .tab-button.active:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 10px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.3) !important;
    outline: none !important;
}

/* Chặn màu đỏ được tạo bằng pseudo-element */
.wp-sport-app .tabs-container .tab-button.active::before,
.wp-sport-app .tabs-container .tab-button.active::after {
    background: var(--knc-gold-light, #D9B653) !important;
    border-color: var(--knc-gold, #B68728) !important;
}


/* =====================================================
   PHÂN TRANG VÒNG ĐẤU
   ===================================================== */

/* Nút số vòng và nút điều hướng */
.wp-sport-app .matches-header .round-btn,
.wp-sport-app .matches-header .nav-btn {
    color: var(--knc-text, #25344A) !important;
    background: var(--knc-white, #FFFFFF) !important;
    background-image: none !important;
    border-color: var(--knc-border, #E3E3E3) !important;
    box-shadow: none !important;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Hover các vòng chưa được chọn */
.wp-sport-app .matches-header .round-btn:not(.active):hover,
.wp-sport-app .matches-header .nav-btn:hover,
.wp-sport-app .matches-header .round-btn:not(.active):focus,
.wp-sport-app .matches-header .nav-btn:focus {
    color: var(--knc-gold-dark, #8A641B) !important;
    background: var(--knc-gold-bg, #FFF8E7) !important;
    background-image: none !important;
    border-color: var(--knc-gold, #B68728) !important;
    box-shadow:
        0 2px 6px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.16) !important;
    outline: none !important;
}

/* Vòng đấu đang được chọn */
.wp-sport-app .matches-header .round-btn.active,
.wp-sport-app .matches-header .round-btn.active:hover,
.wp-sport-app .matches-header .round-btn.active:focus {
    color: var(--knc-white, #FFFFFF) !important;
    background: linear-gradient(
        135deg,
        var(--knc-gold-dark, #8A641B) 0%,
        var(--knc-gold, #B68728) 55%,
        var(--knc-gold-light, #D9B653) 100%
    ) !important;
    border-color: var(--knc-gold-dark, #8A641B) !important;
    box-shadow:
        0 3px 8px rgba(var(--knc-gold-rgb, 182, 135, 40), 0.28) !important;
    outline: none !important;
}

/* Chặn màu đỏ ở pseudo-element của vòng active */
.wp-sport-app .matches-header .round-btn.active::before,
.wp-sport-app .matches-header .round-btn.active::after {
    background: var(--knc-gold-light, #D9B653) !important;
    border-color: var(--knc-gold, #B68728) !important;
}


/* =====================================================
   VIỀN KHU VỰC PHÂN TRANG
   ===================================================== */

.wp-sport-app .matches-header,
.wp-sport-app .pagination-controls {
    border-color: var(--knc-border-gold, #E9D5A5) !important;
}

.wp-sport-app .rounds-list {
    scrollbar-color:
        var(--knc-gold, #B68728)
        var(--knc-gold-bg, #FFF8E7) !important;
}