/*// out: ../css/main.less, compress: true, strictMath: true, sourceMap: false*/
// https://github.com/jdiehl/brackets-less-autocompile
html {}

/* main Color

1eaae3

*/

body {
    font-family:  system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 16px;
    padding-top: 138px;
}
.pcHidden { display: block !important; }
.spHidden { display: none !important; }

.btnHeight {
    display: inline-block;
    height: 100px;
    max-height: 65px;
}

iframe {
    width: 99.8%;
    height: 100vh;
}

.windowsLoad {
    background: transparent;
    border: 0px;
}
.windowsLoad button {
    background-color: #fff;
    float: right;
}
.windowsLoad .modal-body {
    padding: 0;
}
.windowsLoad .modal-body img {
    width: 100%;
}

.topHeader {
    color: #fff;
    background: #197399;
    padding: 0.6rem 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 301;
    border-bottom: 1px solid #197399; 
}
.topHeader .datetimePart {
    display: inline-block;
}
.topHeader .topLoginPart {
    color: #dabc6f;
    float: right;
    text-transform: uppercase;
}
.topHeader #datetime {
    display: inline;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
    letter-spacing: 0;
}
.topHeader .btn_topJoin {
    background: linear-gradient(180deg, #ffffff 0%, #fff 100%);
    color: #0093CF;
    padding: .15rem .5rem;
    margin-right: 1.5rem;
    font-size: .75rem;
    border: none;
    border-radius: 0.3rem;
    font-weight: bold;
}
.topHeader .btn_topLogin {
    color: #fff;
    margin-right: 1.5rem;
    font-size: .8em;
    font-weight: bold;
    text-decoration: none;
}
.topHeader .menuIcon {
    cursor: pointer;
    display: inline-block;
    height: 1.16rem;
    width: 2.28rem;
    background-size: 100% 100%;
}
.topHeader .menuIcon.btn {
    padding: 0;
    border: 0;
    margin-top: -12px;
}
.topHeader .slide-menu .slide-menu-here .icon-menu {
    max-width: 2.33rem;
    width: 5rem;
    height: 2rem;
    margin-right: 1rem;
    fill: #fff;
}
.topHeader .slide-menu {
    position: fixed;
    -webkit-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    background: #0093CF;
    top:0;
    bottom: 0;
    color: #333;
    width: 250px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    overflow: auto;
    z-index: 9998;
}
.topHeader .slide-menu>.slide-menu-here>.menu {
    padding: .5em 0;
}
.topHeader .slide-menu>.slide-menu-here>.menu li>a {
    color: #ffffff;
    position: relative;
    display: inline-block;
    padding: .8em 1em;
    width: 100%;
    border-bottom: 1px solid #05719d;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
}
.topHeader .slide-menu>.slide-menu-here>.menu li>a img {
    display: none;
}
.topHeader .slide-menu>.slide-menu-here>.menu li>.sub-menu {
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .65s;
    transition-duration: .65s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    display:none;
}
.topHeader .slide-menu>.slide-menu-here>.menu li>.sub-menu.active {
    display: block;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.topHeader .slide-menu>.slide-menu-here>.menu li>.sub-menu>li>a {
    padding-left: 2em;
    font-size: 13px;
    border-bottom: 1px solid #05719d;
}
.topHeader .slide-menu>.slide-menu-here>.menu li>a.active,
.topHeader .slide-menu a:hover {
    background-color: #05719d;
}
.topHeader .slide-left {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 9999;
}
.topHeader .menuDarkBg {
    display: block;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    z-index: 2;
}
.topHeader .slide-left~.menuDarkBg {
    visibility: visible;
}

.langClass {
    display: inline-block;
}
.langClass .btn {
    color: #197399;
    background-color: #ffffff;
    border: 1px solid #197399;
    font-size: 0.8rem;
}
.langClass ul { 
    background-color: transparent;
    padding: 0px; 
    font-size: 0.8rem;
    font-weight: bold;
}
.langClass ul li { 
    background-color: transparent;
}
.langClass ul li a {
    background-color: #fff;
    color: #1eaae3;
    border: 1px solid #1eaae3;
    border-top: 0px;
}
.langClass ul li:first-child a {    
    border-top: 1px solid #1eaae3;
    border-radius: 0.375rem 0.375rem 0 0;
}
.langClass ul li:last-child a {
    border-bottom: 1px solid #1eaae3;
    border-radius: 0 0 0.375rem 0.375rem;
}
.langClass ul li a:hover,
.langClass .btn.show,
.langClass .btn:hover {
    color: #fff;
    background-color: #0c6083;
    border-color: #1eaae3;
    transition: 0.3s;
}
.langClass img {
    width: 25px;
}

.navbar {
    background: linear-gradient(90deg,#1eaae3 0,#1eaae3 160px,#ffffff 0,#ffffff);
    padding: 0;
    margin-top: 53px;
    z-index: 9;
}
.navbar .nav-item > a {
    height: 100%;
    display: flex;
    align-items: center;
    color: #1eaae3;
    font-size: .8rem;
    font-weight: bold;
    padding: 2rem 0;
    border-bottom: .2rem solid #ffffff;
}
.navbar .nav-item > a:hover,
.navbar .nav-item > a.active {
    color: #1eaae3;
    border-bottom: .2rem solid #1eaae3;
}
.navbar .logoBg {
    position: relative;
    background: #1eaae3;
    max-width: 10rem;
    width: 100%;
    height: auto;
    padding: 1.5rem 0;
    margin-right: 3rem;
    text-align: center;
}  
.navbar .logoBg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 40px;
    background: linear-gradient(to bottom right, #1eaae3, #1eaae3 49%, transparent 51%, transparent);
}
.navbar .logoBg img {
    width: 100%;
}
.navbar .btn-group .btn-danger {
    color: #1eaae3;
    background: none;
    border: 0px;
    box-shadow: none;
    border-radius: 0px;
    font-size: .8rem;
    font-weight: 700;
    padding-top: 0;
}
.navbar .btn-group .btn-danger.active,
.navbar .btn-group .btn-danger.show {
    color: #1eaae3;
    border-bottom: .2rem solid #1eaae3;
    padding-bottom: .2rem;
}
.navbar .btn-group .btn-danger.show {
    color: #1eaae3;
    border-bottom: .2rem solid #1eaae3;
    padding-bottom: .2rem;
}
.navbar .btn-group .dropdown-menu.show {
    padding: 0;
    margin-top: 0;
}
.navbar .btn-group .dropdown-menu a {
    color: #1eaae3;
    background: #ffffff;
    font-size: .8rem;
    font-weight: 700;
    padding: 10px 20px;
    border: 1px solid #1eaae3;
}
.navbar .btn-group .dropdown-menu a:hover,
.navbar .btn-group .dropdown-menu a:focus,
.navbar .btn-group .dropdown-menu a:active,
.navbar .btn-group .dropdown-menu .active {
    color: #fff;
    background: #1eaae3;
}


.temHeader {
    background: #1eaae3;
    display: block;
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
}
.temHeader a img {
    width: 25%;
}

#langSelect img {
    width: 27px;
}

.blankPage {
    padding: 60px 0;
    background: #fff;
}
.notFoundPage {
    color: #1eaae3;
    text-align: center;
}
.itemNotFound .modelImg img {
    width: 30%;
}
.itemNotFound h1 {
    margin-bottom: 10px;
}
.itemNotFound h1 span {
    display: block;
    font-size: 10rem;
    font-weight: bold;
    line-height: 8rem;
}
.itemNotFound .btn_blank {
    background: linear-gradient(180deg,#1eaae3 0%,#0e5f81 100%);
    color: #fff;
    border: none;
    font-weight: bold;
}

.carousel img {
    width: 100%;
}

/***** service Top Part *****/
.serviceTopPart {
    background: #fff;
    margin-right: 0;
    padding: 25px 0 25px 15px;
    border-bottom: 2px solid #1eaae39e;
    box-shadow: inset 0 0 0px 0px hsl(197.36deg 77.87% 50.39% / 77%), 0 3px 10px 0 rgb(30 170 227 / 50%) !important;
}
.serviceTopPart a.serviceDesc {
    color: #197399;
    text-decoration: none;
}
.serviceTopPart a:active,
.serviceTopPart a:focus,
.serviceTopPart a:hover {
    color: #253d74;
    transition: 0.6s;
}
.serviceTopPart .serviceDesc {
    display: inline-flex;
    color: #fff;
    font-size: 13px;
    max-height: inherit;
}
.serviceTopPart .serviceDesc .serviceImg {
    display: inline-block;
    width: 40px;
    margin-right: 6px;
}
.serviceTopPart .serviceDesc .serviceImg img {
    width: 100%;
}
.serviceTopPart .serviceDesc .serviceContent {
    margin-left: 0px 
}
.serviceTopPart .serviceDesc .serviceContent .service-title {
    font-weight: bold;
    font-size: 15px;
}
.serviceTopPart .serviceDesc p {
    margin-bottom: 0;
}

/***** service Part *****/
.servicePart {
    margin-right: 0;
    padding: 25px 0 25px 15px;
}
.servicePart a.serviceDesc {
    color: #197399;
    text-decoration: none;
}
.servicePart a:hover {
    color: #1eaae39e;
    border: 2px solid #1eaae39e;
    transition: 0.6s;
}
.servicePart .serviceDesc {
    display: inline-flex;
    color: #0093cf;
    border: 2px solid #197399;
    border-radius: 16px;
    padding: 12px 13px;
    font-size: 13px;
    margin: 25px 0 20px;
    width: 100%;
}
.servicePart .serviceDesc .serviceImg {
    display: inline-block;
    width: 50px;
}
.servicePart .serviceDesc .serviceImg img {
    width: 100%;
}
.servicePart .serviceDesc .serviceContent {
    margin-left: 8px 
}
.servicePart .serviceDesc .serviceContent .service-title {
    font-weight: bold;
    font-size: 0.9rem;
}
.servicePart .serviceDesc p {
    margin-bottom: 0;
    font-size: 0.7rem;
}

.marqueePart {
    position: relative;
    background: #197399;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0;
    width: 100% !important;
}
.marqueePart .iconPart { 
    position: absolute;
    background: #1eaae3;
    padding-left: 12px;
    top: 3px;
    left: 0; 
}
.marqueePart .iconPart:before { 
    content: '';
    position: absolute;
    background: #197399;
    width: 35px;
    height: 25px;
    z-index: 1;
    left: 0;
}
.marqueePart .iconPart i {
    position: relative;
    color: #ffffff;
    z-index: 1;
} 
.marqueeInfo {
    display: inline-block;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes marquee2 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

.btnEffet {
    background: radial-gradient(at center center, #5dd4fc 0, #0093cf 100%);
    -webkit-border-radius: 10px;
    border-radius: 50px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    -webkit-animation: glowing 2000ms infinite;
    -moz-animation: glowing 2000ms infinite;
    -o-animation: glowing 2000ms infinite;
    animation: glowing 2000ms infinite;
}
.btnEffet i {
    margin-right: 6px;
}
@-webkit-keyframes glowing {
  0% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
      padding: 12px 30px;
      -webkit-box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
  50% { 
      background: #1cfe30; 
      padding: 16px 34px;
      -webkit-box-shadow: 0 0 40px #0093cf; 
    }
  100% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
      padding: 12px 30px;
      -webkit-box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
}

@-moz-keyframes glowing {
  0% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      -moz-box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
  50% { 
      background: #0093cf;
      padding: 16px 34px;
      -moz-box-shadow: 0 0 40px #0093cf; 
    }
  100% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      -moz-box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
}

@-o-keyframes glowing {
  0% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
  50% { 
      background: #0093cf;
      padding: 16px 34px;
      box-shadow: 0 0 40px #0093cf; 
    }
  100% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
}

@keyframes glowing {
  0% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
  50% { 
      background: #0093cf;
      padding: 16px 34px;
      box-shadow: 0 0 40px #0093cf; 
    }
  100% { 
      background: radial-gradient(at center center,#5dd4fc 0,#0093cf 100%);
      padding: 12px 30px;
      box-shadow: 0 0 3px radial-gradient(at center center,#5dd4fc 0,#0093cf 100%); 
    }
}

.css_grid_gallery {
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
}
.css_grid_gallery img {
  display: inline-block;
  width: 100%;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
#img_bg_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 3;
}
#modal_image {
  position: fixed;
  max-width: 90%;
  max-height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  box-shadow: 0 0.25rem 5rem rgba(0, 0, 0, 0.75);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: all 400ms cubic-bezier(0.2, 0, 0, 1.25);
}
#modal_image.is_visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
#img_close_cta {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  color: #FFFFFF;
  cursor: pointer;
  z-index: 7;
  transform: scale(0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#img_close_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
#previous_img_cta {
  position: fixed;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%) rotate(-45deg) scale(0.1);
  border: 1rem solid #FFFFFF;
  border-right-color: transparent;
  border-bottom-color: transparent;
  z-index: 7;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#previous_img_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(-45deg) scale(1);
}
#next_img_cta {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%) rotate(45deg) scale(0.1);
  border: 1rem solid #FFFFFF;
  border-left-color: transparent;
  border-bottom-color: transparent;
  z-index: 7;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
#next_img_cta.is_visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(45deg) scale(1);
}

.brandName {
    text-align: center;
    margin-bottom: 6px;
}
.brandName a {
    color: #fff;
    background: linear-gradient(90deg, #1eaae3 0%, #0093cf 100%);
    font-family: archivo, Sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 8px 20px;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
}

.featurette {
    color: #fff;
    background-image: url(../img/register/registerBg.jpg?);
    background-position: center center;
    background-size: cover;
    padding: 30px 0;
    border-bottom: 2px solid #0093cf;
}
.featurette .modelImg {
    height: 100%;
    width: 100%;
}
.featurette .modelImg img {
    width: 100%;
}
.featurette h3 {
    color: #0093cf;
    font-size: 50px;
    font-weight: bold;
    line-height: 39px;
}
.featurette .featInfo {
    margin-top: 23%;
    margin-bottom: 50px;
}

.aboutus {
    position: relative;
    background-image: url(../img/bg-about.jpg);
    background-position: center center;
    background-size: cover;
    color: #fff;
    border-bottom: 2px solid #0093cf;
}
.aboutus:before {
    content: '';
    position: absolute;
    background-color: #000000;
    opacity: 0.8;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.aboutus .row {
    position: relative;
    z-index: 1;
}
.aboutus .modelImg {
    position: relative;
    height: 100%;
    width: 100%;
}
.aboutus .modelImg img {
    position: absolute;
    width: 100%;
    top: 5%;
}
.aboutus .aboutTit { padding: 50px 0 30px; }
.aboutus .aboutTit h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.aboutus hr {
    color: #0093cf;
    width: 15%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.aboutus .aboutInfo {
    margin: 10% 0 15%;
    text-align: justify;
    height: 100%;
    min-height: 300px;
}
.aboutus .aboutInfo strong {
    color: #1eaae3;
}

.ourGame {
    position: relative;
    background-image: url(../img/register/registerBg.jpg);
    background-position: center center;
    background-size: cover;
    color: #fff;
    border-bottom: 2px solid #1eaae3;
    padding-bottom: 50px;
}
.ourGame .ourGameTit { padding: 50px 0 30px; }
.ourGame .ourGameTit h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.ourGame hr {
    color: #0093cf;
    width: 15%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.ourGame .boxImg {
    background: #01141e;
    padding: 4px 4px 0;
    border: 1px solid #1eaae3;
}
.ourGame .nav-tabs {
    border-bottom: 0;
}
.ourGame .nav-tabs .nav-link {
    color: #fff;
    background-color: #000;
    border-color: #1eaae3;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 6px;
}
.ourGame .nav-tabs .nav-link:focus,
.ourGame .nav-tabs .nav-link:hover,
.ourGame .nav-tabs .nav-item.show .nav-link,
.ourGame .nav-tabs .nav-link.active {
    background-color: transparent;
    background-image: linear-gradient(180deg, #1da9e2 0%, #02638b 100%);
    cursor: pointer;
    transition: 0.3s;
}
.ourGame .boxImg .col-4 {
    padding-right: 2px;
    padding-left: 2px;
}
.ourGame .boxImg .contentInfo img {
    width: 100%;
    margin-bottom: 4px;
}

/*** register Part ***/
.registerStep { 
    background-image: url(../img/register/registerBg.jpg?v=1.0);
    background-position: center center;
    background-size: cover;
    color: #fff;
    font-size: 15px;
    border-bottom: #1eaae3 solid 2px;
}
.registerStep .bgColor {
    background-color: #000000;
    opacity: 0.8;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    padding-bottom: 30px;
}
.registerStep .downloadApp a {
    display: block;
    padding-top: 30px;
}
.registerStep .downloadApp img {
    width: 100%;
}
.registerStep .findTit { padding: 50px 0 30px; }
.registerStep .findTit h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.registerStep hr {
    color: #0093cf;
    width: 30%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.registerStep #myCarousel {
    margin-bottom: 20px;
}
.registerStep #myCarousel img {
    width: 100%;
}
.registerStep .registerStepDesc { 
    padding-top: 2rem;
}
.registerStep .registerStepDesc strong { 
    color: #00b5ff; 
}

.gamesPlatform { 
    background-image: url(../img/2023_04/bottomBg.jpg?v=1.0);
    background-position: center center;
    background-size: cover;
    text-align: center;
    border-bottom: 2px solid #1eaae3;
}
.gamesPlatform .bgColor {
    background-color: #000000;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    padding-bottom: 60px;
    opacity: 0.8;
}
.gamesPlatform hr {
    color: #0093cf;
    width: 20%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.gamesPlatform .findTit { 
    padding: 50px 0 60px; 
}
.gamesPlatform .findTit h2 {
    color: #1CFE30;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.gamesPlatform .findTit h2 span { display: block; }
.gamesPlatform .carousel-wrap {
    position: relative;
    color: #000;
    margin: 0 auto;
    padding: 0 5%;
    width: 80%;
}
.gamesPlatform .owl-carousel .item {
    position: relative;
    z-index: 100; 
    -webkit-backface-visibility: hidden; 
}
.gamesPlatform .owl-nav > div {
    margin-top: -26px;
    position: absolute;
    top: 50%;
    color: #cdcbcd;
}
.gamesPlatform .owl-nav i {
    font-size: 52px;
}
.gamesPlatform .owl-nav .owl-prev {
    left: -30px;
}
.gamesPlatform .owl-nav .owl-next {
    right: -30px;
}

.gamesCat { 
    background-image: url(../img/index/gameCat-bg.jpg);
    background-position: center center;
    background-size: cover;
    text-align: center;
    border-bottom: #1eaae3 solid 2px;
    padding-bottom: 50px;
}
.gamesCat hr {
    color: #0093cf;
    width: 20%;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.gamesCat .findTit { 
    padding: 50px 0 60px; 
}
.gamesCat .findTit h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.gamesCat .findTit h2 span { display: block; }
.gamesCat .card { 
    background: transparent;
    color: #fff;
    border: 1px solid #1eaae3;
    margin-bottom: 20px;
}
.gamesCat .card h3 {
    font-size: 1.5rem;
}
.gamesCat .card .card-text {
    padding-top: 10px;
    min-height: 340px;
    font-size: 0.8rem;
} 

.winboxInfoBox {
    background: #fff;
    color: #197399;
    padding: 50px 0;
}
.winboxInfoBox .modelImg img { width: 100%; }
.winboxInfoBox .winboxInfoBoxTit { padding: 30px 0 10px; }
.winboxInfoBox hr {
    color: #ddd;
    margin: 0 auto;
    border-top: 0.1rem solid;
    opacity: 1;
}
.winboxInfoBox .winboxInfoBoxDesc {
    margin: 0 auto;
    text-align: justify;
}
.winboxInfoBox .winboxInfoBoxDesc h4 {
    font-size: 1.25rem;
}
.winboxInfoBox .winboxInfoBoxDesc p {
    color: #000;
    font-size: 12px;
}
.winboxInfoBox .winboxInfoBoxDesc p span {
    display: block;
}

.bodyPart .faqInfo {
    background: transparent;
    background-image: none;
    padding: 0;
}

/* Register Page (All page using) */
.gamesInfo,
.newsInfo,
.promoInfo,
.tgInfo,
.twtInfo,
.faqInfo,
.downloadInfo,
.fourDInfo,
.loginInfo,
.registerInfo {
    background-image: url(../img/register/registerBg.jpg);
    background-position: center center;
    background-size: cover;
    color: #c7c7c7;
    padding: 50px 0;
    font-size: 1rem;
}
.registerInfo.registerInfo-noneBottom {
    padding-top: 20px;
    border: 0;
}
.registerInfo.registerInfo-noneBottom p {
    line-height: 30px;
}
.fourDInfo .fourDLive,
.loginInfo .pluglogin,
.registerInfo .plugRegister {
    border: 1px solid #1eaae3;
}
.registerInfo .res_img {
    padding: 40px 0 10px;
    text-align: center;
}
.registerInfo .res_img img {
    margin-bottom: 25px;
    width: 100%;
}
.gamesInfo .findTit,
.newsInfo .findTit,
.promoInfo .findTit,
.tgInfo .findTit,
.twtInfo .findTit,
.faqInfo .findTit,
.csInfo .findTit,
.downloadInfo .findTit,
.fourDInfo .findTit,
.loginInfo .findTit,
.registerInfo .findTit { 
    padding: 50px 0 30px; 
}
.gamesInfo .findTit h2,
.newsInfo .findTit h2,
.promoInfo .findTit h2,
.tgInfo .findTit h2,
.twtInfo .findTit h2,
.faqInfo .findTit h2,
.csInfo .findTit h2,
.downloadInfo .findTit h2,
.fourDInfo .findTit h2,
.loginInfo .findTit h2,
.registerInfo .findTit h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}
.gamesInfo .gamesDesc h3,
.newsInfo .newsContentLeft h3,
.downloadInfo h3,
.loginInfo h3,
.registerInfo h3 {
    color: #6fd3fb;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
}
.gamesInfo hr,
.newsInfo hr,
.promoInfo hr,
.tgInfo hr,
.twtInfo hr,
.faqInfo hr,
.csInfo hr,
.downloadInfo hr,
.fourDInfo hr,
.loginInfo hr,
.registerInfo hr {
    color: #6fd3fb;
    width: 15%;
    margin: 0 auto;
    border-top: .1rem solid;
    opacity: 1;
}


/* indexFightSEO */
.expandable {
    padding: 3em 0;
    font-family: sans-serif;
    font-size: .8rem;
    border-bottom: 0px solid #ff0810;
}
.expandable.open .excerpt {
    max-height: 0;
}
.expandable h4 {
    font-weight: bold;
}
.expandable.open .content {
    max-height: 999em;
}
.expandable.animated .excerpt {
    max-height: 0 !important;
}
.expandable.animated .content {
    min-height: 999em;
}
.expandable .viewport {
    overflow: hidden;
    transition: max-height 1s, min-height 1s;
}
.expandable .excerpt,
.expandable .content {
    transition: opacity 0.1s;
}
.expandable .excerpt p:first-child,
.expandable .content p:first-child {
    margin-top: 0;
    margin-bottom: 0;
}
.expandable .excerpt {
    overflow: hidden;
}
.expandable .content {
    max-height: 0;
    overflow: hidden;
}
.expandable .btn-link {
    color: #197399;
    display: block;
    background: #ffffff;
    font-weight: 700;
    width: 100%;
    text-decoration: none;
}
.expandable a {
    color: #1eaae3;
    font-weight: bold;
    text-decoration: none;
}
.expandable h4,
.expandable a.wbLink {
    color: #1eaae3;
}

/*  4d Page & winbox-4d */
.fourDPage {
    padding: 0 !important;
    overflow: hidden;
}
.fourDInfo .fourD_img {
    background: url(../img/4d/luckynumberborder.png?v=1.0) no-repeat center center;
    background-size: contain;
    padding: 30px 0 10px;
}
.fourDInfo .fourD_img p {
    color: #fff;
    font-family: "Archivo", Sans-serif;
    font-size: 5rem;
    font-weight: 700;
    text-align: center;
}

/*  login & register link page */
body.linkSubPage {
    padding-top: 10px;
    padding-bottom: 25px;
}
.linkSubPage iframe {
    width: 99.8%;
    height: 93vh;
}

/* Download Page */
.downloadInfo .downloadDesc {
    background: url(../img/download/descBg.jpg?v=1.0) no-repeat center center;
    background-size: auto;
    margin-bottom: 3rem;
    padding: 40px 0 10px;
    text-align: left;
    border-radius: 20px;   
    border: 1px solid #1eaae3;
}
.downloadInfo .downloadDesc img {
    margin-bottom: 25px;
    width: 100%;
}
.csInfo .csDesc .card,
.downloadInfo .downloadDesc .card {
    background: none;
    border: none;
}
.downloadInfo .downloadDesc .card .card-body {
    padding: 5rem 2rem;
}
.downloadInfo .downloadDesc .appClass img {
    margin-top: 8px;
    margin-right: 20px;
    max-width: 20%;
    float: left;
}
.downloadInfo .downloadDesc .appClass h3 {
    text-align: left;
}
.downloadInfo .downloadDesc .appClass h3 span {
    color: #6fd3fb;
    display: block;
    font-size: 3rem;
    font-weight: bold;
}

/* Customer Service Page */
.csInfo {
    color: #7c7c7c;
    background-image: none;
}
.csInfo .findTit h2 {
    color: #6fd3fb;
}
.csInfo .csDesc img {
    width: 100%;
}
.csInfo .csDesc .cs_box {
    border: 1px solid #095ebd;
    border-radius: 1rem;
    text-align: left;
    padding: 1rem;
    margin-bottom: 1rem;
}
.csInfo .csDesc .cs_box .cs_icon {
    display: inline-block;
    color: #fff;
    background: linear-gradient(180deg, #0093cf 0, #1eaae3 100%);
    font-size: 2rem;
    line-height: 0;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    padding-top: 27px;
    margin-right: 10px;
    text-align: center;
    float: left;
}
.csInfo .csDesc .cs_box .serviceBox {
    margin-left: 70px;
    line-height: 1rem;
    font-size: .8rem;
}
.csInfo .csDesc .cs_box .serviceBox h5 {
    font-size: 1rem;
    margin-bottom: 0;
}
.csInfo .csDesc .cs_box .serviceBox span {
    display: block;
    margin-bottom: 1rem;
}
.csInfo .csDesc .cs_box .serviceBox a {
    color: #fff;
    font-size: .8rem;
}

/*  Topup Guideline Page */
.newsInfo .newsDesc,
.promoInfo .promoDesc,
.twtInfo .twtDesc,
.tgInfo .tgDesc {
    border: 1px solid #1eaae3;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: left;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.twtInfo .twt_video,
.tgInfo .tg_img {
    padding: 20px;
}
.newsInfo .news_img .card,
.twtInfo .twt_video .card,
.promoInfo .promo_img .card,
.tgInfo .tg_img .card {
    background: transparent;
    border: none;
}
.newsInfo .news_img img,
.twtInfo .twt_video video,
.promoInfo .promo_img img,
.tgInfo .tg_img img {
    width: 100%;
}
.twtInfo .twtDesc h5,
.promoInfo .promoDesc h5,
.tgInfo .tgDesc h5 {
    margin-bottom: 0;
}
.twtInfo .twtDesc small,
.promoInfo .promoDesc small,
.tgInfo .tgDesc small {
    font-size: .9rem;
}
.tgInfo .stepCard {
    position: relative;
    padding-left: 70px;
    margin-bottom: 2.3rem;
}
.tgInfo .stepCard:before {
    content: '';
    position: absolute;
    background-color: #d50000;
    color: #fff;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}
.tgInfo .stepCard.step1:before { content: '1'; }
.tgInfo .stepCard.step2:before { content: '2'; }
.tgInfo .stepCard.step3:before { content: '3'; }
.tgInfo .stepCard.step4:before { content: '4'; }
.tgInfo hr {
    color: #0093cf;
    width: 30%;
    margin: 0 auto;
    border-top: .1rem solid;
    opacity: 1;
}

/*  Promotion Page */
.promoInfo .promoDesc img,
.promoInfo .promoDesc {
    border-radius: 6px;
}
.newsInfo .newsDesc .card-body,
.promoInfo .promoDesc .card-body {
    min-height: 208px;
}

/*  News Page */
.newsInfo .newsContent {
    text-align: center;
    margin-bottom: 30px;
}
.newsInfo .newsContentLeft h3,
.newsInfo .newsContentLeft {
    text-align: left;
}

/*  Topup Withdrawal Tutorial Page */
.newsInfo .newsDesc hr,
.twtInfo .twtDesc hr {
    margin: 1.2rem 0;
    border-top: .2rem solid;
}

/*  Games Page */
.gamesInfo img {
    width: 100%;
    margin-bottom: 10px;
}

/**** FAQ ****/
.faqInfo .faqDesc .accordion {
    background: none;
    border-radius: 0;
    --bs-accordion-bg: none;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    border: 0px;
}
.faqInfo .faqDesc .accordion-item {
    margin-bottom: 15px;
    border: 1px solid #1eaae3;
    border-radius: .8rem;
}
.faqInfo .faqDesc button.collapsed {
    color: #1eaae3;
    background: none;
    box-shadow: none;
}
.faqInfo .faqDesc button {
    color: #fff;
    background: #1eaae3;
    border-bottom: none;
    border-top-left-radius: .8rem !important;
    border-top-right-radius: .8rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none;
}
.faqInfo .faqDesc .accordion-button.collapsed {
    background: rgb(30 170 227 / 7%);
    border-radius: .8rem !important;
}
.faqInfo .faqDesc .accordion-button::after,
.faqInfo .faqDesc .accordion-button.collapsed::after {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    font-weight: 900;
    background-image: none;
    color: #1eaae3;
}
.faqInfo .faqDesc .accordion-button::after {
    color: #fff;
}
.faqInfo .faq_img {
    color: #fff;
    text-align: left;
    padding: 20px;
}
.faqInfo .faq_img a {
    color: #1eaae3;
    font-weight: 700;
}
.faqInfo .faqDesc h5 {
    margin-bottom: 0;
}

/*** Footer ***/
footer {
    position: relative;
    background: #fff;
    bottom: 0;
    border-top: 2px solid #1eaae3;
    width: 100%;
    z-index: 5;
}
footer .footerInfoBox {
    color: #000;
    font-size: .9rem;
    padding-top: 1rem;
}
footer .footerInfoBox ul { padding: 0; }
footer .footerInfoBox ul li {
    list-style: none;
}
footer .footerTit {
    margin: 0;
    padding: 0 0 0 10px;
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #1eaae3;
}
footer .footerTit h3 {
    color: #197399;
    font-family: "Anybody", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}
footer .footerInfoBox .paymentBank ul li {
    display: inline-block;
    margin-bottom: 6px;
}
footer .footerInfoBox .paymentBank img {
    width: 50px;
}
footer .footerInfoBox a {
    color: #197399;
    display: block;
    margin-bottom: 18px;
    text-decoration: none;
}
footer .footerInfoBox a:focus .serviceBox h5,
footer .footerInfoBox a:active .serviceBox h5,
footer .footerInfoBox a:hover .serviceBox h5 {
    color: #d00;
    transition: 0.6s;
}
footer .footerInfoBox a:focus .serviceBox span,
footer .footerInfoBox a:active .serviceBox span,
footer .footerInfoBox a:hover .serviceBox span {
    color: #979797;
    transition: 0.6s;
}
footer .footerInfoBox a i {
    float: left;
    margin-right: 5px;
}
footer .footerInfoBox a .serviceBox {
    margin-left: 45px;
    line-height: 1rem;
}
footer .footerInfoBox ul li a i {
    display: inline-block;
    color: #fff;
    background: #25d366;
    font-size: 1.5rem;
    line-height: 0;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding-top: 17px;
    margin-right: 10px;
    text-align: center;
}
footer .footerInfoBox ul li:nth-child(2) a i {
    background: #1877F2;
}
footer .footerInfoBox ul li:nth-child(3) a i {
    background: #e36666;
}
footer .footerInfoBox ul li:nth-child(4) a i {
    background: #039be5;
}
footer .footerInfoBox ul li a:hover i {
    background: #1ca750;
    transition: 0.6s;
}
footer .footerInfoBox ul li:nth-child(2) a:hover i {
    background: #1060c7;
}
footer .footerInfoBox ul li:nth-child(3) a:hover i {
    background: #dd3c3c;
}
footer .footerInfoBox ul li:nth-child(4) a:hover i {
    background: #29759b;
}
footer .footerInfoBox .footerServiceBoxTit {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: bold;
}

footer .copyright {
    background: #197399;
    color: #fff;
    text-align: center;
}
footer .copyright span {
    display: block;
    padding: 6px 20px;
    font-size: .9rem;
}

footer .sp-footer {
    position: fixed;
    display: inline-flex;
    color: #fff;
    background-image: url(../img/index/gameCat-bg.jpg);
    background-position: center center;
    width: 100%;
    padding: 8px 0;
    bottom: 0px;
    text-align: center;
    box-shadow: 0 0px 15px 0 #cb0101 !important;
}
footer .sp-footer img {
    height: auto;
    max-width: 50%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
footer .sp-footer a.icon-box {
    color: #fff;
    text-decoration: none;
}
footer .sp-footer .icon-box {
    position: relative;
    
}
footer .sp-footer .icon-box .center-logo {
    position: absolute;
    bottom: -30px;
    margin-left: -29%;
    border-radius: 50%;
    max-width: 60%;
}
footer .sp-footer span {
    display: block;
    margin-top: 8px;
    font-size: 0.7rem;
}


/***** Mobile Media *****/
@media (min-width: 1025px) {
    .aboutus .modelImg img {
        top: 5%; 
    }
}
@media (max-width: 1024px) {
    main {
        position: relative;
    }
    
    .aboutus .modelImg img {
        top: 25%; 
    }
    
    .gamesCat .card .card-text {
        min-height: 440px;
    }
}

@media (max-width: 991px) {
    body { padding-top: 65px; }
    
    .fourDPage { padding-top: 0 !important; }
    
    .spHidden { display: block !important; }

    .pcHidden,
    .hideTopWhatapp,
    .navbar-expand-md .navbar-collapse { 
        display: none !important;
    }
    .topHeader {
        padding: 1rem 0;
    }
    .topHeader .btn_topJoin {
        font-size: 1em;
    }
    
    .navbar {
        margin-top: 0;
        display: none;
    }
    
    .serviceTopPart {
        padding: 20px 0 5px 15px;
    }
    .serviceTopPart a.serviceDesc {
        margin-bottom: 20px;
        font-size: 0.7rem;
    }
    .serviceTopPart .serviceDesc .serviceImg {
        width: 65px;
    }
    
    .servicePart .serviceDesc {
        height: 100vh; 
        max-height: 100px;
    }
    
    .aboutus .aboutInfo {
        margin: 4% 0 6%;
    }
    .aboutus .modelImg img {
        position: initial;
        top: 0;
        margin-bottom: 20px;
    }
    .gamesCat .card .card-text {
        min-height: 610px;
    }
    
    .downloadInfo .downloadDesc .card .card-body {
        padding: 2rem;
    }
    .downloadInfo .downloadDesc .appClass h3 {
        font-size: 1.2rem;
    }
    .downloadInfo .downloadDesc .appClass h3 span {
        font-size: 1.8rem;
    }
    
    .promoInfo .promoDesc .card-body {
        min-height: 150px;
    }
    newsInfo .newsDesc .card-body {
        min-height: 250px;
    }
    
/*
    footer .copyright {
        padding-bottom: 30%;
    }
*/
    
    footer .sp-footer {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .pcHide { display: none; }
    .pcShow{ display: block; }
}

@media (max-width: 767px) {
    .temHeader a img {
        width: 36%;
    }
    
    .mobileHide { display: none; }
    .mobileShow { display: block; }
    
    .servicePart .serviceDesc {
        padding: 20px 0 20px 15px;
        margin: 5px 0 5px;
        height: auto;
        max-height: inherit;
    }
    
    .featurette .modelImg {
        position: relative;
        height: 50%;
        width: 50%;
        margin: 0 auto;
    }
    .featurette .featInfo {
        margin-top: 8%;
        padding: 0 30px;
    }
    .gamesCat .card .card-text {
        min-height: auto;
    }
    
    .downloadInfo .downloadDesc .appClass img {
        margin-top: 6px;
        margin-right: 20px;
        max-width: 22%;
    }
    .downloadInfo .downloadDesc .card .card-body {
        padding: 0rem 1rem 2rem;
        text-align: center;
    }
    .downloadInfo .downloadDesc .appClass h3 {
        font-size: 1.3rem;
        text-align: left;
    }
    .downloadInfo .downloadDesc .appClass h3 span {
        font-size: 2rem;
    }
    
    .newsInfo .newsDesc .card-body,
    .promoInfo .promoDesc .card-body {
        min-height: inherit;
    }
}

@media (max-width: 575px) {
    .topHeader .datetimePart {
        display: none;
    }
    .wp-bottom-menu-item { font-size: 14px; }
    
    .servicePart .serviceDesc {
        height: auto;
        max-height: inherit;
    }
    
    .featurette .modelImg {
        height: 80%;
        width: 80%;
    }
    .featurette h3 {
        line-height: 50px;
    }
    
    .ourGame .nav-tabs .nav-item {
        display: inline-block;
        width: 50%;
    }
    .ourGame .nav-tabs .nav-link {
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /*  login & register link page */
    body.linkSubPage {
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        margin-top: 25px;
    }
    .linkSubPage iframe {
        padding-top: 25px;
        padding-bottom: 6px;
        width: 99.8%;
        height: 90vh;
    }
}

@media (max-width: 460px) {
    body { padding-top: 55px }
    
    .fourDPage { padding-top: 0 !important; }
    
    .topHeader {
        padding: 0.65rem 0;
    }
    .topHeader .btn_topJoin,
    .topHeader .btn_topLogin {
        font-size: .7em;
        margin-right: .5rem;
    }
    
    .navbar {
        background: linear-gradient(90deg,#fff 0,#fff 30px,#19723c 0,#19723c);
    }
    .navbar .logoBg {
        width: 90px;
        padding: 0.65rem 0;
    }
}

@media (max-width: 375px) {
    .topHeader #datetime {
        font-size: 10px;
    }
    
    .topHeader .btn_topJoin, 
    .topHeader .btn_topLogin {
        margin-right: .2rem;
    }
}

@media (max-width: 320px) {
    .windowsLoad .modal-body {
        margin-top: 50%;
    }
    
    .featurette .featInfo {
        padding: 0 20px;
    }
}