:root {
    --color-root-black: #0E0F13;
    --color-grey-v1: #a9acb6;
    --color-red-v1: #FF314A;
    --color-red-v2: #E1243B;
    --color-white: #fff;
    --color-brown-v1: #F05A6D14;
    --color-brown-v2: #262A34;
    --color-brown-v3: #7A7F8A;
    --color-brown-v4: #949494;
    --color-brow-v5: #B6BAC3;
    --color-black-v1: #15171D;
    --color-yellow-v1: #E1DB24;
    --color-green-v1: #2ECC71;
    --color-blue-v1: #1D8FFF;
    --width-right: 30%;
    --min-width-right: 300px;
    --width-right-news: 27.5%;
    --scroll-thumb: rgba(120,120,130,.6);
    --width-nav-main: 260px;
}
html, body {
    min-height: 100%;
    margin: 0;
}
body {
    background-color: var(--color-root-black);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}
a, p, div, nav, ul, li, img, span, i, h1, h2, h3, h4, h5, h6, button, strong, main, header, aside {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
a {
    text-decoration: none;
}
span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
ul {
    list-style: none;
}
.bg-back {
    background-color: var(--color-root-black) !important;
}
.text-black {
    color: var(--color-root-black) !important;
}
.text-grey-v1 {
    color: var(--color-grey-v1) !important;
}
.text-brown-v3 {
    color: var(--color-brown-v3) !important;
}
.text-brown-v4 {
    color: var(--color-brown-v4) !important;
}
.text-brown-v5 {
    color: var(--color-brow-v5) !important;
}
.text-green-v1 {
    color: var(--color-green-v1) !important;
}
.text-yellow-v1 {
    color: var(--color-yellow-v1) !important;
}
.modal.fade {
    background-color: rgba(21, 23, 29, 0.9);
}
.fs-12 {
    font-size: 0.750rem !important;
    line-height: 1.25rem !important;
}
.fs-14 {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}
.fs-16 {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}
.fs-18 {

}
.fs-20 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}
.fs-24 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}
.fs-28 {
    font-size: 1.75rem;
    line-height: 2.25rem;
}
.border-radius-8 {
    border-radius: 8px;
}
.border-radius-16 {
    border-radius: 16px;
}
.border-radius-12 {
    border-radius: 12px;
}
.border-brown-v2 {
    border: 1px solid var(--color-brown-v2) !important;
}
.icon, .icon-12, .icon-24, .icon-28, .icon-16, .flag {
    width: 20px;
    height: 20px;
    object-fit: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.icon-12 {
    width: 12px;
    height: 12px;
}
.icon-16 {
    width: 16px;
    height: 16px;
}
.icon-24 {
    width: 24px;
    height: 24px;
}
.icon-28 {
    width: 28px;
    height: 28px;
}
.icon-football {
    background-image: url("/themes/default/images/icons/football.svg");
}
.icon-score {
    background-image: url("/themes/default/images/icons/score.svg");
}
.icon-football-inactive {
    background-image: url("/themes/default/images/icons/football-inactive.svg");
}
.icon-news {
    background-image: url("/themes/default/images/icons/news.svg");
}
.icon-short {
    background-image: url("/themes/default/images/icons/short.svg");
}
.icon-cup {
    background-image: url("/themes/default/images/icons/cup.svg");
}
.icon-star {
    background-image: url("/themes/default/images/icons/star.svg");
}
.icon-basketball {
    background-image: url("/themes/default/images/icons/basketball.svg");
}
.icon-tennis {
    background-image: url("/themes/default/images/icons/tennis.svg");
}
.icon-volleyball {
    background-image: url("/themes/default/images/icons/volleyball.svg");
}
.icon-badminton {
    background-image: url("/themes/default/images/icons/badminton.svg");
}
.icon-boxing {
    background-image: url("/themes/default/images/icons/boxing.svg");
}
.icon-billiard {
    background-image: url("/themes/default/images/icons/billiard.svg");
}
.icon-basketball {
    background-image: url("/themes/default/images/icons/basketball.svg");
}
.icon-table-tennis {
    background-image: url("/themes/default/images/icons/table-tennis.svg");
}
.icon-futsal {
    background-image: url("/themes/default/images/icons/futsal.svg");
}
.icon-term {
    background-image: url("/themes/default/images/icons/term.svg");
}
.icon-privacy {
    background-image: url("/themes/default/images/icons/privacy.svg");
}
.icon-cookie {
    background-image: url("/themes/default/images/icons/cookie.svg");
}
.icon-fb {
    background-image: url("/themes/default/images/icons/fb.svg");
}
.icon-instagram {
    background-image: url("/themes/default/images/icons/instagram.svg");
}
.icon-twitter {
    background-image: url("/themes/default/images/icons/twitter.svg");
}
.icon-twitch {
    background-image: url("/themes/default/images/icons/twitch.svg");
}
.icon-telegram {
    background-image: url("/themes/default/images/icons/telegram.svg");
}
.icon-search {
    background-image: url("/themes/default/images/icons/search.svg");
}
.icon-down {
    background-image: url("/themes/default/images/icons/down.svg");
}
.icon-up {
    background-image: url("/themes/default/images/icons/up.svg");
}
.icon-next {
    background-image: url("/themes/default/images/icons/right.svg");
}
.icon-prev {
    background-image: url("/themes/default/images/icons/left.svg");
}
.icon-ht {
    background-image: url("/themes/default/images/icons/ht.svg");
}
.icon-yellow-card {
    background-image: url("/themes/default/images/icons/yellow-card.svg");
}
.icon-red-card {
    background-image: url("/themes/default/images/icons/red-card.svg");
}
.icon-corner {
    background-image: url("/themes/default/images/icons/corner.svg");
}
.icon-corner-kick {
    background-image: url("/themes/default/images/icons/corner-kick.svg");
}
.icon-fb-card {
    background-image: url("/themes/default/images/icons/fb-card.svg");
}
.icon-favorite {
    background-image: url("/themes/default/images/icons/favorite.svg");
}
.icon-timer {
    background-image: url("/themes/default/images/icons/timer.svg");
}

.flag-en {
    background-image: url("/themes/default/images/flags/en.svg");
}
.flag-vi {
    background-image: url("/themes/default/images/flags/vi.svg");
}
.line-gradient {
    width: 100%;
    height: 1px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
            90deg,
            rgba(34,40,55,0) 0%,
            #222837 50%,
            rgba(34,40,55,0) 100%
    ) 1;
}
.nav-btn.active .icon-score, .nav-btn:hover .icon-score {
    background-image: url("/themes/default/images/icons/score-active.svg");
}
.nav-btn.active .icon-news, .nav-btn:hover .icon-news {
    background-image: url("/themes/default/images/icons/news-active.svg");
}
.nav-btn.active .icon-short, .nav-btn:hover .icon-short {
    background-image: url("/themes/default/images/icons/short-active.svg");
}

