/* battambang-100 - khmer */
@font-face {
  font-family: "Kh-Battambang";
  font-style: normal;
  font-weight: 100;
  src: url("../../fonts/battambang2/battambang_khmer-100.eot"); /* IE9 Compat Modes */
  src: local(""), url("../../fonts/battambang2/battambang_khmer-100.eot?#iefix") format("embedded-opentype"), url("../../fonts/battambang2/battambang_khmer-100.woff2") format("woff2"), url("../../fonts/battambang2/battambang_khmer-100.woff") format("woff"), url("../../fonts/battambang2/battambang_khmer-100.ttf") format("truetype"), url("../../fonts/battambang2/battambang_khmer-100.svg#Battambang") format("svg"); /* Legacy iOS */
}
/* battambang-300 - khmer */
@font-face {
  font-family: "Kh-Battambang";
  font-style: normal;
  font-weight: 300;
  src: url("../../fonts/battambang2/battambang_khmer-300.eot"); /* IE9 Compat Modes */
  src: local(""), url("../../fonts/battambang2/battambang_khmer-300.eot?#iefix") format("embedded-opentype"), url("../../fonts/battambang2/battambang_khmer-300.woff2") format("woff2"), url("../../fonts/battambang2/battambang_khmer-300.woff") format("woff"), url("../../fonts/battambang2/battambang_khmer-300.ttf") format("truetype"), url("../../fonts/battambang2/battambang_khmer-300.svg#Battambang") format("svg"); /* Legacy iOS */
}
/* battambang-regular - khmer */
@font-face {
  font-family: "Kh-Battambang";
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/battambang2/battambang_khmer-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../../fonts/battambang2/battambang_khmer-regular.eot?#iefix") format("embedded-opentype"), url("../../fonts/battambang2/battambang_khmer-regular.woff2") format("woff2"), url("../../fonts/battambang2/battambang_khmer-regular.woff") format("woff"), url("../../fonts/battambang2/battambang_khmer-regular.ttf") format("truetype"), url("../../fonts/battambang2/battambang_khmer-regular.svg#Battambang") format("svg"); /* Legacy iOS */
}
/* battambang-700 - khmer */
@font-face {
  font-family: "Kh-Battambang";
  font-style: normal;
  font-weight: 700;
  src: url("../../fonts/battambang2/battambang_khmer-700.eot"); /* IE9 Compat Modes */
  src: local(""), url("../../fonts/battambang2/battambang_khmer-700.eot?#iefix") format("embedded-opentype"), url("../../fonts/battambang2/battambang_khmer-700.woff2") format("woff2"), url("../../fonts/battambang2/battambang_khmer-700.woff") format("woff"), url("../../fonts/battambang2/battambang_khmer-700.ttf") format("truetype"), url("../../fonts/battambang2/battambang_khmer-700.svg#Battambang") format("svg"); /* Legacy iOS */
}
.lang-kh *:not(i) {
  font-family: "Kh-Battambang";
}

