@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
.theme-light {
  --active-color: #56AC49;
  --active-bg: #D5E9D6;
  --bg-primary: #EAEFF4;
  --border-color: #D5DFE9;
  --common-box-body-bg: #FFFFFF;
  --common-box-header-bg: #F3F5F7;
  --common-box-header-bg-2: #F3F5F7;
  --form-item-bg: #FFFFFF;
  --filter-bg-color: #FFFFFF;
  --header-bg-color: #0E1C30;
  --header-main-bg-color: #FFFFFF;
  --header-main-border-color: #D5DFE9;
  --header-main-active-color: #56AC49;
  --header-item-bg-color: #1D4551;
  --header-text-color: #FFFFFF;
  --handbook-description-color: #575D68;
  --introduce-color: #29292C;
  --link-hover-color: #575d68;
  --match-bg: #FFFFFF;
  --match-time-color: #0066FF;
  --match-time-color-des: #575D68;
  --match-club-color: #575D68;
  --modal-btn-close-color: #29292C;
  --odd-color-down: #C86242;
  --odd-color-up: #0066FF;
  --odd-color-normal: #575D68;
  --pagination-border-color: #D5DFE9;
  --text-color: #29292C;
  --text-color-title: #29292C;
  --text-primary: #575D68;
  --text-primary-1: #575D68;
  --text-white: #FFFFFF;
  --text-description: #575D68;
  --text-placeholder: #949496;
  --rounder-btn: 6px;
  --site-bg-1: white;
  --site-bg-2: #EAEFF4;
  --standing-btn-color: #FFFFFF;
  --statistics-color: #575D68;
  --statistics-item-bg: #D5DFE9;
  --statistics-progress-bar: #1E4880;
  --scrolling-color: #D5DFE9; }

.theme-dark {
  --active-color: #56AC49;
  --active-bg: #1F242A;
  --bg-primary: #121212;
  --border-color: #252E3A;
  --common-box-body-bg: #121212;
  --common-box-header-bg: #0E2830;
  --common-box-header-bg-2: #1F242A;
  --form-item-bg: #1D1D1D;
  --filter-bg-color: #0E2830;
  --header-bg-color: #0E2830;
  --header-main-bg-color: #121212;
  --header-main-border-color: #252E3A;
  --header-main-active-color: #FFFFFF;
  --header-item-bg-color: #1D4551;
  --header-text-color: #EEEEEE;
  --handbook-description-color: #AAAAAA;
  --introduce-color: #AAAAAA;
  --link-hover-color: #575d68;
  --match-bg: #121212;
  --match-time-color: #5BC4FF;
  --match-time-color-des: #AAAAAA;
  --match-club-color: #AAAAAA;
  --modal-btn-close-color: #EEEEEE;
  --odd-color-down: #EC5F33;
  --odd-color-up: #3FBAFF;
  --odd-color-normal: #FFFFFF;
  --pagination-border-color: #252E3A;
  --text-color: #FFFFFF;
  --text-color-title: #EEEEEE;
  --text-primary: #EEEEEE;
  --text-primary-1: #FFFFFF;
  --text-white: #FFFFFF;
  --text-description: #AAAAAA;
  --text-placeholder: #EEEEEE;
  --rounder-btn: 6px;
  --site-bg-1: #1E1E1E;
  --site-bg-2: #121212;
  --standing-btn-color: #121212;
  --statistics-color: #FFFFFF;
  --statistics-item-bg: #252E3A;
  --statistics-progress-bar: #465467;
  --scrolling-color: #465467; }

body {
  font-family: "Manrope", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px; }

.xl-m-0 {
  margin: 0px !important; }

.xl-mt-0 {
  margin-top: 0px !important; }

.xl-ml-0 {
  margin-left: 0px !important; }

.xl-mb-0 {
  margin-bottom: 0px !important; }

.xl-mr-0 {
  margin-right: 0px !important; }

.xl-p-0 {
  padding: 0px !important; }

.xl-pt-0 {
  padding-top: 0px !important; }

.xl-pl-0 {
  padding-left: 0px !important; }

.xl-pb-0 {
  padding-bottom: 0px !important; }

.xl-pr-0 {
  padding-right: 0px !important; }

.xl-m-5 {
  margin: 5px !important; }

.xl-mt-5 {
  margin-top: 5px !important; }

.xl-ml-5 {
  margin-left: 5px !important; }

.xl-mb-5 {
  margin-bottom: 5px !important; }

.xl-mr-5 {
  margin-right: 5px !important; }

.xl-p-5 {
  padding: 5px !important; }

.xl-pt-5 {
  padding-top: 5px !important; }

.xl-pl-5 {
  padding-left: 5px !important; }

.xl-pb-5 {
  padding-bottom: 5px !important; }

.xl-pr-5 {
  padding-right: 5px !important; }

.xl-m-8 {
  margin: 8px !important; }

.xl-mt-8 {
  margin-top: 8px !important; }

.xl-ml-8 {
  margin-left: 8px !important; }

.xl-mb-8 {
  margin-bottom: 8px !important; }

.xl-mr-8 {
  margin-right: 8px !important; }

.xl-p-8 {
  padding: 8px !important; }

.xl-pt-8 {
  padding-top: 8px !important; }

.xl-pl-8 {
  padding-left: 8px !important; }

.xl-pb-8 {
  padding-bottom: 8px !important; }

.xl-pr-8 {
  padding-right: 8px !important; }

.xl-m-10 {
  margin: 10px !important; }

.xl-mt-10 {
  margin-top: 10px !important; }

.xl-ml-10 {
  margin-left: 10px !important; }

.xl-mb-10 {
  margin-bottom: 10px !important; }

.xl-mr-10 {
  margin-right: 10px !important; }

.xl-p-10 {
  padding: 10px !important; }

.xl-pt-10 {
  padding-top: 10px !important; }

.xl-pl-10 {
  padding-left: 10px !important; }

.xl-pb-10 {
  padding-bottom: 10px !important; }

.xl-pr-10 {
  padding-right: 10px !important; }

.xl-m-12 {
  margin: 12px !important; }

.xl-mt-12 {
  margin-top: 12px !important; }

.xl-ml-12 {
  margin-left: 12px !important; }

.xl-mb-12 {
  margin-bottom: 12px !important; }

.xl-mr-12 {
  margin-right: 12px !important; }

.xl-p-12 {
  padding: 12px !important; }

.xl-pt-12 {
  padding-top: 12px !important; }

.xl-pl-12 {
  padding-left: 12px !important; }

.xl-pb-12 {
  padding-bottom: 12px !important; }

.xl-pr-12 {
  padding-right: 12px !important; }

.xl-m-15 {
  margin: 15px !important; }

.xl-mt-15 {
  margin-top: 15px !important; }

.xl-ml-15 {
  margin-left: 15px !important; }

.xl-mb-15 {
  margin-bottom: 15px !important; }

.xl-mr-15 {
  margin-right: 15px !important; }

.xl-p-15 {
  padding: 15px !important; }

.xl-pt-15 {
  padding-top: 15px !important; }

.xl-pl-15 {
  padding-left: 15px !important; }

.xl-pb-15 {
  padding-bottom: 15px !important; }

.xl-pr-15 {
  padding-right: 15px !important; }

.xl-m-20 {
  margin: 20px !important; }

.xl-mt-20 {
  margin-top: 20px !important; }

.xl-ml-20 {
  margin-left: 20px !important; }

.xl-mb-20 {
  margin-bottom: 20px !important; }

.xl-mr-20 {
  margin-right: 20px !important; }

.xl-p-20 {
  padding: 20px !important; }

.xl-pt-20 {
  padding-top: 20px !important; }

.xl-pl-20 {
  padding-left: 20px !important; }

.xl-pb-20 {
  padding-bottom: 20px !important; }

.xl-pr-20 {
  padding-right: 20px !important; }

.main {
  margin-top: 20px; }

@media only screen and (max-width: 576px) {
  .main {
    margin-top: 15px; } }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color-title); }

.title {
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
  margin-bottom: 20px; }

a {
  text-decoration: none;
  color: var(--text-primary); }

.columm-gap {
  display: flex;
  flex-direction: column;
  gap: 20px; }

.xl-btn {
  border-radius: var(--rounder-btn);
  color: var(--text-primary);
  background-color: var(--filter-bg-color);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: calc(16 / 12);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  border: 0; }

.page-data {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  --sidebar-width: 262px; }
  .page-data__356px {
    --sidebar-width: 356px; }
  .page-data__sidebar {
    width: var(--sidebar-width); }
    .page-data__sidebar.sidebar-columm {
      display: flex;
      flex-direction: column;
      gap: 20px; }
  .page-data__content {
    width: calc(100% - var(--sidebar-width) - 20px); }
    .page-data__content-100 {
      width: 100%; }
    .page-data__content-50 {
      width: calc((100% - 20px) / 2); }
  .page-data__column {
    display: flex;
    flex-direction: column;
    gap: 20px; }
  @media only screen and (max-width: 992px) {
    .page-data {
      --sidebar-width: 250px; }
      .page-data__356px {
        --sidebar-width: 300px; } }
  @media only screen and (max-width: 768px) {
    .page-data {
      flex-wrap: wrap; }
      .page-data__sidebar {
        width: 100%; }
      .page-data__content {
        width: 100%; }
        .page-data__content-sm-100 {
          width: 100%; }
      .page-data__column {
        gap: 15px; }
      .page-data .sm-order-1 {
        order: 1; }
      .page-data .sm-order-2 {
        order: 2; } }

::-webkit-scrollbar-track {
  background-color: #f5f5f5; }

::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
  border-radius: 2.5px; }

::-webkit-scrollbar-thumb {
  background-color: var(--scrolling-color); }

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-weight: normal; }
  .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
    .custom-checkbox input:checked ~ .checkmark:after {
      display: block; }
  .custom-checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid var(--border-color); }
    .custom-checkbox .checkmark:after {
      content: "";
      position: absolute;
      display: none;
      left: 7px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: solid var(--active-color);
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }

.no-data {
  padding: 20px;
  text-align: center; }
  .no-data img,
  .no-data svg {
    height: 120px;
    width: 120px; }
  .no-data h4 {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 16px;
    color: var(--text-primary); }

