.sc-wrap {
    padding: 0px 0;
}

.sc-title {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.sc-slider {
    display: block;
    position: relative;
    margin-bottom: 10px;
    padding: 12px;
    background: none;
}

.sc-slidercon {
    width: 100%;
    padding: 0 25px;
}
.sc-stadium {
    flex-direction: column;
}
.sc-stadium > p:first-child {
    font-size: 16px !important;
    margin-bottom: 0;
    color: yellow;
}

.sc-slider .swiper-slide {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 8px;
    cursor: pointer;
    border-radius: 6px;
    background: linear-gradient(180deg, #00369a 0%, #00318c 45%, #011c59 100%);
}

.sc-slider .swiper-slide.match-active {
    background: #0096ff;
    background: linear-gradient(to bottom, #69da67 0%, #014d1a 100%);
}

.sc-slider .swiper-button-prev,
.sc-slider .swiper-button-next {
    background: #0096ff;
    height: 30px;
    width: 30px;
    margin: auto 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid #004ea0;
}

.sc-slider .swiper-button-prev {
    left: 0;
}

.sc-slider .swiper-button-next {
    right: 0;
}

.sc-slider .swiper-button-prev:after,
.sc-slider .swiper-container-rtl .swiper-button-next:after,
.sc-slider .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    content: "";
    position: absolute;
    display: inline-block;
    border: solid #004ea0;
    border-width: 0 3px 3px 0;
    padding: 5px;
}

.sc-slider .swiper-button-prev:after,
.sc-slider .swiper-container-rtl .swiper-button-next:after {
    left: 9px;
    -webkit-transform: rotate(137deg);
    -moz-transform: rotate(137deg);
    transform: rotate(137deg);
}

.sc-slider .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    right: 9px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    transform: rotate(-47deg);
}

.sc-date {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #04ff43;
}

.sc-type {
    font-size: 12px;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    color: #b0fff5;
}

.sc-listcon {
    display: block;
    position: relative;
}

.sc-listcon .sc-pergroup {
    position: relative;
    margin-bottom: 15px;
}

.sc-bigdate {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    color: #fff27d;
    text-transform: capitalize;
}

.sc-list {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #fff;
    list-style: none;
}

.sc-list li {
    border-top: 1px solid #fff;
    padding: 12px 0;
}

.sc-list li .row {
    margin: 0;
}

.sc-group {
    display: inline-block;
    width: 66px;
    height: 77px;
    background: url(https://cdn.hanwei1234.com/Content/Euro2024/images/grp-icon.png) no-repeat center;
    text-align: center;
    padding: 12px 0;
}

.sc-group p:first-child {
    font-size: 11px;
    color: #fff;
    margin: 5px 0 0;
    text-transform: uppercase;
}

.sc-group.forcn p:first-child {
    font-size: 20px;
    font-weight: 600;
    color: #127e78;
    margin-top: 20px;
}

.sc-group p:last-child {
    font-size: 22px;
    font-weight: 600;
    color: #127e78;
    text-transform: uppercase;
}

.sc-group.forth p:last-child {
    font-size: 16px;
}

.sc-group2 {
    display: inline-block;
    width: 66px;
    height: 77px;
    background: url(https://cdn.hanwei1234.com/Content/Euro2024/images/grp-icon2.png) no-repeat center;
    text-align: center;
    padding: 12px 0;
}

.sc-group2 p {
    font-size: 12px;
    line-height: 16px;
    margin: 12px 0 0;
    font-weight: 600;
    color: #127e78;
    text-transform: uppercase;
}

.sc-group2 p.final {
    font-size: 14px;
    line-height: normal;
    margin-top: 14px;
    margin: 18px 0 0;
}

[data-trans="th"] .sc-group2 p.final,
[data-trans="vn"] .sc-group2 p.final {
    margin: 12px 0 0;
}

.sc-place {
    text-align: center;
    padding: 15px 0;
    text-transform: capitalize;
}

.sc-place p {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    font-weight: normal;
    margin: 0;
}

.sc-when {
    display: block;
    padding: 12px 0;
    text-align: center;
}

.sc-when .sc-time {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    color: #fff27d;
    margin: 0;
    text-transform: uppercase;
}

.sc-when .sc-zone {
    font-size: 12px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.sc-when .sc-score {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

[class^="sc-team-"] span {
    font-family: "Roboto", sans-serif;
    display: inline-block;
    font-size: 21px;
    font-weight: normal;
    text-transform: capitalize;
    margin-top: 15px;
}

[class^="sc-team-"] img {
    border: 1px solid #fff;
    width: 60px;
    margin: 10px;
}

.sc-team-1 span {
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: normal;
    text-transform: capitalize;
}

.sc-team-1 img {
    float: right;
}

.sc-team-2 img {
    float: left;
}

.euro_sched_scores {
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: normal;
    text-transform: capitalize;
    color: #fff;
    line-height: 58px;
}
.sched_score1 {
    float: right;
    margin-left: 5px;
}
.sched_score2 {
    float: left;
    margin-right: 5px;
}

.slider-flag {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

/*MATCH BRACKET SECTION*/

.sc-wrap #bracket {
    background: #012267 url(https://cdn.hanwei1234.com/Content/Euro2024/images/spotlight-match.webp) repeat-y top center;
    padding-top: 20px;
    font-size: 12px;
    padding: 40px 0 0 0;
}

html:lang(th-TH) .sc-wrap #bracket {
    font-size: 14px;
}

html:lang(en-US) .sc-wrap #bracket {
    font-size: 16px;
}

#bracket .container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.sc-wrap #group-stage .team.team-match span {
    margin-top: 5px;
    font-size: 11px;
}
.sc-wrap #group-stage .team.team-match > div {
    color: white;
}
.team-match .loseT {
    opacity: 0.5;
    filter: grayscale(0.5);
}
.lative {
    position: relative;
}
.lative span {
    white-space: nowrap;
    font-size: 8px;
}
/*.lative::after {
        content: attr(data-team);
        position: absolute;
        left: 0;
        bottom: 10px;
        color: red;
    }*/
.bracket-flag {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-bottom: 2px;
}

.split {
    display: flex;
    width: 32%;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}

.champion {
    display: block;
    width: 36%;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-self: center;
    align-self: center;
    text-align: center;
    padding: 230px 0\9;
    color: #2c7399;
    font-weight: 600;
    text-transform: uppercase;
    min-height: 490px;
}

.round {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 95%;
    width: 30.8333%\9;
}

.split-one,
.split-two {
    min-height: 490px;
}

.split-one .round {
    margin: 0 2.5% 0 0;
}

.split-two .round {
    margin: 0 0 0 2.5%;
}

.matchup {
    margin: 0;
    width: 100%;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.matchup > span {
    display: block;
    color: #60aee5;
    font-size: 8px;
}

html:lang(th-TH) .matchup > span,
html:lang(en-US) .matchup > span {
    font-size: 12px;
}

.score {
    font-size: 11px;
    text-transform: uppercase;
    float: right;
    color: #2c7399;
    font-weight: bold;
    position: absolute;
    right: 5px;
}

.team {
    padding: 0 5px;
    margin: 5px;
    white-space: nowrap;
    position: relative;
    display: flex;
    justify-content: center;
    color: #1a5274;
    font-size: 11px;
}
#bracket .team.team-match {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#bracket .team.team-match:nth-child(3) {
    margin-top: 50px;
}
#bracket .team > div:first-child {
    padding: 2px;
    font-size: 12px;
    margin-bottom: 3px;
}
#bracket .team > div:first-child > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#bracket .team div.lative {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 46px;
    justify-content: flex-start;
    flex: 1;
    text-align: center;
}
#bracket .team > div:nth-child(2) {
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
    min-width: 50px;
    width: 100%;
}
#bracket .team > div:nth-child(2) sub {
    font-size: 11px;
}
#bracket .round-16-left .match {
    position: relative;
}
#bracket .yscore {
    width: 60px;
    padding-top: 10px;
    text-align: center;
    letter-spacing: -1px;
}

