@font-face {
  font-family: 'SFUSouvenirBold';
  src: url('./font/SFUSouvenirBold.TTF') format('truetype');
  font-weight: bold;
  font-style: normal;
}
* {
    font-family: "Roboto Slab", "sans-serif";
    font-size: 16px;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
#body {
    position: relative;
    width: 1920px;
    height: 980px;
    background: url("images/bg-2.jpg") top left no-repeat;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    display: flex;
    flex-wrap: nowrap;
}
.color-yellow {
    color: #fee53a;
}
.text-center {
    text-align: center;
}
/*text*/
.navbar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 70px;
    margin-top: 0;
    z-index: 2;
}
.navbar-container_item {
    margin-bottom: 6px;
}
#logo {
    position: relative;
    width: 228px;
    height: 194px;
    margin-bottom: 20px;
    display: block;
    margin: auto;
    margin-top: 30px;
}
#logo img {
    width: 100%;
}
#text-h1 {
    position: absolute;
    top: 765px;
    left: 755px;
    width: 409px;
    height: 54px;
}
#text-h2 {
    position: absolute;
    top: 815px;
    left: 627px;
    width: 652px;
    height: 75px;
}
#text-h1 img {
    width: 100%;
}
#text-h2 img {
    width: 100%;
}
/*menu*/
#menu {
    position: relative;
    list-style: none;
}
#menu li {
    float: left;
    margin: 1px 1px;
}
#menu li a {
    display: block;
    width: 110px;
    height: 35px;
    float: left;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    line-height: 35px;
    color: #fff;
    background: url("../images/bg-menu-min.png") top left no-repeat;
    background-size: 100% auto;
}
#menu li a:hover {
    background-position: bottom left;
}
/*menu-bot*/
.menu-bot-image {
    position: relative;
}
#menu-bot {
    position: relative;
    list-style: none;
    width: 337px;
    height: 99px;
    display: flex;
}
#menu-bot a {
    display: block;
    width: 112px;
    text-indent: -99999px;
    float: left;
    text-align: center;
    text-decoration: none;
}
#menu-bot a.rules {
    background: url("../images/menu-bot.png") top left;
}
#menu-bot a.spin {
    background: url("../images/menu-bot.png") top center;
}
#menu-bot a.gift-exchange {
    background: url("../images/menu-bot.png") top right;
}
#menu-bot a.rules:hover, #menu-bot a.rules.active {
    background-position: bottom left;
}
#menu-bot a.spin:hover, #menu-bot a.spin.active {
    background-position: bottom center;
}
#menu-bot a.gift-exchange:hover, #menu-bot a.gift-exchange.active {
    background-position: bottom right;
}
/*menu left*/
#menu-left {
    position: relative;
    flex-direction: column;
    list-style: none;
    display: flex;
    gap: 2px;
}
#menu-left::before {
    content: "";
    background: url(images/icon-menu-left-1.png);
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 33px;
}
#menu-left::after {
    content: "";
    background: url(images/icon-menu-left-2.png);
    position: absolute;
    bottom: -100px;
    left: 53%;
    transform: translateX(-50%);
    width: 75px;
    height: 116px;
}
#menu-left a {
    display: block;
    width: 261px;
    height: 74px;
    text-indent: -99999px;
    text-align: center;
    text-decoration: none;
    background: url(images/btn-menu-left.png) no-repeat;
}
#menu-left a.rules {
    background-position: left top;
}
#menu-left a.spin {
    background-position: left -74px;
}
#menu-left a.exchanges {
    background-position: left -148px;
}
#menu-left a.histories {
    background-position: left -222px;
}
#menu-left a.ranking {
    background-position: left bottom;
}
#menu-left a.rules:hover,
#menu-left a.rules.active {
    background-position: right top;
}
#menu-left a.spin:hover,
#menu-left a.spin.active {
    background-position: right -74px;
}
#menu-left a.exchanges:hover,
#menu-left a.exchanges.active {
    background-position: right -148px;
}
#menu-left a.histories:hover,
#menu-left a.histories.active {
    background-position: right -222px;
}
#menu-left a.ranking:hover,
#menu-left a.ranking.active {
    background-position: right bottom;
}
/*menu*/
#menu {
    position: absolute;
    list-style: none;
    left: 1648px;
    top: 674px;
    width: 165px;
    height: 174px;
    text-indent: -99999px;
}
#menu .wrap-menu {
    left: 107px;
    top: 2px;
    position: relative;
}
#menu .wrap-menu a {
    width: 166px;
    height: 42px;
    float: left;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
}
#menu .wrap-menu a.homepage {
    background: url("../images/menu-fixed.png") 0 1px;
}
#menu .wrap-menu a.fanpage {
    background: url("../images/menu-fixed.png") 0 -42px;
}
#menu .wrap-menu a.group {
    background: url("../images/menu-fixed.png") 0 -86px;
}
#menu .wrap-menu a.download {
    background: url("../images/menu-fixed.png") 0 -130px;
}
#menu .wrap-menu a.payment {
    background: url("../images/menu-fixed.png") 0 -173px;
}
#menu .wrap-menu a.homepage:hover {
    background-color: #000;
}
#menu .wrap-menu a.fanpage:hover {
    background-color: #000;
}
#menu .wrap-menu a.group:hover {
    background-color: #000;
}
#menu .wrap-menu a.download:hover {
    background-color: #000;
}
#menu .wrap-menu a.payment:hover {
    background-color: #000;
}
/*no login*/
#no-login {
    position: relative;
    width: 463px;
    height: 229px;
    background-image: url("../images/bg-login-min.png");
}
#user-info .user-info-wrap {
    position: relative;
    width: 463px;
    height: 229px;
    color: #d17b00;
    background: url(../images/bg-login-5.png) no-repeat;
    font-weight: 500;
    padding-top: 68px;
    padding-left: 70px;
    transform: translateY(-8px);
}
#user-info .user-info-wrap span {
    display: inline-block;
    color: #FFE630;
    font-size: 20px;
}
#user-info .user-info-wrap span.info {
    width: auto;
    color: #d17b00;
    margin-right: 12px;
}
#user-info .user-info-wrap span:nth-child(1) {
    color: #ffe4b1;
    font-size: 20px;
}
#user-info .user-info-wrap span.fullname-txt {
    color: #ffffff;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 11px;
    font-size: 20px;
}
#user-info .user-info-wrap>div {
    line-height: 26px;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 5px;
}
#user-info .user-info-wrap .reload {
    display: flex;
    align-items: center;
    margin-left: 18px;
    opacity: 0.6;
}
#user-info .user-info-wrap .reload:hover {
    opacity: 1;
}
#user-info .user-info-wrap .btn {
    display: block;
    position: absolute;
    width: 59px;
    height: 26px;
    top: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    line-height: 20px;
    background: #fcd919;
    border: 3px solid #000;
}
#user-info .user-info-wrap .btn.btn-share {
    top: 13px;
}
#user-info .user-info-wrap .btn:hover {
    background: #ffe450
}
#user-info .user-info-wrap .logout {
    position: absolute;
    top: 35px;
    right: 52px;
    color: #000;
    font-weight: 500;
    font-size: 20px;
    font-style: italic;
}
/*useful link*/
.useful-link {
    width: 218px;
    height: 161px;
    text-align: left;
    text-indent: -9999px;
    position: absolute;
    background: url("../images/bg-menu-2-min.png") no-repeat;
    background-size: 100% auto;
}
.useful-link-rule {
    top: 425px;
    left: 120px;
    background-position: 0px 0px;
}
.useful-link-rule:hover {
    background-position: 3px -322px;
}
.useful-link-play {
    top: 585px;
    left: 120px;
    background-position: 0px -158px;
}
.useful-link-play:hover {
    background-position: 3px -480px;
}
.useful-link-gift {
    top: 425px;
    left: 331px;
    background-position: 0px -646px;
}
.useful-link-gift:hover {
    background-position: 0px -968px;
}
.useful-link-history {
    top: 585px;
    left: 331px;
    background-position: 0px -805px;
}
.useful-link-history:hover {
    background-position: 0px -1127px;
}
/*main*/
#main {
    width: 900px;
    height: 100%;
    position: relative;
    background: url(images/bg-playgame-2.png) no-repeat 0 -5px / 100%;
    padding: 180px 72px 0px 72px;
    z-index: 5;
}
/*popup*/
.popup {
    z-index: 1001;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup.popup-update-profile {
    z-index: 1001;
}
.popup.popup-text {
    z-index: 1002;
}
.popup.popup-text .wrap {
    position: relative;
    width: 483px;
    height: 333px;
    margin: 0 auto;
    background: url("images/popup-notify-2.png") top left no-repeat;
}
.popup.popup-histories .wrap .close, .popup.popup-text .wrap .close, .popup.popup-update-profile .wrap .close {
    position: absolute;
    width: 55px;
    height: 55px;
    top: 0;
    right: 0;
    text-align: left;
    text-indent: -9999px;
}
.popup.popup-histories .wrap .close:hover, .popup.popup-text .wrap .close:hover {
    opacity: 1;
}
.popup.popup-histories .wrap .close {
    top: 0;
    right: 0;
}
.popup.popup-update-profile .wrap .close {
    top: 78px;
    left: 474px;
}
.popup.popup-text .wrap .content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 30px;
    padding: 30px 34px 10px 10px;
}
.popup.popup-text .wrap .content .title, .popup.popup-text .wrap .content .item, .popup.popup-text .wrap .content .item .item-num {
    font-size: 20px;
}
.item-num {
    color: #ff7900;
}
/*spin-wheel*/
.spin-wheel {
    margin-top: 56px;
    cursor: pointer;
    background-size: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.btn-play_list {
    display: flex;
    margin-left: -12px;
    margin-top: -63px;
    z-index: 2;
}
.btn-play_list .btn-play_item {
    width: 197px;
    height: 79px;
    display: block;
    background: url('images/btn-play-multi-2.png') no-repeat;
}
.btn-play_list .btn-play_item:nth-child(1) {
    background-position: left top;
}
.btn-play_list .btn-play_item:hover:nth-child(1) {
    background-position: left bottom;
}
.btn-play_list .btn-play_item:nth-child(2) {
    background-position: center top;
}
.btn-play_list .btn-play_item:hover:nth-child(2) {
    background-position: center bottom;
}
.btn-play_list .btn-play_item:nth-child(3) {
    background-position: right top;
}
.btn-play_list .btn-play_item:hover:nth-child(3) {
    background-position: right bottom;
}
/*exchange*/
.exchange {
    /* background: url(../images/bg-ex.png) no-repeat; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    margin-top: 0;
    margin-left: 0;
}
.exchange-description {
    margin-top: 44px;
    margin-bottom: 34px;
    color: #fff;
    font-size: 18px;
}
.exchange .gift-item .gift-info {
    position: relative;
    float: left;
    text-decoration: none;
    background: url("images/bg-gift-2.png") top center no-repeat;
    width: 117px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.exchange-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0;
}
.exchange .gift.off {
    filter: grayscale(0.9);
}
.exchange .gift-item .point {
    color: #fffcf4;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 24px;
    margin-top: 23px;
}
.exchange .gift-item:nth-child(1) .point {}
.exchange .gift-item .name {
    position: relative;
    color: #fff;
    text-shadow: 1px 1px 1px #18a0f4;
    position: relative;
    font-size: 14px;
    width: 110px;
}
.exchange .gift-item img {
    position: relative;
    line-height: 25px;
    text-align: center;
    width: 79px;
    height: 82px;
    margin-bottom: 0;
}
.exchange .gift-item .amount {
    position: relative;
    color: #ecdf42;
    font-weight: bold;
    display: block;
    letter-spacing: -1px;
    margin-top: 10px;
    font-size: 14px;
}
.exchange .gift-item .num-amount {
    font-size: 13px;
}
.exchange .gift-item .gift {
    position: relative;
    width: 147px;
    height: 47px;
    text-align: center;
    text-decoration: none;
    margin-top: 6px;
    background: url("images/btn-exgift-3.png") 0 0 no-repeat;
}
.exchange .gift-item .gift:hover {
    background: url("images/btn-exgift-3.png") center no-repeat;
}
.exchange .gift-item .gift span {
    display: block;
    border: 1px solid #000;
    margin: 2px;
    line-height: 24px;
    color: #c5c5c5;
    background: #414141;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 10px;
}
.exchange .gift-item.gift-item-long-text .gift span {
    line-height: 12px;
}
.exchange .gift-item.active .gift span {
    color: #00fff0;
    background: #08527d;
    border-radius: 12px;
}
.exchange .gift-item.active .gift:hover span {
    background: #0083b9;
}
.exchange .gift-item {
    width: 20%;
    height: 217px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.exchange .gift-item .gift.off,
.exchange .gift-item .gift.disabled {
    background-position: bottom;
}
/*history*/
.history {
    margin-top: 10px;
}
.tab {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-top: 75px;
}
.tab li {
    width: 290px;
    height: 62px;
    background: url("images/btn-tab-his-3.png") top left no-repeat;
    cursor: pointer;
}
.tab li:hover:nth-child(1), .tab li.active:nth-child(1) {
    background: url("images/btn-tab-his-3.png") bottom left no-repeat;
}
.tab li:nth-child(2) {
    background: url("images/btn-tab-his-3.png") top right no-repeat;
    transform: translateX(-15px);
}
.tab li:hover:nth-child(2), .tab li.active:nth-child(2) {
    background: url("images/btn-tab-his-3.png") bottom right no-repeat;
}
.tab li a {
    text-decoration: none;
    display: block;
    height: 100%;
}
.tab li h3 {
    display: block;
    height: 44px;
    line-height: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
}
.tab li.active, .tab li:hover {
    border-color: #864101;
}
.tab-content {
    display: none;
    width: 620px;
    height: 236px;
    margin: 0 auto;
    color: #fff;
}
.tab-content.active {
    display: block;
}
.tab-content table {
    width: 100%;
    text-align: center;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-spacing: 0;
    border-collapse: separate;
}
.tab-content table th, .tab-content table td {
    padding: 6px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    color: #fff;
}
.tab-content table thead tr:first-child {
    background-color: #3b0606;
}
.tab-content table thead tr:last-child {
    background-color: #6c0808;
}
.tab-content table thead tr:first-child th {
    color: #be5b5b;
    font-size: 21px;
}
.tab-content table thead tr:last-child th {
    color: #ff3000;
    font-size: 19px;
}
.mCSB_scrollTools a+.mCSB_draggerContainer {
    margin: 0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
    display: none !important;
}
/*rule*/
.rule-container {
    width: 100%;
    height: 100%;
    margin-top: 211px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title-the {
    width: 343px;
    height: 53px;
    background: url('../images/title-thele.png') top center no-repeat;
}
.rule {
    width: 569px;
    height: 391px;
    text-align: justify;
    color: #fffea0;
    position: relative;
    margin-top: 30px;
    background: url(../images/bg-thele.png) top center no-repeat;
    padding: 25px;
}
.rule h1, .rule h2, .rule h3, .rule h4, .rule h5, .rule h6 {
    color: #2f619a;
    margin-bottom: 10px;
}
.rule h1 {
    font-size: 20px;
}
.rule h2 {
    font-size: 19px;
}
.rule h3 {
    font-size: 18px;
}
.rule h4, .rule h5, .rule h6 {
    font-size: 16px;
}
.rule p, .rule div {
    margin-bottom: 10px;
}
/*popup update profile*/
.popup.popup-update-profile .wrap {
    position: relative;
    width: 583px;
    height: 573px;
}
.popup.popup-update-profile .wrap .content {
    width: 100%;
    height: 100%;
    padding: 184px 0 0 0;
    color: #fffac5;
    background: url(../images/bg-popup-info.png) center no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
}
.popup.popup-update-profile .wrap .content .form-control-submit input {
    width: 160px;
    height: 54px;
    background: url(../images/btn-confirm.png) top no-repeat;
    text-indent: -9999px;
    border: unset;
    outline: unset;
    cursor: pointer;
    margin-top: 20px;
}
.popup.popup-update-profile .wrap .content .form-control-submit input:hover {
    background: url(../images/btn-confirm.png) bottom no-repeat;
}
.popup.popup-histories .wrap {
    background-image: url('images/bg-history-3.png');
    position: relative;
    color: #ff8300;
    background-size: 100% auto;
    height: 100%;
    background-repeat: no-repeat;
    width: 762px;
    height: 467px;
    transform: translateY(-55px);
}
.popup.popup-histories .history-description {
    color: #fff;
    font-weight: bold;
}
.tab-wrap-content {
    position: relative;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 14px;
}
.popup.popup-histories .wrap .content h6, .popup.popup-update-profile .wrap .content h6 {
    margin-bottom: 15px;
}
.popup.popup-histories .wrap .content .form-control, .popup.popup-update-profile .wrap .content .form-control {
    height: 26px;
    margin-bottom: 28px;
}
.popup.popup-histories.wrap .content .form-control.form-control-note, .popup.popup-update-profile .wrap .content .form-control.form-control-note {
    margin-top: 20px;
    font-size: 14px;
    color: #cacaca;
}
.popup.popup-histories .wrap .content .form-control:after, .popup.popup-update-profile .wrap .content .form-control:after {
    content: "";
    display: block;
    clear: both;
}
.popup.popup-histories .wrap .content label, .popup.popup-update-profile .wrap .content label {
    line-height: 22px;
    width: 110px;
    display: inline-block;
    float: left;
    margin-top: 5px;
    color: #8b744d;
    font-weight: 600;
}
.popup.popup-update-profile .wrap .content .form-control>input[type=text] {
    float: left;
    width: 330px;
    padding: 6px 0 6px 6px;
    background: #3f3118;
    font-size: 16px;
    color: #c3c3c3;
    border: 0px;
    border: 2px solid #54462e;
    border-radius: 0;
}
.popup.popup-histories .wrap .content .select2-container, .popup.popup-update-profile .wrap .content .select2-container {
    width: 330px !important;
}
.popup.popup-histories .wrap .content .select2-container--default .select2-selection--single, .popup.popup-update-profile .wrap .content .select2-container--default .select2-selection--single {
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #224a6b;
    border-radius: 0;
}
.popup.popup-histories .wrap .content .select2-container .select2-selection--single .select2-selection__rendered, .popup.popup-update-profile .wrap .content .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0px;
    color: #6090b7;
}
.popup.popup-histories .wrap .content .select2-container--default .select2-selection--single .select2-selection__arrow b, .popup.popup-update-profile .wrap .content .select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: auto;
    right: 0;
    border-color: #6090b7 transparent transparent transparent;
}
.popup.popup-histories .wrap .content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .popup.popup-update-profile .wrap .content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6090b7 transparent;
}
.popup.popup-histories .wrap .content button, .popup.popup-update-profile .wrap .content button {
    background: #fcd919;
    border: 3px solid #000;
    padding: 5px 20px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 35px;
}
.popup.popup-histories .wrap .content button:hover, .popup.popup-update-profile .wrap .content button:hover {
    background: #ffe450;
}
.popup.popup-text .wrap .content .img {
    position: relative;
}
.popup.popup-text .wrap .content .description {
    position: relative;
    top: 25px;
    font-size: 17px;
    width: 561px;
    text-align: center;
}
.popup.popup-text .wrap .content .description strong {
    color: aliceblue;
}
#text-h2 {
    position: absolute;
    top: 794px;
    left: 612px;
    width: 694px;
    height: 131px;
}
.title-vongquay {
    position: absolute;
    top: -77px;
    left: 300px;
}
.title-lichsu {
    position: absolute;
    top: -82px;
    left: 325px;
}
.title-doithuong {
    position: relative;
    top: 34px;
}
.title-thele {
    position: absolute;
    top: -82px;
    left: 332px;
}
.spin-wheel .login {
    cursor: pointer;
}
a.register {
    color: #007cbc;
    display: block;
    position: relative;
    margin-left: -69px;
    margin-top: 29px;
}
/**** bxh ****/
.bxh {
    width: 706px;
    height: 500px;
    background: url(images/bg-ranking-2.png) no-repeat;
    margin: auto;
    margin-top: 55px;
}
.bxh table thead tr {
    text-indent: -999999px;
    height: 48px;
}
.bxh table tbody tr {
    height: 43px;
}
.bxh table tbody tr td {
    color: #fff;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.loader-container {
    z-index: 1001;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 325px;
    left: 917px;
    border-radius: 50px;
    background: linear-gradient(#ab9a69, rgb(219 60 2), rgb(255 240 0));
    animation: animate .7s linear infinite;
    z-index: 99999;
    opacity: 0.4;
}
.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(#ab9a69, rgb(219 60 2), rgb(255 240 0));
}
.loader:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #1b0706;
    border-radius: 50px;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#no-login {
    background: url("../images/bg-login-5.png") center center no-repeat;
    text-decoration: none;
    transform: translateY(-7px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#no-login span {
    margin-top: 0;
}
.content-nologin  *,
#user-info * {
    font-family: 'SFUSouvenirBold', sans-serif;
}
.content-nologin {
    display: block;
    color: #FFE630;
    text-decoration: none;
    font-size: 21px;
    font-weight: bold;
    position: relative;
    text-align: center;
    margin-top: 16px;
}
.content-nologin .main-title {
    text-transform: uppercase;
    font-size: 37px;
    color: #fff;
    font-weight: bold;
    line-height: 37px;
}
.content-nologin .title .text-welcome {
    font-size: 21px;
}
.content-nologin .rules p {
    color: #ffe4b1;
    font-size: 14px;
}
.text-rules {
    position: absolute;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    background: url(images/thele-text-4.png) no-repeat 0 0 / 100%;
    width: 845px;
    height: 175px;
}
.autoloading {
    position: absolute;
    top: 777px;
    left: 1365px;
    opacity: 0.7;
    z-index: 3;
}
.autoloading button {
    cursor: pointer;
    padding: 5px;
}
.notify-list {
    background: aliceblue;
    width: 350px;
    margin-top: 5px;
    padding: 5px 5px;
    display: none;
}
/*Swing bao lixi*/
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(20deg);
    }
    50% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(20deg);
    }
}
@keyframes swing {
    0% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(20deg);
    }
}
.swing {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swing 2s ease-in-out forwards infinite;
    animation: swing 2s ease-in-out forwards infinite;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.delay-0-3s {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
.animated.delay-0-6s {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
.animated.delay-0-8s {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
.animated.delay-1-3s {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}
.animated.delay-1-6s {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
.animated.delay-1-8s {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}
.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}
.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}
.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
@media (print), (prefers-reduced-motion: reduce) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }
}
/* bao li xi */
.lixi {
    position: relative;
    animation-timing-function: linear;
    width: 570px;
    height: 551px;
    background: url(images/tree-2.png) no-repeat;
    left: -17px;
    top: -9px;
}
.lixi .spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffad0 0%, #ffea00 30%, #ffb300 60%, transparent 80%);
    box-shadow: 
        0 0 15px 4px rgba(255, 234, 0, 0.9),
        0 0 30px 10px rgba(255, 200, 0, 0.8),
        0 0 60px 20px rgba(255, 180, 0, 0.7);
    opacity: 0.95;
    animation: spark-glow 1.5s infinite ease-in-out;
    filter: blur(0.4px);
    mix-blend-mode: screen;
}
.lixi .spark:nth-child(1) {
    top: 82px;
    right: 216px;
}
.lixi .spark:nth-child(2) {
    top: 117px;
    left: 193px;
}
.lixi .spark:nth-child(3) {
    top: 218px;
    left: 99px;
}
.lixi .spark:nth-child(4) {
    top: 122px;
    right: 232px;
}
.lixi .spark:nth-child(5) {
    top: 152px;
    right: 293px;
}
.lixi .spark:nth-child(6) {
    top: 172px;
    right: 205px;
}
.lixi .spark:nth-child(7) {
    top: 351px;
    left: 203px;
}
.lixi .spark:nth-child(8) {
    top: 160px;
    right: 130px;
}
.lixi .spark:nth-child(9) {
    top: 365px;
    right: 160px;
}
@keyframes spark-glow {
    0%, 100% {
        opacity: 0.6;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(2.5);
    }
}
.lixi1 {
    position: relative;
    top: 47px;
    left: 130px;
    width: 36px;
    height: 55px;
}
.lixi2 {
    position: relative;
    top: 61px;
    left: 217px;
    width: 36px;
    height: 55px;
}
.lixi3 {
    position: relative;
    top: 84px;
    left: 243px;
    width: 36px;
    height: 55px;
}
.lixi4 {
    position: relative;
    top: 120px;
    left: -66px;
    width: 36px;
    height: 55px;
}
.lixi5 {
    position: relative;
    top: 153px;
    left: -24px;
    width: 36px;
    height: 55px;
}
.lixi6 {
    position: relative;
    top: 165px;
    left: 51px;
    width: 36px;
    height: 55px;
}
.lixi7 {
    position: relative;
    top: 235px;
    left: 71px;
    width: 36px;
    height: 55px;
}
.lixi8 {
    position: relative;
    top: 219px;
    left: -182px;
    width: 36px;
    height: 55px;
}
.lixi9 {
    position: relative;
    top: 0;
    left: 0;
    width: 31px;
    height: 95px;
}
.lixi10 {
    position: relative;
    top: 0;
    left: 0;
    width: 36px;
    height: 55px;
}
.lixi11 {
    position: relative;
    top: 0;
    left: 0;
    width: 31px;
    height: 95px;
}
.lixi12 {
    position: relative;
    top: 0;
    left: 0;
    width: 31px;
    height: 95px;
}
.lixi13 {
    position: relative;
    top: 0;
    left: 0;
    width: 31px;
    height: 95px;
}
.lixi14 {
    position: relative;
    top: 0;
    left: 0;
    width: 36px;
    height: 55px;
}
.lixi15 {
    position: relative;
    top: 0;
    left: 0;
    width: 36px;
    height: 55px;
}
.lixi16 {
    position: relative;
    top: 0;
    left: 0;
    width: 36px;
    height: 55px;
}
.lixi17 {
    position: relative;
    top: 0;
    left: 0;
    width: 36px;
    height: 55px;
}
/*==================== progress container ====================*/
.exchange-container .progress-container {
    position: relative;
    width: 80%;
    height: 6px;
    background-color: #D81408;
    border-radius: 10px;
    margin: 25px 0 42px 0;
}
.exchange-container .progress-bar {
    height: 100%;
    width: 0%;
    background-color: #FFEB01;
    border-radius: 10px;
    transition: width 0.4s ease;
}
.exchange-container .milestone {
    position: absolute;
    top: 50%;
    height: 46px;
    width: 46px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background: url(images/process-neo.png) no-repeat;
    text-indent: -9999px;
    transform: translate(-50%, -50%);
}
.exchange-container .milestone:nth-child(2) {
    left: 0%;
}
.exchange-container .milestone:nth-child(3) {
    left: 25%;
}
.exchange-container .milestone:nth-child(4) {
    left: 50%;
}
.exchange-container .milestone:nth-child(5) {
    left: 75%;
}
.exchange-container .milestone:nth-child(6) {
    left: 100%;
}
.exchange-container .milestone.active {
    color: #fff;
    text-indent: -9999px;
    background-position: bottom;
}
.exchange-container .gift-item .point {
    color: #f9ca6f;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
}
.exchange-container .point-list {
    list-style: none;
    display: flex;
    gap: 103px;
}
.exchange-container .point-list li {
    width: 48px;
    height: 24px;
    background: url(images/point-2.png) no-repeat;
    background-size: 100% 500%;
}
.exchange-container .point-list li:nth-child(1) {
    background-position: top;
}
.exchange-container .point-list li:nth-child(2) {
    background-position: 0 -24px;
}
.exchange-container .point-list li:nth-child(3) {
    background-position: 0 -48px;
}
.exchange-container .point-list li:nth-child(4) {
    background-position: 0 -72px;
}
.exchange-container .point-list li:nth-child(5) {
    background-position: bottom;
}
.exchange-container .gift-item .name {
    position: relative;
    color: #f9d108;
    text-shadow: 1px 1px 1px #d49a1e;
    position: relative;
}
#fireworksCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}