.common-box {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--match-bg);
  overflow: hidden;
  --pd-item: 15px 12px; }
  .common-box__header {
    padding: var(--pd-item);
    background-color: var(--common-box-header-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px; }
    .common-box__header-result {
      display: grid;
      align-items: center;
      grid-template-columns: 8fr 0.5fr 0.5fr 0.5fr 3fr;
      gap: 30px; }
      .common-box__header-result div {
        font-weight: 500;
        text-align: center; }
      .common-box__header-result .league {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px; }
        .common-box__header-result .league-top {
          display: flex;
          align-items: center;
          gap: 0 8px; }
          .common-box__header-result .league-top img {
            height: 28px; }
    .common-box__header h2 {
      margin-bottom: 0;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 14px;
      line-height: calc(20 / 14); }
    .common-box__header b {
      text-transform: capitalize; }
  .common-box__body {
    padding: 12px; }
  .common-box__list {
    list-style: none;
    margin: 0;
    padding: 0; }
    .common-box__list li {
      border-top: 1px solid var(--border-color);
      transition: background 0.2s ease; }
      .common-box__list li:first-child {
        border-top-color: transparent; }
      .common-box__list li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        padding: var(--pd-item);
        color: var(--text-color); }
      .common-box__list li img {
        max-width: 24px;
        display: block; }
      .common-box__list li.active a {
        font-weight: 700;
        background-color: var(--common-box-header-bg);
        opacity: 0.8; }
  .common-box__introduce li a {
    color: var(--introduce-color); }
  @media only screen and (max-width: 992px) {
    .common-box__header-result {
      grid-template-columns: 4fr 0.5fr 0.5fr 0.5fr;
      gap: 15px; } }
  @media only screen and (max-width: 576px) {
    .common-box {
      --pd-item: 12px; }
      .common-box__header-result .league {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px; }
        .common-box__header-result .league-name {
          margin-left: 28px; } }

.tab-btn {
  display: flex;
  align-items: center;
  justify-content: Start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  max-width: 100%;
  overflow: scroll; }
  .tab-btn::-webkit-scrollbar {
    display: none; }
  .tab-btn__item {
    display: flex;
    align-items: center;
    justify-content: Start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    border-radius: 6px;
    color: var(--text-primary);
    background-color: var(--common-box-header-bg);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap; }
    .tab-btn__item.active {
      background-color: var(--active-color);
      color: var(--text-white); }

.standing-btn {
  height: 24px;
  width: 24px;
  border-radius: 4px;
  border: none;
  color: var(--standing-btn-color);
  font-weight: 700;
  background-color: #56AC49;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  text-transform: uppercase; }
  .standing-btn__list {
    display: flex;
    gap: 0 10px;
    justify-content: center; }
  .standing-btn__d {
    background-color: #FF8A00; }
  .standing-btn__l {
    background-color: #BF3D3D; }

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: Start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 10px;
  margin-bottom: 20px; }
  .breadcrumb__item {
    position: relative; }
    .breadcrumb__item::before {
      position: absolute;
      top: 10px;
      right: 0;
      content: "";
      height: 5px;
      width: 5px;
      border-left: 1px solid var(--text-description);
      border-top: 1px solid var(--text-description);
      transform: rotate(135deg) translate(0); }
    .breadcrumb__item a {
      color: var(--active-color);
      padding-right: 10px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 500; }
    .breadcrumb__item:last-child::before {
      border: none; }
    .breadcrumb__item:last-child a {
      color: var(--text-description);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; }

.comment {
  padding: 12px; }
  .comment__number {
    color: var(--active-color); }
  .comment__top {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .comment__sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    font-size: 13px; }
    .comment__sort select {
      margin-left: 12px;
      background-color: var(--form-item-bg);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 5px;
      width: 100px;
      font-size: 13px; }
  .comment__textarea {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 0 20px; }
    .comment__textarea img {
      width: 48px;
      height: 48px; }
    .comment__textarea textarea {
      width: calc(100% - 48px - 20px);
      height: 68px;
      background-color: var(--form-item-bg);
      border: 1px solid var(--border-color);
      font-size: 13px; }
      .comment__textarea textarea::placeholder {
        color: var(--text-placeholder); }
  .comment__list {
    margin-top: 20px; }
  .comment__item {
    display: flex;
    justify-content: space-between; }
  .comment__user-avatar img {
    width: 48px;
    height: 48px; }
  .comment__content {
    width: calc(100% - 48px - 20px); }
    .comment__content .c-name {
      font-weight: 700; }
  .comment__action {
    display: flex;
    font-size: 12px;
    font-weight: 500;
    gap: 0 10px;
    margin-top: 8px; }
    .comment__action .comment__like,
    .comment__action .comment__reply {
      color: var(--active-color); }
    .comment__action .comment__time {
      color: #949496; }
    .comment__action .comment__reply::before,
    .comment__action .comment__time::before {
      content: "•";
      color: var(--text-primary);
      padding-right: 2px; }

.filter {
  --rounder-btn: 6px; }
  .filter__container {
    gap: 40px; }
  .filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap; }
  .filter-tab, .filter-tab__item {
    display: flex;
    align-items: center;
    justify-content: Start;
    flex-direction: row;
    flex-wrap: nowrap; }
  .filter-tab {
    gap: 12px;
    max-width: 100%;
    overflow: scroll; }
    .filter-tab::-webkit-scrollbar {
      display: none; }
    .filter-tab__item {
      gap: 9px;
      border-radius: var(--rounder-btn);
      color: var(--text-primary);
      background-color: var(--filter-bg-color);
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      line-height: calc(16 / 12);
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.2s ease;
      white-space: nowrap; }
      .filter-tab__item.active {
        background-color: var(--active-color);
        color: var(--text-white); }
      .filter-tab__item b {
        font-weight: 700; }
      .filter-tab__item:hover {
        opacity: 0.8; }
  .filter-dropdown {
    max-width: 200px;
    width: 100%;
    background-color: var(--filter-bg-color);
    border-radius: var(--rounder-btn);
    position: relative; }
    .filter-dropdown__selected {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 8px 12px;
      cursor: pointer;
      user-select: none; }
      .filter-dropdown__selected span {
        color: var(--text-primary);
        font-size: 12px;
        font-weight: 600;
        line-height: calc(16 / 12);
        text-transform: uppercase;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        padding-right: 6px; }
    .filter-dropdown__list {
      background-color: var(--filter-bg-color);
      list-style: none;
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      flex-direction: column;
      flex-wrap: nowrap;
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      width: 100%;
      border-radius: var(--rounder-btn);
      overflow: hidden;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      padding: 0;
      margin: 0;
      z-index: 1; }
      .filter-dropdown__list li {
        font-size: 12px;
        color: var(--text-primary);
        padding: 8px 12px;
        display: inline-block;
        cursor: pointer;
        transition: all 0.2s ease; }
        .filter-dropdown__list li:hover {
          background-color: var(--active-color);
          color: white; }
        .filter-dropdown__list li.active {
          font-weight: 600; }
  @media only screen and (max-width: 576px) {
    .filter__container {
      display: block; }
    .filter-tab {
      max-width: calc(100% + 30px);
      margin-left: -15px;
      margin-right: -15px;
      padding-left: 15px; }
    .filter-dropdown {
      max-width: 100%;
      margin-top: 15px; } }

.common-modal .modal-content {
  background-color: var(--common-box-header-bg); }
  .common-modal .modal-content .modal-header {
    border-color: var(--border-color); }
    .common-modal .modal-content .modal-header .modal-title {
      font-size: 24px;
      color: var(--text-color); }
    .common-modal .modal-content .modal-header .m-btn-close,
    .common-modal .modal-content .modal-header .m-btn-close:hover {
      color: var(--modal-btn-close-color);
      background-color: transparent;
      border: 0;
      outline: 0;
      font-size: 18px;
      font-weight: 100; }

#countryModal .modal-dialog {
  --bs-modal-width: 555px; }

.country {
  padding: 0; }
  .country-tab {
    display: flex;
    align-items: center;
    justify-content: Start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    max-width: 100%;
    overflow: scroll;
    border-bottom: 1px solid var(--border-color);
    padding: 12px; }
    .country-tab::-webkit-scrollbar {
      display: none; }
    .country-tab-item {
      border-bottom: 2px solid transparent;
      cursor: pointer;
      font-weight: 600;
      text-transform: uppercase;
      padding: 6px; }
      .country-tab-item.active {
        border-color: var(--active-color); }
  .country-list {
    padding: 0 12px;
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 400px;
    overflow: auto; }
    .country-list .custom-checkbox {
      margin-bottom: 6px; }
  .country-action {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-color); }
    .country-action button {
      color: var(--text-primary);
      background-color: var(--bg-primary);
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center; }
      .country-action button .custom-checkbox {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 22px; }
      .country-action button.active, .country-action button:hover {
        background-color: var(--active-color);
        color: var(--text-white); }

.setting {
  padding: 0; }
  .setting h4 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px; }
  .setting .rate {
    border-bottom: 1px solid var(--border-color);
    padding: 12px; }
    .setting .rate-list {
      display: flex;
      justify-content: space-between; }
  .setting .preferences {
    padding: 12px; }
    .setting .preferences-list {
      list-style: none;
      padding: 0; }
      .setting .preferences-list li {
        margin-bottom: 7px; }
        .setting .preferences-list li > div {
          color: var(--text-primary);
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: 20px; }
        .setting .preferences-list li select {
          background-color: var(--form-item-bg);
          border: 1px solid var(--border-color);
          border-radius: 2px;
          box-sizing: border-box;
          color: var(--text-primary);
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px;
          padding: 6px 10px;
          width: 100%; }
      .setting .preferences-list .switch {
        align-items: center;
        color: var(--text-primary);
        cursor: pointer;
        display: flex;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        justify-content: space-between;
        line-height: 20px; }
        .setting .preferences-list .switch .switch-style {
          background: #5e646f;
          border-radius: 666.667px;
          cursor: pointer;
          display: inline-block;
          height: 16px;
          position: relative;
          transition: all 0.3s ease-in-out;
          width: 32px; }
          .setting .preferences-list .switch .switch-style:before {
            background-color: #fff;
            border-radius: 50%;
            content: "";
            display: block;
            height: 10.67px;
            left: 0.2em;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all 0.3s ease-in-out;
            width: 10.67px; }
        .setting .preferences-list .switch > input[type="checkbox"]:checked + .switch-style {
          background-color: var(--active-color); }
          .setting .preferences-list .switch > input[type="checkbox"]:checked + .switch-style:before {
            left: 57%; }
      .setting .preferences-list input {
        display: none; }

