/* basic */
body,
load {background: var(--bg);}

/* color */
:root {
    --color: #E6C578;
    --bg: #26262C;
    --box: #30303A;
    --txt: #5E5E71;
}

/* ico */
.ico-1 {background-image: url(../theme/img/ico/1.svg);}
.ico-2 {background-image: url(../theme/img/ico/2.svg);}
.ico-3 {background-image: url(../theme/img/ico/3.svg);}
.ico-4 {background-image: url(../theme/img/ico/4.svg);}
.ico-5 {background-image: url(../theme/img/ico/5.svg);}
.ico-6 {background-image: url(../theme/img/ico/6.svg);}
.ico-7 {background-image: url(../theme/img/ico/7.svg);}
.ico-8 {background-image: url(../theme/img/ico/8.svg);}
.ico-9 {background-image: url(../theme/img/ico/9.svg);}
.ico-10 {background-image: url(../theme/img/ico/10.svg);}

.ico-vip-1 {background-image: url(../theme/img/vip/1.svg);}
.ico-vip-2 {background-image: url(../theme/img/vip/2.svg);}
.ico-vip-3 {background-image: url(../theme/img/vip/3.svg);}
.ico-vip-4 {background-image: url(../theme/img/vip/4.svg);}

.ico-lang-zh {background-image: url(../theme/img/lang/china.svg);}
.ico-lang-en {background-image: url(../theme/img/lang/english.svg);}
.ico-lang-fr {background-image: url(../theme/img/lang/france.svg);}
.ico-lang-sp {background-image: url(../theme/img/lang/spain.svg);}
.ico-lang-po {background-image: url(../theme/img/lang/portugal.svg);}
.ico-lang-ind {background-image: url(../theme/img/lang/indonesia.svg);}
.ico-lang-jp {background-image: url(../theme/img/lang/japan.svg);}
.ico-lang-kh {background-image: url(../theme/img/lang/korea.svg);}
.ico-lang-ml {background-image: url(../theme/img/lang/malaysia.svg);}

/* frame */
.group {}
.contant {padding: 0 .2rem;margin-bottom: .2rem;}
.sider {}
.item {padding: .2rem;background-color: var(--box);border-radius: .2rem;}
.subject {}
.clause {}
sup {font-weight: normal;padding-left: .05rem;}

/* btn */
.btn {font-size: .24rem;font-weight: bold;text-transform: capitalize;}
.btn-sml {height: .6rem;font-size: .18rem;font-weight: normal;border-radius: 1rem;}
.btn-submit {width: 100%;margin: .3rem auto;line-height: 100%;}

/* lang */
.lang[right] hop-cont {right: .2rem;}
.lang hop-cont a {display: flex;align-items: center;background-color: var(--box);border-block-color: var(--fff-1);}
.lang hop-cont a:hover {color: var(--color);}
.lang hop-cont i {width: .4rem;height: .4rem;display: block;border-radius: 100%;margin-right: .2rem;}

/* head */
.head {position: relative;z-index: 3;}
.head-cont {}
.logo {}

/* light */
.light {}
.light .swiper-button-next,
.light .swiper-button-prev {background-color: var(--color);color: white;border-radius: .05rem;}
.light .swiper-button-next {right: .2rem;bottom: .2rem;top: auto;}
.light .swiper-button-prev {right: .8rem;bottom: .2rem;top: auto;left: auto;}

/* barang */
.barang {}
.barang .swiper-slide {display: grid;grid-template-columns: 55% 1fr;grid-gap: .2rem;}
.barang .swiper-slide img {border-radius: .2rem;}

/* title */
.title {text-align: left;margin: .4rem 0;}
.title h3 {color: white;font-weight: lighter;text-transform: uppercase;font-size: .36rem;border-bottom: 1px var(--txt) solid;padding: .1rem 0;}
.title h3 z:first-child {color: var(--color);}

/* vip */
.vip {background-image: url(../theme/img/vip/vip.jpg);}
.vip cite {width: 2rem;display: block;float: right;margin: 0 .2rem -1rem;}
.vip ul {padding: 1rem 0;width: 100%;}
.vip li {width: 60%;float: left;position: relative;margin: -.5rem 0;}
.vip li i {width: .9rem;height: .9rem;display: block;float: right;}
.vip li aside {position: absolute;width: 100%;height: 100%;top: 0;left: 0;padding: 1.1rem .8rem 0 0;}
.vip li span {color: var(--txt);word-wrap: break-word;padding: .2rem;display: block;width: calc(100% - .9rem);text-align: right;}
.vip li span h5 {color: white;}

.vip li:nth-child(2n) {float: right;}
.vip li:nth-child(2n) em img {transform: rotate(180deg);}
.vip li:nth-child(2n) i {float: left;}
.vip li:nth-child(2n) aside {padding: 1.1rem 0 0 .8rem;}
.vip li:nth-child(2n) span {text-align: left;float: right;}

