/* ================================================
  CUSTOM FONTS
================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');*/
/* ================================================
  CUSTOM CSS
================================================= */
:root{
  --web-color: #cd2027;
  --web-color-tpl: #8cc641;
}

body {
  /*font-family: 'Roboto', sans-serif;*/
  font-family     : 'Montserrat', sans-serif;
  background-color: #fff;
  line-height     : 27px;
  font-weight     : 400;
  font-size       : 16px;
  color           : #333333;
}

/* ================================================
  REWRITE BOOSTRAP
================================================= */
.start-auto {
  left: auto !important;
}

.end-auto {
  right: auto !important;
}

.fz-07rem {
  font-size: .7rem !important;
}

a {
  text-decoration: none;
  color          : #666;
  transition     : color .25s ease-in-out;
}

a:hover,
a:focus {
  color: #FCC600;
}

.btn {
  -webkit-box-shadow: none;
  -khtml-box-shadow : none;
  -moz-box-shadow   : none;
  -ms-box-shadow    : none;
  -o-box-shadow     : none;
  box-shadow        : none;
  padding           : 10px 32px;
  border-radius     : 5px;
  font-size         : 15px;
  font-weight       : 700;
}

.bg-theme {
  background-color: var(--web-color);
}

.bg-theme-2 {
  background-color: #8cc641;
}

.color-theme {
  color: var(--web-color);
}

.color-theme-2 {
  color: #8cc641;
}

.color-theme-tpl {
  color: #666;
}

