.banner{position: relative; height: 270px; 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: 35px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.75);}.direct{margin-bottom: 30px; padding: 10px 0; background: #f7f7f7;}
.direct ul{list-style: none;}
.direct ul li{float: left; line-height: 20px;}
.direct ul li+li:before{content: "/"; display: inline-block; margin: 0 5px;}
.direct ul li a{display: inline-block; color: #333;}
.direct ul li a i{font-size: 12px; color: #777;}
.direct ul li:nth-last-child(2){font-weight: bold; color: #339933;}
.direct ul li:nth-last-child(2) a{font-weight: bold; color: #339933;}
@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;  z-index: 100;}
.menu-icon{position: relative; float: right; display: block; width: 50px; height: 42px; background-image: linear-gradient(#097e7e, #206264); text-align: center;}
.menu-icon span{display: block; width: 30px; 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: 30px; height: 2px; background: #fff;}
.menu-icon span:after{bottom: -9px;}
.menu-icon span:before{top: -9px;}
.menu{float: left;}
.menu ul{width: 100%; list-style: none; transition: all 0.25s ease 0s;}
.menu ul li:not(.brand){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{font-size: 16px; text-transform: uppercase; line-height: 50px;}
.menu > ul > li:first-child a{}
.menu > ul > li.active > a, .menu ul > li:hover > a{background: #097e7e;}
.menu ul li ul{position: absolute; width: 200px; opacity: 0; transform-origin: 0 0;}
.menu ul li ul li a{padding: 0 10px; background: #ed1c24; line-height: 30px;}
.menu ul li ul li a:hover{background: #000;}
.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;}

.menu > ul > li.brand{}
.menu > ul > li.brand > ul{box-sizing: border-box; width: 100%; padding: 15px; background: #fff; box-shadow: 0 2px 3px 1px rgba(0,0,0,0.25);}
.menu > ul > li.brand > ul > li{float: left; width: calc(100%/6);}
.menu > ul > li.brand > ul > li > a{background: transparent; color: #333; /*height: 0px; overflow: hidden;*/}
.menu > ul > li.brand > ul > li > ul{position: relative; top: 0; left: 0; width: 100%; opacity: 1; transform: scale(1,1);}
.menu > ul > li.brand > ul > li > ul > li > a{padding: 0; background: transparent; line-height: 25px; color: #333;}
.menu > ul > li.brand > ul > li > ul > li > a:hover{text-decoration: underline; color: #097e7e;}

@media (min-width: 320px){
    .menu-bar{height: 42px; margin-bottom: 20px;}
    .menu{display: none;}
}
@media (min-width: 970px){
    .menu-bar{height: 50px; margin-bottom: 30px; background-image: linear-gradient(#097e7e, #206264);}
    .menu{display: block; width: 100%;}
    .menu-display{display: none;}
    .menu ul > li > a{padding: 0 17px;}
}
@media (min-width: 1170px){
    .menu ul > li > a{padding: 0 30px;}
}.noibat{padding: 50px 0; background: url(/components/2noibat/bg.jpg) no-repeat center fixed / cover;}
.noibat-title{font-size: 28px; font-weight: 600; text-transform: uppercase; text-align: center; color: #097e7e;}
.noibat-title:after{content: ''; display: block; width: 100px; height: 2px; margin: 0 auto 30px; background: #097e7e;}
.noibat-item{padding: 5px 15px;}
.noibat-img{margin-bottom: 10px; background: #fff; border: 1px solid #333; border-radius: 50%; overflow: hidden; transition: all 0.25s ease 0s;}
.noibat-img img{margin: auto;}
.noibat-item:hover .noibat-img{transform: translateY(-1px); box-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.noibat-name a{display: block; font-weight: 600; text-transform: uppercase; text-align: center; color: #333;}
.noibat .owl-nav{width: 120px; margin: 30px auto 0;}
.noibat .owl-nav button.owl-prev,
.noibat .owl-nav button.owl-next{display: inline-block; width: 50px; margin: 0 5px; border: 2px solid #097e7e; border-radius: 10px; font-size: 10px; line-height: 18px; color: #097e7e; outline: none; transition: all 0.25s ease 0s;}
.noibat .owl-nav button.owl-prev:hover,
.noibat .owl-nav button.owl-next:hover{background: #097e7e; color: #fff;}
@media (min-width:320px){
    .noibat-img{padding: 10px;}
}
@media (min-width:360px){
    .noibat-img{padding: 15px;}
}
@media (min-width:410px){
    .noibat-img{padding: 20px;}
}
@media (min-width:480px){
    .noibat-img{padding: 30px;}
    .noibat-name{padding: 0 15px;}
}.sanpham-group{position: relative;}
.sanpham-title{margin-bottom: 30px; border-bottom: 2px solid #d7d7d7;}
.sanpham-title-inner{position: relative; display: inline-block; font-size: 16px; font-weight: bold; text-transform: uppercase; line-height: 40px; color: #097e7e;}
.sanpham-title-inner:after{content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #097e7e;}
.sanpham-title-inner i{margin: 0 5px;}
.sanpham-all{position: absolute; right: 0;}
.sanpham-all a{display: block; font-size: 16px; color: #ed1c24;}
@media (min-width:320px){
    .sanpham-group{margin-bottom: 30px; padding-bottom: 25px;}
    .sanpham-all{bottom: 0;}
    .sanpham-all a{text-decoration: underline;}
}
@media (min-width:480px){
    .sanpham-group{margin-bottom: 0; padding-bottom: 0;}
    .sanpham-all{top: 8px; bottom: initial;}
    .sanpham-all a{text-decoration: none;}
}
@media (min-width:1170px){
    .xxx-item{width: calc((100% - 60px)/3); margin-right: 30px;}
    .xxx-item:nth-child(2n){margin-right: 30px;}
    .xxx-item:nth-child(3n){margin-right: 0;}
}.tintuc{padding: 50px 0;}
.tintuc-item-2{padding: 15px 0; border-bottom: 1px dashed #ddd;}
.tintuc-item-2:nth-child(2){padding-top: 0;}
.tintuc-item-2:nth-child(4){padding-bottom: 0; border-bottom: 0;}
.tintuc-img-1{margin: 0 0 15px;}
.tintuc-img-2{float: left; margin: 0 15px 0 0;}
.tintuc-name-1{margin: 0 0 5px;}
.tintuc-name-2{max-height: 44px; overflow: hidden;}
.tintuc-name-1 a,
.tintuc-name-2 a{display: block; font-weight: bold; transition: all 0.25s ease 0s;}
.tintuc-name-2 a{color: #333;}
.tintuc-name-1 a{text-transform: uppercase; color: #111;}
.tintuc-prev{color: #777; max-height: 66px; overflow: hidden;}
.tintuc-item-1:hover .tintuc-name-1 a,
.tintuc-item-2:hover .tintuc-name-2 a{color: #097e7e;}
@media (min-width:320px){
    .tintuc .wrap{padding-bottom: 40px;}
}
@media (min-width:480px){
     .tintuc .wrap{padding-bottom: 0;}
}
@media (min-width:767px){
    .tintuc-item-1{float: left; width: 415px; margin-right: 15px;}
    .tintuc-item-2{float: left; width: calc(100% - 430px);}
}
@media (min-width:970px){
    .tintuc-title-1{width: 560px;}
    .tintuc-item-1{width: 560px; margin-right: 30px;}
    .tintuc-item-2{width: calc(100% - 590px);}
}.col-help{margin-bottom: 30px;}
.col-help ul{list-style: none; border: 1px solid #d7d7d7; border-top: 0;}
.col-help ul li{padding: 10px; border-bottom: 1px solid #d7d7d7;}
.col-help ul li:last-child{border-bottom: 0;}
.col-help ul li img{float: left; width: 90px; margin-right: 10px;}
.col-help ul li span{display: block; padding-top: 10px; text-transform: uppercase;}
.col-help ul li a{display: block; font-size: 18px; font-weight: bold; color: #ed1c24;}.luot-xem{position: relative; margin-bottom: 30px;}
.luot-xem-title{position: relative; text-transform: uppercase; line-height: 35px; padding-left: 15px; border: 1px solid #d7d7d7;}
.luot-xem-title:after{content: ''; position: absolute; top: -1px; left: -1px; width: 7px; height: calc(100% + 2px); background: #097e7e;}
.luot-xem ul{list-style: none; border: 1px solid #d7d7d7; border-top: 0;}
.luot-xem li{padding: 10px; border-bottom: 1px dashed #d7d7d7;}
.luot-xem ul li:last-child{border-bottom: 0;}
.luot-xem li a{display: block;}
.luot-xem li a:nth-child(1){float: left; margin-right: 10px;}
.luot-xem li a:nth-child(2){overflow: hidden; font-weight: 600; color: #333; transition: all 0.25s ease 0s;}
.luot-xem li:hover a:nth-child(2){color: #097e7e;}
.luot-xem li a:nth-child(3){color: #ed1c24;}.col-menu{margin-bottom: 30px;}
.col-menu ul{list-style: none;}
.col-menu ul li{position: relative;}
.col-menu ul li a{position: relative; display: block; border-top: 1px solid #d7d7d7; line-height: 35px; color: #333; transition: all 0.25s ease 0s;}
.col-menu ul li a b{font-weight: 600;}
.col-menu ul li a i{position: absolute; top: 0; left: 8px; font-size: 12px; line-height: 35px; color: #097e7e; transition: all 0.25s ease 0s;}
.col-menu ul li a:hover i{transform: translateX(3px);}
.col-menu ul li ul li a i{left: 20px;}
.col-menu > ul{background: #fff; border: 1px solid #d7d7d7; border-top: 0;}
.col-menu > ul > li > a{padding-left: 20px;}
.col-menu > ul > li:first-child > a{border-top-color: transparent;}
.col-menu > ul > li > a:hover, .col-menu > ul > li.active > a{color: #097e7e;}
.col-menu > ul > li > i{position: absolute; right: 0; bottom: 0; width: 35px; height: 35px; font-size: 10px; text-align: center; line-height: 35px; cursor: pointer;}
.col-menu > ul > li > i:hover, .col-menu > ul > li.active > i{color: #097e7e;}
.col-menu > ul > li > ul > li > a{padding-left: 30px;}
.col-menu > ul > li > ul > li > a:hover, .col-menu > ul > li > ul > li.active > a{color: #097e7e;}
.col-menu-title{background: #097e7e; font-size: 16px; text-transform: uppercase; text-align: center; line-height: 50px; color: #fff;}.c-left{margin-bottom: 25px;}
.c-left h1{font-size: 16px; text-transform: uppercase; color: #ed1c24; margin-bottom: 15px;}
.c-left ul{list-style: none; padding-left: 15px;}
.c-left ul li{margin-bottom: 5px;}
.c-left ul li:nth-child(3){max-height: 40px;}
.c-left ul li span{display: inline-block; width: 110px; vertical-align: top;}
.c-left ul li p{display: inline-block; width: calc(100% - 110px);}
.c-left ul li b{display: block;}
.c-left ul li:nth-child(3) p b{color: #ed1c24;}
.c-left ul li a{color: #333;}
.c-right{margin-bottom: 20px;}
.c-right form{margin: auto;}
.c-text{margin-bottom: 20px; text-align: justify;}
.c-item{position: relative; margin-bottom: 10px;}
.c-item label.error{position: absolute; top: 0; right: 0; bottom: 0; width: 40px; height: 40px; margin: auto; text-align: center; line-height: 40px;}
.c-item > i{position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: 40px; margin: auto; align-items: center; justify-content: center; color: #ed1c24;}
.c-item input[type="text"]{text-indent: 40px;}
.c-item:nth-child(5){text-align: right;}
@media (min-width: 480px){
    .c-right form{width: calc(100% - 30px);}
}
@media (min-width: 767px){
    .c-left{float: left; width: calc(50% - 15px);}
    .c-right{float: right; width: calc(50% - 15px);}
}
@media (min-width: 970px){
    .c-left,
    .c-right{width: calc(50% - 25px);}
    .c-right form{width: calc(100% - 50px);}
}.news-item{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #d7d7d7;}
.news-item:last-child{border-bottom: 0;}
.news-name{margin-bottom: 5px;}
.news-name a{display: block; font-size: 16px; color: #333; transition: all 0.25s ease 0s;}
.news-name a:hover{color: #ed1b24;}
.news-time{margin-bottom: 5px; color: #777;}
.news-prev{color: #555;}
@media (min-width:320px){
    .news-img{margin: 0 0 10px;}
}
@media (min-width:480px){
    .news-img{float: left; width: 240px; margin: 0;}
    .news-info{float: right; width: calc(100% - 260px);}
}.product-left{margin-bottom: 30px;}

.product-price{list-style: none; margin-bottom: 30px;}
.product-price li{line-height: 30px; font-weight: bold;}
.product-price li label{display: block; font-size: 22px; color: #ed1c24;}
.product-price li span{display: block; color: #777;}

.product-cart{}
.product-cart a{position: relative; float: left; display: block; font-size: 16px; font-weight: bold; line-height: 40px; color: #fff; margin-bottom: 10px; padding: 0 15px 0 40px; transition: all 0.25s ease 0s;}
.product-cart a:nth-child(1){margin-right: 10px; background: #ed1c24;}
.product-cart a:nth-child(2){background: #0099ff;}
.product-cart a:hover{background: #097e7e;}
.product-cart a i{position: absolute; top: 0; left: 0; width: 40px; height: 40px; text-align: center; line-height: 40px;}

.product-tab{margin-top: 25px; padding-top: 25px; border-top: 1px solid #d7d7d7;}
.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: #097e7e;}
.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: 320px){    

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

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

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

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

}
@media (min-width: 767px){
    .product-left{float: left; width: 350px; margin-bottom: 0;}
    .product-right{float: right; width: calc(100% - 375px);}
}
@media (min-width: 970px){
    .product-left{width: 400px;}
    .product-right{width: calc(100% - 430px);}
}
@media (min-width: 1170px){

}.sp-item{float: left; margin-bottom: 25px;}
.sp-wrap{padding: 10px; border: 1px solid #d7d7d7; text-align: center; transition: all 0.25s ease 0s;}
.sp-wrap:hover{transform: translateY(-1px); box-shadow: 1px 1px 3px rgba(0,0,0,0.25);}
.sp-img{position: relative; margin-bottom: 10px;}
.sp-name{height: 44px; margin-bottom: 5px; overflow: hidden;}
.sp-name a{display: block; font-weight: 600; text-transform: uppercase; color: #333;}
.sp-price{font-weight: bold; color: #ed1c24; margin-bottom: 10px;}
.sp-more{width: 100px; margin: auto; background: #097e7e; border-radius: 10px 0; transition: all 0.25s ease 0s;}
.sp-more:hover{background: #ed1c24;}
.sp-more a{display: block; line-height: 30px; color: #fff;}
@media (min-width:320px){
    .sp-item{width: calc((100% - 15px) / 2); margin-right: 15px;}
    .sp-item:nth-child(2n){margin-right: 0;}
}
@media (min-width:410px){
    .sp-item{width: calc((100% - 30px) / 2); margin-right: 30px;}
    .sp-item:nth-child(2n){margin-right: 0;}
}
@media (min-width:580px){
    .sp-item{width: calc((100% - 30px) / 3); margin-right: 15px;}
    .sp-item:nth-child(2n){margin-right: 15px;}
    .sp-item:nth-child(3n){margin-right: 0;}
}
@media (min-width:768px){
    .sp-item{width: calc((100% - 60px) / 3); margin-right: 30px;}
    .sp-item:nth-child(2n){margin-right: 30px;}
    .sp-item:nth-child(3n){margin-right: 0;}
}
@media (min-width:1170px){
    .sp-item{width: calc((100% - 90px) / 4); }
    .sp-item:nth-child(2n),
    .sp-item:nth-child(3n){margin-right: 30px;}
    .sp-item:nth-child(4n){margin-right: 0;}
}