/* global */
@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-Bold.eot");
  src: url("../fonts/SukhumvitSet-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SukhumvitSet-Bold.woff2") format("woff2"),
    url("../fonts/SukhumvitSet-Bold.woff") format("woff"),
    url("../fonts/SukhumvitSet-Bold.ttf") format("truetype"),
    url("../fonts/SukhumvitSet-Bold.svg#SukhumvitSet-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-Medium.eot");
  src: url("../fonts/SukhumvitSet-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/SukhumvitSet-Medium.woff2") format("woff2"),
    url("../fonts/SukhumvitSet-Medium.woff") format("woff"),
    url("../fonts/SukhumvitSet-Medium.ttf") format("truetype"),
    url("../fonts/SukhumvitSet-Medium.svg#SukhumvitSet-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-Light.eot");
  src: url("../fonts/SukhumvitSet-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SukhumvitSet-Light.woff2") format("woff2"),
    url("../fonts/SukhumvitSet-Light.woff") format("woff"),
    url("../fonts/SukhumvitSet-Light.ttf") format("truetype"),
    url("../fonts/SukhumvitSet-Light.svg#SukhumvitSet-Light") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-Thin.eot");
  src: url("../fonts/SukhumvitSet-Thin.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SukhumvitSet-Thin.woff2") format("woff2"),
    url("../fonts/SukhumvitSet-Thin.woff") format("woff"),
    url("../fonts/SukhumvitSet-Thin.ttf") format("truetype"),
    url("../fonts/SukhumvitSet-Thin.svg#SukhumvitSet-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("../fonts/SukhumvitSet-SemiBold.eot");
  src: url("../fonts/SukhumvitSet-SemiBold.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/SukhumvitSet-SemiBold.woff2") format("woff2"),
    url("../fonts/SukhumvitSet-SemiBold.woff") format("woff"),
    url("../fonts/SukhumvitSet-SemiBold.ttf") format("truetype"),
    url("../fonts/SukhumvitSet-SemiBold.svg#SukhumvitSet-SemiBold")
      format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Tadmai";
  src: url("../fonts/SukhumvitTadmai-Heavy.eot");
  src: url("../fonts/SukhumvitTadmai-Heavy.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/SukhumvitTadmai-Heavy.woff2") format("woff2"),
    url("../fonts/SukhumvitTadmai-Heavy.woff") format("woff"),
    url("../fonts/SukhumvitTadmai-Heavy.ttf") format("truetype"),
    url("../fonts/SukhumvitTadmai-Heavy.svg#SukhumvitTadmai-Heavy")
      format("svg");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Sukhumvit Tadmai";
  src: url("../fonts/SukhumvitTadmai-ExtraBold.eot");
  src: url("../fonts/SukhumvitTadmai-ExtraBold.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/SukhumvitTadmai-ExtraBold.woff2") format("woff2"),
    url("../fonts/SukhumvitTadmai-ExtraBold.woff") format("woff"),
    url("../fonts/SukhumvitTadmai-ExtraBold.ttf") format("truetype"),
    url("../fonts/SukhumvitTadmai-ExtraBold.svg#SukhumvitTadmai-ExtraBold")
      format("svg");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: "Sukhumvit Set";
  background-color: #131313;
}
img {
  max-width: 100%;
}
.modal-content.fix-radius {
  border-radius: 12px;
}

/*** header start ***/
header {
  position: relative;
  z-index: 3;
}
header .head-wrapper {
  background: linear-gradient(81.8deg, #a0060c -23.69%, #db0008 103.6%);
}
header .head-wrapper .head-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding-left: 5px;
  padding-right: 21px;
}
header .head-wrapper .head-inner .head-left,
header .head-wrapper .head-inner .head-right {
  display: inline-flex;
  align-items: center;
}
header .head-wrapper .head-inner .head-right > div:not(:last-child) {
  margin-right: 15px;
}
header .head-wrapper .head-inner .head-center .menu-list {
  display: inline-flex;
  gap: 1px;
}
header .head-wrapper .head-inner .head-center .menu-list .menu-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 80px;
  height: 30px;
  border-radius: 4px;
  padding: 0 10px;
}
header .head-wrapper .head-inner .head-center .menu-list .menu-item:hover {
  background: #ffffff;
}
header .head-wrapper .head-inner .head-center .menu-list .menu-item a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}
header .head-wrapper .head-inner .head-center .menu-list .menu-item:hover a {
  color: #db0008;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item:not(:last-child)
  a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translate(0, -50%);
  width: 1px;
  height: 13px;
  background: #ffffff;
}
header .head-wrapper .head-inner .head-center .menu-list .menu-item a .mn-icon {
  width: 15px;
  height: 15px;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item
  a
  .mn-icon.mn-home {
  background: url("../image/icon/icon-home-color.svg") no-repeat center /
    contain;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item
  a
  .mn-icon.mn-lotto {
  background: url("../image/icon/icon-lotto-color.svg") no-repeat center /
    contain;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item
  a
  .mn-icon.mn-money-bag {
  background: url("../image/icon/icon-deposit-color.svg") no-repeat center /
    contain;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item
  a
  .mn-icon.mn-prize {
  background: url("../image/icon/icon-reward-color.svg") no-repeat center /
    contain;
}
header
  .head-wrapper
  .head-inner
  .head-center
  .menu-list
  .menu-item
  a
  .mn-icon.mn-telephone {
  background: url("../image/icon/icon-contact-color.svg") no-repeat center /
    contain;
}
@media (min-width: 1200px) {
  header .head-wrapper .head-inner {
    padding-right: 5px;
  }
}

/* logo */
.logo {
  width: 56px;
  height: 56px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

/* rules */
.rules a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  text-decoration: underline;
  cursor: pointer;
}
.rules img {
  width: 21px;
  height: 21px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  margin-right: 3px;
}
@media (min-width: 1200px) {
  .rules a {
    font-size: 15px;
  }
}

/* signin-login */
.signin-or-login {
  gap: 15px;
}
.signin-or-login .btn-custom {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  min-width: 136px;
  font-family: "Sukhumvit Tadmai";
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px #0000001f inset, 0px 1px 2.8px -1px #6a6a6a66;
  padding: 10px 10px;
  cursor: pointer;
}
.signin-or-login .btn-custom.btn-cus-green {
  background: linear-gradient(90deg, #0fc463 0%, #00deb9 100%);
  color: #ffffff;
}
.signin-or-login .btn-custom.btn-cus-gold {
  background: linear-gradient(90deg, #fea706 0%, #ffca28 100%);
  color: #131313;
}

/* credit balance */
.credit-balance {
  display: flex;
  align-items: center;
  width: 156px;
  border-radius: 500px;
  border: 1px solid #aa0006;
  overflow: hidden;
}
.credit-balance .credit-balance-inner {
  display: inline-flex;
  align-items: center;
  flex: 1 0 auto;
  gap: 4px;
  background: #790004;
  padding: 3px;
}
.credit-balance .credit-balance-inner img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.credit-balance .credit-balance-inner span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
}

/* burger menu */
#burger-menu {
  width: 30px;
  height: 25px;
  position: relative;
  z-index: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
#burger-menu span {
  display: block;
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 3px;
  background: #ffffff;
  border-radius: 500px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#burger-menu span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#burger-menu span:nth-child(2) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#burger-menu span:nth-child(3) {
  top: 20px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#burger-menu.open span {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
}
#burger-menu.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}
#burger-menu.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#burger-menu.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
  left: 5px;
}
#burger-menu .burger-open {
  width: 51px;
  height: 58px;
  position: absolute;
  top: -12px;
  right: -11px;
  z-index: 2;
  background: #131313;
  border-bottom: none;
  box-shadow: 0px 4px 4px 0px #00000040;
  -webkit-border-top-left-radius: 100px;
  -webkit-border-top-right-radius: 100px;
  -moz-border-radius-topleft: 100px;
  -moz-border-radius-topright: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}
#burger-menu.open .burger-open {
  opacity: 1;
  visibility: visible;
}
#burger-menu .burger-lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 242px;
  position: absolute;
  top: 44px;
  right: -32px;
  z-index: 2;
  background: #131313;
  border-radius: 4px;
  box-shadow: 0px 4px 14.8px -1px #00000061;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.3s linear, opacity 0.3s linear;
  padding: 20px 0;
}
#burger-menu.open .burger-lists {
  opacity: 1;
  visibility: visible;
}
#burger-menu .burger-lists ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
#burger-menu .burger-lists ul li a {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 600;
  line-height: 14px;
  text-decoration: none;
  padding: 0 20px;
}
#burger-menu .burger-lists ul li:hover a {
  background: linear-gradient(81.8deg, #a0060c -23.69%, #db0008 103.6%);
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-weight: 700;
}
#burger-menu .burger-lists ul li .burger-icon {
  width: 30px;
  height: 30px;
  margin-right: 15px;
}
#burger-menu .burger-lists ul li .burger-icon.icon-information {
  background: url("../image/icon/icon-profile-color.svg") no-repeat center /
    contain;
}
#burger-menu .burger-lists ul li .burger-icon.icon-history {
  background: url("../image/icon/icon-history-color.svg") no-repeat center / contain;
}
#burger-menu .burger-lists ul li .burger-icon.icon-promotion {
  background: url("../image/icon/icon-promo-select.svg") no-repeat center / contain;
}
#burger-menu .burger-lists ul li .burger-icon.icon-invite {
  background: url("../image/icon/icon-friends-select.svg") no-repeat center / contain;
}
#burger-menu .burger-lists .burger-logout {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 202px;
  height: 60px;
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  margin-top: 35px;
}
#burger-menu .burger-lists .burger-logout .icon-logout {
  width: 38px;
  height: 38px;
  background: url("../image/icon/icon-logout.svg") no-repeat center / contain;
  margin-right: 10px;
}
/*** header end ***/

