@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&subset=vietnamese');

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

article, aside, details, figcaption, figure, footer, header, nav, section {
    display: block
}

audio, canvas, video {
    display: inline-block
}

audio:not([controls]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

.cf:before, .cf:after {
    content: "";
    display: table
}

.cf:after {
    clear: both
}

.rs {
    margin: 0;
    padding: 0
}

h1.rs, h2.rs, h3.rs, h4.rs {
    font-size: 100%
}

ul.rs {
    list-style: none
}

img, iframe {
    border: none
}

a, input {
    outline: none
}

a {
    text-decoration: none !important;
}

a:hover, a:focus {
    text-decoration: none;
    outline: none !important;
}

.fBo {
    font-weight: bold
}

.fNo {
    font-weight: normal
}

.fSi {
    font-style: italic
}

.fSn {
    font-style: normal
}

.inCute {
    display: inline !important
}

.inbCute {
    display: inline-block !important
}

.showCute {
    display: block !important
}

.hideCute {
    display: none !important
}

.pAbs {
    position: absolute
}

.pRel {
    position: relative
}

.pSta {
    position: static
}

.fll {
    float: left
}

.flr {
    float: right
}

.fln {
    float: none
}

.clr {
    clear: both;
    font-size: 0
}

.textAr {
    text-align: right
}

.textAc {
    text-align: center
}

.textAj {
    text-align: justify
}

.textAl {
    text-align: left
}

.cutebox3:before, .cutebox3:after {
    content: "";
    display: table
}

.cutebox3:after {
    clear: both
}

.cutecol3 {
    float: left;
    display: block
}

input[type="checkbox"] {
    margin: 0;
    vertical-align: -2px
}

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important
}

.texthide {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #1A1A1A;
}

/* Lib  */
.btn {
    border: none !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 16px;
    box-shadow: none !important;
    height: 44px;
    line-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

.col-main a.btn {
    line-height: 44px;
    padding: 0 .75rem;
}

.btn-white {
    background: #fff;
    box-shadow: none !important;
    height: 36px;
}

.btn-tran {
    color: #777777;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    border: 1px solid #eee !important;
    outline: none;
    line-height: 36px !important;
}

.btn-tran:hover {
    background: #fff !important;
    color: #777777;
}

.btn-m-xanhnb {
    background: #11998e;
    background: #4e9aca;
    outline: none !important;
}

.btn-mxanhd, .btn-primary {
    background: #4e9aca !important;
}

.btn-mxanhd:hover, .btn-primary:hover {
    background: #4e9aca !important;
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18) !important;
}

.btn_cam {
    background: #ff9800;
}

* {
    outline: none;
}

/* home */
body.home {
    background: url("../images/bg.png") 50% 0 no-repeat #fff !important;
}

.home .f-navTop {
    background: transparent !important;
}

.f-container {
    background: #F5F7FA;
    min-height: 100vh;
}

.f-container .logo {
    background: url(../images/logo1.png) 0 0 no-repeat;
    width: 138px;
    height: 24px;
    text-indent: -999em;
    padding: 0;
    vertical-align: middle;
    margin-right: 40px;
}

.f-navTop .navbar-nav .nav-link {
    color: #777777;
    font-size: 16px;
    font-weight: 500;
    position: relative;
}

.f-navTop .navbar-nav .nav-link:hover {
    color: #4e9aca !important;
}

.navbar-nav .nav-item {
    margin-right: 20px;
}

.h-mb {
    display: none;
}

.h-pc {
}

.modal-full {
    max-width: 100%;
    min-height: 100vh;
    background: rgb(3, 52, 140);
    background: linear-gradient(90deg, rgba(3, 52, 140, 1) 0%, rgba(24, 210, 245, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(3, 52, 140, 1) 0%, rgba(24, 210, 245, 1) 100%);
    margin: 0;
}

.modal-full .modal-content {
    border: none;
    background: transparent;
}

.close-modal {
    display: inline-block;
    background: url(../images/ico-close.svg) top center no-repeat;
    width: 52px;
    height: 52px;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    -o-transform: scale(.7);
    transform: scale(.7);
    -webkit-transition: .4s ease transform;
    -o-transition: .4s ease transform;
    -moz-transition: .4s ease transform;
    transition: .4s ease transform;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 999;
}

.close-modal:hover {
    background-position-y: bottom;
    -webkit-transform: rotate(180deg) scale(.7);
    -moz-transform: rotate(180deg) scale(.7);
    -o-transform: rotate(180deg) scale(.7);
    transform: rotate(180deg) scale(.7);
}

.hide {
    display: none;
}

.dp-tb {
    display: table;
}

.box-login {
    position: relative;
}

.btn-logout {
    color: #000 !important;
    font-size: 15px;
    line-height: 38px;
    max-width: 150px;
    padding-left: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 0 !important;
}

.btn-logout .thumb-u {
    display: block;
    height: 26px;
    width: 26px;
    position: absolute;
    left: 0;
    top: 50%;
    border-radius: 100%;
    margin-top: -13px;
    background-size: 26px 26px !important;
    background-color: #909090 !important;
}

.lstnv {
    display: none;
    background: #fff;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    list-style: none;
    font-size: 14px;
    text-align: left;
    border-radius: 2px;
    z-index: 1;
    background-clip: padding-box;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
}

.lstnv li {
}

.lstnv li a {
    display: block;
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, .87);
    text-decoration: none;
    white-space: nowrap;
}

.lstnv.active {
    display: block;
}

.box-gt1 {
    background: url("../images/intro.png") 50% 100% no-repeat;
    height: 50vh;
}

.box-gt2 {
    color: #fff;
    max-width: 500px;
    /*margin: 0 auto;*/
    text-align: right;
}

.box-gt2 h3 {
    font-size: 48px;
}

.box-gt2 .btn {
    width: 212px;
    padding: 0 .75rem;
    line-height: 44px;
}

/* Login */
.mg-b20 {
    margin-bottom: 20px;
}

.n-border-left {
    border: none;
    width: 110px;
    text-align: center;
    padding: 0;
    line-height: 36px;
    border-radius: 0 28px 28px 0 !important;
    background: #fff;
}

.n-border-left span {
    display: inline-block;
    width: 100%;
    color: #686868;
    font-size: 14px;
}

.n-border-left a {
    color: #2E66FF;
    display: inline-block;
    width: 100%;
    font-size: 14px;
}

.box-login-main .txt-form-login {
    font-size: 16px;
    text-align: center;
}

.txt-form-login a {
    text-decoration: underline;
}

.has-error input.form-control {

}

.has-success input.form-control {

}

.form-control {
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: none;
    box-shadow: none;
    font-size: 16px;
    height: 44px;
    border: 1px solid #e8e8e8;
}

.form-control:focus, select:focus {
    border: 1px solid #4e9aca !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
}

.form-group label.error, .error-otp-ms, .error-phone-msg span, .error-phone-msg span, .error-otp-msg, .error-phone-msg {
    color: #fff;
    display: block;
    margin: 7px 0 0 !important;
    padding-left: 20px;
    background: url("../images/icon/ico-err.svg") 0 50% no-repeat;
    background-size: 15px;
}

.mb-3 label.error, .mb-4 label.error {
    color: red;
    display: block;
    margin: 7px 0 0 !important;
    padding-left: 20px;
    background: url("../images/icon/ico-err.svg") 0 50% no-repeat;
    background-size: 15px;
    filter: brightness(0.5) sepia(1) hue-rotate(310deg) saturate(10);
}

.done-otp-ms {
    color: #30AD4A;
}

/*update login*/
.modal-full {
    max-width: 100%;
    /*min-height: calc(100vh + 150px);*/
    background: #F2F2F2;
    background: white;
    margin: 0;
}

.modal-full .modal-content {
    border: none;
    background: transparent;
}

.modal.show {
    padding-right: 0 !important;
}

.formlg .n-border-left {
    border: 1px solid #d0d0d0;
    /*border-radius: 28px !important;*/
    margin-left: -20px;
    z-index: 10;
    background: #4e9aca;
    color: white;

}

.box-account-lg {
    padding-top: 110px;
    background: #F4F5F9;
}

.box-fullh {
    height: 100vh;
}

.box-fullh .child_fix {
    background: white !important;
}

.box-login-main {
    max-width: 410px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.box-login-main::after,
.box-login-main::before {
    display: none !important
}

.box-login-main a {

}

.box-login-item1 {
    background: white;
    padding: 60px 30px;
    border-radius: 8px;
    border: 1px solid #C9D2D7;
}

.logo-lg {
    display: block;
    margin: 0px auto 40px;
    width: 160px;
    height: 48px;
    background: url(../images/logo1.svg) 0 0 no-repeat;
    background-size: contain;
    background-position: center;
}

.form-group label.error, .error-otp-ms, .error-otp-msg, .error-phone-msg {
    color: #EB5757;
    font-size: 14px;
    display: block;
    margin: 7px 0 0 !important;
    padding-left: 26px;
    background: url(../images/icon/ico-err.svg) 0 50% no-repeat;
    background-size: 18px;
    margin-right: 8px;
    /* filter: brightness(0.5) sepia(1) hue-rotate(310deg) saturate(10); */
    /* -webkit-filter: brightness(0.5) sepia(1) hue-rotate(310deg) saturate(10); */
}

.has-error input, .has-error textarea, .has-error select {
    border: 1px solid #EB5757 !important;
    box-shadow: 0px 2px 6px rgba(235, 87, 87, 0.2) !important;
    border-radius: 4px;
    background: white;
}

.form-control-lg {
    height: 50px;
    border: 1px solid #C9D2D7;
    font-size: 16px;
    padding: 0 16px;
}

.form-control-lg::-webkit-input-placeholder {
    color: #A7B6BD;
}

.form-control-lg:-ms-input-placeholder {
    color: #A7B6BD;
}

.form-control-lg::placeholder {
    color: #A7B6BD;
}

.form-control-lg:focus,
.form-control-lg.active,
.form-control-lg:visited,
.form-control:focus,
.form-control.active,
.form-control:visited,
.custom-select:focus {
    border: 1px solid #4e9aca !important;
    box-sizing: border-box;
    /*box-shadow: 0px 2px 6px rgba(31, 219, 132, 0.3) !important;*/
    box-shadow: none !important;
    border-radius: 4px !important;
    color: #00112C !important;
}

.form-group-phone .login_phone, .form-group-user .login_phone {
    padding-left: 47px !important;
}

.form-group-pass .login_pass {
    background: url(../images/icon/icon_password.svg) no-repeat !important;
    background-size: 23px 18px !important;
    background-position: 8px !important;
    padding-left: 47px !important;
}

.form-group-otp .input_otp {
    padding-left: 47px !important;
}

.form-group-otp .login_pass {
    padding-left: 47px !important;
}

.form-group-phone, .form-group-otp, .form-group-user {
    position: relative;
}

.form-group-phone::before {
    position: absolute;
    content: "";
    background: url(../images/icon/icon-phone1.svg) no-repeat !important;
    background-size: 23px 24px !important;
    background-position: 9px !important;
    padding-left: 47px;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 23px;
    height: 50px;
}

.form-group-user::before {
    position: absolute;
    content: "";
    background: url(../images/icon/icon1.svg) no-repeat !important;
    background-size: 23px 24px !important;
    background-position: 9px !important;
    padding-left: 47px;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 1;
    display: block;
    width: 23px;
    height: 50px;
}

.form-group-otp::before {
    position: absolute;
    content: "";
    background: url(../images/icon/icon_password.svg) no-repeat !important;
    background-size: 23px 18px !important;
    background-position: 9px !important;
    padding-left: 47px;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 23px;
    height: 50px;
}

.x_sdt {
    width: 24px;
    height: 24px;
    background: url(../images/update/icon_x_gray.svg) center no-repeat;
    background-size: 24px;
    position: absolute;
    right: 10px;
    top: 12.5px;
    z-index: 1;

}

.form-group-eye {
    position: relative;
}

.icon_eyes {
    width: 30px;
    height: 40px;
    background: url(../images/icon/icon_eye.svg) no-repeat;
    background-size: 19px;
    background-position: center;
    position: absolute;
    right: 8px;
    top: 5px;
    z-index: 2;
    cursor: pointer;
}

.icon_eyes_close {
    background: url(../images/icon/icon_eye_close.svg) no-repeat;
    background-size: 19px 16px;
    background-position: center;
}

.form-group-eye input {
    padding-right: 50px;
}

.form-group {
    margin-bottom: 16px;
}

.qmk {
    color: #222C31;
    display: block;
    text-align: right;
    font-size: 14px;
    margin: 4px 0;
    /*margin-bottom: 40px;*/
}

.block {
    display: block;
}

.btn_login {
    background: #4e9aca;
    border-radius: 8px;
    color: white;
    padding: 14px 0;
    font-size: 16px;
    line-height: 22px;
    display: block;
    width: 100%;
    border: 0;
    text-align: center;
}

.btn_disable {
    background: #C9D2D7 !important;
    pointer-events: none;
    cursor: default;
}

.txt-form-login {
    margin-top: 30px;
    font-size: 14px;
}

.btn_signup {
    position: relative;
    /*  background: #4e9aca url(../images/landing4/icon-arow.svg) no-repeat;
        background-size: 25px;
        background-position: calc(50% + 50px) center;*/
    /*animation: btn_signup_load 1.2s infinite;*/
}

.btn_signup::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/icon/icon_arr.svg) no-repeat;
    background-size: 21px;
    background-position: center;
    left: calc(50% + 35px);
    top: 13px;
    z-index: 1;
    display: block;
    position: absolute;
    animation: btn_signup_load 0.66s infinite;
}

