<?php
function bongdako_shortcode_tylekeo($atts)
{

    $atts = shortcode_atts(
        array(
            'leagues' => null,
            'nations' => null,
        ),
        $atts
    );
    $leagues = $atts['leagues'];
    $nations = $atts['nations'];

    $saved_bgcolor_rate = get_option('bg_color_rate');
    $saved_textcolor1_rate = get_option('text_color1_rate');
    $assets = plugin_dir_url(__FILE__) . '/';
    $assets_root = trailingslashit(dirname(dirname(dirname(plugin_dir_url(__FILE__))))) . 'assets/';
    $odd_home = number_format(rand(1, 20) / 10, 2); // Giá trị "Chủ"
    $odd_draw = number_format(rand(1, 20) / 10, 2); // Giá trị "Hòa"
    $odd_away = number_format(rand(1, 20) / 10, 2); // Giá trị "Khách"
    $odd_over = number_format(rand(1, 20) / 10, 2); // Giá trị "Trên"
    $odd_equal = number_format(rand(1, 20) / 10, 2); // Giá trị "Tỷ lệ"
    $odd_under = number_format(rand(1, 20) / 10, 2); // Giá trị "Dưới"

    $class_home = getRandomColorClass();
    $class_draw = getRandomColorClass();
    $class_away = getRandomColorClass();
    $class_over = getRandomColorClass();
    $class_equal = getRandomColorClass();
    $class_under = getRandomColorClass();
    $font = get_option('typography_main_rate', []);
    ob_start();


    ?>

    <?php
    static $sport_plugin_rate_existed = false;
    echo genDefaultFilterValue($leagues, $nations);
    if (!$sport_plugin_rate_existed) {
        ?>
        <link rel="preload" as="style"
              href="<?= BONGDAKO_BUILD ?>css/assets/css/iframe_rate.css?v=<?= ASSETS_VERSION ?>"/>
        <link rel="stylesheet" href="<?= BONGDAKO_BUILD ?>css/assets/css/iframe_rate.css?v=<?= ASSETS_VERSION ?>"/>
        <?php
        bongdako_banner_assets();
        bongdako_layout_assets();
        add_action('wp_footer', function () {
            bongdako_assets_js();
            $colsHide = 0;
            $colsHid2 = 0;
            if (true == get_option('hide_goc_rate', false)) {
                $colsHide += 1;
                $colsHid2 += 1;
            }
            if (true == get_option('hide_star_rate', false)) {
                $colsHide += 1;
            }
            ?>
            <script type="module" src="<?= BONGDAKO_BUILD ?>rate_iframe/assets/js/index.js?v=<?= ASSETS_VERSION ?>"
                    defer></script>
            <script src="<?= BONGDAKO_PLUGIN_DIR_URL ?>/layouts/shortcode/rate/common.js?v=<?= ASSETS_VERSION ?>"
                    defer></script>
            <script src="<?= BONGDAKO_PLUGIN_DIR_URL ?>/layouts/shortcode/rate/hide.js?v=<?= ASSETS_VERSION ?>"
                    defer></script>
            <script>
                // document.addEventListener('DOMContentLoaded', function () {
                //     setInterval(function () {
                //         $("#tr_upper-live-title td.upper-live-title-football.rs.td-bdr").attr("colspan", <?php echo 6 - $colsHide ?>);
                //         $("#scrollIframe #rate_iframe #table_live tr.tr-banner > td").attr("colspan", <?php echo 13 - $colsHide ?>);
                //         $("td.league-title.league-title-ht-title.t").attr("colspan", <?php echo 11 - $colsHid2 ?>);
                //     }, 500); // Chờ 1 giây rồi cập nhật
                // });
            </script>
            <?php
        });

        $sport_plugin_rate_existed = true;
    }
    ?>
    <link href="<?= $assets ?>style.css?v=<?= ASSETS_VERSION ?>" rel="stylesheet">

    <style>

        #scrollIframe #min .game-rate-ratio {
            background-image: url("<?= IMGS3_PLUGINS ?>/assets/football-vn/images/Union.svg");
        }


        #scrollIframe #game-rate-core-container .game-rate-ratio {
            background-image: url("<?= IMGS3_PLUGINS ?>/assets/football-vn/images/Union.svg");
        }

        #scrollIframe #game-rate #tableCore .live-channel .btn-first-live-mobile .btn-live-chanel-icon {
            background-image: url("<?= IMGS3_PLUGINS ?>/assets/images/live-icon-game-rate-white.svg");
        }

        #scrollIframe #game-rate .odds-number.odds-up::after {
            background-image: url("<?= IMGS3_PLUGINS ?>/assets/images/icon-arrow-up-light-v2.svg");
        }

        #scrollIframe #game-rate .odds-number.odds-down::after {
            background-image: url("<?= IMGS3_PLUGINS ?>/assets/images/icon-arrow-down-light-v2.svg");
        }

        @container iframe-table (max-width: 870px) {
            /* #scrollIframe #homepage .game-rate #game-rate{
                display: flex !important;
                flex-wrap: wrap;
            } */
            /* #game-rate .match .match-content{
                position: relative;
                width: 100%;
                padding-bottom: 56.25%;
                height: 0;
                overflow: hidden;
            }
            #scrollIframe #homepage .game-rate #game-rate .live-frame,
            #scrollIframe #game-rate .match .match-content {
                height: auto;
            } */
            /* #scrollIframe #min .game-rate-ratio{
                background-image: url("
        
        
        
        <?= BONGDAKO_PLUGIN_DIR_URL ?>assets/images/union_mobile.svg");
            } */
        }

        @container iframe-table (max-width: 700px) {
            #scrollIframe #homepage .game-rate #game-rate {
                display: flex !important;
                flex-wrap: wrap;
            }


        }


        <?php if ($saved_bgcolor_rate): ?>
        #scrollIframe.rate_iframe {
            background-color: <?php echo esc_attr($saved_bgcolor_rate); ?> !important;
        }

        #scrollIframe #rate_iframe #min {
            background-color: <?php echo esc_attr($saved_bgcolor_rate); ?> !important;
        }

        #scrollIframe.rate_iframe #appHome {
            background-color: <?php echo esc_attr($saved_bgcolor_rate); ?> !important;
        }

        #scrollIframe #fake_iframeRate {
            background-color: <?php echo esc_attr($saved_bgcolor_rate); ?> !important;
        }

        <?php else: ?>
        #scrollIframe.rate_iframe {
            background-color: #e6e6e6 !important;
        }

        #scrollIframe #rate_iframe #min {
            background-color: #e6e6e6 !important;
        }

        #scrollIframe.rate_iframe #appHome {
            background-color: #e6e6e6 !important;
        }

        #scrollIframe #fake_iframeRate {
            background-color: #e6e6e6 !important;
        }

        <?php endif; ?>

        <?php if ($saved_textcolor1_rate): ?>
        #scrollIframe.rate_iframe .football-team-name {
            color: <?php echo esc_attr($saved_textcolor1_rate); ?> !important;
        }

        <?php else: ?>
        #scrollIframe.rate_iframe .football-team-name {
            color: #070f03 !important;
        }

        <?php endif; ?>

        @media screen and (max-width: 1024px) {
            #scrollIframe #game-rate #tableCore .live-channel .btn-first-live-mobile .btn-live-chanel-icon {
                background-image: url("<?= IMGS3_PLUGINS ?>/assets/images/live-icon-game-rate.svg");
            }
        }

        @media screen and (max-width: 1024px) {
            #scrollIframe #min .game-rate-ratio {
                background-image: url("<?= IMGS3_PLUGINS ?>/assets/football-vn/images/union_mobile.svg");
            }
        }
        @media screen and (max-width: 768px) {
            body #scrollIframe #table_live .action-table-pc {
                display: none !important;
            }
            
        }
    </style>
    <style>
        #scrollIframe.rate_iframe #homepage.mcontent {
            min-width: 1px;
        }

        #scrollIframe.wrap-iframe-rate *, #scrollIframe.wrap-iframe-rate input::placeholder {
            font-family: <?php echo $font['font-family'] ?? ""; ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #min .tools li.filterLi2.xz .dropdown-toggle {
            background: transparent;
        }

        body #scrollIframe.wrap-iframe-rate.wrap-iframe,
        body #scrollIframe.wrap-iframe-rate .match-list-head,
        body #scrollIframe.wrap-iframe-rate.resultIframe #tools,
        body #scrollIframe.wrap-iframe-rate.fixture-iframe #tools,
        body #scrollIframe.wrap-iframe-rate .Leaguestitle,
        body #scrollIframe.wrap-iframe-rate.fixture-iframe #appHome,
        body #scrollIframe.wrap-iframe-rate.rate_iframe #appHome,
        body #scrollIframe.wrap-iframe-rate.resultIframe #mintable,
        body #scrollIframe.wrap-iframe-rate.resultIframe #appHome,
        body #scrollIframe.wrap-iframe-rate.fixture-iframe #mintable {
            background: <?php echo get_option('background_color_rate'); ?> !important;
            background-color: <?php echo get_option('background_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .button-df.active,
        body #scrollIframe.wrap-iframe-rate #app6in1 .custom-select-02.show.button-df {
            border: 1px solid <?php echo get_option('background_main_color_rate'); ?> !important;
            background: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .btn-item-now.active,
        body #scrollIframe.wrap-iframe-rate .tools .switch-view-btn span.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_ShowAll.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterHot.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterLea.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterCdi.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterCdi.active,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_ShowAll:hover,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterHot:hover,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterLea:hover,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li#li_FilterCdi:hover,
        body #scrollIframe.wrap-iframe-rate .filterLi2.xz .dropdown-toggle:hover,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li.on,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li.active,
        body #scrollIframe.wrap-iframe-rate #min .tools ul li:hover {
            background-color: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #showFilterBox .rbl .el-radio > input[type=radio]:checked + .el-radio-style {
            background: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #showoptional2 .bts:nth-of-type(3) span input:checked + label {
            border: 1px solid <?php echo get_option('background_main_color_rate'); ?> !important;
            color: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #table_live tr.tds td .match-state,
        body #scrollIframe.wrap-iframe-rate .time-bx,
        body #scrollIframe.wrap-iframe-rate #main .idx-homepage td .scored-s.no-score {
            /*color: var(--text_sub_rate, #888) !important;*/
        }

        body #scrollIframe.wrap-iframe-rate .cup-match-tags a {
            background-color: <?php echo get_option('background_league_color_rate'); ?> !important;
            color: <?php echo get_option('text_league_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #app6in1 .button-df:hover {
            border: 1px solid <?php echo get_option('background_main_color_rate'); ?> !important;
            background: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .filter-select-rate,
        body #scrollIframe.wrap-iframe-rate .filter-select-company {
            border: 1px solid <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .live-match .odds.normal,
        body #scrollIframe.wrap-iframe-rate .bet-match-item-repeated:nth-child(2n) .bet-match-item .odds.normal,
        body #scrollIframe.wrap-iframe-rate #table_live .odds1,
        body #scrollIframe.wrap-iframe-rate #table_live .odds2,
        body #scrollIframe.wrap-iframe-rate #table_live .odds3,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #game-rate .container-sp .table-core-odds-value .odds-number,
        body #scrollIframe.wrap-iframe-rate .odds-bg.odds-normal > span,
        body #scrollIframe.wrap-iframe-rate #game-rate .odds-number,
        body #scrollIframe.wrap-iframe-rate .odds.normal {
            background: <?php echo get_option('background_odd_color_rate'); ?> !important;
            background-color: <?php echo get_option('background_odd_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .odds:hover {
            background: <?php echo get_option('background_odd_hover_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .odds.down,
        body #scrollIframe.wrap-iframe-rate #table_live .odds1.resultColor,
        body #scrollIframe.wrap-iframe-rate #table_live .odds2.resultColor,
        body #scrollIframe.wrap-iframe-rate .odds2 > span.down,
        body #scrollIframe.wrap-iframe-rate .odds-bg.odds-normal > span.down,
        body #scrollIframe.wrap-iframe-rate #table_live .new-home-tr .odds1.odds-down,
        body #scrollIframe.wrap-iframe-rate #table_live .new_oddsChangePopup .popup-odds-change .odds-down,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #game-rate .container-sp .table-core-odds-value .odds-number.odds-down,
        body #scrollIframe.wrap-iframe-rate #game-rate .odds-number.odds-down {
            background: <?php echo get_option('background_odd_down_rate'); ?> !important;
            background-color: <?php echo get_option('background_odd_down_rate'); ?> !important;
        }

        html body #scrollIframe.wrap-iframe-rate.wrap-iframe .mcontent .table-view .league-item .bet-match-list .bet-match-item-repeated .bet-match-item .bet-match-item-child .odds-title-item .odds.normal.down:hover {
            background: <?php echo get_option('background_odd_down_hover_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .odds.up,
        body #scrollIframe.wrap-iframe-rate #table_live .odds3.resultColor,
        body #scrollIframe.wrap-iframe-rate .odds-bg.odds-normal > span.up,
        body #scrollIframe.wrap-iframe-rate #table_live .new-home-tr .odds1.odds-up,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #game-rate .container-sp .table-core-odds-value .odds-number.odds-up,
        body #scrollIframe.wrap-iframe-rate #table_live .new_oddsChangePopup .popup-odds-change .odds-up,
        body #scrollIframe.wrap-iframe-rate .odds2 > span.up,
        body #scrollIframe.wrap-iframe-rate #game-rate .odds-number.odds-up {
            background: <?php echo get_option('background_odd_up_rate'); ?> !important;
            background-color: <?php echo get_option('background_odd_up_rate'); ?> !important;
        }

        html body #scrollIframe.wrap-iframe-rate.wrap-iframe .mcontent .table-view .league-item .bet-match-list .bet-match-item-repeated .bet-match-item .bet-match-item-child .odds-title-item .odds.normal.up:hover {
            background: <?php echo get_option('background_odd_up_hover_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .live-status {
            color: <?php echo get_option('text_live_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .score-lst .score,
        body #scrollIframe.wrap-iframe-rate #min .ratio-value,
        body #scrollIframe.wrap-iframe-rate .handpoint.score-color b.match-finished,
        body #scrollIframe.wrap-iframe-rate #main .idx-homepage td.score-color b,
        body #scrollIframe.wrap-iframe-rate #main .idx-homepage .handpoint.score-color b.match-not-finished {
            color: <?php echo get_option('text_score_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .match-during-time.running {
            color: <?php echo get_option('text_time_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .toggle-bet {
            background: <?php echo get_option('background_button_more_bet_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .toggle-bet > div,
        body #scrollIframe.wrap-iframe-rate .toggle-bet span {
            color: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        #scrollIframe.wrap-iframe-rate .toggle-bet.active > div, #scrollIframe.wrap-iframe-rate .toggle-bet.active span {
            color: #fff !important;
        }

        #scrollIframe.wrap-iframe-rate #game-rate .core-custom-select .custom-select,
        body #scrollIframe.wrap-iframe-rate.wrap-iframe,
        #scrollIframe.wrap-iframe-rate .custom-select-02 .custom-options div,
        body #scrollIframe.wrap-iframe-rate .odds-title-item,
        body #scrollIframe.wrap-iframe-rate .team-box > a,
        body #scrollIframe.wrap-iframe-rate #table_live .upper-live-titlez td,
        body #scrollIframe.wrap-iframe-rate #table_live tr.upper-live-title td,
        body #scrollIframe.wrap-iframe-rate #table_live #CompanySel #dropSelect,
        body #scrollIframe.wrap-iframe-rate #table_live tr td,
        body #scrollIframe.wrap-iframe-rate #table_live tr:not(.Leaguestitle):not(.scoretitle) td[name="timeData"],
        body #scrollIframe.wrap-iframe-rate .filterLi2.xz .dropdown-toggle,
        body #scrollIframe.wrap-iframe-rate #table_live tr.scoretitle td,
        body #scrollIframe.wrap-iframe-rate #min .tools li,
        body #scrollIframe.wrap-iframe-rate #game-rate .table-score-container .odds-name,
        body #scrollIframe.wrap-iframe-rate #game-rate span.text-uppercase,
        body #scrollIframe.wrap-iframe-rate #main #table_live tr[id^=tr1_] td.toolimg span,
        body #scrollIframe.wrap-iframe-rate #table_live .status-time-match span,
        body #scrollIframe.wrap-iframe-rate #main #table_live tr[id^=tr1_].tds td[id^=ht_] a,
        body #scrollIframe.wrap-iframe-rate #main #table_live tr[id^=tr1_].tds td[id^=gt_] a,
        body #scrollIframe.wrap-iframe-rate.fixture-iframe #table_live tr.tds td,
        body #scrollIframe.wrap-iframe-rate #fixture_iframe .team-name,
        body #scrollIframe.wrap-iframe-rate #main #tableCoreSP .status-time-match {
            color: <?php echo get_option('text_main_color_rate'); ?> !important;
        }

        #scrollIframe #min .team-left {
            background: <?php echo get_option('background_home_team_rate'); ?> !important;
        }

        #scrollIframe #min .team-right {
            background: <?php echo get_option('background_gus_team_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .odds,
        body #scrollIframe.wrap-iframe-rate #table_live .odds1,
        body #scrollIframe.wrap-iframe-rate #table_live .odds2,
        body #scrollIframe.wrap-iframe-rate #table_live .odds3,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #game-rate .container-sp .table-core-odds-value .odds-number,
        body #scrollIframe.wrap-iframe-rate .odds-bg.odds-normal > span,
        body #scrollIframe.wrap-iframe-rate #table_live .new-home-tr .odds1.odds-down,
        body #scrollIframe.wrap-iframe-rate #table_live .new-home-tr .odds1.odds-up,
        body #scrollIframe.wrap-iframe-rate #table_live .new_oddsChangePopup .popup-odds-change .odds-up,
        body #scrollIframe.wrap-iframe-rate #table_live .new_oddsChangePopup .popup-odds-change .odds-down,
        body #scrollIframe.wrap-iframe-rate #game-rate .odds-number {
            color: <?php echo get_option('text_odd_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .league-name,
        body #scrollIframe.wrap-iframe-rate.resultIframe .football-team-name,
        body #scrollIframe.wrap-iframe-rate.fixture-iframe .football-team-name,
        body #scrollIframe.wrap-iframe-rate .football-team-name,
        body #scrollIframe.wrap-iframe-rate .LGname,
        body #scrollIframe.wrap-iframe-rate.rate_iframe .football-team-name {
            color: <?php echo get_option('text_title_league_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #live #tr_upper-live-title td {
            background: <?php echo get_option('background_item_2_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .wrap-loadmore .load-more-btn {
            background-color: <?php echo get_option('background_main_color_rate'); ?> !important;
            background-image: url(/wp-content/plugins/sport-plugin/assets/images/double-alt-arrow-down.svg);
            background-repeat: no-repeat;
            background-position: right 20px top 6px;
        }

        body #scrollIframe.wrap-iframe-rate .ods-detail-item {
            background: <?php echo get_option('background_more_bet_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .toggle-bet.active,
        body #scrollIframe.wrap-iframe-rate #game-rate .btn-live-chanel,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #live .btn-live {
            background: <?php echo get_option('background_main_color_rate'); ?> !important;
        }

        body .score-detail .secont-half,
        body #scrollIframe.wrap-iframe-rate #table_live .corner-text {
            color: <?php echo get_option('text_score_corner_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate #table_live tr.tds td,
        body #scrollIframe.wrap-iframe-rate #table_live tr:not(.Leaguestitle):not(.scoretitle),
        body #scrollIframe.wrap-iframe-rate .league-item-head,
        body #scrollIframe.wrap-iframe-rate .bet-match-item-repeated .bet-match-item,
        body #scrollIframe.wrap-iframe-rate #table_live .upper-live-titlez,
        body #scrollIframe.wrap-iframe-rate #table_live tr.scoretitle td,
        body #scrollIframe.wrap-iframe-rate #game-rate .core-container,
        body #scrollIframe.wrap-iframe-rate #game-rate #tableCore,
        body #scrollIframe.wrap-iframe-rate #main #table_live tr[id^=tr1_],
        body #scrollIframe.wrap-iframe-rate .match-box {
            background-color: <?php echo get_option('background_item_color_rate'); ?> !important;
            background: <?php echo get_option('background_item_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .bet-match-item-repeated:nth-child(2n) .bet-match-item,
        body #scrollIframe.wrap-iframe-rate #main .idx-homepage #table_live tr[id^=tr1_] .league-detail-mobile,
        body #scrollIframe.wrap-iframe-rate #main .idx-favorite #table_live tr[id^=tr1_] .league-detail-mobile {
            background: <?php echo get_option('background_item_2_color_rate'); ?> !important;
            background-color: <?php echo get_option('background_item_2_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .grey,
        body #scrollIframe.wrap-iframe-rate .odds.no-bg,
        body #scrollIframe.wrap-iframe-rate .odds.no-bg.down {
            color: <?php echo get_option('text_odd_option_color_rate'); ?> !important;
        }

        body #scrollIframe.wrap-iframe-rate .team-hg, #scrollIframe .bftab .rank,
        body #scrollIframe.wrap-iframe-rate #main #table_live .new-home-tr .odds1::before,
        body #scrollIframe.wrap-iframe-rate #homepage .game-rate #game-rate .container-sp .table-core-odds-value .odds-number::before,
        body #scrollIframe.wrap-iframe-rate #main #table_live tr[id^=tr1_].tds .status-time-sched {
            color: <?php echo get_option('text_sub_color_rate'); ?> !important;
        }

        @media (min-width: 1001px) {
        <?php if (get_option('tags_cup_rate') === "medium"){?>
            #scrollIframe .cup-match-tags a {
                font-size: 13px;
                line-height: 16px;
                padding: 6px 9px;
            }

        <?php }?>
        <?php if (get_option('tags_cup_rate') === "small"){?>
            #scrollIframe .cup-match-tags a {
                font-size: 12px;
                line-height: 14px;
                padding: 5px 7px;
            }

        <?php }?>

        <?php if (get_option('search_team_rate') === "medium"){?>
            #scrollIframe #iframe_6in1 .filter-box .filter-search-row .filter-search-name input {
                padding: 6px 12px 5px;
            }

            #scrollIframe .filter-search-name input {
                padding: 12px;
                line-height: 16px;
                font-size: 12px;
            }

        <?php }?>
        <?php if (get_option('search_team_rate') === "small"){?>

            #scrollIframe #iframe_6in1 .filter-box .filter-search-row .filter-search-name input {
                padding: 5px 10px;
            }

            #scrollIframe .filter-search-name input {
                padding: 10px;
                line-height: 14px;
                font-size: 10px;
            }

        <?php }?>

        <?php if (get_option('search_league_rate') === "medium"){?>
            #scrollIframe #iframe_6in1 .filter-box .filter-search-row .filter-cup-match .filter-cup-match-box {
                height: 28px;
                padding: 5px 10px;
            }

            #scrollIframe .filter-cup-match .custom-select-02 .custom-select {
                font-size: 12px;
            }

            #scrollIframe .sixmix-container .filter-box #sixinoneFilterLeague {
                top: 32px;

            }

        <?php }?>
        <?php if (get_option('search_league_rate') === "small"){?>

            #scrollIframe #iframe_6in1 .filter-box .filter-search-row .filter-cup-match .filter-cup-match-box {
                height: 26px;
                padding: 5px 10px;
            }

            #scrollIframe .filter-cup-match .custom-select-02 .custom-select {
                font-size: 10px;
            }

            #scrollIframe .sixmix-container .filter-box #sixinoneFilterLeague {
                top: 30px;

            }

        <?php }?>

            #scrollIframe .odds-title-item.two-line-start {
                flex: 1 1 <?php echo get_option('odd_1_1_rate') ?>px;
                width: <?php echo get_option('odd_1_1_rate') ?>px;
            }

            #scrollIframe .odds-title-item.two-line-end {
                flex: 1 1 <?php echo get_option('odd_1_2_rate') ?>px;
                width: <?php echo get_option('odd_1_2_rate') ?>px;
            }

        <?php if (get_option('filter_date_rate') === "medium"){?>
            #scrollIframe .btn-item-now, #scrollIframe .btn-item-now.ttnow {
                padding: 6px;
            }

            #scrollIframe .filter-select-rate, #scrollIframe .filter-select-company {

                font-size: 12px;

                line-height: 22px;
                padding: 6px 10px;

            }

        <?php }?>
        <?php if (get_option('filter_date_rate') === "small"){?>

            #scrollIframe .btn-item-now, #scrollIframe .btn-item-now.ttnow {
                padding: 4px;
                min-height: 20px;
            }

            #scrollIframe .filter-select-rate, #scrollIframe .filter-select-company {
                font-size: 10px;
                line-height: 18px;
                padding: 5px 8px;

            }

        <?php }?>
            #scrollIframe .table-time .td-bdr.w-120 {
                min-width: <?php echo get_option('team_w_rate')?>px;
                width: <?php echo get_option('team_w_rate')?>px;
            }

            #scrollIframe.wrap-iframe [id^="ht_"], #scrollIframe.wrap-iframe [id^="gt_"] {
                min-width: <?php echo get_option('team_w_rate')?>px;
            }

        <?php if (get_option('odd_1_1_rate') > 0){?>
            #scrollIframe #rate_iframe #table_live tr.tds > td {
                min-width: <?php echo get_option('odd_1_1_rate') ?>px;
            }

        <?php }?>
            #scrollIframe #table_live tr {
                height: <?php echo get_option('league-item-head_rate');?>
            }

        <?php if (get_option('action_size_sixinone') === "lager"){?>
            #scrollIframe .icon-14 {
                width: 18px;
                height: 18px;
            }

            #scrollIframe .icon-16 {
                width: 20px;
                height: 20px;
            }

        <?php }?>
        <?php if (get_option('action_size_sixinone') === "small"){?>

            #scrollIframe .icon-14 {
                width: 12px;
                height: 12px;
            }

            #scrollIframe .icon-16 {
                width: 14px;
                height: 14px;
            }

        <?php }?>


            #scrollIframe.wrap-iframe [id^="ht_"], #scrollIframe.wrap-iframe [id^="ht_"] .team-box {
                max-width: <?php echo get_option('team_home_rate')?>px !important;
                min-width: <?php echo get_option('team_home_rate')?>px !important;
                width: <?php echo get_option('team_home_rate')?>px !important;
            }

            #scrollIframe.wrap-iframe [id^="gt_"], #scrollIframe.wrap-iframe [id^="gt_"] .team-box {
                max-width: <?php echo get_option('team_guest_rate')?>px !important;
                min-width: <?php echo get_option('team_guest_rate')?>px !important;
                width: <?php echo get_option('team_guest_rate')?>px !important;
            }

            #scrollIframe .status.handpoint.status-time-match span {
                font-size: <?php echo get_option('tg_rate')?> !important;
            }

            #scrollIframe td.score-color b {
                font-size: <?php echo get_option('ti_so_rate')?> !important;
            }

            #scrollIframe .secont-half.text-center.w-100-i {
                font-size: <?php echo get_option('goc_rate')?> !important;
            }

            #scrollIframe .football-team-name {
                font-size: <?php echo get_option('gd_rate')?> !important;
            }


        <?php if ( true == get_option( 'hide_star_rate', false ) ) : ?>
            #scrollIframe #rate_iframe #table_live tr:not(.upper-live-title):not(.tr-banner) > td:first-child {
                display: none !important;
            }

        <?php else : ?>


        <?php endif; ?>

        <?php if ( true == get_option( 'hide_goc_rate', false ) ) : ?>
            #scrollIframe #rate_iframe #table_live tr[id^="tr1_"] > td:nth-child(7),
            #scrollIframe #rate_iframe #table_live tr[id^="tr1_"] > td:nth-child(7),
            #scrollIframe #table_live #tr_upper-live-titlez > td:nth-child(5) {
                display: none !important;
            }

        <?php endif; ?>

        }

        #scrollIframe .hidden-info-match:hover:after {
            content: "<?php esc_html_e('Ẩn lại giải đấu này', 'sport') ?>";
        }

        #scrollIframe .show-info-match:hover:after {
            content: "<?php esc_html_e('Hiển thị giải đấu này', 'sport') ?>";
        }

        #scrollIframe .add-info:hover:after, #scrollIframe .add-info2:hover:after, #scrollIframe .add-info-l:hover:after, #scrollIframe .remove-league-icon:hover:after {
            /* display: none !important; */
        }

        div#game-rate {
            max-width: 100%;
        }

        .more {
            pointer-events: none;
            cursor: no-drop;
        }
    </style>

    <?php
    $matches = bongdako_fetch_and_merge_data(DB_DOMAIN . '/gf/data/bf_vn_nt_live.js');
    array_shift($matches);
    $url_api_rate = DB_DOMAIN . '/gf/data/bf_vn_nt_live.js';
    $leagues_rate = bongdako_fetch_and_merge_data_faked($url_api_rate);
    $maxOption = get_option('max_leagues_rate');
    $number_match = !empty($maxOption) ? $maxOption : 10;

    $urlCountry = DB_DOMAIN . '/ajax/league-ajax';
    $responseCountry = wp_remote_get($urlCountry, [
        'headers' => [
            'Referer' => home_url(),
        ],
        'timeout' => 60,
        'sslverify' => false,
        'curl' => [
            CURLOPT_SSL_VERIFYPEER => 0,
        ],
    ]);
    $bodyCountry = wp_remote_retrieve_body($responseCountry);
    $dataCountry = json_decode($bodyCountry, true);
    $resLeagues = $dataCountry['league'] ?? [];

    $leaguesL = array_filter(explode(',', $leagues ?? $_GET['leagues'] ?? ""));
    $nationsL = array_filter(explode(',', $nations ?? $_GET['nations'] ?? ""));
    $filterL = [];
    if (count($leaguesL) > 0) {
        $filterL = $leaguesL;
    }
    if (count($nationsL) > 0) {
        foreach ($resLeagues as $l) {
            if (in_array($l['idCountry'], $nationsL)) {
                $filterL[] = $l['sclassID'];
            }
        }
    }

    $filterL = array_map('absint', $filterL);

    if ($filterL) {
        $filtered = array_values(array_filter($leagues_rate, function ($item) use ($filterL) {
            return in_array($item['league_id'], $filterL);
        }));
        $filtered2 = array_values(array_filter($matches, function ($item) use ($filterL) {
            return in_array($item['league_id'] ?? "", $filterL);
        }));

        $leagues_rate = $filtered;
        $matches = $filtered2;
    }
    ?>
    <?php $item = array_values($leagues_rate)[0]['matches'][0] ?? null;  ?>
    <div id="scrollIframe" class="wrap-iframe rate_iframe wrap-iframe-rate tm_12-scroll <?php if (!$item || is_null($item)):?> no-bg <?php endif; ?>">
        <div id="soccer" class="tm_12-soccer">
            <div id="homepage" class="mcontent tm_12-homepage">
                <div id="main" class="main-home-page-mobile tm_12-main">
                    <div id="appHome" class="w-100 mx-auto tm_12-appHome">
                        <!--Render PHP-->
                        <div id="fake_iframeRate" class="game-rate index idx-homepage css-home-page home-page-mobile fake_iframe tm_12-fakeIframe">
                            <?php if ($item && !is_null($item)):?>
                                <div id="min">
                                    <div class="d-none d-lg-block w-100">
                                        <div class="game-rate-core-container">
                                            <div class="team-left">
                                                <div class="name-team-left">
                                                    <p class="team-home-name"><?php echo unicode_to_utf8($item['teams']['home']); ?></p>
                                                </div>
                                            </div>
                                            <div class="game-rate-ratio">
                                                <span class="home-score ratio-value"><?php echo $item['score']['home']; ?></span>
                                                <span>:</span>
                                                <span class="away-score ratio-value"><?php echo $item['score']['away']; ?></span>
                                            </div>
                                            <div class="team-right">
                                                <div class="name-team-right">
                                                    <p class="team-away-name"><?php echo unicode_to_utf8($item['teams']['away']); ?></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php if ($item): ?>
                                        <div id="game-rate" class="row d-flex j-sb al-fs video-content">
                                            <div class="live-frame">
                                                <div class="match bh-299d5">
                                                    <div class="match-content">
                                                        <iframe id="live-frame"
                                                                src="<?= DB_DOMAIN ?>/soccer/flashlive?id=<?php echo $item['matchId']; ?>&amp;hidetitle=true"
                                                                class="match-content-iframe" frameborder="0"></iframe>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="d-block d-lg-none w-100">
                                                <div class="game-rate-core-container">
                                                    <div class="team-left">
                                                        <div class="name-team-left">
                                                            <p class="team-home-name"><?php echo $item['teams']['home']; ?></p>
                                                            <img src="<?= IMGS3_PLUGINS ?>/assets/images/home_1.svg"
                                                                 alt="<?php echo $item['teams']['home']; ?>"
                                                                 data-pin-no-hover="true"
                                                                 style="width: 20px; height: 20px; object-fit: cover;">
                                                        </div>
                                                    </div>
                                                    <div class="game-rate-ratio">
                                                        <span class="home-score ratio-value"><?php echo $item['score']['home']; ?></span>
                                                        <span>:</span>
                                                        <span class="away-score ratio-value"><?php echo $item['score']['away']; ?></span>
                                                    </div>
                                                    <div class="team-right">
                                                        <div class="name-team-right">
                                                            <img src="<?= IMGS3_PLUGINS ?>/assets/images/away_1.svg"
                                                                 alt="<?php echo $item['teams']['away']; ?>"
                                                                 data-pin-no-hover="true"
                                                                 style="width: 20px; height: 20px; object-fit: cover;">
                                                            <p class="team-away-name"><?php echo $item['teams']['away']; ?></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="tableCore">
                                                <div class="core-container">
                                                    <div class="d-flex ai-c j-sb">
                                                        <div class="odds-title d-flex gap-2 align-items-center">
                                                            <span class="text-uppercase"><?php esc_html_e('tài xỉu', 'sport') ?></span>
                                                            <a href="javascript:;" data-bs-toggle="tooltip"
                                                               data-bs-placement="top"
                                                               data-bs-title="ข้อมูลจะได้อัพเดทในเวอร์ชั่นถัดไป ของคุณครับ">
                                                                <img src="<?= IMGS3 ?>/assets/football-vn/images/game-rate/info.svg?v=1727680733"
                                                                     alt="info-svg" data-pin-no-hover="true">
                                                            </a>
                                                        </div>
                                                        <div class="custom-select-02 core-custom-select">
                                                            <div class="custom-select">Sbobet</div>
                                                            <div class="custom-options">
                                                                <div class="custom-option">K - Sport</div>
                                                                <div class="custom-option">Sbobet</div>
                                                                <div class="custom-option">Bet365</div>
                                                                <div class="custom-option">188bet</div>
                                                                <div class="custom-option">12bet</div>
                                                                <div class="custom-option">Crown</div>
                                                                <div class="custom-option">18Bet</div>
                                                                <div class="custom-option">Macauslot</div>
                                                                <div class="custom-option">Ladbrokes</div>
                                                                <div class="custom-option">Easybet</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <table class="table-score-container">
                                                        <tbody>
                                                        <tr>
                                                            <td width="100%" class="text-left">
                                                                <span class="odds-name"><?php esc_html_e('Sớm', 'sport') ?></span>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_home; ?>"><?php echo $odd_home; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_draw; ?>"><?php echo $odd_draw; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_away; ?>"><?php echo $odd_away; ?></div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td width="100%" class="text-left">
                                                                <span class="odds-name"><?php esc_html_e('Live', 'sport') ?></span>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_over; ?>"><?php echo $odd_over; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_equal; ?>"><?php echo $odd_equal; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_under; ?>"><?php echo $odd_under; ?></div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="core-container">
                                                    <div class="d-flex ai-c j-sb">
                                                        <div class="odds-title d-flex gap-2 align-items-center">
                                                            <span class="text-uppercase">HDP</span>
                                                            <a href="javascript:;" data-bs-toggle="tooltip"
                                                               data-bs-placement="top"
                                                               data-bs-title="ข้อมูลจะได้อัพเดทในเวอร์ชั่นถัดไป ของคุณครับ">
                                                                <img src="<?= IMGS3 ?>/assets/football-vn/images/game-rate/info.svg?v=1727680733"
                                                                     alt="info-svg" data-pin-no-hover="true">
                                                            </a>
                                                        </div>
                                                        <div class="custom-select-02 core-custom-select">
                                                            <div class="custom-select">Sbobet</div>
                                                            <div class="custom-options">
                                                                <div class="custom-option">K - Sport</div>
                                                                <div class="custom-option">Sbobet</div>
                                                                <div class="custom-option">Bet365</div>
                                                                <div class="custom-option">188bet</div>
                                                                <div class="custom-option">12bet</div>
                                                                <div class="custom-option">Crown</div>
                                                                <div class="custom-option">18Bet</div>
                                                                <div class="custom-option">Macauslot</div>
                                                                <div class="custom-option">Ladbrokes</div>
                                                                <div class="custom-option">Easybet</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <table class="table-score-container">
                                                        <tbody>
                                                        <tr>
                                                            <td width="100%" class="text-left">
                                                                <span class="odds-name"><?php esc_html_e('Sớm', 'sport') ?></span>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_home; ?>"><?php echo $odd_home; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_draw; ?>"><?php echo $odd_draw; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_away; ?>"><?php echo $odd_away; ?></div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td width="100%" class="text-left">
                                                                <span class="odds-name">Live</span>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_over; ?>"><?php echo $odd_over; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_equal; ?>"><?php echo $odd_equal; ?></div>
                                                            </td>
                                                            <td>
                                                                <div class="odds-number <?php echo $class_under; ?>"><?php echo $odd_under; ?></div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div id="tableCoreSP"
                                                     class="core-container container-sp core-container-mobile live-table-w">
                                                    <div class="d-flex ai-c j-sb">
                                                        <div class="odds-title d-flex gap-2 align-items-center">
                                                            <img src="<?php echo IMGS3 . $item['flag']; ?>"
                                                                 alt="<?php echo $item['teams']['home']; ?>"
                                                                 class="cImg lazy flag-img" id="leagueFlagSp"
                                                                 style="width: 15px; height: 15px; object-fit: cover; border-radius: 50%;">
                                                            <span><?php echo $item['league']; ?></span>
                                                        </div>
                                                        <select class="over-select form-select ws-select ws-select-underlin d-none">
                                                            - </select>
                                                        <div class="custom-select-02 core-custom-select">
                                                            <div class="custom-select">Sbobet</div>
                                                            <div class="custom-options">
                                                                <div class="custom-option">K - Sport</div>
                                                                <div class="custom-option">Sbobet</div>
                                                                <div class="custom-option">Bet365</div>
                                                                <div class="custom-option">188bet</div>
                                                                <div class="custom-option">12bet</div>
                                                                <div class="custom-option">Crown</div>
                                                                <div class="custom-option">18Bet</div>
                                                                <div class="custom-option">Macauslot</div>
                                                                <div class="custom-option">Ladbrokes</div>
                                                                <div class="custom-option">Easybet</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <table class="table-score-container">
                                                        <tbody>
                                                        <tr class="tm-detail-rp">
                                                            <td class="status handpoint status-time-match td_status"
                                                                id="time_<?php echo $item['matchId']; ?>" width="50">
                                                                <span id="got_<?php echo $item['matchId']; ?>"> 73</span>
                                                            </td>
                                                            <td class="tm-detail-rp-left"
                                                                id="ht_<?php echo $item['matchId']; ?>">
                                                                <span class="hdpstar" style="display: inline;"></span>
                                                                <div class="team-box tleft">
                                                                    <a href=""><?php echo $item['teams']['home']; ?></a>
                                                                    <img src="<?= IMGS3_PLUGINS ?>/assets/images/home_1.svg"
                                                                         alt="<?php echo $item['teams']['home']; ?>">
                                                                    <p class="team-more-info">
                                                                <span id="horder_34302"
                                                                      class="hidden-element team-hg"></span>
                                                                        <span id="yellow1_34302">
                                                                    <span class="yellowcard"
                                                                          style="display: none;"><?php echo $item['yellow_card']['home']; ?></span>
                                                                </span>
                                                                    </p>
                                                                </div>
                                                            </td>
                                                            <td class="tm-detail-rp-center blue handpoint score-color">
                                                                <b class="scored-s match-not-finished"><?php echo $item['score']['home']; ?>
                                                                    -<?php echo $item['score']['away']; ?></b>
                                                            </td>
                                                            <td class="tm-detail-rp-right"
                                                                id="gt_<?php echo $item['matchId']; ?>">
                                                                <div class="team-box">
                                                                    <img src="<?= IMGS3_PLUGINS ?>/assets/images/away_1.svg"
                                                                         alt="<?php echo $item['teams']['away']; ?>">
                                                                    <a href=""><?php echo $item['teams']['away']; ?></a>
                                                                    <p class="team-more-info">
                                                                <span id="yellow2_61853">
                                                                    <span class="yellowcard"
                                                                          style="display: none;"><?php echo $item['yellow_card']['away']; ?></span>
                                                                </span>
                                                                        <span id="horder_61853"
                                                                              class="hidden-element team-hg"></span>
                                                                    </p>
                                                                </div>
                                                            </td>
                                                            <td class="table-core-odds-value table-core-odds-value-6">
                                                                <p data-before-content="<?php esc_html_e('Chủ', 'sport') ?>"
                                                                   class="<?php echo $class_home; ?> odds-animated odds-number"><?php echo $odd_home; ?></p>
                                                            </td>
                                                            <td class="table-core-odds-value table-core-odds-value-7">
                                                                <p data-before-content="<?php esc_html_e('Hòa', 'sport') ?>"
                                                                   class="<?php echo $class_draw; ?> odds-animated odds-number"><?php echo $odd_draw; ?></p>
                                                            </td>
                                                            <td class="table-core-odds-value table-core-odds-value-8">
                                                                <p data-before-content="<?php esc_html_e('Khách', 'sport') ?>"
                                                                   class="<?php echo $class_away; ?> odds-animated odds-number"><?php echo $odd_away; ?></p>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                    <div class="live-mobile-title">
                                        <span class="upper-live-icon-football"></span>
                                        <span><?php esc_html_e('Tất cả trận đang live', 'sport') ?></span>
                                    </div>
                                    <div id="mintable">
                                        <div id="live">
                                            <table id="table_live" class="table-time table-game-rate" width="100%"
                                                   align="center" cellspacing="0" border="0" cellpadding="0">
                                                <tbody>
                                                <?php echo renderLiveTableHeaderLiveRate(); ?>
                                                <?php echo renderHeaderLiveTableTitleRate(); ?>
                                                <?php if (isMobile()): ?>
                                                    <?php foreach ($matches as $item): ; ?>
                                                        <?php echo renderMatchItemRate($item); ?>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <?php fetchdataRate($number_match, $filterL); ?>
                                                <?php endif; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                        <!--Render PHP-->
                        <div id="rate_iframe" class="game-rate index idx-homepage css-home-page home-page-mobile tm_12-rateIframe"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}

add_shortcode('bongdako_rate', 'bongdako_shortcode_tylekeo');

require_once plugin_dir_path(__FILE__) . 'includes/functions.php';