/* ============================================================
   ODDS WIDGET - MODERN REDESIGN
   - League filter: 1 dòng, scroll ngang, ẩn scrollbar
   - Giao diện gọn, hiện đại, sắc nét
   ============================================================ */

:root {
    --odd-contentTab-gray-color: rgb(from var(--primary-color) r g b / 0.12);
    --odd-bodyTableOdds-color: rgb(from var(--primary-color) r g b / 0.12);
    --odd-activeTab-bg-hover: #FFFFFF;
    --odd-activeTab-live-bg-hover: #FFFFFF;
    --odd-bodyTableOdds-border-hover: 1px solid rgb(from var(--primary-color) r g b / 0.08);
    --odd-primary-color: var(--primary-color);
    --odd-color-filter-odds-name: var(--primary-color);
    --odd-bg-color-filter-bookmaker-name: var(--primary-color);
    --odd-color-prefix-odds-name: #000;

    --fixture-row-item-hover-bg-color: #f4f6f8;
    --fixture-league-menu-item-bg-color-active: var(--primary-color);
    --fixture-league-menu-item-bg-color: #FFFFFF;
    --fixture-row-item-even-bg-color: #FFFFFF;

    --ranking-head-list-bg-color: var(--primary-color);
    --ranking-league-menu-item-bg-color: #FFFFFF;
    --rankingleague-menu-item-bg-color-active: var(--primary-color);

    --widget-draw-color: #5E6C77;
    --widget-home-color: var(--primary-color);

    /* Design tokens */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --transition: 0.2s ease;
    --border-color: #e8eaed;
    --text-primary: #111;
    --text-muted: #6b7280;
    --bg-subtle: #f4f6f8;
}

/* ── CONTAINER ── */
.backgroundOddsPage {
    background-color: transparent;
    padding: 0;
}

.embed-odds-bookmarker {
    font-family: inherit;
    font-size: 12px;
}

.embed-odds-bookmarker .odds-m-auto {
    max-width: 100%;
}

.embed-odds-bookmarker table {
    font-size: 13.5px;
}

/* ── TABLE HEADER ── */
.oddsTabData table,
.oddsTabData th,
.oddsTabData td {
    border-width: 1px;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.oddsTabData table th {
    text-align: center;
}

/* ── HEAD TABLE ODDS (header row màu primary) ── */
.headTableOdds {
    background: var(--primary-color);
    border-radius: 0;
}

.headTableOdds > * {
    border-color: rgba(255,255,255,0.2);
}

.headTableOdds .ftTableOdds .bottomFt > * {
    border-color: rgba(255,255,255,0.2);
}

.headTableOdds.stickyHead {
    z-index: 3;
}

.oddsListData > .itemOddsData,
.oddsListData .leaguesName,
.headTableOdds.stickyHead {
    box-shadow: unset;
    margin-bottom: 0;
}

/* ── SCROLLABLE TABLE ── */
.tableOdds {
    max-height: 1000px;
    overflow-y: auto;
    overflow-x: hidden;
}

.tableOdds::-webkit-scrollbar { width: 3px; }
.tableOdds::-webkit-scrollbar-track { background: var(--bg-subtle); }
.tableOdds::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 99px; }
.tableOdds::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/* ── LEAGUE NAME ROW ── */
.oddsListData .leaguesName {
    position: relative;
    padding-block: 7px;
    padding-right: 12px;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: capitalize;
    justify-content: space-between;
    letter-spacing: 0.01em;
}

.oddsListData .leaguesName,
.oddsListData.title_live .leaguesName {
    background-color: #eef0f3 !important;
    color: #2d3748;
}

.oddsListData .leaguesName .arrowIcon { order: 2; }

.oddsListData .leaguesName .logo {
    height: 20px;
    width: 28px;
    object-fit: contain;
}

.oddsListData .leaguesName .name {
    position: relative;
    z-index: 2;
    gap: 10px;
}

/* ── DATA BUTTON ── */
.oddsListData .data-button {
    background-color: transparent;
    border: 1px solid rgb(from var(--primary-color) r g b / 0.35);
    border-radius: var(--radius-md);
    color: var(--primary-color);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px;
    transition: var(--transition);
}

.oddsListData .data-button:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.oddsListData .data-button svg { display: none; }

/* ── ITEM ODDS ── */
.oddsListData > .itemOddsData.bgLive,
.oddsListData > .itemOddsData.bgLive .listItemTabOdds .activeTab:after,
.oddsListData > .itemOddsData,
.oddsListData > .itemOddsData .listItemTabOdds .activeTab:after {
    background-color: #fff;
}

