.banner{position: relative; height: 360px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.banner-title{position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; margin: auto; align-items: center; justify-content: center;}
.banner-title-inner{font-size: 40px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.75);}.direct{margin-bottom: 30px; padding: 10px; background: #f9f9f9; border-radius: 10px;}
.direct ul{list-style: none;}
.direct ul li{float: left;}
.direct ul li:after{content: ">"; display: inline-block; margin: 0 5px; transform: translateY(1px);}
.direct ul li:nth-last-child(2):after{display: none;}
.direct ul li a{color: #333;}
@media (min-width:320px){
    .direct ul li.direct-m{display: none;}
}
@media (min-width:768px){
    .direct ul li.direct-m{display: block;}
}.menu-bar{position: relative; height: 50px; background: #33a031; z-index: 101;}
.menu-icon{position: relative; float: left; width: 60px; height: 50px;}
.menu-icon span{display: block; width: 28px; height: 2px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff;}
.menu-icon span:after, .menu-icon span:before{content: ''; position: absolute; display: block; width: 28px; height: 2px; background: #fff;}
.menu-icon span:after{bottom: -8px;}
.menu-icon span:before{top: -8px;}
.menu{float: left;}
.menu ul{list-style: none; transition: all 0.25s ease 0s;}
.menu ul li{position: relative;}
.menu ul li a{display: block; color: #fff; transition: all 0.25s ease 0s;}
.menu > ul > li{float: left;}
.menu > ul > li > a{text-transform: uppercase; line-height: 50px;}
.menu > ul > li:first-child a{}
.menu > ul > li.active > a, .menu > ul > li:hover > a{color: #f7dd38;}
.menu ul li ul{position: absolute; width: 200px; transform-origin: 0 0; opacity: 0;}
.menu ul li ul li a{padding: 0 10px; background: #fff; line-height: 40px; color: #333;}
.menu ul li ul li a:hover{background: #33a031; color: #f7dd38;}
.menu > ul > li > ul{top: 100%; left: 0; transform: scale(1,0);}
.menu > ul > li:hover > ul{transform: scale(1,1); opacity: 1;}
.menu > ul > li > ul > li > ul{top: 0; left: 100%; transform: scale(0,1);}
.menu > ul > li > ul > li:hover > ul{transform: scale(1,1); opacity: 1;}
@media (min-width: 320px){
    .menu{display: none;}
}
@media (min-width: 970px){
    .menu{display: block;}
    .menu-display{display: none;}
    .menu > ul > li > a{padding: 0 19px;}
}
@media (min-width: 1170px){
    .menu > ul > li > a{padding: 0 29px;}
}.noibat{border-bottom: 1px solid #d7d7d7;}
.noibat .owl-nav{width: 90px; margin: 25px auto 0;}
.noibat .owl-nav button{width: 40px; height: 40px; margin: auto; background: #33a031; transition: all 0.25s ease 0s;}
.noibat .owl-nav button:hover{background: #f7dd38;}
.noibat .owl-nav button.owl-prev{float: left;}
.noibat .owl-nav button.owl-next{float: right;}
.noibat .owl-nav button i{display: block; font-size: 17px; color: #fff;}
.noibat-title{position: relative; margin-bottom: 50px; font-size: 30px; font-weight: 500; text-transform: uppercase; text-align: center;}
.noibat-title i{position: absolute; bottom: -25px; margin: auto; color: #f7dd38;}
.noibat-title i:nth-child(1){right: 0; left: 0; width: 23px; font-size: 20px;}
.noibat-title i:nth-child(2){right: -45px; left: 0; width: 17px; font-size: 15px;}
.noibat-title i:nth-child(3){right: 0; left: -45px; width: 17px; font-size: 15px;}
@media (min-width:320px){
    .noibat{padding: 50px 0;}
}
@media (min-width:970px){
    .noibat{padding: 70px 0;}
}.sanpham-left ul{list-style: none;}
.sanpham-left ul li{border: 1px solid #d7d7d7; border-top: 0; font-size: 17px; font-weight: 500;}
.sanpham-left ul li:first-child{padding-left: 15px; line-height: 49px; background: #33a031; border-color: #33a031; text-transform: uppercase; color: #fff}
.sanpham-left ul li a{display: block; padding: 0 5px 0 15px; line-height: 40px; color: #333; transition: all 0.125s ease 0s;}
.sanpham-left ul li a:hover{padding-left: 20px; color: #33a031;}
.sanpham-title{position: relative; margin-bottom: 25px; padding-bottom: 1px; font-size: 30px; font-weight: 500; text-transform: uppercase; line-height: 49px;}
.sanpham-title:after{content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 1px; background: #33a031;}
.sanpham-all{margin-top: 25px; text-align: right;}
.sanpham-all a{position: relative; padding-left: 60px; font-weight: 500; text-transform: uppercase; line-height: 30px; color: #33a031; transition: all 0.25s ease 0s;}
.sanpham-all a:after{content: ''; position: absolute; top: 0; right: calc(100% - 50px); bottom: 0; width: 50px; height: 1px; margin: auto; background: #33a031; transition: all 0.5s ease 0s;}
.sanpham-all a:hover{color: #333;}
.sanpham-all a:hover:after{width: 0; background: #333;}
@media (min-width:320px){
    .sanpham{padding: 50px 0;}
}
@media (min-width:410px){
    .sanpham-item{float: left; width: 50%;}
}
@media (min-width:970px){
    .sanpham{padding: 70px 0;}
    .sanpham-left{float: left; width: 270px;}
    .sanpham-right{float: right; width: calc(100% - 300px);}
}.taisao{padding: 70px 0; background: url(/components/2taisao/bg.jpg) no-repeat center bottom fixed; background-size: cover; text-transform: uppercase; text-align: center; color: #fff;}
.taisao ul{list-style: none;}

.taisao ul li p{width: 250px; margin: auto; padding: 30px 0 15px;}
.taisao ul li p span:nth-child(1){display: block; width: 150px; height: 150px; margin: 0 auto 5px; background-repeat: no-repeat; background-position: center; background-size: 75px; border-radius: 50%;}
.taisao ul li:nth-child(1) p span:nth-child(1){background-color: #f7dd38;}
.taisao ul li:nth-child(2) p span:nth-child(1){background-color: #33a031;}
.taisao ul li:nth-child(3) p span:nth-child(1){background-color: #ed1c24;}
.taisao ul li p span:nth-child(2){display: block; font-size: 20px; font-weight: 700;}
.taisao-title{position: relative; margin-bottom: 50px; padding-bottom: 10px; font-size: 30px; font-weight: 500;}
.taisao-title:after{content: ''; position: absolute; right: 0; bottom: 0; left: 0; margin: auto; width: 50px; height: 1px; background: #fff;}

@media (min-width:320px){

}
@media (min-width:410px){

}
@media (min-width:480px){

}
@media (min-width:580px){

}
@media (min-width:768px){
    .taisao ul li{float: left; width: calc(100%/3);}
}
@media (min-width:970px){

}
@media (min-width:1170px){

}.tintuc{padding: 70px 0;}
.tintuc .owl-nav{position: absolute; top: -47px; left: 0; width: 70px;}
.tintuc .owl-nav button{width: 30px; height: 30px; margin: auto; background: #fff; transition: all 0.25s ease 0s;}
.tintuc .owl-nav button:hover{box-shadow: 0 0 3px rgba(0,0,0,0.5);}
.tintuc .owl-nav button.owl-prev{float: left;}
.tintuc .owl-nav button.owl-next{float: right;}
.tintuc .owl-nav button i{display: block; font-size: 17px; color: #333;}
.tintuc-title{margin-bottom: 50px; font-size: 30px; font-weight: 500; text-transform: uppercase;}
.tintuc-all{position: absolute; right: 0;}
.tintuc-all a{position: relative; padding-left: 60px; font-weight: 500; text-transform: uppercase; line-height: 30px; color: #33a031; transition: all 0.25s ease 0s;}
.tintuc-all a:after{content: ''; position: absolute; top: 0; right: calc(100% - 50px); bottom: 0; width: 50px; height: 1px; margin: auto; background: #33a031; transition: all 0.5s ease 0s;}
.tintuc-all a:hover{color: #333;}
.tintuc-all a:hover:after{width: 0; background: #333;}
.tintuc-item{margin-bottom: 30px;}
.tintuc-img{position: relative;}
.tintuc-img span{position: absolute; right: 0; bottom: 0; padding: 0 15px 0 55px; background: #333; line-height: 40px; color: #fff;}
.tintuc-img span i{position: absolute; top: 0; left: 0; width: 40px; background: #33a031; font-size: 19px; text-align: center; line-height: 40px;}
.tintuc-text{padding: 30px 15px; background: #333;}
.tintuc-text a:nth-child(1){display: block; height: 50px; margin-bottom: 5px; font-weight: 500; text-transform: uppercase; color: #fff; overflow: hidden;}
.tintuc-text p{height: 75px; margin-bottom: 25px; color: #ddd; overflow: hidden;}
.tintuc-text a:nth-child(3){position: relative; padding-left: 60px; font-weight: 500; text-transform: uppercase; color: #33a031; transition: all 0.5s ease 0s;}
.tintuc-text a:nth-child(3):after{content: ''; position: absolute; top: 0; right: calc(100% - 50px); bottom: 0; width: 50px; height: 1px; margin: auto; background: #33a031; transition: all 0.5s ease 0s;}
.tintuc-text a:nth-child(3):hover{color: #fff;}
.tintuc-text a:nth-child(3):hover:after{width: 0; background: #fff;}
@media (min-width:320px){
    .tintuc-all{top: 105px;}
}
@media (min-width:410px){
    .tintuc-all{top: 54px;}
}
@media (min-width:480px){
    .tintuc-item{float: left; width: calc((100% - 15px)/2); margin-right: 15px;}
    .tintuc-item:nth-child(2n){margin-right: 0;}    
}
@media (min-width:580px){
    .tintuc-item{width: calc((100% - 30px)/2); margin-right: 30px;}
    .tintuc-item:nth-child(2n){margin-right: 0;}
}
@media (min-width:768px){
    .tintuc-item{width: calc((100% - 50px)/2); margin-right: 50px;}
    .tintuc-item:nth-child(2n){margin-right: 0;}
}
@media (min-width:970px){
    .tintuc-item{width: calc((100% - 60px)/3); margin-right: 30px;}
    .tintuc-item:nth-child(2n){margin-right: 30px;}
    .tintuc-item:nth-child(3n){margin-right: 0;}
}
@media (min-width:1170px){
    .tintuc-item{width: calc((100% - 100px)/3); margin-right: 50px;}
    .tintuc-item:nth-child(2n){margin-right: 50px;}
    .tintuc-item:nth-child(3n){margin-right: 0;}
}.colnews{position: relative; margin-bottom: 30px;}
.colnews-title{padding-left: 15px; line-height: 50px; background: #33a031; text-transform: uppercase; color: #fff}
.colnews-list{border: 1px solid #d7d7d7; border-top: 0;}
.colnews-item{padding: 10px; border-bottom: 1px dashed #d7d7d7;}
.colnews-img{float: left; margin-right: 10px; padding: 1px; border: 1px solid #d7d7d7;}
.colnews-name{height: 60px; overflow: hidden;}
.colnews-name a{display: block; line-height: 20px; color: #333; transition: all 0.25s ease 0s;}
.colnews-name a:hover{color: #33a031;}
.colnews-more{padding: 10px; text-align: right; line-height: 30px;}
.colnews-more a{display: inline-block; padding: 0 15px; background: #33a031; color: #fff; transition: all 0.25s ease 0s;}
.colnews-more a:hover{background: #f7dd38;}.contact .wrap{max-width: 970px;}
.contact-form{box-sizing: border-box; margin-bottom: 30px; padding: 30px; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0,0,0,0.25);}
.contact-title{margin-bottom: 15px; font-size: 20px; font-weight: 700; line-height: 30px; color: #33a031;}
.contact-item{width: 150px; margin: auto;}
.contact-info ul{list-style: none; width: 100%;}
.contact-info ul li{line-height: 30px;}
.contact-info ul li:first-child{text-transform: uppercase;}
.contact-info ul li span:nth-child(1){display: inline-block; width: 100px; vertical-align: top;}
.contact-info ul li span:nth-child(2){display: inline-block; width: calc(100% - 105px);}
.contact-info ul li a{color: #555;}
.contact-info ul li a b{color: #ed1c24;}
@media (min-width: 320px){
    .contact-info{margin-bottom: 30px;}
}
@media (min-width: 768px){
    .contact-form{float: left; width: 50%;}
    .contact-info{position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: calc(50% - 60px); margin: auto; align-items: center; justify-content: left;}
}.intro{background: #fff; border: 1px solid #d7d7d7}
.intro-left ul{list-style: none; padding: 15px 0;}
.intro-left ul li a{position: relative; display: block; padding: 14px 15px; font-size: 16px; font-weight: 500; color: #333;}
.intro-left ul li a.active{color: #33a031;}
.intro-left ul li a.active:before{content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #33a031;}
.intro-right{border-left: 1px solid #d7d7d7;}
.intro-title{margin-bottom: 15px; padding: 15px 0; border-bottom: 1px solid #d7d7d7; font-size: 28px; color: #333;}
.intro-title h1{font-weight: 400;}
@media (min-width:320px){
    .intro-left{display: none;}
    .intro-right{padding: 0 15px 15px;}
}
@media (min-width:768px){
    .intro-left{float: left; display: block; width: 230px;}
    .intro-right{float: right; width: calc(100% - 291px); padding: 0 30px 30px;}
}.news-item{margin-bottom: 30px; background-color: #fff; background-repeat: no-repeat; background-position: top left; box-shadow: 0 0 5px 1px rgba(0,0,0,0.0625); transition: all 0.25s ease 0s;}
.news-item:hover{transform: translateY(-1px); box-shadow: 0 0 5px 2px rgba(0,0,0,0.25);}
.news-img img{width: 100%;}
.news-info{box-sizing: border-box; padding: 30px;}
.news-time{margin-bottom: 15px; font-size: 18px; color: #555;}
.news-name{margin-bottom: 25px;}
.news-name a{display: block; font-size: 22px; color: #333;}
.news-name a:hover{text-decoration: underline;}
.news-prev{color: #555;}
@media (min-width:320px){
    .news-item{background-size: 0;}
    .news-img{margin: 0 0 10px;}
}
@media (min-width:480px){
    .news-item{background-size: 200px 100%;}
    .news-img{float: left; width: 200px; margin: 0; opacity: 0;}
    .news-info{float: right; width: calc(100% - 200px);}
    .news-prev{display: none;}
}
@media (min-width:767px){
    .news-item{background-size: 300px 100%;}
    .news-img{width: 300px;}
    .news-info{width: calc(100% - 300px);}
    .news-prev{display: block;}
}.product-left{margin-bottom: 30px;}
.product-right{margin-bottom: 20px;}
.product-prev{margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #d7d7d7;}
.product-cart{position: relative;}
.product-cart a{float: left; display: block; margin-bottom: 10px; padding: 0 15px; font-size: 16px; font-weight: bold; line-height: 40px; color: #fff;}
.product-cart a:nth-child(1){margin-right: 10px; background: #ed1c24;}
.product-cart a:nth-child(2){background: #028fe3;}
.product-cart a:hover{background: #33a031;}
.product-tab{margin-bottom: 30px;}
.product-tab > ul{list-style: none;}
.product-tab > ul > li{float: left; font-size: 16px; font-weight: bold; line-height: 40px;}
.product-tab > ul > li > a{display: block; padding: 0 15px; background: #d7d7d7; border: 1px solid #d7d7d7; color: #fff;}
.product-tab > ul > li > a.active{position: relative; background: #fff; color: #ed1c24;}
.product-tab > ul > li > a.active:after{content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #fff;}
.product-content{padding: 15px; border: 1px solid #d7d7d7;}
@media (min-width: 580px){
    .product-left{float: left; width: 300px;}
    .product-right{float: right; width: calc(100% - 330px);}
}
@media (min-width: 768px){
    .product-left{width: 350px;}
    .product-right{width: calc(100% - 380px);}
}
@media (min-width: 970px){
    .product-left{width: 400px;}
    .product-right{width: calc(100% - 430px);}
}.product-1{margin-bottom: 30px;}
.product-1 ul{list-style: none;}
.product-1 ul li{border: 1px solid #d7d7d7; border-top: 0; font-size: 17px; font-weight: 500;}
.product-1 ul li:first-child{padding-left: 15px; line-height: 50px; background: #33a031; border-color: #33a031; text-transform: uppercase; color: #fff}
.product-1 ul li a{position: relative; display: block; padding: 0 5px 0 15px; line-height: 40px; color: #333; transition: all 0.125s ease 0s;}
.product-1 ul li a i{margin-right: 5px; font-size: 10px; transform: translateY(-1px);}
.product-1 ul li a:hover{padding-left: 20px; color: #33a031;}
.product-1 ul li a.active{color: #33a031;}
.product-item a, .product-owl a{position: relative; display: block; margin: 5px; overflow: hidden;}
.product-item a:before, .product-owl a:before{content: ''; position: absolute; top: 0;right: 0; bottom: 0; left: 0; margin: auto; background-image: linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%); opacity: 0.5; transition: all 0.25s ease 0s;}
.product-item a span, .product-owl a span{position: absolute; right: 15px; bottom: 15px; font-weight: 500; text-transform: uppercase; color: #fff; transition: all 0.125s ease 0s;}
.product-item a span:after, .product-owl a span:after{content: ''; position: absolute; right: 0; bottom: 0; display: block; width: 50px; height: 1px; background: #fff;}
.product-item:hover a:before, .product-owl:hover a:before{opacity: 0.75;}
.product-item:hover a span, .product-owl:hover a span{padding-bottom: 5px;}
@media (min-width:320px){
    .product-1{display: none;}
}
@media (min-width:410px){
    .product-item{float: left; width: 50%;}
}
@media (min-width:768px){
    .product-item{width: calc(100% / 3);}
}
@media (min-width:970px){
    .product-1{display: block; float: left; width: 270px;}
    .product-2{float: right; width: calc(100% - 295px);}
}
@media (min-width:970px){
    .product-item-2{width: calc(100% / 4);}
}