/*************** CSS for Desktop ***************/
@keyframes pulse_old {
	0% {
		transform: scale(0.95);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.95);
	}
}
@-webkit-keyframes pulse {
    0% {
		transform: scale(0.95);
        -webkit-filter: brightness(1.6);
        filter: brightness(1.6);
    }

    50% {
        transform: scale(1);
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }

    100% {
		transform: scale(0.95);
        -webkit-filter: brightness(1.6);
        filter: brightness(1.6);
    }
}
header, footer {
	display: none;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    opacity: 0;
    transition: opacity .15s linear;
}
.modal.show {
    display: block;
    opacity: 1;
}
.modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.88);
}
.modal-dialog {
    position: relative;
    width: 500px;
    max-width: 90%;
    top: 50%;
    margin: 0 auto;
    pointer-events: none;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-50px);
    transform: translate(0,-50px);
}
.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    border-radius: .3rem;
    outline: 0;
    padding: 20px 15px;
    background-color: #000;
    border: 2px solid #fff;
}
.modal-title {
    width: 100%;
    display: inline-block;
    color: #f2e200;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
}
.modal-body {
    color: #fff;
    padding: 0;
    line-height: 1.3;
    padding: 1rem 0;
}
.modal-content .close {
    position: absolute;
    right: -4%;
    bottom: 104%;
    z-index: 2;
    color: #f2e200;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
.pulse {
	transform: scale(1);
	animation: pulse 1s linear infinite;
}
html, body, #main, #wrapper, .j-section {
    /* height: 100%; */
}
html, body {
    background-color: #021708 !important;
}
#main, #wrapper {
    background-color: transparent !important;
}
body, #main, #wrapper {
    /* overflow: hidden; */
}
ol ol, ol ul, ul ol, ul ul {
	margin: 1.5em 0 1.5em 1.5em;
}
.j-section {
    margin: 0 auto;
    /* max-width: 100%; */
}
body {
    background-image: url(../img/bg-1.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    /* background-attachment: fixed; */
}
#main, #wrapper {
    background-color: transparent;
}
.col-inner>.img:not(:last-child), .col>.img:not(:last-child), blockquote, dl, figure, form, ol, p, pre, ul {
    margin-bottom: 0;
}
.j-slider .img {
    width: 33.333333% !important;
    display: flex;
    align-items: flex-end;
    min-height: 8.5vw;
}
.j-img {
    padding: 0 0.6% !important;
}
.j-img .img-inner {
    margin-bottom: 2%;
    margin-left: -13.5%;
    z-index: 99;
}
.flickity-page-dots {
    bottom: -5%;
}
/*.j-rank {
	height: 80%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 10px;
}
.j-rank-1 {
	height: 95%;
}/**/
.contentRank > div {
  display: none;
}
.contentRank > div.active {
  display: block;
}
.vuatab {
	background: linear-gradient(82.47deg, rgba(95, 182, 32, 0.8) 4.35%, rgba(10, 95, 3, 0.8) 20.03%, rgba(23, 88, 3, 0.32) 60.36%, rgba(0, 172, 52, 0) 93.66%);
    border: 0.95px solid #5FDDF3;
	border-radius: 19.05px;
    padding: 0 30px 30px 30px;
}
.vuatab .nav > li {
	width: 32.5%;
}
.vuatab .nav > li > a {
	font-size: 0;
    display: block;
    width: 100%;
    padding-top: 14.28%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/vuadolom.webp);
}
.vuatab .nav > li:first-child > a {
    background-image: url(../img/vuaxanhlet.webp?t=2);
}
.vuatab .nav > li:last-child > a {
    background-image: url(../img/thele.webp);
}
.vuatab .nav {
	transform: translateY(-50%);
}
/*************** CSS for landscape Desktop ***************/
@media (max-width: 1750px) {
    .j-slider .img {
        min-height: calc(8.5vw*0.92);
    }
}
@media (max-width: 1500px) {
    .j-slider .img {
        min-height: calc(8.5vw*0.93);
    }
}
@media (max-height: 660px) and (orientation: landscape) {

}
/*************** CSS for Tablet ***************/
@media (max-width: 1300px) and (orientation: landscape) {
    .j-section {
        max-width: 100% !important;
        font-size: 12px;
    }
    .flickity-page-dots .dot {
        height: 6px;
        width: 6px
    }
    .hide-for-medium, [data-show=hide-for-medium] {
        display: none !important;
    }
    .show-for-medium, [data-show=show-for-medium] {
        display: block !important;
    }
}
@media (max-width: 1023px) and (orientation: landscape) {
    .j-section {
        max-width: 90% !important;
        font-size: 7px;
    }
}
@media (min-width: 720px) and (max-height: 300px) and (orientation: landscape) {
    .j-section {
        max-width: 65% !important;
        font-size: 5px;
    }
}
@media (min-width: 820px) and (max-height: 300px) and (orientation: landscape) {
    .j-section {
        max-width: 65% !important;
        font-size: 5px;
    }
}
@media (min-width: 850px) and (max-height: 300px) and (orientation: landscape) {
    .j-section {
        max-width: 65% !important;
        font-size: 5px;
    }
}
@media (min-width: 880px) and (max-height: 330px) and (orientation: landscape) {
    .j-section {
        max-width: 65% !important;
        font-size: 5px;
    }
}
@media (orientation: portrait) {
    html, body, #main, #wrapper, .j-section {
        height: auto;
    }
    body, #main, #wrapper {
        overflow: visible;
    }
    body {
        background-image: url(../img/bg-mb.webp);
        background-position: center;
    }
    body::before {
        display: none;
    }
    .j-section {
        max-width: 100%;
        min-height: 0 !important;
    }
    .col, .row-collapse>.col {
        flex-basis: 100%;
        max-width: 100%;
        /* padding: 0 5% !important; */
    }
    .col.small-1, .row-collapse>.col.small-1 {
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }
    
    .col.small-2, .row-collapse>.col.small-2 {
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }
    
    .col.small-3, .row-collapse>.col.small-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    
    .col.small-4, .row-collapse>.col.small-4 {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }
    
    .col.small-5, .row-collapse>.col.small-5 {
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }
    
    .col.small-6, .row-collapse>.col.small-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    
    .col.small-7, .row-collapse>.col.small-7 {
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }
    
    .col.small-8, .row-collapse>.col.small-8 {
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }
    
    .col.small-9, .row-collapse>.col.small-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    
    .col.small-10, .row-collapse>.col.small-10 {
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }
    
    .col.small-11, .row-collapse>.col.small-11 {
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }
    .hide-for-small, [data-show=hide-for-small], .hide-for-medium, [data-show=hide-for-medium] {
        display: none !important;
    }
    .show-for-small, [data-show=show-for-small] {
        display: flex !important;
    }
}
@media (min-width: 750px) and (orientation: portrait) {
    body {
        font-size: 1.3em;
    }
    .j-section {
        /*max-width: 65% !important;/**/
    }
    .j-rank .event-rules {
    	font-size: 1.6em;
    }
}

