.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 a:after{content: ">"; display: inline-block; margin: 0 5px; transform: translateY(1px);}
.direct ul li 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-image: linear-gradient(90deg,#61c73f,#1f8538); 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;}
}.slide-carousel .slide-slick{position: relative; display: block!important;}
.slide-carousel .slide-slick img{width: 100%;}
.slide-carousel .slide-content{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgb(0 0 0 / 50%); text-align: center; color: #fff;}
.slide-carousel .slide-content .wrap{padding-top: 80px; text-transform: uppercase; text-align: center;}
.slide-carousel .slide-content h2 p:nth-child(1){font-size: 25px; font-weight: 400; letter-spacing: 1px;}
.slide-carousel .slide-content h2 p:nth-child(2){margin-bottom: 30px; font-size: 70px; font-weight: 900; font-style: italic; line-height: 1.2; letter-spacing: 3px; text-decoration: underline;}

.slide-carousel .slide-content .wrap > p:nth-child(1){margin-bottom: 5px; font-size: 40px; font-family: Roboto Condensed; font-weight: 700;}
.slide-carousel .slide-content .wrap > p:nth-child(2){max-width: 738px; margin: 0 auto 30px; font-size: 16px; text-transform: none; color: #f7f7f7;}

.slide-carousel .slide-content a{display: inline-block; padding: 0 30px; background-color: #f38000; border-radius: 5px; font-weight: 400; line-height: 40px; color: #fff; transition: all 0.3s ease 0s;}
.slide-carousel .slide-content a i{margin-left: 10px; transition: all 0.3s ease 0s;}
.slide-carousel .slide-content a:hover{background-color: #2374e1;}
.slide-carousel .slide-content a:hover i{margin-left: 15px;}

.slide-carousel .slick-arrow{position: absolute; top: 0; bottom: 0; width: 40px; height: 40px; opacity: 0; transition: all 0.3s ease 0s;}
.slide-carousel .slick-arrow i{font-size: 40px; color: #fff;}
.slide-carousel .slick-prev{left: 30px;}
.slide-carousel .slick-next{right: 30px;}

.slide-carousel .slick-current .wrap *{animation-duration: 1s; animation-fill-mode: both;}
.slide-carousel .slick-current h2 p:nth-child(1){animation-name: fadeleft; animation-delay: 0.5s;}
.slide-carousel .slick-current h2 p:nth-child(2){animation-name: faderight; animation-delay: 0.3s;}
.slide-carousel .slick-current .wrap > p:nth-child(1){animation-name: fadeleft; animation-delay: 0.3s;}
.slide-carousel .slick-current .wrap > p:nth-child(2){animation-name: faderight; animation-delay: 0.5s;}
.slide-carousel .slick-current a{animation-name: fadeup; animation-delay: 0.7s;}

@keyframes fadeleft{from{transform: translateX(100px); opacity: 0;} to{transform: translateX(0); opacity: 1;}}
@keyframes faderight{from{transform: translateX(-100px); opacity: 0;} to{transform: translateX(0); opacity: 1;}}
@keyframes fadeup{from{transform: translateY(25%); opacity: 0;} to{transform: translateY(0); opacity: 1;}}

.slide-carousel:hover .slick-arrow{opacity: 1;}
.slide-carousel .slick-dots{position: absolute;bottom: 15px;left: 0;right: 0;margin: 0 auto;}
.slide-carousel .slick-dots li{width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%;}
.slide-carousel .slick-dots li+li{margin-left: 5px;}
.slide-carousel .slick-dots li.slick-active{background-color: #fff;}
@media all and (max-width: 580px){
    .slide{width: 100%;height: auto;}
    .slide-carousel .slide-slick{}
    .slide-carousel .slide-content h2 p:nth-child(2){font-size: 60px;}
    .slide-carousel .slide-content .wrap > p:nth-child(2){font-size: 14px;}
}
@media all and (max-width: 414px){
    .slide-carousel .slide-content h2 p:nth-child(1){font-size: 20px;}
    .slide-carousel .slide-content h2 p:nth-child(2){font-size: 45px;}
    .slide-carousel .slide-content .wrap > p:nth-child(1){font-size: 30px;}
}
@media all and (max-width: 320px){
    .slide-carousel .slide-content h2 p:nth-child(2){font-size: 35px;}
    .slide-carousel .slide-content .wrap > p:nth-child(1){font-size: 25px;}
}.aboutus{padding: 50px 0;}
.aboutus-left{padding: 30px 0;}
.aboutus-title{margin-bottom: 15px; font-size: 30px; font-weight: 400; color: #8b8b8b;}
.aboutus-preview{margin-bottom: 30px; font-size: 16px; text-align: justify;}
.aboutus-more{width: 150px; border: 1px solid #007236;}
.aboutus-more a{display: block; font-weight: 500; text-align: center; line-height: 48px; color: #8b8b8b; transition: all 0.3s ease 0s;}
.aboutus-more a:hover{background-color: #8b8b8b; color: #fff;}
@media all and (max-width: 768px){
    .aboutus-left{float: none; width: auto; margin-bottom: 50px; padding: 0;}
    .aboutus-right{position: initial; width: auto; background-size: 0;}
    .aboutus-right img{opacity: 1;}
}.banggia{}
.gia-title{color: #dd3333; position: relative; margin-bottom: 25px; padding-bottom: 1px; font-size: 30px; font-weight: 500; text-transform: uppercase; line-height: 49px;text-align: center;border: 2px solid rgba(0,0,0,.1);padding: .3em .8em;}
.gia-content{padding-bottom: 30px;}
@media (min-width:320px){
    .gia-title{font-size: 20px;}
}
@media (min-width:970px){
    .gia-title{font-size: 30px;}
}.build{padding: 50px 0 35px;}
.build:nth-child(even){background-color: #f7f7f7;}
.build-title{margin-bottom: 30px; font-size: 30px; font-weight: 400; color: #8b8b8b;}
.build-carousel .slick-list{width: calc(100% + 50px); transform: translateX(-25px);}
.build-carousel .slick-slide{padding: 0 25px 15px;}
.build-carousel .build-slick{vertical-align: top;}
.build-carousel .slick-arrow{position: absolute; top: -60px; right: 0; width: 30px;}
.build-carousel .slick-arrow i{border: 1px solid #007236; line-height: 28px; color: #007236;}
.build-carousel .slick-arrow:hover i{background-color: #007236; color: #fff;}
.build-carousel .slick-prev{right: 40px;}
.build-item{float: left; width: calc((100% - 100px)/3); margin: 0 50px 50px 0;}
.build-item:nth-child(3n){margin-right: 0;}
.build-img{position: relative; overflow: hidden;}
.build-img a{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); opacity: 0; transition: all 0.3s ease 0s;}
.build-img a:before, .build-img a:after{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: #fff; opacity: 0; transition: all 0.3s ease 0s;}
.build-img a:before{width: 1px; height: 50px; bottom: 100%;}
.build-img a:after{width: 50px; height: 1px; left: 100%}
.build-img:hover a{opacity: 1;}
.build-img:hover a:before{bottom: 0; opacity: 1;}
.build-img:hover a:after{left: 0; opacity: 1;}
.build-txt{position: relative; max-width: calc(100% - 100px); padding: 30px 15px; margin: -30px auto 0; background-color: #fff; box-shadow: 0 0 15px rgb(0 0 0 / 25%);}
.build-name{margin-bottom: 5px;}
.build-name a{display: block; font-size: 20px; font-weight: 500; text-align: center; color: #333; transition: all 0.3s ease 0s;}
.build-more{text-align: center;}
.build-more a{position: relative; display: inline-block; color: #555; transition: all 0.3s ease 0s;}
.build-more a:after{content: ''; position: absolute; bottom: 3px; left: 0; width: 0; height: 1px; background-color: #8b8b8b; opacity: 0; transition: all 0.3s ease 0s;}
.build-more a:hover{color: #007236;}
.build-more a:hover:after{width: 100%; opacity: 1;}
.build-all{width: 150px; margin: 35px auto 15px; border: 1px solid #8b8b8b;}
.build-all a{display: block; font-weight: 500; text-align: center; line-height: 48px; color: #8b8b8b; transition: all 0.3s ease 0s;}
.build-all a:hover{background-color: #8b8b8b; color: #fff;}
@media all and (max-width: 768px){
    .build-carousel .slick-list{width: calc(100% + 30px); transform: translateX(-15px);}
    .build-carousel .slick-slide{padding: 0 15px 15px;}
    .build-item{width: calc((100% - 30px)/2); margin-right: 30px;}
    .build-item:nth-child(3n){margin-right: 30px;}
    .build-item:nth-child(2n){margin-right: 0;}
}
@media all and (max-width: 414px){
    .build-item{float: none; width: auto; margin-right: 0;}
    .build-item:nth-child(3n){margin-right: 0;}
}.letter{margin-bottom: 20px;}
.letter .wrap{padding: 20px 0; border-bottom: 1px solid #d7d7d7;}
.letter-name{margin-bottom: 30px; font-size: 30px; color: #0f7fb9;margin-top: 40px;}
.letter-name:after{content: ''; display: block; width: 70px; height: 2px; background: #0f7fb9;}
.letter-content{font-size: 16px;}
.letter-more{width: 150px; background: #cd7428; border-radius: 10px; transition: all 0.125s ease 0s;}
.letter-more:hover{background: #0f7fb9;}
.letter-more a{display: block; text-align: center; line-height: 50px; color: #fff;}
@media (min-width:320px){
    .letter-picture,
    .letter-content{margin-bottom: 30px;}
    .letter-content p{padding: 5px 0;}
}
@media (min-width:970px){
    .letter-picture{float: left; width: 35%; margin-top: 110px;}
    .letter-info{float: right; width: calc(65% - 120px); padding: 0 60px;}
}
@media (min-width:1170px){
    .letter-name{padding-top: 5px;}
    .letter-content{margin-bottom: 60px;}
}.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(2){right: 0; left: 0; width: 23px; font-size: 20px;}
.noibat-title i:nth-child(3){right: -45px; left: 0; width: 17px; font-size: 15px;}
.noibat-title i:nth-child(4){right: 0; left: -45px; width: 17px; font-size: 15px;}
@media (min-width:320px){
    .noibat{padding: 20px 0;}
}
@media (min-width:970px){
    .noibat{padding: 20px 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{position: relative; padding: 70px 0; background: url(/components/2taisao/bg_phelieu.jpg) no-repeat right; background-size: cover; text-transform: uppercase; text-align: center; color: #fff;}
.taisao:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.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: 26px; 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{}
    .contact-info{}
}.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-1{
    float: left;
    width: calc(100% - 295px);
    margin-bottom: 30px;
}
.news-2{
    display: block;
    float: right;
    width: 270px;
}
.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;}
.news-other{margin-bottom: 20px; padding: 10px 0 5px; border-top: 1px dotted #d7d7d7; border-bottom: 1px dotted #d7d7d7;}
.news-other ul{list-style: none;}
.news-other ul li{margin-bottom: 5px;}
.news-other ul li a{display: block; color: #555; transition: all 0.25s ease 0s;}
.news-other ul li a i{margin-right: 5px; font-size: 12px; transition: all 0.25s ease 0s;}
.news-other ul li:hover a{color: #018c40;}
.news-other ul li:hover a i{transform: translateX(2px);}
.news-list-other{width: 100%;}
@media (min-width:320px){
    .news-item{background-size: 0;}
    .news-img{margin: 0 0 10px;}
    .news-1{width: 100%;}    
    .news-2{width: 100%;}    
}
@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;}
    .news-1{width: calc(100% - 295px);}
    .news-2{width: 270px;} 
}.product-left,
.product-right{position: relative; margin-bottom: 30px;}
.product-percent{position: absolute; top: 0; left: 15px; width: 60px; padding: 4px 0 17px; background-color: #d9302c; border-top: 5px solid #d9302c; border-radius: 0 0 30px 30px; font-weight: 300; text-align: center; line-height: 1; color: #fff;}
.product-percent:before{content: ''; position: absolute; top: -5px; left: 0; width: 100%; height: 5px; background-color: rgb(0 0 0 / 25%);}
.product-percent span{display: block; font-size: 20px; font-weight: 500;}
.product-name{margin-bottom: 15px; font-size: 26px; font-weight: 400; text-transform: uppercase; line-height: 1.2;}
.product-price{margin-bottom: 15px;}
.product-price{font-size: 22px; color: #d9302c;}
.product-price span{padding-left: 15px; font-size: 18px; text-decoration: line-through; color: #777;}
.product-link{font-size: 16px;}
.product-link a{display: inline-block; margin-bottom: 5px; color: #231f20;}
.product-link a:nth-child(1){}
.product-link a:nth-child(1) span{text-decoration: underline;}
.product-link a:nth-child(1):hover span{color: #ea6424;}
.product-link a:nth-child(2){margin-left: 6px; padding-left: 10px; border-left: 3px double #d7d7d7;}
.product-link a:nth-child(2) span{color: #ea6424;}
.product-link a:nth-child(2):hover span{text-decoration: underline;}
.product-link a:nth-child(3){display: block;}
.product-preview{margin-bottom: 30px; font-size: 16px;}
.product-preview ul{list-style: none; padding-left: 15px;}
.product-preview ul li{position: relative; margin-top: 5px; padding-left: 25px;}
.product-preview ul li:before{content: '\e416'; position: absolute; top: 0; left: 0; font-family: 'Font Awesome 6 Pro'; font-weight: 400; color: #ea6424;}
.product-quantity{margin-bottom: 15px;}
.product-quantity b{display: inline-block; font-size: 16px; line-height: 25px; vertical-align: top;}
.product-quantity div{display: inline-block; width: 100px; margin-left: 11px; vertical-align: top;}
.product-quantity div *{float: left;}
.product-quantity div p{width: 25px;}
.product-quantity div p i{display: block; width: 25px; background-color: #f7f7f7; border-radius: 50%; text-align: center; line-height: 25px; color: #231f20; transition: all 0.25s ease 0s;}
.product-quantity div p i:hover{background-color: #231f20; color: #ea6424}
.product-quantity div input[type=text]{width: 50px; height: 25px; border: none; text-align: center; text-indent: 0;}
.product-cart{position: relative; font-size: 16px; font-weight: 500; line-height: 40px;}
.product-cart a{float: left; padding: 0 15px; transition: all 0.25s ease 0s;}
.product-cart a+a{margin-left: 15px;}
.product-cart a:nth-child(1){background: #231f20; color: #ea6424;}
.product-cart a:nth-child(2){background: #ea6424; color: #231f20;}
.product-cart a:hover{box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transform: translateY(-1px); color: #fff;}
.product-cart p{position: absolute; top: 0; left: 0; display: none; width: 171.11px; background: #d9302c; text-align: center; color: #fff; transition: all 0.25s ease 0s;}.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-list{}
.product-item{float: left;width: calc(100% / 3);}
.product-item-2{width: calc(100% / 4);}
.product-item a, .product-owl a{position: relative; display: block; margin: 5px; overflow: hidden;}
.product-item a h3{display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis;overflow: hidden;font-size: 18px;font-weight: 500;}
.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;font-size: 13px;}
.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;}
.product-desc{margin: 5px;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;transition: all 0.25s ease 0s;padding: 5px;}
@media only screen and (max-width: 1200px){
    
}
@media only screen and (max-width: 820px){

}
@media only screen and (max-width: 420px){
    .product-item{ width: 100%;}
    .product-item a h3{-webkit-line-clamp: 2;}
}