.colgroup{margin-bottom: 29px;}
.colgroup-title{margin-bottom: 1px; background: #ec1a23; font-family: HNBold; text-transform: uppercase; text-align: center; line-height: 35px; color: #fff;}
.colgroup-item{position: relative; float: left; width: calc(50% - 1px); margin-bottom: 1px;}
.colgroup-item:nth-child(2n){float: right;}
.colgroup-name{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-family: HNMedium; text-transform: uppercase; line-height: 20px;}
.colgroup-name a{display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center; color: #fff; opacity: 0; transition: all 0.25s ease 0s;}
.colgroup-item:hover .colgroup-name a{background: rgba(0,0,0,0.5); opacity: 1;}.colnews{margin-bottom: 30px;}
.colnews-title{position: relative; font-family: HNBold; text-transform: uppercase; line-height: 33px; padding-left: 15px; border: 1px solid #d7d7d7;}
.colnews-title:after{content: ''; position: absolute; top: -1px; left: -1px; width: 7px; height: calc(100% + 2px); background: #ec1a23;}
.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;}
.colnews-name{height: 60px; overflow: hidden;}
.colnews-name a{display: block; font-family: HNBold; line-height: 20px; color: #222; transition: all 0.25s ease 0s;}
.colnews-name a:hover{color: #ec1a23;}
.colnews-more{padding: 10px; text-align: right; line-height: 25px;}
.colnews-more a{display: inline-block; padding: 0 15px; background: #ec1a23; color: #fff; transition: all 0.25s ease 0s;}
.colnews-more a:hover{background: #f7f501; color: #222;}.contact{}
.c-left{margin-bottom: 25px;}
.c-left h1{font-size: 100%; text-transform: uppercase; color: #ec1a23; margin-bottom: 15px;}
.c-left ul{list-style: none; padding-left: 15px;}
.c-left ul li{margin-bottom: 5px; line-height: 20px;}
.c-left ul li:nth-child(3){max-height: 40px;}
.c-left ul li span{display: inline-block; width: 85px; vertical-align: top;}
.c-left ul li p{display: inline-block; width: calc(100% - 85px);}
.c-left ul li b{display: block;}
.c-left ul li:nth-child(3) p b{color: #ec1a23;}
.c-left ul li:nth-child(4) p b{color: #ec1a23;}
.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; line-height: 20px;}
.c-item{position: relative; margin-bottom: 10px;}
.c-item i{position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: 40px; margin: auto; align-items: center; justify-content: center; color: #ec1a23;}
.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);}
}.dt-button{position: fixed; bottom: 10px; left: 10px; width: 75px; height: 75px; background: url(/components/dangtin/dt.png) no-repeat center / 100%; opacity: 0.75; z-index: 99991;}
.dt-button:hover{opacity: 1;}
.dt p{margin-bottom: 5px; font-family: HNBold; font-size: 15px; text-transform: uppercase; text-align: center; color: #ec1a23;}
.dt span{display: block; text-align: center;}
.dt-item{position: relative;}
.dt-item b{display: block; line-height: 35px;}
@media (min-width: 320px){
    .dt form{width: 212px;}
}
@media (min-width: 360px){
    .dt form{width: 252px;}
}
@media (min-width: 410px){
    .dt form{width: 302px;}
}
@media (min-width: 480px){
    .dt form{width: 372px;}
}
@media (min-width: 580px){
    .dt form{width: 472px;}
}   .cart-item{text-align: left;}
.cart-img{float: left; margin-right: 10px;}
.cart-name{font-size: 15px; text-transform: uppercase; text-align: left; color: #ec1a23;}
.cart-string{list-style: none; color: #696969;}
.cart-button{text-align: left;}
.cart-button a{display: inline-block; font-size: 11px; text-align: center; line-height: 20px; color: #fff; padding: 0 11px; background: #696969; transition: all 0.25s ease 0s;}
.cart-button a:hover{background: #ec1a23;}
.cart-price{margin-bottom: 17px;}
.cart-price b{font-size: 15px; color: #ec1a23;}
.cart-quantity input[type='number']{float: left; text-indent: 0; text-align: center; width: 39px;}
.cart-quantity input::-webkit-outer-spin-button, .cart-quantity input::-webkit-inner-spin-button{-webkit-appearance: none;}
.cart-quantity div{float: left; width: 20px; height: 35px; background: #696969; transition: all 0.25s ease 0s;}
.cart-quantity div:hover{background: #ec1a23;}
.cart-quantity div.cart-minus{margin: 0 5px 0 0;}
.cart-quantity div.cart-plus{margin: 0 0 0 5px;}
.cart-quantity div a{display: block; line-height: 35px; color: #fff;}
.cart-bill p{font-size: 15px; line-height: 30px;}
.cart-bill p span{display: inline-block;}
.cart-bill p span:nth-child(1){float: left;}
.cart-bill p span:nth-child(2){float: right; color: #ec1a23;}
.cart-bill a{display: block; margin-top: 10px; text-transform: uppercase; text-align: center; line-height: 30px; color: #fff; background: #ec1a23; transition: all 0.25s ease 0s;}
.cart-bill a:hover{background: #ec1a23;}
.cart-bill a:nth-of-type(1){float: left; width: calc(50% - 5px);}
.cart-bill a:nth-of-type(2){float: right; width: calc(50% - 5px);}
.cart-form-left{float: left; width: calc(50% - 5px);}
.cart-form-right{float: right; width: calc(50% - 5px);}
.cart-form-item{position: relative; margin-bottom: 10px;}
.cart-form-item textarea{height: 170px;}
@media (min-width:320px){
    .cart-product{margin-bottom: 20px;}
    .cart-img, .cart-string{display: none;}
}
@media (min-width:400px){
    .cart-string{display: block;}
}
@media (min-width:767px){
    .cart-product{float: left; width: calc(100% - 280px); margin-bottom: 0;}
    .cart-bill{float: right; width: 270px;}
}
@media (min-width:970px){
    .cart-img{display: block;}
    .cart-form{float: left; width: calc(100% - 420px);}
    .cart-paylist{float: right; width: 400px;}
}/*** TABLE ***/
.table{display: table; width: 100%; border-collapse: collapse; box-sizing: border-box; background: #fff;}
.table-body{display: table-row-group; line-height: 22px; text-align: center; box-sizing: border-box;}
.table-row{display: table-row;}
/*.table-row:hover{background: #f9f9f9;}*/
.table-row.table-head{text-transform: uppercase; border-bottom: 3px solid #ec1a23;}
.table-cell{border: 1px solid #d7d7d7; display: table-cell; padding: 5px; vertical-align: middle; box-sizing: border-box;}
/*** OPTION ***/
.table-price{font-size: 15px; color: #ec1a23;}
.table-left{text-align: left;}
.table-right{text-align: right;}
.table-transform{text-transform: uppercase;}
.table-background{background: #f9f9f9;}
/*** SIZE ***/
.table-50px{width: 50px;}
.table-110px{width: 110px;}
.table-175px{width: 175px;}
@media (min-width:320px){
    .table-cell-price, .table-mobile, .table-tablet{display: none;}
}
@media (min-width:480px){
    .table-cell-price{display: table-cell;}
}
@media (min-width:767px){
    .table-mobile{display: table-cell;}
}
@media (min-width:970px){
    .table-tablet{display: table-cell}
}.banner{position: relative; height: 360px; z-index: 2;}
.banner:before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgba(0,0,0,0.25);}
.banner-wrap{position: absolute; top: 232px; right: 0; bottom: 0; left: 0; display: flex; margin: auto; align-items: center; justify-content: center;}
.banner-title{font-size: 35px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.75);}
.banner-title-inner{font-size: 100%;}.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-family: HNBold; color: #ec1a23;}
.direct ul li:nth-last-child(2) a{font-family: HNBold; color: #ec1a23;}
@media (min-width:320px){
    .direct ul li.direct-m{display: none;}
}
@media (min-width:767px){
    .direct ul li.direct-m{display: block;}
}.menu-bar{position: absolute; top: 0; bottom: 0; height: 40px; margin: auto;}
.menu-icon{position: relative; float: left; width: 50px; height: 40px; background: #ec1a23; border-radius: 5px; text-align: center;}
.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{display: block; width: 28px; height: 2px; background: #fff; position: absolute; content: '';}
.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; float: left; list-style: none; transition: all 0.25s ease 0s;}
.menu ul li a{display: block; font-family: HNMedium; color: #fff; transition: all 0.25s ease 0s;}
.menu > ul > li > a{padding: 0 7.5px; text-transform: uppercase; line-height: 40px;}
.menu > ul > li.active > a, .menu > ul > li:hover > a{background: #ec1a23;}
.header-scroll .menu > ul > li > a{color: #333;}
.header-scroll .menu > ul > li.active > a, .header-scroll .menu > ul > li:hover > a{color: #fff;}
.menu ul li ul{position: absolute; width: 200px; opacity: 0; transform-origin: 0 0;}
.menu ul li ul li{float: none; margin-top: 5px;}
.menu ul li ul li a{padding-left: 15px; background: #ec1a23; border-radius: 15px; line-height: 30px;}
.menu ul li ul li a:hover{background: #fff; color: #ec1a23;}
.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;}
    .menu-bar{right: 5px;}
}
@media (min-width: 970px){
    .menu{display: block;}
    .menu-bar{right: 0;}
    .menu-display{display: none;}
    .menu > ul > li{margin-left: 5px;}
    .menu > ul > li:first-child{margin-left: 0;}
}.dtkh{padding: 30px 0;}
.dtkh-item{position: relative; height: 90px; border: 1px solid #d7d7d7;}
.dtkh-item img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: calc(100% - 20px); max-height: calc(100% - 20px);}.intro{padding: 50px 0;}
.intro-img{position: absolute; top: 0; bottom: 0; left: 0; margin: auto; z-index: 0;}
.intro-img img{top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.intro-content{position: relative; text-align: center; z-index: 1;}
.intro-title{margin-bottom: 10px; font-family: HNBold; font-size: 16px; text-transform: uppercase;}
.intro-name{margin: 0 auto 30px;}
.intro-text{margin: 0 auto 25px; line-height: 20px;}
.intro-more{text-transform: uppercase; line-height: 30px;}
.intro-more a{display: inline-block; padding: 0 15px; background: #ec1a23; border-radius: 15px; color: #fff; transition: all 0.25s ease 0s;} 
.intro-more a:hover{background: #ec1a23;}
@media (min-width:320px){
    .intro-img{width: 100%; right: 0; opacity: 0.75;}
    .intro-img img{position: absolute;}
}
@media (min-width:410px){
    .intro-name{width: 373px;}
}
@media (min-width:767px){
    .intro-img{width: 600px; right: initial; opacity: 1;}
    .intro-img img{position: relative;}
    .intro-content{float: right; width: 540px;}
    .intro-text{width: 453px;}
}.product{position: relative; margin-bottom: 70px;}
.product .wrap{z-index: 1;}
.product-title{padding: 90px 0 50px; text-transform: uppercase; text-align: center; color: #fff;}
.product-title p:nth-child(1){position: relative; display: inline-block; margin-bottom: 20px; border-bottom: 1px solid #fff; font-family: HNMedium; font-size: 15px; letter-spacing: 5px;}
.product-title p:nth-child(2){font-family: Cookies;}
.product-wrap{padding: 30px 20px 0; background: #fff; border-radius: 10px; box-shadow: 0 0 9px 3px rgba(0,0,0,0.25);}
.product-item{position: relative; margin-bottom: 30px;}
.product-img{margin-bottom: 10px;}
.product-name{height: 20px; overflow: hidden;}
.product-name a{display: block; font-family: HNMedium; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 20PX; color: #333; transition: all 0.25s ease 0s;}
.product-name a:hover{color: #ec1a23;}
.product-background{position: absolute; top: 0; right: 0; left: 0; height: 580px; margin: auto; background: url(/components/home.product/bg.jpg) no-repeat center top fixed / cover; z-index: 0;}
.product-background:after{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgba(0,0,0,0.25);}
.product-line{position: relative; font-size: 18px; text-transform: uppercase; text-align: center; line-height: 25px; margin-bottom: 20px;}
.product-line a{display: inline-block; padding: 0 15px; background: #fff; color: red;position: relative;z-index: 2;font-weight: bold;}
.product-line:after{content: ''; width: 30%; height: 1px; background: #ccc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 1;}
@media (min-width:320px){
    .product-title p:nth-child(2){font-size: 33px;}
}
@media (min-width:360px){
    .product-title p:nth-child(2){font-size: 39px;}
}
@media (min-width:410px){
    .product-item{float: left; width: calc((100% - 10px)/2); margin-right: 10px;}
    .product-item:nth-child(2n){margin-right: 0;} 
}
@media (min-width:767px){
    .product-item{width: calc((100% - 30px)/4); margin-right: 10px;}
    .product-item:nth-child(2n){margin-right: 10px;}
    .product-item:nth-child(4n){margin-right: 0;} 
}
@media (min-width:970px){
    .product-item{width: calc((100% - 60px)/4); margin-right: 20px;}
    .product-item:nth-child(2n){margin-right: 20px;}
    .product-item:nth-child(4n){margin-right: 0;}    
}.news{margin-bottom: 50px;}
.news .owl-nav button{position: absolute; top: 0; bottom: 0; width: 40px; height: 40px; margin: auto; outline: none; transition: all 0.25s ease 0s;}
.news .owl-nav button.owl-prev,
.news .owl-nav button.owl-next{border: 1px solid #d7d7d7; font-size: 20px; line-height: 40px; color: #ec1a23;}
.news .owl-nav button.owl-prev:hover,
.news .owl-nav button.owl-next:hover{background: #ec1a23; border: 1px solid #ec1a23; color: #fff;}
.news-title{position: relative; margin-bottom: 25px;}
.news-title:before{content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: #d7d7d7;}
.news-title a{position: relative; display: inline-block; padding-right: 10px; background: #fff; font-family: HNMedium; font-size: 20px; text-transform: uppercase; color: #333;}
.news-img{margin-bottom: 15px;}
.news-name{height: 40px; overflow: hidden;}
.news-name a{display: block; font-family: HNMedium; font-size: 15px; text-transform: uppercase; line-height: 20px; color: #333; transition: all 0.25s ease 0s;}
.news-name a:hover{color: #ec1a23;}
.news-prev{height: 40px; line-height: 20px; overflow: hidden;}
.news-line{margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #d7d7d7;}
.news-time{float: left; line-height: 25px;}
.news-time i{color: #ec1a23;}
.news-more{float: right; line-height: 25px;}
.news-more a{display: block; padding: 0 10px; background: #ec1a23; border-radius: 12.5px; color: #fff; transition: all 0.25s ease 0s;}
.news-more a:hover{background: #ec1a23;}
@media (min-width:320px){
    .news .owl-nav{display: none;}
}
@media (min-width:480px){
    .news-item{float: left; width: calc((100% - 60px)/2); margin-right: 30px; margin-bottom: 30px;}
    .news-item:nth-child(2n){margin-right: 0;}
}
@media (min-width:767px){
    .news-item{width: calc((100% - 60px)/3);}
    .news-item:nth-child(2n){margin-right: 30px;}
    .news-item:nth-child(3n){margin-right: 0;}
}
@media (min-width:970px){
    .news .owl-nav{display: block;}
    .news .owl-nav button.owl-prev{left: -50px;}
    .news .owl-nav button.owl-next{right: -50px;}
}
@media (min-width:1170px){
    .news .owl-nav button.owl-prev{left: -70px;}
    .news .owl-nav button.owl-next{right: -70px;}
}.product-detail{margin-bottom: 30px;}
.product-left{margin-bottom: 30px;}
.product-price{list-style: none; margin: 10px 0 15px;}
.product-price li{line-height: 30px;}
.product-price li label{padding-left: 5px; font-family: HNBold; font-size: 20px; color: #ec1a23;}
.product-quantity{margin: 0 0 13px; padding-top: 15px;}
.product-quantity b{position: relative; display: inline-block; width: 105px; height: 30px; line-height: 30px; vertical-align: top;}
.product-quantity b:after{content: ':'; position: absolute; right: 0;}
.product-quantity-control{display: inline-block; width: 105px; margin: 0 0 0 12px;}
.product-quantity-control div{float: left; width: 22px; height: 30px;}
.product-quantity-control div:last-child{float: right;}
.product-quantity-control div a{display: block; font-size: 25px; text-align: center; line-height: 30px; color: #fff; background: #ec1a23; transition: all 0.25s ease 0s;}
.product-quantity-control div a:hover{background: #ec1a23;}
.product-quantity-control input[type='text']{float: left; width: calc(100% - 54px); height: 30px; margin: 0 5px; font-size: 15px; text-align: center; text-indent: 0; color: #ec1a23; border: 1px solid #ec1a23;}
.product-cart{}
.product-cart p{line-height: 22px;}
.product-cart a{position: relative; display: block; font-family: HNBold; font-size: 15px; color: #fff; padding: 7px 35px 9px 55px; transition: all 0.25s ease 0s;}
.product-cart a i{position: absolute; top: 10px; left: 19px; width: 18px; height: 15px; margin: auto; text-align: center;}
.product-cart-add, .product-cart-go{vertical-align: top; transition: all 0.25s ease 0s;}
.product-cart-add a{background: #ec1a23;} .product-cart-go a{background: #ec1a23;}
.product-cart-add a:hover{background: #ec1a23; } .product-cart-go a:hover{background: #ec1a23;}
.product-share{margin: 20px 0 30px; text-align: left; line-height: 9px;}
@media (min-width: 320px){    
    .product-cart-add{margin-bottom: 3px;}
}
@media (min-width: 410px){
    .product-cart-add, .product-cart-go{display: inline-block; margin: 0;}
}
@media (min-width: 767px){
    .product-left{float: left; width: calc(50% - 10px);}
    .product-right{float: right; width: calc(50% - 10px);}
}.sanpham-detail{margin-bottom: 30px;}
.sanpham-left{margin-bottom: 30px;}
.sanpham-price{list-style: none; margin: 10px 0 15px;}
.sanpham-price li{line-height: 30px;}
.sanpham-price li label{padding-left: 5px; font-family: HNBold; font-size: 20px; color: #ff0000;}
.sanpham-quantity{margin: 0 0 13px; padding-top: 15px;}
.sanpham-quantity b{position: relative; display: inline-block; width: 105px; height: 30px; line-height: 30px; vertical-align: top;}
.sanpham-quantity b:after{content: ':'; position: absolute; right: 0;}
.sanpham-quantity-control{display: inline-block; width: 105px; margin: 0 0 0 12px;}
.sanpham-quantity-control div{float: left; width: 22px; height: 30px;}
.sanpham-quantity-control div:last-child{float: right;}
.sanpham-quantity-control div a{display: block; font-size: 25px; text-align: center; line-height: 30px; color: #fff; background: #339933; transition: all 0.25s ease 0s;}
.sanpham-quantity-control div a:hover{background: #ff0000;}
.sanpham-quantity-control input[type='text']{float: left; width: calc(100% - 54px); height: 30px; margin: 0 5px; font-size: 15px; text-align: center; text-indent: 0; color: #339933; border: 1px solid #339933;}
.sanpham-cart{}
.sanpham-cart p{line-height: 22px;}
.sanpham-cart a{position: relative; display: block; font-family: HNBold; font-size: 15px; color: #fff; padding: 7px 35px 9px 55px; transition: all 0.25s ease 0s;}
.sanpham-cart a i{position: absolute; top: 10px; left: 19px; width: 18px; height: 15px; margin: auto; text-align: center;}
.sanpham-cart-add, .sanpham-cart-go{vertical-align: top; transition: all 0.25s ease 0s;}
.sanpham-cart-add a{background: #ffcc00;} .sanpham-cart-go a{background: #339933;}
.sanpham-cart-add a:hover{background: #339933; } .sanpham-cart-go a:hover{background: #ffcc00;}
.sanpham-share{margin: 20px 0 30px; text-align: left; line-height: 9px;}
@media (min-width: 320px){    
    .sanpham-cart-add{margin-bottom: 3px;}
}
@media (min-width: 410px){
    .sanpham-cart-add, .sanpham-cart-go{display: inline-block; margin: 0;}
}
@media (min-width: 767px){
    .sanpham-left{float: left; width: calc(50% - 10px);}
    .sanpham-right{float: right; width: calc(50% - 10px);}
}.sanpham{position: relative; margin-bottom: 70px;}
.sanpham-item{position: relative; float: left; margin-bottom: 30px;}
.sanpham-img{margin-bottom: 10px;}
.sanpham-name{height: 20px; overflow: hidden;}
.sanpham-name a{display: block; font-family: HNMedium; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 20PX; color: #333; transition: all 0.25s ease 0s;}
.sanpham-name a:hover{color: #ec1a23;}
.sanpham-value{font-family: HNBold; font-size: 20px; text-align: center; color: #ff0000;}
@media (min-width:410px){
    .sanpham-item{float: left; width: calc((100% - 10px)/2); margin-right: 10px;}
    .sanpham-item:nth-child(2n){margin-right: 0;} 
}
@media (min-width:767px){
    .sanpham-item{width: calc((100% - 30px)/4); margin-right: 10px;}
    .sanpham-item:nth-child(2n){margin-right: 10px;}
    .sanpham-item:nth-child(4n){margin-right: 0;} 
}
@media (min-width:970px){
    .sanpham-item{width: calc((100% - 60px)/4); margin-right: 20px;}
    .sanpham-item:nth-child(2n){margin-right: 20px;}
    .sanpham-item:nth-child(4n){margin-right: 0;}    
}