/*************** CSS for mobile ***************/
@media (max-width: 549px) {
    body {
        font-size: 10px;
    }
    .j-slider .img {
        width: 50% !important;
        min-height: 27.5vw;
    }
    .j-rank div div,
    .j-rank div span {
    	font-size: 5px !important;
    }
    .j-rank .event-rules {
    	font-size: 12px !important;
    }
}

/*************** CSS for mobile ***************/
@media (max-width: 390px) {

}

.text-center>div>div {
	margin: 0;
}
.flex-row-ca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 40.005px;
  margin: 0 0 0 0;
  z-index: 12;
}
.tab-a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 31.432px;
  position: relative;
  width: 15%;
  height: 40.005px;
  padding: 0;
  z-index: 12;
  border-radius: 3.81px;
  cursor: pointer;
}
.group-1 {
	background: linear-gradient(180deg, rgba(9, 69, 158, 0) 0%, rgba(32, 182, 80, 0.9) 100%);
	border-bottom: 3px solid #8AFF78;
  z-index: 2;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 400;
  justify-content: center;
  align-items: center;
  display: flex;
}
.comment {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 17.145px;
  text-align: center;
  z-index: 7;
  display: flex;
  flex-direction: column;
}
.date-range {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 17.145px;
  text-align: center;
}
.week, .top-month {
  position: relative;
  color: #ffffff;
  font-family: Inter, var(--default-font-family);
  font-size: 10px;
  font-weight: 400;
  line-height: 17.145px;
  text-align: center;
}
.rectangle {
  position: relative;
  width: 100%;
  height: 43.815px;
  margin: 17.145px 0 0 0;
  background: url(../img/b87Q7njHdt.webp)
    no-repeat center;
  background-size: cover;
  z-index: 78;
  border-radius: 3.81px;
}
.bonus-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 25%;
  height: 26px;
  top: 8.573px;
  left: 595.079px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 78;
}
.tien-cuoc {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 10%;
  height: 26px;
  top: 8.573px;
  left: 425.626px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 77;
}
.nguoi-choi {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 15%;
  height: 26px;
  top: 8.573px;
  left: 147.524px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 76;
}
.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 77.749px;
  height: 26px;
  top: 8.573px;
  left: 12.958px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 75;
}
.rectangle-d {
  position: relative;
  width: 100%;
  height: 49.53px;
  margin: 3.81px 0 0 0;
  background: #1f232d;
  border: 0.95px solid #28B620;
  z-index: 14;
  border-radius: 3.81px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rectangle-e {
  /* position: absolute; */
  width: 77.749px;
  height: 49.53px;
  top: -0.95px;
  left: -0.95px;
  background: url(../img/e3bfV3eZCU.webp)
    no-repeat center;
  background-size: cover;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}
.image {
  position: relative;
  width: 40.924px;
  height: 40.924px;
  /* margin: 4.303px 0 0 13.428px; */
  background: url(../img/d7ORCkr8dO.webp)
    no-repeat center;
  background-size: cover;
  z-index: 34;
}
.line {
  /* position: absolute; */
  width: 0.95px;
  height: 32.385px;
  top: 7.62px;
  left: 49.87%;
  background: #28B620;
  background-size: cover;
  z-index: 53;
}
.line-f {
  /* position: absolute; */
  width: 0.95px;
  height: 32.385px;
  top: 7.62px;
  left: 75.9%;
  background: #28B620;
  background-size: cover;
  z-index: 64;
}
.dong {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  height: 26px;
  /* top: 10.477px;
  left: 17.56%; */
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 74;
  width: 15%;
}
.number {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 10%;
  height: 26px;
  top: 10.477px;
  left: 447.6px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 88;
}
.number-10 {
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  width: 25%;
  height: 26px;
  top: 10.477px;
  left: 643.966px;
  color: #ffffff;
  font-family: UTM Avo, var(--default-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 25.583px;
  text-align: center;
  white-space: nowrap;
  z-index: 89;
}
.rectangle-11 {
  position: relative;
  width: 100%;
  height: 50.482px;
  margin: 2.858px 0 0 0;
  background: #1f232d;
  border: 0.95px solid #28B620;
  z-index: 16;
  border-radius: 3.81px;
}
.rectangle-12 {
  /* position: absolute; */
  width: 77.749px;
  height: 49.53px;
  top: -0.95px;
  left: -0.95px;
  background: url(../img/SuPqnmDHgq.webp)
    no-repeat center;
  background-size: cover;
  z-index: 17;
}
.image-13 {
  position: relative;
  width: 40.924px;
  height: 40.924px;
  /* margin: 5.255px 0 0 13.428px; */
  background: url(../img/gpTnhrwk1V.webp)
    no-repeat center;
  background-size: cover;
  z-index: 35;
}
.image-1a {
  position: relative;
  width: 40.924px;
  height: 40.924px;
  /* margin: 6.208px 0 0 13.428px; */
  background: url(../img/D38GMbEU0T.webp)
    no-repeat center;
  background-size: cover;
  z-index: 36;
}
.div-1e {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 57.346px;
  /* position: absolute; */
  height: 52.387px;
  top: -1.905px;
  left: -0.95px;
  padding: 0;
  z-index: 37;
  border-radius: 6.951px;
}
.span-1f {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  width: 17px;
  height: 32px;
  color: #fff0b5;
  font-family: Inter, var(--default-font-family);
  font-size: 24.328704833984375px;
  font-weight: 700;
  line-height: 31.28px;
  text-align: center;
  white-space: nowrap;
  z-index: 38;
}

/*************** CSS for mobile ***************/
@media (max-width: 549px) {
  .image,
  .image-13,
  .image-1a  {
    width: 20.924px;
    height: 20.924px;
  }
  .rectangle-d ,
  .rectangle-e,
  .rectangle-12 {
    height: 25px;
  }
}

/* LiveChat Styles */
.livechat-btn,
[data-livechat="true"],
[data-livechat-trigger="true"] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

#chatContainer {
    position: relative;
}

#chatIframe {
    border: 0;
    width: 360px;
    height: 650px;
    max-width: 100%;
    display: none;
}