.space-nowrap {
    white-space: nowrap;
}
.min-w-0 {
    min-width: 0;
}
.p-4-5 {
    padding: 2rem;
}
.pl-4-5 {
    padding-left: 2rem;
}
.pr-4-5 {
    padding-right: 2rem;
}
.pt-4-5 {
    padding-top: 2rem;
}
.pb-4-5 {
    padding-bottom: 2rem;
}
.px-4-5 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-4-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.p-2-2-5 {
    padding: .625rem;
}
.pl-2-2-5 {
    padding-left: .625rem;
}
.pr-2-2-5 {
    padding-right: .625rem;
}
.pt-2-2-5 {
    padding-top: .625rem;
}
.pb-2-2-5 {
    padding-bottom: .625rem;
}
.px-2-2-5 {
    padding-left: .625rem;
    padding-right: .625rem;
}
.py-2-2-5 {
    padding-top: .625rem;
    padding-bottom: .625rem;
}
.gap-2-5 {
    gap: 12px
}
.gap-4-5 {
    gap: 32px
}
.scroll-area {
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,120,130,0) transparent;
}

.scroll-area::-webkit-scrollbar {
    width: 8px;
}

.scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
    background: rgba(120,120,130,0);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .2s ease;
}

.scroll-area:hover {
    scrollbar-color: rgba(120,120,130,.6) transparent;
}

