#ProDetailModalsuper .modal-body {
	margin-top: -2.75rem;
	padding: 0 6rem 1rem
}

#ProDetailModalsuper .modal-body .-one-time-img {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 110px;
	height: auto;
	-webkit-transform: translate(-30%, 30%);
	transform: translate(-30%, 30%)
}

@media (max-width:991.98px) {
	#ProDetailModalsuper .modal-body {
		height: unset;
		padding-right: 4rem;
		padding-left: 4rem
	}

	#ProDetailModalsuper .modal-body .-one-time-img {
		display: none
	}
}

@media (max-width:767.98px) {
	#ProDetailModalsuper .modal-body {
		margin-top: -3rem;
		padding-top: 1.25rem;
		padding-right: 2rem;
		padding-left: 2rem
	}
}





@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}

@-webkit-keyframes fadeInUpGameCategory {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInUpGameCategory {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@-webkit-keyframes x-excited-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(14);
    transform: scale(14)
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(10);
    transform: scale(10)
  }

  75% {
    opacity: 0;
    -webkit-transform: scale(6);
    transform: scale(6)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes x-excited-fade-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(14);
    transform: scale(14)
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(10);
    transform: scale(10)
  }

  75% {
    opacity: 0;
    -webkit-transform: scale(6);
    transform: scale(6)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes x-excited-fade-out {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2)
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(5);
    transform: scale(5)
  }
}

@keyframes x-excited-fade-out {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2)
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(3);
    transform: scale(3)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(5);
    transform: scale(5)
  }
}

.fadeInUpGameCategory {
  -webkit-animation-name: fadeInUpGameCategory;
  animation-name: fadeInUpGameCategory
}

@-webkit-keyframes fadeInGameCategory {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeInGameCategory {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fadeInGameCategory {
  -webkit-animation-name: fadeInGameCategory;
  animation-name: fadeInGameCategory
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}

@-webkit-keyframes fadeInNotOpacity {
  0% {
    opacity: 1
  }

  to {
    opacity: 1
  }
}

@keyframes fadeInNotOpacity {
  0% {
    opacity: 1
  }

  to {
    opacity: 1
  }
}

.x-bill-history-container .-no-result-wrapper .-heading-title .-title {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  color: #d9ad70;
}

.x-bill-history-container .-no-result-wrapper {
  padding: 1rem;
  background-color: hsla(0, 0%, 100%, .1);
  border-radius: 5px;
  text-align: center;
}

.fadeInNotOpacity {
  -webkit-animation-name: fadeInNotOpacity;
  animation-name: fadeInNotOpacity
}

@-webkit-keyframes x-hamburger-wave {
  0% {
    width: 70%
  }

  to {
    width: 100%
  }
}

@keyframes x-hamburger-wave {
  0% {
    width: 70%
  }

  to {
    width: 100%
  }
}

@-webkit-keyframes fadeInModal {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeInModal {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fadeInModal,
.fadeInRegister {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

@media (max-width:991.98px) {

  .fadeInModal,
  .fadeInRegister {
    -webkit-animation-name: fadeInModal;
    animation-name: fadeInModal
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}



.css-ks3red {
  position: fixed;
  z-index: 1300;
  inset: 0px;
  cursor: default;
}

.css-919eu4 {
  position: fixed;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  inset: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  z-index: -1;
}

.css-ekeie0 {
  height: 100%;
  outline: 0px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.css-uhb5lp {
  /* background-color: rgb(255, 255, 255); */
  color: rgba(0, 0, 0, 0.87);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 64px);
  max-width: 600px;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  margin: 32px;
}

.css-ohyacs {
  margin: 0px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.0075em;
  padding: 16px 24px;
  flex: 0 0 auto;
}

.css-1rsvwou {
  margin: 0px;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-family: Kanit;
  font-weight: 700;
  font-size: 22px;
}

.css-69br6q {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0px;
}

.MuiDialogTitle-root+.css-69br6q {
  padding-top: 0px;
}

.css-14b29qc {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 8px;
  -webkit-box-pack: end;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.css-1ujsas3 {
  display: inline-flex;
  align-items: center;
    background-color: rgba(37, 2, 2, 0.788); /* เพิ่มสีพื้นหลังโปร่งใส */
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.275rem;
  line-height: 1.75;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  min-width: 64px;
  color: rgb(255, 255, 255);
  outline: 0px;
  border-width: 0px;
  margin: 0px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ปรับเพิ่มเมื่อ hover หรือ focus */
.css-1ujsas3:hover, .css-1ujsas3:focus {
  background-color: rgb(255, 0, 0); /* เพิ่มสีพื้นหลังโปร่งใส */
  color: rgb(250, 250, 250); /* เปลี่ยนสีข้อความเมื่อ hover */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเพื่อให้ปุ่มดูเด่น */
}

/* ปรับเปลี่ยนสีเมื่อกด */
.css-1ujsas3:active {
  background-color: rgba(255, 255, 255, 0.2); /* เมื่อกดปุ่มพื้นหลังจะเข้มขึ้น */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* เงามืดขึ้นเมื่อกด */
}



.centered-form .form-container .x-promotion-index .-logo {
  display: block;
  margin: 0 auto;
  /* จัดให้อยู่ตรงกลาง */
  max-width: 150px;
  /* กำหนดความกว้างสูงสุด */
  height: auto;
  /* รักษาสัดส่วน */
  margin-bottom: 20px;
  /* เพิ่มระยะห่างด้านล่าง */
}

.centered-form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* ทำให้อยู่กลางหน้าจอ */
  background: linear-gradient(to bottom, #141414, #000000);
  /* พื้นหลังสีไล่ระดับ */
  margin: 0;
}

/* -- force show checkbox บนหน้าล็อกอิน -- */
.x-login-form input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.x-login-form label.remember-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
}