/* 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";
}

.turnplate canvas {
  transition-duration: unset !important;
}

/* basic */
body {
  background-image: url(../../images/855test/background/bg-white.jpg);
}

.avatar {
  background-color: var(--333);
}

/* color */
:root {
  --color: #4833D2;
  --color-lg: linear-gradient(to bottom,#5A42FC,#2E19B2);
  --orange: #FFC557;
  --orange-lg: linear-gradient(to bottom,#FFD563,#FF8F34);
  --orange-fafa2u: #fb0;
  --orange-fafa2u-lg: linear-gradient(to bottom,#ec8100,#ec8100);
  --light-lg: linear-gradient(to bottom,#E1E3EC,#FFFFFF);
  --shadow: 0 3px 6px var(--000-1);
  --pink: #FFDBE9;
  --dark-purple: #4B0150;
  --diamond-blue: #149ae9;
  --custom-blue: #2e6efd;
  --sky-blue: #2d8ad2;
  --turquoise: #1ecbe1;
  --turquoise-lg: linear-gradient(to bottom, #00f3de, #010914) !important;
  --custom-gold: #d8af00;
  --custom-yellow: #fe0;
  --custom-gold-fafabong: #d7b34a;
  --custom-gold-fafabong-lg: linear-gradient(to bottom, #c78e00d1, #d8af0087);
}

/* ico */
.ico-fluent-1st {
  background-image: url(../../images/855test/ico/1st_place_medal_color.svg);
}

.ico-fluent-2nd {
  background-image: url(../../images/855test/ico/2nd_place_medal_color.svg);
}

.ico-fluent-3rd {
  background-image: url(../../images/855test/ico/3rd_place_medal_color.svg);
}

.ico-fluent-anguished {
  background-image: url(../../images/855test/ico/anguished_face_color.svg);
}

.ico-fluent-backhand {
  background-image: url(../../images/855test/ico/backhand_index_pointing_left_color_default.svg);
}

.ico-fluent-basketball {
  background-image: url(../../images/855test/ico/basketball_color.svg);
}

.ico-fluent-beaming {
  background-image: url(../../images/855test/ico/beaming_face_with_smiling_eyes_color.svg);
}

.ico-fluent-boy {
  background-image: url(../../images/855test/ico/boy_color_default.svg);
}

.ico-fluent-cardfile {
  background-image: url(../../images/855test/ico/card_file_box_color.svg);
}

.ico-fluent-carddivider {
  background-image: url(../../images/855test/ico/card_index_dividers_color.svg);
}

.ico-fluent-clapping {
  background-image: url(../../images/855test/ico/clapping_hands_color_default.svg);
}

.ico-fluent-club {
  background-image: url(../../images/855test/ico/club_suit_color.svg);
}

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

.ico-fluent-confetti {
  background-image: url(../../images/855test/ico/confetti_ball_color.svg);
}

.ico-fluent-crown {
  background-image: url(../../images/855test/ico/crown_color.svg);
}

.ico-fluent-diamond {
  background-image: url(../../images/855test/ico/diamond_suit_color.svg);
}

.ico-fluent-dollar {
  background-image: url(../../images/855test/ico/dollar_banknote_color.svg);
}

.ico-fluent-euro {
  background-image: url(../../images/855test/ico/euro_banknote_color.svg);
}

.ico-fluent-fire {
  background-image: url(../../images/855test/ico/fire_color.svg);
}

.ico-fluent-disc {
  background-image: url(../../images/855test/ico/flying_disc_color.svg);
}

.ico-fluent-die {
  background-image: url(../../images/855test/ico/game_die_color.svg);
}

.ico-fluent-handshake {
  background-image: url(../../images/855test/ico/handshake_color.svg);
}

.ico-fluent-hearton {
  background-image: url(../../images/855test/ico/heart_on_fire_color.svg);
}

.ico-fluent-heartsuit {
  background-image: url(../../images/855test/ico/heart_suit_color.svg);
}

.ico-fluent-heartwith {
  background-image: url(../../images/855test/ico/heart_with_ribbon_color.svg);
}

.ico-fluent-joystick {
  background-image: url(../../images/855test/ico/joystick_color.svg);
}

.ico-fluent-key {
  background-image: url(../../images/855test/ico/key_color.svg);
}

.ico-fluent-label {
  background-image: url(../../images/855test/ico/label_color.svg);
}

.ico-fluent-ledger {
  background-image: url(../../images/855test/ico/ledger_color.svg);
}

.ico-fluent-bulb {
  background-image: url(../../images/855test/ico/light_bulb_color.svg);
}

.ico-fluent-locked {
  background-image: url(../../images/855test/ico/locked_color.svg);
}

.ico-fluent-lockedkey {
  background-image: url(../../images/855test/ico/locked_with_key_color.svg);
}

.ico-fluent-megaphone {
  background-image: url(../../images/855test/ico/megaphone_color.svg);
}

.ico-fluent-bag {
  background-image: url(../../images/855test/ico/money_bag_color.svg);
}

.ico-fluent-money {
  background-image: url(../../images/855test/ico/money_with_wings_color.svg);
}

.ico-fluent-orangeheart {
  background-image: url(../../images/855test/ico/orange_heart_color.svg);
}

.ico-fluent-popper {
  background-image: url(../../images/855test/ico/party_popper_color.svg);
}

.ico-fluent-partying {
  background-image: url(../../images/855test/ico/partying_face_color.svg);
}

.ico-fluent-pencil {
  background-image: url(../../images/855test/ico/pencil_color.svg);
}

.ico-fluent-pool {
  background-image: url(../../images/855test/ico/pool_8_ball_color.svg);
}

.ico-fluent-pound {
  background-image: url(../../images/855test/ico/pound_banknote_color.svg);
}

.ico-fluent-ribbon {
  background-image: url(../../images/855test/ico/ribbon_color.svg);
}

.ico-fluent-ring {
  background-image: url(../../images/855test/ico/ring_buoy_color.svg);
}

.ico-fluent-scroll {
  background-image: url(../../images/855test/ico/scroll_color.svg);
}

.ico-fluent-slot {
  background-image: url(../../images/855test/ico/slot_machine_color.svg);
}

.ico-fluent-soccer {
  background-image: url(../../images/855test/ico/soccer_ball_color.svg);
}

.ico-fluent-softball {
  background-image: url(../../images/855test/ico/softball_color.svg);
}

.ico-fluent-spade {
  background-image: url(../../images/855test/ico/spade_suit_color.svg);
}

.ico-fluent-sparkling {
  background-image: url(../../images/855test/ico/sparkling_heart_color.svg);
}

.ico-fluent-starstruck {
  background-image: url(../../images/855test/ico/star-struck_color.svg);
}

.ico-fluent-telephone {
  background-image: url(../../images/855test/ico/telephone_receiver_color.svg);
}

.ico-fluent-thumbsdown {
  background-image: url(../../images/855test/ico/thumbs_down_color_default.svg);
}

.ico-fluent-thumbsup {
  background-image: url(../../images/855test/ico/thumbs_up_color_default.svg);
}

.ico-fluent-ticket {
  background-image: url(../../images/855test/ico/ticket_color.svg);
}

.ico-fluent-fish {
  background-image: url(../../images/855test/ico/tropical_fish_color.svg);
}

.ico-fluent-crescent {
  background-image: url(../../images/855test/ico/waning_crescent_moon_color.svg);
}

.ico-fluent-gibbous {
  background-image: url(../../images/855test/ico/waning_gibbous_moon_color.svg);
}

.ico-fluent-woman {
  background-image: url(../../images/855test/ico/woman_red_hair_color_default.svg);
}

.ico-fluent-gift {
  background-image: url(../../images/855test/ico/wrapped_gift_color.svg);
}

.ico-fluent-yen {
  background-image: url(../../images/855test/ico/yen_banknote_color.svg);
}

.ico-fluent-poker {
  background-image: url(../../images/855test/ico/poker.svg);
}

.ico-fluent-lottery {
  background-image: url(../../images/855test/ico/lottery.svg);
}

.ico-fluent-number {
  background-image: url(../../images/855test/ico/number.svg);
}

.ico-fluent-cockfight {
  background-image: url(../../images/855test/ico/cockfight.svg);
}

.ico-fluent-login {
  background-image: url(../../images/855test/ico/login.png);
}

.ico-fluent-register {
  background-image: url(../../images/855test/ico/signup.png);
}

.ico-lang-america {
  background-image: url(../../images/855test/lang/america.svg);
}

.ico-lang-ar {
  background-image: url(../../images/855test/lang/arab.svg);
}

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

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

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

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

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

.ico-lang-en {
  background-image: url(../../images/855test/lang/english.svg);
}

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

.ico-lang-gr {
  background-image: url(../../images/855test/lang/germany.svg);
}

.ico-lang-tw {
  background-image: url(../../images/855test/lang/hongkong.svg);
}

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

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

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

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

.ico-lang-kurdistan {
  background-image: url(../../images/855test/lang/kurdistan.svg);
}

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

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

.ico-lang-or {
  background-image: url(../../images/855test/lang/portugal.svg);
}

.ico-lang-republika {
  background-image: url(../../images/855test/lang/republika.svg);
}

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

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

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

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

/* frame */
.contant {
  min-width: 0;
  flex: 1;
  height: 100%;
  overflow: auto;
}

.item {
  display: none;
}

.item.active {
  display: block;
}

.subject {
  margin-bottom: 60px;
}

.clause {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  animation-delay: 0.5s;
  display: flex;
}

/*sider*/
.sider {
  width: 250px;
  height: 100%;
  background-image: url(../../images/855test/sider.jpg);
  background-size: cover;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.sider-search {
  background-color: var(--222);
  padding: 0 10px;
  border-radius: 100px;
}

.sider-search input {
  height: 40px;
  color: var(--orange);
}

.sider-search a,
.sider-search button {
  color: var(--orange);
}

.sider-list {
  flex: 1;
  overflow: auto;
  padding-bottom: 200px;
}

.sider-list::-webkit-scrollbar {
  width: 0;
}

.sider-list li {
  margin: 10px 0;
  transition-duration: 0s;
  opacity: 0;
  float: none;
  text-align: left;
}

.sider-list li a {
  background-image: var(--light-lg);
  border-radius: 7px;
  padding: 10px;
  display: flex;
  align-items: center;
  position: relative;
}

.sider-list li a em {
  width: 0;
  height: 100%;
  background-image: var(--color-lg);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
}

.sider-list li a i {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  position: relative;
}

.sider-list li a h5 {
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sider-list li.active a em,
.sider-list li:hover a em {
  width: 100%;
}

.sider-list li.active a i,
.sider-list li:hover a i {
  transform: rotateY(180deg);
}

.sider-list li.active a h5,
.sider-list li:hover a h5 {
  color: white;
}

/*im*/
.im {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 210px;
  margin: 20px;
}

.im:hover {
  transform: translateY(-5px);
}

.im > img {
  width: 80%;
  margin: auto;
  display: block;
}

.im-cont {
  background-image: var(--color-lg);
  padding: 5px;
  transform: rotate(180deg);
  border-radius: 10px;
  display: block;
}

.im-cont .im-cont {
  border-radius: 5px;
  position: relative;
  padding: 10px 0 10px 60px;
}

.im-cont i {
  width: 80px;
  height: 80px;
  position: absolute;
  left: -25px;
  top: -15px;
}

.im-cont h5 {
  color: white;
}

.im-cont h6 {
  display: block;
  text-transform: uppercase;
  color: white;
}

/* pop */
pop-main {
  border-radius: 10px;
  max-width: 800px;
}

pop-cont {
  max-height: 70vh;
  overflow: auto;
}

/* btn */
.btn {
  border-radius: 0.5rem;
  background-color: var(--color);
  background-image: var(--color-lg);
  box-shadow: var(--shadow);
  font-weight: bold;
}

.btn-orange {
  background-image: var(--orange-lg);
}

.btn-flex {
  padding: 20px 0;
}

.btn-flex .btn {
  margin: 10px;
  flex: none;
  padding: 0 40px;
}

.btn-empty {
  background: none;
  border-width: 2px;
  border-radius: 100px;
}

/* head */
.head {
  height: 80px;
  background-image: var(--light-lg);
  box-shadow: 0 0 10px var(--000-1);
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

.head u {
  flex: 1;
}

.head-nav {
  display: flex;
}

.head-nav li {
  margin: 5px;
}

.head-nav li a {
  background-color: white;
  width: 70px;
  height: 70px;
  display: block;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
}

.head-nav li a i {
  width: 40px;
  height: 40px;
  display: inline-block;
}

.head-nav li a h6 {
  text-transform: uppercase;
  line-height: 100%;
}

.head-nav li a:hover {
  background-color: var(--color);
  color: white;
}

.head-cont {
  display: flex;
  align-items: center;
}

.head-cont a {
  text-transform: capitalize;
  color: white;
  margin: 5px;
  height: 40px;
  padding-left: 10px;
}

.head-cont a i {
  width: 30px;
  height: 40px;
  display: inline-block;
}

.head-user {
  display: flex;
  align-items: center;
}

.head-user .avatar {
  width: 60px;
  height: 60px;
  margin: 10px;
}

.head-bet {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: var(--333);
  border-radius: 100px;
}

.head-bet i {
  width: 30px;
  height: 30px;
  display: block;
  margin: 5px;
}

.head-bet h6 {
  color: var(--orange);
  width: 100px;
}

/*hop*/
hop {
  margin: 5px;
}

hop a {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

hop > a {
  background-color: white;
  border-radius: 100%;
}

hop > a:hover {
  transform: rotate(360deg);
}

hop a i {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 100%;
  margin: 5px;
}

hop-cont {
  width: 50px;
  top: 80px;
}

hop-cont a {
  border: 0;
}

hop-cont a:hover {
  background-color: var(--f7);
}

.color > a i {
  background-image: conic-gradient(at 50% 50%, var(--red) 0%, var(--orange) 25%, var(--green) 50%, var(--blue) 75%, var(--purple) 100%);
}

/*light*/
.light {
  height: 300px;
  position: relative;
}

.light cite {
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(to right, white, transparent);
  z-index: 1;
}

.light cite:last-child {
  right: 0;
  left: auto;
  transform: rotate(180deg);
}

.swiper-coverflow {
  animation-delay: 1s;
}

.swiper-coverflow {
  padding-bottom: 30px;
}

.swiper-coverflow .swiper-slide {
  border-radius: 10px;
  opacity: 0.5;
  transform: scale(0.95) !important;
}

.swiper-coverflow .swiper-slide-active {
  opacity: 1;
  transform: scale(1) !important;
}

.swiper-coverflow .swiper-slide img {
  border-radius: 10px;
}

/* list */
.list {
  overflow: inherit;
}

.list li {
  width: 25%;
  float: left;
  padding: 10px;
  border: 0;
  transition-duration: 0s;
  opacity: 0;
}

.list li a {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  background-color: white;
  box-shadow: var(--shadow);
}

.list li a em {
  height: 180px;
  display: block;
  background-size: cover;
  position: relative;
}

.list li a em i {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
}

.list li a h6 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.list li a:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px var(--color);
}

.list li a:hover h6 {
  background-color: var(--color);
  color: white;
}

.list li a:hover em i {
  transform: rotateY(180deg);
}

.list-many li {
  width: 16.66%;
}

.list-many li a em {
  height: 240px;
}

/* crumb */
.crumb {
  padding: 10px;
}

.crumb i {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.crumb marquee a {
  padding: 0 100px;
}

.crumb marquee a:hover {
  color: var(--color);
}

/*info*/
.info {
  display: flex;
  align-items: center;
  background-color: var(--color);
  padding: 20px;
  border-radius: 10px;
}

.info em {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 50px;
}

.info:hover em {
  transform: rotateY(180deg);
}

.info-cont {
  flex: 1;
  color: white;
}

.info-cont p {
  padding: 10px 0;
}

.info-bet {
  display: flex;
  padding: 0 30px 30px;
}

.info-bet i {
  width: 70px;
  height: 70px;
  display: block;
}

.info-bet i:hover {
  transform: translateY(-5px);
}

.info-more {
  position: absolute;
  right: 40px;
  bottom: 0;
  border-radius: 10px 10px 0 0;
}

.info-more i.ico {
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 10px 0 -5px;
}

.info-more:hover {
  transform: translate(10px, 0);
}

/* foot */
.foot {
  margin-top: 100px;
  background-color: white;
  border-top-width: 1px;
}

.foot-cont {
  display: flex;
  padding: 30px 0;
}

.foot-cont h4 {
  padding: 10px 5px;
  text-transform: uppercase;
}

.foot-cont ul {
  padding: 10px 0;
}

.foot-cont li {
  float: left;
  padding: 5px;
}

.foot-cont li a {
  box-shadow: var(--shadow);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot-cont li a:hover {
  transform: translateY(5px);
  opacity: 0.8;
}

.foot-partnerships {
  flex: 1;
}

.foot-partnerships li a {
  background-image: var(--light-lg);
  width: 70px;
  height: 70px;
}

.foot-partnerships li a img {
  max-width: 80%;
  max-height: 80%;
}

.foot-payment {
  flex: 1;
}

.foot-service li a {
  box-shadow: 0 0 0;
  display: block;
}

.foot-service li a i {
  width: 80px;
  height: 80px;
  border-width: 1px;
  display: block;
  border-radius: 10px;
  background-size: 70%;
}

.foot-service li a h6 {
  text-align: center;
  padding: 5px 0;
}

.foot-copy {
  height: 50px;
  background-color: var(--color);
  border-radius: 20px 20px 0 0;
  padding: 10px 0;
  position: relative;
}

.foot-copy span i {
  width: 50px;
  height: 50px;
  position: absolute;
}

.foot-copy span i:nth-child(1) {
  left: 20%;
  bottom: 30px;
  transform: rotate(-130deg);
}

.foot-copy span i:nth-child(2) {
  right: 15%;
  bottom: 30px;
}

.foot-copy span i:nth-child(3) {
  right: 3%;
  bottom: 10px;
}

.foot-copy span i:nth-child(4) {
  left: 3%;
  bottom: 10px;
}

.foot-copy p {
  text-transform: uppercase;
  color: white;
  text-align: center;
}

.foot-copy p a {
  color: white;
}

.foot-copy p a:hover {
  color: var(--orange);
}

/*discount*/
.discount {
  padding-bottom: 60px;
  display: none;
}

.discount li {
  margin: 20px 0;
  opacity: 0;
  transition-duration: 0s;
}

.discount li a {
  display: block;
}

.discount li a h5 {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 20px;
}

.discount li a h5 i {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.discount li a h5 span {
  flex: 1;
}

.discount li a h5 em {
  color: var(--orange);
  font-size: 20px;
  font-weight: normal;
}

.discount li a cite {
  width: 100%;
  height: 200px;
  background-size: cover;
  display: flex;
  align-items: center;
  font-size: 28px;
  color: white;
  border-radius: 10px;
  font-weight: bold;
  padding: 40px 300px 40px 40px;
}

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

.discount li a:hover cite {
  transform: translateY(5px);
}

.discount-pop pop-main {
  max-width: 1000px;
}

.discount-cont {
  padding: 20px;
}

.discount-cont cite {
  display: flex;
  align-items: center;
  background-size: cover;
  width: 100%;
  height: 140px;
  font-size: 22px;
  padding: 0 120px 0 20px;
  border-radius: 10px;
  color: white;
}

/*article*/
article,
article h1, article h2, article h3, article h4, article h5, article h6,
article p {
  padding: 10px 0;
}

article li {
  padding: 5px 0;
}

/*amount*/
.amount {
  padding: 20px 50px;
}

.sum-input {
  background-color: var(--f7);
  border-radius: 10px;
}

.sum-input {
  text-align: center;
  font-size: 42px;
  height: 90px;
  font-weight: bold;
  color: var(--orange);
}

.sum-input::-webkit-input-placeholder {
  color: var(--orange);
}

.sum-btn {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.sum-btn a {
  background-color: var(--f7);
  font-size: 18px;
  line-height: 50px;
  display: block;
  flex: 1;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

.sum-btn a:hover {
  background-color: var(--eee);
}

.sum-btn a:not(:last-child) {
  margin-right: 10px;
}

.sum-btn a.active {
  background-image: var(--orange-lg);
  color: white;
}

.amount-discount {
  overflow: hidden;
}

.amount-discount li {
  width: 33.33%;
  float: left;
  padding: 5px;
}

.amount-discount li a {
  background-color: var(--f7);
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  border: 2px var(--f7) solid;
}

.amount-discount li a i {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.amount-discount li a span {
  font-size: 16px;
  font-weight: bold;
}

.amount-discount li a span em {
  color: var(--orange);
  margin-right: 10px;
}

.amount-discount li a.active {
  border-color: var(--orange);
}

.amount-list li {
  border-bottom-width: 1px;
  padding: 10px 0;
  line-height: 200%;
  display: flex;
  align-items: center;
}

.amount-list li h6 {
  flex: 1;
}

.amount-list li span {
  font-weight: bold;
}

.amount-list li b {
  font-size: 30px;
  color: var(--orange);
}

.amount-bank {
  display: flex;
  align-items: center;
  background-color: var(--f7);
  padding: 20px;
}

.amount-bank i {
  width: 90px;
  border-radius: 90px;
  padding: 15px;
  background-color: var(--eee);
}

.amount-bank i img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}

.amount-bank h5 {
  flex: 1;
  padding: 0 20px;
}

.amount-bank h5 span {
  display: flex;
  font-size: 22px;
  color: var(--orange);
  font-weight: normal;
}

.amount-bank a {
  padding: 0 30px;
}

/*warning*/
.warning {
  background-color: var(--red);
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  margin: 20px 0;
}

/* title */
.title {
  padding: 20px 0;
}

/* page */
page {
  padding: 20px 0;
}

page .ico, page * {
  border-radius: 100px;
}

/* table */
/*user*/
.user-pop pop-main {
  max-width: 1000px;
}

.user {
  padding: 10px;
}

.user tab {
  display: flex;
}

.user tab tab-list {
  width: 200px;
  background-image: url(../../images/855test/sider.jpg);
  background-size: cover;
  border-radius: 10px;
  padding: 0 10px;
  margin-right: 10px;
}

.user tab tab-list li {
  margin: 10px 0;
  float: none;
}

.user tab tab-list li a {
  background-image: var(--light-lg);
  padding: 10px;
  border-radius: 7px;
  text-align: left;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  position: relative;
}

.user tab tab-list li a u {
  width: 0;
  height: 100%;
  background-image: var(--color-lg);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
}

.user tab tab-list li a i {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  position: relative;
}

.user tab tab-list li a span {
  position: relative;
}

.user tab tab-list li.active a u,
.user tab tab-list li:hover a u {
  width: 100%;
}

.user tab tab-list li.active a span,
.user tab tab-list li:hover a span {
  color: white;
}

.user tab tab-cont {
  padding: 10px;
  flex: 1;
  min-width: 0;
}

.user-info .avatar {
  width: 120px;
  height: 120px;
  margin: auto;
}

.user-info h4 {
  text-transform: inherit;
  text-align: center;
  padding: 10px 0;
  font-size: 26px;
  color: var(--orange);
  font-weight: normal;
}

.user-info input {
  text-align: center;
  font-size: 20px;
  background-color: var(--color);
  color: white;
  border-radius: 100px;
  width: 50%;
  margin: auto;
  display: block;
}

.user-tip {
  border-top-width: 1px;
  text-align: center;
  padding: 20px;
  margin-top: 50px;
}

.user-tip a {
  color: var(--orange);
}

.user-tip a:hover {
  text-decoration: underline;
}

.user-notice {
  padding: 50px 0;
}

.user-notice i {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto 50px;
  animation: emptyico 1s infinite linear;
}

.user-notice h3 {
  color: var(--ddd);
  font-weight: normal;
}

@keyframes emptyico {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}
.user-clip em {
  width: 120px;
  height: 120px;
  display: block;
  margin: auto;
}

.user-clip input {
  background-color: var(--f7);
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
}

/*mission*/
.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.25rem;
  flex: 1;
  text-transform: uppercase;
}

.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;
}

.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;
}

/*vip*/
.vip-wrapper li {
  transition-duration: 0s;
}

.vip-cont {
  padding: 0.2rem 0;
}

.vip-grade em {
  display: block;
  text-align: center;
}

.vip-grade .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-grade .progress {
  height: 0.5rem;
  margin-bottom: 1rem;
}

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

.vip-lv {
  position: relative;
}

.vip-lv li {
  background-color: white;
  border-radius: 0.5rem;
  padding: 0.25rem;
  margin: 0.25rem 0;
  border-width: 1px;
  display: flex;
  align-items: center;
}

.vip-lv li span {
  flex: 1;
  font-size: 0.9rem;
}

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

.vip-lv .vip-filled {
  background-color: var(--color);
}

.vip-lv .vip-filled span {
  color: var(--fff);
}

.vip-upgrade {
  padding: 0.2rem 0;
}

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

.vip-buy li span {
  text-transform: capitalize;
  max-width: 50%;
}

.vip-buy u {
  flex: 1;
}

.vip-buy b {
  padding: 0.5rem;
  border: 2px solid;
  color: var(--orange);
  text-transform: uppercase;
  margin-left: auto;
  text-align: center;
}

.vip-buy a {
  width: 100%;
  margin: 10px 0;
  color: var(--fff);
  padding: 0.25rem;
}

.vip-buy a:hover {
  color: var(--bbb);
}

.vip-list table {
  min-width: 7rem;
  overflow: auto;
}

.vip-list table thead th {
  border-bottom: 0;
}

.vip-list table thead td {
  white-space: nowrap;
}

.vip-list table .ico {
  font-size: 1.15rem;
}

.vip-list .table td, .vip-list .table th {
  padding: 0.5rem;
}

.vip-list h4 {
  text-align: center;
  padding: 0.2rem 0;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.vip-list td {
  width: 15%;
}

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

.vip-info fold tt {
  display: flex;
  padding: 0.1rem;
  cursor: pointer;
}

.vip-info fold tt h3 {
  flex: 1;
}

.vip-info fold tt .ico {
  font-size: 1.5rem;
  margin-left: auto;
  margin-right: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vip-info fold tt.active i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.vip-info aside {
  padding: 0 0.2rem;
}

.vip-info aside h5 {
  color: var(--orange);
}

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

.h1, h1 {
  font-size: 2.5rem;
}

.h2, h2 {
  font-size: 2rem;
}

.h3, h3 {
  font-size: 1.75rem;
}

.h4, h4 {
  font-size: 1.5rem;
}

.h5, h5 {
  font-size: 1.25rem;
}

.h6, h6 {
  font-size: 1rem;
}

i {
  font-size: 16px;
}

span {
  transition: unset;
}

.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: 80px;
  background-image: var(--light-lg);
  box-shadow: 0 0 10px var(--000-1);
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}
header.container-fluid {
  padding: 0.5rem;
}
header .header-wrapper {
  width: 100%;
  height: 100%;
}
header .header-left-wrapper .logo-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}
header .header-left-wrapper .logo-wrapper .logo {
  width: 100%;
  animation-delay: 0.5s;
  max-width: 9rem;
}
header .header-right-wrapper .row {
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
}
header .header-right-wrapper hop {
  margin: 0.25rem;
}
header .header-right-wrapper hop hop-cont {
  top: 2.5rem;
}
header .header-right-wrapper hop a {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .header-right-wrapper hop a i {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}
header .header-right-wrapper hop hop-cont, header .header-right-wrapper hop a {
  width: 2rem;
  height: 2rem;
}
header .header-right-wrapper .header-bal-info {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--333);
  border-radius: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin: 0.25rem;
  max-width: 30%;
}
header .header-right-wrapper .header-bal-info i {
  width: 2rem;
  height: 100%;
  display: flex;
  margin-right: 0.25rem;
}
header .header-right-wrapper .header-bal-info span {
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 0.8rem;
}
header .header-right-wrapper .header-user-icon-wrapper {
  background-color: #fff;
  border-radius: 100%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .header-right-wrapper .header-user-icon-wrapper.header-right-unauth {
  margin-left: 0.5rem;
}
header .header-right-wrapper .header-user-icon-wrapper .header-user-icon {
  width: 2.25rem;
  height: 2.25rem;
  background-image: url(../../images/855test/ico/boy_color_default.svg);
}

/* Announcement */
.announcement {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
}
.announcement i {
  margin-right: 0.25rem;
  width: 1.9rem;
  height: 1.9rem;
}
.announcement .marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-left: 0;
  opacity: 0;
}
.announcement .js-marquee {
  font-size: 0.8rem;
}

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

main {
  overflow: auto;
  height: 100%;
  animation-delay: 0.5s;
  padding-bottom: 80px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: unset;
}

.main-nav {
  background-color: rgb(51, 51, 51);
  padding: 0.5rem 0.25rem;
  border-radius: 0.25rem;
}
.main-nav .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  opacity: 0;
}
.main-nav .nav-link .nav-link-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.25rem;
  margin: 0.25rem;
  background-color: #fff;
  border-radius: 0.5rem;
  max-width: 4rem;
  width: 100%;
}
.main-nav .nav-link .nav-link-icon-wrapper i, .main-nav .nav-link .nav-link-icon-wrapper img {
  width: 2rem;
  height: 2rem;
}
.main-nav .nav-link.active .nav-link-icon-wrapper {
  background-color: var(--color);
}
.main-nav .nav-link span {
  font-size: 0.7rem;
  width: 100%;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 0.25rem;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Side Menu */
.side-menu-bg-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  top: 0;
  right: -150%;
  background-color: rgba(0, 0, 0, 0.1);
  transition: right 0.1s ease-in-out;
  -webkit-transition: right 0.1s ease-in-out;
}
.side-menu-bg-wrapper.active {
  right: 0;
  transition: right 0.1s ease-in-out;
  -webkit-transition: right 0.1s ease-in-out;
}

.side-menu-wrapper {
  width: 250px;
  right: -150%;
  top: 0;
  height: 100%;
  position: fixed;
  z-index: 100;
  background-image: url(../../images/855test/background/side-bg.jpg);
  background-size: cover;
  padding-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  transition: right 0.3s ease-in-out;
  -webkit-transition: right 0.3s ease-in-out;
}
.side-menu-wrapper.active {
  right: 0;
  transition: right 0.3s ease-in-out;
  -webkit-transition: right 0.3s ease-in-out;
}

.side-menu-header {
  border-bottom: 1px solid white;
}
.side-menu-header .side-menu-header-left p {
  padding-top: 0.25rem;
  padding-left: 0.5rem;
  font-size: 1.15rem;
  color: white;
}
.side-menu-header .side-menu-header-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-menu-header .side-menu-header-right i {
  font-size: 1rem;
  color: white;
  padding: 0.5rem 1rem;
}

.side-menu-body {
  padding: 0.25rem;
  margin-top: 0.5rem;
}
.side-menu-body .side-menu-user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding-bottom: 1rem;
}
.side-menu-body .side-menu-user-info .side-menu-user-avatar {
  width: 5rem;
  height: 5rem;
  background-color: var(--333);
  border-radius: 100%;
  padding: 1rem;
  background-image: url(../../images/855test/ico/boy_color_default.svg);
  background-size: 80%;
}
.side-menu-body .side-menu-user-info span {
  color: var(--orange);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.side-menu-body .side-menu-user-bal {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: var(--333);
  border-radius: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
}
.side-menu-body .side-menu-user-bal i {
  width: 3rem;
  height: 100%;
  display: flex;
}
.side-menu-body .side-menu-user-bal .user-balance {
  color: var(--orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 0.8rem;
  margin: 0.25rem;
}
.side-menu-body .side-menu-btn-wrapper {
  width: 100%;
  background-color: var(--fff);
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
}
.side-menu-body .side-menu-btn-wrapper a {
  display: flex;
  border-radius: 0.5rem;
  padding: 1rem 0.5rem;
}
.side-menu-body .side-menu-btn-wrapper a:hover, .side-menu-body .side-menu-btn-wrapper a .active {
  background-color: var(--color);
}
.side-menu-body .side-menu-btn-wrapper a:hover .side-menu-btn-title, .side-menu-body .side-menu-btn-wrapper a .active .side-menu-btn-title {
  color: white;
}
.side-menu-body .side-menu-btn-wrapper .side-menu-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-menu-body .side-menu-btn-wrapper .side-menu-btn-icon i {
  width: 2rem;
  height: 2rem;
}
.side-menu-body .side-menu-btn-wrapper .side-menu-btn-title {
  display: flex;
  align-items: center;
}
.side-menu-body .side-menu-btn-wrapper .side-menu-btn-title a {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: bold;
}

.footer-custom-card .card {
  background-color: var(--color);
}
.footer-custom-card .card p {
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.25;
  font-size: 0.9rem;
}
.footer-custom-card .card .col-3 div {
  display: flex;
  width: 100%;
  height: 100%;
}
.footer-custom-card .footer-custom-card-column {
  display: flex;
  flex-direction: column;
}
.footer-custom-card .footer-custom-card-column .ico-fluent-popper {
  min-width: 3rem;
  min-height: 3rem;
}
.footer-custom-card .footer-custom-card-content h1 {
  font-size: 1.8rem;
}
.footer-custom-card .footer-custom-card-content h2 {
  font-size: 1.6rem;
}
.footer-custom-card .footer-custom-card-content h3 {
  font-size: 1.5rem;
}
.footer-custom-card .footer-custom-card-content h4 {
  font-size: 1.2rem;
}
.footer-custom-card .footer-custom-card-content h5 {
  font-size: 1.05rem;
}
.footer-custom-card .footer-custom-card-content h6 {
  font-size: 0.9rem;
}
.footer-custom-card .footer-read-more-wrapper {
  display: flex;
  align-items: center;
  background-image: var(--orange-lg);
  position: absolute;
  bottom: -1px;
  right: 1rem;
  padding: 0.25rem 0.5rem;
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}
.footer-custom-card .footer-read-more-wrapper .d-flex {
  width: 1rem;
  height: 1rem;
}
.footer-custom-card .footer-read-more-wrapper a {
  font-size: 0.8rem;
  margin-left: 0.5rem;
  color: white;
}

.footer-brand-bank-section .footer-brand-title, .footer-brand-bank-section .footer-bank-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
.footer-brand-bank-section .footer-brand-img-wrapper {
  justify-content: center;
}
.footer-brand-bank-section .footer-brand-img-wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-brand-bank-section .footer-brand-img-wrapper .col {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-brand-bank-section .footer-brand-img-wrapper .col img {
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  max-width: 5rem;
  max-height: 5rem;
}
.footer-brand-bank-section .footer-bank-img-wrapper .col {
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-brand-bank-section .footer-brand-img-wrapper img, .footer-brand-bank-section .footer-bank-img-wrapper img {
  border-radius: 0.25rem;
  overflow: hidden;
}

.game-thumb {
  display: flex;
  flex-direction: column;
  border-radius: 0.25rem;
  overflow: hidden;
  background-color: white;
  box-shadow: var(--shadow);
  opacity: 0;
}
.game-thumb span {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.25rem;
  color: var(--333);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 65px;
  background-size: 100% 100%;
  background-image: url(../../images/855test/background/footer-bg.png);
}
@media (max-width: 375px) {
  footer {
    background-size: cover;
  }
}
footer .footer-nav {
  width: 100%;
  height: 100%;
}
footer .footer-nav ul {
  height: 100%;
  display: flex;
}
footer .footer-nav ul li {
  display: flex;
  flex-direction: column;
  width: 18%;
}
footer .footer-nav ul li.footer-home-wrapper {
  width: 28%;
}
footer .footer-nav ul li .footer-home-icon-wrapper {
  background-color: var(--color);
  z-index: 2;
  position: absolute;
  border-radius: 50%;
  top: -1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-origin: content-box;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0.25rem;
  -o-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
}
@media (max-width: 375px) {
  footer .footer-nav ul li .footer-home-icon-wrapper {
    width: 3.25rem;
    height: 3.25rem;
  }
}
footer .footer-nav ul li a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer .footer-nav ul li a i, footer .footer-nav ul li a .footer-icon {
  width: 1.4rem;
  height: 1.4rem;
}
footer .footer-nav ul li a span {
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

#loginForm .form-prepend {
  position: relative;
}
#loginForm .form-prepend .form-control {
  padding-left: 1.8rem;
}
#loginForm .form-prepend i {
  z-index: 1;
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 1rem;
  color: #495057;
}

.btn-login, .btn-register {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  text-transform: uppercase;
  background-color: var(--color);
  color: #fff;
  padding: 1rem;
  border-radius: 0.25rem;
  line-height: 1;
  height: unset;
  margin: 0 auto;
  width: 100%;
}

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

#registerForm #account_checkMsg {
  display: flex;
  align-items: center;
}
#registerForm fieldset .show-loader {
  position: relative;
  width: 2rem;
  height: 1rem;
  background-image: url(../../images/loader-transparent.gif);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Deposit */
.depo-with-title {
  text-align: center;
  font-weight: bold;
}

.custom-amount-wrapper input {
  color: rgb(246, 198, 103) !important;
  background-color: rgb(247, 247, 247);
  text-align: center;
  font-size: 1.25rem;
  height: 3rem;
  border-color: transparent;
}

.btn-depo-amt {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-depo-amt span {
  width: 100%;
  text-align: center;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: rgb(247, 247, 247);
}
.btn-depo-amt.active span {
  background-image: var(--orange-lg);
  color: white;
}

.modal.modal-slide-up {
  top: auto;
  right: auto;
  left: auto;
  bottom: 0;
  height: auto;
  max-height: 95%;
  overflow-y: hidden;
}
.modal.modal-slide-up .modal-dialog {
  margin: 0 auto;
  max-width: unset;
}
.modal.modal-slide-up .modal-title, .modal.modal-slide-up label {
  color: var(--333);
}
.modal.modal-slide-up .modal-dialog-scrollable {
  max-height: unset;
}
.modal.modal-slide-up .modal-dialog-scrollable .modal-content {
  max-height: unset;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.modal.modal-slide-up .modal-dialog-scrollable .modal-content .modal-body {
  max-height: calc(90vh - 80px - 65px);
  overflow-y: scroll;
}
.modal.modal-slide-up .modal-header .nav-pills {
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.modal.modal-slide-up .modal-header .nav-pills .nav-link {
  line-height: 2;
  max-width: 55%;
}
.modal.modal-slide-up .modal-header .nav-pills .nav-link span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  background-color: var(--333);
  color: var(--fff);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}
.modal.modal-slide-up .modal-header .nav-pills .nav-link.active span {
  background-color: var(--color);
}
.modal.modal-slide-up .center-table {
  overflow: auto;
  height: 100%;
  margin: 0;
}
.modal.modal-slide-up .center-table th {
  background-color: var(--color);
  color: var(--fff);
}
.modal.modal-slide-up .center-table th, .modal.modal-slide-up .center-table td {
  padding: 0 0.25rem;
  white-space: nowrap;
}
.modal.modal-slide-up .page.page-game li span {
  color: var(--000);
}

.modal.modal-slide-up.fade .modal-dialog {
  transform: translate3d(0, 100%, 0);
}

.modal.modal-slide-up.show .modal-dialog {
  transform: translate3d(0, 0, 0);
}

.copy-bank-details-wrapper {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  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);
}

.with-bank-details-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.with-bank-details {
  background-color: #f7f7f7;
  padding: 0.25rem;
  text-align: center;
  border-color: rgba(0, 0, 0, 0);
  border-radius: 0.15rem;
}
.with-bank-details span {
  word-break: break-word;
}

/* 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 .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;
}

/* 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 */
.contact-us-wrapper {
  color: #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;
}

.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-livechat-black, .btn-livechat {
  background-color: #3a3a3a !important;
}

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

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

.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;
}

#contactUsModal.modal.modal-slide-up .modal-content {
  border: none;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Text */
.bind-bank-text, .err-msg {
  font-size: 0.8rem;
  color: red !important;
}

.login-now-text-wrapper a {
  text-decoration: underline;
}
.login-now-text-wrapper a:hover {
  color: var(--333);
}

.err-msg-wrapper {
  border-radius: 0.25rem;
  padding: 0.5rem;
  color: white !important;
  background-color: red !important;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  select {
    background-size: 1rem;
  }
}
@media (max-width: 375px) {
  header .header-right-wrapper hop {
    margin: 0.15rem;
  }
  header .header-right-wrapper hop a i {
    width: 1.3rem;
    height: 1.3rem;
  }
  header .header-right-wrapper hop hop-cont, header .header-right-wrapper hop a {
    width: 1.8rem;
    height: 1.8rem;
  }
  header .header-right-wrapper .header-bal-info {
    height: 1.8rem;
  }
  header .header-right-wrapper .header-user-icon-wrapper {
    width: 2.55rem;
    height: 2.55rem;
  }
  header .header-right-wrapper .header-user-icon-wrapper .header-user-icon {
    width: 2.05rem;
    height: 2.05rem;
  }
}
.col-2-5 {
  flex: 0 0 20%;
  max-width: 20%;
}

.col-9-5 {
  flex: 0 0 80%;
  max-width: 80%;
}

.toastify.custom-toast {
  padding: 0.5rem;
}

#afbSports2Modal .afb-sport-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#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;
}
#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;
}

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

.g-menu {
  z-index: 2;
}

#featuredPopupRight {
  width: 100%;
  min-height: 200px;
  left: 200%;
  position: fixed;
  cursor: pointer;
  color: #808080;
  bottom: 85px;
  transition: left 0.5s ease 0s, opacity 0.4s ease 0s;
  transition-delay: 1s;
  z-index: 50;
}

.featured-popup-content {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 220px;
  background-color: white;
  border-radius: 0.25rem;
  height: auto;
  overflow: hidden;
  padding: 0 0 0.25rem 0.25rem;
}

.featured-popup-content h2 {
  color: #343434;
  font-size: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

.featured-popup-body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.featured-popup-body img {
  width: 100%;
  padding: 0.25rem;
}

.featured-popup-content .btn-featured-popup-close {
  background: #ccc;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--000);
  line-height: 2.25rem;
}

.featured-popup-body-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.featured-popup-body-detail h3 {
  font-size: 1rem;
  text-align: center;
  width: 100%;
}

.featured-winner-amount {
  text-align: center;
  width: 100%;
  color: red;
  font-size: 0.9rem;
}

.featured-winner-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.featured-winner-btn span {
  border-radius: 0.5rem;
  background-color: var(--color);
  padding: 0.25rem 0.5rem;
  color: var(--fff);
  text-transform: uppercase;
  font-size: 0.85rem;
}

.featured-active {
  transition-delay: 0.8s !important;
  left: 0px !important;
}

.lang-kh footer .footer-nav ul li:nth-child(1) {
  width: 19%;
}
.lang-kh footer .footer-nav ul li:nth-child(2) {
  width: 17%;
}
@media (max-width: 450px) {
  .lang-kh footer .footer-nav ul li a span {
    font-size: 0.75rem;
  }
}
@media (max-width: 400px) {
  .lang-kh footer .footer-nav ul li a span {
    font-size: 0.65rem;
  }
}
@media (max-width: 350px) {
  .lang-kh footer .footer-nav ul li a span {
    font-size: 0.6rem;
  }
}

.lang-vn footer .footer-nav ul li:nth-child(1) {
  width: 19.5%;
}
.lang-vn footer .footer-nav ul li:nth-child(2) {
  width: 17.5%;
}
@media (max-width: 450px) {
  .lang-vn footer .footer-nav ul li a span {
    font-size: 0.7rem;
  }
}
@media (max-width: 400px) {
  .lang-vn footer .footer-nav ul li a span {
    font-size: 0.6rem;
  }
}

/*night*/
.night body {
  background-image: url(../../images/855test/background/bg-black.jpg);
}

.night .head {
  background-image: linear-gradient(to bottom, black, var(--333));
}

/* .night .logo {background-image: url(../../images/855test/name-white.svg);} */
.night .head-nav li a {
  background-color: var(--333);
}

.night .head-nav li a:hover {
  background-color: var(--color);
}

.night .head-nav li a h6 {
  color: white;
  font-weight: normal;
}

.night hop > a {
  background-color: var(--333);
}

.night hop-cont a {
  background-color: var(--333);
}

.night hop-cont corner {
  border-bottom-color: var(--333);
}

.night .light cite {
  background-image: linear-gradient(to right, var(--222), transparent);
}

.night .list li a {
  background-color: var(--333);
}

.night .list li a h6 {
  color: white;
}

.night .foot {
  background-color: var(--222);
  border-width: 0;
}

.night .foot h4 {
  color: white;
}

.night .foot-service li a i {
  border-color: var(--333);
}

.night .foot-service li a h6 {
  color: var(--666);
  font-weight: normal;
}

.night .crumb marquee,
.night .crumb marquee a {
  color: white;
}

.night .discount li a h5 span {
  color: white;
}

/*Custom*/
.night body {
  color: var(--fff);
  background-color: var(--000);
}
.night .modal .modal-content {
  background-color: var(--333);
}
.night .modal button, .night .modal .btn-close {
  color: var(--fff);
}
.night .modal.modal-slide-up .modal-title, .night .modal.modal-slide-up label {
  color: var(--fff);
}
.night .modal.modal-slide-up .with-bank-details span {
  color: var(--333);
}
.night .list a {
  color: #0d0d0d;
}
.night header {
  background-image: linear-gradient(to bottom, black, var(--333));
}
.night header .header-user-icon-wrapper {
  background-color: var(--333);
}
.night .js-marquee, .night .sports-notice-text {
  color: var(--fff);
}
.night .main-nav .nav-link:not(.active) .nav-link-icon-wrapper {
  background-color: var(--333);
}
.night footer {
  background-image: url(../../images/855test/background/footer-bg-black.png);
  color: var(--fff);
}
.night footer span {
  color: var(--fff);
}
.night .footer-brand-title, .night .footer-bank-title, .night .register-wrapper-title {
  color: var(--fff);
}
.night #registerForm label {
  color: var(--fff);
}
.night .login-now-text-wrapper span, .night .login-now-text-wrapper a {
  color: var(--fff);
}
.night .login-now-text-wrapper a:hover {
  color: var(--fff);
}
.night .side-menu-body .side-menu-btn-wrapper a {
  display: flex;
  color: var(--333);
}
.night .side-menu-body .side-menu-btn-wrapper a:hover {
  color: var(--fff);
}

/*blue*/
.blue {
  --color: var(--custom-blue);
  --color-lg: linear-gradient(to bottom,var(--custom-blue),var(--custom-blue));
}

/*diamond-blue*/
.diamond-blue {
  --color: var(--diamond-blue);
  --color-lg: linear-gradient(to bottom, var(--diamond-blue), #49c3ea);
}

/*sky-blue*/
.sky-blue {
  --color: var(--sky-blue);
  --color-lg: linear-gradient(to bottom, #1c7aea, #478ceb) ;
}

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

/*green*/
.green {
  --color: var(--green);
  --color-lg: linear-gradient(to bottom,var(--green),#34be87);
}

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

/*custom-orange*/
.custom-orange {
  --color: var(--orange-fafa2u);
  --color-lg: var(--orange-fafa2u-lg);
}
.custom-orange header {
  background-image: var(--light-lg);
}
.custom-orange hop-cont a, .custom-orange hop > a {
  background-color: var(--fff);
}

/*red*/
.red {
  --color: var(--red);
  --color-lg: linear-gradient(to bottom,var(--red),#db1d33);
}

/*sapphire*/
.sapphire {
  --color: var(--sapphire);
  --color-lg: linear-gradient(to bottom,var(--sapphire),#453db4);
}

/*pink*/
.pink {
  --color: var(--pink);
  --color-lg: linear-gradient(to bottom, var(--pink), #FFB6C1);
}

/*dark-purple*/
.dark-purple {
  --color: var(--dark-purple);
  --color-lg: linear-gradient(to bottom, var(--dark-purple), #7a316e);
}

/*custom-gold*/
.custom-gold {
  --color: var(--custom-gold);
  --color-lg: var(--custom-gold-fafabong-lg);
}

/*custom-gold-fafabong */
.custom-gold-fafabong {
  --color: var(--custom-gold-fafabong);
  --color-lg: var(--custom-gold-fafabong-lg);
}

/*yellow*/
.yellow {
  --color: var(--custom-yellow);
  --color-lg: linear-gradient(to bottom, #fff934, #fff524);
}

.custom-orange .main-nav .nav-link.active .nav-link-icon-wrapper, .custom-orange .wrap-download .download-button-wrapper .download-button, .turquoise .main-nav .nav-link.active .nav-link-icon-wrapper, .turquoise .wrap-download .download-button-wrapper .download-button {
  background-image: var(--color-lg);
}
.custom-orange footer .footer-nav ul li .footer-home-icon-wrapper, .custom-orange .btn-login, .custom-orange .btn-register, .turquoise footer .footer-nav ul li .footer-home-icon-wrapper, .turquoise .btn-login, .turquoise .btn-register {
  background: var(--color-lg);
}

.light-font-theme .side-menu-body .side-menu-btn-wrapper a:hover .side-menu-btn-title, .light-font-theme .side-menu-body .side-menu-btn-wrapper a .active .side-menu-btn-title,
.light-font-theme .btn-login, .light-font-theme .btn-register, .light-font-theme .footer-custom-card .card p, .light-font-theme .option-switcher-tab.active span, .light-font-theme .center-opt-wrapper .center-opt-card:hover a,
.light-font-theme .wrap-download .download-button-wrapper .download-button {
  color: var(--333);
}

.fafa666th-theme .login-now-text-wrapper a {
  color: #007bff;
}
.fafa666th-theme .login-now-text-wrapper a:hover {
  color: #007bff;
}/*# sourceMappingURL=styles.css.map */