.common-pagination {
  display: flex;
  justify-content: center;
  gap: 0 10px;
  border-top: 1px solid var(--pagination-border-color);
  margin-bottom: 0;
  padding-left: 0;
  padding-top: 20px;
  list-style: none; }
  .common-pagination li a {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--text-description);
    font-size: 13px; }
    .common-pagination li a svg {
      width: 12px;
      height: 12px; }
  .common-pagination li.active a {
    background-color: var(--active-color);
    color: var(--text-white); }
  @media only screen and (max-width: 576px) {
    .common-pagination {
      padding-top: 15px; } }

.header-top {
  background-color: var(--header-bg-color);
  padding: 12px 0; }
  .header-top__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap; }
  .header-top__logo {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 5px; }
    .header-top__logo img {
      height: 40px; }

@-webkit-keyframes shine {
  to {
    left: 150%; } }

@keyframes shine {
  to {
    left: 150%; } }
  .header-top__menu ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin-bottom: 0; }
    .header-top__menu ul li a {
      text-decoration: none;
      color: var(--header-text-color);
      font-weight: 700;
      font-size: 14px;
      line-height: calc(20 / 14);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 100px;
      background-color: var(--header-item-bg-color);
      padding: 6px 12px;
      transition: color 0.2s ease; }
      .header-top__menu ul li a:hover {
        color: var(--link-hover-color); }
      .header-top__menu ul li a img {
        max-width: 16px;
        display: block; }
  .header-top__menu .toggle-theme {
    position: relative;
    cursor: pointer;
    border-radius: 100px;
    background-color: var(--header-item-bg-color);
    padding-left: 12px;
    padding-right: 12px; }
    .header-top__menu .toggle-theme div {
      display: flex;
      align-items: center;
      height: 32px; }
    .header-top__menu .toggle-theme .toggle-theme-icon {
      border-radius: 54px;
      background: var(--active-color);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute; }
    .header-top__menu .toggle-theme .toggle-theme-txt {
      color: var(--header-text-color);
      font-weight: 700; }
    .header-top__menu .toggle-theme .light {
      padding-right: 30px; }
      .header-top__menu .toggle-theme .light .toggle-theme-icon {
        top: 0;
        right: 0; }
    .header-top__menu .toggle-theme .dark {
      padding-left: 30px; }
      .header-top__menu .toggle-theme .dark .toggle-theme-icon {
        top: 0;
        left: 0; }

.header-main {
  border-bottom: 1px solid var(--header-main-border-color);
  background-color: var(--header-main-bg-color); }
  .header-main__list {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0 42px;
    flex-wrap: wrap; }
    .header-main__list li a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: row;
      flex-wrap: nowrap;
      text-decoration: none;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
      line-height: calc(24 / 14);
      text-transform: uppercase;
      gap: 8px;
      transition: all 0.2s linear;
      position: relative;
      padding: 21px 0; }
      .header-main__list li a.active,
      .header-main__list li a.active path,
      .header-main__list li a:hover path, .header-main__list li a:hover {
        fill: var(--header-main-active-color);
        color: var(--header-main-active-color); }
      .header-main__list li a.active:after, .header-main__list li a:hover:after {
        visibility: visible;
        opacity: 1;
        transition: all 0.4s linear;
        width: 100%; }
      .header-main__list li a:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: var(--active-color);
        height: 2px;
        width: 0;
        visibility: hidden;
        opacity: 0; }

.header .sm-menu {
  display: none; }

@media only screen and (max-width: 992px) {
  .header-top {
    padding: 15px 0; }
    .header-top__menu ul {
      gap: 10px; }
  .header-main__list {
    gap: 0 20px; }
    .header-main__list li a {
      padding: 15px 0; } }