/*** body start ***/
.bg-index {
  background-image: url("../image/background/bg-index-long.png");
  background-position-y: -58px;
  background-repeat: repeat-x;
}
.red-body {
  background: url("../image/background/bg-body.png") #000000 no-repeat center
    34px / cover;
}
.over-body-wrapper {
  background-image: url("../image/background/bg-body-inner.png");
  background-color: #131313;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: -40px;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
.over-body-wrapper.re-width {
  background: none;
  max-width: none;
}
.body-wrapper {
  min-height: 100vh;
}
.bule-head {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  padding: 7px 44px;
  margin: 20px 0 20px;
}
.bule-head a {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translate(0, -50%);
  display: flex;
}
.bule-head img {
  width: 14px;
  height: 22px;
}
.blank-card {
  padding-top: 100%;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e6e9ec;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
  overflow: hidden;
}
.blank-card-2 {
  border-radius: 4px;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
  overflow: hidden;
}
.blank-card-2 img {
  width: 100%;
}
.custom-popover {
  max-width: 196px;
  border-radius: 4px;
  border: none;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
}
.custom-popover .popover-arrow::before {
  border-top-color: transparent !important;
}
.custom-popover .popover-header {
  background-color: transparent;
  color: #195bd6;
  font-family: "Sukhumvit Set";
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  border: none;
  padding: 15px 15px 2px;
}
.custom-popover .popover-header::before {
  border-bottom: none;
}
.custom-popover .popover-body {
  color: #797979;
  font-family: "Sukhumvit Set";
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  padding: 0 15px 15px;
}
.user-id {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 0 auto;
  position: relative;
  height: 20px;
  background: #ffffff;
  color: #797979;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  border-radius: 14px;
  overflow: hidden;
  padding: 3px 13px 3px 26px;
}
.user-id span {
  color: #195bd6;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-id img {
  position: absolute;
  top: -1px;
  left: 0;
}
.profile-wrapper .member {
  display: flex;
  gap: 15px;
  height: 45px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.profile-wrapper .member .member-info {
  display: inline-flex;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
  gap: 10px;
}
.profile-wrapper .member .member-info .member-crown img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.profile-wrapper .member .member-info .member-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  color: #ffffff;
}
.profile-wrapper .member .member-info .member-name .u-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
}
.profile-wrapper .member .member-info .member-name .id-name {
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
}
.profile-wrapper .member .member-info .member-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-wrapper .member .member-bar {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
}
.profile-wrapper .member .member-bar .bar-user {
  display: inline-flex;
  align-items: center;
  width: 104px;
  height: 28px;
  background: linear-gradient(263.32deg, #f50e11 5.02%, #8f080a 127.87%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  border-radius: 500px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 0 2px;
}
.profile-wrapper .member .member-bar .bar-user img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  margin-right: 10px;
}
.utility-box {
  display: flex;
  gap: 15px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 14.8px -1px #b6b6b64d;
  padding: 15px;
}
.utility-box .u-balance {
  flex: 0 0 calc(58% - 7.5px);
  max-width: calc(58% - 7.5px);
}
.utility-box .u-balance .balance-amount {
  background: #f5f5f5;
  text-align: center;
  border: 1px solid #acb8c4;
  border-radius: 10px;
  padding: 10px 10px;
}
.utility-box .u-balance .balance-amount .amount-text {
  color: #3c3c3c;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 4px;
}
.utility-box .u-balance .balance-amount .amount-now {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 24px;
  font-weight: normal;
  line-height: 25px;
  word-break: break-all;
}
.utility-box .u-balance .balance-credit {
  text-align: center;
  margin: 5px 0;
}
.utility-box .u-balance .balance-credit .turn-must {
  color: #797979;
  font-size: 8px;
  font-weight: 600;
  line-height: 14px;
}
.utility-box .u-balance .balance-credit .turn-must span {
  color: #195bd6;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}
.utility-box .u-balance .balance-credit .turn-now {
  color: #797979;
  font-size: 8px;
  font-weight: 600;
  line-height: 14px;
}
.utility-box .u-balance .balance-credit .turn-now span {
  color: #06c755;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}
.utility-box .u-balance .balance-coin {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: #f5f5f5;
  font-size: 8px;
  font-weight: 600;
  line-height: 14px;
  border-radius: 10px;
  padding: 3.5px 10px;
}
.utility-box .u-balance .balance-coin span {
  color: #db0008;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}
.utility-box .u-balance .balance-coin .b-coin {
  width: 13px;
  height: 13px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.utility-box .u-balance .balance-coin .b-note {
  width: 11px;
  height: 11px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.u-btn {
  flex: 0 0 calc(42% - 7.5px);
  max-width: calc(42% - 7.5px);
}
.u-btn .btn-custom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 55px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.u-btn .btn-custom.btn-cus-green {
  background: #34c759;
  color: #ffffff;
  margin-bottom: 14px;
}
.u-btn .btn-custom.btn-cus-blue {
  background: #007aff;
  color: #ffffff;
}
.transfer-balance {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 103.6%);
  border-radius: 10px;
  padding: 18px 15px 25px;
  margin-bottom: 10px;
}
.transfer-balance .transfer-balance-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  margin-bottom: 30px;
}
.transfer-balance .transfer-balance-credit {
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 40px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.transfer-balance .transfer-balance-credit span {
  font-size: 30px;
}
.head-red {
  background: linear-gradient(
    81.68deg,
    #a0060c -20.74%,
    #a0060c 65.86%,
    #db0008 137.89%
  );
  border-radius: 10px;
  box-shadow: 0px 1px 3px -0.5px rgba(37, 113, 184, 0.14);
  margin-bottom: 15px;
}
.head-red .head-red-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100px;
  background: url("../image/background/bg-headred.png") no-repeat right;
  color: #ffffff;
  font-size: 35px;
  font-weight: 700;
  line-height: 14px;
  padding: 10px 20px;
}
.head-red .head-red-inner .low-text {
  font-size: 20px;
  margin-bottom: 1.5rem;
}
@media (min-width: 1200px) {
  .bg-index {
    background-image: url("../image/background/bg-index.png");
    background-position-y: 23px;
  }
  .over-body-wrapper {
    background-image: url("../image/background/bg-body-inner-long.png");
    background-position-y: 280px;
  }
  .balance-box .balance-now {
    background: transparent;
  }
  .balance-box .balance-note {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

/* rules */
.rules-wrapper {
  position: relative;
  border-radius: 10px;
  margin: 20px 0 15px;
}
.rules-wrapper .close-login {
  position: absolute;
  top: 9px;
  right: 9px;
  color: #ffffff;
  cursor: pointer;
}
.rules-card {
  border-radius: 10px;
  overflow: hidden;
}
.rules-card .title {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
}
.rules-card .title .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 45px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 0 10px;
}
.rules-card .rules-info {
  color: #131313;
  font-size: 16px;
}
.rules-card .rules-info .rules-box {
  margin-bottom: 1rem;
}
.rules-card .rules-info .rules-box.txt-indent {
  text-indent: 20px;
}
.rules-card .rules-info .c-green {
  color: #06c554;
}
.rules-card .rules-info .c-red {
  color: #da2323;
}
.rules-card .rules-info .c-blue {
  color: #007aff;
}
.rules-card .rules-info .rules-title {
  color: #da2323;
  font-size: 16px;
  text-decoration: underline;
  margin-bottom: 1rem;
}
.rules-card .rules-info .rules-lists {
  list-style: none;
  padding: 15px 0;
  margin: 0 0 1rem;
}
.rules-card .rules-info .rules-lists li {
  background: url("../image/icon/green-dot.svg") no-repeat 0 3px/ 13px 13px;
  color: #131313;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  padding-left: 20px;
}
.rules-card .btn-box {
  display: inline-flex;
  width: 100%;
}
.rules-card .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.rules-card .btn-custom.btn-cus-green {
  background: #06c755;
  color: #ffffff;
}

/* login */
.login-wrapper {
  position: relative;
  background: linear-gradient(
    81.8deg,
    #a0060c -1.68%,
    #a0060c 15.23%,
    #db0008 103.6%
  );
  box-shadow: 0px 0px 10px 0px #ff000a, 0px 0px 8px 0px #ff0000,
    0px 0px 2px 0px #ffd7d7;
  border-radius: 10px;
  margin: 20px 0 15px;
  overflow: hidden;
}
.login-wrapper .login-wrapper-inner {
  background-image: url("../image/background/bg-login.png");
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 15px 25px 30px;
}
.login-wrapper .close-login {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #ffffff;
  cursor: pointer;
}
.login-wrapper form {
  display: flex;
  flex-direction: column;
}
.login-wrapper .logo-expand {
  display: inline-flex;
  justify-content: center;
}
.login-wrapper .logo-expand img {
  width: 106px;
  height: 106px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.login-wrapper .login-title {
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  padding: 10px 10px;
  margin: 0 0 25px;
}
.login-wrapper .input-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}
.login-wrapper form .input-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  margin-bottom: 15px;
}
.login-wrapper form input[type="text"],
.login-wrapper form input[type="password"] {
  color: #c4c4c4;
  width: 100%;
  height: 50px;
  font-family: "Sukhumvit Set";
  font-size: 15px;
  font-weight: 300;
  border-radius: 8px;
  border: 1px solid #bc0007;
  outline: none;
  padding: 6px 45px 6px 42px;
}
.login-wrapper form input[type="text"]::placeholder,
.login-wrapper form input[type="password"]::placeholder {
  color: #bcbcbc;
}
.login-wrapper form input#login-phone {
  background: url("../image/icon/input-phone.svg") #790004 no-repeat 15px / 17px
    17px;
}
.login-wrapper form input#login-password,
.login-wrapper form input#login-password-in {
  background: url("../image/icon/input-password.svg") #790004 no-repeat 15px /
    17px 17px;
}
.login-wrapper form #eye-toggle {
  position: absolute;
  right: 15px;
  width: 20px;
  height: 20px;
  background: url("../image/icon/pwd-invisible-3.svg") #790004 no-repeat center /
    cover;
  cursor: pointer;
}
.login-wrapper form #eye-toggle.eye {
  width: 20px;
  height: 20px;
  background: url("../image/icon/pwd-eye-3.svg") #790004 no-repeat center /
    contain;
}
.login-wrapper form .btn-box {
  display: inline-flex;
  margin-bottom: 15px;
}
.login-wrapper form .btn-box.more-btn {
  justify-content: space-between;
  gap: 18px;
}
.login-wrapper form .btn-box.set-divider {
  position: relative;
}
.login-wrapper form .btn-box.set-divider > a {
  position: relative;
  z-index: 2;
}
.login-wrapper form .btn-box.set-divider::after {
  content: "";
  position: absolute;
  top: 12px;
  z-index: 1;
  width: 100%;
  height: 1px;
  background-color: #ff0009;
}
.login-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 100%;
  gap: 10px;
  min-height: 50px;
  font-family: "Sukhumvit Tadmai";
  font-size: 17px;
  font-weight: bold;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.login-wrapper form .btn-custom.btn-cus-green {
  background: linear-gradient(90deg, #0fc463 0%, #00deb9 100%);
  color: #ffffff;
}
.login-wrapper form .btn-custom.btn-cus-green-light {
  min-height: 60px;
  background: #00b900;
  color: #ffffff;
}
.login-wrapper form .btn-custom.btn-cus-blue {
  min-height: 60px;
  background: #007aff;
  color: #ffffff;
}
.login-wrapper form .btn-custom.btn-cus-gold {
  background: linear-gradient(90deg, #fea706 0%, #ffca28 100%);
  color: #131313;
}
.login-wrapper form .btn-custom-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  background-color: #7a0004;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 500px;
  border: 1px solid #ff0009;
  padding: 0 12px;
}
.login-wrapper form .btn-custom-2 img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

/* register */
.register-logo {
  text-align: center;
  margin: 5px 0 0;
}
.register-tabs {
  margin: 15px 0 15px;
}
.register-tabs .register-select-tab {
  display: flex;
  gap: 8px;
}
.register-tabs .register-select-tab .register-type {
  flex: 0 1 100%;
}
.register-tabs .register-select-tab .register-type a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: #131313;
  color: #ce0108;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  border: 1.5px solid #ce0108;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.register-tabs .register-select-tab .register-type a.active {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 103.6%);
  color: #ffffff;
  box-shadow: 0px 0px 10px 0px #ff000a;
}
.register-tabs .register-select-tab .register-type a.active span {
  text-shadow: 0px 1px 0px 0px #00000052;
}
.register-wrapper {
  position: relative;
  background: #790004;
  border-radius: 10px;
  padding: 30px 30px;
  margin: 20px 0;
  box-shadow: 0px 0px 10px 0px #ff000a;
}
.register-wrapper .close-register {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #ffffff;
  cursor: pointer;
}
.register-wrapper form {
  display: flex;
  flex-direction: column;
}
.register-wrapper .register-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  margin-bottom: 25px;
}
.register-wrapper .input-text {
  color: #ffffff;
  font-size: 15px;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 8px;
}
.register-wrapper form .input-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  margin-bottom: 8px;
}
.register-wrapper form input[type="text"],
.register-wrapper form input[type="password"],
.register-wrapper form select {
  color: #c4c4c4;
  width: 100%;
  height: 45px;
  font-family: "Sukhumvit Set";
  font-size: 15px;
  font-weight: 300;
  border-radius: 8px;
  border: 1px solid #bc0007;
  outline: none;
  padding: 6px 45px 6px 42px;
}
.register-wrapper form input[type="text"]::placeholder,
.register-wrapper form input[type="password"]::placeholder {
  color: #bcbcbc;
}
.register-wrapper form select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.register-wrapper form .is-select::after {
  content: "";
  position: absolute;
  right: 15px;
  width: 17px;
  height: 17px;
  background: url("../image/icon/input-select-arrow.svg") no-repeat center /
    cover;
}
.register-wrapper form input#register-phone {
  background: url("../image/icon/input-phone-2.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form input#register-password,
.register-wrapper form input#register-password-in {
  background: url("../image/icon/input-password-2.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form #eye-toggle {
  position: absolute;
  right: 15px;
  width: 17px;
  height: 17px;
  background: url("../image/icon/pwd-invisible-3.svg") #5f0003 no-repeat center /
    cover;
  cursor: pointer;
}
.register-wrapper form #eye-toggle.eye {
  width: 17px;
  height: 17px;
  background: url("../image/icon/pwd-eye-3.svg") #5f0003 no-repeat center /
    contain;
}
.register-wrapper form input#register-password-confirm {
  background: url("../image/icon/input-password-2.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form select#register-bank-select {
  background: url("../image/icon/input-bank.svg") #5f0003 no-repeat 15px / 17px
    17px;
}
.register-wrapper form input#register-bank-account {
  background: url("../image/icon/input-bank-account.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form input#register-line {
  background: url("../image/icon/input-line-id.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form select#register-reference {
  background: url("../image/icon/input-reference.svg") #5f0003 no-repeat 15px /
    17px 17px;
}
.register-wrapper form .input-note {
  color: #ffffff;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
  padding: 4px 0;
  margin-bottom: 8px;
}
.register-wrapper form .divider-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 8px;
}
.register-wrapper form .divider-box::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  background: rgb(25, 91, 214);
  background: -moz-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#195bd6",endColorstr="#2683ef",GradientType=1);
}
.register-wrapper form .divider-box .outter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  background: rgb(25, 91, 214);
  background: -moz-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#195bd6",endColorstr="#2683ef",GradientType=1);
  border-radius: 500px;
  padding: 2px 2px;
}
.register-wrapper form .divider-box .inner {
  background: #fff;
  color: #195bd6;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 500px;
  padding: 3px 20px;
}
.register-wrapper form .btn-box {
  display: inline-flex;
  margin-bottom: 8px;
}
.register-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.register-wrapper form .btn-custom.btn-cus-green {
  background: #06c755;
  color: #ffffff;
}
.register-wrapper form .btn-custom.btn-cus-blue {
  background: rgb(25, 91, 214);
  background: -moz-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(25, 91, 214, 1) 0%,
    rgba(38, 131, 239, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#195bd6",endColorstr="#2683ef",GradientType=1);
  color: #ffffff;
}

/* welcom */
.welcom-wrapper {
  display: flex;
  justify-content: center;
  background: #111111f2;
  color: #ffffff;
  font-size: 10px;
  font-weight: 400;
  line-height: 22px;
  border-radius: 4px;
  padding: 2px 2px;
  margin: 0 0 15px;
}
@media (min-width: 1200px) {
  .welcom-wrapper {
    margin: 0 0 0;
  }
}

/* banner */
.full-banner {
  margin: 0 0 15px;
}
.full-banner .br-4 {
  border-radius: 4px;
}
.full-banner .br-10 {
  border-radius: 10px;
}
.full-banner .br-resize {
  border-radius: 10px;
}
.step-banner {
  margin-bottom: 20px;
}
.step-banner .br-10 {
  border-radius: 10px;
}
@media (min-width: 1200px) {
  .full-banner {
    margin: 10px 0 10px;
  }
  .full-banner .br-resize {
    border-radius: 4px;
  }
}

/* logo set */
.logo-box {
  margin-bottom: 10px;
}
.logo-box .item {
  padding: 15px 0;
}
.logo-box .item img {
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  border-radius: 10px;
}
.logo-box .item:hover img {
  box-shadow: 0px 0px 12.9px 0px #ff000a, 0px 0px 11.2px 0px #ff0000,
    0px 0px 5.3px 0px #ffffff;
}

/* lotto set, lotto list */
@media (min-width: 1200px) {
  .outter-static {
    border: 1px solid transparent;
  }
  .static-box {
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .outter-scrolling {
    border-radius: 8px;
    border: 1px solid #373737;
  }
  /* hide */
  .scrolling-box {
    max-height: 600px;
    overflow-y: scroll;
    margin-top: 12px;
    margin-bottom: 12px;
    /* margin-right: -1.5px; */
  }
  .scrolling-box::-webkit-scrollbar {
    display: none;
  }
  /* .scrolling-box::-webkit-scrollbar {
    width: 3px;
  }
  .scrolling-box::-webkit-scrollbar-track {
    background: #ffffff00;
    border-radius: 10px;
  }
  .scrolling-box::-webkit-scrollbar-thumb {
    background: #1a5cd7;
    border-radius: 10px;
  }
  @supports not selector(::-webkit-scrollbar) {
    .scrolling-box {
        scrollbar-color: #1a5cd7 #ffffff00;
    }
  } */
}

/* index addons */
@media (min-width: 1200px) {
  .row-index {
    background: #232323;
    border-radius: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* lotto head */
.lotto-head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background: linear-gradient(81.8deg, #a0060c -14.29%, #db0008 103.6%);
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
  border-radius: 4px;
  padding: 1px 1px;
  margin-bottom: 10px;
}
.lotto-head-2 {
  background: #badafd;
  margin-bottom: 10px;
}
.lotto-head-2 .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  color: #195bd6;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  padding: 0 10px;
}
.lotto-head-2 .inner img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lotto-head-2 .inner img.expand {
  width: 28px;
  height: 28px;
}

/* lotto set */
.lotto-set {
  margin-bottom: 10px;
}
.lotto-set .lotto-set-title {
  border-radius: 6px 6px 0px 0px;
  padding: 1px 1px;
}
.lotto-set .lotto-set-title .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  border-radius: 5px 5px 0px 0px;
  padding: 0 10px;
}
.lotto-set .lotto-set-title .inner img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lotto-set .lotto-set-title .inner .title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}
.lotto-set .lotto-set-title .inner .inner-sub {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
}
.lotto-set .lotto-set-title .inner .inner-sub .title {
  line-height: 20px;
}
.lotto-set .lotto-set-title .inner .inner-sub .post-date {
  margin-top: -8px;
}
.lotto-set .lotto-set-title .inner .inner-sub .post-date > span {
  display: inline-block;
  position: relative;
  top: -1px;
  background: #ffffff;
  color: #1e1e1e;
  font-size: 8px;
  font-weight: bold;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 3px;
  padding: 0 6px;
}
.lotto-reward {
  background: linear-gradient(360deg, #1e1e1e 0%, #424242 100%);
  border-radius: 0px 0px 6px 6px;
  box-shadow: 0px 1px 2px -2px #00000069, 0px -1px 0px 0px #0f0f0f inset;
  padding: 10px 10px;
}
.lotto-reward .row-reward {
  margin-left: -5px;
  margin-right: -5px;
}
.lotto-reward .row-reward > * {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 4px;
}
.lotto-reward .reward-title {
  color: #ebedf0;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}
.lotto-reward .reward-number {
  height: 30px;
  background: #fff;
  color: #1e1e1e;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: bold;
  line-height: 28px;
  letter-spacing: 0.15em;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0px 1px 3.5px -1px #00000029;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.lotto-reward .reward-number:hover {
  background: #ffdc13;
}
.lotto-reward-pack-small > .row-reward {
  margin-left: -4px;
  margin-right: -4px;
}
.lotto-reward-pack-small > .row-reward > * {
  padding-left: 4px;
  padding-right: 4px;
}
.lotto-set.set-1,
.lotto-set.set-2,
.lotto-set.set-3,
.lotto-set.set-4 {
  background: #fff;
  border-radius: 7px;
}
.lotto-set.set-4 {
  margin-bottom: 8px;
}
.lotto-set.set-4 .lotto-set-title .inner {
  justify-content: center;
  gap: 5px;
  height: 30px;
}
.lotto-set.set-4 .lotto-set-title .inner img {
  width: 20px;
  height: 20px;
}
.lotto-set.set-4 .lotto-set-title .inner .title {
  color: #1e1e1e;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.lotto-set.set-1 .lotto-set-title {
  background: #2a51d1;
}
.lotto-set.set-1 .lotto-set-title .inner {
  justify-content: center;
}
.lotto-set.set-2 .lotto-set-title {
  background: #ec008c;
}
.lotto-set.set-3 .lotto-set-title {
  background: rgb(28, 151, 78);
  background: -moz-linear-gradient(
    90deg,
    rgba(28, 151, 78, 1) 0%,
    rgba(25, 142, 73, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(28, 151, 78, 1) 0%,
    rgba(25, 142, 73, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(28, 151, 78, 1) 0%,
    rgba(25, 142, 73, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c974e",endColorstr="#198e49",GradientType=1);
}
.lotto-set.set-3 .lotto-set-title .inner {
  background: #148341;
}
.lotto-set.set-4 .lotto-set-title {
  background: #ffdc13;
}
@media (min-width: 1200px) {
  .lotto-set .lotto-set-title .inner .inner-sub {
    flex-direction: row;
    justify-content: space-between;
  }
  .lotto-set .lotto-set-title .inner .inner-sub .title {
    line-height: 26px;
  }
  .lotto-set .lotto-set-title .inner .inner-sub .post-date {
    margin-top: 0;
  }
  .lotto-reward .reward-number {
    letter-spacing: 0.5em;
  }
}

/* lottery list */
.lottery-list {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #b0d6fd;
  box-shadow: 0px 4px 14.8px -1px #2571b833;
  margin-bottom: 60px;
}
.lottery-list ul {
  list-style: none;
  padding: 20px 0 30px;
  margin: 0;
}
.lottery-list ul li {
  display: flex;
  border-bottom: 1px solid #badaff;
  padding: 5px 10px;
}
.lottery-list ul li:first-child {
  border-bottom: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.lottery-list ul li .lottery-round {
  display: inline-flex;
  flex: 0 1 50%;
  gap: 7px;
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
}
.lottery-list ul li .lottery-round img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lottery-list ul li .lottery-3num,
.lottery-list ul li .lottery-2num {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 25%;
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
}

/* other */
.other-box {
  margin-left: -5px;
  margin-right: -5px;
}
.other-box > * {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
}
.box-item a {
  display: block;
  text-decoration: none;
}
.box-item a img {
  border-radius: 4px;
}

/* deposit */
.deposit-tabs {
  margin-bottom: 15px;
}
.deposit-tabs .deposit-select-tab {
  display: flex;
  gap: 10px;
}
.deposit-tabs .deposit-select-tab .deposit-account {
  flex: 0 1 100%;
}
.deposit-tabs .deposit-select-tab .deposit-account a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  border-radius: 10px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.deposit-tabs .deposit-select-tab .deposit-account a img.i-base {
  display: none;
}
.deposit-tabs .deposit-select-tab .deposit-account a.active img.i-base {
  display: block;
}
.deposit-tabs .deposit-select-tab .deposit-account a.active img.i-back {
  display: none;
}
.deposit-tabs .deposit-select-tab .deposit-account.mint-box a {
  background: #131313;
}
.deposit-tabs .deposit-select-tab .deposit-account.orange-box a {
  background: #131313;
}
.deposit-tabs .deposit-select-tab .deposit-account.mint-box a.active {
  background: linear-gradient(81.8deg, #00bab7 -1.68%, #00d4d1 103.6%);
  box-shadow: 0px 0px 8px 0px #00dbd7, 0px 0px 2px 0px #d7fffd;
}
.deposit-tabs .deposit-select-tab .deposit-account.orange-box a.active {
  background: linear-gradient(81.8deg, #e4e4e4 -1.68%, #ffffff 103.6%);
  box-shadow: 0px 0px 8px 0px #e8e8e8, 0px 0px 2px 0px #ffffff;
}
#depositTabContent {
  margin-bottom: 15px;
}
#depositTabContent .tab-pane {
  outline: none;
}
.deposit-wrapper .account-qr {
  background: #ffffff;
  border-radius: 15px;
  padding: 20px 20px;
  margin-bottom: 15px;
}
.deposit-wrapper .account-qr .qr-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.deposit-wrapper .account-qr .qr-1 img {
  width: 25px;
  height: 25px;
}
.deposit-wrapper .account-qr .qr-1 span {
  color: #4e317d;
  font-size: 16px;
  font-weight: 600;
  line-height: 12px;
}
.deposit-wrapper .account-qr .qr-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #232323;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 15px;
}
.deposit-wrapper .account-qr .qr-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #232323;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.deposit-wrapper .account-wallet {
  background: #ffffff;
  border-radius: 15px;
  padding: 25px 20px;
  margin-bottom: 15px;
}
.deposit-wrapper .account-wallet .wallet-title {
  color: #db0008;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-bottom: 1px dashed #797979;
  padding-bottom: 20px;
  margin-bottom: 25px;
}
.deposit-wrapper .account-wallet .wallet-title-2 {
  color: #797979;
  font-size: 16px;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.deposit-wrapper .account-wallet .wallet-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.deposit-wrapper .account-wallet .wallet-detail .w-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #797979;
  font-size: 16px;
  font-weight: 300;
  line-height: 100%;
}
.deposit-wrapper .account-wallet .wallet-detail .w-info {
  color: #232323;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.deposit-wrapper .account-copy {
  padding-top: 5px;
}
.deposit-wrapper .account-copy .copy-now {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 60px;
  position: relative;
  background: #06c755;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.deposit-wrapper .account-copy img {
  width: 19px;
  height: 22px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.deposit-wrapper .account-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 0;
}
.deposit-wrapper .account-note .note-head {
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.deposit-wrapper .account-note .note-content {
  color: #bcbcbc;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
}
.deposit-wrapper .account-note .note-fee {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #06c755;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
}
.deposit-wrapper .account-note .note-fee img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.qr-wrapper {
  position: relative;
  background: #ffffff;
  border-radius: 15px;
  padding: 30px 30px;
  box-shadow: 0px 4px 14.8px -1px rgba(37, 113, 184, 0.2);
}
.qr-wrapper .qr-title {
  color: #232323;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 15px;
}
.qr-wrapper .qr-text {
  color: #797979;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  margin-bottom: 25px;
}
.qr-wrapper .qr-amount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  margin-bottom: 15px;
}
.qr-wrapper .qr-amount input[type="number"] {
  background: #f5f5f5;
  color: #797979;
  width: 100%;
  height: 70px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #acb8c4;
  outline: none;
  padding: 6px 45px 6px 42px;
}
.qr-wrapper .qr-amount input[type="number"]::placeholder {
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.qr-wrapper .qr-select-amount {
  margin-bottom: 15px;
}
.qr-wrapper .qr-select-amount .row {
  margin-left: -2.5px;
  margin-right: -2.5px;
}
.qr-wrapper .qr-select-amount .row > * {
  padding-left: 2.5px;
  padding-right: 2.5px;
  margin-bottom: 5px;
}
.qr-wrapper .qr-select-amount .label-amonut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background: #f5f5f5;
  color: #2d2d2d;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  border: 1px solid #acb8c4;
  box-shadow: 0px 1px 3.5px -1px rgba(0, 0, 0, 0.16);
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  padding: 10px 10px;
}
.qr-wrapper .qr-select-amount .label-amonut:hover {
  background: #db0008;
  color: #ffffff;
  border: 1px solid #db0008;
}
.qr-wrapper .btn-box {
  display: flex;
}
.qr-wrapper .btn-custom {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 100%;
  gap: 10px;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  cursor: pointer;
}
.qr-wrapper .btn-custom.btn-cus-green {
  background: #06c755;
  color: #fff;
}
#qrModal .modal-content {
  border-radius: 10px;
  overflow: hidden;
}
.get-qr .close-get-qr {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  cursor: pointer;
}
.get-qr .get-qr-box .head-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #123f68;
  margin-bottom: 15px;
}
.get-qr .get-qr-box .head-qr img {
  margin-left: -15px;
}
.get-qr .get-qr-box .head-qr .head-in-qr {
  margin-left: -15px;
}
.get-qr .get-qr-box .head-qr .head-in-qr .head-q1 {
  color: #fbfbfb;
  font-size: 22px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 9px;
}
.get-qr .get-qr-box .head-qr .head-in-qr .head-q2 {
  color: #fbfbfb;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
}
.get-qr .get-qr-box .body-qr-text {
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.get-qr .get-qr-box .body-qr-code {
  text-align: center;
}
.get-qr .get-qr-box .body-qr-code img {
  margin: -15px 0 -5px;
}
.get-qr .get-qr-box .note-qr-1 {
  background: #000000;
  color: #fbfbfb;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  padding: 15px 0;
}
.get-qr .get-qr-box .note-qr-2 {
  color: #db0008;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  padding: 15px 0;
}
.get-qr .get-qr-box .btn-box {
  display: flex;
}
.get-qr .get-qr-box .btn-custom {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 100%;
  gap: 10px;
  height: 60px;
  font-size: 20px;
  font-weight: 800;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 10px 10px;
  margin: 0 20px 20px;
  cursor: pointer;
}
.get-qr .get-qr-box .btn-custom.btn-cus-green {
  background: #06c755;
  color: #fff;
}

/* withdraw */
.withdraw-wrapper .withdraw-transfer {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0px 4px 14.8px rgba(37, 113, 184, 0.2);
  padding: 20px 20px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.withdraw-wrapper .withdraw-transfer form {
  display: inline-flex;
  flex-direction: column;
}
.withdraw-wrapper .transfer-bank {
  background: url("../image/background/bg-scb.png") #462279 no-repeat right;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 30px;
  border-radius: 10px;
  padding: 15px 30px;
  margin-bottom: 30px;
}
.withdraw-wrapper form .input-text {
  color: #232323;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 15px;
}
.withdraw-wrapper form .input-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  margin-bottom: 10px;
}
.withdraw-wrapper form input[type="number"] {
  background: #f5f5f5;
  color: #797979;
  width: 100%;
  height: 70px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #acb8c4;
  outline: none;
  padding: 6px 45px 6px 42px;
}
.withdraw-wrapper form .btn-box {
  display: inline-flex;
}
.withdraw-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 14px 10px;
  cursor: pointer;
}
.withdraw-wrapper form .btn-custom.btn-cus-green {
  background: #34c759;
  color: #ffffff;
}

/* card draw, spin draw */
.lucky-wrapper .lucky-note {
  margin: 20px 0;
}
.lucky-wrapper .lucky-note .note-head {
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.lucky-wrapper .lucky-note .note-content ul {
  list-style: none;
  padding: 15px 0;
  margin: 0;
}
.lucky-wrapper .lucky-note .note-content ul li {
  background: url("../image/icon/green-dot.svg") no-repeat 0 3px/ 13px 13px;
  color: #bcbcbc;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  padding-left: 20px;
}
.lucky-wrapper .lucky-note .note-content ul li span {
  font-family: "Sukhumvit Tadmai";
}
.lucky-wrapper .lucky-note .note-go a {
  color: #06c554;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
}

/* card draw */
.Lucky-card {
  border-radius: 10px;
  overflow: hidden;
}
.Lucky-card .title {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
}
.Lucky-card .title .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 45px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  padding: 0 10px;
}
.Lucky-card .pickup-card {
  background: #ffffff;
}
.Lucky-card .pickup-card .card-text {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  padding: 7px 44px;
}

/* cashback */
.cashback-wrapper .cashback-transfer {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 15px;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
  padding: 20px 20px;
  margin-bottom: 10px;
}
.cashback-wrapper .cashback-transfer .transfer-head {
  color: #db0008;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  padding: 0 10px;
  margin-top: 5px;
  margin-bottom: 25px;
}
.cashback-wrapper .cashback-transfer form {
  display: inline-flex;
  flex-direction: column;
}
.cashback-wrapper form .btn-box {
  display: inline-flex;
  margin-bottom: 15px;
}
.cashback-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset;
  filter: drop-shadow(0px 1px 2.8px rgba(106, 106, 106, 0.4));
  padding: 12px 10px;
  cursor: pointer;
}
.cashback-wrapper form .btn-custom.btn-cus-green {
  color: #ffffff;
  background: #06c755;
}
.cashback-wrapper .cashback-transfer .transfer-note {
  color: #797979;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}
.cashback-wrapper .cashback-transfer .transfer-note span {
  color: #dc3030;
}
.cashback-wrapper .cashback-note {
  margin: 20px 0;
}
.cashback-wrapper .cashback-note .note-head {
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 15px;
}
.cashback-wrapper .cashback-note .note-head span {
  color: #da2323;
}
.cashback-wrapper .cashback-note .note-content {
  color: #bcbcbc;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
}
.cashback-wrapper .cashback-note .note-content ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

/* reference */
.reference-wrapper .reference-transfer {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0px 4px 14.8px rgba(37, 113, 184, 0.2);
  padding: 20px 20px;
  margin-bottom: 15px;
}
.reference-wrapper .reference-transfer .transfer-intro {
  color: #1e1e1e;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  margin-bottom: 15px;
}
.reference-wrapper .reference-transfer form {
  display: inline-flex;
  flex-direction: column;
}
.reference-wrapper .reference-transfer form .transfer-duo {
  display: inline-flex;
  gap: 10px;
}
.reference-wrapper .reference-transfer form .transfer-duo .transfer-friend {
  flex: 0 1 100%;
  background: #f5f5f5;
  border-radius: 10px;
  border: 1px solid #acb8c4;
  padding: 18px 15px 25px;
  margin-bottom: 10px;
}
.reference-wrapper
  .reference-transfer
  form
  .transfer-duo
  .transfer-friend
  .transfer-friend-text {
  color: #3c3c3c;
  font-size: 18px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  margin-bottom: 30px;
}
.reference-wrapper
  .reference-transfer
  form
  .transfer-duo
  .transfer-friend
  .transfer-friend-count {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 55px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.reference-wrapper
  .reference-transfer
  form
  .transfer-duo
  .transfer-friend
  .transfer-friend-count
  span {
  font-size: 40px;
}
.reference-wrapper form .btn-box {
  display: inline-flex;
  margin-bottom: 20px;
}
.reference-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset;
  filter: drop-shadow(0px 1px 2.8px rgba(106, 106, 106, 0.4));
  padding: 12px 10px;
  cursor: pointer;
}
.reference-wrapper form .btn-custom.btn-cus-dark {
  color: #ffffff;
  background: #131313;
}
.reference-wrapper .transfer-note {
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 300;
  line-height: 14px;
  text-align: center;
}
.reference-wrapper .transfer-note span {
  color: #06c755;
}
.reference-wrapper .transfer-divider {
  border-bottom: 1px dashed #c4d0dc;
  margin: 20px -20px;
}
.reference-wrapper .transfer-promo-head {
  color: #232323;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 20px;
}
.reference-wrapper .transfer-promo-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background: #f5f5f5;
  color: #000;
  font-size: 20px;
  font-weight: 300;
  line-height: 14px;
  border-radius: 10px;
  border: 1px solid #acb8c4;
  padding: 0 10px;
  margin: 0 0 15px;
}
.reference-wrapper .transfer-promo-link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-wrapper .transfer-copy {
  margin: 0 0 15px;
}
.reference-wrapper .transfer-copy .copy-now {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  background: #06c755;
  color: #fff;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset;
  filter: drop-shadow(0px 1px 2.8px rgba(106, 106, 106, 0.4));
  padding: 12px 10px;
  cursor: pointer;
}
.reference-wrapper .transfer-copy img {
  width: 19px;
  height: 22px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.reference-wrapper .transfer-share-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.transfer-share-box .transfer-share-head {
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 300;
  line-height: 18px;
}
.transfer-share-box .transfer-share-head span {
  font-weight: 700;
}
.transfer-share-box .transfer-share-btn {
  display: inline-flex;
  gap: 5px;
}
.transfer-share-box .transfer-share-btn a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  border-radius: 500px;
  padding: 5px;
}
.transfer-share-box .transfer-share-btn a.share-line {
  background: #06c353;
}
.transfer-share-box .transfer-share-btn a.share-facebook {
  background: #225df9;
}
.transfer-share-box .transfer-share-btn a.share-message {
  background: #32ade6;
}
.reference-wrapper .reference-note {
  margin: 20px 5px;
}
.reference-wrapper .reference-note .note-head {
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 30px;
}
.reference-wrapper .reference-note .note-head-2 {
  color: #c4c4c4;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  margin: 15px 0;
}
.reference-wrapper .reference-note .note-content {
  color: #bcbcbc;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  margin-bottom: 7px;
}
.reference-wrapper .reference-note .note-content span.green {
  color: #06c554;
}
.reference-wrapper .reference-note .note-content span.heavy {
  font-size: 17px;
  font-weight: 700;
}
.reference-wrapper .reference-note .note-content-2 ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}
.reference-wrapper .reference-note .note-content-2 ul li {
  background: url("../image/icon/gray-dot.svg") no-repeat 0 7px/ 6px 6px;
  color: #bcbcbc;
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
  padding-left: 15px;
}
.reference-wrapper .reference-note .note-content-2 ul li:not(:last-child) {
  margin-bottom: 10px;
}
.reference-wrapper .reference-note .note-content-2 ul li span {
  font-weight: 700;
}
.reference-wrapper .reference-note .note-bar {
  background: #232323;
  color: #bcbcbc;
  font-size: 18px;
  font-weight: 300;
  line-height: 20px;
  border-radius: 10px;
  padding: 10px 25px;
  margin-bottom: 7px;
}
.reference-wrapper .reference-note .note-bar span {
  font-weight: 600;
}
.reference-wrapper .reference-note .note-bar-2 {
  background: #232323;
  color: #bcbcbc;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  border-radius: 10px;
  padding: 25px 15px;
  margin-bottom: 7px;
}
.reference-wrapper .reference-note .note-bar-2 span {
  font-weight: 700;
}

/* casino */
.casino-tabs {
  margin: 15px 0;
}
.casino-tabs .casino-select-tab {
  display: flex;
  gap: 8px;
}
.casino-tabs .casino-select-tab .casino-type {
  flex: 0 1 100%;
}
.casino-tabs .casino-select-tab .casino-type a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 70px;
  background: #131313;
  color: #ce0108;
  font-size: 15px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  border: 1.5px solid #ce0108;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.casino-tabs .casino-select-tab .casino-type a.active {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 103.6%);
  color: #ffffff;
  box-shadow: 0px 0px 10px 0px #ff000a, 0px 0px 8px 0px #ff0000,
    0px 0px 2px 0px #ffd7d7;
}
.casino-tabs .casino-select-tab .casino-type a.active span {
  text-shadow: 0px 1px 0px 0px #00000052;
}
.casino-tabs .casino-select-tab .casino-type a .casino-icon {
  width: 20px;
  height: 20px;
}
.casino-tabs .casino-select-tab .casino-type a .icon-sport {
  background: url("../image/icon/icon-sport-big.svg") no-repeat center / contain;
}
.casino-tabs .casino-select-tab .casino-type a .icon-casino {
  background: url("../image/icon/icon-casino-big.svg") no-repeat center /
    contain;
}
.casino-tabs .casino-select-tab .casino-type a .icon-slots {
  background: url("../image/icon/icon-slot-big.svg") no-repeat center / contain;
}
.casino-tabs .casino-select-tab .casino-type a .icon-lotto {
  background: url("../image/icon/icon-lotto-big.svg") no-repeat center / contain;
}
#casinoTabContent .tab-pane {
  background: #ffffff;
  border-radius: 15px;
  outline: none;
  padding: 20px 20px 10px;
}
.casino-wrapper .row-casino {
  margin-left: -5px;
  margin-right: -5px;
}
.casino-wrapper .row-casino > * {
  padding-left: 5px;
  padding-right: 5px;
}
.casino-wrapper .casino-card {
  padding-top: 60%;
  background: #c70209;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* history */
.history-wrapper .history-head-3 {
  display: flex;
  align-items: center;
  color: #c4c4c4;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.history-wrapper .history-list {
  background: #ffffff;
  border-radius: 15px;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
  padding: 20px 15px;
  margin-bottom: 30px;
}
.history-wrapper .history-list .history-list-head {
  color: #db0008;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-bottom: 1px dashed #797979;
  padding-bottom: 20px;
}
.history-wrapper .history-list .log {
  list-style: none;
  padding: 20px 0 10px;
  margin: 0;
}
.history-wrapper .history-list .log li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.history-wrapper .history-list .log li.log-deposit {
  background: #f2fff8;
  border: 1px solid #31a25e;
}
.history-wrapper .history-list .log li.log-withdraw {
  background: #fff6f6;
  border: 1px solid #ff4646;
}
.history-wrapper .history-list .log li > * {
  flex: 0 1 auto;
}
.history-wrapper .history-list .log li {
  margin-bottom: 5px;
}
.history-wrapper .history-list .log li:first-child {
  height: 26px;
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.history-wrapper .history-list .log li:last-child {
  margin-bottom: 0;
}
.history-wrapper .history-list .log li:not(:first-child) {
  border-radius: 10px;
  box-shadow: 0px 4px 14.8px -1px #b6b6b64d;
  padding-top: 15px;
  padding-bottom: 15px;
}
.history-wrapper .history-list .log li .log-desc {
  display: inline-flex;
  flex-direction: column;
  text-align: start;
}
.history-wrapper .history-list .log li .log-desc .type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 7px;
}
.history-wrapper .history-list .log li .log-desc .time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 300;
  line-height: 14px;
}
.history-wrapper .history-list .log li .log-desc .time span {
  display: inline-flex;
  background: #06c755;
  border-radius: 10px;
  border: 1px solid #06c755;
  padding: 1px 8px;
}
.history-wrapper .history-list .log li .log-desc .time.log-failed span {
  display: inline-flex;
  gap: 8px;
  background: #da2323;
  border-radius: 10px;
  border: 1px solid #da2323;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0;
  padding-right: 8px;
}
.history-wrapper .history-list .log li .log-amount {
  text-align: end;
}
.history-wrapper .history-list .log li .log-amount .amount {
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
}
.history-wrapper .history-list .log li .log-amount .amount.log-success {
  color: #06c755;
}
.history-wrapper .history-list .log li .log-amount .amount.log-failed {
  color: #da2323;
}
.history-wrapper .status-active {
  width: 14px;
  height: 14px;
}
.history-wrapper .status-success {
  background: url("../image/icon/log-success.svg") no-repeat center / contain;
}
.history-wrapper .status-failed {
  background: url("../image/icon/log-failed.svg") no-repeat center / contain;
}
.history-wrapper .status-confirm {
  background: url("../image/icon/log-confirm.svg") no-repeat center / contain;
}
.history-wrapper .status-wait {
  background: url("../image/icon/log-wait.svg") no-repeat center / contain;
}
.history-wrapper .status-alert {
  background: url("../image/icon/log-alert-white.svg") no-repeat center /
    contain;
}
.history-wrapper .history-status .status-type {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  color: #bcbcbc;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* coin */
.coin-wrapper .coin-member {
  display: flex;
  gap: 15px;
  height: 45px;
  margin-bottom: 15px;
}
.coin-wrapper .coin-member .member-info {
  display: inline-flex;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
  gap: 10px;
}
.coin-wrapper .coin-member .member-info .member-crown img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.coin-wrapper .coin-member .member-info .member-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  color: #ffffff;
}
.coin-wrapper .coin-member .member-info .member-name .u-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
}
.coin-wrapper .coin-member .member-info .member-name .id-name {
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
}
.coin-wrapper .coin-member .member-info .member-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coin-wrapper .coin-member .member-coin {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
  gap: 10px;
  background: #232323;
  color: #ffffff;
  border-radius: 10px;
  padding: 0 20px;
}
.coin-wrapper .coin-member .member-coin .coin-coins {
  display: inline-flex;
}
.coin-wrapper .coin-member .member-coin .coin-coins img {
  width: 27px;
  height: 27px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.coin-wrapper .coin-member .member-coin .coin-name {
  display: inline-flex;
  flex-direction: column;
}
.coin-wrapper .coin-member .member-coin .coin-name .c-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
}
.coin-wrapper .coin-member .member-coin .coin-name .c-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}
.coin-wrapper .coin-member .member-coin .coin-name .c-amount span {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: 800;
  line-height: 14px;
}
.coin-wrapper .coin-redeem .row {
  margin-left: -5px;
  margin-right: -5px;
}
.coin-wrapper .coin-redeem .row > * {
  padding-left: 5px;
  padding-right: 5px;
}
.coin-wrapper .coin-redeem .redeem-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-img {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180.45deg,
    #dbdbdb -13.59%,
    #ffffff 58.54%,
    #cfcfcf 156.26%
  );
  min-height: 170px;
  padding: 5px;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info {
  text-align: center;
  padding: 15px 5px 5px;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info .rd-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 15px;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info .rd-reward {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 30px;
  font-weight: 800;
  line-height: 14px;
  margin-bottom: 30px;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info .rd-pay-coin {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 5px;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info .rd-pay-coin .coin-coins {
  display: inline-flex;
}
.coin-wrapper
  .coin-redeem
  .redeem-card
  .redeem-info
  .rd-pay-coin
  .coin-coins
  img {
  width: 21px;
  height: 21px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.coin-wrapper .coin-redeem .redeem-card .redeem-info .rd-pay-coin .coin-name {
  display: inline-flex;
  flex-direction: column;
}
.coin-wrapper
  .coin-redeem
  .redeem-card
  .redeem-info
  .rd-pay-coin
  .coin-name
  .c-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
}
.coin-wrapper
  .coin-redeem
  .redeem-card
  .redeem-info
  .rd-pay-coin
  .coin-name
  .c-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}
.coin-wrapper
  .coin-redeem
  .redeem-card
  .redeem-info
  .rd-pay-coin
  .coin-name
  .c-amount
  span {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: 800;
  line-height: 14px;
}

/* profile */
.profile-wrapper .profile-information {
  position: relative;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0px 4px 14.8px -1px rgba(37, 113, 184, 0.2);
  padding: 30px 20px 22px;
  margin: 15px 0 20px;
}
.profile-wrapper .profile-information .profile-title {
  color: #3c3c3c;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 25px;
}
.profile-wrapper .profile-information .profile-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #acb8c4;
  padding: 7px 14px 7px 41px;
  margin-bottom: 8px;
}
.profile-wrapper .profile-information .profile-data.profile-user {
  background: url("../image/icon/icon-person.svg") no-repeat 14px / 17px 17px;
}
.profile-wrapper .profile-information .profile-data.profile-telephone {
  background: url("../image/icon/input-phone-3.svg") no-repeat 14px / 17px 17px;
}
.profile-wrapper .profile-information .profile-data.profile-bank {
  background: url("../image/icon/input-bank-2.svg") no-repeat 14px / 17px 17px;
}
.profile-wrapper .profile-information .profile-data.profile-bank-account {
  background: url("../image/icon/input-bank-account-2.svg") no-repeat 14px /
    17px 17px;
}
.profile-wrapper .profile-information .profile-data .data-left {
  color: #aaaaaa;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}
.profile-wrapper .profile-information .profile-data .data-right {
  color: #2d2d2d;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}
.change-password-wrapper {
  position: relative;
  background: #f2fff8;
  border-radius: 15px;
  border: 1px solid #31a25e;
  padding: 30px 20px 22px;
  margin: 20px 0;
  box-shadow: 0px 4px 14.8px -1px rgba(37, 113, 184, 0.2);
}
.change-password-wrapper form {
  display: flex;
  flex-direction: column;
}
.change-password-wrapper .change-password-title {
  color: #3c3c3c;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  margin-bottom: 30px;
}
.change-password-wrapper .input-text {
  color: #797979;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 8px;
}
.change-password-wrapper form .input-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  margin-bottom: 8px;
}
.change-password-wrapper form input[type="text"],
.change-password-wrapper form input[type="password"] {
  color: #797979;
  width: 100%;
  height: 45px;
  font-family: "Sukhumvit Set";
  font-size: 15px;
  font-weight: 300;
  border-radius: 6px;
  border: 1px solid #acb8c4;
  outline: none;
  padding: 6px 45px 6px 42px;
}
.change-password-wrapper form .input-note {
  color: #797979;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
  border-bottom: 1px dashed #c4d0dc;
  padding: 10px 26px;
  margin-bottom: 8px;
}
.change-password-wrapper form input#old-password,
.change-password-wrapper form input#new-password,
.change-password-wrapper form input#new-password-confirm {
  background: url("../image/icon/input-password-confirm.svg") #ffffff no-repeat
    15px / 17px 17px;
}
.change-password-wrapper form .btn-box {
  display: inline-flex;
  margin-top: 8px;
  margin-bottom: 8px;
}
.change-password-wrapper form .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  height: 60px;
  font-family: "Sukhumvit Tadmai";
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  padding: 10px 10px;
  cursor: pointer;
}
.change-password-wrapper form .btn-custom.btn-cus-green {
  color: #ffffff;
  background: #06c755;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
}

