* {margin: 0; padding: 0;}
#wrap-site {position: relative; width: 100%; display: flow-root; overflow: hidden;}
#wrap-site .wrap {max-width: 1600px; margin: 0 auto; padding: 0 30px;}
#wrap-site .wrap-nd {max-width: 1200px; margin: 0 auto;}
#wrap-site .left {float: left;}
#wrap-site .right {float: right;}

.wrap-header {position: absolute; left: 0; top: 0; width: 100%; display: flow-root; z-index: 10; box-shadow: 0 0 30px rgba(0, 0, 0, .3); background: #fff;}
.wrap-header.fix-menu {position: fixed;}
.wrap-header .left {}
.wrap-header .left a {line-height: 0; display: block;}
.wrap-header .left img {height: 70px; padding: 10px 0;}
.wrap-header .right {width: calc(100% - 200px);}
.wrap-header .right .wrap-menu {float: right;}
.wrap-header .right .wrap-menu ul {margin: 0; padding: 0; list-style: none;}
.wrap-header .right .wrap-menu ul li {float: left; position: relative;}
.wrap-header .right .wrap-menu ul li a {padding: 0 20px; line-height: 70px; text-transform: uppercase; font-size: 17px; font-weight: bold; color: #222;}
.wrap-header .right .wrap-menu ul li .sub-menu {position: absolute; left: 0; top: 70px; width: 300px; display: none;}
.wrap-header .right .wrap-menu ul li .sub-menu li {width: 100%;}
.wrap-header .right .wrap-menu ul li .sub-menu li a {line-height: 1.5; padding: 10px 20px; display: flow-root; width: 100%; font-size: 16px; color: #fff; background: rgba(14, 65, 34, .9); border-bottom: 1px solid #0e4122; font-weight: 500; text-transform: inherit;}
.wrap-header .right .wrap-menu ul li .sub-menu li:last-child a {border: none;}
.wrap-header .right .wrap-menu ul li .sub-menu li:hover a {background: rgba(14, 65, 34, 1); transition: ease-in-out 0.5s;}
.wrap-header .right .wrap-menu ul li:hover .sub-menu {display: block;}
.wrap-header .right .wrap-search {float: right}

.wrap-main {margin-top: 70px;}

.wrap-footer {width: 100%; display: flow-root;}
.wrap-footer .footer-top {padding: 40px 0; background: #0E4122; color: #fff; width: 100%; display: flow-root;}
.wrap-footer .footer-top a {color: #fff;}
.wrap-footer .footer-top .title-footer {margin: 0 0 10px; font-size: 20px; text-transform: uppercase; font-weight: bold; line-height: 1.4;}
.wrap-footer .footer-top .dia-chi {width: 40%; float: left; margin: 20px 0;}
.wrap-footer .footer-top .dia-chi p {margin: 5px 0;}
.wrap-footer .footer-top .dia-chi .ket-noi {margin-top: 20px; display: inline-block; width: 100%;}
.wrap-footer .footer-top .dia-chi .ket-noi ul {margin: 0; padding: 0; list-style: none;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li {float: left; margin: 0 5px;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li a {width: 30px; height: 30px; display: inline-block;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li:nth-child(2) a {background: url('images/ic-fb.png') no-repeat center center;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li:nth-child(3) a {background: url('images/ic-tw.png') no-repeat center center;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li:nth-child(4) a {background: url('images/ic-yt.png') no-repeat center center;}
.wrap-footer .footer-top .dia-chi .ket-noi ul li:first-child {margin: 0 20px 0 0;}
.wrap-footer .footer-top .ho-tro {width: 28%; float: left; margin: 20px 1%;}
.wrap-footer .footer-top .ho-tro ul {margin: 0; padding: 0; list-style: none;}
.wrap-footer .footer-top .ho-tro ul li {width: 100%; display: flow-root; margin: 5px 0;}
.wrap-footer .footer-top .facebook {width: 30%; margin: 20px 0; float: left;}
.wrap-footer .footer-bottom {padding: 10px 0; background: #0B341B; color: #fff; width: 100%; display: flow-root;}
.wrap-footer .footer-bottom a {color: #fff;}

.float-contact {
position: fixed;
top: 50%;
right: 10px;
z-index: 99999;
margin-top: -55px;
}
.float-contact .chat-zalo {
display: block;
margin-bottom: 6px;
}
.float-contact .chat-face {
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
display: block;
margin-bottom: 6px;
}





.wrap-search .ic-search {
  width: 40px; height: 40px; background: url('images/ic-search.png') no-repeat center center; display: inline-block;
  margin: 15px 0 0 10px;
    -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
       -o-transition: all .3s ease;
          transition: all .3s ease;
}

.wrap-search .ic-search:hover {
}
 
.wrap-search #search {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
         -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
       -moz-transform: translate(0px, -100%) scale(0, 0);
        -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
            transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}

.wrap-search #search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
        -ms-transform: translate(0px, 0px) scale(1, 1);
         -o-transform: translate(0px, 0px) scale(1, 1);
             transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 106;
    display: block;
}

.wrap-search #search input::-moz-placeholder {
  color: #fff!important;
  font-weight: normal;
  opacity: 1;
}

.wrap-search #search input[type="text"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -35px;
    width: 60%;
    margin-left: 20%;
    background: transparent;
    font-size: 20pt;
    text-align: center;
    outline: none;
    padding: 10px;
    color: #fff;
    border: none;
    border-bottom: 1px solid;
}
  
.wrap-search #search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    opacity: 1;
    font-size: 27px;
    color: #fff;
    z-index: 999;
}

.wrap-search #search .close:hover{
  color: #FC2121;
  cursor: pointer;
}



@media (max-width: 1240px){
  .wrap-header .right .wrap-menu ul li a {font-size: 16px; padding: 0 15px;}
  #wrap-site .wrap-nd {padding: 0 20px;}
  #wrap-site .wrap {padding: 0 20px;}
}

@media (max-width: 1120px){
  .wrap-header .right .wrap-menu ul li a {padding: 0 10px;}
  .wrap-header .left img {height: 60px;}
  .wrap-header .right {width: calc(100% - 160px);}
  .wrap-header .right .wrap-menu ul li a {line-height: 60px;}
  .wrap-header .right .wrap-menu ul li .sub-menu {top: 60px;}
  .wrap-main {margin-top: 60px;}
  .wrap-search .ic-search {margin-top: 10px;}
}

@media (max-width: 1000px){
  .wrap-header .right .wrap-menu {display: none;}
  .wrap-header .right .menu-mobie {float: right; margin: 10px 0 0 30px;}
}

@media (max-width: 800px){
  .wrap-footer .footer-top {text-align: center;}
  .wrap-footer .footer-top .dia-chi {width: 100%; margin: 20px 0;}
  .wrap-footer .footer-top .dia-chi ul {display: inline-block;}
  .wrap-footer .footer-top .ho-tro {width: 100%; margin: 20px 0;}
  .wrap-footer .footer-top .facebook {width: 100%; margin: 20px 0;}
  .wrap-footer .footer-bottom {text-align: center;}
  .wrap-footer .footer-bottom .left {width: 100%; display: flow-root;}
  .wrap-footer .footer-bottom .right {width: 100%; display: flow-root;}
}