img{max-width: 100%; height: auto;}
.w-100{width: 100%;}
.w-60{width: 60%;}
.hr-border{ border-top: 1px solid #d3d3d3 !important; }
.nowrap{white-space: nowrap;}
.text-bold{font-weight: bold;}
.btn-yellow{background-color: #fc0; color: #2d3347;}
.btn-login-google{border: 1px solid #d3d3d3; padding: 10px 25px; border-radius: 6px; display: block; min-width: 250px; font-weight: 600; text-align: center; position: relative;}
.btn-login-google:before {content: ''; position: absolute; left: 10px; top: 10px; background-image: url('../images/ic-google.png'); background-repeat: no-repeat; background-size: contain; width: 24px; height: 23px; background-position: center;}
.dncloud-custom-radio.disabled{opacity: 0.8;}
@media (min-width: 768px) {
    .col-md-20 {flex: 0 0 20%;max-width: 20%;}
}

/*Header*/
.main-header .navbar-nav {flex-direction: row; display: flex; padding-left: 0; margin-bottom: 0; list-style: none; flex-wrap: wrap;}
.main-header .navbar-nav li a{font-size: 16px; color: var(--main-footer-extended-title-color); font-weight: 500; padding: 8px 20px;}
.main-header .navbar-nav li:first-child > a{padding-left: 0;}
.main-header .navbar-nav li.active a,
.main-header .navbar-nav li a:hover{color: var(--main-footer-link-hover-color);}

/*Main body*/
.main-body .main-body{padding-top: 30px; padding-bottom: 30px;}
.btn-secondary{background-color: #6c757d; border-color: #6c757d;}
.service-info .card-body > p{font-size: 18px; color: #000;}
.service-info .card-body > p span{font-size: 22px; font-weight: bold; margin-bottom: 7px;}

/*Login*/
.page-login{padding-top: 30px; padding-bottom: 30px;}
.login{margin: 0 auto;}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before{background-color: var(--btn-primary-hover-bg);}
.dataTables_wrapper{background: var(--ui-block-bg); box-shadow: var(--ui-block-shadow);border: var(--ui-block-border); border-radius: var(--ui-block-border-radius); padding: 15px 10px;}
.dataTables_wrapper .table-responsive{ min-height: 400px !important;}

/*custom loading*/
.custom-loading {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999999; display: none; text-align: center;}
.custom-loading>div {position: absolute; top: 45%; text-align: center; left: 0; right: 0;}

/*Tags Vps*/
.tags ul{list-style: none; padding-left: 0; margin-bottom: 0; margin-top: 10px;}
.tags ul li{display: inline-block; margin-right: 10px; margin-bottom: 10px; background-color: #e2e0e0; color: #000;}

/*Home*/
.package{position: relative; height: calc(100% - 24px);}
.package > .feature-package{position: absolute; top: 0; left: 0; width: 100%; z-index: 1; background: var(--btn-primary-bg); padding: 10px;}
.package > .feature-package p{margin-bottom: 0; text-align: center; color: #fff; font-size: 16px;}
.package-header .package-title{min-height: 68px; margin-top: 10px;}
.section-bg{background-color: #f5f9ff !important;}
.app-main section:not(.index-0){padding-top: 60px; padding-bottom: 60px; margin-top: 0;}
.app-main section .section-header{margin-bottom: 20px;}
.app-main section .section-header .section-title{font-size: 32px; font-weight: bold; margin-bottom: 15px; line-height: 1.4;}
.app-main section .section-header p{font-size: 16px;}
.app-main .index-2 .card{margin-bottom: 20px;}
.app-main .index-2 .card-body h3,
.app-main .index-4 .card-body h3{font-size: 22px; margin-bottom: 10px;}
.app-main .index-2 .shostvn-text-price{margin-bottom: 0;}
.app-main .index-2 .card-body .text{font-weight: bold; color: #000;}
.app-main .index-2 .card-body .description{min-height: 75px;}
.section.index-0 h1{line-height: 1.4; font-size: 46px;}
.banner-home{background: #1d223d;}
.banner-home .button-info{margin-top: 50px;}
.banner-home .button-info > a{border-radius: 8px; display: inline-block; padding: 10px 15px; border: 1px solid #fc0; background-color: #fc0; color: #2d3347; font-size: 18px; margin-right: 10px; margin-bottom: 10px; line-height: 1.4;}
.banner-home .button-info > a.btn-login-google{background-color: transparent; color: #fff; border-color: #fff;}
.banner-home .box-info .card{text-align: left;}
.banner-home .box-info .card p {font-size: 16px; margin-bottom: 5px;}
.banner-home .box-info .card p i{color: var(--link-color); font-size: 18px; margin-right: 7px;}
.banner-home .box-info .card h4{color: var(--link-color); font-weight: bold; margin-bottom: 0;}
.section.index-4 .card{height: calc(100% - 24px);}
.section.index-5 #accordion .card{margin-bottom: 10px;}
.section.index-5 #accordion .card-header{padding: 10px 15px !important;}
.section.index-5 #accordion .card-header button{padding: 0 !important; width: 100%; height: auto; font-size: 16px; color: #000; font-weight: 500; text-align: left; justify-content: left;}
.section.index-5 #accordion .card-body{background-color: #fff; color: #000;}
.section.index-5 #accordion .card-header button:before {position: absolute; right: 7px; top: 0; font-size: 18px; display: block; font-family: FontAwesome; display: inline-block; padding-right: 3px; vertical-align: middle; font-size: 16px; color: #000;}
.section.index-5 #accordion .card-header button[aria-expanded="false"]:before {content: "\f107";}
.section.index-5 #accordion .card-header button[aria-expanded="true"]:before {content: "\f106";}
.nav.nav-tabs a{padding-left: 6px; padding-right: 6px;}
@media (min-width: 992px) {
    .modal-lg {width: 800px !important; max-width: 100%;}
}
@media (max-width: 1200px) {
    .nav.nav-tabs{flex-wrap: nowrap !important; overflow-x: scroll; overflow-y: hidden !important; justify-content: start !important;}
    .nav.nav-tabs a{white-space: nowrap !important; padding-left: 10px; padding-right: 10px;}
}
@media (max-width: 768px) {
    .section.index-0 h1{line-height: 1.4; font-size: 32px; margin-top: 32px;}
    .app-main section:not(.index-0){padding-top: 20px; padding-bottom: 20px;}
    .app-main .index-4 .card{margin-bottom: 20px;}
    .app-main .index-4 .card-body h3{font-size: 16px; white-space: nowrap;}
    .app-main .index-2 .card-body h3, .app-main .index-4 .card-body h3{font-size: 20px; line-height: 1.2;}
    .app-main .index-2 .card-body .description{font-size: 12px;}
}

/*Payment success*/
#card-payment {position: relative; width: 440px; display: block; margin: 40px auto; text-align: center;}
#card-payment #upper-side {padding: 0 2em 2em; background-color: #8bc34a; display: block; color: #fff; border-top-right-radius: 8px; border-top-left-radius: 8px;}
#card-payment #checkmark {fill: #fff; width: 210px; height: 150px;}
#card-payment #lower-side {padding: 2em 2em 5em; background: #fff; display: block; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
#card-payment #contBtn {position: relative; text-decoration: none; background: #8bc34a; color: #fff; margin: auto; padding: 0.8em 3em; -webkit-box-shadow: 0 15px 30px rgba(50, 50, 50, 0.21); -moz-box-shadow: 0 15px 30px rgba(50, 50, 50, 0.21); box-shadow: 0 15px 30px rgba(50, 50, 50, 0.21); border-radius: 25px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
#card-payment #contBtn:hover {-webkit-box-shadow: 0 15px 30px rgba(50, 50, 50, 0.41); -moz-box-shadow: 0 15px 30px rgba(50, 50, 50, 0.41); box-shadow: 0 15px 30px rgba(50, 50, 50, 0.41); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
tr.tr-bg-red td {background-color: rgba(212, 82, 82, 0.4) !important;}
tr.tr-bg-yellow td {background-color: rgba(214, 202, 35, 0.8) !important;}

/*Icon Password*/
.hideShowPassword-toggle {
    background-color: transparent;
    background-image: url('../../images/pw-view.png');
    /* fallback */
    background-position: center center;
    background-size: 24px 18px;
    background-repeat: no-repeat;
    border: 2px solid transparent;
    border-radius: 0.25em;
    cursor: pointer;
    font-size: 100%;
    height: 37px;
    margin: 0;
    max-height: 100%;
    padding: 0;
    overflow: 'hidden';
    text-indent: -999em;
    width: 46px;
    -moz-appearance: none;
    -webkit-appearance: none;
    top: 22px !important;
}

.hideShowPassword-toggle-hide {
    background-image: url('../../images/pw-not-view.png');
    /* fallback */
    background-size: 24px 18px;
}

.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
    border-color: transparent;
    outline: transparent;
}

.hideShowPassword-wrapper input {
    border-radius: 0;
}

/*Loading Button*/
.btn.loading {
    opacity: 1 !important;
    position: relative;
    color: rgba(255, 255, 255, 0.05) !important;
    pointer-events: none !important;
}
.btn.loading svg,
.btn.loading img{
    opacity: 0;
    visibility: hidden;
}
.btn.loading:after, .loader {
    animation: spin 500ms infinite linear;
    border: 2px solid #fff;
    border-radius: 32px;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    content: "";
    display: block;
    height: 16px;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    width: 16px;
}
.btn.loading.text-danger,
.btn.loading.text-primary{
    text-indent: -9999px;
}
.btn.loading.like:after,
.btn.loading.text-primary:after{
    border: 2px solid var(--primary);
}
.btn.loading.text-danger:after{
    border: 2px solid var(--danger);
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*Status*/
.bag{
    display: inline-block;
    padding: 1px 3px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}
.bag-status-0{
    background-color: rgb(199, 164, 76);
}

.bag-status-1{
    background-color: rgb(7, 52, 177);
}

.bag-active-1,
.bag-status-2{
    background-color: rgb(25, 146, 25);
}

.bag-active-0,
.bag-active-3,
.bag-active-5,
.bag-status-3{
    background-color: rgb(235, 60, 60);
}

/*Language*/
#dropdown-language{padding: 6px 12px; color: var(--text-heading-color);}
#dropdown-language svg{width: 24px; height: 24px;}

/*Switch*/
.switch-button {
    display: inline-block;
    border-radius: 50px;
    background-color: #b3b3b3;
    width: 60px;
    height: 27px;
    padding: 4px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}
.switch-button input[type=checkbox] {
    display: none;
}
.switch-button label {
    border-radius: 50%;
    -webkit-box-shadow: 0 0 1px 1px #fff inset;
    box-shadow: 0 0 1px 1px #FFF inset;
    background-color: #ffffff;
    margin: 0;
    height: 19px;
    width: 19px;
    z-index: 1;
    display: inline-block;
    cursor: pointer;
    background-clip: padding-box;
}
.switch-button label:before {
    position: absolute;
    font-size: 0.8462rem;
    font-weight: 600;
    z-index: 0;
    content: "OFF";
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 27px;
    top: 0;
    text-align: right;
    padding-right: 10px;
    color: #ffffff;
}
.switch-button input[type=checkbox]:checked + span {
    background-color: #fe669e;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 4px;
}
.switch-button input[type=checkbox]:checked + span label {
    float: right;
    border-color: #fe4d8e;
}
.switch-button input[type=checkbox]:checked + span label:before {
    position: absolute;
    font-size: 0.8462rem;
    font-weight: 600;
    z-index: 0;
    content: "ON";
    color: #ffffff;
    left: 0;
    text-align: left;
    padding-left: 10px;
}
.switch-button.switch-button-yesno label:before {
    content: "NO";
}
.switch-button.switch-button-yesno input[type=checkbox]:checked + span label:before {
    content: "YES";
}
.switch-button.switch-button-xs {
    height: 20px;
    width: 53px;
    line-height: 16px;
    width: 50px;
}
.switch-button.switch-button-xs label {
    height: 12px;
    width: 12px;
}
.switch-button.switch-button-xs label:before {
    line-height: 21px;
}
.switch-button.switch-button-sm {
    height: 24px;
    width: 57px;
    line-height: 20px;
}
.switch-button.switch-button-sm label {
    height: 16px;
    width: 16px;
}
.switch-button.switch-button-sm label:before {
    line-height: 25px;
}
.switch-button.switch-button-lg {
    height: 30px;
    width: 63px;
    line-height: 26px;
    width: 65px;
}
.switch-button.switch-button-lg label {
    height: 22px;
    width: 22px;
}
.switch-button.switch-button-lg label:before {
    line-height: 31px;
}
.switch-button.switch-button-success {
    background-color: #b3b3b3;
}
.switch-button.switch-button-success label {
    border-color: #ababab;
}
.switch-button.switch-button-success input[type=checkbox]:checked + span {
    background-color: #34a853;
}
.switch-button.switch-button-success input[type=checkbox]:checked + span label {
    border-color: #2e9549;
}
.switch-button.switch-button-warning {
    background-color: #b3b3b3;
}
.switch-button.switch-button-warning label {
    border-color: #ababab;
}
.switch-button.switch-button-warning input[type=checkbox]:checked + span {
    background-color: #fbbc05;
}
.switch-button.switch-button-warning input[type=checkbox]:checked + span label {
    border-color: #e3aa04;
}
.switch-button.switch-button-danger {
    background-color: #b3b3b3;
}
.switch-button.switch-button-danger label {
    border-color: #ababab;
}
.switch-button.switch-button-danger input[type=checkbox]:checked + span {
    background-color: #ea4335;
}
.switch-button.switch-button-danger input[type=checkbox]:checked + span label {
    border-color: #e82e1e;
}

/*Table*/
.table-list thead tr th{
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

.table > tbody > tr > td, 
.table > tfoot > tr > td, 
table > tbody > tr > td, 
table > tfoot > tr > td{
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}

@media (max-width: 768px) {
    table.table-mobile,
    table.table-mobile thead,
    table.table-mobile tbody,
    table.table-mobile th,
    table.table-mobile td,
    table.table-mobile tr {
        display: block !important;
        max-width: 100% !important;
    }
    table.table-mobile thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
        opacity: 0;
    }
    table.table-mobile tr {
        border: 1px solid #ccc;
    }
    table.table-mobile td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        text-align: left !important;
        width: 100% !important;
        min-height: 30px;
    }

    table.table-mobile.two-line td{
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    table.table-mobile.three-line td{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    table.table-mobile td:before {
        content: attr(data-title);
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45% !important;
        padding-right: 10px;
        text-align: left !important;
    }
    table.table-mobile td.action {
        padding-left: 12px !important;
        text-align: left !important;
    }
    table.table-mobile input[type="number"] {
        max-width: 140px;
    }
    table.table-mobile .checkbox {
        margin-bottom: 10px;
    }
    table.table-mobile .checkbox label:after {
        text-indent: 0 !important;
    }
}

/*Menu*/
#main-nav .nav-item{
    position: initial;
}
#main-nav .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    min-width: 1140px;
    top: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 100;
    left: 0;
    padding: 20px;
}
#main-nav .dropdown-content.small-width{
    min-width: 760px;
}
#main-nav .dedicated.dropdown-content {
    min-width: 420px;
    left: 0px;
}
#main-nav .dropdown-content .column h5 {
    font-size: 14px;
    font-weight: bold;
    color: var(--panel-sidebar-link-color);
}
#main-nav .dropdown-content .column a{
    float: none;
    padding: 4px 0;
    text-decoration: none;
    display: block;
    text-align: left;
    line-height: 1.5;
    font-size: 14px;
    min-height: auto;
    margin-bottom: 5px;
}
.faq .pt-tab-info ul{
    padding-left: 0;
}
.faq .pt-tab-info ul li {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
}

.faq .pt-tab-info ul li:before {
    font-family: "FontAwesome";
    content: "\f00c";
    margin-right: 10px;
}
.nav-unit-price{min-width: 170px; font-size: 18px;}
@media (min-width: 992px) { 
    #main-nav .nav-item:hover > .dropdown-content {display: block;}
}

@media (max-width: 991px) {
    #main-nav .menu-mobile i { color: #fff; font-size: 24px;}
    #main-nav .logo{margin-bottom: 10px; display: block; text-align: center; }
    #main-nav .logo img {width: 260px;}
    #main-nav .navbar .navbar-nav {display: none; position: absolute; right: -24px; top: 40px; width: 100vw; z-index: 10; background-color: #fff; box-shadow: var(--box-shadow-sm) !important; border-top: 1px dotted #ccc;}
    #main-nav .navbar .navbar-nav > li{width: 100%; display: block; border-bottom: 1px dotted #ccc;}
    #main-nav .navbar .navbar-nav > li a{min-height: auto; padding-top: 10px; padding-bottom: 10px; justify-content: space-between; color: var(--main-footer-extended-title-color);}
    .main-header .navbar-nav li:first-child > a{padding-left: 20px;}
    #main-nav .navbar-nav > li .dropdown-content {position: relative; min-width: 100%; left: auto; top: auto; border: 0; box-shadow: none !important;}
    #main-nav .navbar-nav > li .dropdown-content.show{display: block !important;}
    #main-nav .dropdown-content .column{ border-bottom: 1px dotted #ccc; padding-bottom: 10px; margin-bottom: 10px;}
    #main-nav .dropdown-content .column:last-child {border-bottom: 0; margin-bottom: 0;}
    #main-nav .dropdown-content .column a{padding-top: 3px; padding-bottom: 3px;}
    #main-nav .languages .dropdown-menu{left: auto; right: 0;}
    .main-header .nav-bottom a.is-trial::after{left: 120px !important; top: 15px  !important;}
}
@media (max-width: 540px) {
    #main-nav #dropdownMenuMyAccount .active-client{display: none;}
}
@media (max-width: 400px) {
    .top-nav .my-account #dropdownMenuMyAccount .text-secondary{display: none;}
}

/*Invite*/
.invite .page-content{padding-top: 0;}
.invite .page-content > .container{max-width: 100%;width: 100% !important;padding: 0;}
.irefer-banner{background-image: url('../images/mentor-hero.png');padding-top: 60px;padding-bottom: 180px;background-size: cover;background-repeat: no-repeat;}
.irefer-banner p{font-size: 16px;color: #fff;}
.irefer-wrap .share-box {position: relative;top: -120px;padding: 45px;background-color: #fff;border: 1px solid #dce0e0;margin-bottom: -100px;}
.irefer-wrap .irefer-code{position: relative;top: -85px;margin-bottom: -85px;}
.irefer-wrap .irefer-code h3{margin-bottom: 20px;}
.irefer-wrap .share-box .input-group-btn .btn{min-width: 150px;border-color: #ff5a5f;background-color: #ff5a5f;color: #fff;height: 35px;-webkit-border-top-left-radius: 0;-moz-border-radius-topleft: 0;border-top-left-radius: 0;-webkit-border-bottom-left-radius: 0;-moz-border-radius-bottomleft: 0;border-bottom-left-radius: 0;}
.irefer-wrap .share-box input.form-control{background-color: #fff; border-radius: 0;}
.irefer-wrap .or-separator {background: none;height: 34px;position: relative;text-align: center;margin: 10px 0;}
.irefer-wrap .or-separator--text {background-color: #fff;display: inline-block;padding: 0 10px;}
.irefer-wrap .or-separator hr {margin: -16px auto 10px;width: 100%;border-top: 1px solid #dce0e0;}
.irefer-wrap .social-share-btn{min-width: 160px;margin-bottom: 10px;position: relative;margin-left: 10px;color: #fff !important;border-radius: 4px !important;}
.irefer-wrap .social-share-btn i.fa {position: absolute;top: 9px;left: 15px;}
.irefer-wrap .avatar-bg{width: 120px;height: 120px;background-size: cover;background-repeat: no-repeat;border-radius: 50%;margin: 0 auto;}
.irefer-wrap .btn-facebook-messenger {border-color: #0084ff !important;background-color: #0084ff !important;color: #fff;}
.irefer-wrap .btn-facebook {border-color: #3B5998 !important;background-color: #3B5998 !important;color: #fff;}
.irefer-wrap .btn-send-invite{border-radius: 0 !important;padding: 0 !important;height: 34px !important;}
#invite-modal .panel-header {background-color: #edefed;color: #484848;font-size: 16px;padding: 12px 20px;border-bottom: 1px solid #dce0e0;position: relative;}
#invite-modal .panel-header .panel-close{float: right;cursor: pointer;line-height: 0.7;vertical-align: middle;font-style: normal;font-weight: normal;color: #bbb !important;background-color: transparent;border: none;padding: 0;margin: 0;}
#invite-modal .panel-header .contact-search {padding: 10px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;padding-left: 37px;width: 100%;}
#invite-modal .panel-body-scroll{overflow-x: hidden;height: 390px;width: 100%;padding: 0;overflow-y: scroll;}
#invite-modal .panel-body-scroll .list-layout{padding-left: 0;}
#invite-modal .panel-body-scroll .list-layout li{margin-bottom: 10px;color: #484848;font-size: 16px;line-height: 1px;}
#invite-modal .panel-header .contact-search-icon {position: absolute;top: 21px;left: 31px;font-size: 21px;color: #aaa;}
#invite-modal .panel-body-list{padding: 20px;margin: 0;}
#invite-modal .hide {display: none !important;}
#invite-modal .checkbox {margin-top: 0;margin-bottom: 0;padding-left: 20px;}
#invite-modal .checkbox input[type="checkbox"]{position: absolute;margin-left: -20px;opacity: 0;z-index: 1;cursor: pointer;}
#invite-modal .checkbox label{padding-left: 10px;top: 5px;display: inline-block;vertical-align: middle;position: relative;min-height: 20px;margin-bottom: 0;font-weight: normal;cursor: pointer;}
#invite-modal .checkbox label::before{top: -6px;content: "";display: inline-block;position: absolute;width: 17px;height: 17px;left: 0;margin-left: -20px;border: 1px solid #cccccc;border-radius: 3px;background-color: #fff;-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;transition: border 0.15s ease-in-out, color 0.15s ease-in-out;}
#invite-modal .checkbox label::after {display: inline-block;position: absolute;width: 16px;height: 16px;left: 0;top: 0; margin-left: -20px;padding-left: 4px;padding-top: 2px;font-size: 11px;color: #555555;}
#invite-modal .checkbox input[type="checkbox"]:checked + label::after{font-family: "FontAwesome";content: "\f00c";}
#invite-modal .modal-footer .checkbox label{top: -5px;}
#invite-modal .modal-footer .checkbox label:before{top: 4px;}
#invite-modal .modal-footer .checkbox label:after{top: 4px;}
#invite-modal .btn-default{border-radius: 0;height: auto;padding: 6px 15px;}
.social-footer li{margin-bottom: 0; display: inline-block;}
.social-footer li a{padding: 6px 10px !important; color: #fff !important; display: block !important;}
.social-footer li a i{color: #fff !important; margin-right: 0 !important;}
.social-footer li a img{width: 18px; height: 18px;}
.social-footer li a span{margin-left: 4px;}

#fixed-social {position: fixed; top: 45%; left: 0; z-index: 10;}
#fixed-social a {color: #fff; display: block; height: 60px; position: relative; text-align: center; line-height: 60px; width: 60px; margin-bottom: 1px; z-index: 2; margin-bottom: 10px;}
#fixed-social a img {width: 40px; height: 40px;}
#fixed-social a i{font-size: 40px; margin-top: 5px;}
#fixed-social a:hover>span{visibility: visible; left: 61px; opacity: 1;} 
#fixed-social a span {line-height: 60px; left: 100px; position: absolute; text-align: center; width: 120px; visibility: hidden; transition-duration: 0.5s; z-index: 1; opacity: 0;}
.social-footer a.facebook,
.fixed-facebook{background-color: #1778f2; display: none !important;}
.fixed-facebook span{background-color: #1778f2;}
.fixed-zalo{background-color: #0065f7;}
.fixed-zalo span{background-color: #0065f7;}
.social-footer a.telegram,
.fixed-telegram{background-color: #25a2df;}
.fixed-telegram span{background-color: #25a2df;}
@media (max-width: 768px) {
    #fixed-social a{width: 40px; height: 40px; line-height: 40px;}
    #fixed-social a span {display: none !important; }
    #fixed-social a img {width: 30px; height: 30px;}
    #fixed-social a i{font-size: 30px;}
    .main-footer-extended .footer-top .footer-site-map .footer-title{font-size: 16px; color: #fff !important;}
}

/*Notification*/
.header-notification a.view-notification{display: block; background-color: transparent !important;}
.header-notification a.view-notification p,
.header-notification a.view-notification span{font-size: 14px; margin-bottom: 7px; line-height: 1.4; white-space: normal; color: var(--gray-darker);}
.header-notification .view-notification .media {align-items: center;}
.header-notification .view-notification .media .notifi-icon{width: 20px;}
.header-notification .view-notification .media .media-body{width: calc(100% - 20px); max-width: calc(100% - 20px);}
.header-notification a.view-notification i{font-size: 20px; color: var(--gray-darker);}
.header-notification .show-notification li{padding-top: 5px; padding-bottom: 5px; list-style: none;}
.header-notification .dropdown-notification{position: relative;}
.header-notification .dropdown-notification .dropdown-toggle i{font-size: 20px; color: var(--gray-darker); cursor: pointer;}
.header-notification .dropdown-notification .dropdown-toggle:after{ display: none;}
.header-notification .show-notification{max-height: 300px; width: 330px; overflow-y: scroll; top: 55px; padding-left: 15px;}
.header-notification .show-notification li:first-child{ border-top: 0 !important;}
.header-notification .show-notification li:first-child a{ background-color: transparent !important;}
.header-main.sticky .header-notification .dropdown-notification .dropdown-toggle i{ color: #111111;}
.header-main.sticky .dropdown-notification > .dropdown-menu{ top: 30px !important;}
.dropdown-notification .bg-c-pink{ position: absolute; top: -5px; left: 14px; background-color: #ff0000; color: #fff; font-size: 10px;}

/*Comment*/
.list-comment .comment-item {display: block; position: relative; margin-bottom: 30px; padding-left: 90px;}
.list-comment .comment-item .comment-author-ava {display: block; position: absolute; top: 0; left: 0; width: 80px; border-radius: 50%; text-align: center;}
.list-comment .comment-item .comment-author-ava>img {width: 50px; height: 50px; min-width: 50px; object-position: center; object-fit: cover; border-radius: 50%;}
.list-comment .comment-item .comment-body {position: relative; padding: 24px; border: 1px solid #e1e7ec; border-radius: 7px; background-color: #fff}
.list-comment .comment-item .comment-body::after,
.list-comment .comment-item .comment-body::before {position: absolute; top: 12px; right: 100%; width: 0; height: 0; border: solid transparent; content: ''; pointer-events: none}
.list-comment .comment-item .comment-body::after {border-width: 9px; border-color: transparent; border-right-color: #fff}
.list-comment .comment-item .comment-body::before { margin-top: -1px; border-width: 10px; border-color: transparent; border-right-color: #e1e7ec}
.list-comment .comment-item .comment-title {margin-bottom: 8px;color: #606975; font-size: 14px; font-weight: 500}
.list-comment .comment-item .comment-text {margin-bottom: 12px}
.list-comment .comment-item .comment-footer {display: table; width: 100%; position: relative;}
.list-comment .comment-item .comment-footer>.column { display: table-cell; vertical-align: middle}
.list-comment .comment-item .comment-footer>.column:last-child {text-align: right}
.list-comment .comment-item .comment-meta {color: #9da9b9; font-size: 13px}
.list-comment .comment-item .comment-footer .edit-comment{position: absolute; bottom: 0; right: 10px; z-index: 1;}
.list-comment .comment-item .comment-footer .edit-comment a{font-size: 13px;}
.list-comment .comment-item .reply-link {transition: color .3s; color: #606975; font-size: 14px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none}
.list-comment .comment-item .reply-link>i {display: inline-block; margin-top: -3px; margin-right: 4px; vertical-align: middle}
.list-comment .comment-item .reply-link:hover {color: #0da9ef}
.list-comment .comment-item .comment-reply {margin-top: 30px; margin-bottom: 0}
.avatar-wrap .img-circle{width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center;}
.avatar-wrap .comment-auth{font-size: 15px; font-weight: bold;}
.images-detail img{width: auto; height: 200px;}
@media (max-width: 576px) {
    .list-comment .comment-item {padding-left: 0}
    .list-comment .comment-item .comment-author-ava {display: none}
    .list-comment .comment-item .comment-body {padding: 15px}
    .list-comment .comment-item .comment-body::before,
    .list-comment .comment-item .comment-body::after {display: none}
}

/*Custom Header*/
.your-balance{min-width: 150px; display: flex; text-align: center; align-items: center; border-radius: 4px; background-color: rgba(237, 240, 244, 1); color: rgba(45, 51, 71); padding: 8px 10px;}
.your-balance.your-price{min-width: 70px;}
.your-balance.your-price span{font-size: 16px; font-weight: bold; display: inline-block;}
.main-header .nav-bottom{background-color: var(--brand-primary);}
.main-header .nav-bottom .navbar-nav > li > a{color: #fff;}
.main-header .nav-bottom .dropdown-toggle::after{color: #fff;}
.main-header .nav-bottom a.is-trial{position: relative;}
.main-header .nav-bottom a.is-trial::after{content: ''; position: absolute; left: 0; top: 42px; background-image: url('../images/ic-trial.png'); background-repeat: no-repeat; background-size: 100% auto; width: 75px; height: 16px;}
.main-header .menu-icon-info .icon{margin-right: 10px;}
.main-header .menu-icon-info .icon img{width: 42px; max-width: 42px;}
.main-header .menu-icon-info .info {padding-right: 10px;}
.main-header .menu-icon-info .info h6{margin-bottom: 5px; font-weight: bold;}
.main-header .menu-icon-info .info:hover h6{color: var(--panel-sidebar-link-color);}
.main-header .menu-icon-info .trial{width: 150px; border-left: 1px solid #d3d3d3; padding-left: 5px;}
.main-header .menu-icon-info .trial p{margin-bottom: 0;}
.main-header .menu-icon-info .trial p span{display: block; white-space: nowrap;}
.main-header .dropdown-content .column h5{margin-bottom: 7px; margin-top: 0;}
.main-header .dropdown-content .column a > i,
.main-header .dropdown-content .column a > img{margin-right: 5px;}
.main-header .dropdown-content .column a > h6{margin-bottom: 5px; font-weight: bold;}
.main-header .dropdown-content .column a:hover h6{color: var(--panel-sidebar-link-color);}
.main-header .dropdown-content .column a > h6 sup{font-size: 12px; color: #e3aa04;}
@media (max-width: 991px) {
    .main-header .nav-bottom{padding-top: 10px; padding-bottom: 10px;}
}
@media (max-width: 768px) {
    .your-balance{margin-bottom: 15px; min-width: inherit; font-size: 12px;}
    .your-balance.your-price span{font-size: 12px;}
    .main-header .recharge-now{display: none;}
}


/*Faq*/
.list-category{margin-bottom: 0; margin-top: 0;}
.list-category ul{list-style: none; padding-left: 0; margin-bottom: 0;}
.list-category ul li{display: inline-block; margin-right: 5px; margin-bottom: 5px;}
.list-category ul li a{font-size: 15px; font-weight: 500; text-align: center; color: rgba(0, 0, 0, 0.85); padding: 7px 20px; border-radius: 26px; border: 1px solid #F0F4F5; cursor: pointer; background-color: #fff; transition: all 0.2s ease-in-out; display: inline-block; box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2); -webkit-box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2);}
.list-category ul li a.active,
.list-category ul li a:hover{color: #fff !important; border-color: #25a75b; background-color: #25a75b !important;}
.faqs-list{margin-bottom: 30px;}
.faqs-list .faq-item{background-color: #fff; padding: 10px; border-radius: 6px; margin-bottom: 15px; height: calc(100% - 15px); box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2); -webkit-box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow: -1px 0px 4px 0px rgba(0,0,0,0.2);}
.faqs-list .faq-item .img{overflow: hidden; width: 100%; height: 180px;}
.faqs-list .faq-item .img img{height: 180px; width: 100%; object-fit: cover; object-position: center; transition: all 0.3s ease-in-out; }
.faqs-list .faq-item .img img:hover{transform: scale(1.1); }
.faqs-list .faq-content{padding: 10px 15px;}
.faqs-list .faq-content a{font-size: 16px; font-weight: 500; text-align: left; color: rgba(0, 0, 0, 0.85);}

/*-- Table of Contents CSS --*/
.faq-detail-toc ol {counter-reset: section;}
.faq-detail-toc .icon-header-container {border: 1px solid #bbb; padding: 1px 5px; border-radius: 5px; font-size: 22px; line-height: 25px; display: none;}
.faq-detail-toc #ftwp-header-minimize{display: none;}
.faq-detail-toc #ftwp-container.ftwp-fixed-to-post {position: relative; z-index: 10;}
.faq-detail-toc #ftwp-container.ftwp-wrap {font-family: inherit;}
.faq-detail-toc button#ftwp-trigger {position: fixed; top: 0; bottom: 0; margin: auto 0; display: none;}
.faq-detail-toc #ftwp-container #ftwp-trigger .icon-header-container {background: #fff; padding: 0 7px; box-shadow: 10px 0 30px #888888; border-radius: 0 10px 10px 0;}
.faq-detail-toc #ftwp-container.ftwp-wrap #ftwp-header .icon-header-container {border: none; pointer-events: none;}
.faq-detail-toc nav#ftwp-contents {position:relative; width: 350px; max-width: 100%; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; background-color: #fff; overflow: hidden;}
.faq-detail-toc nav#ftwp-contents.active {visibility: visible; z-index: 101; -webkit-animation: ftwpZoomIn .3s ease-out forwards; animation: ftwpZoomIn .3s ease-out forwards}
.faq-detail-toc #ftwp-container.ftwp-wrap #ftwp-header {color: #fff; background-color: var(--brand-primary); padding: 6px 10px; font-size: 14px; line-height: 1; -webkit-transition: background .3s; transition: background .3s; position: relative; display: flex; align-items: center;}
.faq-detail-toc .ftwp-body{padding: 10px; background-color: #edf0f5;}
.faq-detail-toc h3#ftwp-header-title {margin: 0 0 0 10px; color: #fff; font-size: 22px;}
.faq-detail-toc .ftwp-close{color: #fff !important; position: absolute; right: 10px; top: 12px; z-index: 1; display: none;}
.faq-detail-toc #ftwp-contents #list-heading {padding: 5px 10px 5px 25px; font-size: 16px; list-style: decimal;}
.faq-detail-toc #ftwp-contents li{margin-bottom: 7px;}
.faq-detail-toc #ftwp-contents #list-heading a {padding: 3px 0;display: block; color: var(--text-body-color);}
.faq-detail-toc #ftwp-contents > ol > li > a {font-weight: 600;}
.faq-detail-toc #ftwp-container.active .box-ftwp {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: transparent;}
.faq-detail-toc #ftwp-contents.active{animation: ftwpZoomOut .4s ease-in forwards; -webkit-animation: ftwpZoomOut .4s ease-in forwards;}
@-webkit-keyframes ftwpZoomIn {
    0% {-webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0}
    20% {opacity: 0}
    30% {opacity: 1}
    to {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1}
}
@keyframes ftwpZoomIn {
    0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0}
    20% {opacity: 0}
    30% {opacity: 1}
    to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1}
}
@-webkit-keyframes ftwpZoomOut {
    0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1}
    50% {opacity: 1}
    80% {opacity: .3}
    to {-webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0 }
}
@keyframes ftwpZoomOut {
    0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible;opacity: 1}
    50% {opacity: 1}
    80% {opacity: .3}
    to { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0}
}
@media (max-width: 768px) {
    .faq-detail-toc #ftwp-container.ftwp-fixed-to-post{ position: fixed; top: 110px; left: 5px; z-index: 100;}
    .faq-detail-toc nav#ftwp-contents{visibility: hidden;}
    .faq-detail-toc .icon-header-container{display: inline-block; background-color: #fff;}
    .faq-detail-toc .ftwp-body{height: 340px; overflow-y: scroll;}
    .faq-detail-toc .ftwp-close{display: block;}
}
/*-- End Table of Contents CSS --*/

/*Slider*/
.slick-slider .slick-list {margin: 0 -10px;}
.slick-slider .slick-list .slick-slide{padding: 0 10px;}
.slick-slider .prev-slider,
.slick-slider .next-slider {position: absolute; top: 45%; z-index: 2; width: 48px; height: 48px; color: #fff; border: 1px solid #fff; border-radius: 50%; display: -webkit-box;   display: -webkit-flex;  display: flex;  justify-content: center;   align-items: center;  cursor: pointer; text-decoration: none; box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.15) !important;}
.slick-slider .prev-slider i,
.slick-slider .next-slider i {font-size: 22px;}
.slick-slider .prev-slider {left: -65px; padding: 10px; background-color: #fff;}
.slick-slider .next-slider {right: -65px; padding: 10px; background-color: #fff;}
.slick-slider .slick-dots {list-style: none; padding-left: 0; margin-bottom: 0; display: -webkit-box; display: -webkit-flex;  display: flex;  justify-content: center; position: absolute; bottom: 30px; left: 0; width: 100%; z-index: 100;}
.slick-slider .slick-dots li {margin-bottom: 0; margin-right: 10px;}
.slick-slider .slick-dots button {text-indent: -9999999px; padding: 0 !important; border: 1px solid #fff; width: 16px !important; height: 16px !important; border-radius: 50%; background-color: #fff; outline: 0!important; box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.15) !important; outline: 0 !important;}
.slick-slider .slick-dots li.slick-active button {background-color: var(--btn-primary-bg); border: 1px solid var(--btn-primary-bg);}
@media (max-width: 768px){
    .slick-slider .prev-slider,
    .slick-slider .next-slider{width: 32px;  height: 32px;   top: 40%;}
    .slick-slider .prev-slider i,
    .slick-slider .next-slider i{font-size: 17px;}
    .slick-slider .prev-slider{padding: 6px; left: 18px;}
    .slick-slider .next-slider{right: 18px; padding: 8px;}
}
.top-service .panel{text-align: center; height: calc(100% - 20px); margin-bottom: 20px; border-color: rgba(0, 0, 0, 0.05);}
.top-service .panel .panel-heading{background-color: var(--btn-primary-bg); min-height: inherit; color: #fff; padding: 10px 15px; border-bottom: 1px solid transparent; font-size: 16px; border-radius: 0;}
.top-service .panel .panel-body{height: calc(100% - 43px); display: grid; align-items: center;}
.top-service .panel .panel-body h3{font-size: 20px; margin-bottom: 5px;}

/*Custom radio image*/
.list-paymentmethod{cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 10px;}
.radio-payment-method{position: relative; display: block; margin: 0;}
.radio-payment-method > input[type="radio"]{position: absolute; z-index: -1; opacity: 0;}
.radio-payment-method > label{position: relative; width: auto; display: flex; padding: 0 15px; height: 44px; line-height: 44px; justify-content: space-between; align-items: center; text-align: center; color: #333333; font-size: 14px; background-color: #ffffff; border-radius: 4px; border: solid 1px #e2e8f1;}
.radio-payment-method > input[type="radio"]:checked ~ label{border: 1px solid var(--brand-primary);}
.radio-payment-method > input[type="radio"]:checked ~ label::before {position: absolute; content: ""; width: 20px; height: 20px; background: url(../images/type_logo_selected.png) no-repeat center; background-size: cover; left: 0; top: 0;}
.radio-payment-method > label span {display: inline-block; margin-right: 40px;}
.radio-payment-method > label img {height: 26px;}

.tab-inline .nav-tabs{max-width: 420px; margin-left: auto; margin-right: auto;}
.tab-inline .nav-tabs a{justify-content: center;}

/*Banner Top*/
#main-nav .top-banner {height: 40px; width: 100%; position: relative; background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary) 100%);}
#main-nav .top-banner .top-ads-info-wrap {width: 100%; height: 40px; text-align: center;}
#main-nav .top-banner .top-ads-info-wrap > p {text-align: center; line-height: 40px; display: inline-block;}
#main-nav .top-banner .top-ads-info-wrap > p > span {color: #FFF; font-family: "Open Sans"; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; letter-spacing: 0.64px;}
#main-nav .top-banner .top-ads-info-wrap > .look {margin-left: 50px; color: #FFF;}
#main-nav .top-banner .top-ads-info-wrap > .look > p, #header .top-banner .top-ads-info-wrap > p > span {color: #fff;}