@keyframes btn_signup_load {
    0% {
        left: calc(50% + 35px);
        opacity: 1;
    }
    50% {
        left: calc(50% + 40px);
        opacity: 1;
    }
    75% {
        left: calc(50% + 35px);
        opacity: 1;
    }
}

.txt-form-login a {
    color: #4e9aca;
    font-weight: bold;
}

.pop_lk {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    display: none;
}

.pop_lk a, .pop_lk span {
    color: #3C5059;
    font-size: 14px;
}

.wel_p1 a {
    color: #4e9aca;
}

.sign_bor {
    border: 1px solid #C9D2D7;
    margin: 16px 0 32px;
}

.sign_logo {
    max-width: 410px;
    margin: 0 auto;
    padding: 0 30px 32px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
}

.sign_logo li {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 5px;
    border-radius: 6px;
    overflow: hidden;
}

.wel_h3 {
    font-size: 20px;
    line-height: 20px;
    color: #222C31;
    font-weight: bold;
}

.wel_p {
    font-size: 14px;
    line-height: 20px;
    color: #222C31;
    margin: 8px 0 24px;
}

.wel_p1 {
    font-size: 14px;
    line-height: 20px;
    color: #00112C;
    margin: 20px 0;
}

.wel_p1_b0 {
    margin-bottom: 0;
}

.box-qmk .wel_p1 {
    margin-top: 30px;
}

.wel_p2 {
    font-size: 16px;
    margin: 16px 0 24px;
}

.wel_p4 {

}

.wel_p4 strong {
    display: block;
    font-size: 20px;
    line-height: 27px;
    color: #222C31;
    margin-top: 6px;
}

.logo-lg-mb35 {
    margin-bottom: 35px;
}

.mt_40 {
    margin-top: 40px;
}

.c-login-btn {
    margin-top: 24px;
}

.nhaplai {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 20px;
}

.nhaplai.text-right {
    justify-content: flex-end;
}

.nhaplai a {
    font-size: 16px;
    line-height: 21px;
    color: #4e9aca;
}

a.nhaplai_otp {
    color: #959DA5;
}

a.nhaplai_otp.active {
    color: #4e9aca;
}

.butt-mt30 {
    margin-top: 30px;
}

.nhaplai a:nth-child(2) {

}

.required-pass {
    background: #ECF8ED;
    border: 1px solid #4e9aca;
    border-bottom: 0;
    border-radius: 0px 0px 4px 4px;
    border-top: 0;
    display: none;
}

.required-pass.active {
    display: block;
}

.required-pass p {
    font-size: 14px;
    line-height: 19px;
    color: #222C31;
    padding: 13px 16px;
    border-bottom: 1px solid #4e9aca;
}

.required-pass p:nth-child(1) {
    /*border-bottom: 1px solid #4e9aca;*/
}

.required-pass .p-hidden {
    display: none;
}

.wel_p2_creat {
    margin-bottom: 7px;
}

.checkPass-error {
    margin-bottom: 24px;
    padding-left: 40px;
}

.checkPass-error.active {
    display: block;
}

.checkPass-error p {
    font-size: 16px;
    line-height: 21px;
    color: #222C31;
    margin-bottom: 7px;
    position: relative;
}

.checkPass-error p:last-of-type {
    margin-bottom: 0;
}

.checkPass-error p::before {
    content: "";
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: 7px;
    background: #222C31;
}

.checkPass-error p.active {
    color: #4e9aca;
}

.checkPass-error p.active::before {
    width: 13px;
    height: 10px;
    background: url(../images/update/icon_tick.svg) center no-repeat;
    background-size: 13px;
    top: 4px;
    left: -22.5px;
}

.checkPass-error p.p-error {
    color: #FF0000;
}

.checkPass-error p.p-error::before {
    background: #FF0000;
}