@media only screen and (max-width: 576px) {
  .header-top {
    padding: 10px 0; }
    .header-top__menu .list-icon {
      display: flex;
      gap: 0 30px; }
      .header-top__menu .list-icon svg {
        height: 20px; }
  .header__logo img {
    height: 26px; }
  .header-main {
    display: none; }
  .header .sm-menu {
    display: block;
    transition: all 0.5s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -400px;
    z-index: 1001;
    width: 100%;
    max-width: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    background: url("../../images/bg-menu-sm.png"), var(--header-bg-color);
    background-repeat: no-repeat;
    background-size: 100% 100%; }
    .header .sm-menu .sm-menu-head {
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      height: 56px;
      padding-left: 15px;
      padding-right: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
    .header .sm-menu .head-left {
      height: 100%;
      display: flex;
      align-items: center; }
      .header .sm-menu .head-left .logo img {
        width: auto;
        height: 26px; }
    .header .sm-menu ul.m-sm {
      display: block;
      padding: 0;
      margin-top: 15px;
      margin-bottom: 0; }
      .header .sm-menu ul.m-sm li {
        display: block;
        padding-left: 15px; }
        .header .sm-menu ul.m-sm li a {
          padding: 12px 0;
          display: flex;
          align-items: center;
          width: 100%;
          color: #AAAAAA;
          font-size: 16px;
          text-decoration: none;
          text-transform: uppercase;
          font-weight: 600; }
          .header .sm-menu ul.m-sm li a svg {
            margin-right: 15px; }
          .header .sm-menu ul.m-sm li a.active,
          .header .sm-menu ul.m-sm li a.active path,
          .header .sm-menu ul.m-sm li a:hover path, .header .sm-menu ul.m-sm li a:hover {
            fill: var(--active-color);
            color: var(--active-color); }
        .header .sm-menu ul.m-sm li.sm-menu-user {
          border-top: 1px solid rgba(255, 255, 255, 0.1); }
        .header .sm-menu ul.m-sm li.toggle-theme {
          padding-left: 0; }
          .header .sm-menu ul.m-sm li.toggle-theme div {
            display: flex;
            align-items: center;
            padding: 15px 0 15px 15px;
            color: white;
            text-transform: uppercase;
            font-weight: 600; }
          .header .sm-menu ul.m-sm li.toggle-theme .toggle-theme-icon {
            order: 1;
            margin-right: 15px; }
          .header .sm-menu ul.m-sm li.toggle-theme .toggle-theme-txt {
            order: 2; }
          .header .sm-menu ul.m-sm li.toggle-theme .light {
            background: var(--active-color); }
          .header .sm-menu ul.m-sm li.toggle-theme .dark {
            background: #1D4551; }
  .header.open .sm-menu {
    left: 0px; } }

.match {
  --pd-item: 15px 12px;
  margin-top: 20px; }
  .match-league {
    display: flex;
    align-items: center;
    gap: 8px; }
    .match-league-logo {
      height: 24px; }
    .match-league-name {
      line-height: 20px; }
  .match-team {
    display: flex;
    gap: 8px;
    align-items: center; }
    .match-team-logo {
      height: 24px; }
    .match-team-name {
      color: var(--text-description);
      font-weight: 600; }
  .match-text {
    font-size: 14px;
    font-weight: 600;
    line-height: calc(20 / 14); }
    .match-text--bold {
      text-transform: uppercase;
      font-weight: 700; }
  .match-table__list {
    border: 1px solid var(--border-color);
    background-color: var(--match-bg);
    border-radius: 12px; }
  .match-table__item {
    padding: 12px;
    border-bottom: 1px solid var(--border-color); }
    .match-table__item:last-child {
      border-bottom-width: 0; }
  .match-table:not(:last-child) {
    margin-bottom: 20px; }
  .match-row {
    display: grid;
    align-items: center;
    gap: 30px; }
    .match-row__box {
      grid-template-columns: 3fr 0.5fr 2fr 0.5fr; }
    .match-row__box-result {
      grid-template-columns: 6fr 0.5fr 0.5fr 0.5fr 3fr; }
      .match-row__box-result div {
        text-align: center; }
    .match-row__list {
      grid-template-columns: 3.5fr 1fr 1fr; }
    .match-row:not(:last-child) {
      border-bottom: 1px solid #d5dfe9; }
  .match-column__col {
    display: flex;
    flex-direction: column;
    gap: 10px; }
  .match-column__detail {
    display: grid;
    align-items: center;
    gap: 20px;
    grid-template-columns: 125px 1fr; }
    .match-column__detail-result {
      grid-template-columns: 170px 1fr; }
    .match-column__detail-schedules {
      display: grid;
      gap: 15px;
      grid-template-columns: 2fr 100px 2fr; }
  .match-column__club {
    display: flex;
    flex-direction: column;
    gap: 10px; }
    .match-column__club-name {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--match-club-color); }
      .match-column__club-name img {
        height: 30px;
        width: 30px;
        object-fit: contain; }
  .match-column__btn {
    color: var(--text-primary);
    background-color: var(--common-box-header-bg);
    font-size: 12px;
    font-style: normal;
    text-decoration: none;
    padding: 5px 12px;
    font-weight: 700;
    line-height: calc(18 / 12);
    border-radius: 100rem;
    transition: opacity 0.2s ease;
    float: right; }
    .match-column__btn.active {
      background-color: var(--active-color);
      color: white; }
    .match-column__btn:hover {
      opacity: 0.8; }
  .match-time {
    display: flex;
    flex-shrink: 0;
    gap: 6px; }
    .match-time b {
      color: #FF8A00;
      margin-left: 6px;
      font-weight: 600; }
    .match-time span {
      color: var(--match-time-color); }
    .match-time .des {
      color: var(--match-time-color-des);
      margin-left: 20px; }
  .match-detail .league-team {
    background-color: var(--common-box-header-bg);
    margin: 12px;
    border-radius: 12px;
    padding: 20px; }
    .match-detail .league-team .league {
      text-align: center;
      font-size: 13px;
      color: var(--text-color-title); }
      .match-detail .league-team .league img {
        height: 20px;
        margin-right: 6px; }
    .match-detail .league-team .team {
      display: flex;
      margin-top: 12px;
      align-items: center; }
      .match-detail .league-team .team .result {
        width: 120px;
        text-align: center; }
        .match-detail .league-team .team .result .score {
          font-size: 20px;
          font-weight: 700;
          color: var(--text-color-title); }
        .match-detail .league-team .team .result .score-text {
          font-size: 13px; }
        .match-detail .league-team .team .result .play-time {
          font-size: 16px;
          color: var(--active-color);
          font-weight: bold; }
      .match-detail .league-team .team .team-name {
        width: calc((100% - 120px) / 2);
        color: var(--text-color-title); }
        .match-detail .league-team .team .team-name img {
          height: 40px; }
      .match-detail .league-team .team .team-home {
        text-align: right; }
        .match-detail .league-team .team .team-home img {
          margin-left: 12px; }
      .match-detail .league-team .team .team-away {
        text-align: left; }
        .match-detail .league-team .team .team-away img {
          margin-right: 12px; }
    @media only screen and (max-width: 992px) {
      .match-detail .league-team {
        padding: 12px; }
        .match-detail .league-team .result {
          width: 80px; }
        .match-detail .league-team .team-name {
          width: calc((100% - 80px) / 2); } }
    @media only screen and (max-width: 576px) {
      .match-detail .league-team {
        background-color: transparent;
        padding: 0;
        margin: 6px; }
        .match-detail .league-team .team .team-name {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: unset; }
          .match-detail .league-team .team .team-name img {
            order: 1;
            width: 40px;
            margin-bottom: 6px;
            margin: 0 auto 6px auto; }
          .match-detail .league-team .team .team-name span {
            order: 2;
            font-weight: 400;
            font-size: 13px; } }
  .match-detail .teambox-odds {
    font-size: 13px;
    overflow: unset; }
    .match-detail .teambox-odds .company {
      width: 124px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .match-detail .teambox-odds .company .site-img {
        width: 100px; }
      .match-detail .teambox-odds .company .dropdown-site button {
        border: none;
        background-color: transparent;
        color: var(--active-color);
        font-size: 13px; }
        .match-detail .teambox-odds .company .dropdown-site button svg {
          margin-left: 15px; }
      .match-detail .teambox-odds .company .dropdown-site .dropdown-menu {
        background-color: #fff;
        position: absolute;
        z-index: 10;
        top: 35px;
        left: 0px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        --bs-dropdown-min-width: 100%; }
        .match-detail .teambox-odds .company .dropdown-site .dropdown-menu li {
          width: 100%;
          border-bottom: 1px solid var(--border-color);
          box-sizing: border-box;
          cursor: pointer;
          padding: 5px 10px; }
          .match-detail .teambox-odds .company .dropdown-site .dropdown-menu li img {
            max-width: 100%;
            height: auto; }
          .match-detail .teambox-odds .company .dropdown-site .dropdown-menu li:last-child {
            border: none; }
    .match-detail .teambox-odds__item {
      display: flex;
      padding: 0;
      gap: 0; }
      .match-detail .teambox-odds__item .data {
        width: calc(100% - 124px); }
        .match-detail .teambox-odds__item .data-header {
          text-transform: uppercase;
          font-weight: 500; }
    .match-detail .teambox-odds__row {
      display: grid;
      grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr;
      text-align: center; }
      .match-detail .teambox-odds__row-border {
        border-bottom: 1px solid var(--border-color); }
      .match-detail .teambox-odds__row .odd-border {
        padding: 4px 0;
        border-left: 1px solid var(--border-color); }
      .match-detail .teambox-odds__row .odd-border-header {
        padding: 12px 0;
        border-left: 1px solid var(--border-color); }
      .match-detail .teambox-odds__row .odd-data {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; }
    .match-detail .teambox-odds__sm {
      display: none; }
    @media only screen and (max-width: 576px) {
      .match-detail .teambox-odds .company {
        width: 100%; }
        .match-detail .teambox-odds .company .site-img {
          height: 24px;
          width: auto; }
        .match-detail .teambox-odds .company .dropdown-site {
          width: 100%; }
          .match-detail .teambox-odds .company .dropdown-site button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0; }
          .match-detail .teambox-odds .company .dropdown-site .dropdown-menu li img {
            height: 26px; }
      .match-detail .teambox-odds__pc {
        display: none; }
      .match-detail .teambox-odds__sm {
        display: block; }
        .match-detail .teambox-odds__sm-row {
          display: grid;
          grid-template-columns: 2fr 1fr 4fr;
          text-align: center;
          border-bottom: 1px solid var(--border-color); }
          .match-detail .teambox-odds__sm-row:last-child {
            border-color: transparent; }
          .match-detail .teambox-odds__sm-row .column-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; }
        .match-detail .teambox-odds__sm-column {
          padding: 10px 5px; }
          .match-detail .teambox-odds__sm-column-border {
            border-right: 1px solid var(--border-color); }
          .match-detail .teambox-odds__sm-column.column-location {
            display: flex;
            justify-content: start;
            align-items: center;
            font-weight: 500;
            padding-left: 12px; }
          .match-detail .teambox-odds__sm-column.column-ft-ht {
            font-weight: 600; } }
  @media only screen and (max-width: 992px) {
    .match-row {
      grid-template-columns: 2.3fr 0.5fr 1fr;
      gap: 15px; }
      .match-row__box-result {
        grid-template-columns: 4fr 0.5fr 0.5fr 0.5fr; }
    .match-time .des {
      margin-left: 10px; } }
  @media only screen and (max-width: 576px) {
    .match-league-logo {
      height: 20px; }
    .match .top-league {
      display: none; }
    .match-table__list {
      border-radius: 6px; }
    .match-column__detail {
      grid-template-columns: 1fr; }
      .match-column__detail-schedules {
        grid-template-columns: 1fr; } }

.video__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.video__item {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: calc((100% - 20px) / 2);
  position: relative;
  margin-bottom: 20px;
  border-radius: 2px; }
  .video__item .image {
    overflow: hidden;
    max-height: 210px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 6px; }
    .video__item .image svg {
      position: absolute;
      left: 15px;
      bottom: 15px;
      z-index: 9; }
    .video__item .image .overlay {
      background: linear-gradient(90deg, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0) 100%);
      bottom: 0;
      content: "";
      height: 100%;
      position: absolute;
      transition: all 0.3s ease-in 0s;
      width: 100%;
      will-change: opacity; }
    .video__item .image:hover .overlay {
      opacity: 0; }
  .video__item .caption {
    margin-top: 8px; }
    .video__item .caption a {
      text-decoration: none;
      color: var(--text-color-title);
      font-weight: 500; }
  .video__item img {
    width: 100%;
    position: relative;
    display: block; }
  .video__item-full {
    width: 100%; }
    .video__item-full .image {
      max-height: 432px; }
      .video__item-full .image svg {
        bottom: 21px; }
      .video__item-full .image .caption-img {
        position: absolute;
        left: 60px;
        bottom: 21px;
        z-index: 9;
        color: white;
        font-weight: 700;
        font-size: 24px;
        line-height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical; }
  .video__item-sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 0; }
    .video__item-sidebar:first-child {
      border-top-width: 0; }
    .video__item-sidebar .image {
      max-height: 73px;
      width: 125px;
      border-radius: 4px; }
      .video__item-sidebar .image svg {
        width: 20px;
        height: 20px;
        left: 6px;
        bottom: 6px; }
    .video__item-sidebar .caption {
      width: calc(100% - 125px - 12px);
      margin-top: 0; }
      .video__item-sidebar .caption a {
        color: var(--text-primary); }

@media only screen and (max-width: 576px) {
  .video__item {
    width: 100%;
    margin-bottom: 15px; }
    .video__item .image svg {
      width: 24px;
      height: 24px; }
    .video__item-full {
      margin-top: -16px;
      margin-left: -15px;
      margin-right: -12px;
      width: calc(100% + 30px); }
      .video__item-full .image {
        border-radius: 0; }
        .video__item-full .image svg {
          bottom: 15px; }
        .video__item-full .image .caption-img {
          font-size: 16px;
          line-height: 24px;
          left: 45px;
          bottom: 15px; } }

