@import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap");

body {

  background: rgb(255, 255, 255);

  font-family: "Kanit", sans-serif;

  position: relative;

  color: #fff;

  overflow-x: hidden;

}



/* width */



::-webkit-scrollbar {

  width: 7px;

}



/* Track */



::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey;

  border-radius: 10px;

}



/* Handle */



footer {

  background-color: green;

  color: white;

}



input:focus,

select:focus,

textarea:focus,

button:focus {

  outline: none;

}



.boxcolor {

  background: #868cf533;

  box-shadow: 0 2px 20px rgb(0 0 0 / 12%), 0 1px 2px hsl(0deg 7% 92% / 24%);

}



@media (max-width: 768px) {

  .boxcolor {

    background: #4c4c4c00;

  }

}



.tmcolor {

  color: #ff5858;

}



.bottomwhite {

  width: 100%;

  position: absolute;

  bottom: -20vw;

}



.containinlogin {

  padding: 0 30px;

  margin: 0 auto;

  color: #ddd;

}

.loginform01 {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 100%;

  background: #ffffff;

  box-shadow: 0 0 10px #a9a9a9;

  border: none;

  padding: 15px;

  border-radius: 30px;

  color: black;

  padding-left: 35px;

}

.loginform01:read-only {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  background: #f8f8f8;

  border: none;

  border-radius: 30px;

  color: darkgrey;

  padding-left: 35px;

}



.iconlogin {

  color: #326a99;

  position: absolute;

  margin-top: 15px;

  margin-left: 12px;

}



.loginform01::placeholder {

  color: #a5a5a5;

  opacity: 1;

  /* Firefox */

}



.loginform01:focus {

  background: #dfdfdf;

  border: none;

  color: black;

  outline: none;

}

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover,

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

  -webkit-text-fill-color: #000000;

  -webkit-background: #1e1c38b8;

  -webkit-box-shadow: 0 0 0px 1000px #ffffffb8 inset;

  transition: background-color 5000s ease-in-out 0s;

}



.fas.fa-undo {

  cursor: pointer;

}

.colorbtn01 {

  width: 50%;

  max-width: 300px;

  min-width: 250px;

  border: none;

  color: white;

  border-radius: 10px;

  padding: 10px;

  margin: 0 auto;

}



.logologin {

  text-align: center;

  padding: 10px;

  font-size: 50px;

  color: #ffd400;

  margin-bottom: 15px;

  font-family: "Mogra", cursive;

}

.logologin img {

  width:100%;

}



.containlogin {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

  border-radius: 30px;

  margin-top: 30px;

  padding-bottom: 30px;

  position: relative;

}

.containall {

  padding-bottom: 10px;

}



.contentmain {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

  border-radius: 50px;

  margin-top: 20px;

  padding-bottom: 10px;

  position: relative;

  transition: 0.3s;

}



@media (max-width: 768px) {

  .contentmain {

    margin-top: 0px;

    border-radius: 0;

    box-shadow: 0 0 0 0 black;

  }

  .hitopjikko {

    position: absolute;

    height: 490px;

    width: 100%;

  }

}



.containregister {

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

  border-radius: 30px;

  margin-top: 40px;

  padding-bottom: 40px;

  position: relative;

}



.needregister {

  width: 50%;

  max-width: 300px;

  min-width: 250px;

  text-align: center;

  border-radius: 10px;

  padding: 11px 0;

  margin: 0 auto;

  margin-top: 20px;

  cursor: pointer;

  transition: 0.3s;

}



.bankselectpopup {

  display: none;

  position: fixed;

  height: 500px;

  max-width: 400px;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  margin: auto auto;

}

.inbankselectpopup {

  height: 500px;

  width: 100%;

  overflow: auto;

  box-shadow: 0 0 20px 1px #000;

  border-radius: 5px;

  font-size: 14px;

  text-align: center;

  overflow: auto;

  animation: showbank 0.5s ease 0s normal none;

}

.closeanimationselectbank {

  animation: showbankclose 0.5s ease 0s normal none;

}



.btnclosebankselect {

  position: absolute;

  right: 30px;

  top: 3px;

  border-radius: 5px;

  border: none;

  font-size: 20px;

  padding: 0 7px;

  background: #ed2638;

  color: white;

  transition: 0.3s;

}

.bankselectpopup img {

  width: 70px;

}

.bankselectpopup table {

  width: 100%;

  text-align: center;

}

.bankselectpopup td {

  padding: 10px;

  width: 50%;

}

.selectbank {

  cursor: pointer;

}

@keyframes showbank {

  0.0% {

    transform: scale(0.1);

  }

  100% {

    transform: scale(1) translate(0px, 0px);

  }

  50.3% {

    transform: translate(0px, -100px);

  }

  74.9% {

    transform: scale(1) translate(0px, 0px);

  }

}



@keyframes showbankclose {

  0.0% {

    transform: scale(1) translate(0px, 0px);

  }

  100% {

    transform: scale(0.1) translate(-900px, 0px);

  }

}



.textlogin {

  text-shadow: 0 0 black;

  color: #fff;

  font-size: 35px;

  font-family: "Kanit", cursive;

}



.linebtn {

  position: fixed;

  right: 20px;

  bottom: 20px;

  cursor: pointer;

}



.tdstepregister.active b {

  color: black;

  font-weight: bold;

  background: #ffffff;

}



.tdstepregister span {

  font-size: 14px;

}



.btnofregister {

  margin-top: 40px;

  white-space: nowrap;

}



.tdbtnregister {

  width: 50%;

  padding: 0 10px;

}



.btnbackregister {

  width: 100%;

  border: none;

  padding: 10px 0;

  border-radius: 5px;

  color: white;

}



.btnnextregister {

  width: 100%;

  border: none;

  padding: 10px 0;

  border-radius: 5px;

  color: white;

}



.slideto {

  animation: slidenextregister 0.2s ease 0s normal none;

}



.showanimate {

  animation: slidenextcontent 0.2s ease 0s normal none;

}



.giftanimate {

  position: absolute;

  z-index: 1;

  width: 200px;

  bottom: -15px;

  left: 5vw;

}

@keyframes x-cloud-mover-item-1 {

  0.0% {

    transform: translate(-20px, 0px);

  }

  100% {

    transform: translate(-20px, 0px);

  }

  50.1% {

    transform: translate(20px, 0px);

  }

}



@media (max-width: 1200px) {

  .giftanimate {

    position: absolute;

    z-index: 1;

    width: 15vw;

    bottom: -15px;

    left: 2vw;

  }

}

@media (max-width: 965px) {

  .giftanimate {

    display: none;

  }

}



@media (max-width: 768px) {

  .slideto {

    animation: slidenextregistermobile 0.2s ease 0s normal none;

  }

  .showanimate {

    animation: slidenextcontentmobile 0.2s ease 0s normal none;

  }

}



