@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 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;
}