@font-face {
  font-family: "digital_displayregular";
  src: url("../../fonts/digital/digtl.eot");
  src: url("../../fonts/digital/digtld41d.eot?#iefix") format("embedded-opentype"), url("../../fonts/digital/digtl.woff2") format("woff2"), url("../../fonts/digital/digtl.woff") format("woff"), url("../../fonts/digital/digtl.ttf") format("truetype"), url("../../fonts/digital/digtl.svg#digital_displayregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.turnplate canvas {
  transition-duration: unset !important;
}

/* basic */
body,
a,
o {
  color: var(--deep);
}

/* color */
:root {
  --color: #ffbe6b;
  --color-7: rgb(255, 190, 107, 0.7);
  --light: #ffeed6;
  --light-lg: linear-gradient(to bottom, #e1e3ec, #ffffff);
  --deep: #c35b0b;
  --lg: linear-gradient(to bottom, #ffd8a5, var(--color));
  --color-blue-lg: linear-gradient(135deg, #8451ff, #51c4ff);
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
  --red: #ff4f4f;
  --red-color-7: rgb(255, 79, 79, 0.7);
  --red-lg: linear-gradient(to bottom, #db0000, var(--red));
  --yellow: #fe0;
  --yellow-lg: linear-gradient(135deg, #fe0, #fe0);
  --green: #5ee85e;
  --green-color-7: rgb(0, 198, 137, 0.7);
  --green-lg: linear-gradient(to bottom, #00b17a, #93ff6b);
  --blue: #3e6bff;
  --blue-color-7: rgb(62, 107, 255, 0.7);
  --blue-lg: linear-gradient(to bottom, #0044de, var(--blue));
  --purple: #c649f4;
  --purple-color-7: rgb(198, 73, 244, 0.7);
  --purple-lg: linear-gradient(to bottom, #6c00ff, var(--purple));
  --sapphire: #642ef7;
  --sapphire-lg: linear-gradient(135deg, #642ef7, #642ef7);
  --orange: #ff8000;
  --orange-lg: linear-gradient(135deg, #ff8000, #ff8000);
  --violet: #a34fe4;
  --violet-lg: linear-gradient(135deg, #a34fe4, #a34fe4);
  --black: #1e2230;
  --black-lg: linear-gradient(135deg, #1e2230, #1e2230);
  --cyan: #1cd8f6;
  --cyan-lg: linear-gradient(135deg, #1cd8f6, #1cd8f6);
  --fafa007-metallic-gold: #e5b80b;
  --fafa007-metallic-gold-lg: linear-gradient(135deg, #e5b80b, #e5b80b);
  --shadow: 0 3px 6px var(--000-1);
  --reward-bg-opacity: rgb(255 190 107 / 30%);
  --reward-border: #ffbe6b;
  --reward-title: --txt;
  --reward-color: #000;
  --tooltip-color:#5ab7ff;
  --tooltip-primary:#c35b0b;
}

/* ico */
.ico-ico-affiliate {
  background-image: url(../../images/theme3/ico/affiliate.png);
}

.ico-ico-balance {
  background-image: url(../../images/theme3/ico/balance.png);
}

.ico-ico-basketball {
  background-image: url(../../images/theme3/ico/basketball.png);
}

.ico-ico-bellhop {
  background-image: url(../../images/theme3/ico/bellhop.png);
}

.ico-ico-bookmark {
  background-image: url(../../images/theme3/ico/bookmark.png);
}

.ico-ico-buoy {
  background-image: url(../../images/theme3/ico/buoy.png);
}

.ico-ico-camera {
  background-image: url(../../images/theme3/ico/camera.png);
}

.ico-ico-coin {
  background-image: url(../../images/theme3/ico/coin.png);
}

.ico-ico-crystal {
  background-image: url(../../images/theme3/ico/crystal.png);
}

.ico-ico-dividers {
  background-image: url(../../images/theme3/ico/dividers.png);
}

.ico-ico-die {
  background-image: url(../../images/theme3/ico/die.png);
}

.ico-ico-end {
  background-image: url(../../images/theme3/ico/end.png);
}

.ico-ico-fire {
  background-image: url(../../images/theme3/ico/fire.png);
}

.ico-ico-fleur {
  background-image: url(../../images/theme3/ico/fleur.png);
}

.ico-ico-gift {
  background-image: url(../../images/theme3/ico/gift.png);
}

.ico-ico-glowing {
  background-image: url(../../images/theme3/ico/glowing.png);
}

.ico-ico-heart {
  background-image: url(../../images/theme3/ico/heart.png);
}

.ico-ico-joystick {
  background-image: url(../../images/theme3/ico/joystick.png);
}

.ico-ico-ledger {
  background-image: url(../../images/theme3/ico/ledger.png);
}

.ico-ico-military {
  background-image: url(../../images/theme3/ico/military.png);
}

.ico-ico-money {
  background-image: url(../../images/theme3/ico/money.png);
}

.ico-ico-pingpong {
  background-image: url(../../images/theme3/ico/pingpong.png);
}

.ico-ico-pound {
  background-image: url(../../images/theme3/ico/pound.png);
}

.ico-ico-rainbow {
  background-image: url(../../images/theme3/ico/rainbow.png);
}

.ico-ico-ringed {
  background-image: url(../../images/theme3/ico/ringed.png);
}

.ico-ico-ribbon {
  background-image: url(../../images/theme3/ico/ribbon.png);
}

.ico-ico-scroll {
  background-image: url(../../images/theme3/ico/scroll.png);
}

.ico-ico-slot {
  background-image: url(../../images/theme3/ico/slot.png);
}

.ico-ico-smiling {
  background-image: url(../../images/theme3/ico/smiling.png);
}

.ico-ico-sparkles {
  background-image: url(../../images/theme3/ico/sparkles.png);
}

.ico-ico-star {
  background-image: url(../../images/theme3/ico/star.png);
}

.ico-ico-suit {
  background-image: url(../../images/theme3/ico/suit.png);
}

.ico-ico-sun {
  background-image: url(../../images/theme3/ico/sun.png);
}

.ico-ico-tickets {
  background-image: url(../../images/theme3/ico/tickets.png);
}

.ico-ico-trophy {
  background-image: url(../../images/theme3/ico/trophy.png);
}

.ico-ico-woman {
  background-image: url(../../images/theme3/ico/woman.png);
}

.ico-ico-yen {
  background-image: url(../../images/theme3/ico/yen.png);
}

.ico-ico-yoyo {
  background-image: url(../../images/theme3/ico/yoyo.png);
}

.ico-ico-cockfight {
  background-image: url(../../images/theme3/ico/cockfight.png);
}

.ico-ico-term-con {
  background-image: url(../../images/theme3/ico/t&c.png);
}

.ico-ico-line {
  background-image: url(../../images/theme3/ico/line.png);
}

.ico-ico-user {
  background-image: url(../../images/theme3/ico/user.png);
}

.lv1,
.lv2,
.lv3,
.lv4,
.lv5,
.lv6,
.lv7,
.lv8,
.lv9,
.lv10 {
  display: block;
  margin: auto;
  width: 3.5rem;
  height: 3.5rem;
}

.lv1 {
  background-image: url(../../images/theme3/level/1.png);
}

.lv2 {
  background-image: url(../../images/theme3/level/2.png);
}

.lv3 {
  background-image: url(../../images/theme3/level/3.png);
}

.lv4 {
  background-image: url(../../images/theme3/level/4.png);
}

.lv5 {
  background-image: url(../../images/theme3/level/5.png);
}

.lv6 {
  background-image: url(../../images/theme3/level/6.png);
}

.lv7 {
  background-image: url(../../images/theme3/level/7.png);
}

.lv8 {
  background-image: url(../../images/theme3/level/8.png);
}

.lv9 {
  background-image: url(../../images/theme3/level/9.png);
}

.lv10 {
  background-image: url(../../images/theme3/level/10.png);
}

/* btn */
.btn {
  background-image: var(--color-orange-lg);
  border: 3px var(--color) solid;
  border-radius: 1rem;
  font-weight: bold;
  border-color: var(--orange);
}

.btn-blue {
  background-image: var(--color-blue-lg);
  border: 3px #639bff solid;
  border-color: var(--color);
}

.btn-empty {
  background: none;
  color: var(--deep);
  border-color: var(--deep);
  border-width: 2px;
  border-color: var(--deep);
}

.btn-more {
  min-width: 3rem;
  margin: 0.5rem auto;
}

/*balance*/
.balance {
  height: 0.6rem;
  border-radius: 1rem;
  padding: 0 0.15rem;
  display: flex;
  align-items: center;
  background-color: var(--light);
}

.balance i {
  margin: 0;
}

.balance b {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 0 0.1rem;
}

/* head */
.head {
  position: relative;
  background-image: var(--lg);
  box-shadow: 0 0 0.1rem var(--color);
  z-index: 3;
}

.head-cont .avatar {
  width: 0.5rem;
  height: 0.5rem;
}

.head-cont a {
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.1rem;
}

.head-cont a i {
  font-size: 0.3rem;
}

/*light*/
.light {
  padding-top: 0.1rem;
}

.light .swiper-wrapper {
  margin-bottom: 0.4rem;
}

.light .swiper-slide {
  height: 2rem;
  width: auto;
  overflow: hidden;
}

/*navigation*/
.navigation {
  text-align: center;
  padding: 0.25rem 0;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.navigation li {
  width: 33.33%;
  display: block;
  float: left;
  padding: 0.25rem;
  transition-duration: 0s;
}

.navigation li a {
  width: 100%;
  display: block;
  position: relative;
  color: var(--fff);
}

.navigation li a.navigation-game {
  background-color: var(--color);
  border-radius: 1.5rem;
  overflow: hidden;
  height: 2.5rem;
}

.navigation li a.navigation-game img {
  position: absolute;
  width: 2.5rem;
  left: 0;
  top: 0;
}

.navigation li a span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  padding-left: 1.5rem;
  text-transform: capitalize;
  font-weight: bold;
  word-break: break-word;
  color: var(--fff);
}

.navigation-footer {
  text-align: center;
  padding: 0.5rem 0;
  overflow: hidden;
}

.navigation-footer li {
  display: inline-block;
  margin: 0.25rem;
  transition-duration: 0s;
}

.navigation-footer li a {
  width: 10rem;
  display: block;
  position: relative;
}

.navigation-footer li a span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  padding-left: 1.5rem;
  text-transform: capitalize;
  font-weight: bold;
  color: var(--fff);
}

/*Home game*/
.home-game-list .title {
  padding: 1rem 0;
}

.home-game-list ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.home-game-list li div.center {
  padding: 0.5rem;
}

.home-game-list li .btn-empty {
  color: white;
  border-color: white;
}

.home-game-list li h3 {
  font-size: 1rem;
}

.home-game-list li em {
  width: 100%;
  display: block;
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  background-image: linear-gradient(to bottom, transparent, var(--color));
}

.home-game-list li span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.home-game-list li span a {
  margin: 0.25rem;
  max-width: 100%;
  word-break: break-all;
  width: auto;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0 1rem;
}

.home-game-list li:hover em {
  transform: scale(1.1);
}

.home-game-list li:hover span {
  opacity: 1;
}

.home-game-wrapper .home-game-list .home-game-list-group-title {
  width: 100%;
  padding: 0.5rem 0.25rem;
  align-items: center;
  flex-wrap: nowrap;
}

.home-game-wrapper .home-game-list .home-game-list-group-title img {
  width: 2rem;
}

.home-game-wrapper .home-game-list .home-game-list-group-title h3 {
  margin-left: 0.25rem;
  flex: 1 1 50%;
}

.home-game-list-group-title .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.home-game-list li {
  width: 33.33%;
  padding: 0.25rem;
  text-align: center;
  transition-duration: 0s;
}

.home-game-list li div {
  background-size: cover;
  border-radius: 0.5rem;
  color: white;
  position: relative;
}

.game-thumb::before {
  content: "";
  display: block;
  padding-top: 150%;
}
@media (min-width: 500px) {
  .game-thumb::before {
    padding-top: 145%;
  }
}

/*news*/
.news {
  padding: 0.5rem 0;
}

.news-cont li {
  padding: 0.5rem;
}

.news-cont li a {
  display: block;
}

.news-cont li a em {
  height: 10rem;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.news-cont li a span {
  background-color: var(--f7);
  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.news-cont li a:hover span {
  color: var(--fff);
}

/*recommend*/
.recommend {
  background-image: url(../../images/theme3/menu/peach/recommend.jpg);
  background-size: cover;
  padding: 1.25rem 0.5rem 1.25rem;
}

.recommend-cont {
  position: relative;
  background-image: var(--lg);
  border: 2px white solid;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.recommend-cont article {
  color: var(--fff);
}

.recommend-cont em {
  position: absolute;
  left: 0;
  right: 0;
  top: -3rem;
  margin: auto;
  max-width: 10rem;
}

.recommend-cont span {
  width: 7rem;
  margin: 1.5rem auto 0;
  display: block;
}

.recommend-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  margin: 0 auto 1rem auto;
}
.recommend-logo img {
  max-height: 5rem;
}

/*link*/
.link {
  padding: 1rem 0;
}

.link ul {
  display: flex;
  flex-wrap: wrap;
}

.link li {
  width: 33.33%;
  padding: 0.15rem;
  border-color: var(--light);
}

.link li a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px var(--color) solid;
  border-radius: 0.25rem;
  height: 5rem;
}

.link li a:hover {
  border-color: var(--color);
}

@media (min-width: 500px) {
  .link li {
    width: 20%;
  }
}
/*tag*/
.tag {
  padding: 0.5rem 0;
}

.tag ul {
  text-align: center;
}

.tag li {
  padding: 0.25rem;
  display: inline-block;
}

.tag li a {
  display: block;
  background-color: var(--light);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
}

.tag li a:hover {
  color: white;
}

/*im*/
.im {
  position: fixed;
  top: 50%;
  right: 0.25rem;
}

.im li {
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.im a {
  width: 2.5rem;
  height: 2.75rem;
  border-radius: 50%;
}

.im .top {
  position: static;
  margin: 0;
  width: 100%;
  transition: opacity 300ms ease-in-out;
}

/* pop */
pop {
  background-color: var(--fff-5);
  z-index: 100;
}

pop-main {
  overflow: inherit;
}

pop-cont {
  border: 2px var(--color) solid;
  border-radius: 0.2rem;
}

pop-sider {
  width: 55%;
  max-width: 400px;
}

pop-sider pop-cont {
  border: 0;
  border-radius: 0;
}

.pop-close {
  position: absolute;
  top: 0;
  right: 0;
  background-image: var(--lg);
  font-size: 0.3rem;
  padding: 0.1rem;
  border-radius: 100%;
  margin: -0.24rem;
}

pop-title {
  height: 60px;
}
pop-title .side-menu-header-info {
  width: 100%;
  padding: 0.25rem;
}
pop-title .side-menu-header-info span {
  font-size: 0.9rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
pop-title .ico {
  height: 100%;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*system*/
pop.system-pop {
  background-color: var(--fff-9);
}

.system-pop .full {
  display: flex;
  justify-content: center;
  align-items: center;
}

.system-pop pop-main {
  max-width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0 auto;
}

.system-pop pop-cont {
  background-color: transparent;
  border: 0;
}

.system-pop .close {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 100%;
  background-image: var(--lg);
  margin: auto;
  float: unset;
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 2rem;
  right: 0.5rem;
}

.system-pop .close:hover {
  background-image: var(--color-orange-lg);
}

.system-logo {
  width: 100%;
  max-width: 10rem;
  margin: 0 auto 0.5rem;
  text-align: center;
}

.system-logo img {
  max-height: 5rem;
}

.system-cont ul {
  display: flex;
  flex-wrap: wrap;
}

.system-cont ul li {
  width: 50%;
  float: left;
  padding: 0.5rem;
}

.system-cont ul li a {
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  background-image: var(--lg);
  padding: 0.5rem;
  height: 100%;
  width: 100%;
}

.system-cont ul li a i {
  width: 2rem;
  height: 2rem;
  display: block;
  margin-left: 0.5rem;
}

.system-cont ul li a span {
  text-transform: capitalize;
  font-size: 0.9rem;
  flex: 1;
  text-align: center;
  color: var(--fff);
}

.system-cont ul li:nth-child(1) a {
  background-image: var(--color-orange-lg);
  color: white;
}

.system-cont ul li:nth-child(2) a {
  background-image: var(--color-blue-lg);
  color: white;
}

.system-down {
  border-radius: 0.5rem;
  overflow: hidden;
  display: block;
  margin: 0.25rem;
}

/*precondition*/
.precondition-form {
  padding: 0.2rem;
}

.precondition-form li i {
  font-size: 0.32rem;
  margin-right: 0.1rem;
}

.precondition-form li input {
  padding: 0 0.2rem;
}

.precondition-form li input::-webkit-input-placeholder {
  color: var(--deep);
  opacity: 0.3;
}

.precondition-other {
  padding: 0.2rem 0;
}

.precondition-other .btn {
  padding: 0 0.4rem;
}

/*money*/
.money {
  padding: 0 0.2rem;
}

.money-bet {
  margin: 0.2rem 0;
}

.money-quick {
  display: flex;
  align-items: center;
  margin: 0.2rem 0;
}

.money-quick a {
  display: block;
  flex: 1;
  text-align: center;
  font-weight: bold;
  line-height: 0.6rem;
  border: 1px var(--color) solid;
  border-radius: 1rem;
}

.money-quick a:not(:last-child) {
  margin-right: 0.1rem;
}

.money-quick a:hover {
  background-color: var(--deep);
  border-color: var(--deep);
  color: var(--light);
}

.money-gift ul li {
  margin: 0.1rem 0;
}

.money-gift ul li a {
  padding: 0.2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  border: 1px var(--color) solid;
  overflow: hidden;
}

.money-gift ul li a i {
  width: 0.7rem;
  height: 0.7rem;
  display: block;
  margin-right: 0.2rem;
}

.money-gift ul li a span {
  flex: 1;
}

.money-gift ul li a horn {
  background-color: var(--deep);
  opacity: 0;
}

.money-gift ul li.active a {
  border-color: var(--deep);
}

.money-gift ul li.active horn {
  opacity: 1;
}

.money-progress {
  margin: 0.2rem 0;
}

.money-progress progress {
  width: 100%;
}

.money-credit {
  display: flex;
  align-items: center;
  margin: 0.2rem 0;
}

/*article*/
article ul {
  padding-left: 0.3rem;
}

article ul li {
  list-style: disc;
  line-height: 200%;
}

/*empty*/
empty i img {
  width: 2rem;
}

/* form */
input {
  background-color: var(--light);
  border-radius: 1rem;
  color: var(--deep);
  padding: 0 0.2rem;
}

.form li {
  border: 0;
}

.form li input,
.form li textarea,
.form li select {
  border-radius: 0.2rem;
  background-color: var(--light);
  color: var(--deep);
}

.form li .code {
  margin-left: 0.1rem;
}

/*user*/
.user-cont {
  padding: 0.2rem;
}

.user-info {
  text-align: center;
  margin-bottom: 0.2rem;
}

.user-info h5 {
  padding: 0.2rem 0;
}

.user-info-cont {
  background-color: var(--light);
  border-radius: 0.5rem;
  padding: 0.3rem 0;
  margin: 0.3rem 0;
}

.user-info-cont i {
  width: 0.8rem;
  height: 0.8rem;
  display: block;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 0.4rem;
}

.user-info-cont h3 {
  text-align: left;
  font-size: 0.3rem;
}

.user-info-cont span {
  display: block;
  font-weight: normal;
  font-size: 0.2rem;
  padding-bottom: 0.1rem;
}

.user-coupon,
.user-coupon input {
  text-align: center;
}

.user-nav {
  padding: 0.5rem;
}

.user-nav li {
  margin: 0.5rem 0;
}

.user-nav li a {
  display: flex;
  align-items: center;
  border: 2px var(--color) solid;
  border-radius: 2rem;
  padding: 0.25rem 0.5rem;
}

.user-nav li a i {
  width: 2rem;
  height: 2rem;
  display: block;
  margin: 0.25rem;
}

.user-nav li a span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  text-transform: capitalize;
  padding-right: 0.1rem;
  font-size: 0.9rem;
}

/* page */
page {
  padding: 0.3rem 0;
}

page .ico,
page * {
  border-radius: 1rem;
  border: 0;
  color: var(--deep);
}

page button,
page a {
  background-color: var(--light);
}

page button:hover,
page a:hover,
page a.active {
  color: var(--deep);
}

/*banner*/
.top-banner {
  background-color: var(--light);
  position: relative;
  padding: 2.5rem 1rem 17.5rem;
}

.top-banner .main {
  position: static;
}

.top-banner em {
  position: absolute;
  left: 0;
  bottom: 0;
}

.top-banner-tip {
  background-image: url(../../images/theme3/banner/tip.png);
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.top-banner-cont {
  position: relative;
  z-index: 1;
}

.top-banner-cont h4 {
  font-size: 1.15rem;
  padding-bottom: 0.75rem;
}

.top-banner-cont p {
  font-size: 0.85rem;
}

.top-banner-wave {
  width: 100%;
  height: 4.5rem;
  background-image: url(../../images/theme3/banner/wave.svg);
  background-size: cover;
  background-position: center top;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Home Lobby */
.home-lobby-wrapper {
  display: flex;
}

.home-lobby-left-list li {
  text-align: center;
  margin: 0.5rem 0;
}

.home-lobby-left-list li.active a {
  background-color: var(--color);
}

.home-lobby-left-list li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  border: 2px var(--color) solid;
  padding: 0.25rem 0;
}

.home-lobby-left-list li i {
  width: 2rem;
  height: 2rem;
}

.home-lobby-left-list li span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.1;
}

.home-lobby-left-wrapper li {
  text-align: center;
  margin: 0.5rem 0;
  width: 100%;
}
.home-lobby-left-wrapper li .main-tab-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  border: 2px var(--color) solid;
  padding: 0.25rem 0;
}
.home-lobby-left-wrapper li .main-tab-btn i {
  width: 2rem;
  height: 2rem;
}
.home-lobby-left-wrapper li .main-tab-btn span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.1;
}
.home-lobby-left-wrapper li .main-tab-btn.active {
  background-color: var(--color);
}
.home-lobby-left-wrapper li .main-tab-btn.active span {
  color: var(--fff);
}
.home-lobby-left-wrapper li .main-tab-btn:hover {
  color: var(--deep);
}

.home-lobby-left-wrapper {
  overflow-x: hidden;
  overflow-y: scroll;
}

.home-lobby-right-wrapper {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 300px;
}

/* title */
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

.title i {
  font-size: 1.75rem;
  margin-right: 0.25rem;
}

.title h3 {
  font-size: 1.15rem;
}

.title span {
  padding: 0 1rem;
}

.title-search {
  display: flex;
  margin-bottom: 1rem;
}

.title-search input {
  flex: 1;
  height: 3rem;
}

.title-search a {
  padding: 0;
  width: 3rem;
  margin: 0 0.25rem;
}

/* table */
.table table tbody tr:nth-child(2n) {
  background-color: var(--light);
}

.table table tbody tr:hover {
  background-color: var(--color);
}

/*jackpot-desc*/
.jackpot-desc {
  background-color: var(--light);
  border-radius: 1rem;
  text-align: center;
  margin: 1rem 0;
}

.jackpot-desc h3 {
  background-color: var(--deep);
  color: var(--light);
  display: inline-block;
  padding: 0.25rem 1rem;
  border-radius: 0 0 1rem 1rem;
  font-size: 0.85rem;
}

.jackpot-desc ul {
  padding: 1rem;
}

.jackpot-desc ul li {
  text-align: left;
  margin: 1.25rem 0;
}

.jackpot-desc ul li a {
  display: flex;
  align-items: center;
}

.jackpot-desc ul li a i {
  width: 3.5rem;
  height: 3.5rem;
  display: block;
  margin-right: 1rem;
}

.jackpot-desc ul li a h5 {
  flex: 1;
}

.jackpot-desc ul li a h5 span {
  font-weight: normal;
  display: block;
  font-size: 0.85rem;
  padding-top: 0.5rem;
}

/* qa */
.qa fold-title {
  border-bottom-color: var(--light);
}

/*superiority*/
.superiority {
  background-color: var(--light);
  border-radius: 1rem;
  margin: 1.25rem 0;
}

.superiority-cont {
  padding: 1rem;
}

.superiority-cont em {
  display: block;
  width: 7.5rem;
  margin: auto;
}

.superiority-cont p {
  font-size: 0.85rem;
}

.superiority-txt h4 {
  padding-bottom: 1rem;
  font-size: 1.05rem;
  text-align: center;
}

.superiority-list {
  display: flex;
  border-radius: 1rem;
  padding: 1rem;
}

.superiority-list li {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
}

.superiority-list li i {
  width: 3.5rem;
  height: 3.5rem;
  display: block;
}

.superiority-list li h5 {
  padding: 0.75rem 0;
}

.superiority-list span {
  font-size: 0.85rem;
}

/*promotion*/
.promotion li {
  padding: 0.1rem;
}

.promotion li a {
  display: block;
  border: 2px var(--color) solid;
  border-radius: 0.2rem;
  margin-top: 1.5rem;
  padding: 0.2rem;
}

.promotion li a em {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1.5rem;
}

.promotion li a h5 {
  text-align: center;
  font-size: 0.24rem;
  margin: 0.2rem 0;
}

.promotion li a p {
  line-height: 0.3rem;
  height: 0.6rem;
  overflow: hidden;
  margin: 0.2rem 0;
}

.promotion-article {
  padding: 0.2rem;
}

/*vip*/
.vip-wrapper {
  background-image: url(../../images/theme3/vip.jpg);
  background-position: center top;
  background-size: 260vw;
  padding-top: 3.2rem;
}

.vip-cont {
  background-color: var(--fff-8);
  border-radius: 1rem;
  padding: 0 0.5rem;
}

.vip-lv-wrapper h4 {
  display: block;
  text-align: center;
  font-size: 1.25rem;
}

.vip-lv-wrapper i {
  margin: 1rem auto;
}

.vip-lv-wrapper h3 {
  text-align: center;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--color);
  text-shadow: 0.25rem 0.25rem 0.5rem var(--color);
  margin: 1rem 0;
}

.vip-lv-list-wrapper {
  overflow: hidden;
  padding: 0.25rem;
  display: flex;
  flex-wrap: wrap;
}

.vip-lv-list-wrapper li {
  width: 50%;
  padding: 0.5rem;
}

.vip-lv-list-wrapper li a {
  box-shadow: 0 0.25rem 0.5rem var(--color);
  background-color: var(--light);
  border-radius: 0.5rem;
  padding: 0.75rem;
  text-align: center;
  display: block;
}

.vip-lv-list-wrapper li span {
  font-size: 0.9rem;
}

.vip-lv-list-wrapper li h5 {
  text-transform: uppercase;
  color: var(--deep);
}

.vip-buy li {
  display: flex;
  align-items: center;
  padding: 0.2rem 0;
}

.vip-buy li:not(:last-child) {
  border-bottom: 1px var(--light) solid;
}

.vip-buy b {
  padding: 0.25rem 1rem;
  border: 2px solid;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 0.9rem;
}

.vip-buy .btn {
  padding: 0.5rem 1rem;
  border-radius: 2rem;
}

.vip-table-wrapper {
  overflow: auto;
  padding-bottom: 1rem;
}
.vip-table-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: white;
}
@media (max-width: 640px) {
  .vip-table-wrapper table {
    max-width: 15rem;
  }
}
.vip-table-wrapper table thead th,
.vip-table-wrapper table thead td {
  font-weight: bold;
  text-transform: capitalize;
  border-bottom: 2px var(--color) solid;
  vertical-align: middle;
  text-align: center;
}
.vip-table-wrapper table th,
.vip-table-wrapper table td {
  vertical-align: middle;
  text-align: center;
  height: 50px;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.25;
}
.vip-table-wrapper table th {
  min-width: 5rem;
}
@media (max-width: 640px) {
  .vip-table-wrapper table th,
  .vip-table-wrapper table td {
    height: 3rem;
    padding: 0 0.5rem;
  }
}
.vip-table-wrapper table span {
  font-size: 0.85rem;
}
.vip-table-wrapper table tbody tr:nth-child(2n) {
  background-color: var(--light);
}

.vip-table-section h4 {
  text-align: center;
  padding: 1.25rem 0;
  font-size: 1.5rem;
  text-transform: uppercase;
  width: 100%;
}

.vip-table-section td {
  width: 15%;
}

.vip-info {
  padding: 1rem 0;
}

.vip-info fold-title {
  border-bottom-color: var(--light);
}

.vip-info h2 {
  font-size: 1.5rem;
}
.vip-info p {
  font-size: 0.9rem;
}

.vip-daily-cashback-wrapper span {
  display: block;
  white-space: nowrap;
}

/*nav*/
nav li.active a {
  background-color: var(--light);
}

/*login*/
.login-col {
  display: flex;
}

.login-col li {
  flex: 1;
  margin: 0.5rem;
}

.login-col li a {
  display: flex;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.login-col li a .ico {
  margin-right: 0.15rem;
}

/*progressive*/
.progressive {
  padding: 0.25rem 0.5rem;
}

.progressive-cont {
  background-color: var(--light);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px var(--deep) solid;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.progressive-cont h5 {
  width: 30%;
  text-align: center;
}

.progressive-val {
  flex: 1;
  background-image: linear-gradient(var(--deep), var(--color));
  border-radius: 1rem;
  font-size: 1.75rem;
  color: var(--light);
  font-weight: bold;
  border: 3px var(--color) solid;
  text-align: center;
}

@media (max-width: 375px) {
  .progressive-val {
    font-size: 1.5rem;
  }
}

/* ico */
.ico-lang-kh {
  background-image: url(../../images/theme3/lang/cambodia.svg);
}

.ico-lang-cn {
  background-image: url(../../images/theme3/lang/china.svg);
}

.ico-lang-vn {
  background-image: url(../../images/theme3/lang/vietnam.svg);
}

.ico-lang-en {
  background-image: url(../../images/theme3/lang/england.svg);
}

.ico-lang-id {
  background-image: url(../../images/theme3/lang/indonesia.svg);
}

.ico-lang-fr {
  background-image: url(../../images/theme3/lang/france.svg);
}

.ico-lang-de {
  background-image: url(../../images/theme3/lang/germany.svg);
}

.ico-lang-tw {
  background-image: url(../../images/theme3/lang/taiwan.svg);
}

.ico-lang-hk {
  background-image: url(../../images/theme3/lang/hongkong.svg);
}

.ico-lang-jp {
  background-image: url(../../images/theme3/lang/japan.svg);
}

.ico-lang-kr {
  background-image: url(../../images/theme3/lang/korea.svg);
}

.ico-lang-ma {
  background-image: url(../../images/theme3/lang/malaysia.svg);
}

.ico-lang-ph {
  background-image: url(../../images/theme3/lang/philippines.svg);
}

.ico-lang-ru {
  background-image: url(../../images/theme3/lang/russia.svg);
}

.ico-lang-es {
  background-image: url(../../images/theme3/lang/spain.svg);
}

.ico-lang-hi {
  background-image: url(../../images/theme3/lang/india.svg);
}

.ico-lang-th {
  background-image: url(../../images/theme3/lang/thailand.svg);
}

.ico-lang-taiwan {
  background-image: url(../../images/theme3/lang/taiwan.svg);
}

.ico-lang-bn {
  background-image: url(../../images/theme3/lang/bangladesh.svg);
}

.ico-lang-lo {
  background-image: url(../../images/theme3/lang/lao.svg);
}

.ico-lang-pt {
  background-image: url(../../images/theme3/lang/brazil.svg);
}

.ico-lang-mm {
  background-image: url(../../images/theme3/lang/myanmar.svg);
}

.ico-lang-pk {
  background-image: url(../../images/theme3/lang/urdu.svg);
}

.ico-lang-au {
  background-image: url(../../images/theme3/lang/australia.svg);
}

.ico-lang-ca {
  background-image: url(../../images/theme3/lang/canada.svg);
}

.ico-lang-sg, [class*=ico-lang-sg-] {
  background-image: url(../../images/theme3/lang/singapore.svg);
}

.peach {
  --color: #ffbe6b;
  --color-7: rgb(255, 190, 107, 0.7);
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
}

/*red*/
.red,
.template-red {
  --color: var(--red);
  --color-7: var(--red-color-7);
  --light: #ffdbd6;
  --deep: #a50505;
  --lg: var(--red-lg);
  --color-blue-lg: linear-gradient(135deg, var(--color), #af0000);
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
}

/*green*/
.green,
.template-green {
  --color: var(--green);
  --color-7: var(--green-color-7);
  --light: #e4ffda;
  --deep: #00c689;
  --lg: var(--green-lg);
  --color-blue-lg: linear-gradient(135deg, var(--color), #00b17a);
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
}

/*blue*/
.blue,
.template-blue {
  --color: var(--blue);
  --color-7: var(--blue-color-7);
  --light: #e8eeff;
  --deep: #0032d8;
  --lg: var(--blue-lg);
  --color-blue-lg: linear-gradient(135deg, var(--color), #003bff);
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
}

/*sapphire*/
.sapphire {
  --color: var(--sapphire);
  --color-7: var(--sapphire);
  --color-orange-lg: var(--sapphire-lg);
}

/*orange*/
.orange {
  --color: var(--orange);
  --color-7: var(--orange);
  --color-orange-lg: var(--orange-lg);
}

/*yellow*/
.yellow {
  --color: var(--yellow);
  --color-7: var(--yellow);
  --color-orange-lg: var(--yellow-lg);
}

/*cyan*/
.cyan {
  --color: var(--cyan);
  --color-7: var(--cyan);
  --color-orange-lg: var(--cyan-lg);
}

/*violet*/
.violet {
  --color: var(--violet);
  --color-7: var(--violet);
  --color-orange-lg: var(--violet-lg);
}

.purple,
.template-purple {
  --color: var(--purple);
  --color-7: var(--purple-color-7);
  --light: #f9eaff;
  --deep: #6c00ff;
  --lg: var(--purple-lg);
  --color-blue-lg: linear-gradient(135deg, var(--color), var(--deep));
  --color-orange-lg: linear-gradient(135deg, #ff6c4e, #fff34e);
}

/*black*/
.black,
.template-black {
  --color: var(--black);
  --color-7: var(--black);
  --color-orange-lg: var(--black-lg);
  --light: #ffeed6;
  --deep: #c35b0b;
  --lg: linear-gradient(to bottom, #1e2230, var(--color));
  --color-blue-lg: linear-gradient(135deg, #8451ff, #51c4ff);
}

/*gold*/
.custom-gold {
  --color: var(--fafa007-metallic-gold);
  --color-7: var(--fafa007-metallic-gold);
  --color-orange-lg: var(--fafa007-metallic-gold-lg);
}

hop a i {
  display: block;
  border-radius: 100%;
}

.toggle-color-pop .full {
  display: flex;
  justify-content: center;
  align-items: center;
}
.toggle-color-pop pop-title {
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  background-color: #ffeed6;
  width: 100%;
}
.toggle-color-pop pop-title span {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 0.25rem;
}
.toggle-color-pop pop-main {
  border: 1px solid white;
  border-radius: 0.25rem;
}
.toggle-color-pop pop-cont {
  border: none;
  background-color: #ffeed6;
  width: 100%;
}

.toggle-color-content {
  padding: 0.5rem;
  display: flex;
  margin: 0 auto;
}
.toggle-color-content div {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
  display: flex;
  justify-content: center;
}
.toggle-color-content div.active a i.ico-done {
  display: block;
}
.toggle-color-content div a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  display: flex;
  margin: 0.25rem;
  position: relative;
}
.toggle-color-content div a i.ico-done {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.15rem;
  color: var(--fff);
  display: none;
}
.toggle-color-content div a.template-red {
  background-color: var(--red);
}
.toggle-color-content div a.template-green {
  background-color: var(--green);
}
.toggle-color-content div a.template-blue {
  background-color: var(--blue);
}
.toggle-color-content div a.template-yellow {
  background-color: var(--yellow);
}
.toggle-color-content div a.template-black {
  background-color: var(--black);
}
.toggle-color-content div a.template-orange {
  background-color: var(--orange);
}
.toggle-color-content div a.template-sapphire {
  background-color: var(--sapphire);
}
.toggle-color-content div a.template-violet {
  background-color: var(--violet);
}
.toggle-color-content div a.template-cyan {
  background-color: var(--cyan);
}
.toggle-color-content div a.template-purple {
  background-color: var(--purple);
}
.toggle-color-content div a.template-clear i.fa-ban {
  color: red;
  font-size: 2.5rem;
}

/* Custom */
html,
body {
  font-size: 16px;
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* Lazyload */
.lazyload {
  opacity: 0;
}

.lazyloading {
  opacity: 1;
  transition: opacity 300ms;
  background: url(../../images/loader-transparent.gif) no-repeat center;
  background-size: 2rem;
}

img.lazyload:not([src]) {
  visibility: hidden;
}

/* Header */
header {
  height: 60px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
  background-image: var(--light-lg);
  box-shadow: 0 0 0.1rem var(--color);
}
header .header-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
header .header-wrapper .header-logo-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
}
header .header-wrapper .header-logo-wrapper a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
header .header-wrapper .header-logo-wrapper a:hover {
  color: var(--deep);
}
header .header-wrapper .header-logo-wrapper img {
  max-height: 100%;
  padding: 0.25rem;
  max-width: 9rem;
  animation-delay: 0.5s;
}
header .header-wrapper .header-left-wrapper .ico-menu {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
header .header-wrapper .header-right-wrapper hop a {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
header .header-wrapper .header-right-wrapper hop a i {
  width: 2rem;
  height: 2rem;
}
header .header-wrapper .header-right-wrapper hop hop-cont {
  margin-top: 0.25rem;
  box-shadow: none;
}
header .header-wrapper .header-right-wrapper hop hop-cont a {
  background-color: transparent;
  border-bottom: 0;
}
header .header-wrapper .header-right-wrapper hop hop-cont a i {
  width: 1.9rem;
  height: 1.9rem;
}
header .header-wrapper .header-right-wrapper hop hop-cont,
header .header-wrapper .header-right-wrapper hop a {
  width: 2.25rem;
  height: 2.25rem;
}
header .header-wrapper .header-right-wrapper hop > a {
  border-radius: 100%;
}
header .header-wrapper .header-right-wrapper hop > a i {
  border: 3px var(--color) solid;
}
header .header-wrapper .header-right-wrapper .header-right-btn {
  background-image: var(--color-orange-lg);
  border: 3px var(--color) solid;
  border-radius: 50%;
  font-weight: bold;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--fff);
}
header .header-wrapper .header-right-wrapper .header-right-btn.header-right-btn-blue {
  background-image: var(--color-blue-lg);
  color: var(--fff);
}

/* Banner */
/* Announcement */
.announcement {
  display: flex;
  align-items: center;
  border-radius: 0;
}
.announcement .ico-volume {
  background-color: var(--color);
  color: var(--fff);
  border-radius: 0.25rem 1rem 1rem 0.25rem;
  margin-right: 0.25rem;
  padding: 0.5rem;
}
.announcement .ico-more {
  color: var(--txt);
  font-size: 1rem;
  padding: 0.25rem;
}
.announcement .marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-left: 0;
  opacity: 0;
  color: var(--color);
  transition: none;
}
.announcement .js-marquee-wrapper {
  transition: none;
}
.announcement .js-marquee {
  font-size: 0.8rem;
  transition: none;
}

/* Main */
.o-wrapper {
  padding-top: 60px;
  padding-bottom: 60px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
}

main {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
}

footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 3;
  background-color: var(--fff);
  height: 60px;
  box-shadow: 0 0 6px var(--000-1);
}
footer.footer-nav ul {
  height: 100%;
  display: flex;
}
footer.footer-nav ul li {
  display: flex;
  flex-direction: column;
  width: 20%;
  flex-grow: 1;
  padding: 0.25rem;
}
footer.footer-nav ul li a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
}
footer.footer-nav ul li a i {
  margin: 0.25rem;
  font-size: 1.5rem;
}
footer.footer-nav ul li a span {
  display: block;
  text-align: center;
  line-height: 100%;
  text-transform: capitalize;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
footer.footer-nav ul li.active a {
  background-color: var(--light);
}

/* Login */
.form-group-icon i {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.login-modal-body-wrapper input,
.login-modal-body-wrapper textarea,
.login-modal-body-wrapper select,
.register-modal-body-wrapper input,
.register-modal-body-wrapper textarea,
.register-modal-body-wrapper select,
#formAffiliate input,
#formAffiliate textarea,
#formAffiliate select {
  border-radius: 0.75rem;
  background-color: var(--light);
  color: var(--deep);
  border-color: transparent;
  height: 3rem;
}
.login-modal-body-wrapper .form-control:focus,
.register-modal-body-wrapper .form-control:focus,
#formAffiliate .form-control:focus {
  box-shadow: none;
  background-color: var(--light);
  color: var(--deep);
  border-color: transparent;
}
.login-modal-body-wrapper .login-now-text-wrapper span,
.register-modal-body-wrapper .login-now-text-wrapper span,
#formAffiliate .login-now-text-wrapper span {
  font-weight: bold;
}
.login-modal-body-wrapper .login-now-text-wrapper .btn,
.register-modal-body-wrapper .login-now-text-wrapper .btn,
#formAffiliate .login-now-text-wrapper .btn {
  width: 100%;
  padding: 0.5rem;
  border-radius: 2rem;
}

.form-group-password {
  position: relative;
}
.form-group-password input {
  padding-right: 2rem;
}
.form-group-password o {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

label#autoWrapper {
  display: flex;
}

label#autoWrapper input {
  display: none;
}

label#autoWrapper span {
  position: relative;
  width: 24px;
  height: 24px;
}

label#autoWrapper span:before {
  content: "\e7da";
  position: absolute;
  top: 0;
  left: 0;
  font-family: ico !important;
  font-size: 24px;
  line-height: 1;
}

/* Style its checked state...with a ticked icon */
label#autoWrapper [type=checkbox]:checked + span:before {
  content: "\e7dc";
  position: absolute;
  top: 0;
  left: 0;
}

.login-modal-body-wrapper .btn-login {
  margin: 0 auto;
  width: 100%;
  padding: 0.5rem;
  border-radius: 2rem;
}

.register-modal-body-wrapper .btn-register {
  margin: 0 auto;
  width: 100%;
  padding: 0.5rem;
  border-radius: 2rem;
}

#registerForm #account_checkMsg,
#forgotFormWrapper #account_checkMsg {
  display: flex;
  align-items: center;
}
#registerForm fieldset .show-loader,
#forgotFormWrapper fieldset .show-loader {
  position: relative;
  width: 2rem;
  height: 1rem;
  background-image: url(../../images/loader-transparent.gif);
  background-size: contain;
  background-repeat: no-repeat;
}
#registerForm .btn-get-code,
#forgotFormWrapper .btn-get-code {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  color: var(--fff);
  background-color: var(--color);
  border-radius: 0.5rem;
}
#registerForm .btn-get-code:disabled,
#forgotFormWrapper .btn-get-code:disabled {
  opacity: 0.6;
}
#registerForm .btn-get-code span,
#forgotFormWrapper .btn-get-code span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  text-align: center;
}

#forgotFormWrapper .btn {
  width: 100%;
  padding: 0.5rem;
}

.reg-bank-logo-wrapper {
  background-color: #e6e6e6;
  padding: 0 0.25rem;
  border-radius: 0.5rem;
}
.reg-bank-logo-wrapper .reg-bank-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0.25rem 0;
  height: 100%;
}
.reg-bank-logo-wrapper .reg-bank-logo img {
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.reg-bank-logo-wrapper .reg-bank-logo span {
  display: block;
  display: -webkit-box;
  max-height: 2.6em;
  line-height: 1.1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  text-align: center;
}

.reg-bank-detail-wrapper #regSelectedBankLogo {
  height: 7.5rem;
  width: 7.5rem;
  border-radius: 0.5rem;
}
.reg-bank-detail-wrapper #regSelectedBankName {
  width: 100%;
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.code-match {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #666;
  width: 100%;
  height: 100%;
}

#formAffiliate input[type=radio] {
  height: auto;
}
#formAffiliate .btn-block {
  padding: 0.5rem;
}

/* Modal */
.modal-dialog-scrollable .modal-content {
  overflow: unset;
  border: 2px var(--color) solid;
  border-radius: 0.5rem;
}
.modal-dialog-scrollable .modal-content .modal-body {
  max-height: calc(90vh - 60px - 60px);
  overflow-y: scroll;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: 85vh;
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  background-image: var(--lg);
  font-size: 1.5rem;
  border-radius: 100%;
  margin: -0.5rem;
  width: 2rem;
  height: 2rem;
  z-index: 1051;
}
.modal-close span {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
}

/* Deposit */
.custom-form-wrapper .center-tab {
  padding: 0;
}
.custom-form-wrapper .center-tab a:focus {
  box-shadow: none;
}
.custom-form-wrapper .btn-depo-amt-wrapper .btn-depo-amt {
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-form-wrapper .btn-depo-amt-wrapper .btn-depo-amt.active span {
  background-color: var(--color);
  background-image: var(--color-orange-lg);
}
.custom-form-wrapper .btn-depo-amt-wrapper .btn-depo-amt span {
  width: 100%;
  height: 100%;
  background-color: var(--deep);
  color: var(--fff);
  text-align: center;
  font-size: 0.9rem;
  border-radius: 0.35rem;
  padding: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 375px) {
  .custom-form-wrapper .btn-depo-amt-wrapper .btn-depo-amt span {
    font-size: 0.75rem;
    padding: 0.25rem 0;
  }
}
.custom-form-wrapper .depo_img label {
  background-color: var(--deep);
  border-color: #ced4da;
}
.custom-form-wrapper .depo_img label span {
  color: var(--fff);
}
.custom-form-wrapper .depo_img_text {
  font-size: 0.9rem;
}
.custom-form-wrapper form .btn.gradient {
  padding: 0.25rem 1rem;
}

.copy-bank-details-wrapper {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color);
  border-radius: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}
.copy-bank-details-wrapper label {
  font-size: 0.9rem;
}
.copy-bank-details-wrapper .copy-bank-details-info {
  display: flex;
  align-items: center;
}
.copy-bank-details-wrapper .btn-copy-bank {
  background-color: var(--color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  height: 100%;
  color: var(--fff);
}

.custom-depo-bank-wrapper .custom-depo-bank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.custom-depo-bank-wrapper .custom-depo-bank .custom-depo-selected-bank {
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  background-color: var(--block);
  border: 2px transparent solid;
}
.custom-depo-bank-wrapper .custom-depo-bank .custom-depo-selected-bank .ico {
  color: var(--fff);
  font-size: 1rem;
  background-color: var(--red);
  position: absolute;
  right: 0;
  border-radius: 0 0 0 1rem;
  width: 1.25rem;
  height: 1.25rem;
  z-index: 1;
  opacity: 0;
}
.custom-depo-bank-wrapper .custom-depo-bank.active .custom-depo-selected-bank {
  border-color: var(--red);
}
.custom-depo-bank-wrapper .custom-depo-bank.active .custom-depo-selected-bank .ico {
  opacity: 1;
}
.custom-depo-bank-wrapper .custom-depo-bank img {
  max-width: 4rem;
  border-radius: 1rem;
  padding: 0.15rem;
}
.custom-depo-bank-wrapper .custom-depo-bank span {
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.bank-info-wrapper {
  border: 1px solid var(--color);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.bank-info-wrapper .depo-with-title {
  line-height: 1.5;
}

.qrcode-bank-wrapper {
  width: 100%;
  border: 1px solid #fff;
  border-radius: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  overflow: hidden;
}
.qrcode-bank-wrapper .qrcode-bank-img-wrapper {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--ddd);
}
.qrcode-bank-wrapper .qrcode-bank-img-wrapper img {
  display: block;
  min-height: 120px;
  max-height: 180px;
  margin: 0 auto;
}
.qrcode-bank-wrapper .qrcode-bank-details {
  padding: 1rem;
  width: 100%;
  background-color: var(--fff);
  color: var(--000);
  border: 1px solid var(--000);
  border-top-color: var(--ddd);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.qrcode-bank-wrapper .qrcode-bank-details .qrcode-bank-details-info {
  display: flex;
  align-items: center;
}
.qrcode-bank-wrapper .qrcode-bank-details .qrcode-bank-details-info #bankaccber_to,
.qrcode-bank-wrapper .qrcode-bank-details .qrcode-bank-details-info .btn-copy-bank {
  color: #007bff;
}
.qrcode-bank-wrapper .qrcode-bank-details .qrcode-bank-details-info .btn-copy-bank {
  padding: 0 0.5rem;
}

.depo-popup-qr-img {
  max-width: 20rem;
  max-height: 20rem;
}

/* USDT */
.btn-crypto-option {
  color: #000;
  border-radius: 5px;
  padding: 0.5rem;
  position: relative;
  border: 1px solid #ced4da;
  text-align: center;
  width: 100%;
  display: block;
  overflow: hidden;
}

.btn-crypto-option.active:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 1.45rem solid #fc7301;
  border-left: 1.45rem solid transparent;
}

.btn-crypto-option.active:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 10px;
  top: 30px;
  right: 6px;
  transform: rotate(40deg) translate(-50%, -50%);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}

.usdt-qr-image {
  display: none;
}

/* Add Bank */
.bank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border-radius: 0.25rem;
  margin: 0 auto 1rem auto;
  overflow: hidden;
}

.btn-add-bank {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

.btn-add-bank:hover {
  text-decoration: none;
  color: #fff;
}

.bank-card:last-child {
  margin-bottom: 0;
}

.bank-card img {
  width: 100%;
}

.tick-check {
  position: absolute;
  bottom: -25px;
  right: 3px;
  color: #fff;
  font-size: 0.75rem;
}

.bank-card-tick-check-wrapper {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom: 30px solid #00aeef;
  border-left: 30px solid transparent;
}

.bank-card.active .bank-card-tick-check-wrapper {
  display: block;
}

.bank-card-details-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bank-card-details-wrapper span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  color: #fff;
}

.bank-card-details-wrapper span:not(:first-child) {
  margin-top: 0.5rem;
}

/* Promotion */
.option-switcher {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 1rem 0;
}

.option-switcher-tab {
  display: flex;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.option-switcher-tab span {
  background-color: var(--333);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: white;
}
.option-switcher-tab.active span {
  background-color: var(--color);
}

.promotion-container {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 1rem;
}
.promotion-container .promotion-container-title {
  font-size: 0.85rem;
}
.promotion-container .promotion-container-title span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.promotion-container .promotion-container-date {
  font-size: 0.85rem;
  font-weight: bold;
  text-align: right;
  color: rgb(246, 198, 103);
}

.promo-modal-table-wrapper {
  overflow-x: scroll;
  max-width: 100%;
  padding-bottom: 0.75rem;
}
.promo-modal-table-wrapper table td {
  border: 1px solid #ccc;
}

.promo-modal .promo-modal-img-wrapper img {
  border-radius: 0.5rem;
}
.promo-modal .promo-modal-btn-wrapper {
  text-align: center;
}
.promo-modal .promo-modal-btn-wrapper a {
  color: white;
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
}
.promo-modal .modal-footer {
  justify-content: center;
}

/* Center */
.center-opt-wrapper .center-opt-card {
  padding: 0.75rem 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
.center-opt-wrapper .center-opt-card a {
  color: var(--333);
}
.center-opt-wrapper .center-opt-card:hover {
  background-color: var(--color);
}
.center-opt-wrapper .center-opt-card:hover a {
  color: white;
}

/* Contact us */
.contact-us-list li {
  margin-bottom: 0.5rem;
  transition-duration: 0s;
}
.contact-us-list li a {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  color: var(--fff);
  position: relative;
  overflow: hidden;
}
.contact-us-list li a u {
  flex: 1;
}
.contact-us-list li a span {
  font-size: 4rem;
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  color: var(--000-1);
}
.contact-us-list li a .contact-us-list-content {
  font-size: 0.8rem;
}
.contact-us-list li em {
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  background-color: var(--fff);
  border-radius: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

.contact-us-wrapper {
  color: var(--fff);
}

.btn-social {
  text-align: center;
  text-transform: capitalize;
  display: block;
  color: #fff !important;
  border-radius: 1rem;
  position: relative;
  padding: 0.75rem;
  font-size: 0.9rem;
  height: 100%;
}

.btn-telegram-blue {
  background-color: #08c !important;
}

.btn-wechat-green {
  background-color: #09b83e !important;
}

.btn-line-green {
  background-color: #00c300 !important;
}

.btn-mail-yellow {
  background-color: #ff4141 !important;
}

.btn-whatsapp-green {
  background-color: #25d366 !important;
}

.btn-zalo-blue {
  background-color: #00acd4 !important;
}

.btn-livechat-black,
.btn-livechat {
  background-color: #3a3a3a !important;
}

.btn-fb-blue {
  background-color: #29487d !important;
}

.btn-youtube-red {
  background-color: #cd201f !important;
}

.btn-instagram-blue {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-twitter-blue {
  background: linear-gradient(45deg, #1da1f2, #0d90e0);
}

.btn-skype-blue {
  background: linear-gradient(#88d9f8, #00aff0);
}

.btn-messenger-blue {
  background: linear-gradient(0deg, rgb(0, 120, 255) 15%, rgb(0, 198, 255) 90%);
}

.social-icon img {
  width: 30px;
  height: 30px;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-content {
  display: flex;
  align-items: center;
}

.social-content span {
  color: #fff !important;
  word-break: break-word;
}

.wrap-download .download-button-wrapper .download-button {
  background-color: var(--color);
}

/* Swiper */
.swiper-slide {
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.swiper-slide img {
  border-radius: 0.5rem;
}

/* MISC */
.news .btn,
.recommend-cont .btn {
  padding: 0.5rem;
}

.btn.btn-big {
  padding: 0.5rem;
}

.text-danger,
.err-msg {
  font-size: 0.9rem;
  color: red !important;
}

.err-msg-wrapper {
  color: #dc3545;
  width: 100%;
  height: 100%;
  background-color: var(--eee);
  text-align: center;
  font-size: 0.9rem;
  border-radius: 0.35rem;
  padding: 0.5rem;
}

.g-menu-wrapper space {
  display: none;
}

#afbSports2Modal .modal-content,
#afbSports2Modal .modal-body {
  color: var(--000);
}
#afbSports2Modal .afb-sport-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#afbSports2Modal .afb-sport-link span {
  color: var(--000);
}
#afbSports2Modal .btn-close-wrapper {
  display: flex;
  justify-content: center;
}
#afbSports2Modal .btn-close {
  padding: 0.5rem 2rem;
  background-color: var(--color);
  color: var(--fff);
  border-radius: 2rem;
}

#sportsNoticeModal .modal-dialog {
  justify-content: center;
  color: var(--000);
}
#sportsNoticeModal .modal-dialog .modal-content {
  width: 90%;
}
#sportsNoticeModal .btn-close-wrapper {
  position: absolute;
  top: -1rem;
  right: -1rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sportsNoticeModal .btn-close-wrapper .close {
  color: var(--666);
  opacity: 1;
}

.hot-icon {
  position: absolute !important;
  top: -5px;
  right: -15px;
  background-image: url(../../images/theme3/icons/hot-gif.gif);
  background-size: contain;
  background-position: right;
  z-index: 1;
  width: 100%;
  height: 50%;
  max-height: 2rem;
  max-width: 4rem;
}

.footer-fafabets-text {
  text-align: center;
}
.footer-fafabets-text a {
  font-weight: bold;
}

/*Custom*/
.night body {
  color: var(--fff);
  background-color: var(--000);
}
.night header {
  background-image: linear-gradient(to bottom, black, var(--333));
  box-shadow: none;
}
.night header .header-user-icon-wrapper {
  background-color: var(--333);
}
.night pop {
  background-color: rgba(40, 40, 40, 0.7);
}
.night footer,
.night pop.system-pop,
.night pop-sider,
.night pop-title,
.night pop-cont,
.night load {
  background-color: var(--333);
}
.night .popup-announcement-content {
  background-color: var(--333);
  color: var(--fff);
}
.night .announcement {
  background-color: var(--333);
}
.night .modal .modal-content {
  background-color: var(--333);
}
.night .modal button,
.night .modal .btn-close {
  color: var(--fff);
}
.night .usdt-payment-method-title {
  color: var(--fff) !important;
}
.night .list a {
  color: #0d0d0d;
}
.night .js-marquee,
.night .sports-notice-text,
.night pop-title .ico,
.night .wrap-download .download-content .download-text > * {
  color: var(--fff);
}
.night .user-nav li a,
.night .link li a,
.night .wrap-download,
.night .progressive-cont {
  background-color: #434343;
}
.night .center-opt-wrapper .center-opt-card {
  background-color: #434343;
}
.night .center-opt-wrapper .center-opt-card a {
  color: var(--fff);
}
.night .superiority-txt,
.night .superiority-list {
  color: #0d0d0d;
}
.night .footer-fafabets-text a {
  color: var(--fff);
}
.night #messageModal .modal-body span,
.night #messageModal .modal-body h5 {
  color: #fff !important;
}

/* Template Default color */
.peach .btn-blue {
  border-color: #639bff;
}

.peach[class*=template-] .btn-blue {
  border-color: var(--color);
}

.template-red .recommend,
.red .recommend {
  background-image: url(../../images/theme3/menu/red/recommend.jpg);
}

.template-purple .recommend,
.purple .recommend {
  background-image: url(../../images/theme3/menu/purple/recommend.jpg);
}

.template-blue .recommend,
.blue .recommend {
  background-image: url(../../images/theme3/menu/blue/recommend.jpg);
}

.template-green .recommend,
.green .recommend {
  background-image: url(../../images/theme3/menu/green/recommend.jpg);
}

.template-black .recommend {
  background-image: url(../../images/theme3/menu/peach/recommend.jpg);
}

.black .main.center .center-table th {
  color: var(--fff);
}

.nav-pills-vip .nav-item .nav-link {
  white-space: nowrap;
}

.nav-pills-vip .nav-item .nav-link.active {
  background-color: var(--color);
}

.vip-nav-item {
  position: relative;
}

.vip-content {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
}

.vip-content label {
  display: flex;
  align-items: center;
}

.vip-content label > * {
  color: #666;
  margin-right: 0.5rem;
  font-size: 2.2rem;
}

.float-link {
  position: fixed;
  left: 10px;
  z-index: 999;
}
.float-link.float-link-1 {
  bottom: 28%;
}
.float-link.float-link-2 {
  bottom: 18%;
}
.float-link.float-link-3 {
  bottom: 8%;
}
.float-link .btn-close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: -1rem;
  border-radius: 50%;
  background: #eee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' height='24' width='24' jsname='lZmugf'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E") center/1rem no-repeat;
}

.badge-message {
  position: absolute;
  top: -5px;
  right: -2px;
}

.bank-option {
  list-style: none;
  padding-left: 0;
}

.bank-option a {
  border: 2px solid transparent;
}

.bank-option a.active {
  border-color: var(--bs-white);
}

.center-basic td,
.main.center .turnover-item label span {
  color: var(--color);
}

.footer__section-menu {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
  padding-bottom: 60px;
}

.footer-menu {
  margin: 0;
  width: 100%;
}

.footer-menu__list {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
}

.footer-menu__item {
  padding: 5px 12px;
  position: relative;
}

.footer-menu__link {
  color: #b9c6d6;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  margin: 0;
  outline: none;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: capitalize;
  transition: color 0.3s ease;
  vertical-align: top;
  white-space: nowrap;
  width: 100%;
}

.recommend + section .col-12 table {
  border-collapse: collapse;
  width: 100%;
}
.recommend + section .col-12 table td {
  border: 1px solid #fff;
  text-align: center;
}

.footer-seo-btn-gaming {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ico-gaming {
  width: 51%;
}

/*mission*/
.ico-fluent-coin {
  background-image: url(../../images/855test/ico/coin_color.svg);
}

.mission li {
  margin-bottom: 1rem;
  transition-duration: 0s;
}

.mission li a {
  display: block;
  background-color: white;
  box-shadow: var(--shadow);
  border-radius: 0.5rem;
}

.mission-cont {
  display: flex;
  align-items: center;
  padding: 0.2rem 0;
  border-bottom-width: 1px;
}

.mission-cont em {
  margin: 0 0.3rem;
  width: 3rem;
  height: 3rem;
  display: block;
}

.mission-cont h5 {
  font-size: 1.15rem;
  flex: 1;
  text-transform: uppercase;
  color: #333 !important;
}

.mission-cont h5 span {
  font-size: 0.8rem;
  display: block;
  font-weight: normal;
  text-transform: capitalize;
  margin-top: 0.25rem;
}

.mission-info {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

.mission-info em {
  flex: 1;
  text-transform: capitalize;
  font-size: 0.8rem;
  color: #000;
}

.mission-info .progress {
  height: 0.5rem;
  width: 50%;
  display: flex;
  align-items: center;
}

.mission-info .progress .progress-bar {
  background-color: var(--color);
  height: 100%;
}

.mission-info span {
  margin-left: 0.25rem;
  font-size: 0.8rem;
}

.mission .progress {
  line-height: 1.5;
}
.mission .progress span {
  margin-left: 10px;
}
.mission .progress progress {
  width: 100%;
  flex: 1;
  margin-top: 10px;
}

.vip-lv-wrapper .vip-grade-title {
  text-align: center;
  padding: 0.1rem 0;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0.1rem 0.1rem 0.1rem var(--orange);
}

.vip-lv-wrapper .progress {
  height: 0.5rem;
  margin-bottom: 1rem;
}

.vip-lv-wrapper .progress-bar {
  background-color: var(--color);
}

.main-refresh-balance {
  height: 30px;
  margin-right: 5px;
  border: 1px solid orange;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  gap: 4px;
}

.main.earning-link {
  background-image: linear-gradient(180deg, #060d0b 0%, #0c0c0c 100%);
  padding-bottom: 30px;
}
.main.earning-link .separator {
  align-items: center;
  display: flex;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 20px;
  text-align: center;
  color: #fff;
}
.main.earning-link .separator:after,
.main.earning-link .separator:before {
  border-bottom: 1px solid #b7beab;
  content: "";
  flex: 1;
}
.main.earning-link .separator:not(:empty):before {
  margin-right: 0.65em;
}
.main.earning-link .separator:not(:empty):after {
  margin-left: 0.65em;
}
.main.earning-link .ico::before {
  display: block;
  content: "";
  width: 41px;
  height: 41px;
  margin: auto;
  background-size: contain;
  background-position: center;
}
.main.earning-link .ico.ico-facebook::before {
  background-image: url(../../images/icon/social/ico-facebook.png);
}
.main.earning-link .ico.ico-twitch::before {
  background-image: url(../../images/icon/social/ico-twitter.png);
}
.main.earning-link .ico.ico-whatapp::before {
  background-image: url(../../images/icon/social/ico-whatapp.png);
}
.main.earning-link .ico.ico-telegram::before {
  background-image: url(../../images/icon/social/ico-tele.png);
}
.main.earning-link .ico-line::before {
  background-image: url(../../images/icon/social/icon-line.png);
}
.main.earning-link .affiliate-header {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
  margin-top: 20px;
}
.main.earning-link .overview-subcontainer {
  background: var(--color);
  border-radius: 6px;
  flex-grow: 1;
  padding: 8px;
  margin: 0 5px;
}
.main.earning-link .overview-subcontainer p {
  font-size: 12px;
  color: #fff;
}
.main.earning-link .report-item {
  border-radius: 8px;
  color: #fff5eb;
  cursor: pointer;
  font-size: 14px;
  height: 44px;
  line-height: 40px;
  padding-left: 15px;
  position: relative;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.main.earning-link .report-item:hover {
  background-color: #1b3c31;
}
.main.earning-link .chevron-icon {
  float: right;
  position: absolute;
  right: 12px;
  scale: 1.5;
  top: 57%;
  transform: translateY(-50%);
}
.main.earning-link .ref_link_name input, .main.earning-link .ref_code_name input {
  font-size: 12px;
  background-color: var(--color) !important;
  border: 2px var(--color) solid;
  border-radius: 6px;
  color: #fff5eb !important;
  height: 44px;
}
.main.earning-link .overview-container-2 #incomeLinkAffiliate,
.main.earning-link .overview-container-2 #memberLinkAffiliate {
  --text-primary: #fff;
}
.main.earning-link .referral-link p {
  color: #fff;
  font-size: 12px;
}
.main.earning-link ul li {
  list-style-type: none;
}

.usdt-payment-wrapper .btn.usdt-payment-button.active {
  border: 1px solid var(--red);
}
.usdt-payment-wrapper .btn.usdt-payment-button .crypto_name {
  font-size: 14px;
}

.modal-open .popup-banner-wrapper {
  z-index: 1050;
}

#registerModal .register-option {
  display: none;
}

#registerModal .register-option.active {
  display: block;
}

#one-click-form .icon {
  width: 25px;
  height: 16px;
  position: absolute;
  left: 25px;
}

.signin-content-v3 .form-check-inline label {
  font-size: 14px;
}
#one-click-form .country-select {
  width: 100%;
}/*# sourceMappingURL=styles.min.css.map */