@keyframes slidenextregister {

  0.0% {

    transform: translate(100px, 0px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes slidenextregistermobile {

  0.0% {

    transform: translate(10px, 0px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes slidenextcontent {

  0.0% {

    transform: translate(0px, -50px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes slidenextcontentmobile {

  0.0% {

    transform: translate(0px, -50px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



/* Style the tab content */



.tabcontent {

  display: none;

  padding: 5px;

  -webkit-animation: fadeEffect 0.3s;

  animation: fadeEffect 0.3s;

}



/* Fade in tabs */



@-webkit-keyframes fadeEffect {

  0.0% {

    transform: translate(0px, -50px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes fadeEffect {

  0.0% {

    transform: translate(0px, -50px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



.checkfinish {

  font-size: 60px;

  color: #ffe61a;

}



.finishregister {

  text-align: center;

  font-size: 20px;

  color: #ffffff;

}



.finishregister span {

  font-size: 30px;

  color: #ffffff;

}



.imganimationlogin {

  max-width: 250px;

  margin: 15px 0;

  height: auto;

}



.headmain {

  width: 100%;

  max-width: 500px;

  margin: 0 auto;

  padding-top: 10px;

  font-size: 20px;

  line-height: 25px;

  color: white;

}



.headmain span {

  font-size: 13px;

  color: #fff;

}



.logoutbtn:hover {

  color: white;

  text-shadow: 0 0 5px white, 0 0 10px red, 0 0 20px red, 0 0 30px red;

}



.containmoney {

  width: 90%;

  max-width: 500px;

  margin: 0 auto;

  padding: 10px;

  padding-bottom: 14px;

  margin-top: 10px;

  border-radius: 30px;

  white-space: nowrap;

  color: white;

  box-shadow: 0 0 15px #00000070;

  font-weight: bold;

  position: relative;

  z-index: 11111;

}



.fal.fa-wallet {

  font-size: 45px;

  color: #ffffff;

  border-radius: 50px;

  padding: 11px 12px;

  box-shadow: 0 0 0 1px #9cd7f9;

  text-shadow: 0 0 15px #fff, 0 0 20px #ffffff;

}



.btnfriend,

.btncommis {

  width: 90%;

  border: none;

  border-radius: 10px;

  padding: 5px 0;

  color: white;

}



.card-footer {

  padding: 0.75rem 1.25rem;

  background-color: rgb(0 0 0 / 0%);

  border-top: 1px solid rgb(0 0 0 / 0%);

}



.menucontain {

  text-align: center;

}



.tdgridicon {

  padding-top: 20px;

  width: 25%;

  text-align: center;

  color: #000;

  font-size: 14px;

  font-weight: bold;



  /* Will override color (regardless of order) */

}

.tdgridicon a {

  color: #c3c3c3;

  text-decoration: none;

}

.tdgridicon:hover a {

  color: #c3c3c3;

  text-decoration: none;

}

.tdgridicon span {

  cursor: pointer;

}



.copybtn {

  border: none;

  margin-top: 5px;

  border-radius: 3px;

  height: 25px;

  color: white;

  font-weight: bold;

}



.friendlink {

  width: 100%;

  color: #ebc468;

  font-size: 20px;

  border-radius: 5px;

  border: none;

  background: #1c2233;

}



.pcfriendback {

  margin-top: 20px;

  font-size: 17px;

}



/*Friend------------------------------------------------------------*/

.containfriend {

  width: 100%;

  max-width: 500px;

  margin: 0 auto;

  padding: 0 10px;

}

.wrapgrid001 {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  text-align: center;

  padding: 0 10px;

}

.inwrapgrid001 {

  padding: 0 5px;

  margin-top: 5px;

}



.fas.fa-users-crown {

  font-size: 45px;

  color: #fff;

  border-radius: 50px;

  padding: 10px 5px;

  box-shadow: 0 0 0 1px #ffffff80;

}

.countearnmoney {

  padding: 0 5px;

  font-size: 11px;

  background: #101525;

  border-radius: 20px;

  color: #fff;

}

.containlinkcopy {

  margin-top: 5px;

}

.friendlink {

  width: 100%;

  color: #ffffff;

  font-size: 13px;

  border-radius: 3px;

  border: none;

  background: #101525;

}



.indetail {

  font-size: 16px;

  color: #000000;

  margin-top: 0;

  background: #00000024;

  padding: 15px 5px;

  border-radius: 8px;

  padding-left: 10px;

  padding-top: 15px;

  margin-top: -15px;

}

.alert01 {

  margin: 0;

  padding: 6px 16px;

  border: 0;

  font-size: 13px;

  border-radius: 6px;

}

.friendcontent {

  display: none;

  -webkit-animation: fadeEffect 0.3s;

  animation: fadeEffect 0.3s;

}

#withdrawfriend {

  height: 10px;

  position: relative;

}

.btn-grad {

  background: linear-gradient(170deg, #379dec 0%, #065792 100%);

  border-radius: 5px;

  text-shadow: 0 0 5px white, 0 0 5px white;

  border: none;

  color: white;

  margin-top: -15px;

  padding: 5px 10px;

}

.btn-grad:hover {

  text-shadow: 0 0 5px white, 0 0 5px gold, 0 0 10px gold;

}



.divoffriends {

  text-align: center;

  background: #00000024;

  border-radius: 20px;

  margin-top: -5px;

  height: 330px;

  overflow: auto;

  padding: 0 10px;

  padding-top: 10px;

}

.wranningwd {

  margin: 10px 0;

  position: relative;

  text-align: left;

  color: white;

  font-size: 12px;

}

.btnfriendback02 {

  white-space: nowrap;

}

/* End Friend------------------------------------------------------------*/



.wraper-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  text-align: center;

  padding: 10px 0;

}



.ingrid {

  font-size: 13px;

}



.headerprocess {

  margin-top: 15px;



  text-align: center;



  font-size: 30px;



  font-weight: bold;



  color: #ffffff;

}

.headerprocess img {

  width: 100%;

  max-width: 250px;

  -webkit-filter: drop-shadow(0px 0px 5px rgb(0 0 0));

  filter: drop-shadow(0px 0px 5px rgb(0 0 0));

}

.headerprocess i {

  text-shadow: 0 0 0 black;

  color: #fff;

  font-size: 23px;

}



.carousel {

  margin-top: 30px;

}



.carousel-cell {

  width: 100%;

  margin-right: 10px;

  border-radius: 5px;

  text-align: center;

}



.carousel-cell img {

  width: 87%;

  border-radius: 10px;

}



.carousel-cell.is-selected {

  opacity: 1;

}



.carousel-cell.is-selected button {

  display: inline;

}

.flickity-button {

  position: absolute;

  background: hsl(0deg 0% 21% / 0%);

  border: none;

  color: #fff;

  outline: none;

  width: 50px;

}



.flickity-prev-next-button.next {

  right: 0px;

}



.flickity-prev-next-button.previous {

  left: 0px;

}



.flickity-button:hover {

  background: hsl(0deg 0% 21% / 0%);

}

.carousel2 {

  margin-top: 30px;

}

.flickity-page-dots .dot {

  background: #ff6464;

}



@media (max-width: 590px) {

  .carousel-cell img {

    width: 85%;

    border-radius: 10px;

  }

}

@media (max-width: 510px) {

  .carousel-cell img {

    width: 80%;

    border-radius: 10px;

  }

}



/*@media(max-width: 768px){

  .carousel{

    padding: 0 10px;

  }

  }*/



.backtohome {

  width: 90%;

  max-width: 600px;

  margin: 0 auto;

  margin-top: 15px;

  font-size: 15px;

  color: #404e67;

  background: #f1f6fa;

  padding: 5px 0;

  padding-left: 20px;

  border-radius: 10px;

}



.homebtn {

  font-size: 25px;

}



.textfriend {

  font-size: 20px;

}



@media (max-width: 768px) {

  .textfriend {

    font-size: 15px;

  }

}



.wrapermenucon {

  position: relative;

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

}



.wrapper-menu {

  background-color: transparent;

  border: none;

  cursor: pointer;

  display: flex;

  padding: 0;

  outline: none;

  position: absolute;

  left: 10px;

  top: 8px;

  z-index: 1000;

  transition: all 0.5s;

}



.wrapper-menu2 {

  background-color: transparent;

  border: none;

  cursor: pointer;

  display: flex;

  padding: 0;

  outline: none;

}



.wrapper-menu.hamopen {

  position: fixed;

  left: 200px;

  top: 8px;

}



.line {

  fill: none;

  stroke: #fff;

  stroke-width: 3;

  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),

    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);

}



.line1 {

  stroke-dasharray: 60 207;

  stroke-width: 3;

  animation: lineone 2s ease 0s infinite normal none;

}



@keyframes lineone {

  0.0% {

  }

  50.1% {

    transform: scale3d(1.2, 1, 1) translate(-10px);

  }

}



.line2 {

  stroke-dasharray: 60 60;

  stroke-width: 3;

  animation: linetwo 2s ease 0s infinite normal none;

}



@keyframes linetwo {

  0.0% {

  }

  50.1% {

    transform: scale3d(0.8, 1, 1) translate(10px);

  }

}



.line3 {

  stroke-dasharray: 60 207;

  stroke-width: 3;

  animation: linetree 2s ease 0s infinite normal none;

}



@keyframes linetree {

  0.0% {

  }

  50.1% {

    transform: scale3d(1.2, 1, 1) translate(-10px);

  }

}



.open .line1 {

  stroke-dasharray: 90 207;

  stroke-dashoffset: -134;

  stroke-width: 3;

  animation: yourAnimation 3s ease 0s infinite normal none;

}



.open .line2 {

  stroke-dasharray: 1 60;

  stroke-dashoffset: -30;

  stroke-width: 3;

  animation: yourAnimation 3s ease 0s infinite normal none;

}



.open .line3 {

  stroke-dasharray: 90 207;

  stroke-dashoffset: -134;

  stroke-width: 3;

  animation: yourAnimation 3s ease 0s infinite normal none;

}



@keyframes yourAnimation {

  0.0% {

  }

  50.1% {

  }

}



.myAlert-top {

  position: fixed;

  top: 50%;

  left: 0%;

  right: 0%;

  width: 150px;

  text-align: center;

  margin: auto;

  background-color: rgba(0, 0, 0, 0.7);

  -webkit-backdrop-filter: blur(10px);

  backdrop-filter: blur(10px);

  border-radius: 10px;

  padding: 10px;

  color: white;

}



.alert {

  display: none;

}



.tablewd01 {

  width: 100%;

  max-width: 500px;

}



@media (max-width: 430px) {

  .wdsec02 {

    font-size: 4vw;

  }

}



/*History---------------------------------------*/



#deposithis,

#withdrawwhis {

  text-align: center;

  margin-top: 10px;

  padding: 0 10px;

}



#deposithis {

  animation: historyplusanimate 0.2s ease 0s normal none;

}



#withdrawwhis {

  animation: historyminusanimate 0.2s ease 0s normal none;

}



@keyframes historyplusanimate {

  0.0% {

    transform: translate(-20px, 0px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes historyminusanimate {

  0.0% {

    transform: translate(20px, 0px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



.containloophisdps {

  height: 500px;

  overflow: auto;

  padding: 0 10px;

  padding-bottom: 15px;

  box-shadow: inset 0 0 10px #7c7c7c;

}



/* width */



.containloophisdps::-webkit-scrollbar {

  width: 3px;

}



/* Track */



.containloophisdps::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey;

  border-radius: 10px;

}



/* Handle */



.containloophisdps::-webkit-scrollbar-thumb {

  background: #b65eff;

  border-radius: 10px;

}



/* Handle on hover */



.containloophisdps::-webkit-scrollbar-thumb:hover {

  background: #d6a5ff;

}



.containloophiswd {

  height: 500px;

  overflow: auto;

  padding: 0 10px;

  padding-bottom: 15px;

  box-shadow: inset 0 0 10px #7c7c7c;

}



/* width */



.containloophiswd::-webkit-scrollbar {

  width: 3px;

}



/* Track */



.containloophiswd::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey;

  border-radius: 10px;

}



/* Handle */



.containloophiswd::-webkit-scrollbar-thumb {

  background: #d05858;

  border-radius: 10px;

}



/* Handle on hover */



.containloophiswd::-webkit-scrollbar-thumb:hover {

  background: #d05858;

}



.statushistory {

  margin-top: -10px;

}



.statushistory span {

  color: white;

  font-size: 13px;

  background: #619d61;

  padding: 0 5px;

  border-radius: 3px;

  border-top-left-radius: 10px;

}



.spanofbankhis {

  font-size: 15px;

}

.prohistory {

  font-size: 12px;

}

.aftercradithis {

  font-size: 11px;

  white-space: normal;

}



.backlogohis {

  width: 40px;

}



.moneyhisdps {

  font-size: 20px;

}



.plushis {

  color: #81e681;

  font-size: 20px;

}



.minushis {

  color: #ed7f7f;

  font-size: 20px;

}



@media (max-width: 600px) {

  .spanofbankhis {

    font-size: 3.5vw;

  }

  .prohistory {

    font-size: 2.5vw;

  }

  .aftercradithis {

    font-size: 2.5vw;

  }

  .backlogohis {

    width: 40px;

  }

  .moneyhisdps {

    font-size: 4vw;

  }

  .minushis {

    font-size: 3vw;

  }

  .plushis {

    font-size: 3vw;

  }

}



/*History---------------------------------------*/



/*gaming---------------------------------------*/



.gameingtd {

  width: 25%;

  text-align: center;

  padding: 5px;

}



.gameingtd div {

  padding: 10px 0px;

  border-radius: 10px;

  cursor: pointer;

}



/* Style the tab content */



.tabgame {

  display: none;

  padding: 6px 12px;

  -webkit-animation: fadegame 0.3s;

  animation: fadegame 0.3s;

}



/* Fade in tabs */



@-webkit-keyframes fadegame {

  0.0% {

    transform: translate(0px, -10px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



@keyframes fadegame {

  0.0% {

    transform: translate(0px, -10px);

    opacity: 0;

  }

  100% {

    transform: translate(0px, 0px);

    opacity: 1;

  }

}



.gridofgame {

  margin-top: 15px;

  display: grid;

  grid-template-columns: 33.33% 33.33% 33.33%;

}



.ingridgame {

  text-align: center;

  padding: 3px;

}



.ingridgame a {

  text-decoration: none;

  color: white;

}

.ingridgame a:hover {

  color: white;

  text-shadow: 0 0 5px white, 0 0 20px white;

}



.ingridgame img {

  height: 70px;

}



/*gaming---------------------------------------*/



.cashbmoney {

  width: 50%;

  color: #efdb8f;

  font-size: 30px;

}



.btncashback02 {

  font-size: 15px;

  border: none;

  color: white;

  border-radius: 15px;

  font-weight: bold;

  padding: 10px 0;

  width: 120px;

}



.pccashback {

  margin-top: 20px;

  font-size: 17px;

}



/* Slip---------------------------------*/



.slipimage {

  text-align: center;

  margin-top: 15px;

  background: linear-gradient(107deg, rgb(42 44 56) 0%, rgb(46 55 87) 100%);

  width: 100%;

  max-width: 330px;

  margin: 0 auto;

  padding: 10px 10px;

  padding-bottom: 10px;

  white-space: nowrap;

  box-shadow: 0 0 0 1px #a99871;

  border-radius: 15px;

  margin-top: 20px;

}



.infoslip {

  background: white;

  padding: 20px 10px;

  border-radius: 5px;

}



/* Slip---------------------------------*/



.pdingaccord {

  padding: 10px 20px;

}



.accordion:focus {

  outline: none;

}



.accordion:after {

  content: "\002B";

  color: #777;

  font-weight: bold;

  float: right;

  margin-left: 5px;

}



.accordion.active:after {

  content: "\2212";

}



.panel {

  color: black;

  padding: 0 18px;

  font-weight: bold;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}



.accordion-div {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  margin-top: 10px;

  text-align: center;

}



.copybutton {

  background: #1b1f22;

  font-size: 13px;

  border-radius: 10px;

  margin: 2px 10px;

  border: none;

  color: white;

  font-weight: bold;

  white-space: nowrap;

  outline: none;

  box-shadow: 0px 0px 0px 1px #5d9aa4, 0px 0px 5px 1px black;

}



.rulewd {

  width: 100%;

  background: rgb(191, 26, 26);

  background: linear-gradient(

    277deg,

    rgba(191, 26, 26, 1) 0%,

    rgba(78, 27, 27, 1) 100%

  );

  box-shadow: 0 0 10px black;

  border-radius: 20px;

  margin-top: 10px;

  padding: 20px;

  text-align: center;

}



.rulebox {

  text-align: left;

  margin-left: auto;

  margin-right: auto;

  max-width: 400px;

  color: white;

  font-size: 20px;

  background: rgb(0, 0, 0);

  background: linear-gradient(

    332deg,

    rgba(0, 0, 0, 0.3) 0%,

    rgba(0, 0, 0, 0.3) 100%

  );

  border-radius: 20px;

  padding: 10px;

}



.tdbank {

  text-align: center;

  border-radius: 10px;

  cursor: pointer;

}



.tdbank:hover {

  background-color: #ccc;

}



.tabletruewallet {

  display: grid;

  grid-template-columns: 1fr 1fr;

  width: 100%;

  max-width: 500px;

  margin: 0 auto;

  text-align: center;

}



.righttopmain {

  padding-right: 10px;

}



.bglangbtn {

  padding: 5px;

  border-radius: 20px;

}



.languagebtn {

  width: 30px;

  /* margin-top: -10px; */

  cursor: pointer;

}

.paddinglefttop {

  padding-left: 0;

}



@media (max-width: 550px) {

  .paddinglefttop {

    padding-right: 10px;

  }

}



/*Promotion----------------------------------------------------------*/



.containpromotion {

  position: relative;

}



.swiper-container {

  width: 90%;

  max-width: 1000px;

  height: 650px;

  padding-top: 10px;

  padding-bottom: 50px;

  white-space: nowrap;

}



.swiper-slide {

  background-position: center;

  background-size: cover;

  width: 300px;

  height: 300px;

  border-radius: 15px;

  box-shadow: 0 0 0 5px rgb(224 187 101), 0 0 0 10px rgb(68 68 134);

}



.swiper-slide.swiper-slide-active {

  background-position: center;

  background-size: cover;

  width: 300px;

  height: 300px;

  border-radius: 15px;

  box-shadow: 0 0 0 5px rgb(224 187 101), 0 0 0 10px rgb(68 68 134);

  margin-top: 20px;

}



.detailpro {

  display: none;

}



.swiper-slide.swiper-slide-active .detailpro {

  position: absolute;

  width: 450px;

  left: -80px;

  margin: 0 auto;

  bottom: -90px;

  line-height: 30px;

  font-size: 20px;

  display: block;

}



.btnbonus {

  font-size: 20px;

  border-radius: 10px;

  padding: 15px;

  border: none;

  color: white;

  width: 80%;

  margin: 0 auto;

  margin-top: 20px;

  box-shadow: 0px 0px 0px 2px #e0bb65, 0px 0px 5px 1px black;

  font-weight: bold;

  outline: none;

  transition: 0.4s;

}



.btnbonus:hover {

  font-size: 23px;

  color: white;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px #e8c675, 0 0 20px #e8c675,

    0 0 30px #e8c675;

}



.btnnext {

  padding: 50px 10px;

  margin-top: -190px;

  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #e0ba65;

  border-radius: 7px;

  position: absolute;

  top: 50%;

  right: 8px;

  font-size: 25px;

  color: white;

  z-index: 999;

  border: none;

}



.btnnext:hover {

  font-size: 25px;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,

    0 0 30px gold;

}



.btnnext.swiper-button-disabled {

  opacity: 0.5;

}



.btnnext.swiper-button-disabled:hover {

  opacity: 0.5;

  text-shadow: 0 0 0 white;

}



.btnprev {

  padding: 50px 10px;

  margin-top: -190px;

  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #e0ba65;

  border-radius: 7px;

  position: absolute;

  top: 50%;

  left: 8px;

  font-size: 25px;

  color: white;

  z-index: 999;

  border: none;

}



.btnprev:hover {

  background: #9c50e9;

  font-size: 25px;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,

    0 0 30px gold;

}



.btnprev.swiper-button-disabled {

  opacity: 0.5;

}



.btnprev.swiper-button-disabled:hover {

  opacity: 0.5;

  text-shadow: 0 0 0 white;

}



@media (max-width: 959px) {

  .swiper-slide {

    width: 300px;

    height: 300px;

  }

  .swiper-slide.swiper-slide-active {

    width: 300px;

    height: 300px;

    margin-top: 20px;

  }

  .btnnext {

    margin-top: -170px;

  }

  .btnprev {

    margin-top: -170px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: -50px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .swiper-container {

    height: 600px;

  }

}



@media (max-width: 765px) {

  .swiper-container {

    margin-top: -20px;

  }

  .swiper-slide {

    width: 300px;

    height: 300px;

  }

  .swiper-slide.swiper-slide-active {

    width: 300px;

    height: 300px;

    margin-top: 20px;

  }

  .btnnext {

    margin-top: -150px;

  }

  .btnprev {

    margin-top: -150px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: -50px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .swiper-container {

    height: 560px;

  }

}



@media (max-width: 643px) {

  .swiper-container {

    margin-top: -45px;

  }

  .swiper-slide {

    width: 250px;

    height: 250px;

    margin-top: 40px;

  }

  .swiper-slide.swiper-slide-active {

    width: 250px;

    height: 250px;

    margin-top: 40px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: -80px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .btnnext {

    margin-top: -140px;

  }

  .btnprev {

    margin-top: -140px;

  }

  .swiper-container {

    height: 530px;

  }

}



@media (max-width: 512px) {

  .swiper-container {

    margin-top: -35px;

  }

  .swiper-slide {

    width: 230px;

    height: 230px;

  }

  .swiper-slide.swiper-slide-active {

    width: 230px;

    height: 230px;

    margin-top: 40px;

  }

  .btnnext {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .btnprev {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 360px;

    left: -70px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 16px;

    display: block;

  }

  .swiper-container {

    height: 505px;

  }

}



@media (max-width: 458px) {

  .swiper-container {

    margin-top: -35px;

  }

  .swiper-slide {

    width: 210px;

    height: 210px;

  }

  .swiper-slide.swiper-slide-active {

    width: 210px;

    height: 210px;

    margin-top: 40px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 350px;

    left: -70px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 15px;

    display: block;

  }

  .swiper-container {

    height: 480px;

  }

}



@media (max-width: 401px) {

  .swiper-slide {

    width: 190px;

    height: 190px;

  }

  .swiper-slide.swiper-slide-active {

    width: 190px;

    height: 190px;

    margin-top: 40px;

  }

  .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 330px;

    left: -70px;

    margin: 0 auto;

    bottom: -90px;

    line-height: 30px;

    font-size: 14px;

    display: block;

    padding: 5px;

  }

  .btnnext {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .btnprev {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .swiper-container {

    height: 460px;

  }

}



/*Promotion----------------------------------------------------------*/



.accountofuser {

  width: 310px;

  color: black;

}

.headeraccount {

  padding: 9px 0;

}

.headeraccount i {

  color: #ffffff;

}

.trofaccount {

  border-bottom: 1px solid #a760fc;

  font-weight: bold;

  color: white;

}

/*-----------------------------------------*/



/* Footer Height---------------------*/

.heightmobile {

  height: 0;

}

@media (max-width: 885px) {

  .heightmobile {

    height: 95px;

  }

}

/*End Footer Height ------------------------------------*/



/* bank select popup -------------------------------------*/



.closemodalalert {

  position: absolute;

  right: 0px;

  top: 0px;

  border: none;

  background: #9e3737;

  color: white;

  font-size: 20px;

  padding: 1px 10px;

  border-radius: 20px;

  padding-top: 2px;

}

.closemodalalert:hover {

  background: #f44040;

}

.bgalrtcontent {

  background: #212639;

  padding: 5px;

  box-shadow: 0 0 0 3px #f0c96f;

  border-radius: 10px;

}

.bgalrtcontent img {

  border-radius: 10px;

}

/* End bank select popup -------------------------------------*/



/* #swal2-title,

#swal2-content {

  color: #ffffff;

} */

#btn-changepassword {

  background-color: #2a2d3f;

  color: #ffffff;

}

#btn-changepassword:hover {

  background-color: #565b7b;

  color: #ffffff;

  text-shadow: 0 0 5px white;

}



a {

  text-decoration: none;

  color: #ffffff;

}

.card-footer {

  padding: 0.75rem 1.25rem;

  background-color: rgb(0 0 0 / 0%);

  border-top: 1px solid rgb(0 0 0 / 0%);

}



#loader {

  position: absolute;

  z-index: 1;

  width: 120px;

  height: 120px;

  bottom: 0;

  top: 0;

  left: 0;

  right: 0;

  margin: auto auto;

  border: 9px solid #212538;

  border-radius: 50%;

  border-top: 9px solid #a10f11;

  -webkit-animation: spin 2s linear infinite;

  animation: spin 2s linear infinite;

}

#loader img {

  animation: spin 2s infinite linear;

  animation-direction: reverse;

  position: absolute;

  filter: drop-shadow(0px 0px 5px #777);

  bottom: 0;

  top: 0;

  left: 0;

  right: 0;

  margin: auto auto;

  width: 80%;

}



@-webkit-keyframes spin {

  0% {

    -webkit-transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

  }

}



@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



/* Add animation to "page content" */

.animate-bottom {

  position: relative;

  -webkit-animation-name: animatebottom;

  -webkit-animation-duration: 1s;

  animation-name: animatebottom;

  animation-duration: 1s;

}



@-webkit-keyframes animatebottom {

  from {

    bottom: -100px;

    opacity: 0;

  }

  to {

    bottom: 0px;

    opacity: 1;

  }

}



@keyframes animatebottom {

  from {

    bottom: -100px;

    opacity: 0;

  }

  to {

    bottom: 0;

    opacity: 1;

  }

}



#myDiv {

  display: none;

  text-align: center;

}



.containanimation {

  position: absolute;

  width: 100%;

  height: 100%;

}

.-bg-2 {

  margin-top: 150px;

  margin-left: -50px;

  width: 30%;

  -webkit-animation: x-bg-2 8s ease infinite;

  animation: x-bg-2 8s ease infinite;

  -webkit-animation-delay: 2s;

  animation-delay: 2s;

}



@-webkit-keyframes x-bg-2 {

  0% {

    -webkit-transform: translate(0) rotate(0);

    transform: translate(0) rotate(0);

  }

  50% {

    -webkit-transform: translate(30px, -5px) rotate(-5deg);

    transform: translate(30px, -5px) rotate(-5deg);

  }

  to {

    -webkit-transform: translate(0) rotate(0);

    transform: translate(0) rotate(0);

  }

}



.wordanimation {

  position: absolute;

  width: 25%;

  right: 0;

  top: 40px;

  opacity: 0.2;

  -webkit-animation: worldfloat 10s ease 0s infinite normal none;

  animation: worldfloat 10s ease 0s infinite normal none;

}



@keyframes worldfloat {

  0.0% {

    -webkit-transform: translate(0px, 0px);

    transform: translate(0px, 0px);

  }

  50.1% {

    -webkit-transform: translate(0px, -20px);

    transform: translate(0px, -20px);

  }

}



.night {

  top: 0;

  opacity: 0.2;

  position: fixed;

  width: 100%;

  height: 100%;

  transform: rotateZ(45deg);

}



.shooting_star {

  position: absolute;

  left: 50%;

  top: 50%;

  height: 2px;

  background: linear-gradient(-45deg, #ffffff, rgba(0, 0, 255, 0));

  border-radius: 999px;

  filter: drop-shadow(0 0 6px #699bff);

  -webkit-animation: tail 3000ms ease-in-out infinite,

    shooting 3000ms ease-in-out infinite;

  animation: tail 3000ms ease-in-out infinite,

    shooting 3000ms ease-in-out infinite;

}

.shooting_star::before {

  content: "";

  position: absolute;

  top: calc(50% - 1px);

  right: 0;

  height: 2px;

  background: linear-gradient(

    -45deg,

    rgba(0, 0, 255, 0),

    #8e5fff,

    rgba(0, 0, 255, 0)

  );

  transform: translateX(50%) rotateZ(45deg);

  border-radius: 100%;

  -webkit-animation: shining 3000ms ease-in-out infinite;

  animation: shining 3000ms ease-in-out infinite;

}

.shooting_star::after {

  content: "";

  position: absolute;

  top: calc(50% - 1px);

  right: 0;

  height: 2px;

  background: linear-gradient(

    -45deg,

    rgba(0, 0, 255, 0),

    #ffffff,

    rgba(0, 0, 255, 0)

  );

  transform: translateX(50%) rotateZ(45deg);

  border-radius: 100%;

  -webkit-animation: shining 3000ms ease-in-out infinite;

  animation: shining 3000ms ease-in-out infinite;

  transform: translateX(50%) rotateZ(-45deg);

}

.shooting_star:nth-child(1) {

  top: calc(50% - -35px);

  left: calc(50% - 171px);

  -webkit-animation-delay: 8883ms;

  animation-delay: 8883ms;

}

.shooting_star:nth-child(1)::before,

.shooting_star:nth-child(1)::after {

  -webkit-animation-delay: 8883ms;

  animation-delay: 8883ms;

}

.shooting_star:nth-child(2) {

  top: calc(50% - -175px);

  left: calc(50% - 46px);

  -webkit-animation-delay: 4147ms;

  animation-delay: 4147ms;

}

.shooting_star:nth-child(2)::before,

.shooting_star:nth-child(2)::after {

  -webkit-animation-delay: 4147ms;

  animation-delay: 4147ms;

}

.shooting_star:nth-child(3) {

  top: calc(50% - 143px);

  left: calc(50% - 19px);

  -webkit-animation-delay: 1625ms;

  animation-delay: 1625ms;

}

.shooting_star:nth-child(3)::before,

.shooting_star:nth-child(3)::after {

  -webkit-animation-delay: 1625ms;

  animation-delay: 1625ms;

}

.shooting_star:nth-child(4) {

  top: calc(50% - 199px);

  left: calc(50% - 110px);

  -webkit-animation-delay: 5973ms;

  animation-delay: 5973ms;

}

.shooting_star:nth-child(4)::before,

.shooting_star:nth-child(4)::after {

  -webkit-animation-delay: 5973ms;

  animation-delay: 5973ms;

}

.shooting_star:nth-child(5) {

  top: calc(50% - 183px);

  left: calc(50% - 128px);

  -webkit-animation-delay: 5975ms;

  animation-delay: 5975ms;

}

.shooting_star:nth-child(5)::before,

.shooting_star:nth-child(5)::after {

  -webkit-animation-delay: 5975ms;

  animation-delay: 5975ms;

}

.shooting_star:nth-child(6) {

  top: calc(50% - 200px);

  left: calc(50% - 259px);

  -webkit-animation-delay: 9747ms;

  animation-delay: 9747ms;

}

.shooting_star:nth-child(6)::before,

.shooting_star:nth-child(6)::after {

  -webkit-animation-delay: 9747ms;

  animation-delay: 9747ms;

}

.shooting_star:nth-child(7) {

  top: calc(50% - 142px);

  left: calc(50% - 256px);

  -webkit-animation-delay: 9399ms;

  animation-delay: 9399ms;

}

.shooting_star:nth-child(7)::before,

.shooting_star:nth-child(7)::after {

  -webkit-animation-delay: 9399ms;

  animation-delay: 9399ms;

}

.shooting_star:nth-child(8) {

  top: calc(50% - 71px);

  left: calc(50% - 297px);

  -webkit-animation-delay: 4996ms;

  animation-delay: 4996ms;

}

.shooting_star:nth-child(8)::before,

.shooting_star:nth-child(8)::after {

  -webkit-animation-delay: 4996ms;

  animation-delay: 4996ms;

}

.shooting_star:nth-child(9) {

  top: calc(50% - 113px);

  left: calc(50% - 295px);

  -webkit-animation-delay: 6090ms;

  animation-delay: 6090ms;

}

.shooting_star:nth-child(9)::before,

.shooting_star:nth-child(9)::after {

  -webkit-animation-delay: 6090ms;

  animation-delay: 6090ms;

}

.shooting_star:nth-child(10) {

  top: calc(50% - -174px);

  left: calc(50% - 181px);

  -webkit-animation-delay: 8193ms;

  animation-delay: 8193ms;

}

.shooting_star:nth-child(10)::before,

.shooting_star:nth-child(10)::after {

  -webkit-animation-delay: 8193ms;

  animation-delay: 8193ms;

}



@-webkit-keyframes tail {

  0% {

    width: 0;

  }

  30% {

    width: 100px;

  }

  100% {

    width: 0;

  }

}



@keyframes tail {

  0% {

    width: 0;

  }

  30% {

    width: 100px;

  }

  100% {

    width: 0;

  }

}

@-webkit-keyframes shining {

  0% {

    width: 0;

  }

  50% {

    width: 30px;

  }

  100% {

    width: 0;

  }

}

@keyframes shining {

  0% {

    width: 0;

  }

  50% {

    width: 30px;

  }

  100% {

    width: 0;

  }

}

@-webkit-keyframes shooting {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(300px);

  }

}

@keyframes shooting {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(300px);

  }

}

@-webkit-keyframes sky {

  0% {

    transform: rotate(45deg);

  }

  100% {

    transform: rotate(405deg);

  }

}

@keyframes sky {

  0% {

    transform: rotate(45deg);

  }

  100% {

    transform: rotate(405deg);

  }

}



@media (max-width: 767px) {

  .-bg-2 {

    margin-top: 80px;

    margin-left: -50px;

    width: 50%;

    -webkit-animation: x-bg-2 8s ease infinite;

    animation: x-bg-2 8s ease infinite;

    -webkit-animation-delay: 2s;

    animation-delay: 2s;

  }

  .wordanimation {

    position: absolute;

    width: 30%;

    right: 0;

    top: 40px;

    opacity: 0.2;

    -webkit-animation: worldfloat 10s ease 0s infinite normal none;

    animation: worldfloat 10s ease 0s infinite normal none;

  }

}



.tip {

  display: none;

  position: absolute;

  z-index: 1000;

  opacity: 0;

  transform: scale(0.95);

  transition: opacity 0.25s, transform 0.25s;

  animation: qrcodeslide 0.5s ease 0s normal none;

}

@keyframes qrcodeslide {

  0.0% {

    transform: translate(150px, 150px) scale(0);

  }

  100% {

    transform: translate(0, 0px) scale(1);

  }

}



/* ALERT */



.swiper-container-2 {

  width: 100%;

  max-width: 1000px;

  height: auto;

  position: relative;

  margin: 0 auto;

  padding: 0 10px;

  overflow: auto;

  overflow: hidden;

  margin-top: 30px;

  padding-bottom: 40px;

}

.swiper-container-2 .swiper-slide {

  width: 89%;

  height: auto !important;

  box-shadow: 0 0 0;

  background-size: 100%;

  margin-top: 0 !important;

}

.swiper-container-2 .swiper-slide img {

  width: 100%;

  height: auto;

  border-radius: 10px;

}



.swiper-container-2 .swiper-button-next,

.swiper-button-prev {

  transform: scale(0.6);

  margin-top: -40px;

  font-weight: bold;

}

.swiper-pagination-bullet {

  background-color: #0a91ff;

  padding: 5px;

}

.swiper-container-horizontal

  > .swiper-pagination-bullets

  .swiper-pagination-bullet {

  margin: 0 6px;

}

.swiper-container-2 .swiper-button-next {

  right: 5px;

}

.swiper-container-2 .swiper-button-prev {

  left: 5px;

}

@media (max-width: 500px) {

  .swiper-container-2 .swiper-slide {

    width: 85%;

    height: auto !important;

    box-shadow: 0 0 0;

    background-size: 100%;

    margin-top: 0 !important;

  }

}

/* END ALERT*/



/*Event----------------------------------------------------------*/



.containevent {

  position: relative;

  overflow: auto;

  overflow: hidden;

  margin-top: 15px;

}



.swiper-container-3 {

  width: 90%;

  margin: 0 auto;

  max-width: 1000px;

  height: 650px;

  padding-top: 10px;

  padding-bottom: 50px;

  white-space: nowrap;

}



.swiper-container-3 .swiper-slide {

  background-position: center;

  background-size: cover;

  width: 400px;

  height: 300px;

  border-radius: 15px;

  box-shadow: 0 0 0 5px rgb(203 175 107), 0 0 0 10px rgb(45 52 79);

}



.swiper-container-3 .swiper-slide.swiper-slide-active {

  background-position: center;

  background-size: cover;

  width: 400px;

  height: 300px;

  border-radius: 15px;

  box-shadow: 0 0 0 5px rgb(203 175 107), 0 0 0 10px rgb(45 52 79);

  margin-top: 0px;

}



.swiper-container-3 .detailpro {

  display: none;

}



.swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

  position: absolute;

  width: 450px;

  left: -30px;

  margin: 0 auto;

  text-align: center;

  bottom: -230px;

  line-height: 30px;

  font-size: 20px;

  display: block;

  color: #000;

}



.swiper-container-3 .btnbonus {

  font-size: 20px;

  border-radius: 10px;

  padding: 15px;

  border: none;

  color: white;

  width: 80%;

  margin: 0 auto;

  margin-top: 20px;

  box-shadow: 0px 0px 0px 2px #b59c60, 0px 0px 5px 1px black;

  font-weight: bold;

  outline: none;

  transition: 0.4s;

}



.swiper-container-3 .btnbonus:hover {

  font-size: 23px;

  color: white;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px #e8c675, 0 0 20px #e8c675,

    0 0 30px #e8c675;

}



.btnnext2 {

  padding: 50px 10px;

  margin-top: -190px;

  box-shadow: 0 0 0 2px #c7aa69, 0 0 0 6px #1c1f22;

  border-radius: 7px;

  position: absolute;

  top: 50%;

  right: 8px;

  font-size: 25px;

  color: white;

  z-index: 999;

  border: none;

}



.btnnext2:hover {

  background: #262d47;

  font-size: 25px;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,

    0 0 30px gold;

}



.btnnext2.swiper-button-disabled {

  opacity: 0.5;

}



.btnnext2.swiper-button-disabled:hover {

  opacity: 0.5;

  text-shadow: 0 0 0 white;

}



.btnprev2 {

  padding: 50px 10px;

  margin-top: -190px;

  box-shadow: 0 0 0 2px #b59c60, 0 0 0 6px #1c1f22;

  border-radius: 7px;

  position: absolute;

  top: 50%;

  left: 8px;

  font-size: 25px;

  color: white;

  z-index: 999;

  border: none;

}



.btnprev2:hover {

  background: #262d47;

  font-size: 25px;

  text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 10px gold, 0 0 20px gold,

    0 0 30px gold;

}



.btnprev2.swiper-button-disabled {

  opacity: 0.5;

}



.btnprev2.swiper-button-disabled:hover {

  opacity: 0.5;

  text-shadow: 0 0 0 white;

}



@media (max-width: 959px) {

  .swiper-container-3 .swiper-slide {

    width: 400px;

    height: 300px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 400px;

    height: 300px;

    margin-top: 0px;

  }

  .btnnext2 {

    margin-top: -170px;

  }

  .btnprev2 {

    margin-top: -170px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: -10px;

    margin: 0 auto;

    bottom: -190px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .swiper-container-3 {

    height: 600px;

  }

}



@media (max-width: 765px) {

  .containevent {

    margin-top: 5px;

  }

  .swiper-container-3 {

    margin-top: -20px;

  }

  .swiper-container-3 .swiper-slide {

    width: 400px;

    height: 300px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 400px;

    height: 300px;

    margin-top: 0px;

  }

  .btnnext2 {

    margin-top: -150px;

  }

  .btnprev2 {

    margin-top: -150px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: px;

    margin: 0 auto;

    bottom: -190px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .swiper-container-3 {

    height: 560px;

    padding-top: 40px;

  }

}



@media (max-width: 643px) {

  .containevent {

    margin-top: -15px;

  }

  .swiper-container-3 {

    margin-top: -45px;

  }

  .swiper-container-3 .swiper-slide {

    width: 332px;

    height: 250px;

    margin-top: 40px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 332px;

    height: 250px;

    margin-top: 40px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 400px;

    left: -40px;

    margin: 0 auto;

    bottom: -190px;

    line-height: 30px;

    font-size: 18px;

    display: block;

  }

  .btnnext2 {

    margin-top: -140px;

  }

  .btnprev2 {

    margin-top: -140px;

  }

  .swiper-container-3 {

    height: 530px;

  }

}



@media (max-width: 512px) {

  .containevent {

    margin-top: -25px;

  }

  .swiper-container-3 {

    margin-top: -35px;

  }

  .swiper-container-3 .swiper-slide {

    width: 305px;

    height: 230px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 305px;

    height: 230px;

    margin-top: 40px;

  }

  .btnnext2 {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .btnprev2 {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 360px;

    left: -30px;

    margin: 0 auto;

    bottom: -185px;

    line-height: 30px;

    font-size: 16px;

    display: block;

  }

  .swiper-container-3 {

    height: 505px;

  }

}



@media (max-width: 458px) {

  .swiper-container-3 {

    margin-top: -35px;

  }

  .swiper-container-3 .swiper-slide {

    width: 220px;

    height: 166px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 220px;

    height: 166px;

    margin-top: 50px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 350px;

    left: -73px;

    margin: 0 auto;

    bottom: -180px;

    line-height: 30px;

    font-size: 15px;

    display: block;

  }

  .swiper-container-3 {

    height: 480px;

  }

}



@media (max-width: 401px) {

  .swiper-container-3 .swiper-slide {

    width: 210px;

    height: 158px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active {

    width: 210px;

    height: 158px;

    margin-top: 50px;

  }

  .swiper-container-3 .swiper-slide.swiper-slide-active .detailpro {

    position: absolute;

    width: 330px;

    left: -70px;

    margin: 0 auto;

    bottom: -185px;

    line-height: 30px;

    font-size: 14px;

    display: block;

    padding: 5px;

  }

  .btnnext2 {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .btnprev2 {

    padding: 20px 10px;

    margin-top: -100px;

  }

  .swiper-container-3 {

    height: 460px;

  }

}



a:hover {

  color: rgb(255, 255, 255);

  text-decoration-line: none;

}



.divspin {

  text-align: center;

  background: #00000024;

  border-radius: 20px;

  overflow: auto;

  padding: 0 10px;

  padding-top: 20px;

}

/*Event----------------------------------------------------------*/

/* ===== QR Deposit UI (FULL / COPY-PASTE READY) ===== */

/* ===== Deposit Box ===== */
.qr-deposit-box{
  width: 80%;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(31, 31, 31, 0.555);
  border: 1px solid rgba(37, 37, 37, 0.897);
  border-radius: 14px;
  padding: 14px;
}

.qr-deposit-title{
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 10px;
}

.qr-deposit-label{
  display:block;
  text-align:left;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}

.qr-deposit-input{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(0, 0, 0, 0.39);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px;
}

.qr-deposit-cur{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
  color: #fff;
}

#qr_amount{
  flex: 1;
  height: 38px;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

#qr_amount::placeholder{
  color: rgba(255,255,255,.35);
}

.qr-deposit-clear{
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  font-weight: 800;
}

.qr-deposit-clear:hover{ background: rgba(255,255,255,.10); }

.qr-deposit-hint{
  text-align:left;
  font-size: 12px;
  color: rgba(255,255,255,.60);
  margin-top: 8px;
}

.qr-deposit-quick{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.qr-qbtn{
  border-radius: 12px;
  padding: 12px 10px;
  border: 1px solid rgba(50, 35, 255, 0.877);
  background: rgba(2, 37, 151, 0.836);
  color: rgba(255,255,255,.92); /* FIX: เดิมเป็น #000 ทำให้อ่านไม่เห็นบนพื้นมืด */
  font-weight: 900;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease;
}

.qr-qbtn:active{ transform: scale(.98); }
.qr-qbtn:hover{ background: rgba(34, 55, 241, 0.1); }

.qr-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 2px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

.qr-row b{ color:#fff; font-size: 14px; }

.qr-status{ color: #ffd36b; }

.qr-deposit-submit{
  width: 100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  color: #0b0d12;
  background: linear-gradient(90deg, #ffd36b 0%, #ffb84a 45%, #ffdf93 100%);
  box-shadow: 0 10px 20px rgba(255,196,87,.18);
}

.qr-deposit-submit:active{ transform: translateY(1px); }

.qr-deposit-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  text-align:left;
}

/* ===== Responsive (Mobile) ===== */
@media (max-width: 420px){
  .qr-deposit-box{ width: 92%; padding: 12px; }
  .qr-deposit-title{ font-size: 14px; }
  #qr_amount{ font-size: 15px; }

  .qr-deposit-quick{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qr-qbtn{ padding: 11px 10px; }
}

/* ===== Modal QR ===== */
/* โครงสร้างแนะนำ:
   <div class="qr-modal">
     <div class="qr-modal-backdrop"></div>
     <div class="qr-modal-card">...</div>
   </div>
*/

.qr-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* อยู่บนสุด */
  display: flex;        /* FIX: จัดวางแบบ responsive */
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 14px 24px;
  overflow: auto;       /* FIX: ถ้าเนื้อหายาวให้เลื่อนในโมดัลได้ */
  -webkit-overflow-scrolling: touch;
}

.qr-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 2147483646;
}

.qr-modal-card{
  position: relative;
  width: min(480px, 100%);
  margin: 0; /* FIX: เลิก margin-top:300px */
  background: #11141b;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  color:#fff;
  overflow:hidden;
  z-index: 2147483647;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Thai",sans-serif;
}

.qr-modal-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px 10px;
}

.qr-modal-title{font-size:18px;font-weight:900}
.qr-modal-sub{font-size:12px;color:rgba(255,255,255,.65);margin-top:3px}

.qr-x{
  border:none;
  background:rgba(255,255,255,.06);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:0;
}

.qr-modal-body{padding: 10px 14px 14px}
.qr-amount-line{font-size:13px;color:rgba(255,255,255,.85);margin-bottom:10px}
.qr-img-wrap{display:flex;justify-content:center;margin: 8px 0 12px}
.qr-img-wrap img{width:260px;max-width:100%;background:#fff;border-radius:12px;padding:10px}
.qr-status-line{font-size:13px;color:rgba(255,255,255,.85);margin-bottom:12px}
.qr-cancel{width:100%;border:none;border-radius:12px;padding:12px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.08);color:#fff}

/* ===== Modal Responsive ===== */
@media (max-width: 420px){
  .qr-modal{ padding: 6vh 12px 18px; }
  .qr-modal-title{ font-size: 16px; }
  .qr-img-wrap img{ width: 240px; }
}

/* หมายเหตุ: ลบของเดิมที่แรงเกินไปแล้ว:
   - margin-top:300px
   - .qr-modal, .qr-modal * { transform:none !important; }
   เพราะทำให้ layout/animation อื่นเพี้ยนได้ และไม่จำเป็น
*/