.new_pass {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new_pass p span {
    background: #C4C4C4;
    border-radius: 8px;
    height: 6px;
    width: 10px;
    display: inline-block;
}

.p_bad span:nth-child(1).active {
    background: red;
}

.p_bad span:nth-child(2).active {
    background: red;
}

.p_good span:nth-child(1).active,
.p_good span:nth-child(2).active,
.p_good span:nth-child(3).active {
    background: #F2C94C;
}

.p_strong span:nth-child(1).active,
.p_strong span:nth-child(2).active,
.p_strong span:nth-child(3).active,
.p_strong span:nth-child(4).active {
    background: #4e9aca;
}

.sign_hide {
    display: none;
}

.sign_show {
    display: block;
}


/*end update login*/

/* index */
.w-1000 {
    max-width: 1285px;
    margin: 0 auto;
    padding-top: 30px;
}

.wrap_nav {
    box-shadow: -10px -6px 9px 10px rgba(0, 0, 0, 0.18);
    -webkit-box-shadow: -10px -6px 9px 10px rgba(0, 0, 0, 0.18);
    background: white;
}

.navbar {
    max-width: 1170px;
    margin: auto;
}

.col-left {
    padding: 0;
}

.box-col, .col-main {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    -moz-border-radius: 4px;
    overflow: hidden;
}

.col-right .box-col {
    margin-left: 28px;
    min-height: 100%;
}

.col-left .box-col {
    margin-right: 28px;
}

.col-left .btn-left {
    display: block;
    height: 118px;
    text-align: center;
    border-bottom: 1px solid #eeee;
    padding-top: 70px;
    position: relative;
    color: #888888;

}

.btn-left.active, .btn-left:hover {
    background: #11998e;
    background: #4e9aca;
    color: #fff;
}

.col-left .btn-left:last-child {
    border: none;
}

.btn-left .ico-left {
    display: block;
    width: 48px;
    height: 44px;
    position: absolute;
    left: 50%;
    margin-left: -24px;
    top: 18px;
}

.ico-user {
    background: url("../images/ico-acc.svg") 50% 50% no-repeat;
    background-size: 46px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.ico-maphone {
    background: url("../images/ico-phone.svg") 50% 50% no-repeat;
    background-size: 24px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.ico-mathe {
    background: url("../images/ico-mt.svg") 50% 50% no-repeat;
    background-size: 24px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.ico-hoantien {
    background: url("../images/ico-mt.svg") 50% 50% no-repeat;
    background-size: 24px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.ico-khieunai {
    background: url("../images/ico-mt.svg") 50% 50% no-repeat;
    background-size: 24px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.ico-hoadon {
    background: url("../images/ico-hd.svg") 50% 50% no-repeat;
    background-size: 24px;
    -webkit-filter: brightness(10) invert(.4);
    filter: brightness(10) invert(.4);
}

.btn-left.active .ico-left, .btn-left:hover .ico-left {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.col-main {
    background: #fff;
    padding: 0;
}

.main-tlt {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #eee;
    padding: 0 15px;
    color: #000;
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-tlt .txt-brc {
    font-size: 16px;
    color: #454545;
}

.txt-gr {
    color: #454545;
    font-family: MONOSPACE;
}

.col-main form {
    padding: 30px 20px;
}

.col-main .form-control {
    border: 1px solid #c5c8cc;
}

.col-main .custom-select {
    border-radius: 28px;
    -moz-border-radius: 28px;
    border: 1px solid #c5c8cc;
    box-shadow: none;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/ico-drop.svg) 97% 50% no-repeat;
    background-size: 21px;
    height: 44px;
}

.col-main .custom-select:disabled {
    background-color: #e9ecef;
}

.col-right {
    padding: 0;
}

.box-bdb {
    border-bottom: 1px solid #eee;
}

.box-ttv-right {
    /*padding: 18px 0;*/
}

.box-ttv-right a {
    width: 115px;
    color: #fff;
    height: 44px;
    line-height: 44px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    font-size: 12px;
    padding-left: 10px;
}

.box-ttv-right a i {
    display: inline-block;
    color: #fff;
    width: 24px;
    height: 24px;
    position: relative;
    top: 5px;
}

.ico-napt {
    background: url("../images/ico-wl.svg");
}

.ico-chuyent {
    background: url("../images/ico-ct.svg");
}

.ico-rutt {
    background: url("../images/ico-rt.svg");
}

.box-ttv-left {
    color: #000;
}

.txt-ttv {
    font-size: 14px;
    color: #888888;
}

.txt-tienu {
    font-size: 20px;
    color: #4e9aca;
}

.box-main-user {
}

.box-main-user .text-muted {
    font-size: 14px;
    color: #888 !important;
    margin-bottom: 5px;
    display: block;
}

.box-main-user .text-tt-ct {
    font-size: 16px;
}

.txt-tk-ct {
    font-size: 12px;
    color: #4e9aca;
}

.form-control[readonly] {
    background: transparent;
}

/* form thanh cong */
.box-thongbao {
    padding: 30px;
    text-align: center;
}

.ico-done {
    display: block;
    width: 128px;
    height: 128px;
    background: url("../images/ico-done.svg") 0 0 no-repeat;
    margin: 0 auto 18px;
}

.txt-tb-done {
    color: #4e9aca;
    font-size: 16px;
}

.box-thongbao .txt-tb-done {
    margin-bottom: 13px;
}

.txt-tb {
    color: #777777;
    font-size: 17px;
}

.box-lsnap .table {
    border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #eee;
    font-size: 13px;
}

.bg-dam {
    background-color: #DDDDDD;
}

.box-lsnap table tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .05);
}

/* Hinh thuc nap */
.box-htnap-main {
    padding: 30px 0;
}

.box-htnap {
    border: 1px solid #eee;
    display: block;
    padding: 60px 0 0;
    height: 100px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    position: relative;
}

.box-htnap:hover {
    border-color: #4e9aca;

}

.box-htnap:hover span, .text-tt-ct a {
    color: #4e9aca;
}

.box-htnap:hover i {
    filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(60);
}

.box-htnap i {
    display: block;
    width: 50px;
    height: 32px;
    position: absolute;
    top: 13px;
    left: 50%;
    margin-left: -25px;
}

.ico-bank-nd {
    background: url("../images/ico-bank-nd.svg") 0 0 no-repeat;
}

.ico-bank-qt {
    background: url("../images/ico-bank-qt.svg") 0 0 no-repeat;
}

.ico-funcard {
    background: url("../images/ico-funtap.svg") 0 0 no-repeat;
}

.box-htnap span {
    display: block;
    color: #888;
    text-align: center;
}


.tab-pane h6 span {
    color: #1592E6;
}

.box-hd-main .col-4 {
    padding-bottom: 30px;
}

.box-hd-main .box-htnap i {
    top: 15px
}

.ico-nuoc {
    background: url('../images/ico-nuoc.svg ') 50% 50% no-repeat;

}

.ico-dien {
    background: url('../images/ico-dien.svg  ') 50% 50% no-repeat;

}

.ico-phone {
    background: url('../images/ico-phone.svg  ') 50% 50% no-repeat;

}

.ico-net {
    background: url('../images/ico-net.svg  ') 50% 50% no-repeat;

}

.ico-tivi {
    background: url('../images/ico-tivi.svg  ') 50% 50% no-repeat;

}

.ico-phonecd {
    background: url('../images/ico-phoneban.svg  ') 50% 50% no-repeat;
}

.col-main .input-group-prepend {
    border: 1px solid #eeee;
    border-left: none;
    border-radius: 28px;
    -moz-border-radius: 28px;
    border-top-left-radius: 0;
    -moz-border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-bottom-left-radius: 0;
}

.btn-lightbox {
    display: block;
    position: relative;
}

.btn-lightbox img {
    display: block;
    max-width: 100%;
    width: 100%;
}

.btn-lightbox i {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.41);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px !important;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.w-45 {
    width: 45%
}

/* Mua ma the */
.box-cardid {
}

.lstCard {
    padding: 16px 0 16px 20px;
    border: none;
}

.lstCard li {
}

.lstCard li a {
    display: block;
    width: 100px;
    height: 60px;
    background-size: 70px;
    margin-right: 16px;
    border: 1px solid transparent;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.lstCard li a.active {
    border: 1px solid #4e9aca;
    -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(0);
}

.box-lstCardCt {
    padding: 16px 0 0;
}

.the-vina {
    background: url("../images/card/vnp.png") 50% 50% no-repeat;
}

.the-viettel {
    background: url("../images/card/vt.png") 50% 50% no-repeat;
}

.the-mobi {
    background: url("../images/card/mb.png") 50% 50% no-repeat;
}

.the-funcard {
    background: url("../images/card/fc.svg") 50% 50% no-repeat;
}

.btn-cardct {
    display: block;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #1592E6;
    height: 70px;
}

.btn-cardct .box-cardct {
    display: block;
    margin-bottom: 0px;
    color: #000000;
    font-size: 18px;
    padding-top: 14px;
}

.btn-cardct .txt-cardct {
    color: #09599D;
    display: block;
    text-align: center;
    font-size: 12px;
}

.btn-cardct.active {
    background: #11998e;

    background: #4e9aca;
}

.btn-cardct.active .box-cardct, .btn-cardct.active .txt-cardct {
    color: #fff;
}

.tab-pane h6 {
    padding: 16px 20px 0;
}

.tab-pane form {
    padding: 0;
}

.tab-pane .n-border-left {

}

.box-cardid form {
    padding: 0 !important;
}

.box-phuongthuc .card {
    border: none;
}

.box-phuongthuc .card-header {
    padding: 0;
    background: transparent;
}

.box-phuongthuc .card-body {
    /* border-bottom: 1px solid rgba(0,0,0,.125); */
}

.box-toggle {
    display: block;
    position: relative;
    padding: 10px 20px 10px 50px;
    font-size: 16px;
    color: #000 !important;
    font-weight: normal;
}

.box-toggle.collapsed {
    color: #000;
}

.box-toggle:before {
    content: '';
    height: 20px;
    width: 20px;
    position: absolute;
    left: 20px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    top: 50%;
    background: url("../images/dot.png") no-repeat 0 bottom;
}

.box-toggle.collapsed:before {
    content: '';
    width: 12px;
    height: 12px;
    background: url("../images/dot.png") no-repeat 0 0;
}

.btn-bank .box-cardct {
    font-weight: normal;
    color: red;
    font-size: 12px;
    background-size: 70px !important;
}

.bank-vietcom .box-cardct {
    background: url(../images/bank/vcb.png) 50% 0 no-repeat;
}

.box-tt-the h6 {
    font-size: 14px;
}

/* Chuyen tien */
.box-tran {

}

.box-tran form {
    padding: 0 0 0 20px;
}

.box-sodutk {

}

.txt-sodutk {
    color: #888888;
    line-height: 30px;
}

.txt-sodutk-ct {
    color: #4e9aca;
    font-size: 20px;
}

.txt-tk-name {
    text-transform: uppercase;
}

.txt-sodutk-ct span {
    font-size: 14px;
    line-height: 30px;
    display: inline-block;
    margin-left: 10px;
}

#user-nhan {
    background: url(../images/ico-db.svg) 96% 50% no-repeat;
    background-size: 28px;
    padding-right: 45px;
}

.btn-hd {
    display: block;
    width: 250px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    color: #777777;
    text-align: left;
    background: url(../images/ico-huongdan.svg) 0 50% no-repeat;
    background-size: 28px;
    padding-left: 35px;
}


.box-lsTran {
}

.box-lsTran:nth-of-type(even) {
    background: #EEEEEE;
}

.txt-user-tran {
    font-size: 16px;
    color: #454545;

}

.txt-nd-tran {
    display: inline-block;
    color: #a29292;
}

.txt-over {
    display: inline-block;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.nd-tran {
    padding: 0 0 0 15px;
    min-width: 70%;
}

.txt-tru-tran {
    color: red;
    display: inline-block;
    margin-right: 10px;
}

.txt-cong-tran {
    color: #4e9aca;
    display: inline-block;
    margin-right: 10px;
}

.txt-time-tran {
    font-size: 12px;
    color: #888888;
}

/* lich su */
.table td, .table th {
    white-space: nowrap;
    /*    overflow: hidden;
    text-overflow: ellipsis;*/
}

.dropdown-toggle::after {
    display: inline-block;
    width: 18px;
    height: 12px;
    margin-left: -1px;
    vertical-align: 1px;
    content: "";
    border-top: none;
    border-right: none;
    border-bottom: 0;
    border-left: none;
    background: red;
    background: url(../images/icon_arrow.png);
    background-size: cover;
    filter: invert(47%) sepia(6%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(84%);
    -webkit-filter: invert(47%) sepia(6%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(84%);
}

.f-navTop .nav-link:focus::after, .f-navTop .nav-link:hover::after, .f-navTop .nav-link.active::after {
    -webkit-filter: none;
    filter: none;
}

.btn_login::after {
    background: url(../images/icon_arrow1.png);
    -webkit-filter: none;
    filter: none;
}

.navbar li.dropdown.sp.show {
    position: static !important;
}

.navbar li.dropdown.sp.show .dropdown-menu {
    display: table !important;
    width: 100% !important;
    text-align: center;
    left: 0;
    right: 0;
    padding: 25px 50px;
    top: 56px;
}

.ul_menu_drop {
    text-align: left;
    list-style: none;
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
    list-style-type: none;
    white-space: nowrap;
}

.ul_menu_drop li:first-of-type {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 24px;
}

.ul_menu_drop li {
    margin-bottom: 16px;
}

.ul_menu_drop li a {
    color: #454545;
    display: block;
}

.ul_menu_drop li a:hover {
    color: #4e9aca;
}

/*header*/
.btn-read-all:hover {
    cursor: pointer;
}

.notice_item:hover {
    background: rgba(0, 0, 0, 0.08);
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 45%;
    top: 40%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hide_web, .show_mobile {
    display: none;
}

.hide_mb {
    display: block;
}

.header-btn .butt {
    background: #4e9aca;
    border-radius: 8px;
    display: inline-block;
    padding: 8px 20px;
    color: white !important
}

.btn_hover {
    position: relative;
    transition: all 0.5s ease;
    overflow: hidden;
}

.btn_hover:hover {
    color: white;
    box-shadow: 0px 8px 34px rgba(78, 154, 202, 0.6) !important;
}

.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    transform: scale(0);
}

.animate1 {
    animation: ripple 0.5s linear;
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.bg_white {
    background: white;
}

.header_fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 99999;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
    /*animation: dixuong 0.3s forwards;*/
    margin-top: 0;
}

@keyframes dixuong {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

header, .h_80 {
    height: 72px;
}

header {
    position: absolute;
    width: 100%;
    z-index: 9999;
}

.header-btn {
    display: flex;
    justify-content: center;
}

.header-logo {
    display: block;
    width: 97px;
    height: 72px;
    background: url(https://dev-web.wallet.9pay.mobi/webroot/9pay/images/logo.svg) no-repeat;
    background-size: contain !important;
    background-position: center !important;
    /*margin-bottom: 8px;*/
}

.header-menu {
    width: calc(100% - 97px);
    text-align: right;
}


.header-menu a {
    font-size: 16px;
    color: #fff;
    margin-left: 20px;
    display: inline-block;
    line-height: 72px;
}

.header-menu li:first-of-type a {
    margin-left: 68px;
}

.header-menu a:hover {
    color: #4e9aca;
}

.header-menu li .active {
    color: #4e9aca !important;
    border-bottom: 2px solid #4e9aca;
}

.header-menu li.active ul li a {
    color: #222C31;
}

.header-menu li.active ul li.active a {
    color: #4e9aca
}

.a-logout {
    position: relative;
    padding-left: 21px;
}

.a-logout::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/icon/icon_logout.svg) center no-repeat;
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    margin-top: -12px;
}

.a-logout:hover::after {
    filter: invert(70%) sepia(12%) saturate(5561%) hue-rotate(175deg) brightness(85%) contrast(83%);
    -webkit-filter: invert(70%) sepia(12%) saturate(5561%) hue-rotate(175deg) brightness(85%) contrast(83%);
}

.a-logout::before {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    background: #D1D1D1;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0;
    z-index: 1;
}

.header-btn {
    width: 300px;
    text-align: right;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-btn a {
    margin-left: 20px;
    color: white;
    font-size: 16px
}

.header-btn a:hover {
    color: #4e9aca;
}

.header-btn a:nth-child(1) {
    margin-left: 0;
}

.header-btn-login .t_tk_btn {
    line-height: 72px;
}

.header-btn-login .m_level2_mb {
    right: 0;
}

.t_tk {
    display: inline-block;
}

.t_tk ul {
    position: absolute;
    z-index: 1000;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    right: 15px;
    top: 40px;
    display: none;
}

.t_tk ul li a {
    display: block;
    color: #3e3d3d;
    font-size: 16px;
    padding: 9px 15px;
    border-bottom: 1px solid #dad9d9;
    margin: 0 !important;
}

.t_tk ul li a:hover {
    background: #e8e8e8;
}

.t_tk_btn::after {
    display: inline-block;
    width: 18px;
    height: 12px;
    margin-left: 3px;
    vertical-align: 1px;
    content: "";
    border-top: none;
    border-right: none;
    border-bottom: 0;
    border-left: none;
    background: url(https://dev-web.wallet.9pay.mobi/webroot/9pay/images/icon_arrow1.png);
}

.t_tk_btn:hover::after, .t_tk_btn:visited::after, .t_tk_btn:focus::after,
.hassub.active .t_tk_btn::after {
    filter: invert(54%) sepia(64%) saturate(494%) hue-rotate(80deg) brightness(91%) contrast(91%) !important;
}

.t_tk li:hover ul {
    display: block;
}

.m_level2_mb {
    display: none;
    position: absolute;
    width: 218px;
    background: white;
    border-radius: 6px;
    margin-top: -5px;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.16);
}

.m_level2_mb::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    top: -10px;
    left: 28px;
    z-index: 2;
    display: block;
}

.header-menu li.hassub {
    position: relative;
}

li.hassub:hover .m_level2_mb {
    display: block;
}

li.hassub:hover .m_level2_mb::after {
    display: block;
}

.m_level2_mb li a {
    padding-left: 30px;
    margin-left: 0 !important;
    line-height: normal !important;
    color: black;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.m_level2_mb li a:hover {
    color: #4e9aca;
}

.header-menu li:first-of-type a {

}

.icon_dn {
    width: 24px;
    height: 24px;
    background: url(https://dev-web.wallet.9pay.mobi/webroot/9pay/images/landing4/icon_user.svg) no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 15px;
    top: 14px;
    z-index: 10;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(203deg) brightness(230%) contrast(102%);
    -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(203deg) brightness(230%) contrast(102%);
}

.icon_dx {
    width: 22px;
    height: 24px;
    display: block;
    background: url(https://dev-web.wallet.9pay.mobi/webroot/9pay/images/icon_logout.svg) no-repeat;
    background-size: 22px auto;
    position: absolute;
    right: 14px;
    top: 16px;
    z-index: 10;
    display: none;
}

.hamburger {
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    position: absolute;
    top: 22px;
    left: 15px;
    z-index: 50;
    display: none
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #4e9aca;
}

.hamburger-box {
    width: 18px;
    height: 12px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    opacity: 1 !important
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
    opacity: 1 !important
}

.hamburger-inner::before {
    top: -6px;
}

.hamburger-inner::after {
    bottom: -6px;
}

.hamburger--3dx .hamburger-box {
    perspective: 80px;
}

.hamburger--3dx .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(180deg);
}

.hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--3dx-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dx-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dx-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateY(-180deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--3dy .hamburger-box {
    perspective: 80px;
}

.hamburger--3dy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(-180deg);
}

.hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--3dy-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--3dxy .hamburger-box {
    perspective: 80px;
}

.hamburger--3dxy .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg);
}

.hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--3dxy-r .hamburger-box {
    perspective: 80px;
}

.hamburger--3dxy-r .hamburger-inner {
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger--3dxy-r.is-active .hamburger-inner {
    background-color: transparent !important;
    transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.header_fix .header-logo, .header_white .header-logo {
    background: url(../images/logo1.svg) no-repeat;
}

.header_fix .h_80 {
    align-items: center;
}

.header_fix + .w_1200 .banner {
    margin-top: 72px;
}

.header_fix .header-menu a, .header_fix .header-btn a {
    color: #1A1A1A
}

.header_fix .header-menu a:hover, .header_fix .header-btn a:hover {
    color: #4e9aca;
}

.header_fix .btn_login_mb a {
    color: #4e9aca;
}

.header_fix .btn_login_mb .btn_login {
    color: white
}

.header_fix .hamburger-inner, .header_fix .hamburger-inner::before, .header_fix .hamburger-inner::after {
    background-color: #4e9aca;
}

.header_fix .icon_dn, .header_white .icon_dn {
    filter: none;
    -webkit-filter: none;
}

.header_fix .t_tk_btn::after {
    filter: invert(83%) sepia(100%) saturate(32%) hue-rotate(149deg) brightness(182%) contrast(50%);
    -webkit-filter: invert(83%) sepia(100%) saturate(32%) hue-rotate(149deg) brightness(182%) contrast(50%);
}

.header_white {
    background: white;
}

.modal-open .header_fix {
    padding-right: 17px;
}

.modal-open .icon_top {
    right: 49px;
    transition: 0s !important;
}

.modal-open .contact_alert, .modal-open .form_contact {
    right: 33px;
}

@media screen and (max-width: 1100px) {
    .f_tt_icon3 {
        margin-right: 10px;
        margin-left: -2px;
    }

    .hide_web {
        display: block;
    }

    .hide_mb {
        display: none;
    }

    .header-logo {
        height: 56px;

    }

    header, .h_80 {
        height: 56px;
        justify-content: center;
    }

    .header-menu {
        width: 100%;
        position: absolute;
        background: #F9F9F9;
        left: 0;
        top: 56px;
        z-index: 5;
        /*display: none;*/
        border-top: 1px solid #60dc79;
        transform: translateX(-100%);
        transition: 0.4s;
        height: calc(100vh - 56px);
        text-align: left;
    }


    .header-menu.scrolll {
        overflow-y: scroll;
    }

    .header-menu.show {
        transform: translateX(0%);
        /*display: block*/
    }

    .header-menu li {
        display: block;
    }

    .header-menu li a {
        display: block;
        margin: 0;
        /*border-bottom: 1px solid #eee;*/
        padding: 10px 16px;
        line-height: normal;
        color: #222C31;
    }

    .a-logout {
        display: none;
    }

    .header-menu li .active {
        border-bottom: 0;
    }

    .m_level2_mb {
        display: none;
        position: static;
        width: 100%;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .hassub:hover .m_level2_mb {
        display: none;
    }

    .mb_icon {
        border-bottom: 1px solid #E0E0E0;
        margin: 0 16px 16px;
        align-items: center;
        padding: 16px 0;
    }

    .mb_icon_ava {
        width: 58px;
        height: 58px;
        margin-right: 16px;
        border-radius: 50%;
        overflow: hidden;
        background: url(https://dev-web.wallet.9pay.mobi/webroot/9pay/images/landing4/ava_user.svg) no-repeat;
        background-size: contain !important;
        background-position: center !important;
    }

    .mb_icon_text {
        width: calc(100% - 58px - 16px);
    }

    .mb_icon_text h3 {
        font-size: 20px;
        line-height: 20px;
        color: #222C31;
        margin-bottom: 4px;
    }

    .mb_icon_text a {
        font-size: 14px;
        line-height: 20px;
        color: #4e9aca !important;
        margin-left: 0;
        font-weight: 500;
    }

    .mb_icon_text p {
        font-size: 14px;
        line-height: 20px;
        color: #3C5059;
        margin-left: 0;
    }

    a.mb_thoat {
        font-size: 16px !important;
        line-height: 21px !important;
        color: #00112C !important;
    }

    a.mb_thoat:hover {
        color: #4e9aca !important;
    }

    .btn_login_mb {
        margin: 16px 16px 30px;
        border-top: 1px solid #E0E0E0;
        padding-top: 16px;
    }

    .btn_login_mb a {
        margin-left: 0;
        line-height: normal;
        color: white;
    }

    .btn_login_mb a:hover {
        color: white !important;
    }

    .btn_login_mb p a {
        color: #4e9aca;
    }

    .btn_login_mb p a:hover {
        color: #4e9aca !important;
    }

    .m_level2_mb {
        margin-top: 0;
    }

    .m_level2_mb a {
        padding-left: 35px !important;
    }

    .header-menu li:first-of-type a {
        margin-left: 0;
    }

    .header-logo {
        margin-bottom: -5px;
    }
}

@media screen and (max-width: 767px) {
    .hide_mobile {
        display: none;
    }

    .show_mobile {
        display: block;
    }

    .t_tk_btn::after {
        filter: invert(83%) sepia(100%) saturate(32%) hue-rotate(149deg) brightness(182%) contrast(50%);
        -webkit-filter: invert(83%) sepia(100%) saturate(32%) hue-rotate(149deg) brightness(182%) contrast(50%);
    }

}

.header_notice {

    margin-right: 16px;
    padding-right: 16px;
    position: relative;
}

.header_notice:after {
    content: "";
    position: absolute;
    height: 40px;
    border-right: 1px solid #D1D1D1;
    top: 19px;
    right: 0px;
    z-index: 2;
}

.h_n_icon {
    height: 72px;
    position: relative;
    width: 40px;
    display: block;
}

.h_n_icon::after {
    content: "";
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    background: url(../images/icon_notice_h.svg) no-repeat;
    background-size: 24px 24px !important;
    background-position: center !important;
    border-radius: 50%;
    display: block;
    line-height: 72px;
    top: 15px;
}

.header_notice:hover .h_n_icon::after {
    background: #E9E9E9 url(../images/icon_notice_h.svg) no-repeat;
}

/*.header_notice li{*/
/*    position: relative;*/
/*}*/
.m_level2_notice {
    width: 360px !important;
    height: 435px;
    right: 0 !important;
    padding: 12px 0px;
    background: white !important;
    border-radius: 6px !important;
    margin-top: -5px !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16) !important;
    overflow: hidden;
}

.notice-list {
    height: 365px;
}

.m_level2_notice a {
    padding-left: 16px !important;
}

.ul_notice {
    margin-top: 10px;
    height: 100%;
    padding-bottom: 40px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.ul_notice::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: rgba(130, 130, 130, 0.1);
}

.ul_notice::-webkit-scrollbar {
    width: 4px;
    background-color: rgba(130, 130, 130, 0.1);
}

.ul_notice::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(49, 174, 74, 0.52);
    border-radius: 6px;
}

.h_n_title {
    color: #1A1A1A;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    padding: 0 16px;
    position: relative;
}

.h_n_title span {
    width: 24px;
    height: 24px;
    background: url(../images/ico_notice_tick.svg) no-repeat;
    background-size: 18px 18px;
    background-position: center;
    display: block;
    position: absolute;
    right: 16px;
    top: 0px;
    z-index: 2;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.h_n_no {
    display: block;
    width: 100px;
    height: 121px;
    background: url(../images/ico_notice.svg) no-repeat;
    background-size: 100px 121px;
    background-position: center;
    margin: auto;
    margin-top: 88px;
}

.h_n_txt {
    font-size: 16px;
    text-align: center;
    display: block;
    margin-top: 28px;
}

.h_n_number {
    border: 2px solid white;
    border-radius: 4px;
    background: #4e9aca;
    text-align: center;
    line-height: 18px;
    display: block;
    position: absolute;
    top: 14px;
    right: -4px;
    z-index: 3;
    color: white;
    padding: 1px 5px;
}

.header_notice.active .h_n_title span {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}

.h_n_item {
    border-bottom: 1px solid #D1D1D1;
}

.h_n_item:last-of-type {
    border-bottom: 0;
}

.h_n_item a {
    display: flex !important;
    -webkit-display: flex !important;
    -moz-display: flex !important;
}

.h_n_item-ico {
    width: 24px;
    height: 24px;
    background: url(../images/ico_notice_email.svg) no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    width: 24px;
    opacity: 0.8;
}

.no_read .h_n_item-ico {
    opacity: 1;
}

.h_n_item-txt {
    width: calc(100% - 29px - 24px - 4px);
    margin: 0 16px;
}

.h_n_item-txt p {
    color: #1A1A1A;
    font-size: 14px;
    line-height: 20px;
}

.no_read .h_n_item-txt p {
    font-weight: bold;
}

.h_n_item-txt span {
    color: #767676;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: 100%;
    white-space: normal;
    /*max-height: 54px;*/
}

.no_read .h_n_item-txt span {
    color: #1A1A1A;
}

.h_n_item-time {
    color: #767676;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

.no_read .h_n_item-ico::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #DA1E28;
    border: 1px solid white;
    border-radius: 50%;
    right: 0;
    top: 0;
}

.header-btn-login .m_level2_mb::after {
    left: auto !important;
    right: 28px !important;
}


@media screen and (max-width: 450px) {
    .m_level2_notice {
        width: 290px !important;
        height: 400px;
        right: -26px !important;
    }

    .ul_notice {
        height: 347px;
    }

    .h_n_item-txt {
        width: calc(100% - 29px - 24px - 8px);
        margin: 0 5px;
    }
}

.btn-load-more {
    cursor: pointer;
    text-align: center;
    background: rgb(235, 235, 235);
    border-radius: 1px 1px 3px 4px;
    color: rgba(136, 136, 136, 0.68);
    font-size: 13px;

    color: #1A1A1A;
    font-weight: bold;
    line-height: 23px;

    position: absolute;
    width: 100%;
    top: 95%;
}

.btn-load-more:hover {
    color: #28a745;
}

.display_flex {
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
}

.flex_center {
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
}

.w_1200 {
    max-width: 1368px;
    padding: 0 15px;
    margin: auto;
    position: relative;
}

/*end header*/
.pt_85 {
    padding-top: 72px;
    padding-bottom: 30px;
}

.mlr_0 {
    margin-left: 0;
    margin-right: 0;
}

.wrap-left {
    width: 255px;
}

.wrap-right {
    width: calc(100% - 255px - 30px);
    margin-left: 30px;
}

.left-account {
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
}

.left-account-ava {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 16px;
}

.left-account-txt {
    position: relative;
}

.left-account-txt span {
    width: 24px;
    height: 24px;
    background: url(../images/icon/icon_warning.svg) no-repeat;
    display: inline-block;
    position: absolute;
    top: -2px;
    right: -32px;
    z-index: 1;
}

.left-menu {

}

.left-menu-item {
    display: block;
    padding-left: 56px;
    color: #767676;
    font-size: 16px;
    line-height: 24px;
    border-radius: 2px;
    height: 44px;
    line-height: 44px;
    position: relative;
    margin-bottom: 12px;
}

.left-menu-item:last-of-type {
    margin-bottom: 0;
}

.left-menu-item span {
    position: absolute;
    width: 24px;
    height: 24px;
    left: 16px;
    top: 11px;
}

span.icon1 {
    background: url(../images/icon/icon1.svg) no-repeat;
}

span.icon2 {
    background: url(../images/icon/icon2.svg) no-repeat;
}

span.icon3 {
    background: url(../images/icon/icon3.svg) no-repeat;
}

span.icon4 {
    background: url(../images/icon/icon4.svg) no-repeat;
}

span.icon5 {
    background: url(../images/icon/icon5.svg) no-repeat;
}

.left-menu-item.active, .left-menu-item:hover {
    box-shadow: 0px 4px 4px rgba(39, 51, 51, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.12);
    color: #4e9aca;
    background: white;
    font-weight: bold;
}

.left-menu-item.active span, .left-menu-item:hover span {
    filter: invert(65%) sepia(12%) saturate(2469%) hue-rotate(80deg) brightness(84%) contrast(93%);
    -webkit-filter: invert(65%) sepia(12%) saturate(2469%) hue-rotate(80deg) brightness(84%) contrast(93%);
}

.left-menu-item:hover span.icon2, .left-menu-item.active span.icon2 {
    filter: none;
    -webkit-filter: none;
    background: url(../images/icon/icon2_hover.svg) no-repeat;
}

.right-navi {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.right-navi p {
    color: #767676;
    font-size: 14px;
    line-height: 21px;
}

.right-navi a {
    color: #4e9aca;
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
}

.mlr_5 {
    margin-left: 5px;
    margin-right: 5px;
}

.bg_white_bor {
    background: white;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.right-baocao2 {
    padding: 20px;
}

.right-baocao2 label {
    font-size: 14px;
}

.f-trg-search {
    margin-bottom: 30px;
}

.r-bc2-btn {
    /*margin-top: 30px;*/
}

.box-tt {
    color: #1A1A1A;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
}

.box-tt a {
    position: absolute;
    font-size: 16px;
    line-height: 24px;
    color: #007AFF;
    right: 0;
    font-weight: normal;
}

.box-tt a:hover {
    color: #4e9aca;
}

.mt_15 {
    margin-top: 15px;
}

.mt_24 {
    margin-top: 24px;
}

.right-baocao3 {
    padding: 24px 16px;
}

.right-bc3-box {
    border-bottom: 1px solid #E4E4E4;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.right-bc3-box-item {
    width: calc((100% - 18px * 3) / 4);
    margin-right: 18px;
    color: white;
    padding: 15px 15px 0;
    position: relative;
    height: 120px;
    display: block;
    border-radius: 4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.right-bc3-box-item:hover {
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
}

.right-bc3-box-item:last-of-type {
    margin-right: 0;
    background: #EE5855;
}

.right-bc3-box-item:nth-child(1) {
    background: #6E769F;
}

.right-bc3-box-item:nth-child(2) {
    background: #348FE2;
}

.right-bc3-box-item:nth-child(3) {
    background: #49ADAC;
}

.right-bc3-box-item p {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}

.right-bc3-box-item span {
    font-size: 24px;
    line-height: 20px;
    display: block;
    padding: 30px 0 7px;
    position: absolute;
    left: 15px;
    bottom: 21px;
}

.right-bc3-box-item .icon {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 8px;
    bottom: 24px;
}

.icon-bc3-1 {
    background: url(../images/icon/icon_baocao1.svg) no-repeat;
}

.icon-bc3-2 {
    background: url(../images/icon/icon_baocao2.svg) no-repeat;
}

.icon-bc3-3 {
    background: url(../images/icon/icon_baocao3.svg) no-repeat;
}

.icon-bc3-4 {
    background: url(../images/icon/icon_baocao4.svg) no-repeat;
}

.right-bc3-table {

}

.table-no-border td, .table-no-border th {
    border: 0;
}

.table-no-border tr:first-of-type th:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.table-no-border tr:first-of-type th:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.table-no-border tr:first-of-type th {
    color: #767676;
    font-size: 14px;
    line-height: 18px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-weight: normal;
    color: #1A1A1A !important;
    font-weight: bold !important;
}

.typeTran-table tr th:nth-child(1),
.typeTran-table tr td:nth-child(1) {
    width: 50px;
}

.typeTran-table tr th:nth-child(2),
.typeTran-table tr td:nth-child(2) {
    width: 200px;
}

.typeTran-table tr th:nth-child(3),
.typeTran-table tr td:nth-child(3) {
    width: 130px;
}

.help-status {
    padding-left: 35px !important;
    font-weight: 500;
    position: relative;
}

.help-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 14px;
    left: 15px;
    z-index: 1;
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.help-status-wait::before {
    background: #FFFF00;
}

.help-status-done::before {
    background: #00CC00;
}

.help-status-doing::before {
    background: #FFAA00;
}

.help-status-diffirent::before {
    background: #C4C4C4;
}

/*.typeTran-table tr th:nth-child(4),
.typeTran-table tr td:nth-child(4){
    width: 265px;
    }*/
.r-bc3-pagination {
    margin-top: 24px;
    justify-content: space-between;
}

.r-bc3-pagination ul li a {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    color: #767676;
    border-radius: 2px;
    text-align: center;
}

.r-bc3-pagination ul li a.active {
    background: #4e9aca;
    color: white;
}

.r-bc3-pagination ul li a span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon/icon_right.svg) no-repeat;

}

.r-bc3-pagination ul li:first-of-type a span {
    transform: rotate(180deg);
}

.r-bc3-pagination ul li a.disable {
    opacity: 0.5;
}

.detailTran {

}

.tt-small {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 18px;
}

.detailTran-list {
    font-size: 16px;
    line-height: 24px;

}

.detailTran-item-l {
    color: #767676;
    padding: 8px 0;
    font-weight: 500;
}

.detailTran-item-r {
    padding: 8px 0;
}

.mt_16 {
    margin-top: 16px;
}

.detailTran-btn {
    margin: 16px auto 0;
    text-align: center;
}

.detailTran-btn a {
    background: #4e9aca;
    border-radius: 4px;
    width: 186px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    font-size: 14px;
    color: white;
    margin-right: 16px;
    text-align: center;
}

.detailTran-btn a:last-of-type {
    margin-right: 0;
}

.detailTran-btn a:hover {

}

.pd_box {
    padding: 12px 16px 24px;
}

.group-input {
    margin-bottom: 16px;
    position: relative;
}

.group-input label {
    width: 146px;
    font-size: 14px;
    color: #5F5F5F;
    line-height: 44px;
}

.group-input input, .group-input textarea {
    width: calc(100% - 146px);
}

.group-input textarea {
    padding-bottom: 24px;
}

.num-cha {
    position: absolute;
    right: 16px;
    bottom: 4px;
    font-size: 12px;
    color: #9c9c9c;
    z-index: 1;
}

.group-input span.vnd {
    color: #4e9aca;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 16px;
    bottom: 0;
}

.chooseFile {
    background: #F3F3F3;
    border: 1px solid #D1D1D1;
    box-sizing: border-box;
    border-radius: 4px;
    width: 129px;
    height: 40px;
    line-height: 40px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    color: #1A1A1A;
}

.chooseFile:hover {
    color: #4e9aca;
}

.line_br {
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: 16px;
}

.request-btn {
    text-align: right;
}

.btn-huy {
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    color: #5F5F5F !important;
    padding: 0px 28px;
    display: inline-block;
    background: #E9E9E9;
    border-radius: 4px;
}

.btn-ok {
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    padding: 0px 28px;
    display: inline-block;
    background: #4e9aca;
    border-radius: 4px;
}

.mr_12 {
    margin-right: 12px;
}

.txt-img-img {
    width: 65px;
    height: 43px;
    border: 1px solid #D1D1D1;
    box-sizing: border-box;
    border-radius: 2px;
    overflow: hidden;
}

.txt-img-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.txt-img-txt {
    width: calc(100% - 65px);
    padding-left: 8px;
}

.txt-img-txt p {
    font-size: 14px;
    line-height: 20px;
    color: #1A1A1A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.txt-img-txt span {
    font-size: 12px;
    line-height: 18px;
    color: #767676;
}

.txt-img {
    margin-bottom: 8px;
}

.txt-img:last-of-type {
    margin-bottom: 16px;
}

.switch1 {
    display: none;
}

.buttonbackground {
    background-color: #DA1E28;
    width: 40px;
    height: 12px;
    border-radius: 10px;
    position: relative;
    transition: background-color 0.2s ease;
    display: inline-block;
    margin-right: 13px;
}

.buttonslider {
    background: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #da1e28;
    top: -3px;
    position: absolute;
    left: 0;
    transition: all 0.2s ease;
    display: inline-block;
}

.switch1 + label:hover {
    cursor: pointer;
}

.switch1:checked + label .buttonbackground {
    background-color: #4e9aca
}

.switch1:checked + label .buttonslider {
    left: auto;
    right: 0;
    border-color: #4e9aca;
}

.td-active {
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
}

.span-hd {
    display: none;
}


.mb_20 {
    margin-bottom: 20px;
}

.pd_20 {
    padding: 20px;
}

.mt_30 {
    margin-top: 30px;
}

.color_blue {
    color: #0044FF;
}

.color_green {
    color: #4e9aca;
}

.color_pink {
    color: #FF003F;
}

.color_orange {
    color: #FF772B;
}

.color_yellow {
    color: #FFC316;
}

.color_red {
    color: #FF3A3A;
}

.color_hongnhat {
    color: #FB4BFF;;
}

.content-menu {
    width: 100%;
}

.content-menu a {
    font-size: 16px;
    line-height: 24px;
    color: #1A1A1A;
    padding: 10px 0;
    margin: 0 18px;
    display: inline-block;
}

.content-menu a:hover {
    color: #4e9aca;
}

.content-menu a.active {
    font-size: 16px;
    line-height: 24px;
    color: #4e9aca;
    font-weight: 700;
    border-bottom: 2px solid #4e9aca;
}

.wrap_baocao {

}

.bc-content {
    padding: 20px;
    width: calc((100% - 20px) / 2);
    background: white;
}

.bc-left {
    margin-right: 20px;
}

.bc-list {

}

.bc-item {
    margin-right: 15px;
    width: calc((100% - 30px));
    background: #FFFFFF;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    position: relative;
    transition: 0.4s;
}

/*.bc-item:nth-child(1):hover{
    border-bottom: 10px solid #0044FF;
    padding-bottom: 0;
}
.bc-item:nth-child(2):hover{
    border-bottom: 10px solid #4e9aca;
    padding-bottom: 0;
}
.bc-item:nth-child(3):hover{
    border-bottom: 10px solid #FF003F;
    padding-bottom: 0;
    }*/
.bc-item:last-of-type {
    margin-right: 0;
}

.bc-item p {
    font-size: 14px;
    line-height: 21px;
    color: #454545;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 10px;
    padding: 0 10px;
    line-height: 15px;
    left: 0;
    z-index: 1;
}

.bc-item p::after {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #0044FF;
}

.bc-item:nth-child(2) p::after {
    background: #4e9aca;
}

.bc-item:nth-child(3) p::after {
    background: #FF0000;
}

.bc-item h3 {
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    margin: 33px 0 37px;
    color: #454545;
}

.bc-item .icon_info {
    position: absolute;
    width: 12px;
    height: 12px;
    background: url(../images/icon/icon_info.svg) center no-repeat;
    background-size: contain;
    bottom: 16px;
    left: 10px;
    z-index: 1;
    display: block;
    cursor: pointer;
}

.icon_info .tooltiptext {
    visibility: hidden;
    min-width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 138%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
}

.icon_info .tooltiptext::after {
    content: "";
    position: absolute;
    top: 97%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.icon_info:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.bc-item .icon_tang {
    font-weight: 500;
    font-size: 10px;
    line-height: 21px;
    color: #4e9aca;
    position: absolute;
    right: 10px;
    bottom: 11px;
    z-index: 1;
}

.bc-item .icon_tang::before {
    content: "";
    width: 6px;
    height: 100%;
    background: url(../images/icon/icon_tang.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -8px;
}

.bc-item .icon_giam {
    font-weight: 500;
    font-size: 10px;
    line-height: 21px;
    color: #FF003F;
    position: absolute;
    right: 10px;
    bottom: 11px;
    z-index: 1;
}

.bc-item .icon_giam::before {
    content: "";
    width: 6px;
    height: 100%;
    background: url(../images/icon/icon_giam.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -8px;
}

.lichsu_details {

}

.lichsu_img {
    width: 40%;
}

.lichsu_img {
    display: block;
    padding-top: 56px;
    padding-left: 30px;
}

.lichsu_box {
    width: 60%;
}

.ls_box-list {
    margin-top: 10px;
}

.ls_box-item {
    font-size: 14px;
    line-height: 28px;
}

.ls_box-item-span {
    display: block;
    width: 200px;
    padding-right: 10px;
}

.ls_box-item-p {
    width: calc(100% - 200px);
}

.ls_box-btn {
    padding-left: 40%;
    margin-top: 20px;
    display: flex;
}

.ls_box-btn .btn_hover {
    width: 170px;
    height: 44px;
    font-weight: bold;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    display: inline-block;
    background: #4e9aca;
    color: white !important;
    border: 0;
    border-radius: 4px;
}

.btn_hover.btn_white {
    color: #4e9aca !important;
    background: white;
    margin-right: 20px;
}

.btn_hover.btn_white:hover {
    background: #4e9aca;
    color: white !important;
}

.lichsu-form1 {

}

.ls-form1 {
    flex-wrap: wrap;
}

.ls-group {
    margin-right: 10px;
    position: relative;
}

.ls-group::before {
    content: "";
    width: 18px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 1;
    display: block;
}

.ls-group-find::before {
    display: none;
}

.icon_date::before {
    background: url(../images/icon/icon_date.svg) center no-repeat;
}

.icon_trangthai::before {
    background: url(../images/icon/icon_trangthai.svg) center no-repeat;
}

.icon_search::before {
    background: url(../images/icon/icon_search.svg) center no-repeat;
}

.icon_phuongthuc::before {
    background: url(../images/icon/icon_phuongthuc.svg) center no-repeat;
}

.icon_transaction::before {
    background: url(../images/icon/icon_transaction.svg) center no-repeat;
}

.icon_people::before {
    background: url(../images/icon/icon_people.svg) center no-repeat;
}

/*.ls_bottom::after{
    content: "";
    width: 14px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 0;
    display: block;
    background: url(../images/icon/icon_bottom.svg) center no-repeat;
    background-size: contain !important;
    }*/
.ls-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

.ls-group:last-of-type {
    margin-right: 0px;
}

.ls-group.ls_bottom {
    width: 30%;
}

.ls-group.ls-report-group {
    width: 100%;
}

.ls-form-control {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #F3F3F3 !important;
    border: 1px solid transparent;
    padding: 0 30px 0 52px;
}

.ls_bottom .ls-form-control {
    background: #F3F3F3 url(../images/icon/icon_bottom.svg) 95% no-repeat !important;
}

.lichsu-form2 {
    display: none;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.lichsu-form2 .ls-form-control {
    background: white !important;
}

.align_center {
    align-items: center;
}

.ls-checkbox {
    position: relative;
    cursor: pointer;
    line-height: 20px;
    font-size: 16px;
    margin: 10px 15px;
    z-index: 3;
}

.ls-checkbox .label {
    position: relative;
    display: block;
    float: left;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid #c8ccd4;
    border-radius: 100%;
    -webkit-tap-highlight-color: transparent;
}

.ls-checkbox .label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #4e9aca;
    transform: scale(0);
    transition: all 0.2s ease;
    opacity: 0.08;
    pointer-events: none;
}

.ls-checkbox:hover .label:after {
    transform: scale(3.6);
}

input[type="checkbox"]:checked + .label {
    border-color: #4e9aca;
}

input[type="checkbox"]:checked + .label:after {
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.35, 0.9, 0.4, 0.9);
    opacity: 1;
}

.hidden {
    display: none;
}

.ls-group [type="reset"] {
    border: 0;
    color: #007AFF;
    background: transparent;
    padding-left: 40px;
    outline: none !important;
}

.lichsu-list {
    margin-top: 20px;
    padding: 10px 15px 20px;
}

.lichsu-list tr {
    border-bottom: 1px solid #E9E9E9;
}

.lichsu-list tr th, .lichsu-list tr th a {
    color: #1A1A1A !important;
    font-weight: bold !important;
}

.lichsu-list tr th:nth-child(6),
.lichsu-list tr td:nth-child(6) {
    font-weight: bold;
    text-align: right;
}

.lichsu-list tr th:nth-child(1),
.lichsu-list tr td:nth-child(1) {
    padding-left: 0;
}

.lichsu-list tr th:last-of-type,
.lichsu-list tr td:last-of-type {
    padding-right: 0;
    text-align: right;
}

.report-status {
    font-weight: 500;
    padding-left: 35px !important;
    position: relative;
}

.report-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 14px;
    left: 15px;
    z-index: 1;
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.report-status-doing::before {
    background: #FFAA00;
}

.report-status-done::before {
    background: #00CC00;
}

.report-status-fail::before {
    background: #FF0000;
}

.report-status-diffirent::before {
    background: #C4C4C4;
}

.taikhoan_w {

}

.tk-left {

}

.tk-right {


}

.typeTran-table table th,
.typeTran-table table td {
    font-size: 14px !important;
}

.tk-main {

}

.tk-item {
    margin-bottom: 10px;
}

.tk-item:last-of-type {
    margin-bottom: 0px;
}

.tk-item span {
    font-size: 14px;
    line-height: 21px;
    color: #A3A3A3;
    display: block;
}

.tk-item label {
    font-size: 18px;
    line-height: 21px;
    color: #A3A3A3;
    display: block;
}

.tk-item p {
    font-size: 16px;
    line-height: 21px;
    color: #333333;
    min-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-item p.color_green {
    color: #4e9aca;
    font-weight: 900;
}

.tk-item p.color_pink {
    color: #FF003F;
}

.tk-update {
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    display: inline-block;
    color: white;
    padding: 12px;
    text-align: center;
    width: auto;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 50px;
    color: #007AFF;
    font-size: 14px;
    line-height: 21px;
    border-radius: 4px;
    background: #F3F9FF;
    border: 1px dashed #007AFF !important;
}

.tk-update:hover {
    color: #007AFF;
}

.t-btn-submit.t-btn-submit {
    margin-top: 20px;
}

.tk-img img {
    display: block;
    margin: auto;
}

.hoantien-list {

}

.hoantien-item {
    position: relative;
    margin-bottom: 20px;
}

.hoantien-item:last-of-type {
    margin-bottom: 0px;
}

.hoantien-item label {
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
    color: #ACACAC;
    position: absolute;
    z-index: 1;
}

.hoantien-item label.error {
    color: #FF0000;
    font-weight: normal;
}

.has-error .ht-form-control {
    border-color: #FF0000 !important;
}

.ht-form-control {
    border: 0 !important;
    border-bottom: 1px solid #E9E9E9 !important;
    display: block;
    width: 100%;
    font-size: 14px;
    color: #454545;
    line-height: 21px;
    padding: 0;
    background: white !important;
    border-radius: 0 !important;
}

.ht-form-control:disabled {
    color: #ACACAC !important;
}

.ht-form-control:focus {
    border: 0 !important;
    box-shadow: none;
    border-bottom: 1px solid #4e9aca !important;
}

.ht-lable-error {
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    color: #FF0000;
    position: absolute;
}

.hoantien-item .icon_info {
    position: absolute;
    width: 12px;
    height: 12px;
    background: url(../images/icon/icon_info.svg) center no-repeat;
    background-size: contain;
    bottom: 10px;
    right: 1px;
    z-index: 1;
    display: block;
    cursor: pointer;
}

.ht-form-group-error .ht-form-control {
    border-color: #FF0000 !important;
}

.hoantien-item .icon_info .tooltiptext {
    left: auto;
    right: 0;
    transform: none;
}

.hoantien-item .icon_info .tooltiptext::after {
    left: auto;
    right: 2px;
}

.ht-upload {
    display: block;
    font-size: 14px;
    line-height: 21px;
    color: #454545;
}

.ht-upload span {
    color: #007AFF;
}

.form-tk {
    display: none;
}

.dropzone {
    background: white;
    border-radius: 5px;
    border: 2px dashed #ACACAC;
    border-image: none;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
    padding: 15px;
}

#demo-upload {
    display: block;
    margin-top: 34px;
}

.hoantien-item-img label {
    top: -22px;
}

.dz-error-message {
    display: none !important;
}

.dropzone.dz-started .dz-message {
    display: block !important;
}

.dropzone .dz-preview .dz-details {
    opacity: 1;
    position: static;
    padding: 5px 6px;
    display: none !important;
}

.dropzone .dz-preview .dz-details .dz-size {
    display: none;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
}

.dz-remove {
    text-indent: -9999px;
    width: 18px;
    height: 18px;
    background: url(../images/close.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: -5px;
    right: -1px;
    z-index: 999;
}

.dropzone .dz-preview {
    margin: 0;
}

.dropzone .dz-message {
    margin: 0;
}

.dropzone .dz-preview .dz-image {
    border: 1px solid #e8e8e8;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
}

.dz-error-mark {
    display: none !important;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.trogiup-search input.ls-form-control {
    background: white !important;
    border: 1px solid #E9E9E9;
}

.hotro-addNew {

}

.hotro-addNew-form {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
}

.hotro-addNew-new {
    width: calc((100% - 20px) / 2);
}

.hotro-new-list {

}

.hotro-new-item {
    border: 1px solid #E9E9E9;
    border-radius: 4px;
    padding: 10px 20px 10px;
    margin-bottom: 20px;
}

.hotro-new-item:last-of-type {
    margin-bottom: 0;
}

.hotro-new-item a {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    display: block;
    color: #4e9aca;
}

.hotro-new-item p {
    font-size: 14px;
    line-height: 24px;
    color: #6F6F6F;
}

.hotro-list-table tr {
    border-bottom: 1px solid #E9E9E9;
}

.bg-popContact {
    width: 486px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -148px;
    margin-left: -243px;
    background: white;
    border-radius: 10px;
    text-align: center;
    padding: 40px 0 0;
}

.bg-popContact img {
    display: block;
    margin: auto;
}

.bg-popContact h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #454545;
    margin-bottom: 10px;
    margin-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

.bg-popContact p {
    font-size: 16px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 46px;
    padding-left: 40px;
    padding-right: 40px;
}

.bg-popContact a {
    display: block;
    background: #4e9aca;
    border-radius: 0 0 4px 4px;
    font-size: 20px;
    line-height: 23px;
    color: white;
    padding: 14px;
}

.pop_gift_btn a:first-of-type {
    color: #4e9aca;
    background: white;
    background: #F7F7F7;
}

.pop_gift_btn a {
    display: inline-block;
    width: 50%;
}

.bg-formHelp {
    display: block;
    position: fixed;
    width: 593px;
    height: 400px;
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
    padding: 20px 18px 30px;
}

.closeModal-help {
    width: 13px;
    height: 13px;
    background: url(../images/icon/icon_close.svg) center no-repeat;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    display: block;
}

.bg-formHelp .box-tt {
    padding-bottom: 20px;
}

.bg-formHelp .hotro-form-box {
    padding-left: 10px;
}

.bg-formHelp .hotro-addNew-btn {
    margin-top: 30px;
}

.bg-formHelp .dropzone {
    height: 140px;
}

.hotro-details {

}

.hotro-details-left {
    width: 406px;
    margin-right: 20px;
}

.hotro-details-right {
    width: calc(100% - 406px - 20px);
}

.hotro-details-left-banner {
    margin-top: 100px;
}

.hotro-details-left-banner img {
    display: block;
    margin: auto;
}

.hotro-details-chat {

}

.hotro-details-chat-item {
    border-bottom: 1px solid #D1D1D1;
    padding-bottom: 16px;
    margin-bottom: 20px;
    position: relative;
}

.ht-chat-item-img {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.ht-chat-item-img img {

}

.ht-chat-item-txt {
    padding-left: 50px;
    max-height: 53px;
    overflow: hidden;
    transition: 0.4s;
    padding-right: 30px;
}

.hotro-details-chat-item.active .ht-chat-item-txt {
    max-height: none;
}

.hotro-details-chat-item.active .ht-chat-close {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform-origin: center;
}

.ht-chat-item-txt h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #454545;
    padding-top: 8px;
    position: relative;
}

.ht-chat-item-txt h3.color_green {
    color: #4e9aca;
}

.ht-chat-item-txt h3 span {
    font-size: 12px;
    line-height: 18px;
    color: #ACACAC;
    position: absolute;
    right: 0;
    top: 12px;
    z-index: 1;
}

.ht-chat-item-txt p {
    font-size: 14px;
    line-height: 24px;
    color: #6F6F6F;
}

.ht-chat-item-txt-img {
    margin-top: 20px;
}

.ht-chat-item-txt-img img {
    display: inline-block;
    max-width: 100px;
    max-height: 100px;
    border-radius: 6px;
}

.ht-chat-close {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/icon/icon_chat_bottom.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    right: 30px;
    bottom: -11px;
    z-index: 5;
}

.ht-details-right-form {
    margin-top: 10px;
}

.ht-right-form {
    padding-left: 50px;
    position: relative;
}

.ht-input-text {
    width: calc(100% - 150px);
    border: 0;
    border-bottom: 1px solid #E9E9E9;
    font-size: 14px;
    height: 23px;
    margin-top: 21px;
}

.submit-txt {
    background: transparent;
    border: 0;
    font-size: 16px;
    font-weight: 500;
    color: gray;
    margin-top: 16px;
    outline: none !important;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0;
    width: 130px;
    height: 44px;
    background: #4e9aca;
    color: white;
    line-height: 44px;
    cursor: pointer;
}

.submit-txt:hover {
    color: white;
}

::-webkit-input-placeholder {
    color: #ACACAC;
}

:-ms-input-placeholder {
    color: #ACACAC;
}

::placeholder {
    color: #ACACAC;
}

.ht-input-type {

}

.ht-btn-submit {
    width: 150px;
    margin-left: 24px;
}

.ht-image-upload > input {
    display: none;
}

.ht-image-upload img {
    cursor: pointer;
}

.ht-image-upload {
    position: absolute;
    left: 21px;
    top: 20px;
    z-index: 2;
}

.ht-details-right-feel {
    margin-top: 10px;
    padding: 35px 20px 30px;
}

.ht-details-right-feel h3 {
    font-weight: 900;
    font-size: 16px;
    line-height: 24px;
    color: #454545;
}

.ht-details-right-feel p {
    font-size: 16px;
    line-height: 24px;
    color: #454545;
    margin-top: 6px;
}

.ht-details-right-feel ul {
    margin-top: 24px;
}

.ht-details-right-feel ul a {

}

.ht-details-right-feel ul a img {
    display: block;
}

.ht-details-right-feel ul li:not(:last-child) {
    margin-right: 15px;
}

.ht-details-info {

}

.ht-details-info-txt {

}

.ht-details-info-txt p {
    font-size: 16px;
    line-height: 22px;
    color: #454545;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 50%;
}

.ht-details-info-txt p span {
    font-size: 14px;
    line-height: 21px;
    color: #A3A3A3;
    display: block;
    margin-bottom: 1px;
}

.ht-details-info-txt p:first-of-type {
    margin-right: 45px;
}

.ht-details-info-status {
    padding-bottom: 40px;

}

.ht-details-info-status p {
    font-size: 14px;
    line-height: 21px;
    color: #A3A3A3;
    margin-bottom: 12px;
}

.ht-details-info-status ul {
    justify-content: space-between;
    position: relative;
    z-index: 5;
}

.ht-details-info-status ul:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #EBEBEB;
    position: absolute;
    top: 8px;
    left: 0;
    z-index: -1;
}

.ht-details-info-status li {
    width: 17px;
    height: 17px;
    background: #EBEBEB;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    color: #ACACAC;
}

.ht-details-info-status .done {
    position: relative;
    background: transparent;
    color: transparent;
    text-indent: -9999px;

}

.ht-details-info-status .done::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    background: url(../images/icon/icon_tick.png) center no-repeat;
    background-size: contain;
    top: 0px;
    left: 0;
    display: block;
}

.ht-details-info-status .doing {
    position: relative;
    color: transparent;
    text-indent: -9999px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15) !important;
}

.ht-details-info-status .doing::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background: #FF772A;
    border-radius: 50%;
    display: block;
    top: 5px;
    left: 5px;
}

.ht-details-info-status .doing::before {
    content: "Đang xử lý";
    font-size: 12px;
    line-height: 14px;
    color: #FF772A;
    display: block;
}

.ht-details-info-status-text {
    margin-top: 5px;
    position: relative;
}

.ht-details-info-status-text p {
    font-size: 14px;
    line-height: 18px;
}

.ht-details-info-status-text .text2 {
    color: #FF772A;
}

.ht-details-info-status-text .text3 {
    color: #4e9aca;
    position: absolute;
    right: 0;
    top: 0;
}

.trogiup-faq {
    padding: 38px 20px 30px;
}

.trogiup-faq .row {
    justify-content: center;
}

.trogiup-faq h2 {
    font-size: 30px;
    line-height: 38px;
    color: #454545;
    font-weight: bold;
    margin-bottom: 11px;
    text-align: center;
}

.trogiup-faq h3 {
    font-size: 16px;
    line-height: 24px;
    color: #454545;
    margin-bottom: 30px;
    font-weight: normal;
    text-align: center;
}

.trogiup-faq-list {
    background: #FFFFFF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
}

.trogiup-faq-list-tab {
    width: 224px;
    padding: 20px;
    background: #fcfcfc;
}

.trogiup-faq-list-content {
    width: calc(100% - 224px);
    padding: 15px 30px 30px;
}

.nav-faq {
    display: block;
    border: 0 !important;

}

.nav-faq li {
    display: block;
    margin: auto;
}

.nav-faq li a {
    display: block;
    margin: auto;
    border: 0 !important;
    background: transparent !important;
    font-size: 16px;
    line-height: 24px;
    color: #454545;
    padding-left: 44px;
    position: relative;
}

.nav-faq li a.active {
    color: #4e9aca !important;
}

.nav-faq li a span {
    width: 24px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.nav-faq li a span.icon1 {
    background: url(../images/icon/icon_hotro1.svg) center no-repeat;
}

.nav-faq li a span.icon2 {
    background: url(../images/icon/icon_hotro2.svg) center no-repeat;
}

.nav-faq li a span.icon3 {
    background: url(../images/icon/icon_hotro3.svg) center no-repeat;
}

.nav-faq li a span.icon4 {
    background: url(../images/icon/icon_hotro4.svg) center no-repeat;
}

.nav-faq li a span.icon5 {
    background: url(../images/icon/icon_hotro5.svg) center no-repeat;
}

.tab-content-faq {

}

.tab-content-faq-item {
    border-bottom: 1px solid rgba(44, 57, 66, .1);
}

.tab-content-faq-item h3 {
    position: relative;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
    padding: 20px 0;
}

.tab-content-faq-item h3:after {
    position: absolute;
    content: "";
    width: 24px;
    height: 100%;
    background: url(../images/icon/icon_down.svg) center no-repeat;
    background-size: contain;
    right: 0;
    top: 0;
}

.tab-content-faq-item p {
    color: #454545;
    font-size: 14px;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 30px;
    display: none;
    line-height: 24px;
}

.tab-content-faq-item.active h3 {
    color: #4e9aca;
}

.tab-content-faq-item.active h3::after {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform-origin: center;
}

.tab-content-faq-item.active p {
    /*display: block;*/
}

.feed {
    position: relative;
}

.feed .description {
    font-size: 18px;
    width: 500px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -25px;
    text-align: center;
    position: absolute;
    color: #888;
}

.feed .like-btn {
    width: 44px;
    height: 25px;
    background: #D0D0D0;
    bottom: 13px;
    left: 13px;
    cursor: pointer;
}

.feed .like-btn::before {
    content: ".";
    opacity: 0;
    display: block;
    width: 44px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: 0;
}

.feed .like-btn .reaction-box {
    margin: 24px auto 0;
}

.feed .like-btn .reaction-box .reaction-icon.angry {
    animation: fadeInLoad-angry 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px 0px;
}

.feed .like-btn .reaction-box .reaction-icon.flower {
    animation: fadeInLoad-flower 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px -40px;
}

.feed .like-btn .reaction-box .reaction-icon.haha {
    animation: fadeInLoad-haha 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px -80px;
    background: url(../images/icon/icon_feel3.svg) center no-repeat;
}

.feed .like-btn .reaction-box .reaction-icon.like {
    animation: fadeInLoad-like 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px -120px;
    background: url(../images/icon/icon_feel2.svg) center no-repeat;
}

.feed .like-btn .reaction-box .reaction-icon.love {
    animation: fadeInLoad-love 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background: url(../images/icon/icon_feel1.svg) center no-repeat;
}

.feed .like-btn .reaction-box .reaction-icon.sad {
    animation: fadeInLoad-sad 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px -200px;
    background: url(../images/icon/icon_feel5.svg) center no-repeat;
}

.feed .like-btn .reaction-box .reaction-icon.wow {
    animation: fadeInLoad-wow 0.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    background-position: 0px -240px;
    background: url(../images/icon/icon_feel4.svg) center no-repeat;
}

.feed .like-btn .reaction-box .reaction-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
    border-radius: 50px;
    margin: 0 10px;
    text-align: center;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translate(0, 100px) scale(0);
}

.feed .like-btn .reaction-box .reaction-icon label {
    padding: 3px 5px 3px 5px;
    position: relative;
    top: -24px;
    border-radius: 10px;
    font-size: 11px;
    color: #FFF;
    background: #333;
    visibility: hidden;
    display: none !important;
}

.feed .like-btn .reaction-box .reaction-icon.show {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}

.feed .like-btn .reaction-box .reaction-icon:hover {
    transform: scale(1.4);
    transform-origin: bottom;
}

.feed .like-btn .reaction-box .reaction-icon:hover label {
    visibility: visible;
}

.feed .like-btn:hover {
    background: #718C00;
}

.feel-txt {
    font-size: 16px;
    line-height: 24px;
    color: #454545;
    display: block;
    margin: 8px auto;
}


@media screen and (max-width: 1100px) {
    .header_notice {
        position: absolute;
        top: -13px;
        right: 16px;
        z-index: 5;
    }

    .header_notice:after {
        display: none;
    }

    .header_notice .m_level2_mb {
        position: absolute !important;
        /*display: block !important;*/
    }

    .btn_login_mb p {
        margin-top: 20px;
    }

    .btn_login_mb .btn_login {
        display: block;
        border-radius: 4px;
        text-align: center;
        height: 44px;
        line-height: 44px !important;
        font-weight: bold;
    }

    .menu-row {
        display: none;
    }

    .hotro-details-left {
        width: 288px;
    }

    .hotro-details-right {
        width: calc(100% - 288px - 20px);
    }

    .ht-details-info-txt p span {
        font-size: 12px;
    }

    .ht-details-info-txt p {
        font-size: 14px;
    }

    .ht-details-info-status-text p {
        font-size: 12px;
        line-height: 14px;
    }

    .h_n_icon::after {
        top: 20px;
    }
}


@media (min-width: 992px) {
    body.home {
        background-size: cover !important;
    }

    .f-navTop {
        /*padding: .5rem 120px;*/
        height: 74px;
    }

    .box-login a {
        margin-left: 15px;
    }

    .h-mb {
        display: block;
    }

    .h-pc {
        display: none;
    }

    .dp-pc {
        display: block !important
    }

    .dp-mb {
        display: none !important
    }

    .navbar-expand-lg .navbar-collapse {
        display: table-cell !important;
    }

    .navbar-expand-lg .navbar-nav {
        float: right;
    }
}

/* xac thuc */
.box-tl-tr, .box-tl-sa {
    width: 40%;
    height: 110px;
    border: 1px solid #eee;
    border-radius: 4px;
    -moz-border-radius: 4px;
    position: relative;
    background: url(../images/ico-upload.svg) 50% 20px no-repeat;
    background-size: 25px;
    text-align: center;
    padding-top: 70px;
}

.text-upload {

}

.box-tl-tr {
    margin-right: 15px;
}

.input-cus-file {
    height: 110px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;

}

.custom-control-label::before, .custom-control-label::after {
    top: 2px;
}


/* Gate */
.g-w80 {
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    border: 1px solid #cccc;
    border-top: none;
    min-height: 100vh;
    position: relative;
    padding-bottom: 90px;
}

.g-header {
    height: 100px;
    position: relative;
    border-bottom: 1px solid #ccc;
}

.g-header .g-logo {
    display: block;
    width: 210px;
    height: 40px;
    background: url(../images/gate/logo3.svg) 0 0 no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    margin-left: -105px;
    top: 25px;
}

.card-header {
    border: none;
}

.g-footer {
    position: absolute;
    height: 90px;
    bottom: 0;
    left: 0;
    border-top: 1px solid #ccc;
    width: 100%;
}

.g-footer-inner {
    width: 100%;
    text-align: center;
}

.ico-logo {
    display: inline-block;
    width: 74px;
    height: 26px;
    margin: 0 10px;
}

.logo-9pay {
    background: url("../images/gate/logo3.svg") 50% 50% no-repeat;
    background-size: 72px;
}

.logo-sc1 {
    background: url("../images/gate/ico-trus1.svg") 50% 50% no-repeat;
    background-size: 72px;
}

.logo-sc2 {
    background: url("../images/gate/ico-trus2.svg") 50% 50% no-repeat;
    background-size: 72px;
}

.bank-visa, .bank-visa.active {
    background: url("../images/gate/visa.png") 50% 50% no-repeat;
    background-size: 100%;
}

.bank-master, .bank-master.active {
    background: url("../images/gate/master.png") 50% 50% no-repeat;
    background-size: 100%;
}

.bank-jcb, .bank-jcb.active {
    background: url("../images/gate/jcb.png") 50% 50% no-repeat;
    background-size: 100%;
}

.bank-vietcom, .bank-vietcom.active {
    background: url("../images/gate/vietcom.jpg") 50% 50% no-repeat;
    background-size: 100%;
}

.btn-bank {
    border: 1px solid #A2A2A2;
    background-color: #f8f8f8;
}

.box-lstBankCt .btn-cardct.active {
    border-color: #11998e;
}

.box-lstBankCt-nd .btn-cardct {
    margin-bottom: 15px;
    border: 1px dotted #ccc;
    background-color: #fff;
}

.uperCase {
    text-transform: uppercase;
}

.card-guild {
    display: block;
    width: 100%;
    height: 300px;
    background: url("../images/gate/card-guide.png") 0 20px no-repeat;
    background-size: 100%;
}


.btn-mxam {
    background: #EEEEEE;
    color: #777777;
}

.fs_15, .fs_15 .form-control, .fs_15 select {
    font-size: 15px !important;
}

.pd_0 {
    padding: 0;
}

.mb_24 {
    margin-bottom: 24px;
}

.mb_40 {
    margin-bottom: 40px;
}

.form-control1 {
    width: 100%;
    padding: 4px 2px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.btn_submit {
    display: block;
    height: 33px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    color: #fff;
    background-color: #0069d9;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
}

.table thead th {
    font-weight: 500;
    font-size: 13px;
}

.table td {
    font-size: 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;
}

.br_8 {
    border-radius: 8px !important;
    overflow: hidden;
}

.txt_red {
    color: #EB2030;
}

.icon_clock .form-control1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../images/icon_clock.png) 97% 50% no-repeat;
    background-size: 15px;
}

.txt-hd1 {
    text-align: right;
    font-weight: 500;
}

.btn-xanhlam {
    background: #0069d9;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}

.btn-xanhlam:hover {
    background: #0069d9;
    color: white;
}

.form_t label {
    display: block;
}

.icon_bar a.icon {

    width: 35px;
    height: 35px;
    background: rgba(24, 210, 245, 1);
    display: inline-block;
    border-radius: 50%;
}

.icon_bar a img {
    max-width: 100%;
    max-height: 100%;
}

.main_bar {
    left: auto !important;
    position: absolute !important;
    width: 250px !important;
    right: 0 !important;
    border-radius: 6px !important;
    display: none;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-color: rgba(0, 0, 0, .2) !important;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important;
    margin-top: 0 !important;
    padding: 0;
}

.main_bar.active {
    display: block;
}

.dropdown-toggle::after {
    /*display: none;*/
}

.main_bar::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid whitesmoke;
    position: absolute;
    top: -10px;
    right: 6px;
    z-index: 10;
}

.main_bar a {
    display: block;
    margin: 0;
    border-bottom: 1px solid #ececec;
    padding: 12px 10px;
    color: black;
}

.main_bar li {
    text-align: center;
}

.main_bar li:last-of-type a {
    border-bottom: 0;
}

.main_bar a:hover {
    background: #e6e6e6;
}

.ul_ls {

}

.ul_ls li {
    border-right: 1px solid #707070;
    padding-right: 30px;
    padding-left: 30px;
}

.ul_ls li:first-of-type {
    padding-left: 0;
}

.ul_ls li:last-of-type {
    border-right: 0;
}

.ul_ls a {
    font-size: 14px;
    color: black;
}

.ul_ls a:hover {

}

.ul_ls li.active a {
    font-weight: 500;
}

.main-tlt1 {
    height: 30px;
    line-height: 29px;
    /*border-bottom: 1px solid #eee;*/
    padding: 0 15px;
    color: #000;
    font-size: 16px !important;
}

.draggable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.draggable::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
    display: none;
}

.draggable::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

.draggable .draggable-inner {
    display: inline-block;
}

.w_150 {
    max-width: 130px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

.txt_tb {
    text-shadow: 1px 1px red;
}

.color_xanh {
    color: #2E66FF;
}

.color_xanhla {
    color: #4e9aca;
}

.color_do {
    color: #DA1E28;
}

.txt-hd {
    font-weight: 800;
    word-break: break-word;
}

@media (max-width: 1024px) {
    .box-gt1 {
        background-size: contain !important;
    }
}

@media (max-height: 700px) {
    .box-gt1 {
        background-size: contain !important;
    }
}

@media (max-width: 991.5px) {
    .container {
        max-width: none;
    }

    .dp-pc {
        display: none !important
    }

    .dp-mb {
        display: block !important
    }

    .f-navTop {
        height: 60px;
    }

    .i_logout {
        width: 30px;
        height: 24px;
        margin-right: -6px;
        display: block;
        background: url(../images/icon_logout.svg) no-repeat;
        background-size: auto;
        filter: invert(54%) sepia(58%) saturate(556%) hue-rotate(80deg) brightness(91%) contrast(89%);
        -webkit-filter: invert(54%) sepia(58%) saturate(556%) hue-rotate(80deg) brightness(91%) contrast(89%);
    }

    .box-ttv-right a {
        padding: 0;
        text-align: center;
        width: 100px;
    }

    .box-ttv-right i {
        display: none !important;
    }

    .box-ttv-right {
        margin-top: 1rem;
    }

    .col-left .box-col, .col-right .box-col {
        margin: 0;
    }

    .box-htnap {
        margin-bottom: 30px;
    }

    .col-left {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 7;
    }

    .box-col {
        border-radius: 0;
    }

    .col-left .box-col {
        border-bottom: none;
        border-right: none;
        border-left: none;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .col-left .btn-left {
        width: 50%;
        display: block;
        height: 60px;
        overflow: hidden;
        border-bottom: none;
        border-right: 1px solid #eeee;
        padding-top: 38px;
        font-size: 12px;
    }

    .btn-left .ico-left {
        width: 32px;
        height: 32px;
        margin-left: -15px;
        background-size: 32px;
        top: 4px;
    }

    .btn-left .ico-maphone {
        background-size: 16px;
    }

    .btn-left .ico-mathe {
        background-size: 20px;
    }

    .btn-left .ico-hoantien {
        background-size: 20px;
    }

    .btn-left .ico-khieunai {
        background-size: 20px;
    }

    .btn-left .ico-hoadon {
        background-size: 18px;
    }

    .w-1000 {
        padding-bottom: 80px !important;
        padding-top: 0;
    }

    .col-right {

    }

    .col-main {

    }

    .intro-l {
        display: none;
    }

    .box-gt2 h3 {
        font-size: 30px;
    }

    .navbar-toggler {
        border: none !important;
        color: #fff;
        outline: none !important;
        padding: .25rem 0 !important;
    }

    .navbar-toggler .navbar-toggler-icon {
        margin-left: 12px;
        color: #fff;
        background: url(../images/icon_menu.png) no-repeat !important;
        margin-top: 16px;
    }

    .f-container h1 {
        position: absolute;
        left: 50%;
        top: 0px;
        margin-left: -55px;
    }

    .f-container h1 .logo {
        margin: 0;
    }

    .navbar-collapse {
        position: fixed;
        width: 100%;
        left: 0;
        top: 58px;
        background: #fff;
        z-index: 10;
        height: calc(100vh - 54px);
        padding: 1rem;
        overflow-y: scroll;
        box-shadow: inset 0px 11px 8px -10px #CCC;
        -webkit-box-shadow: inset 0px 11px 8px -10px #CCC;
    }

    .no-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .navbar-nav .nav-item {
        margin: 0;
    }

    .f-navTop .navbar-nav .nav-link {
        color: #000 !important;
        border-bottom: 1px solid #eee;
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border: none
    }

    .box-tl-tr, .box-tl-sa {
        width: 46%;
        font-size: 12px;
    }

    .navbar li.dropdown.sp.show .dropdown-menu {
        border: 0;
        padding: 20px;
    }

    .txt-error {
        font-size: 19px;
    }

    .navbar {
        padding: 0 15px;
    }

    .left-account {
        display: none;
    }

    .wrap-left {
        position: fixed;
        width: 100%;
        bottom: 0;
        background: white;
        left: 0;
        z-index: 10;
    }

    .left-menu {
        display: flex;
    }

    .left-menu-item {
        width: 20%;
        margin-bottom: 0;
        height: 60px;
        padding: 0 1px;
        text-align: center;
        padding-top: 21px;
        font-size: 13px;
    }

    .left-menu-item span {
        left: calc((100% - 24px) / 2);
        top: 8px;
    }

    .wrap-right {
        width: 100%;
        margin-left: 0;
    }

    .pt_85 {
        padding-top: 66px;
        padding-bottom: 80px;
    }

    .right-bc3-box-item p {
        font-size: 14px;
        line-height: 21px;
    }

    .right-bc3-box-item span {
        font-size: 20px;
        line-height: 20px;
    }

    .taikhoan_w, .wrap_baocao {
        flex-direction: column;
    }

    .tk-left, .bc-left {
        margin-bottom: 20px;
        width: 100%;
        margin-right: 0;
    }

    .tk-right, .bc-right {
        width: 100%;
    }

    .lichsu_img {
        display: none;
    }

    .lichsu_box {
        width: 100%;
    }

    .ls_box-btn {
        padding-left: 0;
        justify-content: center;
    }

    .ls-checkbox, .r-bc3-pagination p {
        font-size: 14px;
    }

    .hotro-new-item p {
        max-height: 68px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 767px) {
    .col-hidemb {
        display: none;
    }

    .box-fullh {
        height: auto;
        min-height: 100vh;
        background: white;
    }

    .box-account-lg {
        padding-top: 0;
    }

    .box-login-item1 {
        padding: 20px 15px;
        border-radius: 0;
        border: 0;
    }


    .ls-form-control {
        font-size: 13px;
    }

    .ls-group::before {
        background-size: contain !important;
    }

    .ls-group {
        width: 100% !important;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .lichsu-form2 {
        padding-left: 0;
        padding-right: 0;
    }

    .ls-group [type="reset"] {
        padding-left: 0;
        font-size: 14px;
    }

    .content-menu {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-shadow: 0 0px 22px 5px rgba(0, 0, 0, 0.13);
    }

    .content-menu a {
        font-size: 14px;
        padding: 10px 4px;
        margin: 0;
        display: inline-block;
        width: 24%;
        text-align: center;
    }

    .content-menu a.active {
        font-size: 14px;
    }

    .table td, .table th {
        font-size: 12px !important;
    }

    .dropzone .dz-preview {
        margin: 6px;
    }

    .dropzone .dz-preview .dz-image {
        width: 80px;
        height: 80px;
    }

    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
        max-width: 80px;
    }

    .bc-item .icon_info .tooltiptext {
        left: 0;
        transform: none;
    }

    .bc-item .icon_info .tooltiptext::after {
        left: 7px;
        top: 94%;
    }

    .f-trg-search .btn {
        font-size: 12px;
        height: 40px;
        line-height: 40px;
    }

    .f-trg-btn1 {
        padding-right: 5px;
    }

    .f-trg-btn2 {
        padding-left: 5px;
    }

    .bg-formHelp {
        width: 320px;
        height: 350px;
        padding: 6px 8px 16px;
    }

    .bg-formHelp .box-tt {
        font-size: 15px;
        padding-bottom: 6px;
    }

    .bg-formHelp .dropzone {
        height: 126px;
        padding: 6px;
        overflow: hidden;
    }

    .bg-formHelp .hotro-addNew-btn {
        margin-top: 20px;
    }


    .right-baocao2 {
        padding: 16px 16px 24px;
    }

    .right-bc3-box {
        display: block;
    }

    .right-bc3-box-item {
        width: calc((100% - 10px) / 2);
        margin-right: 10px;
        float: left;
        margin-bottom: 10px;
        height: 90px;
    }

    .right-bc3-box-item:nth-child(2n) {
        margin-right: 0;
    }

    .right-bc3-box-item .icon {
        width: 24px;
        height: 24px;
        background-size: contain;
        right: 6px;
        bottom: 13px;
    }

    .right-bc3-box-item span {
        font-size: 17px;
        bottom: 7px;
    }

    .r-bc3-pagination {
        flex-direction: column;
        align-items: center;
    }

    .r-bc3-pagination p {
        margin-bottom: 10px;
    }

    .detailTran-item-l {
        padding-bottom: 0;
    }

    .detailTran-btn a {
        width: 118px;
    }

    .group-input {
        flex-direction: column;
    }

    .group-input label {
        width: 100%;
    }

    .group-input input, .group-input textarea {
        width: 100%;
    }

    .hotro-addNew {
        flex-direction: column;
    }

    .hotro-addNew-form {
        width: 100%;
        margin-right: 0px;
    }

    .hotro-addNew-new {
        width: 100%;
        margin-top: 20px;
    }

    .hotro-details-left-banner {
        display: none;
    }

    .hotro-details {
        flex-direction: column;
    }

    .hotro-details-left {
        width: 100%;
        margin-right: 0;
    }

    .hotro-details-right {
        width: 100%;
        margin-top: 20px;
    }

    .ht-chat-item-txt {
        padding-right: 0;
    }

    .ht-chat-item-txt-img img {
        max-width: 60px;
        max-height: 60px;
    }

    .ht-right-form {
        flex-direction: column;
    }

    .ht-right-form {
        padding-left: 17px;
    }

    .ht-input-text {
        /*width: 100%;*/
    }

    .ht-image-upload {
        left: -9px;
    }

    .ht-btn-submit {
        width: 100px;
        margin-left: 0;
        margin-top: 10px;
    }

    .ht-details-right-feel p {
        font-size: 14px;
        line-height: 21px;
    }

    .trogiup-faq-list {
        flex-direction: column;
    }

    .trogiup-faq-list-tab {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 10px;
    }

    .trogiup-faq-list-content {
        width: 100%;
        padding: 0;
    }

    .tab-content-faq-item {
        transition: 0.4s;
    }

    .tab-content-faq-item h3 {
        font-size: 14px;
    }

    .tab-content-faq-item p {
        font-size: 14px;
        padding-left: 0;
        padding-top: 0px;
        padding-bottom: 20px;
        line-height: 21px;
    }

    .nav-faq {
        display: flex;
        -webkit-display: flex;
        -moz-display: flex;
    }

    .nav-tabs .nav-item {
        width: 20%;
    }

    .nav-faq li a {
        padding-left: 0;
        text-align: center;
        font-size: 12px;
        padding: 12px 0 0;;
    }

    .nav-faq li a span {
        display: block;
        top: -16px;
        left: 50%;
        margin-left: -12px;
    }

    .ls-form-control {
        padding: 0 12px 0 34px;
    }

    .trogiup-faq h2 {
        font-size: 20px;
        line-height: 24px;
    }

    .trogiup-faq h3 {
        font-size: 15px;
        line-height: 20px;
    }

    .feel-txt {
        font-size: 14px;
        line-height: 21px;
    }

    .bg-popContact {
        width: 290px;
        margin-left: -145px;
        margin-top: -140px;
        padding-top: 24px;
    }

    .bg-popContact p {
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .bg-popContact h3 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bg-popContact a {
        font-size: 16px;
    }

    .ls-form1 .btn_hover {
        margin-top: 10px;
    }
}

@media only screen and (min-device-width: 415px) and (max-device-width: 991.5px) {
    .box-gt2 {
        margin: 0 auto;
        padding-bottom: 10px;
    }

    @media screen and (orientation: portrait) {
        .box-gt2 {
            padding-bottom: 100px;
        }
    }
}

.daterangepicker {
    position: absolute;
    color: inherit;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    width: 278px;
    max-width: none;
    padding: 0;
    margin-top: 7px;
    top: 100px;
    left: 20px;
    z-index: 3001;
    display: none;
    font-size: 15px;
    line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
    right: 9px;
}

.daterangepicker.opensleft:after {
    right: 10px;
}

.daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
}

.daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto;
}

.daterangepicker.opensright:before {
    left: 9px;
}

.daterangepicker.opensright:after {
    left: 10px;
}

.daterangepicker.drop-up {
    margin-top: -7px;
}

.daterangepicker.drop-up:before {
    top: initial;
    bottom: -7px;
    border-bottom: initial;
    border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
    top: initial;
    bottom: -6px;
    border-bottom: initial;
    border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
    float: none;
}

.daterangepicker.single .drp-selected {
    display: none;
}

.daterangepicker.show-calendar .drp-calendar {
    display: block;
}

.daterangepicker.show-calendar .drp-buttons {
    display: block;
}

.daterangepicker.auto-apply .drp-buttons {
    display: none;
}

.daterangepicker .drp-calendar {
    display: none;
    max-width: 270px;
}

.daterangepicker .drp-calendar.left {
    padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
    padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
    border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid black;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
}

.daterangepicker .calendar-table .next span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

.daterangepicker .calendar-table {
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #fff;
}

.daterangepicker .calendar-table table {
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: #eee;
    border-color: transparent;
    color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
    font-size: 80%;
    color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: #fff;
    border-color: transparent;
    color: #999;
}

.daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0;
}

.daterangepicker td.start-date {
    border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff;
}

.daterangepicker th.month {
    width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
}

.daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%;
}

.daterangepicker select.yearselect {
    width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    width: 50px;
    margin: 0 auto;
    background: #eee;
    border: 1px solid #eee;
    padding: 2px;
    outline: 0;
    font-size: 12px;
}

.daterangepicker .calendar-time {
    text-align: center;
    margin: 4px auto 0 auto;
    line-height: 30px;
    position: relative;
}

.daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.daterangepicker .drp-buttons {
    clear: both;
    text-align: right;
    padding: 8px;
    border-top: 1px solid #ddd;
    display: none;
    line-height: 12px;
    vertical-align: middle;
}

.daterangepicker .drp-selected {
    display: inline-block;
    font-size: 12px;
    padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 0px 8px;
    width: 50px;
    height: 36px;
    line-height: 36px;
}

.daterangepicker.show-ranges .drp-calendar.left {
    border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
    float: none;
    text-align: left;
    margin: 0;
}

.daterangepicker.show-calendar .ranges {
    margin-top: 8px;
}

.daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

.daterangepicker .ranges li {
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

.daterangepicker .ranges li:hover {
    background-color: #eee;
}

.daterangepicker .ranges li.active {
    background-color: #08c;
    color: #fff;
}


.mlr_0 {
    margin-left: 0;
    margin-right: 0;
}

.chat_w {
    width: 70%;
    background: #e9f0fb;
    border-radius: 6px;
    padding: 8px;
    margin-top: 15px;
    position: relative;
}

.chat_w::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 21px solid #e9f0fb;
    top: -16px;
    left: 15px;
    z-index: 5;
}

.chat_user {
    float: right;
}

.chat_user::after {
    left: auto;
    right: 15px;
}

.chatbox p {
    margin: 0;
    padding: 0;
}

.btn-default {
    background: #e0dfdf;
    color: black;
}

.btn-default:hover {
    color: black;
    background: #b7b5b5;
}

@media (min-width: 564px) {
    .daterangepicker {
        width: auto;
    }

    .daterangepicker .ranges ul {
        width: 140px;
    }

    .daterangepicker.single .ranges ul {
        width: 100%;
    }

    .daterangepicker.single .drp-calendar.left {
        clear: none;
    }

    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {
        float: left;
    }

    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {
        float: right;
    }

    .daterangepicker.ltr {
        direction: ltr;
        text-align: left;
    }

    .daterangepicker.ltr .drp-calendar.left {
        clear: left;
        margin-right: 0;
    }

    .daterangepicker.ltr .drp-calendar.left .calendar-table {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .daterangepicker.ltr .drp-calendar.right {
        margin-left: 0;
    }

    .daterangepicker.ltr .drp-calendar.right .calendar-table {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .daterangepicker.ltr .drp-calendar.left .calendar-table {
        padding-right: 8px;
    }

    .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
        float: left;
    }

    .daterangepicker.rtl {
        direction: rtl;
        text-align: right;
    }

    .daterangepicker.rtl .drp-calendar.left {
        clear: right;
        margin-left: 0;
    }

    .daterangepicker.rtl .drp-calendar.left .calendar-table {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .daterangepicker.rtl .drp-calendar.right {
        margin-right: 0;
    }

    .daterangepicker.rtl .drp-calendar.right .calendar-table {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .daterangepicker.rtl .drp-calendar.left .calendar-table {
        padding-left: 12px;
    }

    .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {
        text-align: right;
        float: right;
    }
}

@media (min-width: 730px) {
    .daterangepicker .ranges {
        width: auto;
    }

    .daterangepicker.ltr .ranges {
        float: left;
    }

    .daterangepicker.rtl .ranges {
        float: right;
    }

    .daterangepicker .drp-calendar.left {
        clear: none !important;
    }
}


@media screen and (max-width: 790px) {
    .ul_ls li {
        padding-right: 10px;
        padding-left: 0px;
    }
}

@media screen and (max-width: 600px) {
    .form_t .pd_0 {
        padding: 0px 15px;
    }

    .hideXS {
        display: none !important;
    }

    .draggable {
        max-width: 100%;
        position: relative;
        overflow: hidden;
        user-select: none;
        overflow-x: scroll;
        border-bottom: 1px solid #eee;
    }

    .draggable .draggable-wrap {
        white-space: nowrap;
        position: relative;
        left: 0px;
    }

    .modal-header h3 {
        font-size: 18px;
    }

}

@media screen and (max-width: 575px) {

    .r-bc2-btn {
        margin-top: 0;
    }

    .bc-list {
        flex-direction: column;
    }

    .bc-item {
        margin-right: 0;
        width: 100%;
        margin-bottom: 15px;
    }

    .right-baocao2 .btn_hover,
    .trogiup-faq .btn_hover,
    .trogiup-search .btn_hover {
        margin-top: 15px;
    }

    .trogiup-search .ls-group {
        margin-bottom: 0;
    }

    .submit-txt {
        font-size: 14px;
        width: 70px;
    }

    .ht-input-text {
        width: calc(100% - 80px);
    }
}

@media screen and (max-width: 400px) {
    .nav-faq li a {
        font-size: 10px;
    }
}


.error {
    color: #FF0000;
    font-weight: normal;
    font-size: 12px;
}

.hotro-addNew-btn {
    padding: 0;
}

#formHelp .textarea_description textarea {
    max-height: 100px;
    overflow-y: auto;
}

.toast-center {
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translate(-50%, 0px);
    z-index: 9999;
}

.toast-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    display: none;
}

.toast-backdrop.show {
    opacity: 0.2;
    display: block;
}

.menu-tab {
    float: left;
    width: max-content !important;
    border-radius: 3px;
    background-color: #d7d7d7;
    padding: 12px;
    color: #333333;
}

.btn-disabled {
    pointer-events: none;
    cursor: default;
}

/* Tooltip container */
.tooltip-custom {
    position: relative;
    display: inline-block;
}

.tooltip-custom .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-custom .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltiptext.show {
    visibility: visible;
}

/* color text*/
.color-disable {
    color: #ACACAC;
}

/*height*/
.height-22 {
    height: 22px;
}