@charset "UTF-8";
@import "fontawesome.min.css";
@import "simplebar.min.css";
@import "sweetalert.min.css";

a,a:hover,a:focus,a:active{cursor:pointer}
a:hover,a:focus,a:active{color:#4b73e7}
.nav-pills .nav-link{background:#00ffff;margin-right:4px}
.form-select.server:first-child{border-radius:20px 0 0 20px}
.form-select.type:last-child{border-radius:0 20px 20px 0;border-left:0}
.d-flex-start-center{display:flex;justify-content:flex-start;align-items:center}
.d-flex-between-center{display:flex;justify-content:space-between;align-items:center}
.d-flex-center-center{display:flex;justify-content:center;align-items:center}
.sidebar-link .icon-wrapper{display:inline-block;width:24px;text-align:center}
.menu-text{line-height:1}
#master-qr-info{display:none}
.bg-item{background-image:url(../img/bg2.jpg);background-size:cover;background-repeat:no-repeat}
.bg-main{background-image:url(../img/bg4.jpg);background-size:cover;background-repeat:no-repeat}
.bg-character{background-image:url(../img/bg1.png);background-size:cover;background-repeat:no-repeat;background-position:center}
#confirm-convert-coin{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.63)}
#confirm-convert-coin .confirm-modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:500px}
#confirm-convert-coin .confirm-modal-header{display:flex;justify-content:space-between;align-items:center}
#confirm-convert-coin .confirm-modal-header h2{margin:0}
#confirm-convert-coin .confirm-modal-header .close{cursor:pointer}
#confirm-convert-coin .confirm-modal-body p{margin:0}
#confirm-convert-coin .confirm-modal-footer{margin-top:20px;text-align:right}
#confirm-convert-coin .confirm-modal-footer button{padding:10px 20px;margin-left:10px;cursor:pointer}
#btn-cc-coin{background-color:#0a58ca;color:#fff}
#captcha_img{cursor:pointer}
.logo-img{padding-top:20px}
.notify{color:#343a40;font-size:15px;background-color:#f28a1a33;padding:5px;border-radius:5px}
.news img{width:35%}
.news h3{font-size:17px}
.news p{font-size:14px}
.news b,.news strong{font-weight:600}
.dt-container div.dt-layout-table>div,.row .dt-layout-start,.row .dt-layout-end{padding:0}
table.dataTable th.dt-type-numeric,table.dataTable td.dt-type-numeric{text-align:center}
.form-label{margin-bottom:0.25rem}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* Character */
.island-1{position:relative!important;right:0;left:0;bottom:-124px;top:40%}
.island-2{position:relative!important;right:0;left:0;bottom:-58px;top:25%}
.island-3{position:relative!important;right:0;left:0;bottom:-100px;top:40%}
.island-character-1{margin-top:20px;width:300px;-webkit-animation:up 1s infinite alternate;animation:up 1.2s infinite alternate}
.island-character-2{margin-top:100px;width:300px;-webkit-animation:up 1s infinite alternate;animation:up 1.1s infinite alternate}
.island-character-3{margin-top:80px;width:300px;-webkit-animation:up 1s infinite alternate;animation:up 1.3s infinite alternate}
.island-character-2 img{position:absolute}
.island-character-1 img{position:absolute}
.island-character-3 img{position:absolute}
.head-character-1{margin-top:-17%;right:0;z-index:6}
.hair-character-1{margin-top:-17%;right:0;z-index:4}
.face-character-1{position:absolute;margin-top:-16.8%!important;right:29%;z-index:2;width:165px;height:250px;background-image:url(https://res.gn.zing.vn/image/equip/f/face/default/1/show.png);margin:0 auto;-webkit-animation:moveXFace 10s steps(16) infinite;-moz-animation:moveXFace 10s steps(8) infinite;-o-animation:moveXFace 10s steps(8) infinite;animation:moveXFace 10s steps(8) infinite}
.cloth-character-1{margin-top:-17%;right:0;z-index:5}
.head-character-2{margin-top:-39%;right:0;z-index:6}
.hair-character-2{margin-top:-39%;right:0;z-index:4}
.face-character-2{position:absolute;margin-top:-38.8%!important;right:29%;z-index:2;width:165px;height:250px;background-image:url(https://res.gn.zing.vn/image/equip/f/face/default/1/show.png);margin:0 auto;-webkit-animation:moveXFace 10s steps(16) infinite;-moz-animation:moveXFace 10s steps(8) infinite;-o-animation:moveXFace 10s steps(8) infinite;animation:moveXFace 10s steps(8) infinite}
.cloth-character-2{margin-top:-39%;right:0;z-index:5}
.head-character-3{margin-top:-28%;right:0;z-index:6}
.hair-character-3{margin-top:-25%;right:0;z-index:4}
.face-character-3{position:absolute;margin-top:-24.8%!important;right:29%;z-index:2;width:165px;height:250px;background-image:url(https://res.gn.zing.vn/image/equip/f/face/default/1/show.png);margin:0 auto;-webkit-animation:moveXFace 10s steps(16) infinite;-moz-animation:moveXFace 10s steps(8) infinite;-o-animation:moveXFace 10s steps(8) infinite;animation:moveXFace 10s steps(8) infinite}
.cloth-character-3{margin-top:-25%;right:0;z-index:5}
.name-character-1 h2{font-size:1.3rem;position:absolute;margin-top:-50px;left:20%;color:#ffec88;text-shadow:2px 0 0 #913b18,-2px 0 0 #913b18,0 2px 0 #913b18,0 -2px 0 #913b18,2px 2px #913b18,-2px -2px 0 #913b18,2px -2px 0 #913b18,-2px 2px 0 #913b18}
.name-character-2 h2{font-size:1.3rem;position:absolute;margin-top:-130px;left:32%;color:#ffec88;text-shadow:2px 0 0 #913b18,-2px 0 0 #913b18,0 2px 0 #913b18,0 -2px 0 #913b18,2px 2px #913b18,-2px -2px 0 #913b18,2px -2px 0 #913b18,-2px 2px 0 #913b18}
.name-character-3 h2{font-size:1.3rem;position:absolute;margin-top:-90px;left:35%;color:#ffec88;text-shadow:2px 0 0 #913b18,-2px 0 0 #913b18,0 2px 0 #913b18,0 -2px 0 #913b18,2px 2px #913b18,-2px -2px 0 #913b18,2px -2px 0 #913b18,-2px 2px 0 #913b18}
@-webkit-keyframes up {
0%{transform:scale(0.75) translateY(0)}
100%{transform:scale(0.75) translateY(-5px)}
}
@keyframes up {
0%{transform:scale(0.75) translateY(0)}
100%{transform:scale(0.75) translateY(-5px)}
}
@-webkit-keyframes moveXFace {
from{background-position-x:2000px}
to{background-position-x:-2000px}
}
@-moz-keyframes moveXFace {
from{background-position-x:2000px}
to{background-position-x:-2000px}
}
@-o-keyframes moveXFace {
from{background-position-x:2000px}
to{background-position-x:-2000px}
}
@keyframes moveXFace {
from{background-position-x:2000px}
to{background-position-x:-2000px}
}
@supports not (display: grid) {
.island-1{position:relative!important;right:0!important;left:0!important;bottom:-124px!important;top:40%!important}
.island-2{position:relative!important;right:0!important;left:0!important;bottom:-58px!important;top:25%!important}
.island-3{position:relative!important;right:0!important;left:0!important;bottom:-100px!important;top:40%!important}
}