.hc-offcanvas-nav .nav-container{position:fixed;z-index:9998;top:0;width:280px;max-width:100%;height:100%;transition:transform .4s ease}
.hc-offcanvas-nav .nav-wrapper{width:100%;}
.hc-offcanvas-nav .nav-wrapper.nav-wrapper-1{position:static;height:100%;overflow:scroll;overflow-x:visible;overflow-y:auto}
.hc-offcanvas-nav ul{list-style:none;margin:0;padding:0}
.hc-offcanvas-nav li{position:relative;display:block}
.hc-offcanvas-nav li.level-open>.nav-wrapper{visibility:visible}
.hc-offcanvas-nav input[type="checkbox"]{display:none}
.hc-offcanvas-nav label{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;cursor:pointer}
.hc-offcanvas-nav a{position:relative;display:block;box-sizing:border-box;cursor:pointer}
.hc-offcanvas-nav.disable-body::after,.hc-offcanvas-nav .nav-wrapper::after{content:'';position:fixed;z-index:9990;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overscroll-behavior:none;visibility:hidden;opacity:0;transition:visibility 0s ease .4s,opacity .4s ease}
.hc-offcanvas-nav.disable-body.nav-open::after,.hc-offcanvas-nav .sub-level-open::after{visibility:visible;opacity:1;transition-delay:.05s}
.hc-offcanvas-nav.nav-levels-overlap ul .nav-wrapper{position:absolute;z-index:9999;top:0;height:100%;visibility:hidden;transition:visibility 0s ease .4s,transform .4s ease}
.hc-offcanvas-nav.nav-levels-overlap ul ul{height:100%;overflow:scroll;overflow-x:visible;overflow-y:auto}
.hc-offcanvas-nav.nav-levels-overlap ul li.nav-parent{position:static}
.hc-offcanvas-nav.nav-levels-overlap ul li.level-open>.nav-wrapper{visibility:visible;transition:transform .4s ease}
.hc-offcanvas-nav.side-left{left:0}.hc-offcanvas-nav.side-left .nav-container{left:0;transform:translate3d(-280px, 0, 0)}
.hc-offcanvas-nav.side-left.nav-levels-overlap li.level-open>.nav-wrapper{transform:translate3d(-40px, 0, 0)}
.hc-offcanvas-nav.side-left.nav-levels-overlap li .nav-wrapper{left:0;transform:translate3d(-100%, 0, 0)}
.hc-offcanvas-nav.nav-open .nav-container{transform:translate3d(0, 0, 0);transition-delay:0s}

.hc-offcanvas-nav .nav-wrapper{    background-image: linear-gradient(#2D3389, #181459);}
.hc-offcanvas-nav h2{font-size:19px;font-weight:normal;text-align:left;padding:20px 17px;color:#FFF;}
.hc-offcanvas-nav a{padding:14px 17px;font-size:15px;color:#fff;z-index:1;background:rgba(0,0,0,0);border-bottom:1px solid #2c5d8f}
.hc-offcanvas-nav li{text-align:left}


.hc-offcanvas-nav li.nav-close span,.hc-offcanvas-nav li.nav-parent span.nav-next,.hc-offcanvas-nav li.nav-back span{width:45px;position:absolute;top:0;right:0;bottom:0;text-align:center;cursor:pointer;transition:background .2s ease}
.hc-offcanvas-nav li.nav-close span::before,.hc-offcanvas-nav li.nav-close span::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;margin-top:-3px;border-top:2px solid #fff;border-left:2px solid #fff}
.hc-offcanvas-nav li.nav-close span::before{margin-left:-9px;transform:rotate(135deg)}
.hc-offcanvas-nav li.nav-close span::after{transform:rotate(-45deg)}
/*chua test*/
.hc-offcanvas-nav span.nav-next::before,.hc-offcanvas-nav li.nav-back span::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;margin-left:-2px;box-sizing:border-box;border-top:2px solid #fff;border-left:2px solid #fff;transform-origin:center}
.hc-offcanvas-nav span.nav-next::before{transform:translate(-50%, -50%) rotate(135deg)}
.hc-offcanvas-nav li.nav-back span::before{transform:translate(-50%, -50%) rotate(-45deg)}
.hc-offcanvas-nav.side-left.nav-open .nav-wrapper{box-shadow:1px 0 2px rgba(0,0,0,0.2)}

#main-nav{display:none}