/* rank */
.rank {height: 4rem;overflow: hidden;position: relative;}
.rank li {background-color: var(--box);padding: .2rem;border-radius: .1rem;margin: .2rem 0;display: flex;}
.rank li span {flex: 1;text-align: center;color: white;}
.rank li span b {color: var(--red);}
.rank-scroll {animation: scroll 100s linear infinite;}
@keyframes scroll {
    0% {transform: translateY(0);}
    100% {transform: translateY(-100%);}
}

/* grab */
.grab {margin-bottom: .2rem;}
.grab-bg {margin-bottom: -2.2rem;}
.grab {background-color: var(--fff-9);position: relative;}
.grab-bet {text-align: center;padding: .1rem 0;border-bottom: 1px var(--333) solid;}
.grab-bet span {font-size: .2rem;padding: .1rem 0;}
.grab-bet h4 {font-size: .5rem;color: var(--color);padding: .1rem;}
.grab-bet sup {font-size: .18rem;}

.grab-done .item {background-image: url(../theme/img/win.jpg);height: 2.4rem;background-size: cover;}
.grab-done {text-align: center;}
.grab-done h5 {color: white;margin: .2rem 0;}
.grab-done h4 {color: white;margin: .2rem 0;font-size: .3rem;}
.grab-done b {color: var(--color);font-size: .36rem;}
.grab-done b sup {font-size: .18rem;}

/* data */
.data {}
.data ul {display: flex;align-items: center;padding: .3rem 0;}
.data ul li {flex: 1;min-width: 0;text-align: center;}
.data ul li span {text-transform: capitalize;padding: .1rem;font-size: .16rem;}
.data ul li h5 {font-size: .26rem;padding: .1rem;}
.data ul li sup {font-size: .14rem;}

/* stage */
.stage {}
.stage li {margin: .2rem 0;display: flex;align-items: center;}
.stage li em {width: .5rem;height: .5rem;border-radius: 100%;border: .03rem var(--color) solid;display: flex;justify-content: center;align-items: center;color: var(--color);font-size: .32rem;margin-right: .2rem;}
.stage li span {border-radius: .1rem;flex: 1;min-width: 0;color: white;}

/* user */
.user {background-image: url(../theme/img/user.jpg);height: 3.9rem;text-align: center;padding-top: .5rem;margin-bottom: -.4rem;}
.user .avatar {width: 1.3rem;height: 1.3rem;background-color: var(--bg);margin: auto;}
.user h5 {color: white;padding: .2rem 0;}
.user span {background-color: var(--box);color: var(--txt);padding: .05rem .1rem;border-right: 1rem;}
.user em {padding: .05rem .1rem;background-color: var(--color);color: white;}
.user-info {background-color: var(--fff-9);margin-bottom: .2rem;}
.user-blance {display: flex;align-items: center;}
.user-blance span {flex: 1;color: white;text-transform: capitalize;}
.user-blance b {color: var(--color);font-size: .24rem;padding: 0 .2rem;}
.user-blance a {margin-left: .1rem;}
.user-blance sup {font-size: .14rem;}

/* navigation */
.navigation {display: grid;grid-template-columns: repeat(4,1fr);}
.navigation li {}
.navigation li a {margin: .2rem 0;text-align: center;display: block;}
.navigation li a i {width: .5rem;height: .5rem;display: block;margin: auto;}
.navigation li a span {padding-top: .15rem;color: white;text-transform: capitalize;display: block;font-size: .16rem;}
.navigation li a i horn {width: .15rem;height: .15rem;border-radius: 100%;background-color: var(--red);padding: 0;}

/* customer */
.customer {background-image: url(../theme/img/customer.jpg);padding: 5rem .2rem 0;height: 7rem;background-size: cover;margin-bottom: -.5rem;}
.customer h3 {color: white;font-size: .5rem;font-weight: normal;}
.customer h3 z:first-child {font-weight: bold;color: var(--color);}
.customer-cont {color: white;margin-bottom: .2rem;}

/* switch */
.switch {display: flex;}
.switch li {flex: 1;}
.switch li a {height: .8rem;text-align: center;border-bottom: 2px transparent solid;display: flex;align-items: center;justify-content: center;text-transform: capitalize;color:white;font-size: .2rem;font-weight: bold;}
.switch li a.active {color: var(--color);border-bottom-color: var(--color);}

/* order */
.order {}
.order-group {margin: .2rem 0;}
.order-title {display: flex;align-items: center;}
.order-title span {flex: 1;}
.order-title em {border: 2px solid;border-radius: 1rem;padding: .05rem .1rem;}
.order-cont {display: flex;align-items: center;}
.order-cont em {width: 1.2rem;height: 1.2rem;display: block;border-radius: .05rem;margin-right: .2rem;border-radius: .1rem;overflow: hidden;}
.order-txt {flex: 1;}
.order-txt h5 {color: white;font-weight: normal;padding-bottom: .1rem;}
.order-txt ul {display: flex;align-items: center;}
.order-txt ul li {flex: 1;}
.order-txt ul li span {color: var(--txt);font-size: .16rem;}
.order-txt ul li b {color: var(--color);display: block;font-size: .24rem;}
.order-txt ul li sup {font-size: .16rem;}