/* ══════════════════════════════════════════
   HEAD ODDS - khu vực filter phía trên
   ══════════════════════════════════════════ */
.embed-odds-bookmarker .headOdds {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    gap: 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 8px;
}

.headOdds .searchAndDropdownLeagues {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.headOdds .filterDateAndBookmaker {
    padding: 8px 12px;
}

/* ── LEAGUE FILTER: 1 DÒNG DUY NHẤT, SCROLL NGANG ── */
.headOdds .listLeaguesFilter {
    display: flex;
    flex-wrap: nowrap;           /* ✅ 1 dòng, không xuống dòng */
    gap: 5px;
    padding: 8px 12px;
    overflow-x: auto;            /* scroll ngang nếu quá dài */
    overflow-y: hidden;
    border-bottom: 1px solid var(--border-color);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.headOdds .listLeaguesFilter::-webkit-scrollbar {
    display: none;               /* ẩn scrollbar, vẫn scroll được */
}

.headOdds .listLeaguesFilter .leaguesFilter {
    background-color: var(--bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--transition);
}

.headOdds .listLeaguesFilter .leaguesFilter:hover {
    background-color: rgb(from var(--primary-color) r g b / 0.1);
    color: var(--primary-color);
    border-color: rgb(from var(--primary-color) r g b / 0.2);
}

.headOdds .listLeaguesFilter .leaguesFilterActive {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── FILTER DATE & BOOKMAKER ── */
.headOdds .filterDateAndBookmaker {
    align-items: center;
}

/* ── SEARCH & DROPDOWN ── */
.searchAndDropdownLeagues .searchInput {
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: none;
    font-size: 13px;
    transition: var(--transition);
}

.searchAndDropdownLeagues .searchInput:focus {
    border-color: var(--primary-color);
    background-color: #fff;
}

.DropdownLeagues {
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
}

.DropdownLeagues .arrowIcon { color: var(--text-muted); }
.searchAndDropdownLeagues .searchIcon { color: var(--text-muted); }

.searchAndDropdownLeagues .listLeagues li {
    margin: 0;
    font-size: 13px;
}

/* ── DATE FILTER BAR ── */
.listFilterDate {
    gap: 4px !important;
    width: 100%;
}

.listFilterDate .liveFilter {
    border-radius: var(--radius-md);
}

.listFilterDate .dateFilter {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    transition: var(--transition);
}

.listFilterDate .dateFilter:hover,
.listFilterDate .dateFilter.active {
    background: var(--primary-color);
    color: #fff;
}

.listFilterDate .favourite {
    min-width: 30px;
    position: relative;
}

.listFilterDate .favourite.active {
    background-color: var(--primary-color);
}

.listFilterDate .favourite:before {
    content: "";
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"><g id="Polygon_14" data-name="Polygon 14" fill="%23f27f0c"><path d="M 13.06095123291016 15.05339527130127 L 8.739219665527344 12.69876956939697 L 8.5 12.56842994689941 L 8.260780334472656 12.69876956939697 L 3.939049005508423 15.05339527130127 L 4.864910125732422 10.26620960235596 L 4.917630195617676 9.993650436401367 L 4.714159965515137 9.804800033569336 L 1.126810669898987 6.475142002105713 L 6.011730194091797 5.86745023727417 L 6.28400993347168 5.833570003509521 L 6.401679992675781 5.585710048675537 L 8.5 1.165849924087524 L 10.59832000732422 5.585710048675537 L 10.71599006652832 5.833570003509521 L 10.9882698059082 5.86745023727417 L 15.87318897247314 6.475142002105713 L 12.28584003448486 9.804800033569336 L 12.08236980438232 9.993650436401367 L 12.13508987426758 10.26620960235596 L 13.06095123291016 15.05339527130127 Z" stroke="none"/><path d="M 8.5 2.331710815429688 L 6.618020057678223 6.295880317687988 L 2.253602027893066 6.838815689086914 L 5.461239814758301 9.8160400390625 L 4.631400108337402 14.10678863525391 L 8.5 11.9990406036377 L 12.3685998916626 14.10678863525391 L 11.5387601852417 9.8160400390625 L 14.74639797210693 6.838815689086914 L 10.38197994232178 6.295880317687988 L 8.5 2.331710815429688 M 8.5 0 L 11.05000019073486 5.371270179748535 L 17 6.111459732055664 L 12.62598991394043 10.1712703704834 L 13.7532901763916 16 L 8.5 13.13782978057861 L 3.246709823608398 16 L 4.37401008605957 10.1712703704834 L 0 6.111459732055664 L 5.949999809265137 5.371270179748535 L 8.5 0 Z" stroke="none" fill="%23f27f0c"/></g></svg>') center no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px;
}

.listFilterDate .favourite svg { display: none; }

/* ── ODDS CELLS ── */
.ftTableOdds .bottomFt .oddData > * {
    background: #f0f2f4;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 400;
    padding: 2px 0 2px 4px;
    transition: var(--transition);
}

.ftTableOdds .bottomFt .oddData.odds-good > .odds {
    background: #fff;
}

.ftTableOdds .bottomFt .oddData .odds:hover {
    background-color: #daeeff;
    color: #0055ac;
}

.ftTableOdds .bottomFt .oddData .odds:hover .oddsColor,
.ftTableOdds .bottomFt .oddData .odds:hover .colorStyleNumber {
    color: #EA6616;
}

.ftTableOdds .bottomFt .oddData.odds-good {
    background: #FFCD4A;
}

.ftTableOdds .bottomFt .oddData.odds-good:after {
    background-color: #FFCD4A;
}

.ftTableOdds .bottomFt .oddData > .bgTipAndVip {
    color: #F34C4C;
    font-weight: 500;
    gap: 4px;
    padding-inline: 0;
}

/* ── TEAM INFO ── */
.bodyTableOdds .teamInfo,
.bodyTableOdds .oddsPrefix {
    font-size: 13px;
    color: #1a1a1a;
    transition: var(--transition);
}

.bodyTableOdds .teamInfo:hover,
.bodyTableOdds .oddsPrefix:hover {
    color: var(--primary-color);
}

.bodyTableOdds.viewBetDiv { margin-bottom: -1px; }

/* ── INSTRUCT POPUP ── */
.instructPopup {
    display: none !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-md);
    height: 36px;
    padding-block: 0;
}

.instructPopup .instruct { color: var(--primary-color); }

/* ── FILTER ODDS & BOOKMAKER ── */
.filterOddsAndBookmaker {
    display: none !important;
    width: 250px;
}

.filterOddsAndBookmaker .filterOdds .nameOdds {
    border-color: var(--primary-color);
    border-radius: var(--radius-md);
    color: var(--primary-color);
    min-width: 125px;
    height: 36px;
}

.filterOddsAndBookmaker .filterOdds .nameOdds:before {
    background-color: var(--primary-color);
    border-radius: 0;
}

.filterOddsAndBookmaker .filterBookmaker .nameBookmaker {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-md);
    height: 36px;
}

.filterOddsAndBookmaker .filterBookmaker .nameBookmaker:hover { color: var(--primary-color); }
.filterOddsAndBookmaker .filterBookmaker .nameBookmaker:hover path { fill: var(--primary-color); }

.filterOddsAndBookmaker .filterBookmaker .bookmarkerItem {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ── BET ORDER ── */
.oddsListData > .itemOddsData .bodyTableOdds .betOrder { display: flex; }

.itemNumberUserClick { color: var(--text-primary); }

.itemOddsData.itemTopFixtures { border: 0; }

.itemOddsData.itemTopFixtures .itemNumberUserClick {
    border: 1px solid rgb(from var(--primary-color) r g b / 0.4);
    color: var(--primary-color);
}

.oddsListData > .itemOddsData .betOrder > *,
.oddsListData > .itemOddsData.bgLive .betOrder > * {
    background-color: #fff !important;
    border: 1px solid rgb(from var(--primary-color) r g b / 0.4);
    border-radius: var(--radius-md);
    clip-path: unset;
    color: var(--primary-color);
    font-weight: 500;
    width: 160px;
    transition: var(--transition);
}

.oddsListData > .itemOddsData .betOrder > *:hover,
.oddsListData > .itemOddsData.bgLive .betOrder > *:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color);
    color: #fff;
}