.btn-theme {
  color: #fff;

  -webkit-transition: all 180ms linear 0ms;
  -khtml-transition : all 180ms linear 0ms;
  -moz-transition   : all 180ms linear 0ms;
  -ms-transition    : all 180ms linear 0ms;
  -o-transition     : all 180ms linear 0ms;
  transition        : all 180ms linear 0ms;

  background-size    : 200%, 1px;
  background-position: 0%;
  background-image   : -webkit-linear-gradient(90deg, var(--web-color) 0%, #c15a28 50%, var(--web-color)) !important;
  background-image   : -moz-linear-gradient(90deg, var(--web-color) 0%, #c15a28 50%, var(--web-color)) !important;
  background-image   : -ms-linear-gradient(90deg, var(--web-color) 0%, #c15a28 50%, var(--web-color)) !important;
  background-image   : -o-linear-gradient(90deg, var(--web-color) 0%, #c15a28 50%, var(--web-color)) !important;
  background-image   : linear-gradient(90deg, var(--web-color) 0%, #c15a28 50%, var(--web-color)) !important;
  filter             : progid:DXImageTransform.Microsoft.gradient(startColorStr='var(--web-color)', endColorStr='#c15a28') !important;
  background-color   : transparent !important;
}

.btn-theme:hover,
.btn-theme:focus {
  color              : #fff;
  background-position: 100%;
}

.btn-theme-atp {
  color           : #fff;
  background-color: var(--web-color);
  border-color    : var(--web-color);
}

.btn-theme-atp:hover,
.btn-theme-atp:focus {
  color           : var(--web-color);
  background-color: #fff;
  border-color    : var(--web-color);
}

.btn-theme-tpl {
  color           : #fff;
  background-color: #8cc641;
  border-color    : #8cc641;
}

.btn-theme-tpl:hover,
.btn-theme-tpl:focus {
  color           : #8cc641;
  background-color: #fff;
  border-color    : #8cc641;
}

.btn-theme-transparent {
  padding         : 0.375rem 0.75rem !important;
  color           : var(--web-color);
  background-color: transparent;
  border-color    : var(--web-color);
}

.btn-theme-transparent:hover {
  color           : #fff;
  background-color: var(--web-color);
  border-color    : var(--web-color);
}

.btn-theme-transparent-tpl {
  padding         : 0.375rem 0.75rem !important;
  color           : #8cc641;
  background-color: transparent;
  border-color    : #8cc641;
}

.btn-theme-transparent-tpl:hover {
  color           : #fff;
  background-color: #8cc641;
  border-color    : #8cc641;
}

.hidden {
  display: none !important;
}

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

@media screen and (max-width: 575px) {
  .hidden-xs {
    display: none !important;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .hidden-sm {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hidden-md {
    display: none !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .hidden-lg {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .hidden-xl {
    display: none !important;
  }
}

/*********************************************************************
**
**  DEFINE BOOTSTRAP
**
**  row-78
**
**  row
**  margin-left: -7px;
**  margin-right: -8px;
**
**  col
**  padding-left: 7px;
**  padding-right: 8px;
**
**  row-0
**
**  row
**  margin-left: 0;
**  margin-right: 0;
**
**  col
**  padding-left: 0;
**  padding-right: 0;
**
**********************************************************************/
.row-78 {
  margin-left : -7px !important;
  margin-right: -8px !important;
}

.row-78>div {
  padding-left : 7px !important;
  padding-right: 8px !important;
}

.row-0 {
  margin-left : 0 !important;
  margin-right: 0 !important;
}

.row-0>div {
  padding-left : 0 !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 575px) {
  .row-xs-78 {
    margin-left : -7px !important;
    margin-right: -8px !important;
  }

  .row-xs-78>div {
    padding-left : 7px !important;
    padding-right: 8px !important;
  }
}

@media screen and (min-width:768px) and (max-width:991px) {
  .row-md-78>div {
    padding-left : 7px !important;
    padding-right: 8px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .col-lg-20 {
    flex : 0 0 auto;
    width: 20%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .col-xl-20 {
    flex : 0 0 auto;
    width: 20%;
  }
}

@media screen and (min-width: 1440px) {
  .col-xxl-20 {
    flex : 0 0 auto;
    width: 20%;
  }
}

/* ================================================
  STYLE
================================================= */
/* logo brand */
.navbar-brand img {
  height: 90px;
}

@media screen and (min-width: 1200px) {
  .navbar-brand {
    margin-right: 50px;
  }
}

@media screen and (max-width: 991px) {
  .navbar-brand {
    margin-right: 0;
  }

  .navbar-brand img {
    height: 65px;
  }
}

/* body */
@media screen and (min-width: 992px) {
  body {
    padding-top: 100px;
  }
}

@media screen and (max-width: 991px) {
  body {
    padding-top: 75px;
  }
}

body.cke_editable {
  padding-top: 0 !important;
}

/* ==========================================================================================
  PAGINATION
========================================================================================== */
.pagination {
  margin-top      : 10px;
  display         : inline-block;
  background-color: #fff;
  padding         : 5px;
  border-radius   : 27px;
}

.pagination li {
  display      : -webkit-inline-flex;
  display      : inline-flex;
  border-radius: 50%;
  overflow     : hidden;
}

.pagination .page-link {
  color       : #333;
  border-width: 0;
  text-align  : center;
  width       : 45px;
  height      : 45px;
  line-height : 35px;
}

.pagination li a:focus {
  box-shadow: none;
}

.pagination .page-item.active .page-link {
  background-color: var(--web-color);
  border-color    : var(--web-color);
  color           : #fff;
}

/* ================================================
  HEADER
================================================= */
/* menu */
.nav-header {
  box-shadow: 0px 5px 16px 0px rgba(138, 138, 138, 0.33);
  padding   : 0;
}

.nav-header .navbar-nav.menu-main .nav-link {
  color        : #08203A;
  font-weight  : 500;
  font-size    : 15px;
  padding-left : 15px;
  padding-right: 15px;
  position     : relative;
}

.nav-header .menu-main>.nav-item>.nav-link {
  text-transform: uppercase;
}

.nav-header .navbar-nav.menu-main .nav-link.active {
  color: var(--web-color);
}

/* dropdown menu */
.nav-header .menu-main .nav-link.dropdown-toggle:after {
  border        : 0 !important;
  font-family   : "Font Awesome 6 Pro";
  content       : "\f107";
  vertical-align: 0;
}

@media screen and (min-width: 992px) {
  .nav-header .menu-main>.nav-item {
    padding-top   : 25px;
    padding-bottom: 25px;
  }

  .nav-header .menu-main>.nav-item>.nav-link {
    -webkit-transition: color 0.35s ease-in-out;
    -moz-transition   : color 0.35s ease-in-out;
    -o-transition     : color 0.35s ease-in-out;
    transition        : color 0.35s ease-in-out;
  }

  .nav-header .menu-main>.nav-item:hover>.nav-link {
    color: var(--web-color) !important;
  }

  .nav-header .menu-main>.nav-item>.nav-link:before {
    content           : "";
    position          : absolute;
    z-index           : 1;
    bottom            : 5px;
    left              : 15px;
    width             : 0;
    height            : 2px;
    background-color  : var(--web-color);
    -webkit-transition: width 0.35s ease-in-out;
    -moz-transition   : width 0.35s ease-in-out;
    -o-transition     : width 0.35s ease-in-out;
    transition        : width 0.35s ease-in-out;
  }

  .nav-header .menu-main>.nav-item>.nav-link.active:before,
  .nav-header .menu-main>.nav-item>.nav-link:hover:before {
    width: 15px;
  }

  .nav-header .menu-main .nav-link.dropdown-toggle:after {
    -webkit-transition: color 0.35s ease-in-out;
    -moz-transition   : color 0.35s ease-in-out;
    -o-transition     : color 0.35s ease-in-out;
    transition        : color 0.35s ease-in-out;
  }

  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
  }

  .nav-header .navbar-nav .dropdown-menu {
    border-radius     : 0 0 5px 5px;
    background-color  : rgba(255, 255, 255, 1);
    top               : 110px;
    border            : 0;
    padding-top       : 15px;
    padding-bottom    : 15px;
    margin-top        : 0;
    box-shadow        : 0 6px 20px 1px rgba(84, 84, 120, .26);
    opacity           : 0;
    visibility        : hidden;
    display           : inherit;
    letter-spacing    : 0;
    -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out;
    -ms-transition    : visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out;
    transition        : visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out;
  }

  .nav-header .navbar-nav>.nav-item:hover>.dropdown-menu {
    top       : 97px;
    opacity   : 1;
    visibility: visible;
  }

  .nav-header .navbar-nav .dropdown-menu>li {
    padding-left    : 0;
    padding-right   : 0;
    background-color: transparent !important;
    margin-bottom   : 5px;
  }

  .nav-header .navbar-nav .dropdown-menu>li>a {
    padding    : 0px 20px !important;
    font-weight: 500 !important;
    font-size  : 16px !important;
    white-space: nowrap;
  }

  .nav-header .navbar-nav .dropdown-menu>li>a.active,
  .nav-header .navbar-nav .dropdown-menu>li:hover>a {
    color: var(--web-color);
  }

  .nav-header .navbar-nav .dropdown-menu .dropdown-menu {
    top                      : -10px !important;
    left                     : 100%;
    border-top-left-radius   : 0;
    border-bottom-left-radius: 0;
    opacity                  : 0;
    visibility               : hidden;
  }

  .nav-header .navbar-nav .dropdown-menu .nav-item:hover .dropdown-menu {
    opacity   : 1;
    visibility: visible;
  }

  .nav-header .navbar-nav .dropdown-menu .dropdown-toggle:after {
    position: absolute;
    z-index : 1;
    right   : 15px;
    top     : 9;
    content : "\f105";
  }

  .nav-header .menu-main .dropdown-menu .nav-link.active.dropdown-toggle:after,
  .nav-header .menu-main .dropdown-menu .nav-link.dropdown-toggle:hover:after {
    border-left-color: var(--web-color);
    border-top       : .3em solid transparent;
  }
}

@media screen and (max-width: 991px) {
  .navbar-light .navbar-toggler {
    border-color : rgba(0, 74, 143, .5);
    padding-left : 8px;
    padding-right: 8px;
  }

  .navbar-toggler-icon {
    width           : 1.2em;
    height          : 1.2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 74, 143, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  .navbar-collapse {
    border-top: 1px solid transparent;
  }

  .navbar-collapse {
    border-color: #eee;
  }

  .menu-main {
    padding-top: 10px;
  }

  .nav-header .navbar-nav .dropdown .dropdown-menu {
    display     : block;
    padding-left: 20px;
  }

  .nav-header .navbar-nav .dropdown-menu {
    padding-top: 0;
    margin-top : 0;
  }

  .nav-header .navbar-nav .dropdown-menu {
    border-radius   : 0;
    background-color: rgba(255, 255, 255, 0);
    border-color    : transparent;
  }

  .nav-header ul.navbar-nav>li:last-child {
    min-height: 200px;
  }

  .nav-header .navbar-nav .dropdown-menu>li {
    padding-top   : 0;
    padding-bottom: 0;
  }

  .nav-header .navbar-nav.menu-main .nav-link {
    padding-left: 0 !important;
  }

  .nav-header .navbar-nav.menu-main .dropdown-menu>li a {
    padding-top   : 5px;
    padding-bottom: 5px;
    border-bottom : 1px solid rgba(0, 0, 0, 0.075);
    font-weight   : 500;
  }

  .nav-header .navbar-nav.menu-main .dropdown-menu .dropdown-menu .nav-link {
    font-weight   : 400;
    text-transform: capitalize;
  }
}

@media screen and (max-width: 767px) {}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .nav-header .navbar-nav.menu-main .nav-link {
    padding-left : 10px;
    padding-right: 10px;
    font-size    : 14px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-header .navbar-nav.menu-main .nav-link {
    padding-left : 6px;
    padding-right: 6px;
    font-size    : 12px;
  }
}

@media screen and (min-width: 992px) {}

@media screen and (max-width: 575px) {}

/* ================================================
  FOOTER
================================================= */
footer {
  color           : #666;
  background-color: #eee;
}

footer a:hover {
  color: var(--web-color);
}

.f-info {
  position: relative;
}

.fi-logo .f-l,
.fi-logo .f-rf {
  padding-top: 30px;
}

.f-info .f-l {
  padding-right: 10px;
}

.f-info .f-l img,
.f-info .f-rf img {
  height: 70px;
}

.f-info .f-rf {
  position    : relative;
  padding-left: 10px;
}

.f-info .f-rf:before {
  content         : "";
  position        : absolute;
  z-index         : 1;
  bottom          : 1rem;
  left            : 0;
  height          : 70px;
  width           : 1px;
  background-color: #fff;
}

.f-info .f-i {
  position   : absolute;
  z-index    : 1;
  top        : 0;
  left       : 3px;
  color      : #666;
  font-size  : 10px;
  white-space: nowrap;
}

.fi-social:before,
.fi-social:after {
  content         : "";
  position        : absolute;
  z-index         : 1;
  top             : 0;
  width           : 1px;
  height          : 100%;
  background-color: #fff;
}

.fi-social:before {
  left: 0;
}

.fi-social:after {
  right: 0;
}

.f-info ul.info a {
  padding-top   : 5px;
  padding-bottom: 5px;
  display       : block;
}

.f-info ul.social li {
  display     : inline-block;
  margin-left : 5px;
  margin-right: 5px;
}

.f-info ul.social li a {
  display      : inline-block;
  width        : 45px;
  height       : 45px;
  border-radius: 50%;
  border       : 1px solid #666;
  transition   : border-color .25s ease-in-out;
}

.f-info ul.social li a:hover {
  border-color: var(--web-color);
}

.f-info ul.social li i {
  font-size: 20px;
}

.f-info .f-title {
  font-weight  : 500;
  color        : #666;
  margin-bottom: 10px;
  font-size    : 10px;
}

.f-info .intro {
  text-align : justify;
  font-size  : 12px;
  line-height: 22px;
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {

  .f-info .f-l img,
  .f-info .f-rf img {
    height: 60px;
  }

  .f-info .f-rf:before {
    height: 60px;
  }

  .f-info .f-l {
    padding-right: 10px;
  }

  .f-info .f-rf {
    padding-left: 10px;
  }

  .f-info .f-i {
    left     : 0;
    font-size: 9px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {

  .f-info .f-l img,
  .f-info .f-rf img {
    height: 50px;
  }

  .f-info .f-rf:before {
    height: 50px;
  }

  .f-info .f-l {
    padding-right: 10px;
  }

  .f-info .f-rf {
    padding-left: 10px;
  }

  .f-info .f-i {
    left     : 0;
    font-size: 8px;
  }
}

@media screen and (max-width: 991px) {
  .f-info ul.social li {
    margin-left : 0;
    margin-right: 10px;
  }

  .fi-social:before,
  .fi-social:after {
    display: none;
  }

  .fi-logo {
    margin-bottom: 30px;
  }

  .f-info .f-i {
    font-size: 12px;
  }

  .f-info .f-rf:before {
    height: 80px;
  }

  .f-info .f-l img,
  .f-info .f-rf img {
    height: 80px;
  }
}

@media screen and (max-width: 767px) {
  .f-info .f-title {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 575px) {

  .f-info .f-l img,
  .f-info .f-rf img {
    height: 57px;
  }

  .f-info .f-rf:before {
    height: 57px;
  }

  .f-info .f-l {
    padding-right: 5px;
  }

  .f-info .f-rf {
    padding-left: 5px;
  }

  .f-info .f-i {
    left     : 0;
    font-size: 8px;
  }
}

/* ==========================================================================================
  COPYRIGHT
========================================================================================== */
.copyright-powered {
  padding-top     : 5px;
  padding-bottom  : 5px;
  background-color: var(--web-color);
  color           : #fff;
  font-size       : 12px;
}

.copyright-powered a {
  color: #fff;
}

.copyright span {
  font-weight: 700;
}

.powered-by {
  text-align: right;
}

@media (max-width:991px) {
  .copyright-powered {
    padding-left: 0;
  }
}

@media (min-width:768px) and (max-width: 991px) {
  .copyright {
    text-align: left;
  }

}

@media (max-width:767px) {

  .copyright,
  .powered-by {
    text-align: center;
  }

  .powered-by {
    margin-top: 5px;
  }
}

/* ================================================
  BANNER
================================================= */
.section-banner .carousel .carousel-indicators {
  justify-content: end;
  margin-right   : 2%;
  margin-left    : 2%;
}
.section-banner .carousel .carousel-indicators [data-bs-target]{
  width: 20px;
}

.section-banner {
  position: relative;
}

/*
.section-banner:before{
  z-index: 2;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent,transparent 40%,rgba(0,0,0,.9));
}
*/
.section-banner .carousel-caption {
  z-index: 3;
  left   : 0;
  right  : 0;
}

.b-left {
  color     : #fff;
  text-align: left;
}

.b-left .bt-slogan {
  letter-spacing: .5px;
}

.b-left .bt-intro {
  letter-spacing: .5px;
}

.b-right {
  border       : 10px solid #fafafa;
  border-radius: 10px;
}

@media screen and (min-width: 1440px) {
  .section-banner .carousel-caption {
    bottom: 65px;
  }

  .b-left .bt-slogan {
    font-size    : 18px;
    margin-bottom: 15px;
  }

  .b-left .bt-title {
    font-size    : 40px;
    line-height  : 55px;
    margin-bottom: 30px;
  }

  .b-left .bt-intro {
    font-size    : 18px;
    margin-bottom: 25px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .b-left .bt-slogan {
    font-size    : 16px;
    margin-bottom: 10px;
  }

  .b-left .bt-title {
    font-size    : 24px;
    line-height  : 34px;
    margin-bottom: 20px;
  }

  .b-left .bt-intro {
    font-size    : 14px;
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .b-left .bt-slogan {
    font-size    : 14px;
    margin-bottom: 5px;
  }

  .b-left .bt-title {
    font-size    : 20px;
    line-height  : 30px;
    margin-bottom: 10px;
  }

  .b-left .bt-intro {
    font-size    : 14px;
    margin-bottom: 15px;
  }

}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .b-left .bt-slogan {
    font-size    : 14px;
    margin-bottom: 5px;
  }

  .b-left .bt-title {
    font-size    : 20px;
    line-height  : 30px;
    margin-bottom: 10px;
  }

  .b-left .bt-intro {
    font-size    : 14px;
    margin-bottom: 15px;
  }

}

@media screen and (min-width: 576px) and (max-width: 767px) {}

@media screen and (max-width: 576px) {}

/* ================================================
  SECTION
================================================= */
.section-padding {
  padding-top   : 70px;
  padding-bottom: 55px;
  border-bottom : 1px solid #f0f3f7;
}

.section-t {
  max-width : 740px;
  text-align: center;
  margin    : 0 auto;
}

.section-ht {
  max-width : 540px;
  text-align: center;
  margin    : 0 auto;
}

.slogan-section {
  color        : var(--web-color);
  position     : relative;
  display      : inline-block;
  font-size    : 20px;
  margin-bottom: 10px;
}

.title-section {
  margin-bottom : 15px;
  font-weight   : 700;
  font-size     : 28px;
  text-transform: uppercase;
  line-height   : 1.42;
}

.intro-section {
  margin-bottom: 30px;
  color        : #666;
  min-height   : 1px;
}

.intro-section:empty {
  margin-bottom: 20px;
}

.content-detail a {
  color: var(--web-color);
}

.content-detail img {
  max-width: 100% !important;
  height   : auto !important;
}

.detail-item {
  margin-bottom: 25px;
}

.btn-section {
  margin-top: 15px;
}

.bg-section {
  background-color: #f0f3f7;
  border-bottom   : 1px solid #fff;
}

.bg-section-tpl {
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : cover, contain;
}

.bg-section-tpl .title-section,
.bg-section-tpl .intro-section {
  color: #fff;
}

.border-section {
  border-bottom: 10px solid #eee;
}

.row-list .row-item {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 992px) {
  .detail-item {
    padding-right: 30px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .title-section {
    font-size: 28px;
  }

  .intro-section:empty {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .title-section {
    font-size: 22px;
  }

  .intro-section:empty {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 767px) {
  .intro-section:empty {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .section-padding {
    padding-top   : 50px;
    padding-bottom: 35px;
  }

  .title-section {
    font-size: 24px;
  }
}

@media screen and (max-width: 575px) {
  .section-padding {
    padding-top   : 40px;
    padding-bottom: 25px;
  }

  .slogan-section {
    font-size: 17px;
  }

  .slogan-section.slogan-line-left::before,
  .slogan-section.slogan-line-right::after {
    width: 50px;
  }

  .slogan-section.slogan-line-left::before {
    left: -70px;
  }

  .slogan-section.slogan-line-right::after {
    right: -70px;
  }

  .title-section {
    font-size: 20px;
  }

  .intro-section {
    line-height: 1.3;
  }
}

@media screen and (max-width: 575px) {
  .title-section {
    font-size: 18px;
  }

  .row-list .row-item {
    margin-bottom: 15px;
  }

  .btn-section {
    margin-top: 10px;
  }

  .intro-section {
    margin-bottom: 15px;
  }
}

/* ================================================
  SECTION TOURNAMENT
================================================= */
.box-tournament {
  border-radius   : 4px;
  overflow        : hidden;
  box-shadow      : 0 2px 3px 0 rgba(0, 0, 0, .18);
  background-color: #fff;
  transition      : box-shadow .15s ease-in-out;
}

.box-tournament:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.box-tournament .img {
  position: relative;
}

.box-tournament .img .dates {
  position        : absolute;
  z-index         : 1;
  top             : 5px;
  right           : 5px;
  background-color: rgb(6,117,147);
  color           : #fff;
  padding         : 7px 12px;
  line-height     : 22px;
  border-radius   : 3px;
}

.box-tournament.bt-completed .img .dates {
  background-color: var(--web-color-tpl);
}

.box-tournament .dates .card-date .d1,
.box-tournament .dates .card-time .d1 {
  text-transform: uppercase;
  font-size     : 10px;
}

.box-tournament .dates .card-date>span:last-child,
.box-tournament .dates .card-time>span:last-child {
  font-size: 12px;
}

.box-tournament .dates .card-time {
  padding-left: 20px;
  position    : relative;
}

.box-tournament .dates .card-time:before {
  content    : "-";
  position   : absolute;
  font-weight: 700;
  left       : 5px;
}

.box-tournament .status {
  background-color: #8cc641;
  color           : #fff;
  text-transform  : uppercase;
  font-weight     : 700;
  padding-left    : 15px;
  padding-right   : 15px;
  font-size       : 12px;
  letter-spacing  : .5px;
}

.box-tournament .status.upcoming {
  background-color: rgb(6,117,147);
  color           : #fff;
}

.box-tournament .status.ongoing {
  background-color: #FCC600;
  color           : #333;
}

.box-tournament .info .title {
  font-weight   : 700;
  font-size     : 16px;
  letter-spacing: .5px;
  line-height   : 1.42;
}

.box-tournament .info .title a {
  color             : #333333;
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 3;
  white-space       : normal;
  -webkit-box-orient: vertical;
}

.box-tournament:hover .info .title a,
.box-tournament .info .title a:hover {
  color: var(--web-color);
}

.box-tournament .address {
  padding           : 0 15px;
  color             : #666;
  font-size         : 14px;
  margin-bottom     : 15px;
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;

}

.box-tournament .info .tour-attr {
  font-size     : 14px;
  color         : #666;
  padding-top   : 3px;
  padding-bottom: 3px;
  white-space   : nowrap;
}

.box-tournament .info .tour-attr .value {
  color             : #333;
  padding-left      : 10px;
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;
}

.map-tournament iframe {
  width: 100% !important;
}

@media screen and (max-width: 1199px) {
  .box-tournament .info .title {
    font-weight: 500;
    font-size  : 14px;
    line-height: 1.3;
  }

  .box-tournament .address {
    font-size: 12px;
  }
}

/* ================================================
  SECTION INTRO
================================================= */
.youtube-video iframe {
  width : 940px !important;
  height: 529px !important;
}

.youtube-link {
  position: relative;
}

.youtube-link a:before {
  content         : "";
  position        : absolute;
  z-index         : 2;
  left            : 0;
  right           : 0;
  top             : 0;
  bottom          : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(255, 255, 255, .1);
  transition      : background-color .15s ease-in-out;
}

.youtube-link a:hover:before {
  background-color: rgba(255, 255, 255, .05);
}

.youtube-link .icon-youtube {
  position  : absolute;
  z-index   : 3;
  left      : 0;
  right     : 0;
  top       : 0;
  bottom    : 0;
  font-size : 50px;
  width     : 57px;
  height    : 50px;
  color     : rgba(255, 255, 255, .5);
  margin    : auto;
  transition: color .15s ease-in-out;
}

.youtube-link:hover .icon-youtube {
  color: rgba(255, 255, 255, .9);
}

.youtube-link img {
  position : relative;
  z-index  : 1;
  max-width: 940px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .youtube-video iframe {
    width : 740px !important;
    height: 417px !important;
  }

  .youtube-link img {
    max-width: 740px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .youtube-video iframe {
    width : 546px !important;
    height: 307px !important;
    margin: auto;
  }

  .youtube-link img {
    max-width: 546px;
  }
}

@media screen and (max-width: 575px) {
  .youtube-video iframe {
    width : 345px !important;
    height: 194px !important;
    margin: auto;
  }

  .youtube-link img {
    max-width: 100%;
  }

  .youtube-link .icon-youtube {
    font-size: 35px;
    width    : 40px;
    height   : 35px;
    color    : rgba(255, 255, 255, .75);
  }
}

/* ================================================
  SECTION NEWS
================================================= */
.box-news {
  box-shadow   : 0 2px 3px 0 rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  border-radius: 4px;
  overflow     : hidden;
}

.box-news:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.box-news .intro {
  padding: 0 15px 5px;
}

.box-news .title {
  font-size     : 14px;
  text-transform: uppercase;
  line-height   : 1.4;
}

.box-news .title a {
  color: #333;
}

.box-news:hover .title a,
.box-news .title a:hover {
  color: var(--web-color);
}

.box-news .date {
  padding  : 0 15px 15px;
  color    : #666;
  font-size: 14px;
}

.box-news figure {
  position   : relative;
  padding-top: 56.25%;
  overflow   : hidden;
}

.box-news figure img {
  position: absolute;
  z-index : 1;
  top     : 0;
  left    : 0;
}

@media screen and (max-width: 1199px) {
  .box-news .title {
    font-size: 14px;
  }

  .box-news .date {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  .box-news .title a {
    display           : -webkit-box;
    overflow          : hidden;
    text-overflow     : ellipsis;
    -webkit-line-clamp: 3;
    white-space       : normal;
    -webkit-box-orient: vertical;
  }
}

/* ================================================
  SECTION SHOP
================================================= */
.shop-right .f-n {
  width: 100px;
}

.shop-right .title {
  font-size  : 28px;
  font-weight: 700;
}

@media screen and (min-width: 1440px) {
  .shop-right {
    padding-left : 80px;
    padding-right: 80px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .shop-right {
    padding-left : 40px;
    padding-right: 40px;
  }

  .shop-right .title {
    font-size: 24px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .shop-right .title {
    font-size: 22px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  .shop-right {
    padding-top: 30px;
  }

  .shop-right .title {
    font-size: 22px;
  }
}

@media screen and (max-width: 575px) {
  .shop-right {
    padding-top: 30px;
  }

  .shop-right .title {
    font-size: 18px;
  }
}

/* ================================================
  SECTION ALBUM
================================================= */
.box-album {
  box-shadow   : 0 2px 3px 0 rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  border-radius: 4px;
  overflow     : hidden;
  height       : 100%;
}

.box-album:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.box-album .ba-c {
  position: relative;
  height  : 100%;
}

.box-album .ba-c:before {
  z-index   : 2;
  content   : "";
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(transparent, transparent 40%, rgba(0, 0, 0, .9));
}

.box-album .q-icon {
  padding-left    : 15px;
  padding-right   : 15px;
  background-color: rgba(55, 65, 101, 0.666);
  color           : #fff;
}

.box-album .q-icon i {
  line-height: 27px;
}

.box-album .q-icon span {
  font-size: 13px;
}

.box-album .album-info {
  position: absolute;
  z-index : 3;
  bottom  : 0;
  left    : 0;
  right   : 0;
}

.box-album .album-info .title {
  font-size    : 16px;
  line-height  : 1.42;
  color        : #fff;
  padding-left : 15px;
  padding-right: 15px;
  transition   : color .25s ease-in-out;
}

.box-album:hover .album-info .title {
  color: #FCC600;
}

@media screen and (max-width: 575px) {

  .box-album .album-info .title,
  .box-album .q-icon span {
    font-size: 12px;
  }
}

/* ================================================
  SECTION RANKING
================================================= */
.box-vdv {
  box-shadow   : 0 2px 3px 0 rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  border-radius: 4px;
  overflow     : hidden;
}

.box-vdv:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.box-vdv figure {
  padding   : 10px 5px 0;
  justify-content: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.box-vdv figure a {
  overflow     : hidden;
  border-radius: 50%;
  width        : 130px;
  height       : 130px;
  position: relative;
  display: flex;
  justify-content: center;
  
}
.box-vdv figure a img{
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: auto !important;
  min-width: 100%;
}

.box-vdv .info .title {
  font-size    : 14px;
  font-weight  : 700;
  padding-left : 10px;
  padding-right: 10px;
}

.box-vdv .info .title a {
  color             : #333333;
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;
}

.box-vdv:hover .info .title a {
  color: var(--web-color);
}

.box-vdv .intro {
  padding-left  : 10px;
  padding-right : 10px;
  padding-bottom: 10px;
}

.box-vdv .intro .vdv-attr {
  font-size     : 14px;
  color         : #666;
  padding-top   : 3px;
  padding-bottom: 3px;
}

.box-vdv .intro .vdv-attr .value {
  color             : var(--web-color);
  padding-left      : 10px;
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;
  transition        : color .25s ease-in-out;
}

.box-vdv:hover .intro .vdv-attr .value {
  color: var(--web-color);
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .box-vdv figure a {
    width : 150px;
    height: 150px;
  }
}

@media screen and (min-width: 992px) {
  .box-vdv .info .title {
    font-size  : 14px;
    font-weight: 600;
  }

  .box-vdv .intro .vdv-attr {
    font-size: 12px;
  }
}

@media screen and (max-width: 575px) {
  .box-vdv .intro {
    padding-left  : 10px;
    padding-right : 10px;
    padding-bottom: 5px;
  }

  .box-vdv .info .title {
    font-size: 14px;
  }

  .box-vdv .intro .vdv-attr {
    font-size: 12px;
  }
}

/* ================================================
  NAV SHOP CART
================================================= */
.shop-nav {
  position: relative;
}

.shop-nav i:before {
  font-size : 24px;
  color     : var(--web-color);
  transition: color .25s ease-in-out;
}

.shop-nav a {
  transition : color .25s ease-in-out;
  font-weight: 700;
  color      : #333;
}

.shop-nav a:hover {
  color: var(--web-color);
}

.shop-nav .badge-n {
  border-radius: 3px;
  color        : var(--web-color);
  position     : absolute;
  z-index      : 1;
  top          : 3px;
  left         : 2px;
  line-height  : 1;
  font-size    : 9px;
  width        : 27px;
  text-align   : center;
}

@media screen and (min-width: 992px) {
  .shop-nav {
    position: absolute;
    right   : 15px;
  }
}

/* ================================================
  SECTION BREADCRUMB
================================================= */
.section-breadcrumb {
  position: relative;
}

.section-breadcrumb .slide-banner:after {
  content         : "";
  position        : absolute;
  z-index         : 1;
  top             : 0;
  left            : 0;
  right           : 0;
  bottom          : 0;
  background-color: rgba(0, 0, 0, .33);
}

.breadcrumb-item {
  position: relative;
}

.breadcrumb-item.active,
.breadcrumb-item a {
  color: #fff;
}

.breadcrumb-item+.breadcrumb-item {
  margin-left: 30px;
}

.breadcrumb-item+.breadcrumb-item:before {
  content    : "\f101";
  font-family: "Font Awesome 6 Pro";
  position   : absolute;
  z-index    : 1;
  left       : -17px;
  top        : 0;
  color      : #fff;
}

.box-breadcrumb {
  position: absolute;
  z-index : 1;
  top     : 0;
  left    : 0;
  right   : 0;
  bottom  : 0;
}

.box-breadcrumb .b-title {
  text-transform: uppercase;
  font-weight   : 700;
  letter-spacing: .5px;
  font-size     : 28px;
}

/* ================================================
  PAGE TOURNAMENT
================================================= */
.box-tournament-h {
  box-shadow   : 0 2px 3px 0 rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  border-radius: 4px;
  position     : relative;
  margin-bottom: 30px;
}

.box-tournament-h:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.box-tournament-h .bt-head {
  width      : -webkit-calc(100% - 10px);
  width      : calc(100% - 10px);
  margin-left: auto;
}

.box-tournament-h .bt-head .line {
  background-color: var(--web-color);
  padding         : 7px 15px;
  font-size       : 14px;
  color           : #fff;
}

.box-tournament-h .bt-body img {
  border-radius: 5px;
}

.box-tournament-h .bt-body .title {
  font-size    : 20px;
  margin-bottom: 15px;
}

.box-tournament-h .bt-body .title a {
  color      : #333;
  line-height: 1.5;
}

.box-tournament-h:hover .bt-body .title a {
  color: var(--web-color);
}

.box-tournament-h .bt-body .attrs {
  margin-bottom: 15px;
}

.box-tournament-h .bt-body .attr {
  margin-bottom: 10px;
}

.box-tournament-h .bt-body .attrs .rl {
  color: #666;
}

.box-tournament-h .bt-body .attrs .rr a {
  color: #333;
}

.box-tournament-h .bt-body .attrs .rr a:hover {
  color: var(--web-color);
}

.box-tournament-h .bt-body .attrs .badget {
  color         : #444;
  font-size     : 12px;
  text-transform: uppercase;
  border-radius : 4px;
  line-height   : 1;
  padding       : 7px;
  letter-spacing: .5px;
}

.box-tournament-h .bt-btn {
  position: absolute;
  z-index : 1;
}

@media screen and (min-width: 1400px) {
  .box-tournament-h .bt-body img {
    width: 396px;
  }

  .box-tournament-h .bt-body .title {
    font-size: 26px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .box-tournament-h .bt-body img {
    width: 336px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .box-tournament-h .bt-body .title {
    font-size: 18px;
  }

  .box-tournament-h .bt-body img {
    width: 276px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .box-tournament-h .bt-body img {
    width: 316px;
  }

  .box-tournament-h .bt-body .title {
    font-size: 16px;
  }

  .box-tournament-h .bt-body .attrs,
  .box-tournament-h .bt-body .address {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .box-tournament-h .bt-body {
    padding: 20px;
  }

  .box-tournament-h .bt-body .intro {
    padding-left: 30px;
  }

  .box-tournament-h .bt-btn {
    right : 20px;
    bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .box-tournament-h .bt-body {
    padding: 15px 15px 10px;
  }

  .box-tournament-h .bt-body .img {
    margin-bottom: 20px;
  }

  .box-tournament-h .bt-body .title {
    font-size: 16px;
  }

  .box-tournament-h .bt-body .attrs {
    margin-bottom: 10px;
  }

  .box-tournament-h .bt-body .attrs,
  .box-tournament-h .bt-body .address {
    font-size: 14px;
  }

  .box-tournament-h .bt-body .address {
    border-bottom : 1px solid #ddd;
    padding-bottom: 10px;
  }

  .box-tournament-h .bt-body .attr {
    border-bottom : 1px solid #ddd;
    padding-bottom: 10px;
  }

  .box-tournament-h .bt-btn {
    position      : relative;
    text-align    : center;
    padding-top   : 5px;
    padding-bottom: 15px;
  }

  .box-tournament-h .bt-body img {
    width: 100%;
  }
}

/* ================================================
  PAGE TOURNAMENT DETAIL
================================================= */
/* banner */
.banner-tournament {
  background-repeat  : no-repeat;
  background-color   : var(--web-color);
  background-position: center;
  background-size    : cover, contain;
  padding-top        : 300px;
  position           : relative;
}

.banner-tournament:before {
  z-index   : 2;
  content   : "";
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(transparent, transparent 40%, rgba(0, 0, 0, .9));
}

.banner-t {
  position: relative;
  z-index : 5;
}

.banner-t .t-title {
  font-size    : 34px;
  margin-bottom: 30px;
  line-height  : 44px;
}

.banner-ti {
  position                 : relative;
  z-index                  : 5;
  padding-top              : 15px;
  padding-bottom           : 15px;
  /*-webkit-backdrop-filter: blur(5px);
  backdrop-filter          : blur(5px);*/
  background-color         : rgba(140, 198, 65, .8);
  border-top               : 5px solid;
  -o-border-image          : linear-gradient(45deg, #8cc641, rgba(102, 204, 51, 0)) 1;
  border-image             : linear-gradient(45deg, #8cc641, rgba(102, 204, 51, 0)) 1;
}

.banner-ti .t-intro .attr {
  padding-left : 20px;
  padding-right: 20px;
  border-right : 3px solid #fff;
}

.banner-ti .t-intro .flex-column {
  white-space: nowrap;
  overflow-x : auto;
}

.banner-ti .t-intro .attr:first-child {
  padding-left: 0;
}

.banner-ti .t-intro .attr:last-child {
  padding-right     : 0;
  border-right-width: 0;
}

.banner-ti .t-intro .attr .ta-l {
  opacity    : .85;
  font-size  : 15px;
  font-weight: 500;
}

.banner-ti .t-intro .attr .ta-r .badge {
  color: #fff;

  -webkit-transition: all 180ms linear 0ms;
  -khtml-transition : all 180ms linear 0ms;
  -moz-transition   : all 180ms linear 0ms;
  -ms-transition    : all 180ms linear 0ms;
  -o-transition     : all 180ms linear 0ms;
  transition        : all 180ms linear 0ms;

  background-size    : 200%, 1px;
  background-position: 0%;
  /*background-image : -webkit-linear-gradient(90deg, #d5de24 0%, #a5de04 50%, #d5de24) !important;
  background-image   : -moz-linear-gradient(90deg, #d5de24 0%, #a5de04 50%, #d5de24) !important;
  background-image   : -ms-linear-gradient(90deg, #d5de24 0%, #a5de04 50%, #d5de24) !important;
  background-image   : -o-linear-gradient(90deg, #d5de24 0%, #a5de04 50%, #d5de24) !important;
  background-image   : linear-gradient(90deg, #d5de24 0%, #a5de04 50%, #d5de24) !important;
  filter             : progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5de24', endColorStr='#a5de04') !important;*/

  background-image: -webkit-linear-gradient(90deg, var(--web-color) 0%, #d15a28 50%, var(--web-color)) !important;
  background-image: -moz-linear-gradient(90deg, var(--web-color) 0%, #d15a28 50%, var(--web-color)) !important;
  background-image: -ms-linear-gradient(90deg, var(--web-color) 0%, #d15a28 50%, var(--web-color)) !important;
  background-image: -o-linear-gradient(90deg, var(--web-color) 0%, #d15a28 50%, var(--web-color)) !important;
  background-image: linear-gradient(90deg, var(--web-color) 0%, #d15a28 50%, var(--web-color)) !important;
  filter          : progid:DXImageTransform.Microsoft.gradient(startColorStr='var(--web-color)', endColorStr='#d15a28') !important;
  background-color: transparent !important;
}

.banner-ti .t-intro .attr .ta-r .badge:hover,
.banner-ti .t-intro .attr .ta-r .badge:focus {
  color              : #fff;
  background-position: 100%;
}

@media screen and (min-width: 992px) {
  .banner-ti .t-intro .attr .attr-link {
    color: #333;
  }
}

@media screen and (min-width: 992px) and (max-width: 1399px) {
  .banner-ti .t-intro .attr .ta-l {
    font-size: 14px;
  }

  .banner-tv .t-intro .attr .ta-r {
    font-size: 15px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .banner-tournament {
    padding-top: 200px;
  }

  .banner-t .t-title {
    font-size    : 26px;
    margin-bottom: 30px;
    line-height  : 36px;
  }

  .banner-ti {
    padding-top   : 10px;
    padding-bottom: 10px;
  }

  .banner-ti .t-intro .attr .ta-l,
  .banner-ti .t-intro .attr .ta-r {
    font-size: 14px;
  }
}

@media screen and (max-width: 991px) {
  .banner-ti .t-intro .attr {
    line-height       : 1.42;
    border-right-width: 0 !important;
    padding-left      : 0 !important;
    padding-right     : 0 !important;
    margin-bottom     : 5px;
    padding-bottom    : 5px;
    border-bottom     : 1px solid rgba(255, 255, 255, .2);
  }
}

@media screen and (max-width: 767px) {
  .banner-tournament {
    padding-top: 100px;
  }

  .banner-t .t-title {
    font-size    : 18px;
    margin-bottom: 15px;
    line-height  : 28px;
  }

  .banner-ti {
    padding-top   : 10px;
    padding-bottom: 10px;
  }

  .banner-ti .t-intro .attr:last-child {
    margin-bottom      : 0;
    border-bottom-width: 0;
  }

  .banner-ti .t-intro .attr .ta-l,
  .banner-ti .t-intro .attr .ta-r {
    font-size: 14px;
  }
}

/* tournament-detail */
.tournament-detail {
  padding-top   : 40px;
  padding-bottom: 25px;
}

/* tab */
.tournament-tabs {
  padding-top   : 10px;
  padding-bottom: 10px;
  top           : 100px;
  z-index       : 2;
}

.tab-tournament .nav-item {
  margin-right: 3px;
}

.tab-tournament .nav-link {
  font-weight               : 700;
  color                     : #333333;
  margin-bottom             : 0;
  padding-right             : 15px;
  padding-left              : 15px;
  position                  : relative;
  text-transform            : uppercase;
  letter-spacing            : .5px;
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius : 0.375rem;
}

.tab-tournament .nav-item.show .nav-link,
.tab-tournament .nav-link.active,
.tab-tournament .nav-link:hover {
  color           : #fff;
  background-color: var(--web-color);
}

@media screen and (max-width: 991px) {
  .tournament-tabs {
    top           : 75px;
    padding-top   : 5px;
    padding-bottom: 5px;
  }

  .tab-tournament .nav-link {
    letter-spacing: .2px;
  }
}

@media screen and (max-width: 767px) {
  .tournament-detail {
    padding-top   : 20px;
    padding-bottom: 20px;
  }

  .tab-tournament .nav-item {
    margin-right: 0;
  }

  .tab-tournament .nav-link {
    font-size     : 12px;
    letter-spacing: inherit;
    padding       : 5px;
    text-transform: none;
    font-weight   : 500;
    line-height   : 1.425;
  }
}

@media screen and (max-width: 374px) {
  .tab-tournament .nav-link {
    font-size: 10px;
  }
}

/* tab result */
.round-match {
  color         : #fff;
  padding       : 8px 15px;
  margin-bottom : 30px;
  letter-spacing: .5px;
}

.box-result {
  border-radius: 4px;
  overflow     : hidden;
  box-shadow   : 0px 0px 1px 0px rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  margin-bottom: 1.5rem;
}

.box-result:hover {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .28)
}

.box-result .head {
  border-bottom: 1px solid #eee;
  padding      : 7px 15px;
  color        : #666;
}

.box-result .head .hl {
  font-weight: 700;
  color      : #333;
}

.box-result .body {
  padding-left : 15px;
  padding-right: 15px;
}

.box-result .body>.match-p+.match-p {
  border-top: 1px solid #f1f1f1;
}

.match-p .br-players {
  padding-top   : 15px;
  padding-bottom: 15px;
}

.br-player+.br-player {
  margin-top: 10px;
}

.match-p .br-players .br-player {
  font-weight: 700;
}

.match-p .br-players .br-player a {
  color    : #333;
  font-size: 14px;
}

.match-p .br-players .br-player a:hover {
  color: var(--web-color);
}

.match-p .br-player img {
  width        : 35px;
  height       : 35px;
  border       : 1px solid #eee;
  border-radius: 50%;
  margin-right : 15px;
}

.match-p .br-r {
  padding-left    : 10px;
  padding-right   : 10px;
  background-color: #f0f3f7;
  font-weight     : 700;
  width           : 40px;
  justify-content : center;
}

.match-p .br-r+.br-r {
  border-left: 1px solid #fff;
}

.match-p .br-win {
  padding-left: 10px;
}

.match-p .br-wb {
  width: 50px;
}

.match-p .br-win i {
  color: var(--web-color);
}

.match-p .br-win span {
  font-size: 10px;
}

.box-result .foot {
  padding-left  : 15px;
  padding-right : 15px;
  padding-top   : 8px;
  padding-bottom: 8px;
  font-size     : 14px;
}

.box-result .foot .fl {
  white-space  : nowrap;
  padding-right: 20px;
}

.box-result .foot .fr {
  font-weight: 500;
}

.box-result .foot .fr a {
  display           : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 767px) {

  .round-match,
  .box-result {
    margin-bottom: 0.75rem;
  }

  .match-p .br-players .br-player a {
    font-size: 14px;
  }

  .box-result .foot {
    font-size: 12px;
  }


}

@media screen and (max-width: 575px) {
  .match-p .br-win {
    display: none !important;
  }
}

/* tab vdv */
.d-vdv {
  color         : #fff;
  padding       : 8px 15px;
  letter-spacing: .5px;
}

.vdv-wrapper {
  box-shadow   : 0 2px 3px 0 rgba(0, 0, 0, .18);
  transition   : box-shadow .15s ease-in-out;
  position     : relative;
  border-radius: 3px;
  overflow     : hidden;
}

.vdv-wrapper:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .28)
}

.vdv-wrapper .box-vdv {
  box-shadow: none;
}

.mb-list>.col-6+.col-6 {
  border-left: 1px solid #f0f3f7;
}

/* ================================================
  PAGE RANKING
================================================= */
table.table-ranking.dataTable thead>tr>th.sorting:before,
table.table-ranking.dataTable thead>tr>th.sorting:after,
table.table-ranking.dataTable thead>tr>th.sorting_asc:before,
table.table-ranking.dataTable thead>tr>th.sorting_asc:after,
table.table-ranking.dataTable thead>tr>th.sorting_desc:before,
table.table-ranking.dataTable thead>tr>th.sorting_desc:after,
table.table-ranking.dataTable thead>tr>th.sorting_asc_disabled:before,
table.table-ranking.dataTable thead>tr>th.sorting_asc_disabled:after,
table.table-ranking.dataTable thead>tr>th.sorting_desc_disabled:before,
table.table-ranking.dataTable thead>tr>th.sorting_desc_disabled:after,
table.table-ranking.dataTable thead>tr>td.sorting:before,
table.table-ranking.dataTable thead>tr>td.sorting:after,
table.table-ranking.dataTable thead>tr>td.sorting_asc:before,
table.table-ranking.dataTable thead>tr>td.sorting_asc:after,
table.table-ranking.dataTable thead>tr>td.sorting_desc:before,
table.table-ranking.dataTable thead>tr>td.sorting_desc:after,
table.table-ranking.dataTable thead>tr>td.sorting_asc_disabled:before,
table.table-ranking.dataTable thead>tr>td.sorting_asc_disabled:after,
table.table-ranking.dataTable thead>tr>td.sorting_desc_disabled:before,
table.table-ranking.dataTable thead>tr>td.sorting_desc_disabled:after {
  opacity: .4;
}

table.table-ranking.dataTable thead>tr>th.sorting_asc:before,
table.table-ranking.dataTable thead>tr>th.sorting_desc:after,
table.table-ranking.dataTable thead>tr>td.sorting_asc:before,
table.table-ranking.dataTable thead>tr>td.sorting_desc:after {
  opacity: .8
}

.tb-ranking .dataTables_paginate .pagination li {
  margin-left: 5px;
}

.tb-ranking .dataTables_paginate .pagination li.previous .page-link,
.tb-ranking .dataTables_paginate .pagination li.next .page-link {
  width: auto;
}

.tb-ranking div.table-responsive>div.dataTables_wrapper>div.row {
  margin-bottom: 20px;
}

.table-ranking thead.head {
  background-color: #8cc641;
  color           : #fff;
}

.table-ranking .img img {
  width        : 50px;
  height       : 50px;
  border-radius: 50%;
}

.table-ranking .name a {
  color      : #333;
  font-weight: 700;
}

.table-ranking .name a:hover {
  color: var(--web-color);
}

.tb-ranking .dataTables_filter {
  display: none;
}

table.table-ranking thead.head th {
  height     : 50px;
  line-height: 1.2;
}

@media screen and (min-width: 992px) {
  table.table-bordered.dataTable {
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  .table_filter {
    margin-top: 15px;
  }

  .tb-ranking .dataTables_paginate .pagination li {
    margin-left : 5px;
    margin-right: 5px;
  }

  .tb-ranking table.dataTable td.dt-control:before {
    line-height: 18px;
  }

  div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
    padding-left: 0;
  }

  div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child {
    padding-right: 0;
  }
}

/* ================================================
  PAGE PLAYER
================================================= */
.banner-tv .t-intro .attr {
  padding-left      : 40px;
  padding-right     : 40px;
  border-right-width: 2px;
}

/******************************/
.mem-avartar {
  position        : relative;
  border-top      : 8px solid #fff;
  border-bottom   : 8px solid #fff;
  border-left     : 8px solid #fff;
  background-color: #f0f3f7;
  text-align      : right;
}

.mem-avartar .mem-img {
  position: relative;
  z-index : 2;
  padding : 15px 50px;
}

.mem-avartar .mem-img .img {
  overflow     : hidden;
  border-radius: 50%;
  margin-left  : auto;
  margin-right: auto;
  position: relative;
  justify-content: center;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.mem-avartar .mem-bg {
  position        : absolute;
  z-index         : 1;
  width           : 100%;
  height          : 40%;
  border-bottom   : 8px solid #fff;
  background-color: #d5de24;
  color           : #333;
  text-align      : left;
}

.mem-avartar .mem-bg .mem-bg-w {
  width       : 100%;
  padding-left: 50px;
}

.mem-avartar .mem-bg .txt {
  font-size    : 16px;
  font-weight  : 900;
  margin-bottom: 10px;
}

.mem-avartar .mem-bg .n {
  font-size  : 40px;
  font-weight: 900;
}

.mem-avartar img {
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  min-width: 100%;
}

.mem-detail {
  border          : 8px solid #fff;
  background-color: #d5de24;
  color           : #333;
  padding         : 50px;
  position        : relative;
}

.mem-detail .md-txt {
  font-size    : 16px;
  font-weight  : 700;
  margin-bottom: 10px;
}

.mem-detail .md-name {
  font-size    : 40px;
  font-weight  : 900;
  margin-bottom: 25px;
  line-height  : 1.3;
  color: var(--web-color);
  position: relative;
}

.mem-detail .attr .txt {
  font-weight  : 700;
  margin-bottom: 6px;
  font-size    : 14px;
  color        : #666;
}

.mem-detail .attr .n {
  font-size    : 22px;
  font-weight  : 700;
  margin-bottom: 20px;
}

.mem-detail .attr .n.ne {
  font-size  : 16px;
  font-weight: 400;
}

.mem-detail .attr .n a {
  color             : #333;
  display           : inherit;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical;

}

.mem-detail .mem-notes {
  font-style : italic;
  font-size  : 12px;
  line-height: 1.425;
  color      : #666;
}
@media screen and (min-width: 1200px) {
  .mem-detail .md-info{
    min-width: calc(50% - 5.25rem);
  }
  .mem-detail .md-info-rank .md-txt{
    min-width: 100px;
  }
}

@media screen and (min-width: 1400px) {
  .mem-avartar .mem-img {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }

  .mem-avartar .mem-img .img {
    width : 400px;
    height: 400px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .mem-avartar .mem-img {
    display    : -webkit-flex;
    display    : -moz-flex;
    display    : -ms-flex;
    display    : -o-flex;
    display    : flex;
    align-items: flex-end !important;
    height     : 100%;
  }

  .mem-avartar .mem-img .img {
    width : 350px;
    height: 350px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-tv .t-intro .attr {
    padding-left : 15px;
    padding-right: 15px;
  }

  .mem-avartar .mem-img {
    height     : 100%;
    display    : -webkit-flex;
    display    : -moz-flex;
    display    : -ms-flex;
    display    : -o-flex;
    display    : flex;
    align-items: center;
  }

  .mem-avartar .mem-img .img {
    width       : 300px;
    height      : 300px;
    margin-right: auto;
  }

  .mem-detail .md-name {
    margin-bottom: 20px;
    color: #cd2027;
  }

  .mem-detail .attr .n {
    margin-bottom: 10px;
  }

  .mem-detail {
    padding: 30px 35px;
  }
}

@media screen and (min-width: 992px) {
  .vdv-banner .carousel-caption {
    bottom: 65px;
  }

  .mem-detail .mem-notes {
    position     : absolute;
    z-index      : 1;
    right        : 0;
    bottom       : 5px;
    width        : 100%;
    padding-left : 35px;
    padding-right: 15px;
    text-align   : right;
  }
  .mem-detail .rank-info{
    color: #808080;
    font-weight: 400;
    font-size: 12px;
  }
}

@media screen and (max-width: 991px) {
  .banner-tv .t-intro .attr {
    border-bottom-color: #f0f3f7;
  }

  .vdv-banner .carousel-caption {
    bottom: 0;
  }

  .banner-tv {
    background-color: #fff;
    color           : #333;
  }

  .mem-avartar .mem-img {
    padding-right: 15px;
    padding-left : 15px;
  }

  .mem-detail {
    padding: 20px 15px;
  }

  .banner-tv .t-intro .attr .ta-r,
  .banner-ti .t-intro .attr .ta-l {
    color: #333;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .mem-avartar .mem-img {
    height     : 100%;
    display    : -webkit-flex;
    display    : -moz-flex;
    display    : -ms-flex;
    display    : -o-flex;
    display    : flex;
    align-items: center;
  }

  .mem-avartar .mem-img .img {
    width       : 300px;
    height      : 300px;
    margin-right: auto;
  }
}

@media screen and (min-width: 768px) {
  .banner-tv .t-intro .attr .ta-r {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .tab-vdv .nav-link {
    font-size     : 12px;
    letter-spacing: inherit;
    padding-left  : 10px;
    padding-right : 10px;
    text-transform: uppercase;
  }

  .mem-avartar {
    text-align: center;
  }

  .mem-avartar .mem-img .img {
    width       : 300px;
    height      : 300px;
    margin-right: auto;
  }

  .mem-detail .attr {
    align-items  : center !important;
    margin-bottom: 10px
  }

  .mem-detail .attr .txt {
    width        : 115px;
    margin-bottom: 0;
  }

  .mem-detail .attr .n {
    margin-bottom: 0;
    font-size    : 16px;
  }

  .mem-detail .md-name {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  .mem-detail .attr .txt {
    width        : 160px;
  }
}

/*@media screen and (max-width: 575px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: calc(100% - 20px);
  }
}
@media screen and (min-width: 576px) and (max-width: 767px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: 540px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: 720px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: 960px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: 1140px;
  }
}
@media screen and (min-width: 1400px){
  .modal-vdv.modal.show .modal-dialog{
    max-width: 1320px;
  }
}*/
.modal-vdv.modal.fade .modal-dialog {
  max-width: calc(100% - 20px);
}

/* ==========================================================================================
  PAGE GALLERY
========================================================================================== */
.grid-gallery>.grid-image-item {
  float: left;
}

.grid-gallery>.grid-image-item .gallery-img {
  border: 1px solid transparent;
}

.grid-gallery>.grid-image-item img {
  width: 100%;
}

@media screen and (min-width:992px) {
  .grid-gallery>.grid-image-item {
    width: 33.333333%;
  }
}

@media screen and (min-width: 768px) and (max-width:991px) {
  .grid-gallery>.grid-image-item {
    width: 50%;
  }
}

@media screen and (min-width: 576px) and (max-width:767px) {
  .grid-gallery>.grid-image-item {
    width: 50%;
  }
}

@media screen and (max-width:575px) {
  .grid-gallery>.grid-image-item {
    width: 50%;
  }
}

/* ================================================
  LOADING
================================================= */
.load-more {
  width  : 150px;
  display: none;
}

.s-loading {
  -webkit-animation: sLoading 1s linear infinite;
  animation        : sLoading 1s linear infinite;
}

@keyframes sLoading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cssload-container.loading .load-more {
  display: inline-block;
}

.cssload-container.loading #show-btn {
  display: none;
}

/* ================================================
  PAGE CONTACT
================================================= */
.contact-form {
  box-shadow   : 0 0px 3px 0 rgba(0, 0, 0, .18);
  border-radius: 5px;
  overflow     : hidden;
  padding      : 30px 40px;
}

.box-contact {
  background-color: #fff;
  box-shadow      : 0 0px 3px 0 rgba(0, 0, 0, .18);
  padding         : 30px;
  border-radius   : 5px;
  overflow        : hidden;
}

.box-contact .icon i {
  font-size: 40px;
  color    : var(--web-color);
}

.box-contact .intro {
  padding-left: 25px;
}

.label-error {
  color  : var(--web-color);
  opacity: .6;
}

.contact-info ul li {
  margin-bottom: 10px;
}

.contact-info ul span {
  color    : #666;
  display  : inline-block;
  min-width: 100px;
}

.contact-info ul a {
  color             : #333;
  -webkit-transition: color 200ms linear 0ms;
  -khtml-transition : color 200ms linear 0ms;
  -moz-transition   : color 200ms linear 0ms;
  -ms-transition    : color 200ms linear 0ms;
  -o-transition     : color 200ms linear 0ms;
  transition        : color 200ms linear 0ms;
}

.contact-info ul a:hover {
  color: var(--web-color);
}

/* ================================================
  SECTION SPONSOR
================================================= */
.sponsor-item .pi-img {
  height            : 100px;
  padding           : 15px;
  border            : 1px solid #f2f2f2;
  -webkit-transition: all 200ms linear 0ms;
  -khtml-transition : all 200ms linear 0ms;
  -moz-transition   : all 200ms linear 0ms;
  -ms-transition    : all 200ms linear 0ms;
  -o-transition     : all 200ms linear 0ms;
  transition        : all 200ms linear 0ms;
}

.sponsor-item .pi-img:hover {
  border-color: var(--web-color);
}

.sponsor-item .pi-img img {
  -webkit-filter    : grayscale(100%);
  filter            : grayscale(100%);
  -webkit-transition: all 200ms linear 0ms;
  -khtml-transition : all 200ms linear 0ms;
  -moz-transition   : all 200ms linear 0ms;
  -ms-transition    : all 200ms linear 0ms;
  -o-transition     : all 200ms linear 0ms;
  transition        : all 200ms linear 0ms;
  max-width         : 100%;
  max-height        : 100%;
  width             : auto;
}

.sponsor-item .pi-img:hover img {
  -webkit-filter: grayscale(0%);
  filter        : grayscale(0%);
}

/* slide nav style */
.sponsor-slider .owl-nav .owl-prev,
.sponsor-slider .owl-nav .owl-next {
  position        : absolute;
  top             : calc(50% - 15px);
  width           : 30px;
  height          : 30px;
  line-height     : 26px;
  border-radius   : 50%;
  background-color: transparent;
  font-size       : 0;
  border          : 2px solid var(--web-color);
}

.sponsor-slider .owl-carousel .owl-nav.disabled {
  display: block;
}

.sponsor-slider .owl-nav .owl-prev:hover,
.sponsor-slider .owl-nav .owl-next:hover {
  opacity: 1;
}

.sponsor-slider .owl-nav .owl-prev.disabled,
.sponsor-slider .owl-nav .owl-next.disabled {
  opacity: .4;
  cursor : no-drop;
  display: none;
}

.sponsor-slider .owl-nav .owl-prev {
  left: -40px;
}

.sponsor-slider .owl-nav .owl-next {
  right: -40px;
}

.sponsor-slider .owl-nav .owl-prev:before,
.sponsor-slider .owl-nav .owl-next:before {
  font-family       : "Font Awesome 6 Pro";
  font-size         : 18px;
  color             : #666;
  position          : absolute;
  right             : 0;
  top               : 0;
  left              : 0;
  bottom            : 0;
  margin            : auto;
  width             : 100%;
  height            : 100%;
  text-align        : center;
  -webkit-transition: all 0.2s ease 0s;
  -ms-transition    : all 0.2s ease 0s;
  transition        : all 0.2s ease 0s;
}

.sponsor-slider .owl-nav .owl-prev:hover:before,
.sponsor-slider .owl-nav .owl-next:hover:before {
  color: var(--web-color);
}

.sponsor-slider .owl-nav .owl-prev:before {
  content: "\f104";
}

.sponsor-slider .owl-nav .owl-next:before {
  content: "\f105";
}

@media screen and (max-width: 767px) {
  .sponsor-slider {
    padding-left : 30px;
    padding-right: 30px;
  }

  .sponsor-item .pi-img img {
    -webkit-filter: none;
    filter        : none;
  }
}

/* ================================================
  PAGE NEWS
================================================= */
@media screen and (min-width: 992px) {
  .section-news-recent {
    padding-top   : 0;
    padding-bottom: 0;
  }

  .title-recent {
    font-size    : 20px;
    margin-bottom: 25px;
  }
}

/* ================================================
  PAGE ABOUT
================================================= */
.menu-right ul li {
  padding-left : 25px;
  position     : relative;
  margin-bottom: 7px;
}

.menu-right ul i {
  position: absolute;
  top     : 5px;
  left    : 0;
  color   : var(--web-color);
}

.menu-right ul li a {
  color      : #333;
  font-weight: 500;
}

.menu-right ul li.active a,
.menu-right ul li:hover a {
  color: var(--web-color);
}

/* ==========================================================================================
  Icon-contact
========================================================================================== */
.icon-slider img {
  width: 22px;
}

.icon-contact {
  width           : 60px;
  height          : 60px;
  border-radius   : 50%;
  background-color: #8cc641;
  position        : fixed;
  right           : 100px;
  bottom          : 25px;
  border          : 1px solid transparent;
  padding         : 10px;
  z-index         : 5;
}

.icon-contact::before {
  content         : "";
  background-color: #8cc641;
  border-radius   : 50%;
  position        : absolute;
  z-index         : 2;
  width           : 60px;
  height          : 60px;
  left            : 0;
  top             : 0;
}

.icon-contact .icon-contact-slide {
  z-index: 2;
}

.icon-contact .icon-contact-slide .carousel-inner {
  width           : 39px;
  height          : 39px;
  line-height     : 39px;
  border-radius   : 50%;
  background-color: #fff;
}

.icon-contact .icon-contact-slide .carousel-item {
  color              : var(--web-color);
  text-align         : center;
  font-size          : 20px;
  border-radius      : 50%;
  width              : 39px;
  height             : 39px;
  line-height        : 38px;
  transition-duration: .1s;
}

.icon-contact-dropdown {
  position: absolute;
  z-index : 2;
  top     : 0;
  left    : 0;
  width   : 58px;
  height  : 58px;
}

.icon-contact-dropdown .click-icon-dropdown {
  position        : absolute;
  z-index         : 2;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  -webkit-opacity : 0;
  opacity         : 0;
  background-color: transparent;
}

.icon-contact-dropdown .show.click-icon-dropdown {
  background-color: #8cc641;
  -webkit-opacity : 1;
  opacity         : 1;
  border-radius   : 50%;
}

.icon-contact-dropdown .show.click-icon-dropdown:after {
  content    : "\f00d";
  font-family: "Font Awesome 6 Pro";
  position   : absolute;
  left       : 0;
  right      : 0;
  bottom     : 0;
  top        : 0;
  margin     : auto;
  color      : #fff;
  border     : 0;
  width      : 20px;
  height     : 20px;
  font-size  : 20px;
  line-height: 1;
  text-align : center;
}

.icon-contact-dropdown .dropdown-menu {
  right             : 0;
  bottom            : 70px !important;
  top               : auto !important;
  left              : auto !important;
  -webkit-transform : none !important;
  -moz-transform    : none !important;
  -ms-transform     : none !important;
  -o-transform      : none !important;
  transform         : none !important;
  border            : 0;
  -webkit-box-shadow: 0 0 10px -1px rgba(0, 0, 0, .6);
  box-shadow        : 0 0 10px -1px rgba(0, 0, 0, .6);
}

.icon-contact-dropdown .dropdown-menu:after {
  position    : absolute;
  bottom      : -7px;
  right       : 25px;
  left        : auto;
  display     : inline-block !important;
  border-right: 8px solid transparent;
  border-top  : 8px solid #FFF;
  border-left : 8px solid transparent;
  content     : '';
}

.icon-contact-dropdown .dropdown-menu>.dropdown-item {
  padding-left : 15px;
  padding-right: 15px;
  margin-bottom: 10px;
}

.icon-contact-dropdown .dropdown-menu>.dropdown-item:last-child {
  margin-bottom: 0;
}

.icon-contact-show {
  display      : inline-block;
  width        : 40px;
  height       : 40px;
  line-height  : 39px;
  border-radius: 50%;
  text-align   : center;
  color        : #fff;
  margin-right : 5px;
}

.icon-contact .icon-contact-slide .carousel-item .icon-slider .fa-facebook-f {
  color: #0470e5;
}

.icon-contact-show.icon-contact-phone {
  background-color: var(--web-color);
}

.icon-contact-show.icon-contact-email {
  background-color: #ff643a;
}

.icon-contact-show.icon-contact-facebook {
  background-color: #0470e5;
}

@media screen and (max-width: 767px) {
  .icon-contact {
    right : 20px;
    bottom: 20px;
  }
}

/***************************************************************************************************/
.icon-ph-circle-fill {
  background-color        : #bfebfc;
  opacity                 : .5 !important;
  position                : absolute;
  z-index                 : 1;
  width                   : 74px;
  height                  : 74px;
  top                     : -8px;
  left                    : -8px;
  -webkit-border-radius   : 100%;
  -moz-border-radius      : 100%;
  border-radius           : 100%;
  border                  : 2px solid transparent;
  opacity                 : .1;
  -webkit-animation       : icon-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation          : icon-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation           : icon-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation            : icon-circle-fill-anim 2.3s infinite ease-in-out;
  animation               : icon-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition      : all .5s;
  -moz-transition         : all .5s;
  -o-transition           : all .5s;
  transition              : all .5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin   : 50% 50%;
  -ms-transform-origin    : 50% 50%;
  -o-transform-origin     : 50% 50%;
  transform-origin        : 50% 50%;
}

/** icon-ph-circle-fill */
@-moz-keyframes icon-circle-fill-anim {
  0% {
    -moz-transform: rotate(0) scale(.7) skew(1deg);
    opacity       : .2
  }

  50% {
    -moz-transform: rotate(0) -moz-scale(1) skew(1deg);
    opacity       : .2
  }

  100% {
    -moz-transform: rotate(0) scale(.7) skew(1deg);
    opacity       : .2
  }
}

@-webkit-keyframes icon-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(.7) skew(1deg);
    opacity          : .2
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity          : .2
  }

  100% {
    -webkit-transform: rotate(0) scale(.7) skew(1deg);
    opacity          : .2
  }
}

@-o-keyframes icon-circle-fill-anim {
  0% {
    -o-transform: rotate(0) scale(.7) skew(1deg);
    opacity     : .2
  }

  50% {
    -o-transform: rotate(0) scale(1) skew(1deg);
    opacity     : .2
  }

  100% {
    -o-transform: rotate(0) scale(.7) skew(1deg);
    opacity     : .2
  }
}

@keyframes icon-circle-fill-anim {
  0% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity  : .2
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity  : .2
  }

  100% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity  : .2
  }
}

/***************************************************************************************************/
.icon-ph-circle {
  opacity                 : .5 !important;
  width                   : 100px;
  height                  : 100px;
  top                     : -21px;
  left                    : -21px;
  position                : absolute;
  background-color        : transparent;
  -webkit-border-radius   : 100%;
  -moz-border-radius      : 100%;
  border-radius           : 100%;
  border                  : 2px solid #8cc641;
  opacity                 : .1;
  -webkit-animation       : icon-circle-anim 1.2s infinite ease-in-out;
  -moz-animation          : icon-circle-anim 1.2s infinite ease-in-out;
  -ms-animation           : icon-circle-anim 1.2s infinite ease-in-out;
  -o-animation            : icon-circle-anim 1.2s infinite ease-in-out;
  animation               : icon-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition      : all .5s;
  -moz-transition         : all .5s;
  -o-transition           : all .5s;
  transition              : all .5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin   : 50% 50%;
  -ms-transform-origin    : 50% 50%;
  -o-transform-origin     : 50% 50%;
  transform-origin        : 50% 50%;
}

/** icon-ph-circle */
@-moz-keyframes icon-circle-anim {
  0% {
    -moz-transform : rotate(0) scale(.5) skew(1deg);
    opacity        : .1;
    -moz-opacity   : .1;
    -webkit-opacity: .1;
    -o-opacity     : .1
  }

  30% {
    -moz-transform : rotate(0) scale(.7) skew(1deg);
    opacity        : .5;
    -moz-opacity   : .5;
    -webkit-opacity: .5;
    -o-opacity     : .5
  }

  100% {
    -moz-transform : rotate(0) scale(1) skew(1deg);
    opacity        : .6;
    -moz-opacity   : .6;
    -webkit-opacity: .6;
    -o-opacity     : .1
  }
}

@-webkit-keyframes icon-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(.5) skew(1deg);
    -webkit-opacity  : .1
  }

  30% {
    -webkit-transform: rotate(0) scale(.7) skew(1deg);
    -webkit-opacity  : .5
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity  : .1
  }
}

@-o-keyframes icon-circle-anim {
  0% {
    -o-transform: rotate(0) kscale(.5) skew(1deg);
    -o-opacity  : .1
  }

  30% {
    -o-transform: rotate(0) scale(.7) skew(1deg);
    -o-opacity  : .5
  }

  100% {
    -o-transform: rotate(0) scale(1) skew(1deg);
    -o-opacity  : .1
  }
}

@keyframes icon-circle-anim {
  0% {
    transform: rotate(0) scale(.5) skew(1deg);
    opacity  : .1
  }

  30% {
    transform: rotate(0) scale(.7) skew(1deg);
    opacity  : .5
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity  : .1
  }
}

/* ==========================================================================================
  SLICK SLIDE
========================================================================================== */
.rf-slick img {
  width: 100%;
}

.rf-slick .item {
  position: relative;
  cursor  : pointer;
}

.rf-slick .item .i-thumb {
  border-radius: 3px;
}

.rf-slick .slick-big .item {
  border-radius: 5px;
  overflow     : hidden;
}

.rf-slick .slick-big .item a {
  position: relative;
  display : inline-block;
}

.rf-slick .slick-big .item a:before {
  z-index   : 1;
  content   : "";
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .5));
}

.rf-slick .slick-big .item.iv .iv-title {
  font-size  : 16px;
  font-weight: 600;
  color      : rgba(255, 255, 255, .9);
  position   : absolute;
  z-index    : 2;
  bottom     : 15px;
  left       : 20px;
  right      : 20px;
}

.rf-slick .slick-small .item .i-thumb {
  border: 1px solid transparent;
}

.rf-slick .slick-small .slick-current .item .i-thumb {
  border-color: #8cc641;
}

.rf-slick .item.iv .icon-youtube {
  font-size : 50px;
  color     : rgba(255, 255, 255, .75);
  position  : absolute;
  z-index   : 2;
  top       : 50%;
  left      : 50%;
  transition: color .25s ease-in-out;
  transform : translate(-50%, -50%);
}

.rf-slick .slick-small .item.iv .icon-youtube {
  font-size: 0;
}

.rf-slick .item.iv:hover .icon-youtube {
  color: rgba(255, 255, 255, 1);
}

.rf-slick .slick-prev,
.rf-slick .slick-next {
  z-index: 1;
  width  : 30px;
  height : 30px;
}

.rf-slick .slick-prev:before,
.rf-slick .slick-next:before {
  color    : #fff;
  font-size: 30px;
}

.rf-slick .slick-prev:before,
.rf-slick .slick-next:before {
  opacity: .6666;
}

.rf-slick .slick-prev:hover:before,
.rf-slick .slick-next:hover:before {
  opacity: 1;
}

.rf-slick .slick-prev.slick-disabled:before,
.rf-slick .slick-next.slick-disabled:before {
  opacity: .25;
}

.rf-slick .slick-big .slick-prev {
  left: 5px;
}

.rf-slick .slick-big .slick-next {
  right: 5px;
}

@media screen and (min-width:992px) {

  .rf-slick .slick-small .slick-prev,
  .rf-slick .slick-small .slick-next {
    left: 50%;
  }

  .rf-slick .slick-small .slick-prev {
    top              : 5px;
    -webkit-transform: translate(-50%, 0) rotate(90deg);
    -ms-transform    : translate(-50%, 0) rotate(90deg);
    transform        : translate(-50%, 0) rotate(90deg);
  }

  .rf-slick .slick-small .slick-next {
    top              : auto;
    bottom           : 5px;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform    : translate(-50%, -50%) rotate(90deg);
    transform        : translate(-50%, -50%) rotate(90deg);
  }

  .rf-slick .slick-big .item {
    border-width: 0;
  }

  .rf-slick .slick-small .item {
    top          : -1px;
    border-bottom: 12px solid transparent;
  }
}

@media screen and (min-width:1440px) {
  .rf-slick .slick-small .i-thumb {
    width   : 100%;
    height  : 173px;
    overflow: hidden;
  }
}

@media screen and (min-width:1200px) and (max-width:1399px) {
  .rf-slick .slick-small .i-thumb {
    width   : 100%;
    height  : 147px;
    overflow: hidden;
  }
}

@media screen and (min-width:991px) and (max-width:1199px) {
  .rf-slick .slick-small .i-thumb {
    width   : 100%;
    height  : 122px;
    overflow: hidden;
  }
}

@media screen and (max-width:991px) {
  .rf-slick .slick-big {
    margin-bottom: 15px;
  }

  .rf-slick .slick-small .item {
    border-left : 7px solid transparent;
    border-right: 8px solid transparent;
  }

  .rf-slick .slick-small .slick-prev {
    left: 5px;
  }

  .rf-slick .slick-small .slick-next {
    right: 5px;
  }

  .slick-small .slick-list {
    margin-left : -7px;
    margin-right: -8px;
  }
}

@media screen and (max-width:767px) {
  .rf-slick .slick-big .item.iv .iv-title {
    font-size  : 12px;
    bottom     : 5px;
    left       : 10px;
    right      : 10px;
    line-height: 1.425;
  }
}

/* ================================================
  SEARCH BANNER
================================================= */
.search-filter input,
.s-button .btn {
  height: 45px;
}

.search-wrapper {
  padding: 15px 0;
}

.title-filter {
  font-size     : 20px;
  line-height   : 45px;
  font-weight   : 500;
  text-transform: uppercase;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  .title-filter {
    font-size: 18px;
  }
}

@media screen and (min-width:768px) {
  .s-button .btn {
    width: 100%;
  }

  .title-filter {
    text-align   : right;
    margin-bottom: 0;
  }

  /*.search-banner{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .search-wrapper{
    background-color: rgba(0,0,0,.6666);
    border-radius: 5px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.18);
  }
  .search-wrapper .title-section,
  .search-wrapper .intro-section{
    color: #fff;
  }*/
}

@media screen and (max-width:991px) {
  .search-wrapper {
    padding: 15px 0 0;
  }

  .search-filter {
    margin-bottom: 15px;
  }

  .title-filter {
    font-size: 14px;
  }
}

@media screen and (max-width:767px) {
  .search-wrapper {
    padding-top: 10px;
  }

  .s-button {
    position: absolute;
    z-index : 1;
    right   : 0;
    bottom  : 15px;
  }

  .s-button .btn {
    padding-left : 14px;
    padding-right: 14px;
  }

  .title-filter {
    line-height  : 1.425;
    font-size    : 18px;
    margin-bottom: 15px;
    text-align   : center;
  }
}

/* ==========================================================================================
  MODAL
========================================================================================== */
.modal-style {
  padding-top   : 30px;
  padding-bottom: 30px;
}

.modal-style .modal-dialog {
  max-width    : 970px;
  min-width    : 350px;
  margin       : auto;
  padding-left : 15px;
  padding-right: 15px;
}

.modal-style .modal-header {
  border-bottom-width: 0;
  padding-bottom     : 0;
}

.modal-style .modal-header .modal-title {
  font-weight   : 700;
  color         : #004A8F;
  text-transform: uppercase;
  width         : 100%;
  text-align    : center;
}

.modal-style button.modal-close span {
  font-size: 0;
}

.modal-style .modal-header .close {
  display         : -webkit-flex;
  display         : -moz-flex;
  display         : -ms-flex;
  display         : -o-flex;
  display         : flex;
  padding         : .5rem;
  margin          : -1rem -1rem -1rem auto;
  border          : 0;
  background-color: transparent;
}

@media screen and (min-width: 992px) {
  .modal-style .modal-header {
    padding: 30px 35px 0;
  }

  .modal-style .modal-body {
    padding: 30px 35px;
  }
}

/* ==========================================================================================
  HR PAGE
========================================================================================== */
.list-hr .item-hr {
  margin-bottom: 22px;
}

.box-hr {
  background-color: #fafafa;
  border-radius   : 10px;
  height          : 100%;
}

.box-hr figure {
  padding: 30px 30px 0;
}

.box-hr figure a {
  position     : relative;
  width        : 70%;
  padding-top  : 70%;
  border-radius: 50%;
  overflow     : hidden;
  display      : inline-block;
}

.box-hr figure img {
  position: absolute;
  z-index : 1;
  top     : 0;
  left    : 0;
  width   : 100%;
  /*height: 100%;*/
}

.box-hr .hr-wrapper {
  padding-left  : 15px;
  padding-right : 15px;
  padding-bottom: 20px;

  line-height: 1.7;
}

.box-hr .hr-wrapper h2 {
  color         : var(--web-color);
  text-transform: uppercase;
  font-weight   : 700;
  font-size     : 20px;
  display       : block;
}

.box-hr .hr-wrapper .intro {
  text-transform    : uppercase;
  /*  display       : -webkit-box;
  overflow          : hidden;
  text-overflow     : ellipsis;
  -webkit-line-clamp: 1;
  white-space       : normal;
  -webkit-box-orient: vertical; */
}

.mhr-l .img {
  margin-bottom: 10px;
}

.mhr-l .img img {
  width: 100%;
}

.mhr-l .intro {
  text-align: center;
}

/* modal */
.modal-hr .mhr-l {
  background-color: #e5edf4;
  padding         : 30px;
  border-radius   : 8px;
}

.modal-hr .mhr-l .img {
  margin-bottom: 20px;
  border-radius: 50%;
  overflow     : hidden;
  box-shadow   : 0px 0px 8px 3px #ccc;
  position     : relative;
  padding-top  : 100%;
}

.modal-hr .mhr-l img {
  position: absolute;
  z-index : 1;
  top     : 0;
  left    : 0;
  width   : 100%;
}

.modal-hr .intro {
  text-transform: uppercase;
  text-align    : center;
}

.share-hr {
  padding-top   : 7px;
  padding-bottom: 1px;
}

/* hr box other */
.mm-list>div {
  margin-bottom: 15px;
}

.box-mm {
  background-color: #fff;
  border-radius   : 8px;
  padding-top     : 40px;
  padding-left    : 15px;
  padding-right   : 15px;
  height          : 100%;
}

.box-mm .box-hr figure {
  padding: 15px 15px 10px;
}

.box-mm .box-hr .hr-wrapper {
  padding-left  : 5px;
  padding-right : 5px;
  padding-bottom: 1px;
}

.modal-hr .modal-dialog {
  max-width: 1140px;
}

.modal-hr .mhr-l .title-service {
  text-transform: uppercase;
  font-weight   : 700;
  color         : var(--web-color);
}

.box-hr .hr-wrapper .intro {
  font-size: 12px;
}

.s-share .b_share {
  font-size: 20px;
}

.s-share.sv-share {
  padding-top: 0;
}

.s-share.sv-share .b_share {
  display     : inline-block;
  margin-right: 15px;
  padding     : 0;
  text-align  : left;
}

.s-share .s-facebook {
  color: #0A66C2;
}

.s-share .s-tel {
  color: #22A9E3;
}

.s-share .s-email {
  color: #3B9AF3;
}

@media screen and (min-width: 1200px) {
  .modal-hr .mhr-l .title-service {
    font-size: 22px;
  }
}

@media screen and (min-width: 992px) {
  .modal-hr .modal-body {
    padding: 15px 50px 50px;
  }

  .modal-hr .modal-body .mhr-r {
    padding-left: 20px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .box-hr .hr-wrapper h2 {
    font-size: 18px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .modal-hr .mhr-l .title-service {
    font-size: 20px;
  }

  .box-hr .hr-wrapper h2 {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .modal-hr .mhr-l .title-service {
    font-size: 20px;
  }

  .box-hr .hr-wrapper h2 {
    font-size: 15px;
  }

  .box-hr figure {
    padding: 20px 20px 0;
  }

  .box-hr .hr-wrapper .intro {
    font-size: 10px;
  }
}

@media screen and (max-width: 767px) {
  .list-hr .item-hr {
    margin-bottom: 10px;
  }

  .mhr-r {
    padding-top: 30px;
  }

  .modal-hr .mhr-l .title-service {
    font-size: 16px;
  }

  .box-hr .hr-wrapper {
    padding-left  : 5px;
    padding-right : 5px;
    padding-bottom: 5px;
  }

  .box-hr .hr-wrapper h2 {
    font-size: 12px;
  }

  .box-hr .hr-wrapper .intro {
    font-size: 10px;
  }

  .box-hr figure {
    padding-left : 10px;
    padding-right: 10px;
    padding-top  : 15px;
  }

  .box-hr figure a {
    width      : 80%;
    padding-top: 80%;
  }
}

/* ==========================================================================================
  SECTION SPONSOR TOURNAMENT
========================================================================================== */
.section-sponsor {
  padding-top   : 15px;
  padding-bottom: 0;
}

@media screen and (max-width: 991px) {
  .section-sponsor {
    padding-bottom: 15px;
  }
}

/* ==========================================================================================
  404 PAGE
========================================================================================== */
.error-content h1 {
  font-size  : 400px;
  line-height: 0.8;
  color      : var(--web-color);
  font-weight: 700;
}

.error-content h1 span {
  position: relative;
}

.error-content h1 span:after {
  position               : absolute;
  content                : '';
  -webkit-background-size: contain;
  background-size        : contain;
  left                   : 0;
  top                    : 0;
  right                  : 0;
  bottom                 : 0;
  background-color       : transparent;
  background-position    : center;
  background-repeat      : repeat;
}

.error-content span.error-para {
  display  : block;
  font-size: 70px;
  color    : var(--web-color);
}

.error-content a {
  margin-top: 20px;
}

@media screen and (min-width:768px) and (max-width:991px) {
  .error-content h1 {
    font-size: 280px;
  }
}

@media screen and (min-width:576px) and (max-width:767px) {
  .error-content h1 {
    font-size: 190px;
  }

  .error-content span.error-para {
    font-size: 30px;
  }
}

@media screen and (max-width:575px) {
  .error-content h1 {
    font-size: 100px;
  }

  .error-content span.error-para {
    font-size: 25px;
  }
}

/* ==========================================================================================
  VIDEO PAGE
========================================================================================== */
.video-item {
  border-radius: 5px;
  overflow     : hidden;
}

.video-item a {
  position: relative;
  display : inline-block;
}

.video-item a:before {
  z-index   : 1;
  content   : "";
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .5));
}

.video-item img {
  width: 100%;
}

.video-item .icon-youtube {
  font-size : 35px;
  color     : rgba(255, 255, 255, .75);
  position  : absolute;
  z-index   : 2;
  top       : 50%;
  left      : 50%;
  transition: color .25s ease-in-out;
  transform : translate(-50%, -50%);
}

.video-item .iv-title {
  font-size  : 14px;
  font-weight: 600;
  color      : rgba(255, 255, 255, 1);
  position   : absolute;
  z-index    : 2;
  bottom     : 10px;
  left       : 20px;
  right      : 20px;
  line-height: 1.425;
}

@media screen and (min-width: 992px) {
  .video-list .row>.col-12:first-child .video-item a:before {
    background: -webkit-linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .6));
    background: -o-linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .6));
    background: linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, .6));
  }

  .video-list .row>.col-12:first-child .video-item .icon-youtube {
    font-size: 50px;
  }

  .video-list .row>.col-12:nth-child(1) .video-item .iv-title,
  .video-list .row>.col-12:nth-child(2) .video-item .iv-title {
    font-size: 18px;
  }
}

/* ==========================================================================================
  ROUNT MATCH
========================================================================================== */
.vdv-round-match .accordion .accordion-item {
  border-width : 0;
  margin-bottom: 1px;
}

.vdv-round-match .accordion .accordion-button {
  background-color: #e7f1ff;
  box-shadow      : none;
  border-radius   : 0 !important;
}

.vdv-round-match .accordion .accordion-button.collapsed {
  background-color: #f0f3f7;
}

.vdv-round-match .accordion .accordion-header {
  margin-bottom: 1.5rem;
}

.vdv-round-match .accordion .accordion-body {
  padding: 0;
}

@media screen and (max-width:767px) {
  .vdv-round-match .accordion .accordion-button {
    font-size  : 12px;
    padding    : 10px !important;
    line-height: 1.4258;
  }

  .vdv-round-match .accordion .accordion-header {
    margin-bottom: 0.75rem;
  }
}

@media screen and (max-width:767px) {
  .t-achievement table {
    font-size: 12px;
  }

  .t-achievement table th {
    white-space: nowrap;
  }
}

/* ==========================================================================================
  LIVESCORE
========================================================================================== */
.livescore-nav{
  display: none;
}
.has-livescore .livescore-nav{
  display: block;
}
@media screen and (min-width: 1400px){
  .has-livescore.nav-header .navbar-nav.menu-main .nav-link{
    padding-left: 13px;
    padding-right: 13px;
  }
  .has-livescore .menu-main{
    padding-right: 70px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .has-livescore.nav-header .navbar-nav.menu-main .nav-link{
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
  .has-livescore .menu-main{
    padding-right: 70px;
  }
}
@media screen and (min-width: 992px) {
  .has-livescore .livescore-nav{
    position: absolute;
    z-index: 1;
    top: 37px;
    right: 0;
  }
  .has-livescore .livescore-nav{
    color: var(--web-color);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    animation: colors-fill 1s infinite;
  }
  @keyframes colors-fill {
    0% {color: var(--web-color);}  
    33.33% {color: #ff2e4b;}  
    66.66% {color: #8cc641;}  
  }
}
@media screen and (max-width: 991px) {
  .has-livescore .livescore-nav{
    width: 42px;
    height: 34px;
  }
  .has-livescore .livescore-nav .score-icon-m svg{
    fill: var(--web-color);
    animation: colors-fill 1s infinite;
  }
  @keyframes colors-fill {
    0% {fill: var(--web-color);}
    33.33% {fill: #ff2e4b;}
    66.66% {fill: #8cc641;}
  }
  .livescore-nav{
    position: relative;
  }
  .livescore-nav .score-text{
    position: absolute;
    z-index: 1;
    top: 23px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    text-transform: lowercase;
    color: #333;
  }
}

.tournament-livescore{
  font-size: 14px;
}
@media screen and (max-width: 991px) {
  .tournament-livescore{
    font-size: 11px;
  }
}

/* ==========================================================================================
  lich su ranking
========================================================================================== */
.table-history-ranking thead th{
  vertical-align: middle;
}
.table-history-ranking .rg{
  color: red;
}
.table-history-ranking .rt{
  color: green;
}
@media screen and (max-width: 991px) {
  .tournament-history-tabs{
    overflow-x: auto;
  }
  .tournament-history-tabs .tab-vdv{
    flex-wrap: nowrap;
  }
  .tournament-history-tabs .tab-vdv .nav-item{
    white-space: nowrap;
  }
  .table-history-ranking{
    width: auto;
    min-width: 940px;
  }
  .table-history-ranking thead th:nth-child(2){
    width: 330px;
  }
}

/* ================================================
  COLOR THEME
  color: var(--web-color);
  color: #8cc641;
  color: #FCC600;
  color: #333333;
  color: #666;
================================================= */