html, body {
    height: 100%;
}

body {
    font-family: NhacCuaTui;
    background-color: rgba(28, 30, 32, 0.02);
    min-width: 1170px;
    /* background-color: #fff; */
}

img {
    vertical-align: middle;
}

a {
    color: #000;
    text-decoration: none;
}
/* header */
.header {
    width: 100%;
    height: 57px;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffffff;
    z-index: 999;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
}
/* logo */
.header-logo {
    width: 64px;
    height: 56px;
    margin-left: 24px;
}

.logo-nct {
    width: 64px;
    height: 56px;
    background: url('../images/logo_nct.png') center center no-repeat;
    background-size: contain;
}

.login-wrapper {
    height: 56px;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 24px;
}
.box-info-user {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.box-info-user .avt {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.vip-actived {
    position: absolute;
    bottom: -5px;
    left: 6px;
    right: 6px;
    width: 20px;
    height: 12px;
    background-color: #fff;
    border-radius: 2px;
}

.vip-actived .ic-user-vip {
    font-size: 20px;
    color: #FFC40E;
    position: absolute;
    top: -4px;
}
/* list-navigation */
.list-navigation {
    /* width: 1000px; */
    background-color: #fff;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
}

.list-navigation ul {
    display: flex;
}

.list-navigation ul li {
    /* float: left; */
    display: flex;
    /* margin: 0 15px; */
    position: relative;
}
.list-navigation ul li a {
    display: block;
    text-align: center;
    width: 160px;
    height: 56px;
    padding-top: 19px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.88);
    font-size: 12px;
    font-weight: bold;
}

.list-navigation ul li a.active {
    font-weight: bold;
}
.list-navigation .ic-close-navi {
    display: none;
}

/* login */
.login-username {
    cursor: pointer;
    height: 56px;
    display: flex;
    align-items: center;
}
.login-username .ic-setting-login {
    margin-left: 22px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
}
.txt-login {
    max-width: 120px;
    font-size: 12px;
    margin-left: 8px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-username .ic-avatar {
    font-size: 32px;
    color: rgba(0, 0, 0, 0.5);
}
.ic-menu-mobile {
    display: none;
}
.line-select {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to right, #2F80ED 0%,#00AEEF 100%) no-repeat;
    transition: all 90ms linear;
    background-size: 0 2px;
    background-position: 50% 50%;
}

.line-select.active {
    background-size: 100% 2px;
}

.list-navigation ul li:hover .line-select {
    background-size: 100% 2px;
    background-position: 50% 50%;
}
/* upgrade-vip */
.upgrade-vip {
    position: relative;
    z-index: 0;
    padding: 80px 0 101px 0;
}
.upgrade-vip .bg-upgrade-vip {
    /* display: none; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 480px;
    background-image:url('../images/bg_pattern_full.png');
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.upgrade-vip .wrapper-upgrade {
    position: relative;
    width: 1170px;
    margin: 0 auto;
}
.wrapper-upgrade .box-text-upgrade {
    text-align: center;
}
.wrapper-upgrade .box-text-upgrade .ic-vip-circle {
    font-size: 36px;
    color: #FFC40E;
}
.wrapper-upgrade .box-text-upgrade .txt-upgrade-title {
    padding: 15px 24px 0 24px;
    font-size: 32px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
}
.wrapper-upgrade .box-text-upgrade .txt-upgrade {
    padding: 14px 24px 0 24px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}
.wrapper-upgrade .upgrade-content {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 56px;
}
.upgrade-content .box-card-package {
    margin: 0 20px;
}
.box-card-package .card-package {
    cursor:pointer;
    pointer-events: auto;
    position: relative;
    width: 350px;
    height: 140px;
    border-radius: 4px;
}
.box-card-package .card-package:hover {
    box-shadow: 0 0 0 1px #FFC40E;
}
.card-package .bg-card {
    position: absolute;
    width: 100%;
    height: 140px;
    background-image:url('../images/week.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.card-package .package-name {
    position: absolute;
    top: 28px;
    left: 16px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}
.card-package .package-name span {
    font-size: 22px;
    line-height: 32px;
    margin-top: 2px;
    font-weight: bold;
}
.card-package .package-price {
    position: absolute;
    top: 40px;
    right: 32px;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}
.card-package .package-price span{
    color: rgba(0, 0, 0, 0.88);
    font-size: 32px;
    font-weight: bold;
}

.card-package .bonus-coin {
    position: absolute;
    bottom: 5px;
    left: 16px;
    font-size: 12px;
    color: rgb(0, 0, 0, 0.5);
}

.card-package .bonus-coin span {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.card-package .bonus-coin span .img-coin-bonus{
    width: 12px;
    margin-left: 4px;
}

.card-package .txt-buy-now {
    width: 88px;
    height: 24px;
    padding: 5px 0 0 12px;
    position: absolute;
    bottom:4px;
    right: 4px;
    font-size: 12px;
    color: #fff;
    background-image: linear-gradient(45deg, #F2AF12 0%, #FFD200 100%);
    border-radius: 16px 0 4px 0;
}
.txt-buy-now .ic-next {
    font-size: 8px;
    color: #fff;
}
.card-package .buy-a-most {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 124px;
    height: 24px;
    background-image: linear-gradient(-45deg, #2DAAED 0%, #95D96D 100%);
    border-radius: 0 4px 0 16px;
}
.card-package .discount {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 96px;
    height: 24px;
    background-color: #F44336;
    border-radius: 0 4px 0 16px;
}
.card-package .buy-a-most .txt-buy-top {
    padding: 5px 0 0 17px;
    font-size: 12px;
    color: #fff;
}
.card-package .discount .txt-discount {
    padding: 5px 0 0 8px;
    font-size: 12px;
    color: #fff;
}
.card-package .discount-code {
    position: absolute;
    top: 8px;
    right: 107px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: line-through;
}

/* txt-note-login */
.txt-note-login {
    position: relative;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 40px;
    text-align: center;
}

/* feature */
.feature {
    padding: 75px 0 111px 0;
    background-color: rgba(28, 30, 32, 0.02);
}
.feature .feature-wrapper {
    width: 1110px;
    margin: 0 auto;
}
.feature-wrapper .box-feature-info {
    width: 255px;
    text-align: center;
}
.box-feature-info .header-feature-title {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    padding: 23px 0 30px 0;
    font-weight: bold;
}
.box-feature-info .header-feature-title.space {
    padding-bottom: 11px;
}
.box-feature-info .txt-feature {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.feature-wrapper .content-text-feature {
    text-align:  center;
}
.content-text-feature .feature-head-title {
    font-size: 32px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
}
.content-text-feature .txt-feature-content {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
    padding: 14px 0 56px 0;
}


/* benefit */
.benefit {
    position: relative;
    z-index: 0;
    padding: 81px 0 168px 0;
    background-color: #fafafa;
}
.benefit .bg-benefit {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 480px;
    background-image:url('../images/bg_pattern_full.png');
    background-repeat: no-repeat;
    background-position: center;
}

.benefit .benefit-container {
    position: relative;
    z-index: 2;
    width: 1110px;
    margin: 0 auto;
}

.benefit-container .wrapper-benefit {
    /* border: 1px solid  rgba(28, 30, 32, 0.02); */
    /* box-shadow: 0 1px 1px #CCCCCC; */
    /* overflow: hidden; */
}
.wrapper-benefit ul li {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-top: 1px solid rgba(28, 30, 32, 0.1);
    border-left: 1px solid rgba(28, 30, 32, 0.1);
    border-right: 1px solid rgba(28, 30, 32, 0.1);
}
.wrapper-benefit ul li:first-child {
    border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    background-color: rgba(28, 30, 32, 0);
}
.wrapper-benefit ul li:last-child {
    border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    -webkit-border-radius: 0px 0px 6px 6px;
    border-bottom: 1px solid rgba(28, 30, 32, 0.1);
}
.wrapper-benefit ul li .benefit-info {
    width: 628px;
    padding-left: 40px;
}
.benefit-info  .txt-benefit-title {
    font-size: 16px;
    font-weight: bold;
    color: #1C1E20;
    text-transform: uppercase;
}
.benefit-info .txt-benefit {
    font-size: 14px;
    font-weight: bold;
    color: #1C1E20;
}
.wrapper-benefit ul li .col-check {
    width: 240px;
    height: 64px;
    text-align: center;
    border-left: 1px solid rgba(28, 30, 32, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-check .ic-check-vip-head,
.col-check .ic-check-free-head {
    font-size: 48px;
}
.col-check .ic-check-vip-head {
    color: #FFC40E;
}
.col-check .ic-check-free-head { 
    color: #2DAAED;
}
.col-check .ic-check-vip {
    color: #FFC40E;
    font-size: 36px;
}
.col-check .ic-check-close {
    color: #F44336;
    font-size: 36px;
}



/* btn confirm */
.confirm-payment {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 40px;
}

.btn-confirm-payment {
    width: 100%;
    height: 64px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    font-weight: bold;
    background-image: linear-gradient(45deg, #F2AF12 0%, #FFD200 100%);
    border-radius: 4px;
    outline: 0;
    border: none;
}
.confirm-upgrade {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 40px;
}

.btn-confirm-upgrade {
    width: 325px;
    height: 64px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    font-weight: bold;
    background-image: linear-gradient(45deg, #F2AF12 0%, #FFD200 100%);
    border-radius: 4px;
    outline: 0;
    border: none;
}

/* footer */
.footer .footer-container {
    width: 100%;
}

.footer-social-nct {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-copyright {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.05);
}

.footer-copyright-container {
    max-width: 1140px;
    height: 56px;
    margin: 0 auto;
    padding: 0 15px;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
}

.footer-address-wrapper {
    margin-right: 16px;
}

.footer-address {
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);
}

.footer-address:hover .ic-location-active,
.footer-address:hover .txt-address{
    color: #2DAAED;
}
.footer-address.all-right:hover .txt-address{
    color: rgba(0, 0, 0, 0.5);
}

.footer-address .ic-location-active {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
}

.footer-address .txt-address {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    padding-left: 8px;
}

.footer-address.all-right {
    position: absolute;
    right: 15px;
}
/* footer social */
.footer-social {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.footer-social-left ul li {
    display: inline-block;
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    padding-right: 10px;
    padding-left: 10px;
}

.footer-social-left ul li:first-child {
    padding-left: 0;
}

.footer-social-left ul li a {
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
}

.footer-social-left ul li a:hover {
    color: #2DAAED;
}

.footer-social-left ul li:last-child {
    border-right: 0;
}

.footer-social-right,
.footer-social-left {
    display: flex;
    align-items: center;
    height: 56px;
}

.footer-social-right .ic-google-play {
    margin-left: 8px;
}

.footer-social-right .ic-app-store {
    margin-left: 16px;
}

.footer-social-right .ic-app-store,
.footer-social-right .ic-google-play {
    width: 81px;
    height: 24px;
}

.footer-social-right .ic-ins {
    margin-left: 8px;
    width: 28px;
    height: 28px;
}
.footer-social-right .ic-fb {
    width: 28px;
    height: 28px;
}

.footer-social-right .ic-ins .ic-social {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.5);
}

.footer-social-right .ic-fb .ic-social  {
    font-size: 28px;
    color: rgba(0, 0, 0, 0.5);
}

.footer-social-left {
    padding-left: 15px;
}

.footer-social-right{
    padding-right: 15px;
}
.footer-profile-nct {
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-profile-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
}
.footer-profile-info {
    margin-top: 12px;
}
.footer-profile-info .footer-nct-info{
    display: -webkit-flex;
    display: flex;
}
.footer-nct-info .logo-company {
    margin-right: 24px;
}
.profile-nct-company-verify {
    display: -webkit-flex;
    display: flex;
    margin-top: 12px;
}
.profile-nct-company-verify .permission.moit{
    margin-right: 16px;
}
.name-company {
    color: rgba(0, 0, 0, 0.88);
    font-size: 12px;
    font-weight: bold;
}
.profile-info-detail {
    padding-top: 8px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 20px;
}
.profile-info-detail.r-dot:before {
    display: none;
}
.profile-info-detail::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    float: left;
    margin: 8px 8px 0 0;
}
.profile-info-detail span {
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
}
.txt-company.spacing {
    margin-top: 4px;
}
.wrapper-content {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-gallery {
    width: 81px;
    height: 24px;
}
/* end footer */


/* ads container */
.ads-container {
    margin-top: 57px;
    width: 100%;
    height: 460px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.ads-container .ads-backgound-overlay {
    background-image: url(https://stc-id.nixcdn.com/payment/images/banner/2019-3-1.jpg);
    background-position: center center;
    height: 480px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    transform: scale(1.2); 
    -webkit-filter: blur(10px);
    filter: blur(10px);   
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
}
.ads-backgound-overlay .ads-blur-clr {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    background-image: linear-gradient(45deg, rgba(30, 94, 180, 0.88) 0%, rgba(0, 131, 180, 0.88) 100%);
}
.slider-ads-content {
    cursor: pointer;
    width: 970px;
    height: 400px;
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    z-index: 4;
    margin: 0 auto;
}
/* end ads */

/* dots owl */
.feature-wrapper .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 39px;
}
.owl-carousel button.owl-dot {
    outline: 0;
}
.feature-wrapper .owl-theme .owl-dots .owl-dot span {
    width: 4px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 2px;
}
.feature-wrapper .owl-theme .owl-dots .owl-dot.active span {
    width: 12px;
    background: #000000;   
}
.slider-ads-content .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 6px;
}
.slider-ads-content .owl-stage-outer {
    border-radius: 4px;
}
.slider-ads-content button.owl-dot {
    outline: 0;
}
.slider-ads-content .owl-theme .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 3px;
}
.slider-ads-content .owl-theme .owl-dots .owl-dot.active span {
    width: 18px;
    background: #fff;   
}

/* popup login */
.popup-login {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0 ,0.4);
    z-index: 9999;
}
.box-popup-login-container {
    width: 556px;
    background-color: #ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
}
.box-popup-login-container .title-login-header {
    text-align: center;
    margin-top: 32px;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
}
.box-popup-login-container .title-login-txt {
    text-align: center;
    margin: 16px 0 32px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.box-popup-login-container .group-content-login {
    position: relative;
    width: 360px;
    margin: 0 auto;
    margin-bottom: 16px;
}
.box-popup-login-container .ic-close-login {
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.88);
}
.box-popup-login-container .box-show-error {
    position: absolute;
    top: 70px;
    z-index: 2;
    width: calc(100% + 30px);
    margin-left: -15px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.box-popup-login-container .box-show-error .txt-error {
    font-size: 14px;
    color: #721c24;
    padding: 12px 24px;
    line-height: 23px;
    text-align: center;
}
.box-popup-login-container .box-show-error .ic-close-error {
    font-size: 16px;
    color: #721c24;
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
}
.group-content-login .box-input {
    position: relative;
    width: 100%;
    height: 48px;
}
.group-content-login .box-input .ic-keyboard,
.group-content-login .box-input .ic-user-id {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 15px;
    left: 15px;
}
.group-content-login .box-input .line-login {
    display: block;
    width: 1px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 48px;
    top: 12px;
}
.group-content-login .box-input .input-login {
    width: 100%;
    height: 48px;
    background-color: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 0 66px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
}
.group-content-login .box-input .input-login:focus {
    border-bottom: 1px solid #2daaed;
}
.group-content-login .remember-box {
    position: relative;
    width: 144px;
    height: 20px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
}
.group-content-login .remember-box input[type=checkbox] {
    visibility: hidden;
}
.group-content-login .remember-box .ic-remember {
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.group-content-login .remember-box .ic-remember:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    opacity: 0;
    transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
}
.group-content-login .remember-box input:checked ~ .ic-remember:after {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.group-content-login .remember-box input:checked ~ .ic-remember {
    background-color: #2daaed;
    border: 1px solid #2daaed;
}
.group-content-login .remember-box .label-remember {
    position: absolute;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    left: 28px;
    top: 1px;
    line-height: 18px;
}
.group-content-login .forget-pass {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    color: #2daaed;
    line-height: 18px;
    text-align: right;
}
.group-content-login .btn-login {
    width: 100%;
    height: 48px;
    font-size: 14px;
    color: #ffffff;
    line-height: 24px;
    background: #2f80ed;
    background: -moz-linear-gradient(left, #2f80ed 0%, #00aeef 100%);
    background: -webkit-linear-gradient(left, #2f80ed 0%,#00aeef 100%);
    background: linear-gradient(to right, #2f80ed 0%,#00aeef 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f80ed', endColorstr='#00aeef',GradientType=1 );
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    margin: 16px 0 0 0;
    border: none;
    outline: none;
}
.group-content-login .diror {
    width: 100%;
    height: 24px;
    margin-top: 8px;
    position: relative;
}
.group-content-login .diror .line-or::after,
.group-content-login .diror .line-or::before {
    content: '';
    width: 40%;
    height: 1px;
    background: url(https://stc-id.nixcdn.com/payment/v2/images/line_loggin.png) center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 12px;
}
.group-content-login .diror .line-or::after {
    right: 0;
}
.group-content-login .diror .line-or::before {
    left: 0;
}
.group-content-login .diror .txt-or {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 24px;
}
.group-content-login.social {
    height: 48px;
}
.group-content-login .box-social {
    cursor: pointer;
    width: 160px;
    height: 40px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
    box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.16);
    -webkit-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.16);
    -moz-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.16);
    -ms-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.16);
    -o-box-shadow: 0 8px 16px rgba( 0, 0, 0, 0.16);
    position: absolute;
    top: 8px;
    display: flex;
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
}
.group-content-login .box-social.fb {
    left: 0;
}
.group-content-login .box-social.gg {
    right: 0;
}
.group-content-login .box-social .ic-fb-img{
    background: url(../images/ic_fb.png) center center no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
    margin-right: 8px;
}
.group-content-login .box-social .ic-gg-img{
    background: url(../images/ic_gg.png) center center no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
    margin-right: 8px;
}
.group-content-login .box-social .txt-social {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.redirect-regist {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    margin: 26px 0;
}
.redirect-regist .link-in-text {
    color: #2daaed;
    text-decoration: underline;
}

/* popup logout */
.popup-logout {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 8;
}
.popup-logout .logout-container { 
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.logout-container .logout-content {
    position: absolute;
    top: 57px;
    right: 24px;
    width: 328px;
    height: 220px;
    padding: 16px 12px;
    border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    -o-border-radius: 0 0 8px 8px;
    background-color: #ffffff;
}
.logout-container .logout-content .box-logout-user-wrapper {
    display: flex;
    display: -webkit-flex;
}
.logout-content .box-logout-user-wrapper .box-avt {
    width: 90px;
    height: 90px;
    margin-right: 16px;
}
.box-logout-user-wrapper .box-avt .img-user {
    width: 90px;
    height: 90px;
    border: 2px solid #ffc40e;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.box-logout-user-wrapper .box-logout-info {
    width: calc(100% - 106px);
}
.box-logout-info .username-id {
    margin-top: 14px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box-logout-info .date-vip {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}
.box-logout-info .date-vip .vip {
    /* color: #ffc40e; */
    /* font-weight: bold; */
}
.logout-container .logout-content .line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    margin: 16px 0;
}
.logout-container .logout-content .btn-logout {
    width: 100%;
    height: 48px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background: #2f80ed;
    font-size: 16px;
    color: #ffffff;
    background: -moz-linear-gradient(left, #2f80ed 0%, #00aeef 100%);
    background: -webkit-linear-gradient(left, #2f80ed 0%,#00aeef 100%);
    background: linear-gradient(to right, #2f80ed 0%,#00aeef 100%);
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    box-shadow: 0px 8px 16px rgba(45,170,237,0.4);
    -webkit-box-shadow: 0px 8px 16px rgba(45,170,237,0.4);
    -moz-box-shadow: 0px 8px 16px rgba(45,170,237,0.4);
    -ms-box-shadow: 0px 8px 16px rgba(45,170,237,0.4);
    -o-box-shadow: 0px 8px 16px rgba(45,170,237,0.4);
    cursor: pointer;
    outline: 0;
    border: none;
}
.logout-container .logout-content .ic-close-logout {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    position: absolute;
    top: 16px;
    right: 16px;
    display: none;
    cursor: pointer;
}

/* main payment container */
.main-payment-container {
    padding: 57px 0 79px 0;
}
.main-payment-container.page-vcoin {
    height: calc(100vh - 260px);
    /* min-height: ; */
}
.main-payment-container .header-payment-content {
    position: relative;
    height: 96px;

}
.header-payment-bg {
    position: absolute;
    width: 100%;
    height: 96px;
    background-image:url('../images/bg_pattern.png');
    background-repeat: no-repeat;
    background-position: bottom;
}
.header-payment-content .header-payment-wrapper {
    position: relative;
    width: 1110px;
    margin: 0 auto;
}
.header-payment-wrapper .form-method-wrapper{
    padding-top: 56px;
    display: flex;
    justify-content: center;
}
.form-method-wrapper .method-action {
    cursor: pointer;
    width: 160px;
    font-size: 12px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
    padding-top: 9px;
    padding-bottom: 15px;
    text-align: center;
}
.form-method-wrapper .method-action.active {
    color: #2DAAED;
    border-bottom: 2px solid #2DAAED;
}
.form-method-wrapper .method-action:hover {
    border-bottom: 2px solid #2DAAED;
}
.header-payment-wrapper .header-payment-title {
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
    padding-top: 43px;
    text-transform: uppercase;
}
.header-payment-wrapper .box-head{
    width: 100%;
    float: left;
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
    padding-top: 43px;
    text-transform: uppercase;
}
.header-payment-wrapper .box-head .menu-news{
    width: auto;
    float: left;
    margin: 0 0 0 0;
}
.header-payment-wrapper .box-head .menu-news .head{
    width: auto;
    float: left;
    padding: 0 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.88);
}
.header-payment-wrapper .box-head .menu-news .head:last-child{
    margin: 0;
    border: none;
}
.header-payment-wrapper .box-head .menu-news .head.active a{
    color: #2daaed;
}
.main-payment-container .payment-info {
    padding-top: 40px;
}
.main-payment-container .payment-info-wrapper {
    display: flex;
    display: -webkit-flex;
    width: 1110px;
    margin: 0 auto;
}
.payment-info-wrapper .payment-info-left {
    width: 730px;
    margin-right: 30px;
}
.payment-info-left .box-detail-payment {
    padding: 16px 0;
    border-radius: 4px;
    border: 1px solid rgba(28, 30, 32, 0.05);
}
.box-detail-payment ul li .group-radio {
    position: relative;
    width: 100%;
    height: 64px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 0 24px;
}
.group-radio input{
    display: none;
}
.radio-checkbox-style {
    width: 16px;
    height: 16px;
    border-radius: 12px;
    border: 1px solid #CDCECE;
    margin-right: 8px;
    /* box-shadow: inset 0 0 0 7px #fff; */
}
.group-radio input:checked ~ .radio-checkbox-style {
    box-shadow: inset 0 0 0 2px #fff;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.group-radio input:checked ~ .vip-package-name {
    font-weight: bold;
    color: rgba(28, 30, 32, 0.88);
}
.group-radio img {
    width: 40px;
    height: 40px;
}
.group-radio .vip-package-name {
    margin-left: 8px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
}
.show-note-info-payment {
    margin-top: 22px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
}
.show-note-info-payment a {
    color: #2DAAED;
}
.box-detail-payment ul li .box-single-renew {
    width: 100%;
    height: 64px;
    background-color: #F5F5F5;
}
.group-auto-renew-selected {
    margin-left: 48px;
    padding-top: 22px;
}
.group-auto-renew-selected.checkbox-autorew-card{
    margin-left: 0;
    padding-top: 0;
}
.group-auto-renew-selected.giftcode-give {
    width: 320px;
    margin: 0 auto;
    margin-top: 24px;
    margin-bottom: 23px;
}
.group-auto-renew-selected.giftcode-give .group-choice-radio-package {
    width: auto;
}
.group-choice-radio-package {
    width: 330px;
    height: 20px;
    position: relative;
    display: flex;
}
.group-choice-radio-package input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.group-choice-radio-bg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    z-index: 3;
}
.group-choice-radio-package input:checked ~ .group-choice-radio-bg {
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
    border: 1px solid rgba(45, 170, 237, 0.4);
}
.txt-auto-noti-renew {
    width: auto;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 1px;
    left: 28px;
    z-index: 3;
}
.ic-check-selected {
    display: block;
    font-size: 20px;
    color: #fff;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    transform-origin: center center;
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    opacity: 0;
    transition: all 0.15s linear;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    -ms-transition: all 0.15s linear;
}

.group-choice-radio-package input:checked ~ .ic-check-selected {
    transform-origin: center center;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
}
/* select-visa-custom */
.select-visa-custom {
    width: 100%;
    /* height: 162px; */
    background-color: rgba(28, 30, 32, 0.02);
    padding: 0 48px;
}
.select-visa-custom .txt-select-card {
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
    padding: 22px 0 8px 0;
}
.select-visa-custom .card-option {
    width: 400px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.04);
    position: relative;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #EAEAEA;
    overflow: hidden;
}
.card-option .ic-arrow-option {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 16px;
    top: 15px;
}
.card-option select {
    cursor: pointer;
    width: 100%;
    height: 40px;
    font-size: 14px;
    background-color: #F0F0F0;
    font-weight: bold;
    border-radius: 4px;
    padding-left: 16px;
    color: rgba(0, 0, 0, 0.88);
    border: none;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.select-visa-custom .line-option {
    width: 100%;
    height: 1px;
    background-color: rgba(28, 30, 32, 0.05);
    margin: 16px 0;
}

/* right */
.payment-info-wrapper .payment-info-right {
    width: 350px;
}
.payment-info-right .box-package-payment {
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(28, 30, 32, 0.05);
    padding: 0 24px;
}
.box-package-payment .title-label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
    padding: 22px 0;
    border-bottom: 1px solid rgba(112, 112, 112, 0.05);
}
.box-package-payment .txt-label {
    padding: 22px 0 21px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.box-package-payment .txt-label.t-sm {
    font-size: 12px;
    padding: 0 0 8px 0;
}
.box-package-payment .txt-label .txt-price {
    margin-left: 9px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
}
.package-option {
    width: 302px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.02);
    position: relative;
    box-shadow: 0 0 0 1px #EAEAEA;
    border-radius: 4px;
}
.package-option .ic-arrow-option {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 16px;
    top: 15px;
}
.package-option select {
    cursor: pointer;
    width: 100%;
    height: 40px;
    font-size: 14px;
    background-color: #F0F0F0;
    font-weight: bold;
    border-radius: 4px;
    padding-left: 16px;
    padding-right: 16px;
    color: rgba(0, 0, 0, 0.88);
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
.payment-info-right .box-package-total {
    width: 100%;
    height: 64px;
    border-radius: 0 0 4px 4px;
    border-left: 1px solid rgba(28, 30, 32, 0.05);
    border-right: 1px solid rgba(28, 30, 32, 0.05);
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
    padding: 0 24px;
    display: flex;
    align-items: center;
}
.box-package-total .payment-total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.box-package-total .payment-total .price-total {
    font-size: 18px;
    font-weight: bold;
    color: rgba(45, 170, 237, 0.88);
    margin-left: 10px;
}
.payment-info-right .box-discount-code-detail {
    margin-top: 22px;
}
.box-discount-code-detail .txt-discount-code {
    font-size: 12px;
    padding-bottom: 8px;
    color: rgba(0, 0, 0, 0.5);
}
.box-entered-discount-code .input-discount-code {
    width: 246px;
    height: 40px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size: 14px;
    padding: 10px 16px;
    color: rgba(28, 30, 32, 0.5);
    background-color: transparent;
    border: 1px solid rgba(28, 30, 32, 0.05);
    outline: 0;
}
.box-entered-discount-code .input-discount-code:focus {
    color: rgba(28, 30, 32, 0.5);
    border: 1px solid #2DAAED;
}
.box-entered-discount-code .input-discount-code::placeholder {
    color: rgba(28, 30, 32, 0.5);
}
.box-entered-discount-code {
    display: flex;
}
.box-entered-discount-code .check-code {
    width: 302px;
    height: 40px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size: 12px;
    padding: 11px 10px;
    background-color: transparent;
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(28, 30, 32, 0.05);
    font-weight: bold;
}
.code.success {
    color: #2DAAED;
    font-weight: bold;
    margin-right: 8px;
}
.code.fail {
    color: #F44336;
    font-weight: bold;
    margin-right: 8px;
    text-decoration: line-through;
}

.group-btn-confirm {
    margin-left: 8px;
}

.group-btn-confirm .btn-confirm {
    width: 96px;
    height: 40px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    outline: 0;
    border: none;
    border-radius: 4px;
    padding: 0;
    background-color: rgba(28, 30, 32, 0.05);
}
.group-btn-confirm .btn-confirm.active {
    color: #fff;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.box-entered-discount-code .btn-close-confirm {
    width: 40px;
    height: 40px;
    outline: 0;
    border: none;
    border-radius: 4px;
    padding: 9px;
    margin-left: 8px;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.group-btn-confirm .btn-icon-confirm {
    width: 40px;
    height: 40px;
    outline: 0;
    display: none;
    border: none;
    border-radius: 4px;
    padding: 9px;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.group-btn-confirm .btn-icon-confirm {
    color: #fff;
    font-size: 22px;
}
.box-entered-discount-code .btn-close-confirm .ic-close {
    color: #fff;
    font-size: 22px;
}
/* vip code/ vcoin */
/* giftcode error */
.giftcode-error {
    width: 800px;
    height: 40px;
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translate(-50%);
    background-color: #F44336;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 30;
    text-align: left;
    padding-left: 23px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.giftcode-error .txt-error {
    font-size: 14px;
    color: #fff;
    padding-top: 12px;
}
.giftcode-error .ic-close-error {
    cursor: pointer;
    font-size: 22px;
    color: #fff;
    position: absolute;
    right: 8px;
    top: 9px;
}
/* gift code */
.form-giftcode-wrapper {
    height: calc(100vh - 492px);
    min-height: 390px;
}
.form-giftcode-wrapper .form-giftcode-input {
    width: 400px;
    margin: 0 auto;
}
.form-giftcode-input .head-giftcode-title {
    padding: 37px 0 39px 0;
    font-size: 22px;
    font-weight: bold;
    color: rgba(24, 34, 45, 0.88);
    text-align: center;
    text-transform: uppercase;
}
.form-giftcode-input .input-giftcode {
    width: 100%;
    height: 40px;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(28, 30, 32, 0.05);
    outline: 0;
    background-color: transparent;
}
.form-giftcode-input .input-giftcode:focus {
    border: 1px solid #2DAAED;
}
.form-giftcode-input .input-giftcode::placeholder {
    color: rgba(28, 30, 32, 0.5);
}
.box-captcha {
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: 24px;
}
/* vicoin */
.main-payment-container .vcoin-container {
    width: 730px;
    margin: 0 auto;
    padding-top: 40px;
    display: -webkit-flex;
    display: flex;
}
.vcoin-container .vcoin-info-left {
    width: 350px;
    margin-right: 30px;
}
.form-conversion-value {
    border-radius: 4px;
    border: 1px solid rgba(28, 30, 32, 0.05);
    padding-bottom: 8px;
}
.vcoin-payment-card .title,
.form-conversion-value .title {
    font-size: 14px;
    font-weight: bold;
    padding: 22px 0 23px 24px;
    color: rgba(28, 30, 32, 0.88);
}

.form-conversion-value ul li {
    width: 100%;
    height: 40px;
    position: relative;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.txt-conversion-value-left {
    position: absolute;
    top: 11px;
    left: 24px;
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
.dot-value {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translate(-50%);
    width: 4px;
    height: 4px;
    background-color: rgba(28, 30, 32, 0.1);
    border-radius: 4px;
}
.txt-conversion-value-right {
    position: absolute;
    top: 11px;
    right: 24px;
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
.vcoin-info-left .btn-conversion {
    text-align: center;
    margin-top: 8px;
}
.btn-conversion .btn-store-transactions {
    width: 350px;
    height: 40px;
    border-radius: 4px;
    color: rgba(28, 30, 32, 0.5);
    background-color: rgba(28, 30, 32, 0.05);
    /* background-image: linear-gradient(45deg, #E2E2E2 0%, #F2F2F2 100%); */
    border: none;
    outline: 0;
}
.vcoin-container .vcoin-info-right {
    width: 350px;
}
.vcoin-info-right .vcoin-payment-card {
    border: 1px solid rgba(28, 30, 32, 0.05);
    border-radius: 4px;
}
.vcoin-payment-card .recharge-card{
    margin: 0 24px;
    padding: 40px 0 48px 0;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.input-code-card-number {
    font-size: 14px;
    width: 100%;
    height: 40px;
    color: rgba(28, 30, 32, 0.5);
    border: 1px solid rgba(28, 30, 32, 0.05);
    background-color: transparent;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 8px;
    outline: 0;
}
.input-code-card-number:last-child {
    margin-bottom: 0;
}
.input-code-card-number::placeholder {
    color: rgba(28, 30, 32, 0.5);
}
.input-code-card-number:focus {
    border: 1px solid #2DAAED;
}
/* popup vcoin */
.popup-vcoin-map {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 9999;
}
.v-overlay-popup {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.v-content-popup-list-store {
    width: 480px;
    height: calc(100% - 150px);
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%);
    -ms-transform: translate(-50%);
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #FAFAFA;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.v-content-popup-list-store .header-popup {
    position: relative;
    height: 64px;
    border-bottom: 1px solid rgba(24, 34, 45, 0.05);
}
.header-popup .header-vcoin-popup-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-top: 22px;
    color: rgba(24, 34, 45, 0.88);
}
.header-popup .ic-close-popup {
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 24px;
    top: 23px;
    color: rgba(24, 34, 45, 0.5);
}
.forrm-choose-place {
    padding-top: 16px;
}
.choose-place-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}
.choose-place-wrapper select {
    background-image: url(../images/ic_next.png);
    background-position: calc(100% - 16px);
    background-repeat: no-repeat;
    /* background-size: contain; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.choose-place-wrapper select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}
.v-choose-place {
    position: relative;
    width: 220px;
    height: 32px;
    background-color: rgba( 0, 0, 0, 0.02);
    font-size: 14px;
    border-radius: 4px;
    padding-left: 16px;
    color: rgba(28, 30, 32, 0.88);
    border: 1px solid rgba(28, 30, 32, 0.05);
    outline: 0;
}
.v-box-list-wrapper {
    height: calc(100% - 112px);
    padding: 16px 0 16px 16px;
}
.v-box-list {
    height: 100%;
    overflow: auto;
}
.v-box-list ul li {
    width: 447px;
    padding: 12px 16px;
    background-color: rgba(0, 0, 0, 0.02);
    margin-bottom: 8px;
    border-radius: 4px;
}
.store-name {
    font-size: 12px;
    color: rgba(28, 30, 32, 0.88);
    font-weight: bold;
    margin-bottom: 6px;
}
.store-address {
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
/* noti */
.notification-container {
    width: 100%;
    padding-top: 57px;
    /* height: calc(100vh - 260px); */
    background-image: url(../images/bg_pattern_full.png);
    background-repeat: no-repeat;
    background-position: bottom;
    display: flex;
    align-items: center;
}
.notification-wrapper {
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
    padding: 119px 0 259px 0;
}
.notification-wrapper.p-space {
    padding-top: 64px;
}
.notification-wrapper .header-noti.clr-error {
    font-size: 17px;
    color: rgba(28, 30, 32, 0.88);
}
.notification-wrapper .header-noti {
    font-size: 20px;
    font-weight: bold;
    color: #2DAAED;
    text-transform: uppercase;
    line-height: 24px;
}
.notification-wrapper .txt-noti-buy {
    padding-top: 13px;
    line-height: 24px;
    font-size: 14px;
    color: rgba(28, 30, 32, 1);
}
.notification-wrapper .txt-noti-buy span.coin-label {
    color: #FFC40E;
    font-size: 16px;
}
.notification-wrapper .txt-noti-buy span {
    font-weight: bold;
}
.notification-wrapper .txt-noti-buy a {
    color: #2DAAED;
}
.txt-noti-buy.bill {
    padding-top: 38px;
}
.txt-noti-buy.txt-note {
    padding-top: 32px;
}
.box-notification-content {
    width: 540px;
    height: 40px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
}
.box-notification-content.align-content {
    justify-content: center;
}
.btn-box-notification {
    width: 240px;
    height: 40px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    border-radius: 4px;
    border: none;
    outline: 0;
    background-color: rgba(28, 30, 32, 0.05);
}
.btn-buy-more {
    display: block;
    padding-top: 20px;
    margin-top: 40px;
    width: 540px;
    height: 64px;
    font-size: 16px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.88);
    background-image: linear-gradient(45deg, #F2AF12 0%, #FFD200 100%);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(255, 196, 14, 0.2);
    border: 1px solid #FFC40E;
    outline: 0;
}
.box-notification-content .input-email-confirn {
    width: 256px;
    height: 40px;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline: 0;
    margin-right: 8px;
    background-color: transparent;
}
.box-notification-content .input-email-confirn::placeholder {
    color: rgba(28, 30, 32, 0.5);
}
.box-notification-content .btn-email-confirn {
    width: 96px;
    height: 40px;
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    border-radius: 4px;
    outline: 0;
    border: none;
    background-color: rgba(28, 30, 32, 0.05);
}
.box-notification-content .btn-email-confirn.active {
    color: rgba(255, 255, 255, 0.88);
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.notification-wrapper .txt-payoo-code {
    margin: 16px 0 32px 0;
    font-size: 22px;
    font-weight: bold;
    color: rgba(45, 170, 237, 0.88);
}
.notification-wrapper .btn-store-payoo {
    width: 240px;
    height: 40px;
    border-radius: 4px;
    color: rgba(28, 30, 32, 0.5);
    background-color: rgba(28, 30, 32, 0.05);
    border: none;
    outline: 0;
}
.txt-noti-buy .space-payoo {
    padding-top: 14px;
}
.notification-wrapper .img-noti-success {
    width: 240px;
    margin-bottom: 15px;
}
/* payoo */
.popup-payoo {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 9999;
}
.popup-payoo .overlay-popup-payoo {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-payoo .popup-payoo-content {
    width: 800px;
    border-radius: 4px;
    background-color: #FFFFFF;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
.popup-payoo-content .title-payoo {
    border-radius: 4px 4px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 22px 24px 21px 24px;
    color: rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
    background-color: #FAFAFA;

}
.popup-payoo-content .ic-close-payoo {
    position: absolute;
    top: 21px;
    right: 24px;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
/* news info */
.news-info {
    width: 1110px;
    margin: 0 auto;
}
.news-list-item {
    padding-top: 40px;
}
.news-list-item ul li {
    width: 100%;
    height: 160px;
    padding: 16px 24px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: #FAFAFA;
    margin-bottom: 16px;
    box-shadow: 0 0 0 1px rgba(28, 30, 32, 0.05);
}
.news-list-item ul li:last-child {
    margin-bottom: 0;
}
.news-list-item ul li:hover {
    box-shadow: 0 0 0 1px rgba(45, 170, 237, 0.4);
}
.news-item {
    display: flex;
    display: -webkit-flex;
}
.news-item .thumb-news {
    width: 180px;
    /* height: 128px; */
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.news-item .news-detail {
    position: relative;
    margin-left: 24px;
    width: calc(100% - 208px);
}
.news-title-head {
    font-size: 14px;
    color: rgba(28, 30, 32, 0.88);
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-title-head.head-mb {
    display: none;
}
.news-detail .txt-desc {
    font-size: 14px;
    color: rgba(28, 30, 32, 0.5);
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-detail .txt-date {
    position: absolute;
    bottom: 10px;
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
/* pagination */
.pagination-news {
    margin-top: 24px;
}
.pagination-wrapper {
    width: auto;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
.pagination-news ul {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(28, 30, 32, 0.05);
    border-radius: 20px;
    padding: 0 15px;
}
.pagination-news ul li {
    width: 40px;
    height: 40px;
}
.numbers .navi-page {
    display: inline-block;
    padding: 12px;
    color: rgba(28, 30, 32, 0.5);
}
.number-page .txt {
    display: inline-block;
    padding: 10px 17px;
    color: rgba(28, 30, 32, 0.5);
}
.number-page.active .txt{
    color: #2DAAED;
    border-bottom: 1px solid #2DAAED;
}
.number-page .txt:hover {
    border-bottom: 1px solid #2DAAED;
}
/* news detail */
.box-back-to-page {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.box-back-to-page .back-link {
    width: 100px;
}
.back-link{
    display: flex;
}
.txt-back-to-page {
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.88);
    font-weight: bold;
    font-size: 16px;
}
.ic-back-to-page {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.5);
}
.news-detail-info{
    padding-top: 40px;
}
.content-detail-wrapper .title-content-head{
    font-size: 20px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
}
.content-detail-wrapper .date-content-head {
    margin: 16px 0 24px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.content-main{
    font-size: 14px;
    line-height: 28px;
    text-align: justify;
}
.content-detail-wrapper .content-main p{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 2;
}
.content-detail-wrapper .content-main p span{
    font-weight: bold;
    color: #2DAAED;
}
.content-detail-wrapper .content-main p a{
    color: #2DAAED;
    text-decoration: underline;
}
.content-detail-wrapper .content-main img {
    width: 800px;
    height: auto;
    margin-top: 24px;
    margin-bottom: 40px;
}
.content-detail-wrapper strong{
    font-weight: normal;
}
/* profile history */
.profile-history {
    padding-top: 40px;
}
.profile-history .profile-history-container {
    width: 1110px;
    margin: 0 auto;
    display: flex;
}
.profile-history-container .col-info-left {
    width: 350px;
    margin-right: 30px;
}
.profile-history-container .col-info-right {
    width: 730px;
}
.col-info-left .box-profile-wrapper {
    border: 1px solid rgba(28, 30, 32, 0.05);
    border-radius: 4px;
}
.title-profile-cpn {
    font-size: 14px;
    color: rgba(28, 30, 32, 0.88);
    font-weight: bold;
    padding: 22px 24px;
}
.box-profile-wrapper .profile-info-user {
    border-top: 1px solid rgba(28, 30, 32, 0.05);
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
    padding: 0 24px;
}
.profile-info-user .box-avatar-user {
    padding: 16px 0 15px 0;
    display: flex;
}
.profile-info-user .box-avatar-user .avatar {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.profile-info-user .box-avatar-user .profile-id {
    margin-left: 24px;
}
.box-avatar-user .profile-id .info-user-name {
    display: flex;
    align-items: center;
}
.box-avatar-user .profile-id .ic-vip-free {
    font-size: 28px;
    margin-right: 8px;
    color: #2DAAED;
}
.box-avatar-user .profile-id .ic-vip-free.active {
    color: #FFC40E;
}
.info-user-name .txt-name {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box-avatar-user .profile-id .date-vip {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}
.box-avatar-user .profile-id .date-vip .vip {
    color: #FFC40E;
    font-weight: bold;
}
.box-avatar-user .profile-id .key-id {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    padding-top: 4px;
}
.profile-info-user ul li {
    height: 40px;
    display: flex;
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.group-item .label {
    width: 75px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}
.group-item .info {
    font-size: 12px;
    /* margin-right: 14px; */
    color: rgba(0, 0, 0, 0.88);
}
.group-item .email-confirm {
    position: absolute;
    right: 0;
    cursor: pointer;
    font-size: 12px;
    color: #2DAAED;
}
.group-item .info.name {
    width: calc(100% - 113px);
}
.group-item .info.phone {
    width: calc(100% - 187px);
}
.group-item .info.email {
    width: calc(100% - 145px);
}
.group-item .info.phone,
.group-item .info.email,
.group-item .info.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-item .info.email-bill {
    margin-right: 18px;
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-item .bill-input-box {
    width: 238px;
    position: absolute;
    left: 65px;
}
.input-text-email-bill {
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: 10px;
    padding-right: 67px;
    width: 100%;
    height: 37px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.88);
    outline: 0;
    border-radius: 4px;
}
.btn-update-email-bill {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 12px;
    font-weight: bold;
    cursor: pointer;
    color: #2DAAED;
}
.box-profile-wrapper .card-extend-auto {
    padding: 0px 24px 0px 24px;
}
.card-extend-auto ul li {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
}
.card-extend-auto ul li:last-child {
    border-bottom: 0;
}
.info-item .ic-card-img {
    width: 32px;
}
.info-item .txt-label-card {
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
    margin-left: 8px;
    margin-right: 40px;
}
.info-item .btn-renew {
    position: absolute;
    right: 0;
    width: 32px;
    height: 16px;
}
.info-item .btn-renew input {
    opacity: 0;
}
.info-item .btn-renew label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(28, 30, 32, 0.2);
    width: 100%;
    width: 32px;
    height: 16px;
    border-radius: 16px;
    -webkit-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
}
.info-item .btn-renew label::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    top: 1px;
    z-index: 1;
    left: 1px;
    background-color: #fff;
    -webkit-transition: left .2s ease-in-out;
    transition: left .2s ease-in-out;
}
.info-item .btn-renew input[type=checkbox]:checked ~ label::after {
    left: 17px;
}
.info-item .btn-renew input[type=checkbox]:checked ~ label {
    background-color: #2DAAED;
}
.box-recent-transactions {
    margin-top: 16px;
    border-radius: 4px;
    border: 1px solid rgba(28, 30, 32, 0.05);
}
.box-recent-transactions ul {
    padding: 16px 24px;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.box-recent-transactions ul li {
    width: 100%;
    height: 40px;
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
}
.box-recent-transactions ul li:last-child { 
    border-bottom: 0;
}
.box-recent .img-card {
    width: 32px;
    margin-right: 8px;
}
.box-recent .f-card {
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
.box-recent .ic-remove {
    cursor: pointer;
    position: absolute;
    right: 0;
    font-size: 18px;
    color: rgba(28, 30, 32, 0.5);
}
/* table transaction */
.box-table-transaction {
    border: 1px solid rgba(28, 30, 32, 0.05);
    border-radius: 4px;
    padding-bottom: 8px;
}
.box-table-transaction table {
    width: 100%;
    table-layout: fixed;
}
.box-table-transaction table tr {
    height: 40px;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.box-table-transaction table tr td {
    vertical-align: middle;
    font-size: 12px;
    color: rgba(28, 30, 32, 0.5);
}
.box-table-transaction table tr td .thead {
    color: rgba(28, 30, 32, 0.88);
    font-weight: bold;
}
.header-table {
    background-color: rgba(28, 30, 32, 0.02);
}
.header-table .thead {
    text-transform: uppercase;
}
.header-table .thead.mb {
    display: none;
}
.body-table-item .col-1,
.header-table .col-1 {
    /* width: 150px; */
    word-wrap:break-word;
    padding-left: 24px;
}
.body-table-item .col-2,
.header-table .col-2 {
    padding: 0 4px;
}
.body-table-item .col-1 .txt.code {
    font-weight: bold;
}
.body-table-item .col-4 {
    word-wrap:break-word;
    padding: 0 4px;
}
.body-table-item .col-4 .space-code{
    color: #2DAAED;
    font-size: 12px;
    word-wrap:break-word;
}

/* giftcode pagination */
/* pagination */
.gift-code-pagination {
    padding-top: 8px;
    border-top: 1px solid rgba(28, 30, 32, 0.05);
}
.gift-code-pagination .gift-code-pagination-container {
    height: 35px;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
}
.gift-code-pagination-container .gift-code-pagination-wrapper {
    border-radius: 20px;
    border: 1px solid rgb(0, 0, 0, 0.1);
    width: auto;
    height: 35px;
    padding: 0 15px;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;    
    -moz-border-radius: 20px;
}
.gift-code-pagination-wrapper .number {
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    color: rgba(0, 0, 0, 0.88);
    background-color: transparent;
}
.gift-code-pagination-wrapper .number.active {
    color: #2DAAED;
    border-bottom: 1px solid #2DAAED;   
}
.gift-code-pagination-wrapper .number:hover {
    border-bottom: 1px solid #2DAAED;
}
.gift-code-pagination-wrapper .number.remove:hover {
    border-bottom: 1px solid transparent;
}
.gift-code-pagination-wrapper .line {
    width: 1px;
    height: 20px;
    background-color: rgb(0, 0, 0, 0.1);
}
.gift-code-pagination-wrapper .line.left {
    margin-right: 7px;
}
.gift-code-pagination-wrapper .line.right {
    margin-left: 7px;
}
.gift-code-pagination-wrapper .btn-arrow {
    padding: 10px 15px;
    border: none;
    outline: 0;
    background-color: transparent;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 20px;
}
.gift-code-pagination-wrapper .btn-arrow .ic-arrow {
    font-size: 15px;
    color: #2DAAED;
}
/* popup auto renew */
.popup-auto-renew {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 8;
}
.popup-auto-renew .auto-renew-content {
    width: 480px;
    padding-bottom: 30px;
    background-color: #FAFAFA;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    overflow: hidden;
}
.popup-auto-renew .auto-renew-content .ic-close {
    cursor: pointer;
    position: absolute;
    top: 21px;
    right: 24px;
    font-size: 18px;
    color: rgba(28, 30, 32, 0.5);
}
.popup-auto-renew .auto-renew-content .title-renew {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: rgba(28, 30, 32, 0.88);
    padding: 21px 0;
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
}
.popup-auto-renew .auto-renew-content .txt-auto-renew {
    font-size: 14px;
    color: rgba(28, 30, 32, 0.88);
    margin-top: 22px;
    margin-bottom: 23px;
    padding: 0 24px;
    line-height: 22px;
    text-align: center;
}
.popup-auto-renew .auto-renew-content .btn-auto-renew-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-auto-renew-wrapper .btn-renew {
    width: 160px;
    height: 40px;
    margin: 4px 8px;
    padding: 0;
    outline: none;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.btn-auto-renew-wrapper .btn-renew.cancel {
    color: rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.05);
}
.btn-auto-renew-wrapper .btn-renew.agree {
    color: #FFFFFF;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
.hide {
    display: none;
}
.info-renew-box {
    font-size: 13px;
    padding: 7px 0 16px 0;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    line-height: 18px;
}
.discountcode-error-txt {
    height: 25px;
    padding-top: 6px;
    font-size: 13px;
    color: #F44336;
}
/* popup error global  */
.popup-error-global {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}
.popup-error-global .error-global-wrapper {
    width: 480px;
    padding-bottom: 30px;
    background-color: #FAFAFA;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    overflow: hidden;
    text-align: center;
}
.error-global-wrapper .title-error-global {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: rgba(28, 30, 32, 0.88);
    padding: 21px 0;
    border-bottom: 1px solid rgba(28, 30, 32, 0.05);
}
.error-global-wrapper .txt-error-global {
    font-size: 14px;
    color: rgba(28, 30, 32, 0.88);
    padding: 23px 24px;
    line-height: 22px;
    text-align: center;
}
.error-global-wrapper .ic-close {
    cursor: pointer;
    position: absolute;
    top: 21px;
    right: 24px;
    font-size: 18px;
    color: rgba(28, 30, 32, 0.5);
}
.error-global-wrapper .btn-global {
    width: 230px;
    height: 40px;
    margin: 4px 8px;
    padding: 0;
    outline: none;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    color: rgba(0, 0, 0, 0.88);
    background-color: rgba(0, 0, 0, 0.05);
}
.error-global-wrapper .btn-global.active {
    color: #FFFFFF;
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}
/* list payment */

.list-payment {
    background-color: #efefef;
}
.list-payment  .list-payment-container {
    width: 1110px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.card-package .gift-sale {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
}

.card-package .gift-sale .ic-gift {
    width: 18px;
}

.card-package .gift-sale .txt-gift-sale {
    font-size: 12px;
    color: #FFC40E;
    font-weight: bold;
    margin-left: 8px;
    padding-top: 3px;
}

.box-card-package .text-note-sale {
    font-size: 12px;
    color: #FFC40E;
    margin-top: 14px;
    text-align: center;
}

.group-radio .tooltip {
    position: absolute;
    left: 280px;
    top: 22px;
}

.group-radio .tooltip .ic-gift {
    width: 18px;
    height: 18px;
}

.group-radio .tooltip::after {
    content: 'Giảm ngay 50%, 1 lần/tài khoản, đến hết 30/04';
    font-size: 12px;
    color: #FFC40E;
    font-weight: bold;
    margin: 2px 0 0 5px;
}

/* cooperation */
.list-payment-container .owl-carousel .owl-prev,
.list-payment-container .owl-carousel .owl-next {
    position: absolute;
    top: 23px;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    color: transparent;
}
.list-payment-container .owl-carousel .owl-prev .ic_caret_arrow_back,
.list-payment-container .owl-carousel .owl-next .ic_caret_arrow_next {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    color: transparent;
}

.list-payment-container .owl-carousel .owl-nav button.owl-next {
    right: 0;
    top: 20px;
}

.list-payment-container .owl-carousel .owl-nav button.owl-prev {
    left: 0;
    top: 20px;
}


.list-payment-container .owl-next .ic_caret_arrow_next::before,
.list-payment-container .owl-prev .ic_caret_arrow_back::before {
    position: absolute;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.5);
    top: 11px;
    left: 10px;
}

.list-payment-container .owl-carousel .owl-nav.disabled {
    display: block;
}

.list-payment-container .cooperation-img {
    text-align: center;
    display: flex;
    justify-content: center;
}

.list-payment-container .cooperation-img img {
    width: 80px;
}

/* update coin in payment */
.upgrade-content.coin-container {
    display: flex;  
    flex-wrap: wrap;  
    width: 760px;
    margin: 0 auto;
    margin-top: 16px;
}

.box-card-package.coin-card {
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;
}

.box-card-package.coin-card .package-name {
    position: absolute;
    top: 24px;
    left: 16px;
    font-size: 14px;
    line-height: 16px;
}

.box-card-package.coin-card .package-name span {
    font-size: 20px;
    margin-top: 4px;
    line-height: 24px;
    display: flex;
}

.box-card-package.coin-card .package-name span .img-coin {
    margin-left: 4px;
    width: 24px;
}

.box-card-package.coin-card .package-price {
    position: absolute;
    top: 43px;
    right: 32px;
}

.box-card-package.coin-card .package-price span {
    font-size: 29px;
}

.card-package .txt-buy-now.label-coin {
    background-image: linear-gradient(45deg, #2F80ED 0%, #00AEEF 100%);
}

.card-package .bg-card.bg-coin {
    background-image: url(../images/bg_package_payment_coin_20210616.png);
}

.box-card-package.coin-card .coin-card-wrapper:hover {
    box-shadow: 0 4px 8px rgba(45, 170, 237, 0.2);
}

.box-card-package .card-package.package-coin:hover {
    box-shadow: 0 0 0 1px #2DAAED;
}

/* update 5/7/21 */
.upgrade-content.wrapper-vip {
    display: flex;
    flex-wrap: wrap;
    width: 780px;
    margin: 0 auto;
    margin-top: 56px;
}

.card-package .bonus-coin-from-vip {
    position: absolute;
    bottom: 5px;
    display: flex;
    align-items: center;
    left: 16px;
    font-size: 12px;
    color: rgb(0, 0, 0, 0.5);
}

.card-package .bonus-coin-from-vip span {
    font-weight: bold;
    font-size: 12px;
}

.card-package .bonus-coin-from-vip img {
    width: 12px;
    margin: 0 4px;
}

.login-username .wrapper-info-profile {
    margin-right: 8px;    
}

.wrapper-info-profile .coin-detail-total {
    margin-top: 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #000;
}

.wrapper-info-profile .coin-detail-total img {
    width: 16px;
    margin-right: 4px;
}

.group-radio .payment-bonus-coin {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0 10px;
    height: 32px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(-45deg, #2DAAED 0%, #95D96D 100%);
    border-radius: 0 4px 0 16px;
    color: #fff;
    font-size: 14px;
}

.box-logout-info .logout-total-coin {
    margin-top: 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.box-logout-info .logout-total-coin img {
    width: 16px;
    margin-right: 4px;
}

.box-avatar-user .profile-id .expiry-date {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    padding-top: 4px;
}
.col-info-right .box-transaction-tab {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    background-color: rgba(28, 30, 32, 0.02);
    border: 1px solid rgba(28, 30, 32, 0.05);
    border-radius: 4px;
}

.box-transaction-tab .tab-item {
    /* width: 160px; */
    font-size: 14px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.88);
    text-transform: uppercase;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    margin: 0 15px;
}

.box-transaction-tab .tab-item:hover {
    border-bottom: 2px solid #2DAAED;
}

.box-transaction-tab .tab-item.active {
    border-bottom: 2px solid #2DAAED;
}

.header-table.header-coin {
    border-top: none;
    text-align: center;
}

.box-table-transaction.transaction-coin .body-table-item {
    text-align: center;
}

.body-table-item .txt.coin-label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-table-item .txt.coin-label img {
    width: 16px;
    margin: 0 4px;
}

.main-payment-container.tab-coin-container {
    padding-bottom: 0;
}

.iframe-embed {
    height: 100%;
    width: 100%;
}

/* code-discount */
.code-discount {
    width: 282px;
    height: 24px;
    border-radius: 4px;
    background-color: #D3ECF9;
    font-size: 12px;
    color: #2DAAED;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.code-discount span {
    font-weight: bold;
}