/* =========================================================
   NANO GROW - APP STYLE FINAL
   Dùng cho NukeViet 4.x theme default
   Đường dẫn ảnh banner: /themes/default/images/header-aqua-bg.jpg
   Dán cuối /themes/default/css/custom.css hoặc style.css
   ========================================================= */

/* RESET */
html,body{width:100%;margin:0;padding:0;overflow-x:hidden;background:#eef2f6}
body{font-family:Arial,Helvetica,sans-serif;color:#333}
a{text-decoration:none}
img{max-width:100%;height:auto}
.wraper{position:relative;margin:0 auto}

/* PC FULL WIDTH */
@media(min-width:992px){
    .wraper{width:98%!important;max-width:1600px!important;margin:0 auto!important}
    .container,#body{width:100%!important;max-width:100%!important}
    .section-header-bar .wraper,.section-header .wraper,.section-nav .wraper,.section-body .wraper{width:98%!important;max-width:1600px!important;margin:0 auto!important}
    #menusite,#menusite .container,#menusite .row,#menusite .bg{width:100%!important;margin-left:0!important;margin-right:0!important}
}

/* HEADER PC */
.ng-mobile-topbar{display:none}
header,.ng-site-header{position:relative!important;background:#fff!important;overflow:visible!important}
.site-banner{display:none!important}

.section-header-bar,.ng-topbar{
    position:relative!important;
    z-index:80!important;
    min-height:44px!important;
    background:linear-gradient(90deg,#003b85 0%,#0059b5 50%,#003b85 100%)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.18)!important
}
.header-nav-inner{
    min-height:44px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    color:#fff!important
}
.contactDefault{flex:1 1 auto!important;color:#fff!important;font-size:14px!important}
.contactDefault,.contactDefault a,.header-nav a,.header-nav span,.header-nav i{color:#fff!important;opacity:1!important;filter:none!important;text-shadow:none!important}
.social-icons{flex:0 0 auto!important;padding-left:25px!important}
.personalArea{flex:0 0 auto!important;padding-left:28px!important}

/* Banner PC: dùng ảnh banner, ẩn logo/chữ hệ thống để không rối */
@media(min-width:992px){
    .section-header,.ng-banner{
        height:135px!important;
        min-height:135px!important;
        padding:0!important;
        margin:0!important;
        overflow:hidden!important;
        background:url("/themes/default/images/header-aqua-bg.jpg") center center/cover no-repeat!important;
        box-shadow:0 2px 10px rgba(0,0,0,.12)!important
    }
    .section-header .wraper,#header,.ng-header-inner{height:135px!important;min-height:135px!important;background:transparent!important}
    #header .logo,#header .logo *,.ng-logo-block,.ng-logo-block *,#header .right-ads,.right-ads{
        display:none!important;visibility:hidden!important;opacity:0!important
    }
}

/* MENU PC */
.section-nav{position:relative!important;z-index:70!important;margin-top:0!important}
.second-nav{position:relative!important;z-index:70!important}
.second-nav .bg{background:transparent!important;box-shadow:none!important}
#menusite .navbar-default{
    background:linear-gradient(135deg,#003f91 0%,#005fc0 55%,#003b86 100%)!important;
    border:none!important;border-radius:8px!important;box-shadow:0 3px 12px rgba(0,0,0,.18)!important;min-height:56px!important
}
#menusite .navbar-default .navbar-nav>li>a,#menusite .navbar-default .navbar-nav>li>a:link,#menusite .navbar-default .navbar-nav>li>a:visited{
    color:#fff!important;font-weight:700!important;opacity:1!important;font-size:15px!important;line-height:28px!important;padding:14px 18px!important;text-shadow:none!important;filter:none!important
}
#menusite .navbar-default .navbar-nav>li>a:hover,#menusite .navbar-default .navbar-nav>.active>a,#menusite .navbar-default .navbar-nav>.open>a{
    color:#fff!important;background:#0b79bd!important
}
#menusite .navbar-default .navbar-nav>li>a span,#menusite .navbar-default .navbar-nav>li>a em,#menusite .navbar-default .navbar-nav>li>a i,#menusite .navbar-default .navbar-nav>li>a .fa{color:#fff!important;opacity:1!important}
#menusite .dropdown-menu{background:#fff!important;border:1px solid #b7d4ea!important;border-radius:0 0 8px 8px!important;box-shadow:0 8px 20px rgba(0,0,0,.16)!important}
#menusite .dropdown-menu>li>a{color:#123f5c!important;line-height:30px!important;padding:7px 16px!important;opacity:1!important}
#menusite .dropdown-menu>li>a:hover{background:#e8f4fb!important;color:#0064aa!important}

/* BODY + SEARCH */
#body{background:#fff!important;border:1px solid #dcdcdc!important;border-top:0!important;box-shadow:0 0 4px rgba(0,0,0,.15)!important}
.third-nav{position:relative!important;z-index:60!important;margin-bottom:8px!important}
.third-nav .row{border-bottom:1px solid #dcdcdc!important}
.third-nav .bg{background:#f5f5f5!important;padding:6px!important}
.current-time{color:#333!important;opacity:1!important;line-height:38px!important}
.headerSearch{margin:.15em 0!important;background:transparent!important;min-height:auto!important;height:auto!important;padding:0!important;box-shadow:none!important;overflow:visible!important}
.headerSearch input{height:40px!important;background:#fff!important;border-color:#b9c8d5!important;border-radius:7px 0 0 7px!important;color:#333!important}
.headerSearch .btn-info{height:40px!important;background:#004fa8!important;border-color:#004fa8!important;color:#fff!important;border-radius:0 7px 7px 0!important}

/* BLOCK TITLE */
.panel-heading,.panel-title,.block-title,.cat-title,.panel-primary>.panel-heading,.block-primary .panel-heading,.shops-cat-title,.shops-cat-header{
    background:linear-gradient(135deg,#1f63bd,#0c4f9e)!important;color:#fff!important;font-weight:700!important;opacity:1!important;filter:none!important;text-shadow:none!important
}
.panel-heading *,.panel-title *,.block-title *,.cat-title *,.panel-primary>.panel-heading *,.block-primary .panel-heading *,.shops-cat-title *,.shops-cat-header *,
.panel-heading a,.panel-title a,.block-title a,.cat-title a,.nav-tabs>li>a,.tab-pane .nav-tabs a,.shops-cat-name,.cat-name,.product_cat_name,.panel-heading span,.panel-heading strong{
    color:#fff!important;font-weight:700!important;opacity:1!important;filter:none!important;text-shadow:none!important
}

/* FLOATING PC */
.fix_banner_left{display:none!important}
.fix_banner_right{top:270px!important;right:5px!important;width:65px!important;z-index:9998!important}
.fix_banner_right img{max-width:65px!important;height:auto!important}
#button-contact-vr,.phone-vr,#zalo-vr,.red-floating,.floating-red,.btn-feedback-red{display:none!important}

/* =========================================================
   MOBILE APP HEADER + MENU
   ========================================================= */
@media(max-width:768px){
    html,body{overflow-x:hidden!important}
    body{padding-bottom:78px!important;background:#f4f6f9!important}
    .wraper,.container,#body{width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
    .ng-topbar,.section-header-bar{display:none!important}
    .ng-mobile-topbar{
        display:flex!important;
        align-items:center!important;
        gap:10px!important;
        height:62px!important;
        padding:9px 12px!important;
        background:linear-gradient(90deg,#0052b8,#0078e2)!important;
        box-shadow:0 4px 14px rgba(0,64,150,.20)!important;
        position:relative!important;
        z-index:9998!important
    }
    .ng-mobile-menu-btn{
        width:44px!important;height:44px!important;border:0!important;border-radius:14px!important;
        background:rgba(255,255,255,.18)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important
    }
    .ng-mobile-menu-btn span{width:24px!important;height:3px!important;background:#fff!important;border-radius:5px!important;display:block!important}
    .ng-mobile-search{flex:1!important;height:44px!important;background:#fff!important;border-radius:24px!important;display:flex!important;align-items:center!important;overflow:hidden!important}
    .ng-mobile-search input{flex:1!important;height:44px!important;border:0!important;background:#fff!important;padding:0 12px!important;color:#333!important;font-size:15px!important;outline:none!important}
    .ng-mobile-search button{width:44px!important;height:44px!important;border:0!important;background:#fff!important;color:#0063c7!important;font-size:18px!important}
    .ng-mobile-bell{width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(255,255,255,.18)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:19px!important}

    .section-header,.ng-banner{height:105px!important;min-height:105px!important;background:url("/themes/default/images/header-aqua-bg.jpg") center center/cover no-repeat!important;overflow:hidden!important;box-shadow:0 3px 14px rgba(0,0,0,.08)!important}
    .section-header .wraper,#header,.ng-header-inner{height:105px!important;min-height:105px!important}
    #header .logo,#header .logo *,.ng-logo-block,.ng-logo-block *,#header .right-ads,.right-ads{display:none!important;visibility:hidden!important;opacity:0!important}

    body.ng-menu-open{overflow:hidden!important;touch-action:none!important}
    body.ng-menu-open:before{content:"";position:fixed!important;inset:0!important;background:rgba(0,0,0,.55)!important;z-index:99990!important}

    .section-nav{position:relative!important;z-index:9999!important;min-height:0!important}
    #menusite{position:relative!important;z-index:9999!important;min-height:0!important}
    #menusite .navbar-default{min-height:0!important;border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
    #menusite .navbar-header,#menusite .navbar-toggle{display:none!important}

    #menusite .navbar-collapse,#menusite .navbar-collapse.collapse,#menusite .navbar-collapse.collapsing,#menusite .navbar-collapse.collapse.in,#menusite .navbar-collapse.in{
        display:block!important;position:fixed!important;top:0!important;left:-84%!important;width:84%!important;max-width:420px!important;height:100vh!important;max-height:100vh!important;margin:0!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;border:none!important;box-shadow:10px 0 30px rgba(0,0,0,.25)!important;z-index:99991!important;opacity:1!important;visibility:visible!important;transition:left .28s ease!important
    }
    body.ng-menu-open #menusite .navbar-collapse,body.ng-menu-open #menusite .navbar-collapse.collapse,body.ng-menu-open #menusite .navbar-collapse.in{left:0!important}
    #menusite .navbar-collapse:before{content:"NANOGROW";display:block!important;padding:24px 68px 18px 22px!important;color:#003b85!important;background:#fff!important;border-bottom:1px solid #edf1f5!important;font-size:25px!important;font-weight:900!important;letter-spacing:.5px!important}
    #menusite .navbar-collapse:after{content:"Hotline/Zalo: 0903.093.319";display:block!important;margin:20px 18px 18px!important;padding:14px 18px!important;border-radius:24px!important;background:#eef5ff!important;color:#0054b8!important;font-size:16px!important;font-weight:800!important;text-align:center!important}

    .ng-menu-close{display:none;position:fixed!important;top:16px!important;left:calc(84% - 58px)!important;width:46px!important;height:46px!important;z-index:99993!important;align-items:center!important;justify-content:center!important;border:0!important;background:transparent!important;color:#07142f!important;font-size:40px!important;line-height:1!important;font-weight:300!important}
    body.ng-menu-open .ng-menu-close{display:flex!important}

    #menusite .navbar-nav{display:block!important;margin:0!important;padding:12px 0!important;background:#fff!important;opacity:1!important}
    #menusite .navbar-nav>li{display:block!important;float:none!important;width:100%!important;margin:0!important;padding:0!important;background:#fff!important;border:0!important;opacity:1!important}
    #menusite .navbar-nav>li>a,#menusite .navbar-nav>li>a:link,#menusite .navbar-nav>li>a:visited{
        display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;padding:18px 24px!important;color:#07142f!important;background:#fff!important;font-size:20px!important;font-weight:850!important;line-height:1.25!important;border:0!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;filter:none!important
    }
    #menusite .navbar-nav>li>a span,#menusite .navbar-nav>li>a em,#menusite .navbar-nav>li>a i,#menusite .navbar-nav>li>a .fa{color:inherit!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;filter:none!important}
    #menusite .navbar-nav>li>a:hover,#menusite .navbar-nav>li.open>a,#menusite .navbar-nav>li.active>a{color:#0054b8!important;background:#f3f8ff!important}
    #menusite .dropdown>a:after{content:"\f107";font-family:FontAwesome;color:#7b8794;font-size:22px;margin-left:auto;font-weight:400}
    #menusite .navbar-collapse .dropdown-menu{display:block!important;position:static!important;float:none!important;width:100%!important;margin:0!important;padding:0 0 4px!important;background:#f5f9ff!important;border:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important}
    #menusite .dropdown-menu>li{display:block!important;width:100%!important;background:#f5f9ff!important}
    #menusite .dropdown-menu>li>a,#menusite .dropdown-menu>li>a:link,#menusite .dropdown-menu>li>a:visited{display:block!important;width:100%!important;padding:14px 36px!important;color:#17395f!important;background:#f5f9ff!important;font-size:17px!important;font-weight:650!important;line-height:1.35!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;filter:none!important}
    #menusite .dropdown-menu>li>a:hover{color:#0054b8!important;background:#e8f2ff!important}
}

/* BOTTOM NAV */
@media(max-width:768px){
    .ng-bottom-nav{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:70px!important;z-index:99980!important;background:#fff!important;box-shadow:0 -6px 24px rgba(0,0,0,.12)!important;border-radius:18px 18px 0 0!important;padding:7px 6px 5px!important;justify-content:space-around!important;align-items:center!important}
    .ng-bottom-nav a{flex:1 1 0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;color:#6b7280!important;font-size:12px!important;font-weight:700!important;text-decoration:none!important;line-height:1.1!important;position:relative!important;min-width:0!important}
    .ng-bottom-nav a em,.ng-bottom-nav a i{color:inherit!important;font-size:22px!important;line-height:1!important}
    .ng-bottom-nav a.active{color:#0b63ce!important}
    .ng-bottom-nav .ng-center{margin-top:-34px!important}
    .ng-bottom-nav .ng-center span.icon-wrap{width:68px!important;height:68px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;background:linear-gradient(135deg,#1687e8,#004fb8)!important;box-shadow:0 8px 25px rgba(0,92,200,.35)!important;border:5px solid #fff!important;color:#fff!important}
    .ng-bottom-nav .ng-center em,.ng-bottom-nav .ng-center i{color:#fff!important;font-size:30px!important}
    .ng-bottom-badge{position:absolute!important;top:3px!important;right:28%!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:20px!important;background:#ef233c!important;color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:18px!important;text-align:center!important}
    .ng-floating-cart{display:none!important}
    .fix_banner_right{top:280px!important;width:54px!important;right:0!important;z-index:9990!important}
    .fix_banner_right img{max-width:54px!important}
}
@media(min-width:769px){.ng-bottom-nav,.ng-menu-close{display:none!important}}