#navbar-iframe { display: none !important; }
        :root {
            --primary-red: #ff0000;
            --accent-gold: #aba304;
            --dark-bg: #0a0a0a;
            --card-bg: #111111;
            --bright-date: #ffff00;
        }
        body { background-color: var(--dark-bg); color: #f8f9fa; font-family: 'Rajdhani', sans-serif; margin: 0; padding: 0; overflow: auto; }
/* ================= APP WRAPPER ================= */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* full viewport */
  width: 100%;
}

/* ================= HEADER / NAVBAR ================= */
.app-header {
  position: sticky;   /* selalu di atas saat scroll */
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  background-color: #111;
  border-bottom: 2px solid #ff0000; /* primary red */
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
}

.app-header .logo {
  color: #ff0000; /* primary red */
}

.app-header button {
  padding: 6px 12px;
  background-color: #ff0000; /* primary red */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.3s;
}

.app-header button:hover {
  background-color: #cc0000;
}
        .video-container-full { width: 100vw; position: relative; background: #000; border-bottom: 2px solid var(--primary-red); z-index: 9999; }
        .ratio-16x9 { width: 100%; padding-bottom: 56.25%; position: relative; background: #000; }
        .ratio-16x9 iframe, .ratio-16x9 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: fill; }
        .running-text { background: #fff; color: #000; display: flex; align-items: center; font-weight: bold; font-size: 11px; height: 25px; width: 100%; }
        .running-label { background: #f90018; color: #ffffff; padding: 0 8px; height: 100%; display: flex; align-items: center; white-space: nowrap; margin-right: 10px; }
        .bar-info { width: 100%; background: #000; border-bottom: 1px solid #333; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
        .icon-nav { background: #222; border-radius: 8px; padding: 5px 8px; color: #fff; font-size: 14px; text-decoration: none; margin-left: 3px; border: 1px solid #333; }
        .nav-pills .nav-link { color: #ccc; background: #1e1e1e; margin: 0 2px; border: 1px solid #333; font-weight: bold; flex: 1; font-size: 12px; }
        .nav-pills .nav-link.active { background: var(--primary-red); color: white; border-color: var(--primary-red); }
        .info-card-center {
    background: #111;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #222;
    text-align: center;
}

.info-card-center .live-badge{
    display: inline-block;
    background: var(--primary-red);
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.info-badge {
    display: inline-block;
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: #fff;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* BADGE REKOMENDASI KHUSUS */
.info-tv {
    display: inline-block;
    background: linear-gradient(135deg, #ffcc00, #ff8800);
    color: #111;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.6);
    margin-bottom: 12px;
}

.info-content {
    text-align: left;
    font-size: 13px;
    color: #ddd;
    line-height: 1.6;
}

.info-content p {
    margin-bottom: 6px;
}
#pills-events, #pills-info, #pills-tv-list {
    max-height: 70vh;      /* Tinggi area scroll */
    overflow-y: auto;      /* Scroll atas bawah */
    overflow-x: hidden;    /* Jangan geser kiri kanan */
    padding-right: 5px;    /* Biar tidak ketutup scrollbar */
}

        .event-card { background: var(--card-bg); border: 1px solid #333; border-radius: 12px; margin-bottom: 12px; padding: 15px 5px; position: relative; }
        .team-logo-bola { width: 35px; height: 35px; object-fit: contain; border: none; border-radius: 0; }
        .team-name { font-size: 12px; font-weight: 700; display: block; color: #fff; margin-top: 5px; }
        .match-info { font-size: 14px; color: #00ffff; font-weight: 800; }
        .date-text { color: var(--bright-date); font-weight: bold; font-size: 11px; }
        .live-badge { position: absolute; top: 0; right: 0; background: #333; color: #eee; padding: 2px 8px; font-size: 9px; border-radius: 0 11px 0 11px; font-weight: bold; }
        .btn-link-match { border: 1px solid #555; color: #fff; background: #222; font-size: 10px; padding: 5px 12px; border-radius: 20px; text-decoration: none; display: inline-block; margin: 4px 2px; font-weight: 600; cursor: pointer; }
        .btn-daftar { background: linear-gradient(45deg, #007bff, #0056b3); }