/* ---------------- DEFAULT ---------------------------------------------- */

@font-face {
    font-family: 'SegoeUI';
    src: url('../fonts/SegoeUI/SegoeUI.eot?#iefix') format('embedded-opentype'),  url('../fonts/SegoeUI/SegoeUI.woff') format('woff'), url('../fonts/SegoeUI/SegoeUI.ttf')  format('truetype'), url('../fonts/SegoeUI/SegoeUI.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'SegoeUI';
  src: url('../fonts/SegoeUI-Semibold/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'),  url('../fonts/SegoeUI-Semibold/SegoeUI-Semibold.woff') format('woff'), url('../fonts/SegoeUI-Semibold/SegoeUI-Semibold.ttf')  format('truetype'), url('../fonts/SegoeUI-Semibold/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg');
  font-weight: 600;
  font-style: normal;
}
@font-face {
    font-family: 'SegoeUI';
    src: url('../fonts/SegoeUI-Bold/SegoeUI-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/SegoeUI-Bold/SegoeUI-Bold.woff') format('woff'), url('../fonts/SegoeUI-Bold/SegoeUI-Bold.ttf')  format('truetype'), url('../fonts/SegoeUI-Bold/SegoeUI-Bold.svg#SegoeUI-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
  
body, html { font-family: 'SegoeUI'!important; font-size: 12px; padding: 0px; position: relative; }
img{max-width: 100%;}
b, strong { font-weight: bold; }
ul{margin: 0px;}

/* ----------- PRELOADER -------------------------------------- */
.preloader { width: 100%; height: 100%; top: 0; position: fixed; z-index: 99999; background: #fff; }
.lds-ripple{display:inline-block;width:64px;height:64px;position:absolute;top:calc(50% - 3.5px);left:calc(50% - 3.5px)}.lds-ripple .lds-pos{position:absolute;border:2px solid #2962FF;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,.1,.5,1) infinite}.lds-ripple .lds-pos:nth-child(2){animation-delay:-.5s}@keyframes lds-ripple{0%{top:28px;left:28px;width:0;height:0;opacity:0}5%{top:28px;left:28px;width:0;height:0;opacity:1}100%{top:-1px;left:-1px;width:58px;height:58px;opacity:0}}


/* ---------------- DEFAULT ---------------------------------------------- */
.left-side-menu{background: #eff6fb;}
#wrapper{max-width:1920px; margin: auto;background: #eff6fb;position: relative;}
[class*="col-"], .container-fluid, .container{padding-left: 5px; padding-right: 5px;}
.row{margin-left: -5px; margin-right: -5px;}

.content.padd-default{padding: 0 15px;}

.max-w{max-width: 1288px; margin: auto;}

/* .CONTENT-PAGE */
.content-page{margin-top: 0px; padding-bottom: 30px;}

.navbar-custom{    background-color: #046839;}

@media(max-width: 767px){
  .mb-m-de{margin-bottom:30px!important; }
}
/* ---------------- HEADER ---------------------------------------------- */
.navbar-custom{height: 70px;position: relative;   color: #fff;}
.logo-box{width: auto; height: auto; float: none; display: inline-block;    vertical-align: top; }
.logo { line-height: 54px; display: inline-block; vertical-align: top; }
.left-side-menu { top: 0px; position: absolute; width: 254px; box-shadow: none; border-right: 1px solid #f5f5f5!important;     padding-top: 0;     min-height: 100vh;}

.navbar-custom .topnav-menu .nav-link{       max-height: 54px; line-height: 54px;color: #fff; }
.navbar-custom .button-menu-mobile{height: 54px;line-height: 54px;    width: 25px;}

.navbar-custom a{color: #fff;}


/* TOPNAV-MENU */
.topnav-menu{    display: inline-block;}
.topnav-menu .header-icon{margin-right: 15px;}
.topnav-menu .header-icon img{    vertical-align: sub; max-height: 15px;}
.topnav-menu .notification-list .badge.badge-danger{left: 26px; right: auto; width: 16px; height: 16px; text-align: center; line-height: 14px; padding: 0;}
@media(max-width: 767px){
  .topnav-menu .text{display: none!important;}
}


/* TOPNAV-MENU-LEFT */
.topnav-menu-left li.show .nav-link, .topnav-menu-left li.active .nav-link, .topnav-menu-left li:hover .nav-link, .topnav-menu-left li:focus .nav-link{    color: #ffd200!important;}

/* SIDEMENU */
#sidebar-menu .menu-arrow:before{    content: "\F415";}
#sidebar-menu a{font-weight: 600;}
#sidebar-menu li.active>a>span.menu-arrow{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
#sidebar-menu li.active>a>span.menu-arrow:before{    content: "\F374";}
#sidebar-menu>ul>li>a:active,#sidebar-menu>ul>li.active>a, #sidebar-menu>ul>li>a:focus, #sidebar-menu>ul>li>a:hover{color: #1a345d; font-weight: 600;}
.nav-second-level li a:focus, .nav-second-level li a:hover, .nav-thrid-level li a:focus, .nav-thrid-level li a:hover{color: #1a345d; font-weight: 600;}

#sidebar-menu .menu-title{font-size: 12px; font-weight: bold; position: relative; background: #f5f5f5; padding: 7px 20px;    border-left: 6px solid #1a345d;}
#sidebar-menu .menu-title .arrows-right{position: absolute;top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8px;height: 14px;}
#sidebar-menu .menu-title .arrows-right img{vertical-align: top;}

#sidebar-menu>ul>li>a{padding: 7px 20px;padding-left: 7px;font-size: 12px;font-family: 'SegoeUI'!important;}
#sidebar-menu>ul>li>a .arrows-sub-right { width: 26px; position: relative; height: 15px;;}
.nav-second-level li a, .nav-thrid-level li a{color: #000000; font-size: 12px;}

#sidebar-menu #side-menu{padding-left: 40px;}

.arrows-sub-right img{max-height: 15px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;}
.arrows-sub-right img.basic{display: block; position: absolute; top: 4px; left: 0; }
.arrows-sub-right img.hover-active { opacity: 0; position: absolute; top: 4px; left: 0; }

.metismenu li{margin-bottom: 13px;}
.metismenu>li.active>a>.arrows-sub-right img.basic, .metismenu>li:hover>a>.arrows-sub-right img.basic{opacity: 0; }
.metismenu>li.active>a>.arrows-sub-right img.hover-active, .metismenu>li:hover>a>.arrows-sub-right img.hover-active{opacity: 1;}

.metismenu>li.active, .metismenu>li:hover{background: #e1eef8; border-radius: 4px;}
.metismenu>li.active a, .metismenu>li:hover a{color: #046839!important;}

/* ---- */
.nav-second-level li a, .nav-thrid-level li a{padding-left: 0px;}
.metismenu>li ul>li>a .arrows-sub-right { width: 20px; position: relative; height: 15px; }
.metismenu>li ul>li>a .arrows-sub-right img{height: 10px;}
.metismenu>li.active ul>li>a, .metismenu>li:hover ul>li>a{color: #000000!important;}
.metismenu>li ul>li>a{color: #000000!important;}
.metismenu>li:hover ul>li:hover>a, .metismenu>li.active ul>li:hover>a, .metismenu>li.active ul>li>a.active{color: #046839!important;}
.metismenu li li{margin-bottom: 0px;}

.metismenu>li ul>li:hover>a .arrows-sub-right img.basic{opacity: 0; }
.metismenu>li ul>li:hover>a .arrows-sub-right img.hover-active{opacity: 1;}

.metismenu>li ul>li>a.active .arrows-sub-right img.basic{opacity: 0; }
.metismenu>li ul>li>a.active .arrows-sub-right img.hover-active{opacity: 1;}

@media (max-width: 767px){
  .logo-box {
      display: block!important;
  }
  .navbar-custom .topnav-menu .nav-link{    padding-right: 5px!important;     padding-left: 5px!important;}
  .topnav-menu .notification-list .badge.badge-danger{left: 15px;}
  .topnav-menu .header-icon { margin-right: 0px; }
}


/* ------------------------------------------------------ */
/* BREADCRUMB */
.breadcrumb-header-box{background: #f3f1f2;  padding-left: 40px; padding-right: 15px;}
.breadcrumb-header-box .breadcrumb{padding: 0;line-height: 36px; margin: 0px;}
.breadcrumb-item>a{color: #1a345d;}
.breadcrumb-item+.breadcrumb-item::before { background: url(../images/icon/breadcrumb-arrows.png)no-repeat center center; font-size: 0; width: 8px; vertical-align: top; left: -30px; position: absolute; }
.breadcrumb-item+.breadcrumb-item { margin-left: 60px; position: relative; }

/* CARD-USER-SETTING */
.card-user-setting { padding: 0; border: 0; box-shadow: none; padding-left: 50px; }
.card-user-setting  .col-auto{padding-right: 0px;}
.card-user-setting .user-name{text-overflow: ellipsis; position: relative; max-height: 20px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

/* ---------------- PAGE HOME ---------------------------------------------- */
.page-title-box .page-title{font-size: 18px; font-weight: bold; color: #000000; line-height: 50px; border-bottom: 1px solid #f5f5f5; margin-bottom: 45px;}
@media(max-width: 767px){
  .page-title-box .page-title{    margin-bottom: 15px!important;}
}
/* FORM */
.form-label-right .col-form-label{color: #1a345d!important;}
.form-control { height: 36px; border-radius: 7px; box-shadow: none; border: 1px solid #046839; background: #e1eef8; color: #0c0c0c; font-size: 16px;}
.form-group { margin-bottom: 15px; }

.w-100{width: 100%;}
.btn-primary { background: #046839; height: 36px; border-radius:7px; font-size: 16px; border: 0; box-shadow: none; font-weight: bold; line-height: 21px; -webkit-border-radius:7px; -moz-border-radius:7px; -ms-border-radius:7px; -o-border-radius:7px; }
.btn-primary:hover, .btn-primary:focus{background: #1a4211;}

a.btn-primary{line-height: 21px; font-weight: bold; border-radius: 0px; min-width: 145px;}

@media(min-width: 768px){
    .form-label-right .col-form-label{text-align: right;}
}

/* CARD-ADDRESS */
.card-address{border: 1px solid #e3e3e3; min-height: 133px;margin-bottom: 13px;}
.card-address .card-title-add{background: #1a345d; color: #fff; font-weight: bold; line-height: 35px; padding: 0 15px;}
.card-address .content{padding: 15px; font-size: 16px; color: #383838;}
.card-address .content .text-name{    font-weight: bold;}
.card-address .content .text-address{    font-weight: 600;}

.label-success{color: #2eb30f; font-weight: bold;}
.label-primary{color: #1e4bdc; font-weight: bold;}
.label-danger{color: #d32432; font-weight: bold;}

.tabs-default .nav.nav-tabs{    background: #f5f5f5; border-color: #f5f5f5;     border-bottom: 2px solid #f5f5f5!important;}
.tabs-default .nav-bordered li a{padding-left: 0px!important; padding-right: 0px!important;font-size: 12px; font-weight: bold;}
.tabs-default .nav-bordered li{padding-left: 20px; padding-right: 20px;}
.tabs-default .nav-tabs .nav-item.show .nav-link, .tabs-default .nav-tabs .nav-link.active{background: transparent; border-color: #f31a6b!important; color: #f31a6b;}
.tabs-default .tab-content { padding: 13px 0 0 0; }

/* CARD-BOX-MEDIA */
.card-box-media{ -webkit-box-shadow: 0px 0px 19px rgba(0,0,0,.1); box-shadow: 0px 0px 19px rgba(0,0,0,.1); min-height: 117px; overflow: hidden; position: relative; padding: 37px 30px 10px 30px; border-radius: 12px;margin-bottom: 30px; font-size: 16px;-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;    cursor: pointer; }
.card-box-media .icon{position: absolute; right: 30px; top: 37px;}
.card-box-media .content{color: #000000;}
.card-box-media .content .title{font-weight: bold;}
.card-box-media:hover{    background: #fbfbfb;}

/* HAMBURGER */
.hamburger { 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; }
.hamburger:hover { opacity: 0.7; }
.hamburger.is-active:hover { opacity: 0.7; }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #fff; }
.hamburger-box { width: 28px; height: 14px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 28px; height: 2px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } 
.hamburger-inner::before { top: 7px; } 
.hamburger-inner::after { bottom: -10px; }

/* Collapse Reverse */
.hamburger--collapse-r .hamburger-inner { top: 0; bottom: auto; background: #fff; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);} 
.hamburger--collapse-r .hamburger-inner::after { top: 7px;background: #fff; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } 
.hamburger--collapse-r .hamburger-inner::before { top: auto; background: #fff; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; bottom: -14px; width: 20px; right: 0;} 
.hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(45deg); transition-delay: 0.22s; width: 20px;top: 14px; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 
.hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } 
.hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
   


/* SIDEBAR-ENABLE ENLARGED */
/* .enlarged .logo{display: none;} */
.enlarged .card-user-setting{display: none;}
.enlarged #sidebar-menu #side-menu{padding-left: 0px;}
.enlarged .left-side-menu{    width: 54px!important;}

body.enlarged{min-height: 600px;}

/* ---------------- PAGE CHIA SE BAN BE ---------------------------------------------- */
.form-lg .col-form-label{font-size: 18px; color: #383838; line-height: 31px;}
.form-lg .form-control { height: 44px; font-size: 18px; padding-left: 25px; -webkit-box-shadow: 0px 0px 19px rgba(0,0,0,.1); box-shadow: 0px 0px 19px rgba(0,0,0,.1); border-radius: 5px;     border-color: transparent;}
.form-lg .form-control:focus{border-color: #f3f1f2; background: #1a345d; color: #fff;}


/* PAGINATION */
.pagination-rounded .page-link{box-shadow: none; min-width: initial;}
.page-item.active .page-link{    background-color: #1a478e;     border-color: #1a478e;}
.page-item.disabled .page-link{    background-color: transparent;}

/* ---------------- PAGE TIEN THUONG ---------------------------------------------- */
.content-total{color: #383838; font-size: 24px;}
.content-total span{font-size: 34px; color: #0363bc;font-weight: 600;}
@media(max-width: 767px){
  .content-total span{    display: block;}
}

/* ---------------- PAGE MA GIAM GIA ---------------------------------------------- */
.card-discount{-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;position: relative; overflow: hidden; border: 1px solid #e4e4e4; padding: 1px 35px 1px 157px; min-height: 88px; margin-bottom: 14px;cursor: pointer;}
.card-discount .icon{position: absolute; top: 1px; left: 1px;}
.card-discount .icon img{max-height: 84px;}
.card-discount .content{font-size: 20px; margin-top: 8px;}
.card-discount .content .title{font-weight: bold; color: #1a345d;}
.card-discount .content .c-left{display: inline-block; font-weight: 600;}
.card-discount .content .c-left .text{color: #3189ff;}
.card-discount .content .c-right{display: inline-block; float: right;}
.card-discount .content .text-code{font-size: 16px; color: #383838;}
.card-discount .content .text-date{color: #b5b5b5; font-size: 12px;}
.card-discount:hover{background: #f9f9f9;}
@media(max-width: 600px){
  .card-discount{padding-bottom: 10px; padding: 1px 5px 10px 140px;}
  .card-discount .content { margin-top: 0; }
  .card-discount .content .c-left{display: block!important; margin-bottom: 15px;}
  .card-discount .content .c-right{display: block!important; float: none!important;}
}

/* ---------------- PAGE HO SO XAC THUC ---------------------------------------------- */
.upload-item{max-width: 300px; margin: auto;}
.box-img-upload{max-width: 300px; height: 147px; border: 1px solid #c7c7c7; margin: auto; border-radius: 11px; overflow: hidden; position: relative; margin-bottom: 16px; padding: 2px;}
.upload-btn{cursor: pointer;}
.upload-btn .form-control{cursor: pointer;position: absolute; width: 100%; height: 22px; opacity: 0;}
.upload-btn span{display: inline-block; min-width: 100px; height: 22px; text-align: center; line-height: 22px; background: #1a345d; color: #fff; border-radius: 3px;}
.box-img-upload img{ max-height: 141px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; }


.modal-default .modal-xl{max-width: 858px;border-radius: 19px; overflow: hidden;}
.modal-default .title{font-size: 16px; font-weight: bold; color: #000000; margin-bottom: 45px;}

.modal-default .modal-body{padding: 20px 30px;min-height: 370px;}


/* custom */
/* ---------------- DEFAULT ---------------------------------------------- */
.navbar-custom.header-top-main{box-shadow: none; position: relative; padding-right: 0;    margin-top: 22px;}
.navbar-custom.header-top-main .logo-box{position: absolute; left: 0; font-weight: 600; top: -35px;}
.navbar-custom.header-top-main .logo-box .detail-text{min-height: 54px; vertical-align: bottom; padding-top: 18px;}

.header-top-top{background: #1b5427; min-height: 72px; padding: 27px 10px 10px 30px;}
.header-top-top .header-wellcome{ }
.header-top-bottom{background: #30753e; min-height: 70px; padding: 0px 5px 0px 18px; }
.list-feature-item{vertical-align: middle; margin-top: 19px; margin-left: 10px;}
.list-count{line-height: 70px; border-left: 1px solid #236b31; padding-left: 30px;}

.header-top-main-right{display: inline-block; float: right;}

.btn-hamburger-sm{position: absolute; left: 0; top: 28px; height: auto; box-shadow: none; width: 50px; display: inline-block;    z-index: 999;    background: transparent;}

@media(max-width: 1100px){
  .navbar-custom.header-top-main{    padding-left: 0;}
  .enlarged .logo span.logo-sm{display: none;}
  .header-top-bottom{display: block;}
  .enlarged .logo-box { width: 100%!important; }

  .btn-hamburger-sm{z-index: 999;}
}
@media(max-width: 767px){
  .header-top-top{min-height: inherit; padding-top: 10px;}
  .header-top-top .header-wellcome { display: block!important; margin-bottom: 5px;}
  .header-top-main-right .social-list{    float: none!important;}
  .header-top-main-right .social-list a:first-child{margin: auto;}
  .list-count{line-height: 24px; border-left: 0px solid #236b31; border-top: 1px solid #236b31; margin-top: 10px; padding-bottom: 5px;}
}
/* ---------------- PAGE HOME ---------------------------------------------- */
.package-item{  -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;
  border: 1px solid #fff;background: #fff; border-radius: 10px; height: 224px; padding: 10px; margin-bottom: 20px; position: relative; overflow: hidden;}
.package-item:hover{border: 1px solid #046839; border-radius: 10px;}
.package-item .banner{    margin-bottom: 10px; height: 135px;}
.package-item .banner img{max-height: 135px;}
.package-item .content .title{color: #046839; font-weight: bold; font-size: 12px;}
.package-item .content .detail{color: #000000; font-size: 11px;}

.avatar-box{font-size: 14px; position: relative; padding-left: 70px; display: inline-block; min-height: 60px; text-align: left; padding-right: 40px;    margin-top: 4px;vertical-align: middle;}
.avatar-box:after { position: absolute; content: ""; width: 18px; height: 18px; background: url(../images/caret-down.svg)no-repeat center right; top: 26px; right: 0; background-size: 18px 18px; }
.avatar-box .pic{position: absolute; top: 0; left: 0;}
.avatar-box .pic img{width: 60px; height: 60px; border-radius: 100%;}
.avatar-box .content{padding-top: 7px;}
.avatar-box .content .text{margin-bottom: 6px;}
.avatar-box .content .username{font-weight: bold; color: #ffd05f;}

.email-box{position: relative; display: inline-block;}
.email-box img{height: 12px}
.email-box span{background: #fd8e31; color: #fff; font-size: 9px; width: 14px; height: 14px; display: inline-block; text-align: center; border-radius: 100%; top: -3px; position: absolute; right: -10px;}

/* LIST INLINE CUSTOM */
.list-box li { position: relative; }
.list-box li:before{-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
  position: absolute; content: ""; width: 1px; height: 10px; background: #359a46; left: 4px; top: 5px;}
.list-box li:after{-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
  position: absolute; content: ""; width: 1px; height: 10px; background: #052e85; left: 5px; top: 5px;}
.list-box li{margin-right: 20px;}
.list-box li:last-child{margin-right: 0px;}

.list-box .list-inline-item:not(:last-child) {
  margin-right: 0px;
}

#sidebar-menu>ul>li>a.active{background-color: transparent;}

.dropdown-menu{min-width: 150px; font-size: 14px;}
.dropdown-menu a{color: #000;}

/* ---------------- PAGE / LGOIN ---------------------------------------------- */
.title-form{color: #046839; font-size: 20px; font-weight: 600;}

.custom-checkbox .custom-control-label::before { border-radius: 100%;     top: 4px;}
.custom-control-input:checked~.custom-control-label::before { color: #046839; border-color: #046839; background-color: #046839; border-radius: 100%; }
.custom-control-label::after{    border-radius: 100%;width: 10px; height: 10px;    top: 4px;}
.custom-control-label::before{background-color: #e1eef8; border: #046839 solid 1px; border-radius: 100%; width: 10px; height: 10px;}
.enlarged .logo span.logo-lg{display: block;}

.header-top-line{position: relative;line-height: 70px;}
.login-title h3{color: #fff;margin: auto;padding: 0;line-height: 70px;font-size: 24px;font-weight: 600;}
.header-top-line .social-list{position: absolute; top: 0; right: 0;}

.warpper-login{max-width: 897px; margin: auto;position: relative; margin-top: 161px; margin-bottom: 161px;}
.warpper-login .login-custom{position: relative; min-height: 240px; padding-left: 424px;}
.warpper-login .logo-login{position: absolute; left: 0; top: 0; }
.warpper-login .logo-login img{max-width: 370px;}

.warpper-register{margin: auto;position: relative; margin-top: 28px; margin-bottom: 55px;}
.title-login-sub{color: #046839; font-size: 18px; font-weight: 600; margin-bottom: 23px;}


@media(max-width: 800px){
  .warpper-login{margin: 50px auto 30px;     max-width: 300px;}
  .warpper-login .login-custom{    padding: 0;}
  .warpper-login .logo-login{position: static; margin-bottom: 30px;}
  .warpper-login .logo-login img{max-width: 150px; display: block; margin: auto;}

  .header-top-line .social-list{position: static; text-align: center; display: block!important; float: none!important; line-height: 20px; margin-bottom: 20px;}
}
@media(max-width: 767px){
  .list-form-group, .title-login-sub{margin-bottom: 10px!important;}
  .row.list-group-box{margin-bottom: 30px;}
  .form-login-custom .col-form-label.text-right{text-align: left!important;}
  .max-w-form-sm{max-width: 300px; margin-left: auto; margin-right: auto;}
}

/* ---------------- PAGE / LEVEL TREE ---------------------------------------------- */
.accordion-custom .card-header{background: #046839; border-radius: 0!important; color: #fff;}
.accordion-custom .card-header a { color: #fff; display: block; position: relative; }
.accordion-custom .card-header a:after { position: absolute; content: ""; width: 10px; height: 10px; background: url(../images/add.svg)no-repeat center center; background-size: 10px 10px; right: 0; }
.accordion-custom .card-header a[aria-expanded="true"]:after{-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.accordion-custom .card { margin-bottom: 12px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.accordion-custom .card-body{padding: 30px 35px 15px;}

.table thead th{font-size: 14px; font-weight: bold; color: #046839; border-color: #e1eef8; background: #e1eef8; padding-top: 7px;padding-bottom: 7px;border: 0px!important;}
.table thead th:first-child{border-top-left-radius: 10px;}
.table thead th:last-child{border-top-right-radius: 10px;}
.table tbody>tr:last-child>td:first-child{border-bottom-left-radius: 10px;}
.table tbody>tr:last-child>td:last-child{border-bottom-right-radius: 10px;}
.table{    border: 0px!important;}
.table .pack-icon img{    height: 58px;}

.table th{    border: 1px solid #e1eef8;}
.table td { vertical-align: middle; }
.table{margin: 0px!important;     background: #fff;}

/* ---------------- PAGE / TITLE MANAGER ---------------------------------------------- */
.package-item-title .banner{margin-bottom: 5px;}
.package-item-title img{    max-height: 157px;}
.package-item-title .title{color: #046839; font-size: 14px; font-weight: 600;}
.package-item-title{}

.social-list a{margin-left: 20px;}
.social-list img{height: 18px;}
.form-default .col-form-label { font-size: 14px; font-weight: 600; color: #000000; }

.page-link{border: 0; background: transparent; font-size: 16px; font-weight: bold; padding: 0 5px;}
.paginate_button.page-item{padding: 0;}
.page-item.active .page-link { color: #046839; background: transparent; border: 0; }

.datatable-custom .col-sm-12{border-radius: 10px; border: 1px solid #e1eef8; overflow: hidden;}
.datatable-custom .col-sm-12.col-md-6, .col-sm-12.col-md-5, .col-sm-12.col-md-7{    border: 0px;}
.datatable-custom .table.dataTable{    margin: 0!important;}

.datatable-custom .form-control{height: 30px; font-size: 12px;}

.manager-item .title{color: #046839; font-size: 16px; font-weight: 600;margin-bottom: 16px;}
.manager-item .content{border-top: 1px solid #046839; padding-top: 12px; position: relative; padding-right: 378px;    min-height: 200px; margin-bottom: 30px;}
.manager-item .content .logo-manager{position: absolute; top: 0; right: 0; width: 378px; padding-top: 12px;}
@media(max-width: 950px){
  .manager-item .content { padding: 0; }
  .manager-item .content .logo-manager{position: static; width: auto; margin-bottom: 30px;}
}
@media(max-width: 767px){
  .form-default .col-form-label.text-right{    text-align: left!important;}
}
/* ---------------- PAGE / NOTIFICATION ---------------------------------------------- */
.noti-item{position: relative; overflow: hidden; min-height: 54px; margin-bottom: 30px; padding-left: 74px;}
.noti-item .icon{background: #046839; width: 54px; height: 54px; text-align: center; padding-top: 9px; border-radius: 100%; position: absolute; left: 0; top: 0;}
.noti-item .icon img{height: 32px; margin: auto;}
.noti-item .content{}
.noti-item .content .username{font-weight: bold; margin-right: 10px;}
.noti-item .content a{color: #000;}
.noti-item .content a:hover{color: #046839;}
.pic-change-avatar img { display: block; margin: auto; max-height: 200px; }

/* ---------------- PAGE / BINARY-TREE ---------------------------------------------- */
.package-tree-item{background: #fff; position: relative; overflow: hidden; height: 111px; padding: 10px; border-radius: 10px;margin-bottom: 10px;-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;}
.package-tree-item:hover{    background: #f7f7f7;}
.package-tree-item img{height: 93px;}
.package-tree-item .title{position: absolute; left: 125px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; top: 50%; color: #046839; font-size: 16px; font-weight: 600;    text-align: center;}

/*-----------------------------------------------------------------------------------------------------------------------*/
.default-binary {
  max-width: 1017px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px; padding-bottom: 60px;}
  .default-binary .binary-btn-top {
    margin-bottom: 30px; }
  .default-binary .binary-btn-bottom {
    margin-top: 100px; }
  .default-binary .marg-line-top {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 15px; }
  .default-binary .binary2 .marg-line {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 15px; }
  .default-binary .binary3 .marg-line {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 15px; }
  .default-binary .defautl-bg-icon {
    width: 70px;
    height: 70px;
    display: block;
    font-size: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s; }
    .default-binary .defautl-bg-icon img.tree-icon-packag {
      max-width: 100%;
      width: 70px;
      margin-bottom: 5px; }
    .default-binary .defautl-bg-icon:hover, .default-binary .defautl-bg-icon:focus {
      -moz-transform: scale(1.3);
      -webkit-transform: scale(1.3);
      -o-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3); }
      /* .default-binary .defautl-bg-icon:hover span, .default-binary .defautl-bg-icon:focus span {
        display: none; } */
      .default-binary .defautl-bg-icon:hover .name, .default-binary .defautl-bg-icon:focus .name {
        font-family: 'SFUEurostileDemi';
        background: #2d2c2d;
        color: #fff;
        border-radius: 5px;
        width: 120%;
        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: -10%; }
        .default-binary .defautl-bg-icon:hover .name a, .default-binary .defautl-bg-icon:focus .name a {
          color: #f19600; }
      .default-binary .defautl-bg-icon:hover .lr-show, .default-binary .defautl-bg-icon:focus .lr-show {
        display: block; }
    .default-binary .defautl-bg-icon .lr-show {
      display: none; }
    .default-binary .defautl-bg-icon .name {
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      left: 0;
      right: 0;
      word-break: break-all;
      font-size: 80%;
      color: #2d2c2d; }
      .default-binary .defautl-bg-icon .name a {
        color: #2d2c2d; }
        .default-binary .defautl-bg-icon .name a:hover {
          color: #f19600; }
      .default-binary .defautl-bg-icon .name span {
        font-size: 80%; }
  .default-binary .marg-icon1, .default-binary .marg-icon2, .default-binary .marg-icon3, .default-binary .marg-icon4 {
    margin-right: -15px;
    margin-left: -15px; }

button.btn-gold {
  border: 0px;
  background: #b57409 !important;
  color: #fff !important;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s; }

button.btn-gold:hover {
  background: #ffb02d !important; }


  @media only screen and (max-width: 1280px){
    .icon-left-bottom{
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) and (max-width: 1350px){
    .default-binary{
      max-width: 935px;
    }
    .binary1 .marg-line-top img{
        width: 485px;
    }
    .binary2 .marg-line img{
        width: 245px;
    }
    .binary3 .marg-line img{
        width: 130px;
    }
  }
  @media only screen and (min-width: 1023px) and (max-width: 1200px){
    .default-binary{
      max-width: 935px;
    }
    .binary1 .marg-line-top img{
        width: 485px;
    }
    .binary2 .marg-line img{
        width: 245px;
    }
    .binary3 .marg-line img{
        width: 130px;
    }
  }	
  
  @media only screen and (min-width: 767px) and (max-width: 1023px){
    .default-binary{
      max-width: 681px;
    }
    .binary1 .marg-line-top img{
        width: 356px;
    }
    .binary2 .marg-line img{
        width: 180px;
    }
    .binary3 .marg-line img{
        width: 90px;
    }
  }	
  @media only screen and (max-width: 767px){
    button.btn-tg-btn-pink{
      font-size: 8px;
      padding: 5px;
    }
  }
  @media only screen and (min-width: 567px) and (max-width: 767px){
    .default-binary{
      max-width: 521px;
    }
    .binary1 .marg-line-top img{
        width: 271px;
    }
    .binary2 .marg-line img{
        width: 140px;
    }
    .binary3 .marg-line img{
        width: 73px;
    }
    .default-binary .defautl-bg-icon{
      width: 60px;
      height: 60px;
    }
    .default-binary .defautl-bg-icon .name{
      font-size: 25%;
    }
  }
  @media only screen and (min-width: 240px) and (max-width: 567px){
    .default-binary{
      max-width: 273px;
    }
    .binary1 .marg-line-top img{
        width: 152px;
    }
    .binary2 .marg-line img{
        width: 80px;
    }
    .binary3 .marg-line img{
        width: 40px;
    }
    .default-binary .defautl-bg-icon{
      width: 35px;
      height: 35px;
    }
    .default-binary .defautl-bg-icon .name{
      font-size: 25%;
    }
  }

/* ---------------- */
.binary-form{position: absolute; left: 0; right: 0; width: 250px; margin: auto; z-index: 1;}
@media(max-width: 767px){
  .binary-btn-bottom .btn{    font-size: 12px;}
  .binary-form{position: static; width: 100%; margin-bottom: 10px;}
}

/* ---------------- CUSTOM ---------------------------------------------- */
.navbar-custom a.logo{display: inline-block; padding-left: 70px;}
.navbar-custom a.logo img{height: 70px;
  margin-top: 35px;}
/* ---------------- CUSTOM LOGIN PAGE ---------------------------------------------- */
.page-login{}
.page-login .login-wrapper{}
.page-login .login-title{text-align: center; margin-bottom: 25px; padding-top: 40px;}
.page-login .login-title h1{font-size: 24px; font-weight: 100; margin: 0;}
.login-form-block{position: absolute; width: 965px; min-height: 550px; left: 0; right: 0; margin: auto; background: #31425a;}
.login-form-block .logo-left{position: absolute; left: 0; width: 50%; height: 100%; background: url(../images/login/bg.jpg) no-repeat center center; background-size: 100% 100%;}
.login-form-block .logo-left a{position: absolute; content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.login-form-block .logo-left a img{max-height: 240px; display: block; margin: auto;}
.login-form-block .form-right{ width: 50%; right: 0; position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.login-form-block .form-right .btn.btn-primary{background: #1fd5b9; border-radius: 0; font-weight: 100;}

.form-right .title{font-size: 16px; color: #1fd5b9; font-weight: bold; margin-bottom: 25px;}
.login-form-max-w{max-width: 355px; margin: auto;}
.login-form-max-w .form-control{border: 2px solid #7f878d; border-radius: 0px; box-shadow: none; background: transparent; color: #fff; font-weight: 100; font-size: 14px; height: 38px;}
.login-form-max-w label{font-weight: 100; color: #fff;}
.login-form-max-w .link-bottom a{color: #7f878d; font-size: 14px; display: inline-block; border-bottom: 1px solid #7f878d;}
@media(min-width: 810px) and (max-width: 980px){
  .login-form-block{    width: 800px;}
}
@media(max-width: 809px){
  .page-login{position: relative; background: #31425a;}
  .page-login .login-title{position: absolute; z-index: 1; text-align: center; width: 100%;}
  .login-form-block{width: auto; max-width: 100%;}
  .login-form-block .logo-left{position: static; width: 100%; padding: 30px 5px;    padding-top: 100px;}
  .login-form-block .logo-left a{-webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); position: static;}
  .login-form-block .logo-left a img{    max-height: 100px;}
  .login-form-block .form-right{position: static; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); width: 100%; padding-top: 50px; padding-bottom: 50px;}
  .login-form-max-w{    max-width: 320px;}
}

.login-page-pos{position: relative; min-height: 100vh;}
@media(min-width: 810px){
  .login-page-pos .login-form-block{position: absolute; content: ""; top: 50%;left:50%;-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
}

/* ----------- FOOTER -------------------------------------- */
footer{background: #f9f9f9; position: relative; z-index: 999;}
.f-colitem{color: #000;}
.f-colitem .title{margin-bottom: 15px;}
.f-colitem .title h4{font-size: 13px; font-weight: bold; color: #c28823;margin: 0;}
.f-colitem .content{padding-top: 50px; padding-bottom: 30px; font-weight: 600;}
.f-colitem .f-logo{padding-top: 60px; padding-bottom: 10px;}
.f-colitem a{color: #000;}
.f-colitem a:hover{    color: #c28823;}
.copyright-bottom { background: #2d6839; color: #fff; line-height: 20px; padding: 11px 0; font-size: 16px; }
.copyright-bottom a{color: #fff;}
.copyright-bottom a:hover{color: #fcfd37;}

.list-f-item{font-size: 14px;}
.list-f-item .f-item{position: relative; padding-left: 25px; margin-bottom: 5px;}
.list-f-item .f-item .icon{position: absolute; top: 0; left: 0;}
.list-f-item .f-item .icon img{width: 15px; height: 15px;}

@media(max-width: 992px){
    .f-colitem .content{padding-top: 15px; padding-bottom: 5px;}
}

.title-main-warpper{font-weight: bold;min-height: 77px;padding-top: 50px;padding-bottom: 15px;}
.title-main-warpper .title-sm{font-size: 12px; color: #404042;}
.title-main-warpper .desc{font-size: 18px; color: #046839;}

@media(max-width: 767px){
  .navbar-custom.header-top-main{}
  .navbar-custom.header-top-main .logo-box{left: 0; right: 0;}
  .navbar-custom a.logo { display: block; padding-left: 0; }
  .header-top-main-right{display: block; float: none;    padding-top: 69px;  }

  .avatar-box{padding-right: 20px; padding-left: 50px; margin-top: 30px;}
  .avatar-box .pic{    top: 12px;}
  .avatar-box .pic img{width: 35px; height: 35px;}
  .header-top-main-right .d-inline-block.list-feature-item{float: right; padding-top: 40px;}
  .avatar-box:after{opacity: 0;}
  .title-main-warpper{padding-top: 100px; text-align: center;}
}