#closeChatBtn {
    position: fixed;
    right: -30px;
    bottom: 565px;
    width: 17px;
    height: 20px;
    font-size: 24px;
    z-index: 10000;
    border: 0;
    cursor: pointer;
    background: transparent;
    display: none;
    color: #fff;
}

#closeChatBtn:after {
  	content: "✕";
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 25px;
  	height: 25px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 24px;
  	color: #fff;
  	text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

#openChatBtn.show-chat {
    display: block;
}

/* 1. Layout cho MOBILE (Màn hình nhỏ hơn 768px) */
@media screen and (max-width: 767px) {
  /* Viết CSS cho mobile ở đây */
  #closeChatBtn {
    position: fixed;
    right: -44px;
    bottom: 577px;
    width: 17px;
    height: 20px;
    font-size: 24px;
    z-index: 10000;
    border: 0;
    cursor: pointer;
    background: transparent;
    display: none;
    color: #fff;
}
}

/* 2. Layout cho TABLET (Màn hình từ 768px đến 1023px) */
/* @media screen and (min-width: 768px) and (max-width: 1023px) {
  Viết CSS cho tablet ở đây
} */

/* 3. Layout cho PC / DESKTOP (Màn hình từ 1024px trở lên) */
@media screen and (min-width: 1024px) {
    /* Viết CSS cho PC ở đây */
    #closeChatBtn {
      position: fixed;
      right: -30px;
      bottom: 565px;
      width: 17px;
      height: 20px;
      font-size: 24px;
      z-index: 10000;
      border: 0;
      cursor: pointer;
      background: transparent;
      display: none;
      color: #fff;
  }
}

/* Mobile Chat Styles */
.mobile-chat {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
}