.embed-responsive-iframe {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; }
  .embed-responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px; }
  @media only screen and (max-width: 576px) {
    .embed-responsive-iframe.simulation-iframe {
      padding-bottom: 100%; } }

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .embed-responsive::before {
    display: block;
    content: ""; }
  .embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }
  .embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }
  .embed-responsive embed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }
  .embed-responsive object {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.embed-responsive-21by9::before {
  padding-top: 42.85714%; }

.embed-responsive-16by9::before {
  padding-top: 56.25%; }

.embed-responsive-4by3::before {
  padding-top: 75%; }

.embed-responsive-1by1::before {
  padding-top: 100%; }

.odds__text-down {
  color: var(--odd-color-down);
  font-weight: 500; }

.odds__text-up {
  color: var(--odd-color-up);
  font-weight: 500; }

.odds__text-normal {
  color: var(--odd-color-normal);
  font-weight: 500; }

.odds__row {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr; }
  .odds__row div {
    text-align: center; }

.odds__date {
  width: 100%;
  text-align: left; }
  .odds__date .club {
    margin-bottom: 8px;
    font-weight: 500; }
    .odds__date .club img {
      margin-right: 6px;
      width: 20px; }
  .odds__date .time {
    margin-bottom: 8px;
    font-weight: 500; }
    .odds__date .time svg {
      margin-left: 2px;
      margin-right: 10px;
      width: 14px;
      height: 14px; }

.odds__team {
  width: 100%; }
  .odds__team .team-row {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .odds__team .time {
    color: #FF8A00;
    font-weight: 600; }
  .odds__team .team-name img {
    width: 20px;
    height: 20px;
    margin-right: 10px; }

.odds__score {
  font-weight: 700; }

.odds__1x2 div {
  margin-top: 4px; }
  .odds__1x2 div :last-child {
    margin-top: 0; }

.odds__hdp {
  width: 100%; }
  .odds__hdp .hdp-row {
    display: grid;
    align-items: center;
    gap: 5px;
    grid-template-columns: 1fr 1fr;
    width: 100%; }

.odds__ht-hdp {
  width: 100%; }
  .odds__ht-hdp .ht-hdp-row {
    display: grid;
    align-items: center;
    gap: 5px;
    grid-template-columns: 1fr 1fr;
    width: 100%; }

.odds__over-under {
  width: 100%; }
  .odds__over-under .over-under-row {
    display: grid;
    align-items: center;
    gap: 5px;
    grid-template-columns: 0.5fr 1fr 1.5fr;
    width: 100%; }

.odds .common-box__odds {
  margin-top: 20px;
  overflow: auto; }
  .odds .common-box__odds .common-box__header {
    display: block;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    min-width: 1090px; }
  .odds .common-box__odds .odds-table {
    font-size: 15px;
    min-width: 1090px; }
    .odds .common-box__odds .odds-table__item {
      padding: 0 12px;
      border-bottom: 1px solid var(--border-color); }
      .odds .common-box__odds .odds-table__item:last-child {
        border-bottom-width: 0; }
    .odds .common-box__odds .odds-table__row {
      display: grid;
      align-items: center;
      gap: 15px;
      grid-template-columns: 1.9fr 1.9fr 0.9fr 1.3fr 1.5fr 1.5fr 1.5fr 1.5fr; }
    .odds .common-box__odds .odds-table__column {
      height: 100%;
      padding: 12px 0;
      display: flex;
      justify-content: center;
      align-items: start; }
      .odds .common-box__odds .odds-table__column-border {
        border-right: 1px solid var(--border-color); }

@media only screen and (max-width: 576px) {
  .odds .common-box__odds .sm-hide {
    display: none; }
  .odds .common-box__odds .odds-table {
    font-size: 14px; } }

.handbook__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.handbook__item {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: calc((100% - 20px) / 2);
  position: relative;
  margin-bottom: 20px;
  border-radius: 2px; }
  .handbook__item .image {
    overflow: hidden;
    max-height: 210px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 6px; }
    .handbook__item .image .overlay {
      position: absolute;
      width: 100%;
      bottom: -1px;
      left: 0; }
      .handbook__item .image .overlay svg {
        width: 100%; }
  .handbook__item .caption {
    margin-top: 8px; }
    .handbook__item .caption p {
      margin-bottom: 0; }
    .handbook__item .caption a {
      text-decoration: none; }
      .handbook__item .caption a h3 {
        color: var(--text-primary);
        font-weight: 700;
        font-size: 15px; }
    .handbook__item .caption .c-description {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      margin-top: 6px;
      color: var(--handbook-description-color); }
    .handbook__item .caption .c-time {
      font-size: 13px;
      margin-top: 6px;
      color: var(--handbook-description-color);
      font-weight: 500; }
  .handbook__item img {
    width: 100%;
    position: relative;
    display: block; }
  .handbook__item-full {
    width: 100%; }
    .handbook__item-full .image {
      max-height: 432px; }
      .handbook__item-full .image .caption-img {
        position: absolute;
        left: 15px;
        bottom: 15px;
        z-index: 9; }
        .handbook__item-full .image .caption-img h3 {
          color: white;
          font-weight: 700;
          font-size: 24px;
          line-height: 34px;
          margin-bottom: 0; }
        .handbook__item-full .image .caption-img p {
          margin-bottom: 0;
          font-size: 13px;
          font-weight: 500;
          margin-top: 6px;
          color: var(--text-description); }
  .handbook__item-sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 0; }
    .handbook__item-sidebar:first-child {
      border-top-width: 0; }
    .handbook__item-sidebar .image {
      max-height: 73px;
      width: 125px;
      border-radius: 4px; }
    .handbook__item-sidebar .caption {
      width: calc(100% - 125px - 12px);
      margin-top: 0; }
      .handbook__item-sidebar .caption a h3 {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 0;
        color: var(--handbook-description-color);
        font-weight: 500; }
        .handbook__item-sidebar .caption a h3.line-clamp-2 {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: var(--text-primary); }
      .handbook__item-sidebar .caption a .c-time {
        color: var(--handbook-description-color);
        margin-top: 4px;
        font-weight: 500; }

.handbook-detail .author {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
  color: var(--text-description); }
  .handbook-detail .author img {
    height: 32px;
    width: 32px;
    margin-right: 5px;
    border-radius: 50%; }

.handbook-detail .content-data {
  color: var(--text-description);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color); }
  .handbook-detail .content-data h3 {
    font-size: 15px;
    line-height: 25px; }
  .handbook-detail .content-data img {
    width: 100%;
    margin-bottom: 20px; }

@media only screen and (max-width: 576px) {
  .handbook__item {
    width: 100%;
    margin-bottom: 15px; }
    .handbook__item-full {
      margin-top: -16px;
      margin-left: -15px;
      margin-right: -12px;
      width: calc(100% + 30px); }
      .handbook__item-full .image {
        border-radius: 0; }
        .handbook__item-full .image .caption-img h3 {
          font-size: 16px;
          line-height: 24px; }
  .handbook-detail .author {
    margin-bottom: 15px;
    padding-bottom: 15px; } }

.site-btn {
  background-color: var(--active-color);
  border: none;
  color: white;
  font-size: 12px;
  font-weight: 700;
  border-radius: 28px;
  padding: 2px 10px; }
  .site-btn svg {
    margin-left: 5px; }

.list-site-box {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  margin-top: 20px; }
  .list-site-box .site-item {
    margin-bottom: 40px;
    text-align: center; }
    .list-site-box .site-item .site-logo {
      position: relative; }
      .list-site-box .site-item .site-logo .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center; }
      .list-site-box .site-item .site-logo stop:first-child {
        stop-color: var(--site-bg-1); }
      .list-site-box .site-item .site-logo stop:last-child {
        stop-color: var(--site-bg-2); }
    .list-site-box .site-item h3 {
      font-size: 24px;
      line-height: 34px;
      font-weight: 700;
      margin-top: 12px; }
    .list-site-box .site-item .site-rating {
      font-size: 13px;
      font-weight: 500; }
    .list-site-box .site-item .site-btn {
      margin-top: 12px; }
  @media only screen and (max-width: 768px) {
    .list-site-box {
      grid-template-columns: auto auto; } }
  @media only screen and (max-width: 576px) {
    .list-site-box {
      grid-template-columns: auto; } }

.list-site .site-item {
  display: grid;
  grid-template-columns: 15px 84px 1fr 70px;
  padding: 12px;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  gap: 30px; }
  .list-site .site-item img {
    width: 100%; }
  .list-site .site-item .stt {
    color: #ED1053;
    font-size: 20px;
    font-weight: 700;
    padding-left: 12px; }
  .list-site .site-item .des {
    color: var(--text-description);
    font-weight: 600; }
  .list-site .site-item .s-btn {
    text-align: right; }

@media only screen and (max-width: 992px) {
  .list-site .site-item {
    grid-template-columns: 15px 70px 1fr 70px;
    gap: 15px; }
  .list-site .stt {
    padding-left: 6px; }
  .list-site .des {
    font-size: 13px; } }

@media only screen and (max-width: 576px) {
  .list-site .site-item {
    grid-template-columns: 15px 51px 1fr 70px;
    gap: 12px; }
    .list-site .site-item .stt {
      padding-left: 0; } }

.footer {
  color: var(--text-description);
  text-align: center;
  margin-bottom: 20px; }
  .footer .description {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 24px; }
  .footer__menu {
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0;
    gap: 0 32px; }
    .footer__menu li a {
      display: inline-block;
      font-weight: 700;
      color: var(--text-primary);
      text-decoration: none;
      text-transform: uppercase;
      line-height: 24px;
      white-space: nowrap; }
  .footer__desc {
    margin-bottom: 20px; }
    .footer__desc span {
      display: block; }
  .footer__social {
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-left: 0; }
    .footer__social li a {
      padding: 4px;
      display: inline-block; }
      .footer__social li a img {
        transition: opacity 0.2s ease;
        height: 24px; }
      .footer__social li a:hover img {
        opacity: 0.8; }
  .footer__copyright {
    margin-top: 10px; }
  @media only screen and (max-width: 992px) {
    .footer__menu {
      justify-content: flex-start;
      gap: 0 20px; } }
  @media only screen and (max-width: 576px) {
    .footer {
      margin-bottom: 15px; }
      .footer .description {
        margin-bottom: 15px;
        text-align: center; }
      .footer__menu {
        margin-bottom: 15px;
        gap: 0 15px; }
      .footer__desc {
        margin-bottom: 15px; } }

/* Static */
/* Static */
/* Events */
/* Events */
/* End Events */
/* Tab match info */
/* End tab match info */
/* Lineup */
/* lineup */
/* end lineup */
/* standing */
/* .tournamentTableMobileResolver--show .ui-table__row {
 grid-template-columns: 32px 1fr 36px 135px;
}
.tournamentTableMobileResolver--show .ui-table__header {
 grid-template-columns: 32px 1fr 36px 135px;
} */
/* end standing */
/* tab h2h */
/* tab h2h */
/* tab 3 tran sap toi */
/* tab 3 tran sap toi */
.match-detail-tab .match-tab {
  border-bottom: 1px solid var(--border-color);
  background-color: var(--common-box-header-bg);
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: scroll; }
  .match-detail-tab .match-tab::-webkit-scrollbar {
    display: none; }
  .match-detail-tab .match-tab li a {
    text-transform: uppercase;
    color: var(--text-primary);
    padding: 12px;
    border-bottom: 1px solid transparent; }
    .match-detail-tab .match-tab li a.active {
      color: var(--active-color);
      font-weight: 700;
      border-color: var(--active-color); }