#group-stage .team > div:first-child {
    display: grid;
    grid-template-columns: 40% 20% 40%;
    padding: 2px;
    text-align: center;
    align-items: start;
}

#group-stage .team > div:first-child > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
#group-stage .team > div:first-child > div:nth-child(2) {
    margin-top: 5px;
    color: yellow;
}
#group-stage .team > div:nth-child(2) {
    justify-content: center;
    display: flex;
    align-items: center;
    min-width: 50px;
}
#group-stage .team.team-match {
    position: relative;
}
#group-stage .team.team-match span.qualified-team {
    position: absolute;
    left: 3px;
    top: -3px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    /*color: #fff;
        text-shadow: 0 0 5px #fee71b, 0 0 5px #fee71b, 0 0 2px #fee71b;*/
    color: #40ff40;
    text-shadow:
        0 0 5px #00c300,
        0 0 5px #00c300,
        0 0 2px #00c300;
}
@media (max-width: 768px) {
    #group-stage .team.team-match span.qualified-team {
        position: absolute;
        left: 3px;
        top: 9px;
        font-size: 16px;
        text-shadow:
            0 0 3px #fee71b,
            0 0 3px #fee71b,
            0 0 1px #fee71b;
    }
}
.group-a.gc-qualified .group-matchup span:first-child,
.group-b.gc-qualified .group-matchup span:first-child,
.group-c.gc-qualified .group-matchup span:first-child,
.group-d.gc-qualified .group-matchup span:first-child,
.group-e.gc-qualified .group-matchup span:first-child,
.group-f.gc-qualified .group-matchup span:first-child {
    background: #00bf00;
}

