@font-face {
    font-family: 'Segoe UI Italic';
    src: url('../fonts/SegoeUI-Italic.eot');
    src: url('../fonts/SegoeUI-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SegoeUI-Italic.woff2') format('woff2'),
        url('../fonts/SegoeUI-Italic.woff') format('woff'),
        url('../fonts/SegoeUI-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/SegoeUI.eot');
    src: url('../fonts/SegoeUI.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SegoeUI.woff2') format('woff2'),
        url('../fonts/SegoeUI.woff') format('woff'),
        url('../fonts/SegoeUI.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('../fonts/SegoeUI-Bold.eot');
    src: url('../fonts/SegoeUI-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SegoeUI-Bold.woff2') format('woff2'),
        url('../fonts/SegoeUI-Bold.woff') format('woff'),
        url('../fonts/SegoeUI-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Roboto Medium';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/Arial-Black.eot');
    src: url('../fonts/Arial-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Arial-Black.woff2') format('woff2'),
        url('../fonts/Arial-Black.woff') format('woff'),
        url('../fonts/Arial-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}



.w-clear:after{display:block;content:"";clear:both;}
.breadCrumbs{margin-bottom: 30px;margin-top: 70px}
*{margin: 0;padding: 0;}
img{vertical-align: middle!important;}
body{background: #fff;height: 100%;margin: 0 auto;position: relative;}
.wrap-body{margin: auto;padding: 0;font-family: Arial;font-size: 14px;width: 1366px;background: #f7f7f7}
ul{margin:0;padding: 0;}
a:hover{text-decoration: none;}
a{color: #000}
p{margin: 0;padding: 0;}
img{max-width: 100%;}
.owl-nav{display: none;}
.main-width{width: 1300px;margin: auto;}
.main-width2{width: 1200px;margin: auto;}
.main-box{margin-top: 50px}
.main-flex{display: flex;justify-content: space-between;align-items: center;}
.main-flex2{display: flex;justify-content: space-between;}
.main-flex3{display: flex;align-items: center;}
.title-main span{font-size: 30px;color: #333333;text-transform: uppercase;font-weight: bold;}
.title-zone{margin-bottom: 30px;position: relative;}
.title-zone span{position: relative;}
.title-zone span:before{content: '';position: absolute;width: 240px;border-top: 2px solid #e2e2e2;right: calc(100% + 40px);top: 50%}
.title-zone span:after{content: '';position: absolute;width: 240px;border-top: 2px solid #e2e2e2;left: calc(100% + 40px);top: 50%}
.title-zone .title-main{margin-bottom: 0;}
/*cus general*/
.wrap-home{margin: 0 auto;}
/*header*/
.top-header{font-family: Roboto Medium;text-align: center;background: #d6d6d6;text-transform: uppercase;padding: 10px 0;letter-spacing: 1px;font-size: 15px}
.mid-header{background: url(../images/img/bg-header.jpg);background-size: cover;padding: 5px 0}
.banner-header{margin: 0 20px}
.slogan-header2{font-family: Segoe UI Italic;color: #ffffff;margin-right: 30px}
.info-header{display: flex;align-items: center;}
.info-header p{color: #ff3711;}
.info-header > p{margin-left: 30px;position: relative;}
.info-header a{color: #ff3711}
.info-header > div{position: relative;margin-left: 30px}
.info-header > p:before,.info-header > div:before{content: '';position: absolute;height: 15px;left: -15px;top: calc(50% - 15px/2);border-left: 1px solid #d2d2d2}
.info-header i{margin-right: 10px;color: #d2d2d2}
.giohang-header{padding: 0 20px;position: relative;margin: 0 20px;border-left: 1px solid #d2d2d2;border-right: 1px solid #d2d2d2;}
.giohang-header p{width: 40px;height: 40px;border: 1px solid #d2d2d2;text-align: center;line-height: 40px;}
.giohang-header a{display: block;}
.giohang-header i{color: #ff3711;}
.giohang-header a:hover i{color: #d2d2d2}
.mxh-header a{margin-left: 1px}
.mxh-header a:hover img{transform: rotateY(360deg);transition: 1s}
.box-right-header1{margin-bottom: 20px}
.main-header{background: #d6d6d6;}
/*search*/
.search-zone{position: relative;}
.search-zone input{width: 470px;height: 40px;background: #ffffff;border-radius: 10px;padding: 0 20px;border: none;}
.search-zone p{width: 40px;height: 40px;line-height: 40px;text-align: center;position: absolute;right: 0;top: 0;color: #d2d2d2;background: #797979}
/*end search*/

/*menu*/
.menu ul li ul{background: rgba(214,214,214,.7);}
.menu ul li ul li a h2{font-size: 13px}
.menu ul li a h2{font-size:13px;margin:0px;padding: 15px 25px;text-transform:uppercase;color: #000;font-weight: bold;position: relative;}
.menu > ul > li > a > h2:before{content: '';position: absolute;height: 15px;top: calc(50% - 15px/2);left: 0;border-left: 1px solid #b3b3b3;border-right: 1px solid #6a6a6a}
.menu > ul > li:first-child > a > h2:before{display: none;}
.menu ul li a.active > h2,.menu ul li:hover > a > h2{color: #ff3711}
.menu ul li.home-page a h2 i{font-size: 18px}
.fix-menu{position: fixed;top: 0;transition: 1s;left: 0;width: 1366px;z-index: 9999;margin: auto;right: 0;}
.fix-menu .logo-header{width: 100px}

/*danhmucsp*/
.icon-dmsp{margin-left: 10px}
.fix-menu .container-uldm,.wrap-danhmuc{display: none;}
.fix-menu .danhmucsp:hover .container-uldm,.danhmucsp:hover .wrap-danhmuc{display: block;}
.danhmuc-header{width: 270px}
.container-dmsp{width: 100%;position: relative;z-index: 2}
.danhmucsp p{color: #ffffff;background: #454649;padding: 11px 0;text-align: center;font-size: 15px;font-weight: bold;}
.container-uldm{position: relative;}
.container-uldm>ul{background: #e8e8e8;max-height: 403px;overflow-y: auto;border: 1px solid #cccccc;border-top: none;padding: 0 5px}
.danhmucsp ul li{padding: 10px 0;list-style-type: none;border-bottom: 1px dotted #cccccc;}
.danhmucsp ul li:last-child{border-bottom: none;}
.danhmucsp ul li a:before{content: '';position: absolute;width: 5px;height: 5px;left: 10px;top: calc(50% - 5px/2);background: #454649;transform: rotate(45deg);}
.danhmucsp ul li a{text-transform: uppercase;position: relative;display: block;padding-left: 30px}
.danhmucsp ul li a:hover{color: #ff3711;}
.danhmucsp ul li ul{left: 100%;top: 0;position:absolute;min-width:200px;background:#f8f5f0;box-shadow:0 3px 11px 0 rgba(0,0,0,0.1);-webkit-transform:perspective(600px) rotateX(-90deg);transform:perspective(600px) rotateX(-90deg);-webkit-transform-origin:0 0 0;transform-origin:0 0 0;opacity:0;visibility:hidden;transition:all .5s;}
.danhmucsp ul li:hover > ul{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-transform-origin:0 0 0;opacity:1;visibility:visible;transition:all .7s;z-index: 99}
.danhmucsp ul li ul li{position: relative;}
.danhmucsp ul li ul li a{text-align:left;border-bottom:1px solid rgba(255,255,255,0.2);}
.danhmucsp ul li ul li:last-child > a{border-bottom:0px;}
.danhmucsp ul li ul li ul{top:0px;left:100%;}
/*end danhmucsp*/

/*slide*/
.slide-box1{width: 1080px;float: right;}
.slidershow-cus{background: #f7f7f7;padding: 8px}
/*end slide*/

/*hover_sang2*/
.vach_sang{overflow: hidden;position: relative;}
.vach_sang::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}
.vach_sang:hover::before{-webkit-animation:shine .75s;animation:shine .75s}
@-webkit-keyframes shine{100%{left:125%}}
@keyframes shine{100%{left:125%}}
/*end hover_sang2*/

/*xemthem-zone*/
.xemthem-zone a{width: 205px;height: 40px;background: #f2f2f2;display: block;line-height: 40px;font-size: 13px;text-align: center;margin: auto;border-radius: 5px}
.xemthem-zone a:hover{background: #0000fe;transition: .3s;color: #ffffff}
.xemthem-zone{margin-top: 20px;position: relative;}
.xemthem-zone:before{content: '';position: absolute;width: 100%;border-top: 1px solid #f2f2f2;z-index: -1;top: 50%}
/*end xemthem-zone*/

/*sanpham*/
.thongtin-sp{text-align: center;box-shadow: 0 1px 5px #c3bcbc}
.ten-sp{font-size: 15px;padding-top: 10px;max-height: 55px;overflow: hidden;}
.ten-sp:hover{color: #ff3711}
.gia{font-weight: bold;font-size: 15px;color: #ff3711;}
.gia-cu{color: #454649;text-decoration: line-through;margin-right: 20px}
.btn-muangay i{margin-right: 10px}
.btn-muangay{color: #1fb731;padding: 10px 0;border-top: 1px solid #e3e3e3;cursor: pointer;}
.img-sp{position: relative;}
.gia-sp{margin: 5px 0}
.grid-product{display: grid;grid-template-columns: repeat(5,1fr);grid-gap: 12.5px}
.img-sp{position: relative;}
.img-sp p{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.5);opacity: 0;transition: 1s}
.img-sp:hover p{opacity: 1}
.giakm{position: absolute;top: 10px;right: 10px;width: 40px;height: 40px;line-height: 40px;text-align: center;border-radius: 50%;color: #ffffff;background: #1fb731}
.title-sp .title-main{text-align: left;margin-bottom: 0}
.title-sp{margin-bottom: 30px;position: relative;display: flex;justify-content: space-between;align-items: center;}
.title-sp:before{content: '';position: absolute;width: 100%;border-top: 2px solid #eeeeee;left: 0;bottom: -5px}
.title-sp:after{content: '';position: absolute;width: 150px;height: 5px;border-top: 1px solid #1fb731;border-bottom: 2px solid #1fb731;left: 0;bottom: -5px}
.xemtatca{font-weight: bold;font-size: 17px;}
.xemtatca a:hover{color: #1fb731}
/*spcat*/
.title-left{display: flex;align-items: center;}
.ds-spcat{padding-left: 20px}
.ds-spcat a{font-family: Roboto Medium;font-size: 16px;display: inline-block;padding: 0 20px;height: 25px;overflow-y: hidden;text-transform: uppercase;max-width: 200px}
.ds-spcat a:hover{color: #ff3711}
/*end sanpham*/

/*gioithieu*/
.bg-gioithieu{background: url(../images/img/bg-video.jpg);padding: 50px 0}
.gioithieu-left{width: calc(100% - 900px);float: left;padding-right: 110px}
.gioithieu-right{width: 900px;float: right;}
.title-gt{font-size: 19px;color: #ffffff;}
.ten-gt{font-size: 35px;color: #1fb731;font-weight: bold;}
.mota-gt{color: #ffffff;font-size: 18px;margin-top: 20px}
.boxvideo_left{width: 620px;float: left;height: 470px}
.boxvideo_right{width: calc(100% - 620px);float: right;padding-left: 10px}
.btnvideo_item{margin-bottom: 10px}
.img-video img{height: 148px;object-fit: cover;}
/*end gioithieu*/

/*tintuc*/
.img-tt .scale-img{border-radius: 10px}
.ten-tt{font-weight: bold;font-size: 17px;margin: 20px 10px 5px 10px;overflow: hidden;height: 25px}
.mota-tt{margin: 0 10px 10px 10px;color: #6a6a6a;line-height: 1.7;overflow: hidden;max-height: 72px}
.thongtin-tt{margin-top: -10px;border: 1px solid #d5d5d5;background: #ffffff;border-radius: 0 0 10px 10px;}
.thongtin-tt:hover .ten-tt{color: #1fb731}
.info-tt{padding: 10px;border-top: 1px solid #d5d5d5;display: flex;justify-content: space-between;align-items: center;}
.date-tt{color: #1fb731}

/*end tintuc*/

/*doitac*/
.doitac-zone{position: relative;}
.doitac-zone .control-doitac:hover{opacity:1;}
.control-doitac{opacity:0.8;position:absolute;z-index:2;top:calc(50% - 50px/2);width:35px;height:50px;text-align:center;line-height:50px;font-size:35px;cursor:pointer;margin:0px}
.control-doitac i{color:#454649;}
.prev-doitac{left:-35px;}
.next-doitac{right:-35px;}
/*end doitac*/

/*footer*/
#footer{margin-top: 50px;background-color: #797979;color: #ffffff}
.name-footer{font-family: Arial Black;font-size: 40px;color: #ffffff;margin-bottom: 10px}
.title-footer{font-size: 17px;color: #ffffff;position: relative;margin-bottom: 20px;color: #ffffff;font-weight: bold;}
#footer .form-control{width: 100%;height: 50px;border-radius: 50px;background: #bcbcbc;}
.newsletter-input{margin-bottom: 10px;width: 280px;float: right;}
.slogan-newsletter{margin-bottom: 20px}
.footer-box{flex: 30%}
.footer-box2{margin: 0 30px}
.footer-right{width: 315px;float: right;padding: 50px 30px 0 0;text-align: right;}
.footer-left{width: calc(100% - 315px);float: left;background: url(../images/img/bg-footer2.jpg);background-size: cover;padding: 30px 115px 30px 30px;position: relative;}
.footer-left:before{content: '';position: absolute;border-bottom: 345px solid #797979;border-left: 70px solid transparent;top: 0;right: 0}
.newsletter-button input{width: 120px;height: 50px;background: #1fb731;color: #ffffff;font-weight: bold;border: none;border-radius: 50px}
.contaner-input{text-align: right;}
.logo-foooter{text-align: center;}
.mota-footer{line-height: 1.8;max-height: 125px;overflow: hidden;font-style: italic;margin-top: 20px}
.mxh-footer{margin-top: 20px}
.mxh-footer a{margin-left: 3px}
.mxh-footer a:hover img{transform: rotateY(360deg);transition: 1s}
.chinhsach-footer a{color: #ffffff}
.chinhsach-footer a:hover{color: #ff3711}
.chinhsach-footer p{margin-bottom: 10px;position: relative;padding-left: 20px}
.chinhsach-footer p:before{content: '';position: absolute;width: 5px;height: 5px;border-radius: 50%;background: #9fa0a1;left: 0;top: calc(50% - 5px/2)}
/*.statistic span{margin-left: 20px;position: relative;}
.statistic span:first-child{margin-left: 0}
.statistic span:before{content: '';position: absolute;height: 13px;top: calc(50% - 13px/2);border-left: 1px solid;left: -12px}
.statistic span:first-child:before{display: none;}*/
.footer-bottom{padding: 20px 0;color: #ffffff;font-size: 13px;background: #797979}
.last-footer{background: #e6e6e6;padding: 30px 0;display: flex;justify-content: center;align-items: center;}
.giaohang{font-size: 18px;text-align: center;}
.last-footer > div{padding: 0 70px}
.giaohang1{position: relative;}
.giaohang1:before{content: '';position: absolute;height: 75px;border-left: 1px solid #ffffff;left: 0;top: calc(50% - 75px/2);}
.giaohang1:after{content: '';position: absolute;height: 75px;border-left: 1px solid #ffffff;right: 0;top: calc(50% - 75px/2);}
.giaohang p{margin-bottom: 10px;color: #000}
.giaohang a{margin-left: 3px}
.giaohang a:hover img{transform: rotateY(360deg);transition: 1s}
/*ajax phantrang*/
.pagination-ajax{text-align:center;margin-top: 20px}
.pagination-ajax a{display:inline-block;vertical-align:top;margin:0px 4px 4px 4px;color:#333;background:#f6f6f6;border:0;font-size:12px;cursor:pointer;padding:7px 13px;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.4)}
.pagination-ajax a.current,.pagination-ajax a:hover{background:#1fb731;color:#fff;border-color:#1fb731;}
.pagination-ajax .last,.pagination-ajax .first{display: none;}
/*btn-iframe*/
/*.js-facebook-messenger-box{bottom: 20px}
.btn-phone{bottom: 100px}
.btn-zalo{bottom: 185px}*/
/*.btn-shopee{bottom: 400px}*/


.hotline-phone-ring-wrap { position:fixed; bottom:0; left:0; z-index:999999; }
.hotline-phone-ring-wrap2{bottom: 110px}
.hotline-phone-ring { position:relative; visibility:visible; background-color:transparent; width:110px; height:110px; cursor:pointer; z-index:11; -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0); transition:visibility .5s; left:0; bottom:0; display:block; }
.hotline-phone-ring-circle {width:87px;height:87px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #f60000;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;opacity:0.5;}
.hotline-phone-ring-circle-fill {width:70px;height:70px;top:18px;left:18px;position:absolute;background-color:rgba(246,0,0,0.2);border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;}
.hotline-phone-ring-img-circle {background-color:#f60000;width:60px;height:60px;top:24px;left:24px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center;border: 2px solid #ffffff}
.hotline-phone-ring-img-circle .pps-btn-img { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; }
.hotline-phone-ring-img-circle .pps-btn-img img { width:20px; height:20px; }
.hotline-bar {position:absolute;height:40px;width:200px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all 0.8s;-webkit-transition:all 0.8s;z-index:9;box-shadow:0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);border-radius:50px !important;left:33px;bottom:37px;}
.hotline-bar > a {color:#cc0000;text-decoration:none;font-size:18px;font-weight:bold;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-weight: bold;}
.hotline-bar > a:hover, .hotline-bar > a:active { color:#fff; }@-webkit-keyframes phonering-alo-circle-anim {0% { -webkit-transform:rotate(0) scale(0.5) skew(1deg); -webkit-opacity:0.1; }30% { -webkit-transform:rotate(0) scale(0.7) skew(1deg); -webkit-opacity:0.5; }100% { -webkit-transform:rotate(0) scale(1) skew(1deg); -webkit-opacity:0.1; }}@-webkit-keyframes phonering-alo-circle-fill-anim {0% { -webkit-transform:rotate(0) scale(0.7) skew(1deg); opacity:0.6; }50% { -webkit-transform:rotate(0) scale(1) skew(1deg); opacity:0.6; }100% { -webkit-transform:rotate(0) scale(0.7) skew(1deg); opacity:0.6; }}@-webkit-keyframes phonering-alo-circle-img-anim {0% { -webkit-transform:rotate(0) scale(1) skew(1deg); }10% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); }20% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); }30% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg); }40% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); }50% { -webkit-transform:rotate(0) scale(1) skew(1deg); }100% { -webkit-transform:rotate(0) scale(1) skew(1deg); }}
.hotline-phone-ring-wrap2{bottom: 90px}
.hotline-phone-ring-img-circle i{color: #fff;font-size: 30px}

.grid-hinhanh-f{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 20px}
.left-pro-detail{background: #f7f7f7}

/*chinhsach muahang*/
.container-detail-cus{position: relative;}
.detail-left-cus{width: calc(100% - 280px);float: left;padding-right: 30px}
.detail-right-cus{width: 280px;float: right;position: sticky;top: 20px}
.chinhsach2{text-align: center;margin-bottom: 20px}
.ten-cs2{font-weight: bold;font-size: 16px;margin-top: 10px;color: #ff3711}
.mota-cs2{margin-top: 10px;height: 21px;overflow: hidden;font-size: 13px}
.title-detail-right-cus{font-weight: bold;font-size: 18px;margin-bottom: 20px}
.chinhsach2-zone{background: #e8e8e8;padding: 20px}
.img-cs2{transition: 1s}
.chinhsach2:hover .img-cs2{transform: rotateY(360deg);}
.sanpham-lienquan{margin-top: 30px}

/*.detail-news-left{width: calc(100% - 280px);float: left;padding-right: 30px}*/
/*.detail-news-right{width: 280px;float: right;position: sticky;top: 20px}*/
.tintuc-khac{margin-bottom: 20px}