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

body {
  font-family: 'Kanit';
}

.modal-container[data-v-1e9c91ad] {
    background-color: #000000e6;
    border-radius: 12px;
    inset: 0;
    margin: 0;
    position: fixed;
    transition: opacity .5s
}

.modal-content-container[data-v-1e9c91ad] {
    bottom: 0;
    height: 100%;
    overflow: auto;
    padding-top: 12px;
    position: absolute;
    top: 0;
    width: 100%
}

.login-option-box-item { user-select: none; transition: transform .06s ease; }
.login-option-box-item:active { transform: scale(.98); }
/* ทำให้ไอคอนตาเวลากด/โฟกัส ดูเป็นปุ่ม */
.login-form .relative.flex.ml-auto img,
.login-form .relative.flex.flex-end.ml-auto img {
  outline: none;
  transition: transform .06s ease;
}
.login-form .relative.flex.ml-auto img:active,
.login-form .relative.flex.flex-end.ml-auto img:active {
  transform: scale(.95);
}
.login-form .relative.flex.ml-auto img:focus-visible,
.login-form .relative.flex.flex-end.ml-auto img:focus-visible {
  box-shadow: 0 0 0 2px rgba(236,202,119,.6);
  border-radius: 6px;
}
/* กล่องภาษา (ที่มีคลาสชุดนี้อยู่แล้ว) ซ่อนเป็นค่าเริ่มต้น */
.absolute.right-3.top-12.float-right.mr-2.my-5.z-10 { display: none; }
/* เวลาเปิดให้แค่เติมคลาส .show */
.absolute.right-3.top-12.float-right.mr-2.my-5.z-10.show { display: block; }

/* กล่องภาษา (ที่มีคลาสชุดนี้อยู่แล้ว) ซ่อนเป็นค่าเริ่มต้น */
.absolute.right-0.top-10.float-right.z-10 { display: none; }
/* เวลาเปิดให้แค่เติมคลาส .show */
.absolute.right-0.top-10.float-right.z-10.show { display: block; }


/* ทำให้รูปธงดูเป็นปุ่ม (มีอยู่แล้วก็ไม่เป็นไร) */
img[alt="logo"].cursor-pointer { cursor: pointer; }
/* ต้อง escape [] ใน CSS ด้วยเหมือนกัน */
/* เริ่มต้นซ่อน */
.toggleinputshow { display: none; }
/* มีค่าในช่อง -> โชว์ */
.toggleinputshow.is-on { display: block; }
.phonecodebox{
    display: none;
}
.fi-kh.fis {
    background-image: url(assets/1760337585578/kh.CAffWc0R.svg);
}
.countryselectbox{display:none;}


/* สไลด์ที่แสดง/ซ่อน */
.popupimage { display: none; }
.popupimage.is-active { display: block; }