.round ul li,
.champion ul li {
    box-shadow: inset 0 0 8px 0px #368bb7;
}

.round-16-left .matchup li,
.round-16-right .matchup li {
    position: relative;
    margin: 16px 0;
    color: #2c7399;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    height: 109px;
    overflow: visible;
    max-height: 100px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
}

.round-16-left .matchup li:nth-child(2),
.round-16-right .matchup li:nth-child(2) {
    margin-bottom: 50px;
}

.round-16-left .matchup li:after,
.round-16-right .matchup li:after {
    position: absolute;
    content: "";
    display: block;
    width: 5px;
    height: 65%;
}

.round-16-left .matchup li:nth-child(odd):after {
    right: -5px;
    top: 50%;
    border-right: 2px solid #9e9e9e;
    border-top: 2px solid #9e9e9e;
}

.round-16-left .matchup li:nth-child(even):after {
    right: -5px;
    top: -5%;
    border-right: 2px solid #9e9e9e;
    border-bottom: 2px solid #9e9e9e;
}

.round-16-right .matchup li:nth-child(odd):after {
    left: -5px;
    top: 50%;
    border-left: 2px solid #9e9e9e;
    border-top: 2px solid #9e9e9e;
}

.round-16-right .matchup li:nth-child(even):after {
    left: -5px;
    top: -5%;
    border-left: 2px solid #9e9e9e;
    border-bottom: 2px solid #9e9e9e;
}

.quarter-finals-left .matchup {
    position: relative;
}

.quarter-finals-left .matchup li,
.quarter-finals-right .matchup li {
    position: relative;
    margin: 16px 0;
    color: #2c7399;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    height: 218px;
    overflow: visible;
    max-height: 100px;
    margin-top: 75px;
    border-radius: 6px;
}

.quarter-finals-left .matchup li:first-child,
.quarter-finals-right .matchup li:first-child {
    margin-bottom: 170px;
}
.quarter-finals-left .matchup li:before,
.quarter-finals-right .matchup li:before {
    position: absolute;
    top: 50%;
    content: "";
    display: block;
    width: 4%;
    height: 2px;
    background: #9e9e9e;
}

.quarter-finals-left .matchup li:before {
    left: -3%;
}

.quarter-finals-right .matchup li:before {
    right: -3%;
}

.quarter-finals-left .matchup li:after,
.quarter-finals-right .matchup li:after {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 150%;
}

.quarter-finals-left .matchup li:first-child:after {
    right: -10px;
    top: 50%;
    border-right: 2px solid #9e9e9e;
    border-top: 2px solid #9e9e9e;
}

.quarter-finals-left .matchup li:nth-child(2):after {
    right: -10px;
    top: -100%;
    border-right: 2px solid #9e9e9e;
    border-bottom: 2px solid #9e9e9e;
}