/* ── MISC ── */
.notFoundMatch { background-color: var(--bg-subtle); }

/* ── STAR ICON ── */
.starIcon {
    justify-content: flex-start;
    width: 22px;
}

.starIcon svg { display: none; }

.starIcon > div {
    height: 18px;
    width: 18px;
    position: relative;
}

.starIcon > div:before {
    content: "";
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"><g id="Polygon_28" data-name="Polygon 28" fill="%23fff"><path d="M 13.06095123291016 15.05339527130127 L 8.739219665527344 12.69876956939697 L 8.5 12.56842994689941 L 8.260780334472656 12.69876956939697 L 3.939049005508423 15.05339527130127 L 4.864910125732422 10.26620960235596 L 4.917630195617676 9.993650436401367 L 4.714159965515137 9.804800033569336 L 1.126810669898987 6.475142002105713 L 6.011730194091797 5.86745023727417 L 6.28400993347168 5.833570003509521 L 6.401679992675781 5.585710048675537 L 8.5 1.165849924087524 L 10.59832000732422 5.585710048675537 L 10.71599006652832 5.833570003509521 L 10.9882698059082 5.86745023727417 L 15.87318897247314 6.475142002105713 L 12.28584003448486 9.804800033569336 L 12.08236980438232 9.993650436401367 L 12.13508987426758 10.26620960235596 L 13.06095123291016 15.05339527130127 Z" stroke="none"/><path d="M 8.5 2.331710815429688 L 6.618020057678223 6.295880317687988 L 2.253602027893066 6.838815689086914 L 5.461239814758301 9.8160400390625 L 4.631400108337402 14.10678863525391 L 8.5 11.9990406036377 L 12.3685998916626 14.10678863525391 L 11.5387601852417 9.8160400390625 L 14.74639797210693 6.838815689086914 L 10.38197994232178 6.295880317687988 L 8.5 2.331710815429688 M 8.5 0 L 11.05000019073486 5.371270179748535 L 17 6.111459732055664 L 12.62598991394043 10.1712703704834 L 13.7532901763916 16 L 8.5 13.13782978057861 L 3.246709823608398 16 L 4.37401008605957 10.1712703704834 L 0 6.111459732055664 L 5.949999809265137 5.371270179748535 L 8.5 0 Z" stroke="none" fill="%23f27f0c"/></g></svg>') center no-repeat;
    background-size: contain;
    position: absolute;
    left: 0; top: 0;
    height: 100%; width: 100%;
}