/* แอนิเมชัน */
@keyframes slideOutLeft   { from{transform:translateX(0);opacity:1} to{transform:translateX(-40px);opacity:0} }
@keyframes slideInRight   { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOutRight  { from{transform:translateX(0);opacity:1} to{transform:translateX(40px);opacity:0} }
@keyframes slideInLeft    { from{transform:translateX(-40px);opacity:0} to{transform:translateX(0);opacity:1} }

.anim-out-left  { animation: slideOutLeft  .25s ease forwards; }
.anim-in-right  { animation: slideInRight  .25s ease forwards; }
.anim-out-right { animation: slideOutRight .25s ease forwards; }
.anim-in-left   { animation: slideInLeft   .25s ease forwards; }


/* เริ่มซ่อน bottom sheet ทั้งก้อน */
.walletbottomfixed { display: none; }
.walletbottomfixed.show { display: block; }

/* overlay จางเข้า-ออก */
.bottom-modal-selector-overlay{
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.bottom-modal-selector-overlay.show{
  opacity: .6;
  pointer-events: auto;
}

/* content เลื่อนขึ้นนุ่ม ๆ */
.bottom-modal-selector-content{
  transform: translateY(16px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.bottom-modal-selector-content.show{
  transform: translateY(0);
  opacity: 1;
}

.side-nav-container{
    display: none;
}
.side-nav-container.show{
    display: block !important;
}

/* ซ่อน popup เริ่มต้น */
.contactpopupbox{
  display:none;
}
.custom-popup-mask.show { display: block; }

 /* ซ่อนเมนูตอนเริ่ม */
  .historybdw { display: none; }
  .historybdw.show { display: block; }

  /* ซ่อนด้วยคลาส (กันกรณีใช้หลายที่) */
  .insideaccordingalert.is-hidden { display: none; }

  /* หมุนลูกศรนุ่ม ๆ */
  .arrow-rotate { transition: transform .2s ease; }
  .arrow-rotate.rotate { transform: rotate(180deg); }


/* keyframes จากก่อนหน้าใช้ต่อได้ */
@keyframes slideOutLeft  { from {transform: translateX(0);   opacity:1;} to {transform: translateX(-6%); opacity:0;} }
@keyframes slideInRight  { from {transform: translateX(6%);  opacity:0;} to {transform: translateX(0);   opacity:1;} }
@keyframes slideOutRight { from {transform: translateX(0);   opacity:1;} to {transform: translateX(6%);  opacity:0;} }
@keyframes slideInLeft   { from {transform: translateX(-6%); opacity:0;} to {transform: translateX(0);   opacity:1;} }

.slide-anim { will-change: transform, opacity; }
.slide-out-left  { animation: slideOutLeft  .28s ease both; }
.slide-in-right  { animation: slideInRight  .28s ease both; }
.slide-out-right { animation: slideOutRight .28s ease both; }
.slide-in-left   { animation: slideInLeft   .28s ease both; }

.is-animating { pointer-events: none; }

/* กรอบเวทีที่เราจะสร้างด้วย JS */
.rank-frame{
  position: relative;
  overflow: hidden;
}
/* ให้แต่ละบล็อกถูกซ้อนเป็นเลเยอร์ในกรอบ */
.rank-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index: 0;
}
.rank-layer.is-next{ z-index: 1; }

/* เคารพผู้ใช้ที่ลด motion */
@media (prefers-reduced-motion: reduce){
  .slide-out-left,.slide-in-right,.slide-out-right,.slide-in-left{ animation-duration:1ms; }
}

/* เวทีหลักของคารูเซล */
.boxsliderank{
  position: relative;
  display: grid;          /* ให้ลูกทุกสไลด์ซ้อนทับกันในเซลล์เดียว */
  grid-template-columns: 100%;
  grid-template-rows: 1fr;
  overflow: hidden;       /* กันล้นขอบเวลาเลื่อน */
  isolation: isolate;     /* กันชั้นซ้อนจากภายนอก */
  align-content: start;   /* กันยืดดึงลงล่าง */
}

/* ให้แต่ละหน้าสไลด์วางทับกัน (อยู่ช่องเดียวกัน) */
.boxsliderank > .mx-4.mt-4{
  grid-area: 1 / 1;       /* ซ้อนทับกันบนเซลล์เดียว */
  width: 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ถ้าใช้คลาส .is-active กับสไลด์ปัจจุบัน จะลื่นสุด */
.boxsliderank > .mx-4.mt-4:not(.is-active){
  opacity: 0;
  pointer-events: none;   /* กันคลิกสไลด์ที่ไม่แสดง */
}

/* ป้องกันภาพ “ยุบ/เด้ง” เพราะ baseline space ของ img */
.boxsliderank img{
  display: block;         /* ตัดช่องว่างใต้รูป */
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* ถ้าสไลด์มีความสูงใกล้เคียงกัน แนะนำตั้ง min-height กันยุบ */
@media (min-width: 0){
  .boxsliderank{
    /* ปรับตามดีไซน์คุณ หากส่วนหัวสไลด์สูง ~165px:
       ใส่ min-height กันเฟรมยุบชั่วคราวตอนสลับ */
    min-height: 165px;
  }
}

/* ทำให้ keyframe ที่ใส่กับ .slide-anim นิ่ง ไม่สั่น */
.boxsliderank .slide-anim{
  backface-visibility: hidden;
  transform: translateZ(0);
}


.custom-popup-mask.checkin {
    display: none;
}
.boxearn {
    display: none;
}


  /* ตำแหน่งรวมของ toast ด้านบนจอ */
  #toast-root {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none; /* ให้คลิกทะลุ เว้นปุ่ม close ของ toast เอง */
  }

  .Vue-Toastification__toast {
    pointer-events: auto; /* ให้คลิกปุ่มปิดได้ */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 92vw;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    background: #2f855a; /* success */
    margin-top: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(-20px);
    animation: toast-in .28s ease-out forwards;
  }

  .Vue-Toastification__toast--success { background: #2f855a; } /* เขียว */

  .Vue-Toastification__icon {
    width: 18px; height: 18px; flex: 0 0 18px;
  }

  .Vue-Toastification__toast-body {
    font-size: 14px; line-height: 1.3;
  }

  .Vue-Toastification__close-button {
    margin-left: 6px;
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
  }

  .Vue-Toastification__progress-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.85);
    transform-origin: left center;
    animation-fill-mode: forwards;
  }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-15px); }
  }

  /* แถวหลายอันซ้อนจะไหลลง */
  #toast-root .Vue-Toastification__toast { position: relative; }


  .flex.flex-col.justify-center.cursor-pointer.creditBalanceContainer .flex.justify-end.mt-1 {
    display: none;
}