.quarter-finals-right .matchup li:first-child:after {
    left: -10px;
    top: 50%;
    border-left: 2px solid #9e9e9e;
    border-top: 2px solid #9e9e9e;
}

.quarter-finals-right .matchup li:nth-child(2):after {
    left: -10px;
    top: -100%;
    border-left: 2px solid #9e9e9e;
    border-bottom: 2px solid #9e9e9e;
}

.round-details {
    font-weight: 600;
    font-size: 17px;
    color: #fee61b;
    text-transform: uppercase;
    text-align: center;
    height: 36px;
    line-height: 36px;
    margin-bottom: 18px;
}
.final ~ .round-details {
    font-size: 19px;
    color: #00ff7d !important;
}
.final .team.team-match {
    color: #000;
    background: #fee71b;
    background-image: linear-gradient(
        to top,
        #ffc400,
        #ffca03,
        #ffd107,
        #ffd70d,
        #ffde13,
        #ffe22c,
        #fee73d,
        #feeb4c,
        #feee65,
        #fff17c,
        #fff391,
        #fff6a6
    );
}
.semis .team.team-match {
    color: #000;
    background: #31ff60;
}

.semis {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15em 0 0;
}

html:lang(th-TH) .semis {
    margin: 12em 0 0;
}

html:lang(en-US) .semis {
    margin: 10em 0 0;
}
.semis .semis-l,
.semis .semis-r {
    flex-basis: 45%;
}
.semis .semis-l .matchup li,
.semis .semis-r .matchup li {
    height: 218px;
    overflow: visible;
    max-height: 100px;
    border-radius: 6px;
    font-size: 13px;
}

.semis .semis-l .matchup li:before,
.semis .semis-r .matchup li:before {
    position: absolute;
    top: 50%;
    content: "";
    display: block;
    width: 15%;
    height: 2px;
    background: #9e9e9e;
}

.semis .semis-l .matchup li:before {
    left: -15%;
}

.semis .semis-r .matchup li:before {
    right: -15%;
}

.semis .semis-l .matchup li:after,
.semis .semis-r .matchup li:after {
    position: absolute;
    bottom: -14%;
    content: "";
    display: block;
    width: 60%;
    height: 15%;
    border-bottom: 2px solid #9e9e9e;
}

.semis .semis-l .matchup li:after {
    left: 50%;
    border-left: 2px solid #9e9e9e;
}

.semis .semis-r .matchup li:after {
    right: 50%;
    border-right: 2px solid #9e9e9e;
}

.final .matchup {
    position: relative;
}

.final .matchup li {
    position: relative;
    margin: 16px auto;
    color: #2c7399;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    height: 436px;
    overflow: visible;
    max-height: 100px;
    width: 85%;
    border-radius: 6px;
}

.final .matchup li:before {
    position: absolute;
    top: -113%;
    content: "";
    display: block;
    width: 2px;
    height: 113%;
    background: #9e9e9e;
}

.champion li,
.round li {
    background-color: #fff;
    box-shadow: none;
}

.current li {
    opacity: 1;
}