.starIcon.star_active > div:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"><g id="Polygon_14" data-name="Polygon 14" fill="%23f27f0c"><path d="M 13.06095123291016 15.05339527130127 L 8.739219665527344 12.69876956939697 L 8.5 12.56842994689941 L 8.260780334472656 12.69876956939697 L 3.939049005508423 15.05339527130127 L 4.864910125732422 10.26620960235596 L 4.917630195617676 9.993650436401367 L 4.714159965515137 9.804800033569336 L 1.126810669898987 6.475142002105713 L 6.011730194091797 5.86745023727417 L 6.28400993347168 5.833570003509521 L 6.401679992675781 5.585710048675537 L 8.5 1.165849924087524 L 10.59832000732422 5.585710048675537 L 10.71599006652832 5.833570003509521 L 10.9882698059082 5.86745023727417 L 15.87318897247314 6.475142002105713 L 12.28584003448486 9.804800033569336 L 12.08236980438232 9.993650436401367 L 12.13508987426758 10.26620960235596 L 13.06095123291016 15.05339527130127 Z" stroke="none"/><path d="M 8.5 2.331710815429688 L 6.618020057678223 6.295880317687988 L 2.253602027893066 6.838815689086914 L 5.461239814758301 9.8160400390625 L 4.631400108337402 14.10678863525391 L 8.5 11.9990406036377 L 12.3685998916626 14.10678863525391 L 11.5387601852417 9.8160400390625 L 14.74639797210693 6.838815689086914 L 10.38197994232178 6.295880317687988 L 8.5 2.331710815429688 M 8.5 0 L 11.05000019073486 5.371270179748535 L 17 6.111459732055664 L 12.62598991394043 10.1712703704834 L 13.7532901763916 16 L 8.5 13.13782978057861 L 3.246709823608398 16 L 4.37401008605957 10.1712703704834 L 0 6.111459732055664 L 5.949999809265137 5.371270179748535 L 8.5 0 Z" stroke="none" fill="%23f27f0c"/></g></svg>');
}

/* ── MODALS ── */
.title-modalGoal { background-color: var(--primary-color); }
.headingInstruct { background: var(--primary-color); }
.modalBackdrop.open { background: rgba(0,0,0,0.4); }
.modalTop:after { background: var(--primary-color)b3; }
.leaguesModalPopup { background-color: var(--primary-color)99; }

.tabModalPopup .itemTabModalPopup:hover,
.tabModalPopup .itemTabModalPopup.active { color: var(--primary-color); }

