/* --- CONFIG & SCROLLBAR --- */
:root {
    --background-wrapper: #1b212a;
    --hpu-bar-wrapper: #292c30;
    --statistics-home-bg: #5b6068;
    --statistics-win-bg: #06be46;
    --statistics-title: #FFFFFF;
    --statistics-win-bg-text-color: #06be46;
    --border-bottom-color: rgba(73, 73, 73, .4);
    --btn-text-color: #afb4ba;
    --btn--bg: linear-gradient(250deg, #22252c 33.6%, #222734 43.94%, #242c3e 59.4%);
    --btn-active-text-color: #4cf446;
    --btn-active-bg: linear-gradient(0deg, rgba(60, 225, 173, .2), rgba(5, 159, 71, .2));
    --btn-active-border-color: transparent;
}
*::-webkit-scrollbar { height: 4px; width: 4px; }
*::-webkit-scrollbar-thumb { background: #fff; border-radius: 4px; }
*::-webkit-scrollbar-track { background: #60828b; }

/* --- TABS NAVIGATION --- */
 
.hpu-nav-tabs .hpu-nav-item a.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text-color) !important;
  border: none;
  position: relative;
  font-weight: 700;
}

/* Border Effect cho Active Tab */
.hpu-nav-tabs .hpu-nav-item a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(135deg,#00fc22,#00fc2200 30% 70%,#00fc22);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .3;
  pointer-events: none;
}

/* --- POPUP STRUCTURE --- */
.match-popup {
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
}
.match-popup.statistic-section { top: 40px; }

.match-popup .statics-popup,
.match-popup .incident-popup {
  width: 420px;
  background: var(--background-wrapper);
  border-radius: 13px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}