.current li.team {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.final {
    margin: 10em 0 0;
}

html:lang(th-TH) .final {
    margin: 8.5em 0 0;
}

html:lang(en-US) .final {
    margin: 7.5em 0 0;
}

.date {
    font-size: 10px;
    letter-spacing: 2px;
    color: #3f915f;
}

html:lang(th-TH) .matchup li,
html:lang(en-US) .matchup li,
html:lang(th-TH) .round-details,
html:lang(en-US) .round-details {
    font-size: 16px !important;
}

@media screen and (max-width: 1125px) {
    .semis .semis-l .matchup li:before {
        left: -1.5vw;
        width: 1.8vw;
    }

    .semis .semis-r .matchup li:before {
        right: -1.5vw;
        width: 1.8vw;
    }
}

@media screen and (max-width: 1080px) {
    .semis .semis-l .matchup li:before {
        left: -1vw;
    }

    .semis .semis-r .matchup li:before {
        right: -1vw;
    }
}

@media screen and (max-width: 980px) {
    #bracket .container {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
    }

    .split,
    .champion {
        width: 90%;
        margin: 0;
    }

    .quarter-finals-left .matchup li:before {
        left: -4%;
        width: 5%;
    }

    .quarter-finals-right .matchup li:before {
        right: -4%;
        width: 5%;
    }

    .semis {
        margin: 2.5em 0 0;
    }

    .semis .semis-l,
    .semis .semis-r {
        width: 50%;
    }

    .semis .semis-l .matchup li:before,
    .semis .semis-r .matchup li:before {
        display: none;
    }

    .champion {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
    }

    .final .matchup li {
        width: 100%;
    }

    .split {
        /*border-bottom: 1px solid #b6b6b6;*/
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 400px) {
    .quarter-finals-left .matchup li:before {
        left: -3%;
        width: 4%;
    }

    .split {
        width: 95%;
        margin: 25px 2.5%;
    }

    .current {
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        flex-grow: 1;
    }

    .round-details {
        font-size: 90%;
    }
}

/*END MATCH BRACKET SECTION*/

/*GROUP STAGE SECTION*/

.group-matchup {
    min-height: 495px;
}

.sc-wrap #group-stage {
    background: #012267 url(https://cdn.hanwei1234.com/Content/Euro2024/images/spotlight-match.webp) repeat-y top center;
    padding: 40px 0;
}

.sc-wrap #group-stage {
    background-color: #e1e1e1;
    background-color: rgba(225, 225, 225, 0.9);
    padding-top: 20px;
    font-size: 10px;
    padding: 40px 0;
}

html:lang(th-TH) .sc-wrap #group-stage {
    font-size: 12px;
}

html:lang(en-US) .sc-wrap #group-stage {
    font-size: 14px;
}

#group-stage .groups-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.groups-container .group {
    border-radius: 6px;
    background: rgba(23, 99, 255, 0.5);
    color: #f3f3f3;
}

.groups-container .group span {
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 12px;
}
.groups-container .group .group-matchup > span {
    display: block;
    padding: 4px 0 4px 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: #00369a;
    background: -moz-linear-gradient(180deg, #00369a 0%, #0343b8 25%, #033da8 45%, #011c59 100%);
    background: linear-gradient(180deg, #00369a 0%, #0343b8 25%, #033da8 45%, #011c59 100%);
}

.groups-container .group ul li {
    display: grid;
    grid-template-columns: 65% 35%;
    border-bottom: 1px solid #001985;
    box-shadow: 0px 1px 0px #007ae8;
}
.groups-container .group ul li:last-child {
    border-bottom: none;
}
.groups-container .group ul li div:last-child {
    text-align: center;
}

@media (max-width: 750px) {
    #group-stage .groups-container {
        grid-template-columns: 100%;
    }
}

/*END GROUP STAGE SECTION*/

@media (max-width: 1024px) {
    .sc-wrap {
        padding: 10px 20px;
    }

    [class^="sc-team-"] {
        text-align: center;
    }

    [class^="sc-team-"] img {
        float: none;
        width: 50px;
        margin: 5px;
    }

    [class^="sc-team-"] span {
        display: block;
        margin: 0;
        font-size: 16px;
    }

    .sc-place p {
        font-size: 20px;
    }

    .sc-date span {
        color: #fff;
    }
}

@media (max-width: 991px) {
    .sc-wrap {
        padding: 5px;
    }

    .sc-place {
        padding: 0;
    }

    .sc-group2,
    .sc-group {
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .sc-date {
        font-size: 10px;
    }

    .sc-type {
        font-size: 10px;
    }
    .team {
        justify-content: space-around;
    }
}

@media (max-width: 550px) {
    .team div {
        padding: 8px 0px;
    }
}

.penGoalShe {
    font-size: 22px;
    font-family: "Roboto", sans-serif;
}

/*.team.team-match.topteam {
    background: #009740;
    padding: 10px 0 0px 0px;
    box-shadow: inset 0px 0px 11px 2px #00f568;
}

    .team.team-match.topteam .sc-stadium > p:first-child {
        font-weight: 600;
        font-size: 18px !important;
    }
#group-stage .team.topteam > div:first-child > div:nth-child(2) {
    margin-top: 0;
}*/