.closeModalData.team,
.closeModalData { background: #fff; }
.closeModalData svg path { fill: var(--primary-color); }

/* ── TEAM TABS ── */
.listtabTeam { gap: 5px; }
.listtabTeam > * {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition: var(--transition);
}

.bgColorTeamActive, .bgColorNotActive:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ── ODDS PANELS ── */
.oddsLive, .oddsStatis, .oddsData, .oddsDataPer {
    border-radius: var(--radius-lg);
    border: 1px solid rgb(from var(--primary-color) r g b / 0.4);
    overflow: hidden;
}

.oddsStatis__content,
.oddsTabLive__content,
.oddsData__content,
.oddsDataPer__content {
    background-color: #fff;
    border-radius: 0;
}

/* ── LINEUP ── */
.lineupDivTotal {
    background: #fff;
    border: 1px solid rgb(from var(--primary-color) r g b / 0.4);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.titleModalLineUp {
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    color: var(--primary-color);
    font-size: 14px;
    padding: 0 16px;
}

.titleModalLineUp:after { display: none; }

/* ── H2H ── */
.headerH2H > * {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition: var(--transition);
}

.headerH2H > *:hover, .headerH2H > .bgActiveBtn {
    background: var(--primary-color);
    color: #fff;
}

.backgroundHeadTableH2h.headingH2H { background: #ededee; }
.backgroundHeadTableH2h:first-of-type > * { border-color: #ededee; }
.WLTableH2h, .AHTableH2h, .OUTableH2h { width: 44px; }


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 991px) {
    .titleLeagues svg { color: var(--text-primary); }

    .headOdds .titleBet {
        background: var(--primary-color);
        border-radius: 0;
        margin-bottom: 0;
    }

    .titleBet .instructPopup .textInstruct { color: #fff; }

    .headOdds .listFilterDate > * {
        font-size: 12px;
        white-space: nowrap;
    }

    .headOdds .filterDateAndBookmaker .listFilterDate {
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ftTableOdds .bottomFt .oddData .odds-item-data.odds-good {
        background-color: #FFCD4A;
        padding: 4px;
    }

    .ftTableOdds .bottomFt .oddData .odds-item-data > * { width: 100%; }
}

@media (max-width: 767px) {
    /* League filter vẫn 1 dòng scroll ngang trên mobile */
    .headOdds .listLeaguesFilter {
        flex-wrap: nowrap;
        padding: 6px 10px;
    }

    .starIcon {
        position: relative;
        height: 20px;
    }

    .starIcon:before {
        content: "";
        background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"><g id="Polygon_28" data-name="Polygon 28" fill="%23fff"><path d="M 13.06095123291016 15.05339527130127 L 8.739219665527344 12.69876956939697 L 8.5 12.56842994689941 L 8.260780334472656 12.69876956939697 L 3.939049005508423 15.05339527130127 L 4.864910125732422 10.26620960235596 L 4.917630195617676 9.993650436401367 L 4.714159965515137 9.804800033569336 L 1.126810669898987 6.475142002105713 L 6.011730194091797 5.86745023727417 L 6.28400993347168 5.833570003509521 L 6.401679992675781 5.585710048675537 L 8.5 1.165849924087524 L 10.59832000732422 5.585710048675537 L 10.71599006652832 5.833570003509521 L 10.9882698059082 5.86745023727417 L 15.87318897247314 6.475142002105713 L 12.28584003448486 9.804800033569336 L 12.08236980438232 9.993650436401367 L 12.13508987426758 10.26620960235596 L 13.06095123291016 15.05339527130127 Z" stroke="none"/><path d="M 8.5 2.331710815429688 L 6.618020057678223 6.295880317687988 L 2.253602027893066 6.838815689086914 L 5.461239814758301 9.8160400390625 L 4.631400108337402 14.10678863525391 L 8.5 11.9990406036377 L 12.3685998916626 14.10678863525391 L 11.5387601852417 9.8160400390625 L 14.74639797210693 6.838815689086914 L 10.38197994232178 6.295880317687988 L 8.5 2.331710815429688 M 8.5 0 L 11.05000019073486 5.371270179748535 L 17 6.111459732055664 L 12.62598991394043 10.1712703704834 L 13.7532901763916 16 L 8.5 13.13782978057861 L 3.246709823608398 16 L 4.37401008605957 10.1712703704834 L 0 6.111459732055664 L 5.949999809265137 5.371270179748535 L 8.5 0 Z" stroke="none" fill="%23f27f0c"/></g></svg>') center no-repeat;
        background-size: contain;
        position: absolute;
        left: 0; top: 0;
        height: 100%; width: 100%;
    }

    .starIcon.star_active:before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16"><g id="Polygon_14" data-name="Polygon 14" fill="%23f27f0c"><path d="M 13.06095123291016 15.05339527130127 L 8.739219665527344 12.69876956939697 L 8.5 12.56842994689941 L 8.260780334472656 12.69876956939697 L 3.939049005508423 15.05339527130127 L 4.864910125732422 10.26620960235596 L 4.917630195617676 9.993650436401367 L 4.714159965515137 9.804800033569336 L 1.126810669898987 6.475142002105713 L 6.011730194091797 5.86745023727417 L 6.28400993347168 5.833570003509521 L 6.401679992675781 5.585710048675537 L 8.5 1.165849924087524 L 10.59832000732422 5.585710048675537 L 10.71599006652832 5.833570003509521 L 10.9882698059082 5.86745023727417 L 15.87318897247314 6.475142002105713 L 12.28584003448486 9.804800033569336 L 12.08236980438232 9.993650436401367 L 12.13508987426758 10.26620960235596 L 13.06095123291016 15.05339527130127 Z" stroke="none"/><path d="M 8.5 2.331710815429688 L 6.618020057678223 6.295880317687988 L 2.253602027893066 6.838815689086914 L 5.461239814758301 9.8160400390625 L 4.631400108337402 14.10678863525391 L 8.5 11.9990406036377 L 12.3685998916626 14.10678863525391 L 11.5387601852417 9.8160400390625 L 14.74639797210693 6.838815689086914 L 10.38197994232178 6.295880317687988 L 8.5 2.331710815429688 M 8.5 0 L 11.05000019073486 5.371270179748535 L 17 6.111459732055664 L 12.62598991394043 10.1712703704834 L 13.7532901763916 16 L 8.5 13.13782978057861 L 3.246709823608398 16 L 4.37401008605957 10.1712703704834 L 0 6.111459732055664 L 5.949999809265137 5.371270179748535 L 8.5 0 Z" stroke="none" fill="%23f27f0c"/></g></svg>');
    }

    .listFilterDate .dateFilter:nth-child(7),
    .listFilterDate .dateFilter:nth-child(8),
    .listFilterDate .dateFilter:nth-child(9) { display: flex; }
}
/* END ODDS */


/* ══════════════════════════════════════════
   FIXTURE - THEME 7M
   ══════════════════════════════════════════ */
.fixture_football_theme_7m { margin-bottom: 1rem; }

.fixture_football_theme_7m .theme7m-fixture {
    font-family: inherit;
    font-size: 11.5px;
    padding: 0;
}

.theme7m-fixture-table {
    max-height: 800px;
    overflow-y: auto;
}

@container (max-width: 1400px) {
    .fixture_football_theme_7m .theme7m-fixture-table .theme7m-away,
    .fixture_football_theme_7m .theme7m-fixture-table .theme7m-home { width: 12%; }
}

/* ── AI / PLAY TEST ── */
.box-odds-ai-value .item-odds-ai-value { background: var(--primary-color); }

.btn-ai-and-play { position: relative; }
.btn-ai-and-play .ai-hover { height: 60px; width: 60px; }

.play-test {
    background-color: var(--primary-color);
    color: #fff !important;
    white-space: nowrap;
}
.play-test .chartIcon { display: flex; }

.ai-btn {
    position: absolute;
    right: -50px;
}
.ai-btn:hover .ai-hover { top: -18px; right: -5px; }

.modalPlayTest { top: 20vh; background: #fff; }
.titleModalPlay { background: var(--primary-color); color: #fff; }
.titleTeamsOddsTable { background: rgb(from var(--primary-color) r g b / 0.075); color: var(--text-primary); }
.headerTeamOddsTable { background: #fff; color: var(--text-primary); }
.BodyTeamOddsTable { border-right-color: var(--border-color); }
.table-odds-Play { border-bottom-color: rgb(from var(--primary-color) r g b / 0.075); }

.table-odds-Play .oddsItemTable .odds {
    background: #eef0f3 !important;
    color: var(--text-primary);
}
.table-odds-Play .oddsItemTable .oddsColor { color: var(--primary-color); }

.btn-clickviewodds {
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
}

@media (max-width: 767px) {
    .liveOddsData { position: relative; }
    .liveOddsData .ai-btn { right: 0; width: 60px; bottom: 1px; }
}


/* ══════════════════════════════════════════
   RANKING WIDGET
   ══════════════════════════════════════════ */
.embed-ranking {
    font-family: inherit;
    font-size: 13px;
}

.embed-ranking .league-menu {
    padding: 8px 10px 0;
    gap: 4px;
}

.embed-ranking .ranking-list .ranking-head {
    border-radius: 0;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 500;
}

.embed-ranking .league-menu .league-menu-item {
    font-size: 12px;
    background-color: #e8e8e8 !important;
    border-radius: var(--radius-sm) !important;
    color: #585858 !important;
    font-weight: 500;
    margin-bottom: 0;
    white-space: nowrap;
    padding: 5px 8px;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.embed-ranking .league-menu .league-menu-item.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.embed-ranking .ranking-list .ranking-table .ranking-table-body-list:nth-child(odd) {
    background-color: rgb(from var(--primary-color) r g b / 0.06);
}
.embed-ranking .ranking-list .ranking-table .ranking-table-body-list:nth-child(2n) {
    background-color: #fff;
}
.embed-ranking .ranking-list .ranking-table .ranking-table-body-list { color: #00182E; }
.embed-ranking .ranking-list .ranking-table .ranking-table-body-list:nth-of-type(-n+3) .ranking-number > div {
    background-color: var(--primary-color);
}
.embed-ranking .ranking-list .ranking-table .ranking-table-body-list .name { font-weight: 600; }
.embed-ranking .ranking-list .ranking-table .ranking-table-head {
    background-color: #fff;
    padding-left: 0;
    padding-right: 4px;
}
.embed-ranking .ranking-list .ranking-table .ranking-table-body-list .ranking-number > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ranking sidebar */
.right-box .embed-ranking { font-size: 12px !important; }

.right-box .embed-ranking .league-menu {
    font-size: 12px !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.right-box .embed-ranking .league-menu::-webkit-scrollbar { width: 100% !important; height: 3px !important; }
.right-box .embed-ranking .league-menu::-webkit-scrollbar-track { background: rgb(from var(--primary-color) r g b / 0.06) !important; }
.right-box .embed-ranking .league-menu::-webkit-scrollbar-thumb { background: var(--primary-color) !important; border-radius: 99px !important; }

.right-box .embed-ranking .league-menu .league-menu-item {
    background-color: #F7F8F9 !important;
    border-radius: 0 !important;
    color: #585858 !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
}

.right-box .embed-ranking .ranking-list .ranking-head { background-color: #E9EDF0; color: var(--text-primary); }
.right-box .embed-ranking .league-menu .league-menu-item.active { background-color: var(--primary-color) !important; color: #fff !important; }
.right-box .embed-ranking .ranking-list .ranking-table .ranking-table-head .rank { text-align: left; padding-left: 8px; }
.right-box .embed-ranking .ranking-list { margin-top: -1px !important; }
.right-box .embed-ranking .ranking-list .ranking-table .ranking-table-head .team,
.right-box .embed-ranking .ranking-list .ranking-table .ranking-table-body-list .team { display: none; }
.right-box .embed-ranking .ranking-list .ranking-table .ranking-table-body-list { padding-left: 0; }
.right-box .embed-ranking .name.ranking-text-left span {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}
.right-box .embed-ranking .ranking-list .ranking-table .ranking-table-body-list .ranking-number > div {
    border-radius: 0 5px 5px 0;
}

/* Aside ranking */
.right-box .embed-ranking,
aside .embed-ranking .league-menu {
    font-size: 12px;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    margin-bottom: 8px;
}

aside .embed-ranking .league-menu .league-menu-item { margin-bottom: 4px; }

aside .embed-ranking .league-menu::-webkit-scrollbar { width: 100%; height: 4px; }
aside .embed-ranking .league-menu::-webkit-scrollbar-track { background: rgb(from var(--primary-color) r g b / 0.06); }
aside .embed-ranking .league-menu::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 99px; }

.right-box .embed-ranking .ranking-list { margin-top: -1px; }


/* ══════════════════════════════════════════
   FIXTURE WIDGET
   ══════════════════════════════════════════ */
.embed-fixture {
    font-family: inherit;
    font-size: 13px;
}

.embed-fixture .league-menu { gap: 4px; }

.embed-fixture .league-menu .league-menu-item {
    background-color: #e8e8e8 !important;
    border-radius: var(--radius-sm) !important;
    color: #585858 !important;
    padding: 5px 8px;
    transition: var(--transition);
}

.embed-fixture .league-menu .league-menu-item.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.embed-fixture .fixture-list-item .fixture-head {
    background: var(--primary-color);
    border-radius: 0;
    color: #fff;
}

.embed-fixture .fixture-list-item .fixture-row-item {
    padding-top: 6px;
    padding-bottom: 6px;
}

.embed-fixture .fixture-list-item .fixture-row-item:nth-child(odd) { background-color: #fff !important; }
.embed-fixture .fixture-list-item .fixture-row-item:nth-child(2n) { background-color: rgb(from var(--primary-color) r g b / 0.06) !important; }
.embed-fixture .fixture-list-item .fixture-row-item .match .logo { flex-shrink: 0; }

.embed-fixture .fixture-list-item .fixture-row-item .match .name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.embed-fixture .fixture-list-item .fixture-row-item .match .score-time .score {
    background: var(--primary-color);
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

.embed-fixture .fixture-list-item .fixture-row-item:hover { background-color: rgb(from var(--primary-color) r g b / 0.08) !important; }

/* Aside fixture */
aside .result_football_main .league-menu {
    font-size: 12px;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    margin-bottom: 8px;
}

aside .result_football_main .league-menu::-webkit-scrollbar { width: 100%; height: 4px; }
aside .result_football_main .league-menu::-webkit-scrollbar-track { background: rgb(from var(--primary-color) r g b / 0.06); }
aside .result_football_main .league-menu::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 99px; }

aside .result_football_main .embed-fixture { font-size: 12px; }

aside .embed-fixture .league-menu .league-menu-item {
    background-color: #e8e8e8 !important;
    border-radius: 0;
    color: #585858 !important;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
}

aside .embed-fixture .league-menu .league-menu-item.active { background-color: var(--primary-color) !important; color: #fff !important; }
aside .embed-fixture .fixture-list .fixture-list-item { display: none; }
aside .embed-fixture .fixture-list { gap: 0; }
aside .embed-fixture .fixture-list .fixture-list-item:nth-child(-n+3) { display: block; }
aside .embed-fixture .fixture-list-item .fixture-row-item { padding-top: 4px; padding-bottom: 4px; }


/* ══════════════════════════════════════════
   CONTENT - DETAIL / H2H / RECENT
   ══════════════════════════════════════════ */
:root { --detail-fixture-score-color: var(--primary-color); }

.fixture_football_h2h .fixture-h2h-wrapper .fixture-h2h-header,
.fixture_football_recent .fixture-h2h-wrapper .fixture-h2h-header { background: var(--primary-color); }

.fixture_football_h2h .fixture-h2h-wrapper .fixture-h2h-header div,
.fixture_football_recent .fixture-h2h-wrapper .fixture-h2h-header div { font-size: 14px; }

.fixture_football_recent .fixture-h2h-wrapper .fixture-h2h-content__match,
.fixture_football_h2h .fixture-h2h-wrapper .fixture-h2h-content__match { padding: 5px 10px; }

.fixture_football_recent .fixture-h2h-wrapper .fixture-h2h-content__match:last-child,
.fixture_football_h2h .fixture-h2h-wrapper .fixture-h2h-content__match:last-child { border-bottom: 0; }

.fixture_football_recent,
.fixture_football_detail,
.fixture_football_h2h { margin-bottom: 1rem; }


/* ══════════════════════════════════════════
   WIDGET LIVE / VOTE
   ══════════════════════════════════════════ */
.fixture_live .fixture-live-container { border: 0; border-radius: 0; padding-top: 0; }
.fixture_live .fixture-live-container__title { display: none; }

.fixture_live .fixture-live-container__content .live-team__time__time {
    background: #1356fb;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 16px;
    padding: 2px 6px;
}

.fixture_live .fixture-live-container .vote-slide__dot { border: 1px solid rgb(from var(--primary-color) r g b / 0.15); }
.fixture_live .fixture-live-container .vote-slide__dot.active { background: var(--primary-color); }
.fixture_live .fixture-live-container .vote-slide__btn { color: var(--primary-color); }

/* Vote widget */
.fixture_vote { padding-bottom: 10px; }
.fixture_vote .fixture-vote-container { border: 0; border-radius: 0; padding: 0; }
.fixture-vote-container__title { display: none; }

.fixture_vote .fixture-vote-container__content .vote-team__image {
    background-color: var(--bg-subtle);
    border-radius: 100px;
}

.fixture_vote .fixture-vote-container__content .vote-team__image img { object-fit: contain; height: 16px; width: 16px; }
.fixture_vote .fixture-vote-container__content .vote-team__home .vote-team__image img,
.fixture_vote .fixture-vote-container__content .vote-team__away .vote-team__image img { height: 32px; width: 32px; }

.fixture_vote .fixture-vote-container__content .vote-team__time__time {
    background: #1356fb;
    border-radius: var(--radius-md);
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
}

.fixture_vote .fixture-vote-container .vote-slide__btn { color: var(--primary-color); }
.fixture_vote .fixture-vote-container .vote-slide__dot { border: 1px solid rgb(from var(--primary-color) r g b / 0.15); }
.fixture_vote .fixture-vote-container .vote-slide__dot.active { background: var(--primary-color); }

.fixture_vote .fixture-vote-container__content__vote .vote-action__team { background-color: #E9EDF0; }

.fixture_vote .fixture-vote-container__content__vote .vote-action__team.active.vote-home,
.fixture_vote .fixture-vote-container__content__vote .vote-action__team.active.vote-draw,
.fixture_vote .fixture-vote-container__content__vote .vote-action__team.active.vote-away { color: #fff; }