.flex.flex-col.justify-center.cursor-pointer.creditBalanceContainer .absolute.pt-0.bottom-0.right-0.w-full {
    display: none;
}

.ucoin-progress-container.cursor-pointer.items-center.justify-end.gap-1 {
    display: none;
}
.flex.flex-col.justify-center.cursor-pointer.creditBalanceContainer span.text-white.text-xxxs {
    font-size:14px;
}

/* ===== Modal base ===== */
  .modal-container{
    display: none; 
  }
  .modal-container.is-open{ display:flex; }

  .modal-overlay{
    position:absolute; inset:0; background: rgba(0,0,0,.55);
    animation: fadeIn .2s ease-out forwards;
  }


  @keyframes slideIn {
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes fadeIn {
    from{ opacity: 0 } to { opacity: 1 }
  }
  @keyframes slideOut {
    to { transform: translateY(-8px); opacity: 0; }
  }

    /* ซ่อนกล่องเริ่มต้น */
  .boxrank02 { display: none; }

  /* แอนิเมชันโชว์ */
  .showing {
    animation: slideDown .18s ease-out;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }




    /* ===== Overlay ===== */
  .overlaybankselect{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease;
    z-index: 2200;
  }
  .overlaybankselect.is-open{
    opacity: 1; visibility: visible;
  }

  /* ===== Bottom sheet ===== */
  .bankselect{
    z-index: 2201;
    transform: translateY(100%);
    opacity: 0; visibility: hidden;
    transition: transform .22s ease-out, opacity .18s ease-out, visibility 0s linear .22s;
  }
  .bankselect.is-open{
    transform: translateY(0);
    opacity: 1; visibility: visible;
    transition: transform .22s ease-out, opacity .18s ease-out;
  }

  /* ล็อกสกอร์ลเมื่อแผงเปิด */
  body.modal-open{
    overflow: hidden;
    touch-action: none;
  }
  .depositsuccess {
}


  .depositstart .hidden{ display:none !important; }

  /* ท่าเล็ก ๆ ตอนโชว์ */
  .slide-in{ animation:slideIn .18s ease-out both; }
  @keyframes slideIn{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* ป๊อปอัปสำเร็จ: ซ่อนไว้ก่อน */
  .depositsuccess.hidden .overlay{ display:none; }
  .depositsuccess.hidden{ display:none; }
  .depositsuccess .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999;
  }
  /* ซ่อนปุ่มล่างไว้ก่อน */
  .qrcodestep02bottom { display: none; }
  /* เผื่ออยากใช้คลาสแทน inline style */
  .qrcodestep02bottom.is-visible { display: flex; }
  .depositsuccess.slide-in {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.boxalertred{
  display: none;
}
.deposit-amount-container2.flex.flex-col.justify-center.items-center {
    margin-top: 40px;
}