﻿.btn--menu {width:3em;display:inline-block;-webkit-transition:all, 1s;transition:all, 1s;padding:0.63em 0;text-indent:-119988px;overflow:hidden;text-align:left;text-transform:capitalize;position:absolute;left:0;}
.btn--menu span{display:block;position:relative;height:3px;width:2em;background-color:#fff;margin:17px auto;}
.btn--menu span::before, .btn--menu span::after{content:"";display:block;background-color:#fff;width:2em;height:3px;position:absolute;bottom:0;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all, 0.2s;transition:all, 0.2s;}
.btn--menu span::before{-webkit-transform:translateY(-0.5em);transform:translateY(-0.5em);}
.btn--menu span::after{-webkit-transform:translateY(0.5em);transform:translateY(0.5em);}
.btn--menu:hover:not(.actived) span::before{-webkit-transform:translateY(-0.625em);transform:translateY(-0.625em);}
.btn--menu:hover:not(.actived) span::after{-webkit-transform:translateY(0.625em);transform:translateY(0.625em);}
.btn--menu.actived{overflow:visible;}
.btn--menu.actived span{background-color:transparent;}
.btn--menu.actived span::before{-webkit-animation:top-bar 1s;animation:top-bar 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.btn--menu.actived span::after{-webkit-animation:bottom-bar 1s;animation:bottom-bar 1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
html.mm-opening .mm-menu.mm-effect-menu-slide{height:100%!important;}
.mob-nav {
    display: block;
    margin: 0;
    position: absolute;
    top: 50px;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.mainnav.header-fixed .mob-nav {
    top:33px;
}
.mob-nav .hamburger {
    display: inline-block;
    width: 20px;
}
.mob-nav .line {
    width: 18px;
    height: 3px;
    background-color: #000;
    display: block;
    float: left;
    margin: 2px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.mob-nav .line:nth-of-type(2) {
    width: 24px;
}
.mainnav.header-fixed .mob-nav .line {
    background-color: #000;
}
.menu-mobile  {
    display:none;
    opacity:0;
    width:300px;
    position:fixed;
    right:-300px;
    top:0;
    bottom:0;
    background-color:#fff;
    z-index:99;
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    transition: all 350ms ease;
}
.menu-mobile.active {
    display:block;
    opacity:1;
    right:0;
    z-index:9999;
}
#menuM {
    position:relative;
    padding-top:40px;
    padding-left:15px;
    padding-right:15px;
}
.btn-close {
    width:40px;
    height:40px;
    background-color:rgba(169,140,72,0.9);
    color:#fff;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    padding:7px 0;
}
#menuM>li {
    border-bottom:1px solid #e2e2e2;
}
#menuM>li:last-child {
    border-bottom:0;
}
#menuM>li>a{
    padding-left:0;
    padding-right:0;
}
#menuM>li>a>i{
    float:left;
    margin-top:-1px;
    margin-right:15px;
}
.backdrop {
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1002;
}
@-webkit-keyframes top-bar{50%{-webkit-transform:translateY(0);transform:translateY(0);}
100%{-webkit-transform:rotate(45deg) translateY(0);transform:rotate(45deg) translateY(0);}
}
@keyframes top-bar{50%{-webkit-transform:translateY(0);transform:translateY(0);}
100%{-webkit-transform:rotate(45deg) translateY(0);transform:rotate(45deg) translateY(0);}
}
@-webkit-keyframes bottom-bar{50%{-webkit-transform:translateY(0);transform:translateY(0);}
100%{-webkit-transform:rotate(-45deg) translateY(0);transform:rotate(-45deg) translateY(0);}
}
@keyframes bottom-bar{50%{-webkit-transform:translateY(0);transform:translateY(0);}
100%{-webkit-transform:rotate(-45deg) translateY(0);transform:rotate(-45deg) translateY(0);}
}
.version-desktop {display:block;}
.version-mobile {display:none;}
img {
    max-width:100%!important;
    height:auto!important;
}
iframe {
    max-width:100%!important;    
}
@media (min-width:1200px) { 
    #contactBox {
        width:400px;
    }
}
@media (max-width:1300px) {
    .mainnav ul.nav>li>a {
        padding-left:10px;
        padding-right:10px;
        margin-left: 10px !important;
        margin-right: 10px !important;
        font-size:13px;
    }
}
@media (max-width:1024px) {
    .logo a {
        text-align:left;
    }
        header {

    }
    .header-wrapper {
        position:static;
    }
    .fp-auto-height.fp-section.home2,
    .fp-auto-height.fp-section.home2 .fp-tableCell {
        height:auto!important;
    }
    .mainnav {
        position: static;
        background-color: #ffffff;
        color: #000;
    }
    .mainnav .col-md-2 {
        width:100%;
    }
    .logo a {
        padding:5px 35px;
    }
    .logo a img {
        max-height:70px;
    }
    .menuMain  {
        display:none;
    }
        .menuMain.active {
            display:block;
            position:fixed;
            right:0;
            top:0;
            bottom:0;
        }
    .mob-nav {
        display:block!important;
        top:40px;
    }
    .mainnav.header-fixed .mob-nav .line {
        background-color:#000;
    }
    .mainnav ul.nav>li>a {
        padding:10px 0px;
        margin:0 6px;
    }
    #slide_banner .caption {
        width:450px;
    }
    .section.gioithieu {
        height: 583px!important;
    }
}
@media (max-width:1023px) {
    #menuMain {
        display:none;
        position:fixed;
        left:0;
        right:0;
        top:60px;
        background-color: rgba(169,140,72,0.9);
    }
    .mainnav ul.nav>li {
        display:inline-block!important;
    }
    header.header-fixed #menuMain {
        top:50px;
    }
        #menuMain.active {
            display:block;
        }
    .img-wrapper {
        min-height:initial;
    }
    .profile-body {
        padding:15px 30px;
    }
    .lienhe h3.main-title-section  {
        text-align:center;
    }
}
@media (max-width:768px) {
    .logo img {
        max-height:50px;
    }
    .logo-mobile img {
        max-height:56px;
    }
    .mainnav ul.nav>li>a {
        padding:10px 0px;
        margin:0 20px;
        font-size:13px;
    }
    #slide_banner .caption{
        right: 50px;
        top:70px;
        width:500px;
    }
    .section.gioithieu {
        height: 440px!important;
    }
    #banner5 .item {
        height:430px;
    }
    .wrapper-mobile {
        width:100%;
        overflow-x:scroll;
        overflow-y:hidden;
    }
    .navnews-pane {
        text-align:center;
    }
    .brochure-title {
        font-size:27px;
    }
    .des-news {
        height:71px;
        overflow:hidden;
    }
}
@media (max-width:767px) {
    iframe {
        height:auto!important;
    }
    .logo a {
        padding:0;
    }
    .logo img {
        max-height:70px;
    }
    .btn--menu {
        padding:0;
    }
    .logo2 {
        width:100px;
        margin-left:-50px;
    }
    #slide_banner .caption {
        display:none;
    }    
    #banner5 .item {
        height:auto;
        background:none;
    }
    .slide-caption {
        position:static;
        background-color:#333;
    }
    .main-page h2 {
        margin-top:20px;
		        font-size: 28px;
    }
    .owl-nav {
        
    }
    .form-web {
        margin-top:15px;
    }
    .row-contact .btn {
        display:block;
    }
    .nav-social>li {
        float:left;
    }
    #menuMain {
        top:50px;
    }    
    .mob-nav {
        top:35px;
    }
    .grid .grid-item {
        padding:0;
    }
    .img-caption {        
        background-color: rgba(0, 0, 0, 0.3);
    }
    .navnews-pane > li {
        
    }
        .navnews-pane > li + li {
            margin-top:10px;
            margin-left:0;
        }
    #btnRegisterFixed {
        right:auto;
        left:5px;
    }
    .grid .grid-item,
    .grid .grid-item.width-2 {
        width:100%;
    }
    .brochure-title {
        font-size:30px;
    }
        .brochure-title i {
            float:left;
            margin-top:-10px;
        }
    .des-news {
        height:auto;
    }
    .profile-body {
        padding:15px 0;
    }
    .section.gioithieu h3.main-title-section {
        margin-top:15px;
    }
    .tongquan .col-md-7 {
        min-height:initial;
    }
    .tongquan .col-md-7 a {
        position:static;
    }
}
@media (min-width:768px) { 
    
}
@media (max-width:740px) {

}
@media (max-width:697px) {  

}
@media (max-width:670px) {

}
@media (max-width:640px) { 

}
@media (max-width:620px) {  

}
@media (max-width:570px) {

}
@media (max-width:520px) {
    
}
@media (max-width: 480px) {
    
}
@media (max-width: 479px) {

}
@media (max-width: 420px) {

    .main-page h2 {
        font-size:26px;
    }
    .logo img {
        max-height:40px;
    }
    .logo-mobile img {
        max-height:40px;
    }
    .mainnav {
        
    }    
    .section.gioithieu {
        height: 235px!important;
    }
    .main-page h3.main-title-section {
        font-size:25px;
    }
    .row-contact textarea {
        margin-top:15px;
    }
    .fp-auto-height.fp-section.home2 {
        height:auto!important;
        margin-top:0;
        padding-bottom:0;
    }    
}
@media (max-width: 400px) {

}
@media (max-width: 375px) {
    #menuMain {
        top:48px;
    }
    header.header-fixed #menuMain {
        top:47px;
    }
    #slide_banner .caption h2 {
        font-size:13px;
    }
    #slide_banner .scale-effect .sub-caption {
        font-size:11px;
    }
    .section.gioithieu {
        height: 214px!important;
    }
    .mainnav {
        padding:4px 10px;
    }
    .logo img {
        max-height: 45px;
    }
    .logo-mobile img {
        max-height: 37px;
    }
    .btn--menu {
        padding:0;
    }
    #menuMain {
        top:48px;
    }
    .mainnav ul.nav>li {
        width:49%;
    }
    #contactBox h4 {
        font-size:22px;
    }
    .header-fixed .logo a {
        padding:0;
    }
    .mainnav.header-fixed .mob-nav {
        top:32px;
    }
}
@media (max-width: 320px) {
    .main-page h2 {
        font-size:18px;
    }
    .navbar-logo a {
        padding:5px;
    }
    .logo img {
        max-height:40px;
    }
     #slide_banner .caption h2 {
        font-size:10px;
    }
    #slide_banner .scale-effect .sub-caption {
        font-size:10px;
    }
    .section.gioithieu {        
        height: 183px!important;
    }
    #btnCallNowFixed {
        font-size:12px;
    }
        #btnCallNowFixed span {
            font-size:13px;
        }
    #btnRegisterFixed {
        font-size:12px;
        left:5px;
        right:auto;
    }
        #btnRegisterFixed span {
        font-size:13px;
    }
}