/* lobby */
.lobby-wrapper .row-lobby {
  margin-left: -10px;
  margin-right: -10px;
}
.lobby-wrapper .row-lobby > * {
  padding-left: 10px;
  padding-right: 10px;
}
.lobby-wrapper .lobby-inner {
  background: #232323;
  border-radius: 10px;
  padding: 15px 15px;
  margin-bottom: 15px;
}
.lobby-wrapper .member {
  display: flex;
  gap: 15px;
  height: 45px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.lobby-wrapper .member .member-info {
  display: inline-flex;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
  gap: 10px;
}
.lobby-wrapper .member .member-info .member-crown img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lobby-wrapper .member .member-info .member-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  color: #ffffff;
}
.lobby-wrapper .member .member-info .member-name .u-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
}
.lobby-wrapper .member .member-info .member-name .id-name {
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
}
.lobby-wrapper .member .member-info .member-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-wrapper .member .member-bar {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 calc(50% - 7.5px);
}
.lobby-wrapper .member .member-bar .bar-user {
  display: inline-flex;
  align-items: center;
  width: 104px;
  height: 28px;
  background: linear-gradient(263.32deg, #f50e11 5.02%, #8f080a 127.87%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  border-radius: 500px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 0 2px;
}
.lobby-wrapper .member .member-bar .bar-user img {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  margin-right: 10px;
}
.lobby-wrapper .bet-time-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  background: #232323;
  border-radius: 10px;
  padding: 0 15px;
  margin-bottom: 15px;
}
.lobby-wrapper .bet-time-box .timer {
  color: #db0008;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.8px;
}
.lobby-wrapper .bet-time-box .timer span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #db0008;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
}
.lobby-wrapper .bet-time-box .title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}
.lobby-wrapper .bet-time-box .bet-now-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  background: #00fe7a;
  color: #232323;
  font-size: 18px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
  padding: 5px 20px;
}
.lobby-wrapper .lobby-btn-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 14.8px -1px #b6b6b64d;
  padding: 15px 15px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.lobby-wrapper .lobby-btn-box .lotto-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
  gap: 10px;
  height: 70px;
  background: #db0008;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0px 1px 2.8px -1px #6a6a6a66, 0px -2px 0px 0px #0000001f inset;
  padding: 0 10px;
}
.lobby-wrapper .lobby-btn-box .dash-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 60px;
  background: linear-gradient(38.55deg, #a0060c -13.64%, #db0008 73.47%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0px 1px 2.8px -1px #6a6a6a66, 0px -2px 0px 0px #0000001f inset;
  padding: 0 10px;
}
.lobby-wrapper .lobby-btn-box .dash-btn.half {
  flex: 1 0 calc(33.33% - 10px);
}
.lobby-wrapper .lobby-nav-box {
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.lobby-wrapper .lobby-nav-box.row {
  margin-left: -2px;
  margin-right: -2px;
}
.lobby-wrapper .lobby-nav-box.row > * {
  padding-left: 2px;
  padding-right: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.lobby-wrapper .lobby-nav-box .nav-box {
  display: flex;
  justify-content: center;
  height: 80px;
  text-align: center;
}
.lobby-wrapper .lobby-nav-box .nav-box a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(42.83deg, #a0060c 17.18%, #db0008 68.69%);
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid #0000004d;
  box-shadow: -2px -2px 7.5px 0px #aa0007 inset, 2px 2px 4px 0px #ff313180 inset,
    1px 1px 4px 0px #ffffff6b inset, 0px 4px 4px 0px #00000040;
  padding: 2px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.lobby-wrapper .lobby-nav-box .nav-box img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lobby-wrapper .lobby-nav-box .nav-box img.i-back {
  display: none;
}
.lobby-wrapper .lobby-nav-box .nav-box .title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 14px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.lobby-wrapper .lobby-nav-box .nav-box:hover a {
  background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
  border: 1px solid #ffffff;
  box-shadow: 0px 0px 6.5px 2px #ff000099, 0px 0px 2.1px 0px #ff0000,
    2px 2px 4px 0px #ffffff inset, -2px -2px 7px 0px #00000040 inset;
}
.lobby-wrapper .lobby-nav-box .nav-box:hover a img.i-base {
  display: none;
}
.lobby-wrapper .lobby-nav-box .nav-box:hover a img.i-back {
  display: block;
}
.lobby-wrapper .lobby-nav-box .nav-box:hover .title {
  color: #db0008;
}
.lobby-wrapper .dash-head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  gap: 10px;
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 0 10px;
  margin: 0 0 10px;
}
.lobby-wrapper .dash-head img {
  width: 30px;
  height: 30px;
}
.lobby-wrapper .lobby-lotto-comingsoon-draft {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 14px;
  padding: 20px 0;
}
.lobby-wrapper .lobby-lotto-comingsoon ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.lobby-wrapper .lobby-lotto-comingsoon ul li {
  display: flex;
  align-items: center;
  flex: 0 0 100%;
  min-height: 55px;
  background: #ffffff;
  filter: drop-shadow(0px 4px 14.8px rgba(37, 113, 184, 0.2));
  border-radius: 10px;
}
.lobby-wrapper .lobby-lotto-comingsoon ul li .comingsoon-left {
  display: inline-flex;
  align-items: center;
  flex: 1 0 calc(100% - 165px);
  gap: 7px;
  height: 100%;
  padding: 9px 9px;
}
.lobby-wrapper .lobby-lotto-comingsoon ul li .comingsoon-left img {
  width: 37px;
  height: 37px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}
.lobby-wrapper .lobby-lotto-comingsoon ul li .comingsoon-left .text-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-left
  .text-box
  .text-1 {
  background: linear-gradient(81.8deg, #a0060c -14.29%, #db0008 103.6%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-left
  .text-box
  .text-2 {
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-left
  .text-box
  .text-2
  span {
  display: inline-block;
  min-width: 90px;
  height: 15px;
  background: linear-gradient(81.8deg, #a0060c -14.29%, #db0008 103.6%);
  border-radius: 4px;
}
.lobby-wrapper .lobby-lotto-comingsoon ul li .comingsoon-right {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 165px;
  height: 100%;
  background: #131313;
  border-radius: 9px;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset,
    0px 1px 2.8px -1px rgba(106, 106, 106, 0.4);
}
.lobby-wrapper .lobby-lotto-comingsoon ul li .comingsoon-right .time-box {
  display: inline-flex;
  flex-direction: column;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-right
  .time-box
  .time-1 {
  color: #1e1e1e;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-right
  .time-box
  .time-1
  span {
  display: inline-block;
  min-width: 120px;
  height: 16px;
  background: #ffffff;
  border-radius: 4px;
}
.lobby-wrapper
  .lobby-lotto-comingsoon
  ul
  li
  .comingsoon-right
  .time-box
  .time-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 16px;
  font-weight: 750;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
@media (min-width: 1200px) {
  .lobby-wrapper .member {
    margin-left: 30px;
  }
  .lobby-wrapper .bet-time-box {
    margin-top: 15px;
    margin-right: 30px;
  }
  .lobby-wrapper .bet-time-box .timer {
    font-size: 15px;
  }
  .lobby-wrapper .bet-time-box .timer span {
    width: 26px;
    height: 26px;
  }
  .lobby-wrapper .bet-time-box .title {
    font-size: 15px;
  }
  .lobby-wrapper .bet-time-box .bet-now-btn {
    height: 26px;
    font-size: 15px;
  }
  .lobby-wrapper .utility-box {
    margin-left: 30px;
  }
  .lobby-wrapper .lobby-btn-box {
    gap: 7px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 30px;
  }
  .lobby-wrapper .lobby-btn-box .lotto-btn {
    gap: 7px;
    background: linear-gradient(38.55deg, #a0060c -13.64%, #db0008 73.47%);
    padding: 0 6px;
  }
  .lobby-wrapper .lobby-btn-box .dash-btn {
    gap: 7px;
    padding: 0 6px;
  }
  .lobby-wrapper .lobby-btn-box .lotto-btn.to-half {
    flex: 1 0 calc(50% - 10px);
    height: 60px;
    font-size: 18px;
  }
  .lobby-wrapper .lobby-btn-box .dash-btn.half {
    flex: 1 0 calc(50% - 10px);
    font-size: 18px;
  }
  .row-dash {
    margin-left: -5px;
    margin-right: -5px;
  }
  .row-dash > * {
    padding-left: 5px;
    padding-right: 5px;
  }
  .lobby-wrapper .lobby-nav-box.row {
    margin-left: 28px;
  }
  .lobby-wrapper .lobby-inner {
    margin-right: 30px;
  }
  /* hide */
  /* .lobby-wrapper .lobby-lotto-comingsoon ul li {
    flex: 0 0 calc(50% - 2.5px);
  } */
}

/* promotions */
.promotions-wrapper .promotions-box {
  margin-bottom: 20px;
}
.promotions-wrapper .promotions-box .promotions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promotions-wrapper .promotions-box .promotions-list .promotions-item {
  background: #ffffff;
  border-radius: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.promotions-wrapper .promotions-box .promotions-list .promotions-item .title {
  color: #db0008;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}
.promotions-wrapper .promotions-box .promotions-list .promotions-item .content {
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-top: 10px;
}
.promotions-wrapper .btn-box {
  display: inline-flex;
  margin-top: 10px;
}
.promotions-wrapper .btn-custom {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 100%;
  gap: 10px;
  min-width: 100px;
  font-family: "Sukhumvit Tadmai";
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.12) inset;
  filter: drop-shadow(0px 1px 2.8px rgba(106, 106, 106, 0.4));
  padding: 6px 10px;
  cursor: pointer;
}
.promotions-wrapper .btn-custom.btn-cus-green {
  color: #ffffff;
  background: #06c755;
}

/* payrate */
.payrate-wrapper .payrate-box .row {
  margin-left: -8px;
  margin-right: -8px;
}
.payrate-wrapper .payrate-box .row > div {
  padding-left: 8px;
  padding-right: 8px;
}
.payrate-card {
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
  border-radius: 4px;
  overflow: hidden;
}
.payrate-card .payrate-title {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
}
.payrate-card .payrate-title .title {
  color: #ffffff;
  font-family: "Sukhumvit Tadmai";
  font-size: 18px;
  font-weight: bold;
  line-height: normal;
}
.payrate-card .payrate-table table {
  table-layout: fixed;
  font-size: 16px;
}
.payrate-card .payrate-table table thead th {
  background: #ff7c81;
}
.payrate-card .payrate-table table tbody {
  font-size: 16px;
  font-weight: bold;
  vertical-align: baseline;
}
.payrate-card .payrate-table table tbody td {
  color: #000000;
}
.payrate-card .payrate-table .t-small {
  font-size: 12px;
  font-weight: normal;
}
/*** body end ***/

/*** footer start ***/
footer .foot-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
footer .foot-wrapper .foot-inner {
  display: flex;
  justify-content: center;
}
footer .foot-copyrights {
  padding-bottom: 114px;
  background: #b2050b;
}
footer .foot-copyrights .copyrights {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
@media (min-width: 1200px) {
  footer .foot-copyrights {
    padding-bottom: 0;
  }
}

/* foot menu */
.foot-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(81.8deg, #a0060c -1.68%, #db0008 100.06%);
  width: 100%;
  max-width: 440px;
  height: 90px;
  padding: 0;
  margin: 0;
}
.foot-nav li {
  list-style: none;
  padding: 0 7px;
}
.foot-nav li.active {
  padding: 0 0;
}
.foot-nav li a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  text-align: center;
}
.foot-nav li.active a {
  width: 103px;
  height: 103px;
  position: relative;
  top: -2px;
  color: #ffffff;
  font-size: 15px;
}
.foot-nav li.active a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #cd0108;
  border-radius: 50%;
}
.foot-nav li.active a::after {
  content: "";
  position: absolute;
  top: 8.5px;
  bottom: 8.5px;
  left: 8.5px;
  right: 8.5px;
  z-index: 2;
  background: #790004;
  border-radius: 50%;
}
.foot-nav li.active a,
.foot-nav li a:hover {
  color: #ffffff;
}
.foot-nav li a .foot-icon {
  width: 33px;
  height: 33px;
}
.foot-nav li.active a .foot-icon {
  position: relative;
  z-index: 3;
}
.foot-nav li a .icon-lotto {
  background: url("../image/icon/icon-lotto-color.svg") no-repeat center /
    contain;
}
.foot-nav li a .icon-money {
  background: url("../image/icon/icon-deposit-color.svg") no-repeat center /
    contain;
}
.foot-nav li a .icon-home {
  background: url("../image/icon/icon-home-color.svg") no-repeat center /
    contain;
}
.foot-nav li a .icon-prize {
  background: url("../image/icon/icon-reward-color.svg") no-repeat center /
    contain;
}
.foot-nav li a .icon-telephone {
  background: url("../image/icon/icon-contact-color.svg") no-repeat center /
    contain;
}
.foot-nav li.active a span {
  position: relative;
  z-index: 3;
}
/*** footer end ***/