.scroll-area:hover::-webkit-scrollbar-thumb,
.scroll-area.scrolling::-webkit-scrollbar-thumb,
.scroll-area::-webkit-scrollbar-thumb:hover,
.scroll-area::-webkit-scrollbar-thumb:active {
    width: 8px;
    background: rgba(120,120,130,.6);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.hide-scroll {
    overflow: auto;
    -ms-overflow-style: none; /* IE & Edge cũ */
    scrollbar-width: none; /* Firefox */
}

.hide-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-2-line{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-3-line{
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.top-news-4 .item{
    width: calc((100% - 24px * 3) / 4);
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}
.top-news-3 .item{
    width: calc((100% - 24px * 2) / 3);
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}
.top-news-2-multiple-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px !important;
    row-gap: 24px !important;
}
.top-news-2-multiple-line .item{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
/*Custom Datepicker*/
.ui-datepicker {
    top: calc(100% + 14px) !important;
    right: 0 !important;
    left: unset !important;
    width: 390px !important;
    font-size: 14px;
    border-radius: 16px;
    border: 0 !important;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.0784313725);
    padding: 0;
    overflow: hidden;
}
.ui-datepicker-title span {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}
.ui-datepicker th {
    color: #6b6f73;
}

.ui-widget-header {
    background: #fff;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #dedede;
    padding: 12px 16px !important;
}

.ui-datepicker-today a {
    background-color: rgba(29, 143, 255, 0.0509803922) !important;
    color: #1d8fff !important;
    border-radius: 8px !important;
}

.ui-state-default {
    background: #fff !important;
    border: unset !important;
    text-align: center !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0 !important;
}

.ui-state-active {
    background-color: #3b82f6 !important;
    color: white !important;
    border-radius: 12px !important
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 50%;
    transform: translateY(-50%);
}
.ui-datepicker .ui-datepicker-prev {
    left: 16px;
}
.ui-datepicker .ui-datepicker-next {
    right: 16px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none; /* Ẩn text mặc định */
}
.ui-datepicker-prev span.ui-icon {
    width: 7.5px;
    height: 13.5px;
    background: url("/themes/default/images/icons/left.svg") center center no-repeat;
}
.ui-datepicker-next span.ui-icon {
    width: 7.5px;
    height: 13.5px;
    background: url("/themes/default/images/icons/right.svg") center center no-repeat;
}
.ui-datepicker th {
    font-weight: 400;
}


.switch{
    position:relative;
    display:inline-block;
    width:36px;
    height:20px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#2A2E37;
    border-radius:50px;
    transition:0.25s;
}

.slider::before{
    content:"";
    position:absolute;
    height:16px;
    width:16px;
    left:4px;
    top:2px;
    background:#B6BAC3;
    border-radius:50%;
    transition:0.25s;
}

.switch input:checked + .slider{
    background: #2ECC71;
}

.switch input:checked + .slider::before{
    transform:translateX(14px);
    background-color: #fff;
}
.nav-wrapper {
    width: var(--width-nav-main);
    height: 100vh;
}
.nav-main {
    border-right: 1px solid var(--color-brown-v2);
    background-color: var(--color-root-black);
}
.nav-btn {
    width: 70px;
    height: 68px;
    border-radius: 8px;
    background: var(--color-black-v1);
    border: 2px solid var(--color-brown-v2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: .3s ease;
}
.nav-btn span{
    transition: .15s ease;
    color: var(--text-grey-v1);
}
.nav-btn.active, .nav-btn:hover {
    background: var(--color-brown-v1);
    border: 2px solid var(--color-red-v2);
}
.nav-btn.active span, .nav-btn:hover span {
    color: var(--color-red-v1);
}
.nav-list {
    height: 40px;
    width: 100%;
    padding: 10px 8px;
    display: flex;
    justify-content: left;
    gap: 8px;
    color: var(--color-grey-v1);
    font-weight: 500;
    align-items: center;
}
.nav-sport {
    height: 40px;
    border-radius: 16px;
    padding: 10px 8px;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 8px;
    color: var(--color-grey-v1);
    transition: .3s ease;
}
.nav-sport:hover {
    background-color: #1D2028;
    color: var(--color-brow-v5);
}
.nav-sport.active {
    background-color: var(--color-red-v2);
    color: var(--color-white);
}

.logo-nav img {
    max-width: 100%;
}
.nav-wrapper.collapse .text-collapse {
    display: none;
}
.nav-wrapper.collapse .flex-collapse {
    flex-wrap: wrap !important;
    gap: 8px;
}
.nav-wrapper.collapse .flex-collapse .nav-btn {
    height: 48px;
}
.nav-wrapper {
    transition: width .1s ease;
}
.nav-wrapper.collapse .reset-padding {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.nav-wrapper.collapse .nav-list-sport .nav-sport {
    border-radius: 12px;
    justify-content: center;
}
.nav-wrapper.collapse .nav-list {
    justify-content: center;
}
.btn-collapse-nav {
    transition: transform .3s ease;
}
.nav-wrapper.collapse .btn-collapse-nav {
    transform: rotate(180deg);
}
.nav-wrapper.collapse .flex-collapse-wrap {
    flex-wrap: wrap;
}
.nav-wrapper.collapse .nav-info-address {
    display: none;
}
header {
    height: 72px;
    padding: 0 32px;
}
.btn-search {
    border: 1px solid var(--color-brown-v2);
    background: var(--color-black-v1);
    border-radius: 50%;
    transition: background-color .3s ease, border-color .3s ease;
}
.btn-search:hover {
    background-color: var(--color-brown-v1);
    border-color: var(--color-red-v2);
}
.download-app {
    height: 40px;
    width: 140px;
    display: flex;
    align-items: center;
    gap: 8xp;
    padding: 12px 16px;
    border-radius: 200px;
    background: #1d8fff;
    color: #fff;
    outline: none;
    border: 0;
}
.download-app .icon {
    width: 24px;
    height: 24px;
    line-height: 22px;
}
.download-app .content {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
}
.download-app .content span:first-child {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
}
.download-app .content span:last-child {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
}
.btn-language {
    height: 40px;
    border-radius: 24px;
    border: 1px solid var(--color-brown-v2);
    transition: border-color .3s ease;
}
.btn-language:hover {
    border-color: var(--color-red-v2);
}


.sidebar-right, .sidebar-right-news {
    width: var(--width-right);
    min-width: var(--min-width-right);
    margin: 0 32px 16px 0;
    height: calc(100vh - 88px);
    border: 1px solid #222837;
    border-radius: 24px;
    overflow-y: auto;
}
.sidebar-right-news {
    width: var(--width-right-news);
    border-color: transparent;
}

.logo-cover, .logo-circle {
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
}
.logo-circle {
    border-radius: 50%;
}
.btn-collapse {
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: none;
}
.btn-collapse .icon-up {
    transition: transform 0.3s ease;
}
.btn-collapse.down .icon-up {
    transform: rotate(180deg);
}
.center-right {
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    right: 0;
}



.title-page {
    gap: 12px;
}
.multi-tab {
    height: 48px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-bottom: 1px solid #222837;
}
.group-tab{
    position: relative;
    display: flex;
    gap: 0;
}
.btn-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 20px;
    overflow: hidden;
    color: var(--color-grey-v1);
    transition: color .3s ease;
}
.btn-tab::before {
    content: "";
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    background: linear-gradient(
            270deg,
            rgba(240, 90, 109, 0) 0%,
            rgba(240, 90, 109, 0.08) 50%,
            rgba(240, 90, 109, 0) 100%
    );
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity .3s ease;
}
.effect-btn-tab {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: linear-gradient(
            to bottom,
            #E0E0E0 0%,
            rgba(224, 224, 224, 0) 100%
    );
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
}
.group-tab.is-active{ color: #e1243b; }

.tabs__indicator{
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 2px;
    width: 0;
    background: linear-gradient(270deg, rgba(225,36,59,0) 0%, rgba(225,36,59,.9) 50%, rgba(225,36,59,0) 100%);
    border-radius: 999px;
    transform: translateX(0);
    transition: transform .35s ease, width .35s ease;
    will-change: transform, width;
}
.btn-tab:hover .effect-btn-tab {
    opacity: .06;
}
.btn-tab.active:hover .effect-btn-tab {
    opacity: 0;
}
.btn-tab.active::before {
    opacity: 1;
}
.btn-tab.active {
    color: var(--color-red-v2);
}
.btn-choose-date {
    width: 20px;
    height: 20px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
}
.btn-prev-date {
    background-image: url("/themes/default/images/icons/left.svg");
}
.btn-next-date {
    background-image: url("/themes/default/images/icons/right.svg");
}
.btn-show-datepicker {
    display: flex;
    align-items: center;
    padding: 0;
    gap: .5rem;
    color: var(--color-grey-v1);
}
.btn-show-datepicker:hover {
    color: var(--color-grey-v1);
}
.datepicker-wrapper {
    position: relative;
}
.datepicker {
    display: none;
}
.btn-cus {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    background-color: var(--color-black-v1);
    color: var(--color-grey-v1);
    border: 1.5px solid transparent;
    border-radius: 100px;
    transition: color, background-color, border-color .3s ease;
}
.btn-cus:hover, .btn-cus.active {
    border-color: var(--color-red-v2);
    background-color: var(--color-brown-v1);
    color: #FFFFFF;
}
.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid transparent;
    background-color: transparent;
}
.circle-32 {
    width: 32px;
    height: 32px;
}
.circle-4 {
    width: 4px;
    height: 4px;
}
.circle-6 {
    width: 6px;
    height: 6px;
}
.circle-20 {
    width: 20px;
    height: 20px;
}
.circle-yellow {
    border-color: #FFFB91;
    background-color: var(--color-yellow-v1);
}
.circle-brown {
    background-color: #B6BAC3;
}
.circle-black {
    border-color: #706E6E;
    background-color: #0E0F13;
}
.circle-white {
    border-color: #fff;
    background-color: #fff;
}
.circle-black-v1 {
    background: #15171D;
    border: 1px solid #262A34;
}
.circle-small {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #fff;
}

.btn-sort-time {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #1D2028;
    border: none;
    background-image: url("/themes/default/images/icons/timer.svg");
    background-position: center;
    background-repeat: no-repeat;
}
.btn-sort-time.cup {
    background-image: url("/themes/default/images/icons/cup-v1.svg");
}

.group-football-by-league {
    border-radius: 12px;
    background-color: #15171D;
}
.group-football-by-league .header-league {
    align-items: center;
    height: 40px;
    padding: 0 16px;
    color: var(--color-brown-v4);
    gap: 12px;
    display:grid;
    grid-template-columns: 1fr 356px 16px;
}
.group-football-by-league .header-league .odds-col {
    transition: visibility .3s ease;
}
.group-football-by-league.collapse-down .header-league .odds-col {
    visibility: hidden
}
.match-football {
    min-height: 80px;
    padding: 12px 16px;
    justify-content: space-between;
    border-top: 1px solid #202228;
    border-left: 2px solid transparent;
    gap: 12px;
    transition: background-color .3s ease;
    display:grid;
    grid-template-columns: 56px 1fr 32px 356px 16px;
}
.hide-odds .match-football {
    grid-template-columns: 56px 1fr 32px 66px 16px;
}
.hide-odds .group-football-by-league .header-league {
    grid-template-columns: 1fr 66px 16px;
}
.hide-odds .match-football .odds-group, .hide-odds .odds-col {
    display: none;
}
.group-sort-match {
    display: none;
    flex-wrap: wrap;
}
.group-sort-match a:first-child {
    border-top-color: transparent;
}
.hide-league {
    gap: 0px !important;
}
.hide-league .group-football-by-league {
    display: none !important;
}
.hide-league .group-sort-match {
    display: flex;
}
.match-football {
    background-color: #15171D;
}
.match-football.live {
    background: linear-gradient(90deg, rgba(225, 219, 36, 0.0282353) 0%, rgba(225, 219, 36, 0) 100%);
    border-left-color: var(--color-yellow-v1)
}

.match-football:hover {
    background-color: #1D2028;
}
.match-football.live:hover {
    background: #1D2028;
    background-image: linear-gradient(
            90deg,
            rgba(225, 219, 36, 0.028) 0%,
            rgba(225, 219, 36, 0) 100%
    );
}
.match-football .team {
    height: 28px;
    width: 100%;
}
.match-football .match-score, .match-football-score .grid-match-score {
    width: 32px;
    height: 48px;
    border: 1px solid #222837;
    border-radius: 4px;
    background: #161920;
    color: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
}
.match-football .match-corner, .match-football .match-card{
    width: 32px;
    height: 48px;
    display: flex;
    flex-direction: column;
    color: var(--color-brow-v5);
    border: 1px solid transparent;
}
.match-football .match-score:before, .match-football-score .grid-match-score:before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    height: 1px;
    width: 100%;
    background: #222837;
}
.match-football .match-score .score, .match-football-score .score, .match-football .corner {
    height: 50%;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
.match-football .match-score.win .home-score,
.match-football .match-score.lose .away-score,
.match-football-score .score.win.home-score,
.match-football-score .grid-match-score.win .home-score,
.match-football-score .grid-match-score.lose .away-score {
    color: #E1DB24;
}
.match-football .away-team-name,
.match-football .home-team-name {
    font-weight: 300;
}
.match-result-win .home-team-name {
    font-weight: 700;
}
.match-result-lose .away-team-name {
    font-weight: 700;
}
.match-football .odds, .table-odds .odds {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:  8px 32px;
}

.match-football .odds-last, .table-odds .odds-last {
    flex-wrap: nowrap;
    justify-content: space-between;
}
.match-football .odds-info, .table-odds .odds-info {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.match-football .odds-info *, .table-odds .odds-info * {
    font-size: 14px;
    font-weight: 700;
    color: #B6BAC3;
}
.odds-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.odds-item {
    padding: 4px;
    height: 28px;
    background-color: #161920;
    border: 1px solid #2E3340;
    color: var(--color-brow-v5);
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    display: inline;
    align-items: center;
}
.odds-item.up {
    animation: upOdds 0.6s ease forwards;
}
.odds-item.down {
    animation: downOdds 0.6s ease forwards;
}
.odds-none .odds-item {
    background-color: transparent;
    background: url("/themes/default/images/icons/lock.svg") center center no-repeat;
    border-color: transparent;
    color: transparent;
}
.header-sidebar-right {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
}
.header-match-right .score-result .team, .header-match-football .score-result .team {
    display: inline-flex;
    align-items: start;
    justify-content: center;
    width: calc(50% - 50px);
    gap: 0;
    margin: 1rem 0;
}
.header-match-right .score-result .info, .header-match-football .score-result .info {
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}
.header-match-football .score-result .info {
    width: unset;
}
.multi-tab-small {
    height: 40px;
}
.multi-tab-small .btn-tab {
    padding-top: 8px;
    padding-bottom: 8px;
}
.card {
    background-color: transparent;
}
.card-v3 {
    border-radius: 8px;
    border: none;
    width: 100%;
    background-color: #15171D;
}
.card-v3 .card-header {
    padding: 10px 16px;
}
.card-v3 .card-title {
    margin: 0;
}
.card-v3 .card-title h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-brown-v4);
}
.card-v3 .card-body {
    border-top: 1px solid #2E3340;
}
.head-to-head .card-body {
    padding: 0;
}
.head-to-head .items {
    width: 100%;
    padding: 16px 16px 12px 16px;
    display: flex;
    justify-content: space-between;
}
.head-to-head .items .item {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.head-to-head .items .item .flag, .head-to-head .items .item .percents {
    margin: 0 auto;
    margin-bottom: 8px;
}
.head-to-head .flag {
    width: 56px;
    height: 56px;
    border-radius: 100%;
}
.head-to-head .items .item .result {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.color-red {
    color: #e1243b !important;
}
.head-to-head .items .item .percent {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
}
.color-gray {
    color: #B6BAC3;
}
.color-blue {
    color: #1d8fff;
}
.head-to-head .img-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vs-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vs-circle__center {
    position: absolute;
    inset: 25%;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: var(--color-grey-v1);
    pointer-events: none;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.tab-content.cards.active {
    display: flex;
}
.icon-desc {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.icon-desc .item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-brow-v5);
    font-size: 12px;
}
.match-info .item {
    display: flex;
    gap: 12px;
}
.match-info .item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid #f4f4f4;
    overflow: hidden;
}
.match-info .item .info > .name {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #FFF;
}

.match-info .item .country {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.match-info .item .flag {
    width: 16px;
    height: 16px;
    line-height: 14px;
}
.match-info table {
    width: 100%;
}
.match-info table tr th {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #B6BAC3;
    padding-bottom: 16px;
}
.match-info table tr td {
    padding-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: right;
}

.breadcrumb {
    height: 16px;
    margin: 10px 32px 8px 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb a {
    display: flex;
    align-items: center;
    gap: 4px;
}
.breadcrumb span {
    color: var(--color-brown-v4);
    font-size: 12px;
    line-height: 16px;
}
.tag-status-detail-match {
    background-color: var(--color-black-v1);
    padding: 4px 8px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 24px;
    color: var(--color-grey-v1);
    text-align: center;
}
.header-match-football {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 32px;
    padding: 16px 40px;
    background: linear-gradient(90deg, rgba(29, 32, 40, 0) 0%, #1D2028 50%, rgba(29, 32, 40, 0) 100%);
}

.match-odds .items {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 8px;
    justify-content: space-between;
}
.match-odds .items .item {
    border-radius: 8px;
    display: inline-flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 12px 8px;
    background-color: #FFFFFF0A;
;
}
.match-odds .items .item .name,
.match-odds .items .item .value,
.match-odds .items .item .note {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-grey-v1);
}
.match-odds .items .item:nth-child(1) .value {
    color: var(--color-red-v2);
}
.match-odds .items .item:nth-child(2) .value {
    color: var(--color-green-v1);
}
.match-odds .items .item:nth-child(3) .value {
    color: var(--color-blue-v1);
}

.table-score > .table-header {
    color: var(--color-grey-v1);
    font-weight: 400;
    font-size: 14px;
    height: 40px;
    line-height: 20px;
}
.table-score .table-body {
    padding: 0 16px;
}
.table-score .table-row {
    height: 68px;
    box-sizing: border-box;
    padding: 4px 0;
    border-radius: 8px;
    background: #FFFFFF0A;
    width: 100%;
}
.table-score.no-line .table-row {
    border-radius: 0;
    border-top: 1px solid #2E3340;
    background-color: transparent;
}
.table-score.no-line.card-v3 .card-body {
    border-top: none;
}
.table-score .table-body .table-row:last-child {
    border-bottom: none;
}
.table-score .table-row .event-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: var(--color-grey-v1);
}
.table-score .table-status {
    display: grid;
    place-items: center
}
.table-score .match-score {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: start;
    padding: 0 4px 0 8px;
}
.table-score .table-row .ft {
    z-index: 0;
    border-radius: 4px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    width: 32px;
    height: 60px;
    padding-top: 4px;
    font-family: Arial, sans-serif;
    display: flex;
    position: relative;
    margin: 0 auto;
    border: 2px solid transparent;
    background: linear-gradient(to bottom, rgba(225, 36, 59, 0.08) 0%, rgba(225, 36, 59, 0) 65%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom, #E1243B 0%, #FFFFFF 100%) border-box;
}

.table-score .table-row .ft.lose {
    border: 2px solid transparent;
    background: linear-gradient(to bottom, rgba(225, 36, 59, 0) 35%, rgba(225, 36, 59, 0.08) 100%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom, #FFFFFF 0%, #E1243B 100%) border-box;
}
.table-score .table-row .ft.draw {
    background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom, rgba(225, 36, 59, 0) 0%, rgba(225, 36, 59, 0.6) 50%, rgba(225, 36, 59, 0) 100%) border-box;
}

.table-score .table-row .ft span:first-child {
    color: rgba(225, 36, 59, 1);
}
.table-score .table-row .ft span:last-child {
    color: rgba(2, 2, 4, 1)
}
.table-score .table-row .ft.lose span:first-child {
    color: rgba(2, 2, 4, 1)
}
.table-score .table-row .ft.lose span:last-child {
    color: rgba(225, 36, 59, 1);
}
.table-score .table-row .ft.draw span {
    color: rgba(225, 36, 59, 1);
}

.table-score .table-row .ft span, .table-score .table-row .ht span, .table-score .table-row .corner span {
    width: 20px;
    height: 20px;
    text-align: center;
    display: grid;
    place-items: center
}
.table-score .table-row .ht {
    color: #fff;
}
.table-score .table-row .ht, .table-score .table-row .ft {
    justify-content: space-around;
}
.table-score .table-row .ht, .table-score .table-row .corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.table-score .table-row .match-score .team {
    width: 100%;
    display: inline-flex;
    align-items: center;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    margin: 4px 0;
}
.table-score .table-row .match-score .team .img-cover {
    margin-right: 8px;
}

.card-common .left,
.card-common .right {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card-common .left .flag,
.card-common .right .flag {
    width: 32px;
    height: 32px;
    border-radius: 100%;
}
.card-common .left .rigg-name,
.card-common .right .rigg-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}
.card-common .left .rigg-numb,
.card-common .right .rigg-numb {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #B6BAC3;
}
.card-common .left .icon-substitution,
.card-common .right .icon-substitution {
    width: 12px;
    height: 12px;
    line-height: 12px;
}
.card-common .left .avatar,
.card-common .right .avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    border: 1px solid #dedede;
    overflow: hidden;
}
.card-common .left .top,
.card-common .right .top {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    gap: 4px;
}
.card-common .left .bottom,
.card-common .right .bottom {
    display: inline-flex;
}
.card-common .left .bottom .name,
.card-common .right .bottom .name {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #6b6f73;
}
.card-common .left .point,
.card-common .right .point {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    background: #1db57a;
    color: #fff;
    white-space: nowrap;
    padding: 0 4px;
    width: 24px;
    height: 16px;
    gap: 8px;
    border-radius: 100px;
    padding-right: 4px;
    padding-left: 4px;
}
.card-common .left .desc,
.card-common .right .desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-common .left .items,
.card-common .right .items {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}
.card-common .left .items .item,
.card-common .right .items .item {
    display: inline-flex;
    justify-content: end;
    gap: 8px;
}
.card-common .avatar-group {
    position: relative;
}
.card-common .avatar-group .goal {
    width: 12px;
    height: 12px;
    position: absolute;
    top: -1px;
    left: -1px;
    transform: translate(-25%, -25%);
}
.card-common .avatar-group .flag {
    width: 14px !important;
    height: 14px !important;
    position: absolute;
    top: -1px;
    right: 0px;
    transform: translate(-5%, -25%);
}
.card-common .avatar-group .point {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 28px !important;
    height: 16px !important;
    border-radius: 4px;
    padding-right: 2px;
    padding-left: 2px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    background: #717b8c !important;
    text-align: center;
}
.card-common .left {
    align-items: end;
}
.card-common .left .bottom {
    text-align: right;
    justify-content: end;
}
.card-common .right .items .item {
    flex-direction: row-reverse;
    justify-content: start;
}
.card-common .right .top {
    justify-content: start;
    flex-direction: row-reverse;
}
.card-common .right .avatar-group .goal {
    right: -1px;
    left: unset;
    transform: translate(25%, -25%);
}
.card-common .right .avatar-group .flag {
    right: unset;
    left: 0px;
    transform: translate(-5%, -25%);
}





.percents-common .percent-group {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
}
.percents-common .percent-group .team {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    height: 20;
    border-radius: 2px;
    padding: 2px 6px 2px 8px;
}
.percents-common .percent-group .team .flag {
    width: 16px;
    height: 16px;
    line-height: 14px;
}
.percents-common .percent-group .team .percent {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #fff;
}
.percents-common .percent-group .team:first-child {
    background: linear-gradient(90deg, #7b1420 0%, #e1243b 100%);
}
.percents-common .percent-group .team:last-child {
    background: linear-gradient(90deg, #1d8fff 0%, #115699 100%);
    flex-direction: row-reverse;
}
.percents-common .short {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
}
.percents-common .short span {
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}
.percents-common .short span.l-win {
    color: #E1243B;
}
.percents-common .short span.r-win {
    color: #1D8FFF;
}
.percents-common .short span.percent {
    font-weight: 600;
    font-style: SemiBold;
}
.percents-common .process {
    display: flex;
    gap: 2px;
    justify-content: space-between;
    margin-bottom: 20px;
}
.percents-common .process .item {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    position: relative;
    background: #FFFFFF0A;
}
.percents-common .process .item .line {
    position: absolute;
    top: 0%;
    height: 100%;
    border-radius: 2px;
}
.percents-common .process .item:first-child .line {
    right: 0%;
    background: #e1243b;
}
.percents-common .process .item.l-loss:first-child .line {
    background-color: #E1243B33;
}
.percents-common .process .item:last-child .line {
    left: 0%;
    background: #1d8fff;
}
.percents-common .process .item.r-loss:last-child .line {
    background: #1D8FFF33;
}
.percents-common .items {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
}
.percents-common .items .item {
    display: inline-flex;
    gap: 0.75rem;
    border-radius: 4px;
    border: 1px solid #2E3340;
    padding: 8px;
}
.percents-common .items .item p {
    font-weight: 600;
    font-style: SemiBold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #B6BAC3;
}
.percents-common .items .item .img {
    width: 16px;
    height: 16px;
    line-height: 14px;
}

.total-shots {
    min-height: 80px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(270deg, rgba(29, 143, 255, 0.16) 0%, rgba(29, 143, 255, 0.16) 50.48%, rgba(225, 36, 59, 0.16) 50.49%, rgba(225, 36, 59, 0.16) 100%);
}
.total-shots .point-top,
.total-shots .point-bottom {
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.total-shots .point-top span,
.total-shots .point-bottom span {
    display: block;
    border-radius: 2px;
    font-family: Font/Family;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #fff;
}
.total-shots .point-top span:first-child,
.total-shots .point-bottom span:first-child {
    background: #e1243b;
    width: 20px;
    height: 20px;
}
.total-shots .point-top span:last-child,
.total-shots .point-bottom span:last-child {
    background: #1d8fff;
    width: 20px;
    height: 20px;
}
.total-shots .point-top .desc,
.total-shots .point-bottom .desc {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    white-space: nowrap;
}
.total-shots .point-top {
    position: absolute;
    height: 80%;
    min-width: 220px;
    width: 40%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.total-shots .point-top .desc {
    font-weight: 600;
}
.total-shots .point-bottom {
    min-width: 170px;
    position: absolute;
    height: 33%;
    width: 32%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.total-shots .point-bottom .desc {
    font-weight: 400;
}
.total-shots .shots-on-target {
    min-width: 200px;
    width: 40%;
    height: 63%;
    position: absolute;
    padding: 18px 16px 0 16px;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
}
.total-shots .shots-on-target img {
    object-fit: contain;
}
.total-shots .shots-on-target::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid transparent;
    border-radius: 4px;
    background: linear-gradient(90deg, #e1243b 0%, #e1243b 49.99%, #1d8fff 50%, #1d8fff 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}
.total-shots .point-top.detail-right {
    width: 92%;
}
.total-shots .shots-on-target.detail-right {
    width: 90%;
}
.total-shots .point-bottom.detail-right {
    width: 75%;
}




.timeline-events .items {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    position: relative;
}
.timeline-events .items .item {
    padding: 8px 0;
    opacity: 1;
    width: 100%;
}
.timeline-events .items .item .icon {
    width: 16px;
    height: 16px;
    line-height: 14px;
}
.timeline-events .items .item .title {
    display: inline-flex;
    width: 100%;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #6b6f73;
}
.timeline-events .items .item .title .item-score {
    font-weight: 600;
    font-style: SemiBold;
    color: #E1243B;
    letter-spacing: 0%;
}
.timeline-events .items .item[class*=type] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.timeline-events .items .item[class*=type] .left,
.timeline-events .items .item[class*=type] .right {
    width: calc((100% - 32px - 24px) / 2);
    max-width: calc((100% - 32px - 24px) / 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.timeline-events .items .item[class*=type] .right {
    flex-direction: row-reverse;
}
.timeline-events .items .item[class*=type] .right .player {
    flex-direction: row-reverse;
}
.timeline-events .items .item[class*=type] .right .name-group {
    text-align: right;
}
.timeline-events .items .item[class*=type] .player {
    display: flex;
    gap: 0.25rem;
}
.timeline-events .items .item[class*=type] .avatar {
    width: 20px;
    height: 20px;
    line-height: 18px;
}
.timeline-events .items .item[class*=type] .icon {
    min-width: 16px;
}
.timeline-events .items .item[class*=type] .name-group,
.timeline-events .items .item[class*=type] .player {
    width: calc(100% - 12px - 16px);
}
.timeline-events .items .item[class*=type] .name-bold {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.timeline-events .items .item[class*=type] .name {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
}
.timeline-events .items .item[class*=type] .sub-name {
    font-family: Poppins;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #6b6f73;
}
.timeline-events .items .item[class*=type] .time {
    width: 32px;
    height: 24px;
    line-height: 24px;
    background: #00000099;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #E1DB24;
    border-radius: 100px;
    z-index: 0;
}
.timeline-events .items .item[class*=type] .item-score {
    display: block;
    min-width: 42px;
    text-align: center;
    height: 20px;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 244px;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    background: #1d8fff;
}
.timeline-events  .img-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.timeline-events .left {
    text-align: right;
}

.timeline-events .right {
    text-align: left;
}
.timeline-events .items .item[class*=type] .right .item-score {
    background-color: #E1243B;
}
.timeline-events .items .item[class*=type] .name-group, .timeline-events .items .item[class*=type] .left .player {
    justify-content: right;
}
.timeline-events .items .item[class*=type] .name-group, .timeline-events .items .item[class*=type] .right .player {
    justify-content: left;
}
.timeline-events .items::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 15px;
    bottom: 0;
    width: 1px;
    border: 1px solid #2E3340;
}


.head-to-head .result-group {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 16px;
    margin-bottom: 16px;
}
.head-to-head .result-group .result-item {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 100px;
    background-color: #FFFFFF0A;
;
}
.head-to-head .result-group .result-item .flag {
    width: 16px;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
}
.head-to-head .result-group .result-item p {
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.drag-scroll {
    overflow-x: auto;
    cursor: grab;
    scrollbar-width: none;
}

.drag-scroll::-webkit-scrollbar {
    display: none;
}




.color-rating.rating1 {
    color: #8b5cf6;
}
.color-rating.rating2 {
    color: #11b981;
}
.color-rating.rating3 {
    color: #3b82f6;
}
.color-rating.rating4 {
    color: #fa7315;
}
.color-rating.rating5 {
    color: #ef4444;
}
.color-rating.rating6 {
    color: #7f1e1d;
}
.color-rating.rating7 {
    color: #717b8c;
}
.average-rating-chart-use {
    border-radius: 4px 4px 0 0;
    background-color: red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.point-rating {
    position: absolute;
    top: -25px;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 30px;
    font-weight: 600;
}
.average-rating-point {
    color: var(--text-grey-v1);
    font-size: 12px;
}
.average-rating-logo {
    margin: 5px auto 2px;
    display: block;
}
.bg-svd {
    width: 254px;
    height: 377px;
    background: url("/themes/pc/imgs/lineups-rotate.png") top left;
    background-size: cover;
}
.position-svd {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    color: #1DB57A;
    border: 1px solid #1DB57A;
    background-color: #fff;
}
.position-svd.position-primary {
    color: var(--text-primary-v1);
    border: 1px solid var(--text-primary-v1);
}
.bg-coach-football {
    position: absolute;
}
.coach-football {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0 10px;
    box-sizing: border-box;
}
.logo-coach-football {
    width: 16px ;
    height: 16px;
}
.name-coach-football {
    margin: 0 5px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}
.formation-coach-football {
    border-radius: 12px;
    padding: 0px 6px;
    font-size: 14px;
    height: 24px;
    font-weight: 500;
    color: #fff;
    line-height: 24px;
    white-space: nowrap;
}
.formation-coach-football.team-home {
    background-color: #E1243B;
}
.formation-coach-football.team-away {
    background-color: #1D8FFF;
}

.simulation-lineup {
    display: block;
    width: 100%;
    background-image: url('/themes/default/images/lineups.svg');
    background-size: cover;
    position: relative;
}
.simulation-lineup.show-height {
    background-image: url('/themes/default/images/lineups.svg');
}
.simulation-half-lineup {
    display: block;
    width: 100%;
    background-image: url('/themes/pc/imgs/half-lineup.png');
    background-size: cover;
    position: relative;
}
.lineup-player {
    position: absolute;
    width: 106px;
    height: 66px;
    text-align: center;
}
.lineup-info-player .avatar-player-lineup {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.show-height .lineup-info-player .avatar-player-lineup {
    width: 32px;
    height: 32px;
}
.lineup-info-player .name-player-lineup {
    height: 20px;
    line-height: 18px;
    background-color: var(--text-black-v1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    padding: 2px;
    border-radius: 4px;
    font-weight: 400;
    box-sizing: border-box;
    font-size: 12px;
    margin-top: 2px;
}
.show-height.lineup-player {
    height: 50px;
}
.show-height .lineup-info-player .name-player-lineup {
    height: 14px;
    font-size: 12px;
    line-height: 16px;
}
.lineup-info-player .age-player-lineup,
.lineup-info-player .money-player-lineup,
.lineup-info-player .rating-player-lineup {
    height: 12px;
    border-radius: 4px;
    min-width: 20px;
    padding: 0 2px;
    background-color: #717B8C;
    font-size: 12px;
    font-weight: 500;
    color: white;
    position: absolute;
    align-items: center;
    justify-content: center;
    display: none;
}
.lineup-info-player .logo-national-player-lineup {
    position: absolute;
    display: none;
}
.lineup-info-player .logo-national-player-lineup {
    left: 82px;
    top: 0;
}
.lineup-info-player .age-player-lineup {
    left: 76px;
    top: 0;
}
.lineup-info-player .money-player-lineup {
    left: 76px;
    top: 0;
}
.lineup-info-player .rating-player-lineup {
    left: 6px;
    top: 20px;
    background-color: #8B5CF6;
}

.show-logo-national .logo-national-player-lineup,
.show-age-lineup .age-player-lineup,
.show-money-lineup .money-player-lineup,
.show-rating-lineup .rating-player-lineup {
    display: flex;
}

.card-common .card-body {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.card-common .line {
    display: block;
    width: 1px;
    height: auto;
    background: #2E3340;
}
.tab-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
}
.tabs-v1 {
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
    width: 100%;
}
.space-nowrap.tab {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 12px;
    border-radius: 100px;
    background-color: #15171D;
    color: var(--color-grey-v1);
    border: 1.5px solid transparent;
    transition: all .3s ease;
    cursor: pointer;
}

.space-nowrap.tab:hover,
.space-nowrap.tab.active {
    border-color: #E1243B;
    background-color: #F05A6D14;
    color: #fff;
}



.commentary .card-body {
    border-radius: 8px;
    padding: 16px;
}
.commentary .items .item {
    display: flex;
    gap: 16px;
    padding: 8px 0;
}
.commentary .items .item:not(:last-child) {
    border-bottom: 1px solid #202228;
}
.commentary .items .item .dot {
    margin: 4px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}
.commentary .items .item .left {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    width: 24px;
}
.commentary .items .item .left .time {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.commentary .items .item .left .icon {
    width: 24px;
    height: 16px;
    line-height: 0px;
    border-radius: 100%;
}
.commentary .items .item .left .icon img {
    object-fit: contain;
}
.commentary .items .item .flags {
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 18px;
}
.commentary .items .item .content {
    width: 100%;
}
.commentary .items .item .content .tag {
    width: 50px;
    height: 20px;
    line-height: 16px;
    padding: 4px 8px;
    gap: 8px;
    border: 1px solid #222837;
    border-radius: 244px;
    background: #161920;
    color: #E1DB24;
    text-align: center;
    margin-left: 8px;
}
.commentary .items .item .content .tag.inline {
    background: rgba(29, 143, 255, 0.0784313725);
    border: 1px solid #202228;
    color: #1d8fff;
}
.commentary .items .item .content .top {
    width: 100%;
    height: 20px;
    display: inline-flex;
    justify-content: space-between;
}
.commentary .items .item .content .top .title {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.commentary .items .item .content .top .title .icon {
    width: 16px;
    height: 16px;
    line-height: 0px;
}
.commentary .items .item .content .bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.commentary .items .item .content .bottom .icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    line-height: 18px;
}
.commentary .items .item .avatar {
    width: 24px;
    height: 24px;
    line-height: 0px;
    border-radius: 100%;
}
.commentary .items .item .in-out {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.commentary .items .item .in-out .in,
.commentary .items .item .in-out .out {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.commentary .items .item .in-out .in .name,
.commentary .items .item .in-out .out .name {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #020204;
}
.commentary .items .item .in-out .in span,
.commentary .items .item .in-out .out span {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}
.commentary .items .item .in-out .in span {
    color: #1db57a;
}
.commentary .items .item .in-out .out span {
    color: #df2c2c;
}
.commentary .items .item .desc {
    color: #fff;
}
.commentary .items .item .left .time {
     color: #B6BAC3;
 }




.table-common .top {
    display: flex;
    justify-content: space-between;
}
.table-common .top .icon {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #dedede;
    display: none;
    transition: opacity 0.3s;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.table-common .top .icon img {
    line-height: 32px;
}
.table-common .top .icon img:last-child {
    display: none;
}
.table-common .top .icon.show {
    display: flex;
}
.table-common .top .icon.active {
    background: #1d8fff;
}
.table-common .top .icon.active img:last-child {
    display: block;
}
.table-common .top .icon.active img:first-child {
    display: none;
}


.table-common table {
    border-collapse: separate;
    border: 1px solid #2E3340;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}
.table-common table .th-img {
    width: 20px;
    height: 20px;
}
.table-common table tr.red th,
.table-common table tr.red td {
    background: rgba(225, 36, 59, 0.1019607843);
}
.table-common table tr.blue th,
.table-common table tr.blue td {
    background: rgba(29, 143, 255, 0.1019607843);
}
.table-common table tr th,
.table-common table tr td {
    min-width: 40px;
}
.table-common table tr th:first-child,
.table-common table tr td:first-child {
    padding-left: 16px;
}
.table-common table tr th:nth-child(5), .table-common table tr th:last-child,
.table-common table tr td:nth-child(5),
.table-common table tr td:last-child {
    padding-right: 16px;
}
.table-common table thead {
    position: relative;
}
.table-common table thead::after {
    content: "";
    position: absolute;
    width: calc(100% + 2px);
    bottom: 0;
    height: 1px;
    left: -1px;
    background: #2E3340;
}
.table-common table thead th {
    padding: 10px 0;
}
.table-common table thead th:nth-child(1), .table-common table thead th:nth-child(2) {
    text-align: left;
}
.table-common table thead th:nth-child(2) {
    width: 100%;
}
.table-common table thead th:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.table-common table tbody tr td:nth-child(3), .table-common table tbody tr td:nth-child(4) {
    color: #fff;
}
.table-common table tbody tr td:first-child span {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #e1243b;
    color: #e1243b;
}
.table-common table tbody td {
    padding-top: 8px;
    padding-bottom: 8px;
}
.table-common table th {
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-grey-v1);
}
.table-common table td {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: var(--color-grey-v1);
    padding: 6px;
}
.table-common table td:first-child {
    padding-left: 0;
}
.table-common table td:last-child {
    padding-right: 0;
}
.table-common table td .team {
    display: flex;
    align-items: center;
    gap: 4px;
}
.table-common table td .team .flag {
    width: 20px;
    height: 20px;
    line-height: 18px;
}
.table-common table.active tr th:nth-child(3), .table-common table.active tr th:nth-child(4), .table-common table.active tr th:nth-child(5),
.table-common table.active tr td:nth-child(3),
.table-common table.active tr td:nth-child(4),
.table-common table.active tr td:nth-child(5) {
    display: none;
}
.table-common table.active tr th:nth-child(6),
.table-common table.active tr td:nth-child(6) {
    display: table-cell;
}

.standings-data {
    display: none;
}

.standings-data.active {
    display: block;
}
.item-result {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
}
.item-result.w {
    background: #1db57a;
}
.item-result.d {
    background: var(--text-grey-v1);
}
.item-result.l {
    background: #e1243b;
}
.large-score {
    border-radius: 8px;
    border: 1px solid #222837;
    background: #161920;
    display: flex;
}
.large-score .score-team {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}
.large-score span:first-child {
    border-right: 1px solid #222837;
}
.large-score.win span:first-child, .large-score.lose span:last-child {
    color: var(--color-yellow-v1);
}
.table-common table tbody .td-recent {
    display: flex;
    align-items: center;
    gap: 6px;
}
.table-common table tbody .td-recent .item {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.table-common table tbody .td-recent .item.bg-red {
    background-color: #E1243B;
}
.table-common table tbody .td-recent .item.bg-green {
    background-color: #1DB57A;
}
.table-common table tbody .td-recent .item.bg-grey-2 {
    background-color: #B4B4B4;
}


.chart-wrapper {
    padding: 10px;
    position: relative;
}
.chart-container {
    position: relative;
    width: 100%;
    height: 80px;
}
canvas {
    width: 100%;
    height: 100%;
}
.team-logo {
    position: absolute;
    width: 16px;
    height: 16px;
}
.chart-home-logo {
    top: 20px;
    left: 5px;
}
.chart-away-logo {
    top: 90px;
    left: 5px;
}
.time-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 0 55px;
    margin-top: 5px;
    color: #777;
    font-size: 14px;
}
.chart-time {
    position: absolute;
    top: 85px;
    left: 20px;
}
.row-bg {
    padding: 12px;
    border-radius: 8px;
    background-color: #FFFFFF0A;
}
.custom-modal .modal-content {
    background-color: #0E0F13;
}
.custom-modal .modal-header {
    padding: 14px 16px;
    border-bottom: none;
    color: white;
}
.custom-modal .btn-close {
    background: url("/themes/default/images/icons/x-button.svg");
    background-repeat: no-repeat;
    background-position: center;
}
.custom-modal .modal-body {
    padding-top: 0;
    flex-direction: column;
}
.custom-modal .modal-body-search {
    width: 100%;
}
.custom-modal .modal-body-search input {
    width: 100%;
}
.custom-modal .modal-body-tabs {
    width: 100%;
    padding: 4px 0;
}
.custom-modal .modal-body .title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #6b6f73;
    margin: 8px 0;
}
.custom-modal .modal-body .info {
    width: 100%;
}
.custom-modal .modal-body .flag {
    width: 40px;
    min-width: 40px;
    height: 40px;
    line-height: 36px;
}
.custom-modal .modal-body .icon {
    width: 16px;
    height: 16px;
    line-height: 14px;
}
.custom-modal .modal-body .name {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #020204;
    margin-bottom: 8px;
}
.custom-modal .modal-body .tags {
    width: 100%;
    display: inline-flex;
    gap: 24px;
}
.custom-modal .modal-body .tag {
    display: inline-flex;
    gap: 8px;
}
.custom-modal .modal-body .tag span {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #6b6f73;
}
.custom-modal .modal-body .list ul li a {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.custom-modal .modal-body .list ul li:not(:last-child) {
    border-bottom: 1px solid #262A34;
}
.custom-modal .modal-body .category a {
    justify-content: start;
}
.custom-modal .modal-body .category .title {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
}
.custom-modal .modal-body .category .title .flag {
    width: 24px;
    min-width: 0;
    max-width: 24px;
    height: 24px;
    line-height: 22px;
}
.custom-modal .modal-body .category .item.type-1 {
    padding: 8px 0;
}
.custom-modal .modal-body .category .item.type-1 .flag {
    width: 24px;
    height: 24px;
    min-width: 24px;
    line-height: 22px;
}

.search {
    height: 40px;
    padding: 0px 16px;
    border-radius: 25px;
    background-color: #15171D;
    gap: 8px;
}
.search input {
    color: var(--color-brow-v5);
    background-color: transparent;
    border: none;
    outline: none;
}
.search .search-icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
}


.dropdown-menu-language, .dropdown-sport-type {
    background-color: #1D2028;
    width: 136px;
    padding: 0;
    overflow: hidden;
}
.dropdown-menu-language .dropdown-item, .dropdown-sport-type .dropdown-item {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    font-size: 16px;
    color: var(--color-grey-v1);
    transition: background-color .3s ease;
}
.dropdown-menu-language .dropdown-item.active,
.dropdown-menu-language .dropdown-item:hover,
.dropdown-sport-type .dropdown-item.active,
.dropdown-sport-type .dropdown-item:hover {
    background-color: var(--color-brown-v1);
}
.dropdown-sport-type .dropdown-item {
    padding: 8px;
    height: 40px;
    color: var(--color-brow-v5);
    font-size: 14px;
    justify-content: left !important;
}
.dropdown-sport-type {
    border: 1px solid #2E3340;
    padding: 8px 0;
}
.blue.space-nowrap.tab:hover, .blue.space-nowrap.tab.active {
    background: #1D8FFF14;
    border: 1px solid #1D8FFF !important;
    color: #1D8FFF;
}

.loading-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background: transparent;
    z-index:10;
}

.loading-spinner{
    width:30px;
    height:30px;
    border:3px solid #ddd;
    border-top:3px solid #3498db;
    border-radius:50%;
    animation:spin .8s linear infinite;
}
.loading-opacity .loading-overlay {
    background-color: rgba(21, 23, 29, 0.9);
}

.img-ratio {
    aspect-ratio: 16 / 9;
    height: unset !important;
}
.img-ratio-3-2 {
    aspect-ratio: 3 / 2;
    height: unset !important;
}

.btn-news-category {
    padding: 12px;
    border-radius: 100px;
    background-color: #FFFFFF0A;
    white-space: nowrap;
    transition: background-color .3s ease;
    line-height: 28px !important;
    height: 28px;
    display: flex !important;
    align-items: center;
}
.block-line > div {
    border-bottom: 1px solid #262A34;
}
.block-line > div:last-child {
    border: none;
}

.detail {
    background: #15171D;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 12px;
}
.detail-head, .detail-body {
    padding: 16px;
}
.line-solid {
    border-bottom: 1px solid #2E3340;
    width: 100%;
    height: 1px;
}
.btn-see-more {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #1D8FFF14;
    color: #1D8FFF;
    border: none;
    border-radius: 200px;
    text-align: center;
    justify-content: center;
    transition: background-color .3s ease;
}
.btn-see-more:hover {
    background-color: rgba(29, 143, 255, .3);
}
.btn-dropdown-custom, .btn-dropdown-custom:hover, .btn-dropdown-custom:active {
    border-radius: 24px;
    border: 1px solid #262A34;
    height: 32px;
}
.dropdown-custom li .dropdown-item {
    height: 48px;
    line-height: 42px;
    align-items: center;
    box-sizing: border-box;
}

.circle-result {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #B6BAC3;
    font-size: 14px;
    font-weight: 400;
    border-radius: 50%;
    position: relative;
}
.circle-result.win {
    background-color: #1DB57A;
}
.circle-result.lose {
    background-color: #DF2C2C;
}
.circle-result:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
.circle-result.draw:before {
    content: "D";
}
.circle-result.win:before {
    content: "W";
}
.circle-result.lose:before {
    content: "L";
}
.card-border {
    border: 1px solid #2E3340;
}
.card-background {
    background-color: #15171D;
}
@keyframes spin{
    to{ transform:rotate(360deg); }
}

@keyframes upOdds {
    0% {
        background-color: #2ECC712E;
    }
    5% {
        background-color: #2ECC712E;
    }
    90% {
        background-color: #2ECC712E;
    }
    100% {
        background-color: #161920;
    }
}
@keyframes downOdds {
    0% {
        background-color: #FF475E2E;
    }
    5% {
        background-color: #FF475E2E;
    }
    90% {
        background-color: #FF475E2E;
    }
    100% {
        background-color: #161920;
    }
}

/*Responsive*/
@media (max-width: 1700px) and (min-width: 1440px) {
}
@media (max-width: 1600px) {
}
/*Responsive*/
@media (max-width: 1440px) {
    .sidebar-right {
        margin: 0 8px 8px 0;
    }
    .sidebar-right-fb, .sidebar-right-news {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
    }
}
@media (max-width: 1300px) {
    :root {
        --width-right: 0;
    }
    .sidebar-right-home {
        display: none;
    }
}