.order-other {display: flex;align-items: center;font-size: .16rem;padding-top: .2rem;border-top: 1px var(--fff-1) solid;margin-top: .2rem;}
.order-other span {color: var(--txt);flex: 1;}
.order-other span h6 {color: white;font-weight: normal;}

.status[data-status="0"] { color: var(--color); }
.status[data-status="1"] { color: var(--green); }
.status[data-status="4"],
.status[data-status="5"] { color: var(--red); }

/* empty */
empty {color: var(--box);}

/* pagination */
.pagination {display: flex;align-items: center;justify-content: center;padding: .5rem 0;}
.pagination li {margin: .05rem;}
.pagination li span,
.pagination li a {width: .5rem;height: .5rem;display: flex;align-items: center;justify-content: center;background-color: var(--box);color: var(--txt);border-radius: .05rem;}
.pagination li.active span,
.pagination li.active a {background-color: var(--color);color: white;}

/* form */
.form {}
.form li {border-bottom-color: var(--fff-1);}
.form li .ico {color: var(--color);}
.form li input,
.form li select {color: white;}
.form li input::placeholder,
.form li select::placeholder {color: var(--txt);}
.form li input[type="checkbox"] {width: .3rem;height: .3rem;margin: .05rem;flex: none;}
.form li .code {line-height: 100%;}
.form li span,
.form li p {color: white;}
.form li b {color: var(--color);}
.form li button {}
.form h5 {color: var(--txt);font-size: .18rem;margin-top: .2rem;}

.qr {width: 2rem;height: 2rem;margin: .2rem auto;padding: .1rem;background-color: white;}

/* login */
.login {background-image: url(../theme/img/login.jpg);background-position: center top;}
.login-img {height: 5rem;}
.login-main {}
.login-title {padding: .2rem 0;font-size: .3rem;color: var(--color);font-weight: bold;text-align: center;}
.login-form {}
.login-other {padding: .4rem;width: 100%;}
.login-other a:not(.btn) {color: var(--color);font-size: .2rem;}

/* reminder */
reminder {background-color: var(--box);color: var(--txt);border: 0;padding: .2rem;}

/* detail */
.detail {}
.detail > li {margin: .2rem 0;display: flex;align-items: center;}
.detail > li aside {color: var(--txt);width: 2rem;}
.detail > li span {flex: 1;}
.detail > li em {width: .8rem;text-align: right;}
.detail > li b {color: var(--color);width: 2rem;text-align: right;}

/* article */
article {color: var(--txt);}
article a {color: var(--color);}
article h1,article h2,article h3,article h4,article h5,article h6 {color: white;margin: .2rem 0;}

/* message */
.message {}
.message li {margin: .2rem 0;}
.message em {color: var(--color);display: block;}
.message span {color: var(--txt);}
.message p {color: white;padding: .1rem 0;}

/* alert */
alert-main {background-color: var(--box);color: white;}
alert-cont {line-height: 200%;}

/* notice */
notice {}
notice marquee {}
notice .ico {}

/* pop */
pop {}
pop-main {}
pop-title {}
pop-title h3 {}
pop-title a {}
pop-cont {}
pop-solve {}

/* tab */
tab {}
tab-list {display: flex;}
.form tab-list li,
tab-list li {flex: 1;border: 0;}
tab-list li a {color: white;border-bottom: 2px transparent solid;width: 100%;height: .8rem;display: flex;align-items: center;justify-content: center;}
tab-list li.active {}
tab-list li.active a {color: var(--color);border-bottom-color: var(--color);}
tab-cont {}
tab-group {}

/* table */
.table {}
.table table {}
.table table tr {}
.table table td {}
.table table thead td {}
.table table tbody td {}

/* list */
.list {}
.list li {padding: .2rem 0;}
.list li:not(:last-child) {border-bottom: 1px var(--fff-1) solid;}
.list li a {display: flex;align-items: center;color: white;}
.list li span:first-child {flex: 1;text-transform: capitalize;}
.list li b {color: var(--color);}

/* step */
step {}
step ul {border-color: var(--color);}
step ul li i {background-color: var(--bg);}

/* nav */
nav {}
nav li {}
nav li a {color: var(--txt);}
nav li.active a {color: var(--color);}
nav li a span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 1;min-width: 0;}

/* name */
name {background-color: var(--bg);}
name h2 {color: white;}
name a {color: var(--color);}

name.transparent {background-color: transparent;margin-bottom: -.8rem;z-index: 3;}