.tab-content .summary_blockWrapper .ring-red-600 {
  border-radius: 50%;
  border: 3px solid #e77c7c; }

.tab-content .summary_blockWrapper .ring-green-400 {
  border-radius: 50%;
  border: 3px solid #01b243;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); }

.stat-c.winHome {
  font-weight: bold; }

.stat-c.winAway {
  font-weight: bold; }

.summary_blockWrapper {
  background: var(--common-box-body-bg); }

.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.box_events {
  border-radius: 2px;
  background: var(--common-box-body-bg); }

.hTmmUs {
  padding: 8px; }

.kFMWeW {
  background-color: #e5e9ef66;
  padding: 4px 8px;
  border-radius: 16px; }

.kumyUq {
  color: var(--text-primary-1);
  text-align: center;
  font: 700 14px / 1.14 "Sofascore Sans", sans-serif; }

.derOdV {
  display: inline-block;
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  background-color: #22222626; }

.guEkoy {
  height: 16px;
  color: #22222673;
  text-align: left;
  line-height: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 4px; }

.flex-row-reverse > * + * {
  margin-right: 4px; }

.bSGlQb {
  min-width: 24px;
  text-align: center;
  color: var(--text-primary-1);
  font-weight: 500;
  font-size: 0.8rem; }

.giaLbc {
  font-size: 16px;
  font-weight: bold; }

.bqXnZZ {
  display: flex;
  align-items: center; }

.cRcmyO {
  display: flex;
  align-items: center; }

.homeEvent {
  flex-direction: row-reverse; }
  .homeEvent .event-icon {
    justify-content: flex-end; }
  .homeEvent .bqXnZZ {
    margin-right: 10px; }
  .homeEvent .gJZTGH {
    margin-left: 10px;
    font-weight: 500; }
  .homeEvent .cRcmyO {
    margin-left: 10px; }
  .homeEvent .event-player-name .text-sup {
    text-align: right; }
  .homeEvent .event-player {
    flex-direction: row-reverse; }
  .homeEvent .event-player-logo {
    flex-direction: row-reverse; }

.event-item {
  border-bottom: 1px solid var(--border-color);
  padding: 10px 12px;
  position: relative;
  justify-content: flex-end; }
  .event-item .score {
    align-items: center;
    justify-content: flex-end; }
    .event-item .score span {
      color: var(--text-primary-1);
      font-weight: 500;
      font-family: 'Oswald';
      padding: 0px; }
      .event-item .score span:not(:empty) {
        background-color: #0154d4;
        white-space: nowrap;
        padding: 3px 15px;
        color: var(--text-primary-1);
        border-radius: 10px; }
  .event-item .homeEvent .score {
    justify-content: flex-start; }
  .event-item .event-icon {
    display: flex;
    justify-content: flex-start;
    padding: 0px 15px; }
  .event-item .fjAhjH {
    display: inline-block; }
  .event-item .event-player {
    width: 100%;
    gap: 6px; }
  .event-item .event-player-name {
    color: var(--text-primary-1);
    font-family: "Raleway";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; }
  .event-item .text-sup {
    opacity: 0.5; }
  .event-item .event-player-logo .subbed-in {
    border-radius: 32px;
    border: 1px solid var(--color-win, #01b243);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); }
  .event-item .event-player-logo .subbed-out {
    border-radius: 32px;
    border: 1px solid var(--ver-black-red-text, #e77c7c); }

.awayEvent .bqXnZZ {
  margin-left: 10px; }

.awayEvent .gJZTGH {
  margin-right: 10px;
  font-weight: 500;
  margin-left: 5px; }

.awayEvent .cRcmyO {
  margin-right: 10px; }

.awayEvent .event-icon {
  justify-content: flex-end; }

.midfield {
  white-space: nowrap;
  padding: 3px 15px;
  color: var(--text-primary-1);
  font-weight: 500;
  font-family: 'Oswald';
  border-radius: 10px; }

.object-fit-contain {
  object-fit: contain; }

.box-match-info .item {
  border-bottom: 1px solid var(--border-color);
  padding: 12px;
  gap: 12px; }
  .box-match-info .item .info .name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px; }
  .box-match-info .item .info .nation {
    color: var(--text-color-title);
    font-weight: 700;
    line-height: 24px; }

.clearfix {
  clear: both; }
  .clearfix:after {
    content: "";
    display: table; }
  .clearfix:before {
    content: "";
    display: table; }

.color-999 {
  color: #f2f3f3; }

.substitutes {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color); }
  .substitutes .item-player {
    background: var(--common-box-body-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 12px; }
    .substitutes .item-player .descMax {
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      text-decoration: none; }

.clearfix-row {
  clear: both;
  display: inline-block;
  vertical-align: top;
  width: 100%; }
  .clearfix-row:after {
    content: "";
    display: table; }
  .clearfix-row:before {
    content: "";
    display: table; }

.box-shadow5 {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.07); }

.bd {
  border: 2px solid #567856; }

.line-ups {
  --ground-box-width: 9.6em;
  --ground-box-height: 11.23em;
  --em-1px: .014em;
  --em-2px: .028em;
  --em-3px: .042em;
  --em-4px: .056em;
  --em-5px: .07em;
  --em-6px: .084em;
  --em-7px: .098em;
  --em-8px: .112em;
  --em-9px: .126em;
  --em-10px: .14em;
  --em-11px: .154em;
  --em-12px: .168em;
  --em-13px: .182em;
  --em-14px: .2em;
  --em-16px: .224em;
  --em-18px: .252em;
  color: #ffffff;
  padding: 0 12px 12px 12px; }
  .line-ups .backGreen {
    background: #206426;
    overflow-x: hidden;
    font-size: 10vw;
    border-radius: var(--em-6px);
    padding: var(--em-12px); }
  .line-ups .groundBox {
    border: var(--em-2px) solid #567856;
    width: 100%;
    height: 19em;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box; }
    .line-ups .groundBox .circle {
      border: var(--em-2px) solid #567856;
      width: 2em;
      height: 2.2em;
      border-radius: 50%;
      position: relative;
      top: -1.52em;
      margin: 0 auto; }
    .line-ups .groundBox .mid-circle {
      border: var(--em-2px) solid #567856;
      width: calc(var(--ground-box-width) * (116 / 684));
      height: calc(var(--ground-box-width) * (116 / 684));
      box-sizing: border-box;
      position: absolute;
      top: calc(50% - .83em);
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20; }
    .line-ups .groundBox .square1 {
      border: var(--em-2px) solid #567856;
      width: calc(var(--ground-box-width) * (109 / 684));
      height: calc(var(--ground-box-height) * (45 / 800));
      border-top: 0;
      margin: 0 auto; }
    .line-ups .groundBox .square2 {
      border: var(--em-2px) solid #567856;
      width: calc(var(--ground-box-width) * (216 / 684));
      height: calc(var(--ground-box-height) * (85 / 800));
      border-top: 0;
      margin: 0 auto; }
    .line-ups .groundBox .half-box {
      height: 50%;
      position: relative;
      border-bottom: var(--em-1px) solid #567856;
      z-index: 100; }
    .line-ups .groundBox .mid-inner {
      width: .2em;
      height: .2em;
      border-radius: 50%;
      background: #567856; }
  .line-ups .lineup-players .player-item {
    width: calc(var(--ground-box-width) * (67 / 684));
    height: calc(var(--ground-box-height) * (58 / 800));
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  .line-ups .lineup-players img {
    border: var(--em-1px) solid #1F1F1F;
    border-radius: 50%;
    -o-object-fit: contain;
    object-fit: contain;
    width: calc(var(--ground-box-width) * (36 / 684));
    height: calc(var(--ground-box-width) * (36 / 684)); }
  .line-ups .lineup-players .shirt-number-player {
    background: #36394066;
    padding: var(--em-4px);
    border-radius: var(--em-4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--em-4px);
    width: 100%; }
    .line-ups .lineup-players .shirt-number-player .shirt-number {
      font-size: var(--em-16px);
      font-weight: 700; }
    .line-ups .lineup-players .shirt-number-player .player-name {
      font-size: var(--em-11px);
      font-weight: 500; }
  .line-ups .lineup-players .rating {
    padding: var(--em-4px);
    background: #FF6600;
    border-radius: var(--em-1px);
    position: absolute;
    top: -0.07em;
    right: 0.04em; }
    .line-ups .lineup-players .rating .rating-text {
      width: 100%;
      height: 100%;
      font-size: var(--em-10px);
      text-align: center;
      line-height: 0.8em;
      font-family: 'Oswald'; }
  .line-ups .rightBottomBox {
    position: absolute;
    bottom: -.1em;
    left: .7em;
    width: 2em;
    height: .5em;
    display: flex;
    align-items: center; }
    .line-ups .rightBottomBox svg {
      width: 12px;
      height: 12px;
      margin-right: 1.5px; }
  .line-ups .left-top-box {
    position: absolute;
    top: 0;
    left: -.25em;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    .line-ups .left-top-box svg {
      width: 12px;
      height: 12px;
      margin-right: 1.5px; }
    .line-ups .left-top-box span {
      font-family: 'Oswald';
      font-size: var(--em-16px);
      font-weight: 700; }
  .line-ups .team-info {
    box-sizing: border-box; }
    .line-ups .team-info.team-info-home {
      padding-bottom: var(--em-12px); }
    .line-ups .team-info.team-info-away {
      padding-top: var(--em-12px); }
    .line-ups .team-info .teamLogo {
      width: 0.53em;
      height: 0.53em;
      margin-right: 0.21em; }
      .line-ups .team-info .teamLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block; }
    .line-ups .team-info .team-name {
      font-size: var(--em-13px);
      line-height: 1em;
      text-decoration: none;
      color: #ffffff; }
    .line-ups .team-info .formation {
      width: 4.52em;
      height: 1.4em;
      line-height: 1;
      text-align: center;
      position: absolute;
      left: calc(50% - 2.2em);
      background: rgba(255, 255, 255, 0.6);
      border-radius: 0.53em;
      font-size: .27em;
      color: #333;
      margin: 0 auto;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center; }
  .line-ups .teamLogo {
    width: 0.53em;
    height: 0.53em;
    margin-right: 0.21em; }
  .line-ups .playerRating {
    height: 0.875rem;
    background: #FF6600;
    border-radius: 4px;
    position: absolute;
    top: -10px;
    right: -8px; }
    .line-ups .playerRating .rating-text {
      font-size: 0.875rem;
      font-family: 'Oswald'; }
  .line-ups .w-o-h {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }

.line-up-colunm {
  display: grid;
  grid-template-columns: 1fr 1fr; }
  .line-up-colunm .line-up-item {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px; }
    .line-up-colunm .line-up-item-away {
      padding-left: 0; }
    .line-up-colunm .line-up-item-team {
      gap: 14px; }
    .line-up-colunm .line-up-item-last {
      border: none; }
    .line-up-colunm .line-up-item .match-team-logo {
      height: 36px;
      height: 36px;
      object-fit: contain; }
    .line-up-colunm .line-up-item svg {
      height: 16px;
      width: 16px; }
    .line-up-colunm .line-up-item .player-row {
      display: flex;
      gap: 12px;
      align-items: center; }
    .line-up-colunm .line-up-item .player-name {
      color: var(--text-color-title);
      font-weight: 600;
      white-space: nowrap; }
      .line-up-colunm .line-up-item .player-name .shirt-number {
        width: 20px;
        height: 20px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 1px solid var(--text-primary);
        font-size: 10px;
        margin-right: 20px; }
    .line-up-colunm .line-up-item .player-des {
      color: var(--text-primary);
      font-weight: 500;
      font-size: 13px; }
    .line-up-colunm .line-up-item .player-rating {
      border-radius: 2px;
      padding: 0px 5px;
      color: white;
      font-size: 12px; }
    .line-up-colunm .line-up-item .player .incident-minute {
      font-weight: 600;
      color: var(--text-placeholder); }
    @media only screen and (max-width: 576px) {
      .line-up-colunm .line-up-item .match-team-logo {
        height: 32px;
        height: 32px; }
      .line-up-colunm .line-up-item .player-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 140px; }
        .line-up-colunm .line-up-item .player-name .shirt-number {
          margin-right: 16px; }
      .line-up-colunm .line-up-item .player-rating {
        display: none; }
      .line-up-colunm .line-up-item .player .incident-minute {
        display: none; } }

.table .player-logo {
  width: 2rem;
  height: 2rem;
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid #eee;
  box-sizing: border-box;
  margin: 0 .1rem; }

.table .shirtNumber {
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.25rem;
  position: static;
  left: 0;
  margin: 0px;
  transform: inherit; }

.table .descMax {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.table svg {
  width: 0.875rem;
  height: 0.875rem; }

.fs-12 {
  font-size: 0.875rem !important; }

.flex {
  display: flex; }

.highlight-home {
  background: #33302A;
  color: var(--text-primary-1); }
  .highlight-home .table__cell--participant {
    background: #33302A;
    color: var(--text-primary-1); }
  .highlight-home .table__cell--rank {
    background: #33302A;
    color: var(--text-primary-1); }

.highlight-away {
  background: #33302A;
  color: var(--text-primary-1); }
  .highlight-away .table__cell--participant {
    background: #33302A;
    color: var(--text-primary-1); }
  .highlight-away .table__cell--rank {
    background: #33302A;
    color: var(--text-primary-1); }

.standings::-webkit-scrollbar-track {
  background-color: #f5f5f5; }

.standings::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
  border-radius: 2.5px; }

.standings::-webkit-scrollbar-thumb {
  background-color: #44494f; }

.standings .subFilter {
  align-items: flex-start;
  column-gap: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  justify-content: space-between;
  user-select: none; }

.standings .subFilter__group {
  column-gap: 8px;
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  justify-content: initial;
  overflow-x: auto;
  padding: 8px; }

.standings .tournamentTableMobileResolver {
  align-self: center;
  display: none;
  justify-self: flex-end;
  padding-right: 8px; }

.standings .tournamentTableMobileResolver--open {
  display: flex; }

.standings .tableWrapper {
  margin-bottom: 12px;
  overflow-x: auto; }
  .standings .tableWrapper:last-of-type {
    margin-bottom: 0; }

.standings .ui-table {
  display: grid; }

.ui-table__header {
  border-bottom: 1px solid var(--border-color);
  height: 38px;
  user-select: none;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 34px 1fr 24px 24px 24px 24px 50px 24px;
  background: #404e5b; }

.ui-table__body {
  display: grid;
  grid-auto-rows: 45px; }

.ui-table__row {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  display: grid;
  grid-template-columns: 34px 1fr 24px 24px 24px 24px 50px 24px; }

.ui-table__headerCell {
  align-items: center;
  color: #aaaaaa;
  display: flex;
  font-size: 12px;
  font-weight: bold;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  box-sizing: content-box; }

.ui-table__headerCell[title="Wins"] {
  color: #01b243; }

.ui-table__headerCell[title="Draws"] {
  color: #7da9ff; }

.ui-table__headerCell[title="Losses"] {
  color: #e77c7c; }

.table__headerCell--rank {
  left: 0;
  position: sticky;
  top: 0;
  width: 24px;
  z-index: 1; }

.table__headerCell--participant {
  align-self: center;
  display: block;
  justify-content: flex-start;
  left: 34px;
  line-height: 29px;
  overflow: hidden;
  padding: 0 10px;
  position: sticky;
  text-overflow: ellipsis;
  top: 0;
  white-space: nowrap;
  width: 140px;
  z-index: 1;
  padding-left: 0px; }

.tableCellParticipant__name {
  color: #aaaaaa;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem; }

.tableCellParticipant__score:not(:empty) {
  border-radius: 0.1875rem;
  background: #26B783;
  color: var(--text-primary-1);
  text-align: center;
  font-family: 'Be Vietnam Pro';
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem;
  white-space: nowrap;
  padding: 0.125rem 0.25rem;
  position: absolute;
  right: -0.5rem;
  width: 2rem; }

.liveScore--isWinning .tableCellParticipant__score {
  background-color: #00a83f;
  color: var(--text-primary-1); }

.liveScore--isLosing .tableCellParticipant__score {
  background-color: #dc0000;
  color: var(--text-primary-1); }

.liveScore--isDraw .tableCellParticipant__score {
  background-color: #f3a000;
  color: var(--text-primary-1); }

.formIcon {
  align-items: center;
  border-radius: 4px;
  color: var(--text-primary-1);
  cursor: pointer;
  display: flex;
  grid-area: liveIcon;
  height: 20px;
  justify-content: center;
  justify-self: center;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 20px;
  text-transform: uppercase; }

.formIcon--tbd {
  background-color: #c8cdcd; }

.formIcon--w {
  background-color: #00a83f; }

.formIcon--wl {
  background-color: #00a83f; }

.formIcon--wo {
  background-color: #00a83f; }

.formIcon--ww {
  background-color: #00a83f; }

.formIcon--d {
  background-color: #f3a000; }

.formIcon--dl {
  background-color: #f3a000; }

.formIcon--do {
  background-color: #f3a000; }

.formIcon--dw {
  background-color: #f3a000; }

.formIcon--l {
  background-color: #dc0000; }

.formIcon--ll {
  background-color: #dc0000; }

.formIcon--lo {
  background-color: #dc0000; }

.formIcon--lw {
  background-color: #dc0000; }

.table__cell {
  align-items: center;
  align-self: center;
  color: #aaaaaa;
  display: flex;
  height: 44px;
  font-size: 13px;
  font-family: "Be Vietnam Pro", sans-serif;
  box-sizing: content-box; }

.table__cell--form {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  line-height: 14px;
  width: auto; }

.table__headerCell--form {
  width: auto; }

.table__cell--rank {
  justify-content: center;
  left: 0;
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
  background-color: #141516; }

.table__cell--participant {
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
  background-color: #141516;
  flex-grow: 1;
  flex-shrink: 0;
  left: 34px;
  padding: 0 10px;
  max-width: 160px;
  width: auto;
  padding-left: 0px; }

.table__cell--value {
  justify-content: center; }

.table__cell--points {
  color: #aaaaaa;
  font-weight: 700; }

.tableCellParticipant {
  align-items: center;
  display: flex;
  padding-right: 20px;
  width: 100%; }

.tableCellRank {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 0.75rem;
  font-family: "Oswald";
  font-weight: 700;
  height: 1.375rem;
  justify-content: center;
  width: 1.375rem; }

.tableCellParticipant__block {
  align-items: center;
  display: flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative; }

.tableCellParticipant__image {
  display: flex;
  margin-right: 0.5rem; }
  .tableCellParticipant__image > img {
    height: 1.5rem;
    width: 1.5rem;
    object-fit: contain; }

.tournamentTableMobileResolver {
  align-items: center; }

.tournamentTableMobileResolver__icon {
  align-items: center;
  border-radius: 8px;
  color: #999;
  cursor: pointer;
  display: flex;
  height: 1.75rem;
  justify-content: center;
  padding: 6px;
  width: 1.75rem; }
  .tournamentTableMobileResolver__icon:hover {
    background-color: var(--text-primary-1);
    color: #000; }

.tournamentTableMobileResolver__icon--selected {
  background-color: var(--text-primary-1);
  color: #000; }

.tournamentTableMobileResolver--show .ui-table__header {
  justify-content: flex-start; }

.tournamentTableMobileResolver--show .ui-table__row {
  justify-content: flex-start; }

.tournamentTableMobileResolver--show .table__cell--participant {
  max-width: 130px; }
  .tournamentTableMobileResolver--show .table__cell--participant .tableCellParticipant__name {
    width: 100%; }

.tournamentTableMobileResolver--show .table__headerCell--participant {
  width: 130px;
  background: #404e5b; }

.LeagueStagePhases_row {
  padding: 0px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 22px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px; }

.LeagueStagePhases_circle {
  min-width: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  float: left;
  margin-right: 13px; }

#tab-3-tran-sap-toi-pane .statistics-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  background: #292b2e;
  gap: 1.12rem; }
  #tab-3-tran-sap-toi-pane .statistics-head li {
    padding: 10px; }
    #tab-3-tran-sap-toi-pane .statistics-head li a {
      background: #607d8b;
      border-radius: 100px;
      padding: 0px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 30px;
      color: var(--text-primary-1);
      text-decoration: none;
      gap: 5px;
      max-width: 105px; }
      #tab-3-tran-sap-toi-pane .statistics-head li a span {
        white-space: nowrap;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; }
    #tab-3-tran-sap-toi-pane .statistics-head li a.active {
      background: #4fa747; }

.h2h__row {
  display: flex;
  gap: 8px 0px;
  border-radius: 6px;
  background: #292b2e;
  margin-bottom: 5px;
  padding: 8px; }
  .h2h__row:last-child {
    margin-bottom: 0px; }

.h2h__participant {
  display: flex;
  align-items: center;
  gap: 6px; }
  .h2h__participant .event__logo {
    width: 20px;
    height: 20px;
    object-fit: contain; }

.h2h__body {
  display: grid;
  grid-template: "homeParticipant result resultHalfTime corner icon" minmax(23px, max-content) "awayParticipant result resultHalfTime corner icon" minmax(23px, max-content)/minmax(max-content, auto) 40px 40px 40px 40px;
  gap: 8px 0px;
  color: var(--text-primary-1);
  text-align: center;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400; }

.h2h-bar {
  display: grid;
  grid-template: "homeParticipant result resultHalfTime corner icon" minmax(23px, max-content)/minmax(max-content, auto) 40px 40px 40px 40px; }

.h2h__date {
  color: #aaa;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; }

.h2h__event {
  color: #aaa;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; }

.h2h__participantInner {
  color: var(--text-primary-1);
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; }

.h2h__homeParticipant {
  grid-area: homeParticipant; }

.h2h__awayParticipant {
  grid-area: awayParticipant; }

.h2h__result {
  font-weight: 700;
  grid-area: result;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px 0px; }
  .h2h__result span {
    border-radius: 2px;
    background: linear-gradient(141deg, #06a5ff 0%, #0236bc 100%);
    padding: 2px 6px;
    color: var(--text-primary-1);
    text-align: center;
    font-family: "Raleway";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; }

.h2h__result_ht {
  grid-area: resultHalfTime;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px 0px; }
  .h2h__result_ht span {
    padding: 2px 6px;
    color: var(--text-primary-1);
    text-align: center;
    font-family: "Raleway";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; }

.h2h__corner_ht span {
  padding: 2px 6px;
  padding: 2px 6px;
  color: var(--text-primary-1);
  color: var(--text-primary-1);
  text-align: center;
  text-align: center;
  font-family: "Raleway";
  font-family: "Raleway";
  font-size: 13px;
  font-size: 13px;
  font-style: normal;
  font-style: normal;
  font-weight: 700;
  font-weight: 700;
  line-height: 18px;
  line-height: 18px; }

.h2h__corner {
  grid-area: corner;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px 0px; }
  .h2h__corner span {
    padding: 2px 6px;
    color: var(--text-primary-1);
    text-align: center;
    font-family: "Raleway";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px; }

.h2h__icon {
  align-items: center;
  align-self: stretch;
  display: flex;
  grid-area: icon;
  justify-content: center;
  justify-self: stretch;
  min-width: 20px;
  padding-left: 8px;
  padding-right: 8px; }

ul.list-three {
  list-style: none;
  padding: 0px; }
  ul.list-three li img {
    width: 2rem;
    height: 2rem; }
  ul.list-three .matches__item {
    border: 1px solid #2a3038;
    border-top: 0px;
    margin: 0px;
    padding: 15px 10px; }
    ul.list-three .matches__item .match__team--name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #f2f3f3;
      font-family: "Raleway";
      font-size: 0.813rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.375rem; }
    ul.list-three .matches__item .match__ts {
      border-radius: 2px;
      background: linear-gradient(141deg, #06a5ff 0%, #0236bc 100%);
      color: var(--text-primary-1);
      text-align: center;
      font-family: "Raleway";
      font-size: 0.938rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.563rem;
      margin: 0px;
      padding: 0px 0.813rem; }
    ul.list-three .matches__item .match__time {
      background: none;
      padding: 0px; }
    ul.list-three .matches__item .match__hour {
      background: none;
      color: #afb4ba;
      text-align: center;
      font-family: "Oswald";
      font-size: 0.813rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.375rem;
      padding: 0px; }
    ul.list-three .matches__item .match__teams {
      width: 100%;
      gap: 0.875rem;
      padding: 0px; }
    ul.list-three .matches__item .match__team {
      gap: 0.5rem; }

.match__team {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0; }

@media screen and (max-width: 480px) {
  .ui-table__row {
    grid-template-columns: 34px 1fr 32px 32px 32px 32px 35px 32px; }
  .ui-table__header {
    grid-template-columns: 34px 1fr 32px 32px 32px 32px 35px 32px; }
  .ui-table__header--short {
    grid-template-columns: 34px 1fr 32px 60px 32px; }
  .ui-table__row--short {
    grid-template-columns: 34px 1fr 32px 60px 32px; }
  .tournamentTableMobileResolver--show .ui-table__row {
    grid-template-columns: 34px 1fr 32px 32px 32px 32px 55px 32px 135px; }
  .tournamentTableMobileResolver--show .ui-table__header {
    grid-template-columns: 34px 1fr 32px 32px 32px 32px 55px 32px 135px; } }

.detail-tab {
  display: flex;
  align-items: center;
  justify-content: Start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  max-width: 100%;
  overflow: scroll;
  border: none; }
  .detail-tab::-webkit-scrollbar {
    display: none; }
  .detail-tab li a {
    display: flex;
    align-items: center;
    justify-content: Start;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    border-radius: 6px;
    color: var(--text-primary);
    background-color: var(--common-box-header-bg);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap; }
    .detail-tab li a.active {
      background-color: var(--active-color);
      color: var(--text-white); }

.chat-player {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 600px; }
  .chat-player iframe {
    position: absolute;
    height: 100%; }

.m-tbl__head {
  background-color: var(--common-box-header-bg);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color); }

.m-tbl__item {
  border-bottom: 1px solid var(--border-color); }
  .m-tbl__item:last-child {
    border-width: 0; }

.m-tbl__row {
  display: grid;
  padding: 12px; }

.m-tbl__th {
  font-weight: 600;
  text-transform: uppercase; }

.m-tbl .detail-sm {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px 0 12px; }

.m-tbl__h2h-row {
  grid-template-columns: 2fr 1.8fr 2.5fr 1fr 1fr 1fr 0.4fr;
  align-items: center; }
  .m-tbl__h2h-row .m-tbl__td {
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .m-tbl__h2h-row .m-tbl__td-center {
      justify-content: center; }

@media only screen and (max-width: 576px) {
  .m-tbl__h2h-row {
    grid-template-columns: 2.5fr 1fr 1fr 1fr 0.4fr; } }

.m-tbl__next-match-row {
  grid-template-columns: 1.5fr 1fr 3fr;
  align-items: center; }
  .m-tbl__next-match-row .m-tbl__td {
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .m-tbl__next-match-row .m-tbl__td-center {
      justify-content: center; }
    .m-tbl__next-match-row .m-tbl__td .team-name {
      display: flex;
      align-items: center;
      gap: 8px; }
      .m-tbl__next-match-row .m-tbl__td .team-name img {
        width: 24px;
        height: 24px; }

@media only screen and (max-width: 576px) {
  .m-tbl__next-match-row {
    grid-template-columns: 1fr; } }

.m-tbl__summary-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 12px;
  justify-content: center;
  align-items: center; }
  .m-tbl__summary-row .team-logo img {
    height: 36px; }
  .m-tbl__summary-row .team-logo.away-logo {
    text-align: right; }
  .m-tbl__summary-row .event-player-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text-color-title); }
    .m-tbl__summary-row .event-player-name-column {
      display: flex;
      align-items: center;
      gap: 12px; }
    .m-tbl__summary-row .event-player-name .text-sup {
      font-weight: 500;
      color: var(--text-primary); }
  .m-tbl__summary-row .summary-time {
    font-weight: 700;
    text-align: center; }
  .m-tbl__summary-row .summary-score {
    font-weight: 600; }
  .m-tbl__summary-row .summary-score-event {
    font-size: 20px;
    font-weight: 700;
    text-align: c; }
    .m-tbl__summary-row .summary-score-event .ft {
      padding: 12px; }
  .m-tbl__summary-row .m-tbl__td-left .event-player-name {
    justify-content: end; }

@media only screen and (max-width: 576px) {
  .m-tbl__summary-row {
    grid-template-columns: 1fr 70px 1fr;
    gap: 6px; }
    .m-tbl__summary-row .event-player-name {
      flex-direction: column;
      gap: 1px; }
      .m-tbl__summary-row .event-player-name-column {
        justify-content: start;
        width: 100%; }
    .m-tbl__summary-row .m-tbl__td-left .event-player-name-column {
      justify-content: end; } }

@media only screen and (max-width: 576px) {
  .m-tbl .detail-sm {
    display: flex; } }

.statistics-top {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .statistics-top img {
    height: 36px; }

.statistics-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 12px; }
  .statistics-list.scrolling {
    max-height: 700px;
    overflow: auto; }
  .statistics-list .statistics-item {
    display: flex;
    flex-direction: column;
    gap: 4px; }
    .statistics-list .statistics-item .statistics-value {
      color: var(--statistics-color);
      font-weight: 600;
      font-size: 15px; }
    .statistics-list .statistics-item .statistics-text {
      color: var(--statistics-color);
      font-size: 13px; }
    .statistics-list .statistics-item .s-top {
      display: flex;
      justify-content: space-between; }
    .statistics-list .statistics-item .s-bottom {
      background-color: var(--statistics-item-bg);
      height: 8px;
      border-radius: 6px;
      width: 100%;
      display: grid;
      gap: 0 4px;
      grid-template-columns: 1fr 1fr; }
      .statistics-list .statistics-item .s-bottom .s-bottom-item {
        height: 100%;
        display: block;
        position: relative; }
        .statistics-list .statistics-item .s-bottom .s-bottom-item .s-progress-bar {
          height: 100%;
          background: var(--statistics-progress-bar);
          position: absolute;
          top: 0; }
          .statistics-list .statistics-item .s-bottom .s-bottom-item .s-progress-bar.active {
            background: var(--active-color); }
        .statistics-list .statistics-item .s-bottom .s-bottom-item-left .s-progress-bar {
          width: 60%;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
          right: 0; }
        .statistics-list .statistics-item .s-bottom .s-bottom-item-right .s-progress-bar {
          width: 40%;
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
          left: 0; }