@import url(content.css);
@import url(libs.css);

*{ box-sizing: border-box;}
body{ font-family: var(--web-font-family); font-size: var(--web-font-size); margin: 0; padding: 0; line-height: 1; color: #000;}
a{ color: var(--web-a-color); text-decoration: none; transition: all 0.2s; display: inline-flex; vertical-align: baseline; margin: 0; padding: 0;}
a:hover{ color: var(--web-a-color-hover);}
button, input, textarea{ font: inherit; transition: all 0.2s;}
img{ transition: all 0.2s; max-width: 100%;}
iframe{ border: 0; margin: 0; padding: 0;}


.text-red{ color: #FF0000;}
.text-bold{ font-weight: bold;}

.bg-filter{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 2; background-color: rgba(0, 0, 0, 0.3); }
.form-control{ border: 1px solid #CCC; border-radius: 5px; height: 36px; padding: 0 15px; transition: all 0.2s;}
.form-control:focus-visible{ outline: none;}
.form-control:focus{ outline: none; border-color: #999; box-shadow: none;}
textarea.form-control{ height: auto; min-height: 36px; padding: 10px 15px;}
.form-group{ margin-bottom: 15px;}
.form-group .form-control{ width: 100%;}
.form-group.has-error .form-control{ border-color: #FF0000;}
.alert{ padding: 10px 15px; border-radius: 5px; margin-bottom: 10px; display: block;}
.alert-danger { color: #842029; background-color: #f8d7da; }
.alert-success { color: #0f5132; background-color: #d1e7dd; }
.btn{ border: 0; display: inline-flex; align-items: center; justify-content: center; height: 36px; border-radius: 5px; padding: 0 15px; cursor: pointer;}
.input-group{ display: flex; align-items: center; flex-wrap: nowrap;}
.input-group>input{ flex: 1;}

.product-item{ width: 20%; border: 1px solid transparent; transition: all 0.2s; padding-bottom: 36px; position: relative;}
.product-item .image{ display: block; padding: 0 0px; text-align: center; position: relative;}
.product-item .image img{ width: 100%; padding: 0px 3px 4px 3px;}
.product-item .image .not-in-stock{ position: absolute; text-align: center; width: 100%; bottom: 0; left: 0; padding: 10px; background: rgba(68, 68, 68, 0.6); color: #FFF; text-transform: uppercase;}
.product-item .info{ padding: 20px 5px; text-align: center; position: relative;}
.product-item .info .brand{ font-size: 15px; font-weight: 700; color: #000; text-transform: uppercase;}
.product-item .info .brand:hover{color: #ff6600;}
.product-item .info .name{ margin: 3px 0 10px;}
.product-item .info .name a{color: #000; height: 37px; font-weight: 500; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; font-family: Roboto, sans-serif;}
.product-item .info .name a:hover{color: #ff6600;}
.product-item .info .price{ margin: 10px 0 0; min-height: 43px;}
.product-item .info .price span{ color: #fc2330; display: block; font-size: 16px; letter-spacing: 0.5px; line-height: 21px;}
.product-item .info .price s{ font-size: 13px; letter-spacing: 0.5px; height: 21px;}
.product-item .info .percent{ position: absolute; top: 15px; left: 5px; color: #fff; padding: 5px; border-radius: 5px; background-color: #ff6600; font-weight: 700; font-size: 12px;}
.product-item .info .gift{ position: absolute; top: -15px; right: 5px; color: #fc2330; font-size: 12px; text-transform: uppercase; text-align: center;}
.product-item .info .gift img{ height: 26px; width: auto; display: inline; margin-bottom: 6px;}
.product-item .info .gift span{ display: block;font-size: 12px}
.product-item .btn-buy{ opacity: 0; transition: all 0.2s; background-color: #ff6600; text-transform: uppercase; color: #FFF; width: 100%; height: 38px; font-size: 15px; padding: 0 15px; border: 0; border-radius: 0; position: absolute; bottom: 0; left: 0;}
.product-item .btn-buy img{ width: 75px;}
.product-item .thumbs{ margin: 4px; opacity: 0; transition: all 0.2s; min-height: 63px;}
.product-item .thumbs .owl-item a{ border: 1px solid transparent; padding: 1px; transition: all 0.2s;}
.product-item .thumbs .owl-item:hover a{ border-color: #DDD;}
.product-item .thumbs .owl-carousel .owl-nav div{ width: 10px; background-size: 10px auto;}
.product-item .thumbs .owl-carousel .owl-nav .owl-prev{ left: 0; -webkit-mask: url(../images/svgs/solid/chevron-left.svg) no-repeat 50% 50%; mask: url(../images/svgs/solid/chevron-left.svg) no-repeat 50% 50%; background-color: #666;}
.product-item .thumbs .owl-carousel .owl-nav .owl-next{ right: 0; -webkit-mask: url(../images/svgs/solid/chevron-right.svg) no-repeat 50% 50%; mask: url(../images/svgs/solid/chevron-right.svg) no-repeat 50% 50%; background-color: #666;}
.product-item:hover{ border-color: #DDD;}
.product-item:hover .btn-buy{ opacity: 1;}
.product-item:hover .thumbs{ opacity: 1;}

.articles-item{ display: flex; padding: 20px 0; margin-bottom: 10px; border-bottom: 1px solid #DDD;}
.articles-item .image{ width: 206px;}
.articles-item .image img{ width: 100%;}
.articles-item .info{ flex: 1; padding-left: 20px;}
.articles-item .info .name{ display: block; font-size: 18px; margin: 0 0 12px; font-weight: bold;}
.articles-item .info .name a{ color: #000; font-size: 18px;}
.articles-item .info .name a:hover{ color: #ff6600;}
.articles-item .info .date{ font-size: 14px; font-style: italic; color: #808080; display: none;}
.articles-item .info .desc{ margin-top: 5px; line-height: 20px; text-align: justify;}

.box-top{ background-color: #00558b; border-bottom: 1px solid #FFF; color: #FFF;}
.box-top a{ color: #FFF;}
.box-top a:hover{ color: #ff6600;}
.box-top .container{ height: 34px; line-height: 35px; display: flex; align-items: center; justify-content: space-between;}
.box-top .hotline{ display: flex;}
.box-top .hotline i{ margin-right: 7px; margin-top: -1px; line-height: 100%;}
.box-top .hotline i::before{ width: 14px; height: 14px; background-color: #FFF; margin-top: 10px;}
.box-top .hotline span{ padding: 0 5px;}

.box-header{ background-color: #199fda; color: #FFF; border-bottom: 2px solid #00558b; padding: 20px 0 20px;}
.box-header .container{ display: flex; align-items: center; justify-content: space-between;}
.box-header .logo{ padding: 0; width: 300px; max-width: 100%;}
.box-header .logo h1{ margin: 0; padding: 0; display: flex;}
.box-header .logo a{ display: inline-flex;}
.box-header .logo img{ height: 61px;}
.box-header .search{ width: 440px; max-width: 100%; position: relative; margin: -7px 0 0 30px;}
.box-header .search .input-group{ border-radius: 5px; overflow: hidden; box-shadow: 3px 3px 5px #006099;}
.box-header .search .input-group input{ border: 0; height: 40px; border-radius: 0; padding: 0 12px;}
.box-header .search .input-group button{ border: 0; height: 40px; width: 50px; background-color: #ff6600; border-radius: 0;}
.box-header .search .input-group button i::before{ background-color: #FFF; width: 16px; height: 16px;}
.box-header .search .search-result{ display: none; position: absolute; top: 50px; left: 0; width: 100%; background-color: #FFF; padding: 5px 15px; border-radius: 5px; z-index: 9999; box-shadow: 0 0 5px #999;}
.box-header .search .search-result .item{ display: flex; padding: 10px 0; border-bottom: 1px solid #EEE;}
.box-header .search .search-result .item:hover{background: #eee}
.box-header .search .search-result .item:last-child{ border: 0;}
.box-header .search .search-result .item .image{ width: 60px;}
.box-header .search .search-result .item .image img{ width: 100%;}
.box-header .search .search-result .item .info{ flex: 1; padding-left: 10px;}
.box-header .search .search-result .item .info .name{ margin: 0; font-size: 14px;color:#333}
.box-header .search .search-result .item .info .name a{ color: #333;}
.box-header .search .search-result .item .info .price{ margin: 5px 0 0;}
.box-header .search .search-result .item .info .price span{ color: #ff6600; margin-right: 10px; font-size: 16px; letter-spacing: 0.5px;}
.box-header .search .search-result .item .info .price s{ color: #666; font-size: 14px; letter-spacing: 0.5px;}
.box-header .menu{ display: flex; margin-top: -12px; margin-right: 30px;}
.box-header .menu .item{ width: 75px; padding: 5px 0 5px 50px; line-height: 20px; box-sizing: content-box; margin-left: 20px;}
.box-header .menu .item.ship{ background: url(../images/ship-hang.png) no-repeat left center; padding-left: 65px;}
.box-header .menu .item.cert{ background: url(../images/chinh-hang.png) no-repeat left center;}
.box-header .product-cart{ display: flex; cursor: pointer; margin-top: -11px;}
.box-header .product-cart .icon{ height: 40px; width: 36px; background-color: #005689; display: flex; align-items: center; justify-content: center;}
.box-header .product-cart .icon i::before{ background-color: #FFF; width: 20px; height: 20px;}
.box-header .product-cart .info { background-color: #007dc9; text-align: center; padding: 0 10px; height: 40px; white-space: nowrap;}
.box-header .product-cart .info p{ margin: 0; line-height: 14px;}
.box-header .product-cart .info p.amount{ font-weight: bold; color: #ff6600; font-size: 18px; line-height: 100%; margin-top: 4px;}
.box-header .product-cart-fixed{ z-index: 999; position: fixed; bottom: 230px; right: 23px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background-color: #ff6600; color: #FFF; border-radius: 50%;}
.box-header .product-cart-fixed .amount{ position: absolute; top: -5px; left: -5px; min-width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; background-color: #ff6600; border: 1px solid #FFF; color: #FFF; border-radius: 50%;}
.box-header .product-cart-fixed i::before{ background-color: #FFF; width: 20px; height: 20px;}

.box-menu-top ul{ display: flex; list-style: none; margin: 0; padding: 0;}
.box-menu-top ul li{ margin-left: 50px;}

.box-menu-main{ background-color: #199fda;}
.box-menu-main .box-content{ position: relative;}
.box-menu-main .box-content>ul{ display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0;}
.box-menu-main .box-content>ul>li>a{ color: #000; text-transform: uppercase; font-weight: bold; font-size: 17px; padding: 12px 22px 10px 21px; display: block;}
.box-menu-main .box-content>ul>li:last-child{ margin-left: auto;}
.box-menu-main .box-content>ul>li:last-child>a{color: #FFF;padding-right: 0}
.box-menu-main .box-content>ul>li:nth-last-child(2)>a{ color: #FFF;}
.box-menu-main .box-content>ul>li:first-child>a{ padding-left: 0;}
.box-menu-main .box-content>ul>li:hover>a{ color: #FFF;}
.box-menu-main .box-content>ul>li:hover>ul{ display: flex;}
.box-menu-main .box-content>ul>li>ul{display: none; justify-content: space-between; position: absolute; top: 38px; left: 0; width: 1170px; max-width: 100%; background-color: #FFF; box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%); list-style: none; margin: 0; padding: 20px; z-index: 1000;}
.box-menu-main .box-content>ul>li>ul>li>a{ text-transform: uppercase; border-bottom: 2px solid #d3d3d3; color: #000; font-weight: 900; padding: 0 0 5px;}
.box-menu-main .box-content>ul>li>ul>li>a.image>span{ display: none;}
.box-menu-main .box-content>ul>li>ul>li>h3{ text-transform: uppercase; border-bottom: 2px solid #d3d3d3; color: #000; font-weight: 900; padding: 0 0 5px; margin: 0;}
.box-menu-main .box-content>ul>li>ul>li>ul{ margin: 0; padding: 10px 0; list-style: none;}
.box-menu-main .box-content>ul>li>ul>li>ul>li>a{ padding: 6px 0; color: #666666;}
.box-menu-main .box-content>ul>li>ul>li>ul>li>a:hover{ color: #ff6600; text-decoration: underline;}
.box-menu-main .box-content>ul>li>ul>li:last-child>a{ padding: 0; border: 0;}

.box-slider{ margin: 15px 0 16px;}
.box-slider .owl-nav{ opacity: 0; transition: all 0.15s;}
.box-slider .owl-dots{ opacity: 0; transition: all 0.15s;}
.box-slider:hover .owl-nav{ opacity: 1;}
.box-slider:hover .owl-dots{ opacity: 1;}

.box-articles-home{ background-color: #dedede; padding: 30px 0 10px;}
.box-articles-home .box-title{ text-align: center; position: relative;}
.box-articles-home .box-title::after{ content: ""; height: 1px; width: 100%; background-color: #CCC; position: absolute; left: 0; top: 50%; margin-top: -1px; z-index: 1;}
.box-articles-home .box-title .title{ text-transform: uppercase; font-size: 20px; font-weight: normal; padding: 0 15px; position: relative; z-index: 2; background-color: #dedede; display: inline;}
.box-articles-home .box-title .title a{font-size: 20px; color: #000;}
.box-articles-home .box-content{ padding-top: 30px; display: flex; flex-wrap: wrap;}
.box-articles-home .item{ margin-bottom: 20px; padding: 20px; width: 25%; border: 1px solid transparent; transition: all 0.2s;}
.box-articles-home .item .image{ display: flex; overflow: hidden; height: 175px; position: relative;}
.box-articles-home .item .image img{ width: 100%; height: auto; transition: all 0.5s; position: absolute; top: 50%; left: 0; margin-top: -95px;}
.box-articles-home .item .info .title{ text-transform: uppercase; height: 40px; overflow: hidden; margin: 10px 0 0; font-size: 14px; line-height: 1.5;}
.box-articles-home .item .info .title a{color: #333}
.box-articles-home .item .info .desc{ color: #333; line-height: 22px; height: 65px; overflow: hidden; margin: 10px 0 0;}
.box-articles-home .item:hover{ border-color: #AAA;}
.box-articles-home .item:hover .image img{ transform: scale(1.1);}

.box-articles-right{ margin-top: 30px;}
.box-articles-right .box-title{ font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 12px 15px 10px; background-color: #e6e7e8;}
.box-articles-right .box-content{ padding: 15px; border: 2px solid #e6e7e8;}
.box-articles-right .box-content .item{ display: flex; margin-bottom: 11px; padding-bottom: 10px; border-bottom: 1px solid #EEE;}
.box-articles-right .box-content .item:last-child{ margin: 0; border: 0; padding: 0;}
.box-articles-right .box-content .item .image{ width: 70px;}
.box-articles-right .box-content .item .image img{ width: 100%; border-radius: 3px;}
.box-articles-right .box-content .item .info{ flex: 1; padding-left: 10px;}
.box-articles-right .box-content .item .info .name{ margin: 0; font-size: 14px;}
.box-articles-right .box-content .item .info .name a{ color: #333;}
.box-articles-right .box-content .item .info .view{ margin: 5px 0 0;}
.box-articles-right .box-content .item .info .view a{ font-style: italic; font-size: 14px; font-weight: bold; color: #aeaeae; text-decoration: underline;}
.box-articles-right .box-content .item .info .view a:hover{ color: #333;}
.box-articles-right .box-content .item .info .view i{ margin: 1px 0 0 4px;}
.box-articles-right .box-content .item .info .view i::before{ background-color: #aeaeae; width: 9px;}

.box-articles-highlight{ margin-bottom: 30px; border: 2px solid #cdcecf;}
.box-articles-highlight .box-title{ font-size: 17px; font-weight: bold; text-transform: uppercase; padding: 12px 10px 10px; background-color: #e6e7e8;}
.box-articles-highlight .box-title .title{ margin: 0; font-size: 17px;}
.box-articles-highlight .box-content{ padding: 10px; border-top: 2px solid #cdcecf;}
.box-articles-highlight .box-content .item{ border: 0; padding: 0; margin-bottom: 10px;}
.box-articles-highlight .box-content .item:last-child{ margin: 0;}
.box-articles-highlight .box-content .item .image{ width: 150px;}
.box-articles-highlight .box-content .item .info{ padding-left: 10px;}
.box-articles-highlight .box-content .item .info .name{ font-size: 14px; line-height: 18px; margin-bottom: 5px;}
.box-articles-highlight .box-content .item .info .date{ display: none;}
.box-articles-highlight .articles-item .info .name a{ font-size: 14px; line-height: 18px; margin-bottom: 5px;}

.box-articles-new{ margin-bottom: 30px;}
.box-articles-new .box-title{ font-size: 17px; font-weight: bold; text-transform: uppercase; padding: 12px 10px 10px; background-color: #e6e7e8;}
.box-articles-new .box-title .title{ margin: 0; font-size: 17px;}
.box-articles-new .box-content{ padding: 10px; border: 2px solid #e6e7e8;}
.box-articles-new .box-content .item{ border: 0; padding: 0; margin-bottom: 10px;}
.box-articles-new .box-content .item:last-child{ margin: 0;}
.box-articles-new .box-content .item .image{ width: 150px;}
.box-articles-new .box-content .item .info{ padding-left: 10px;}
.box-articles-new .box-content .item .info .name{ font-size: 14px; line-height: 18px; margin-bottom: 5px;}
.box-articles-new .articles-item .info .name a{ font-size: 14px; line-height: 18px; margin-bottom: 5px;}

.box-articles-other{ margin-top: 30px; margin-bottom: 30px;}
.box-articles-other .box-title{ border-bottom: 2px solid #7a7a7a; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: flex-end;}
.box-articles-other .box-title .title{ position: relative; color: #000; font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 7px 0px;}
.box-articles-other .box-title .title::after{ content: ""; position: absolute; width: 50%; height: 3px; background-color: #000; bottom: -1px; left: 0;}
.box-articles-other .box-title .title a{ color: #000;}
.box-articles-other .box-title .title a:hover{ color: #ff6600;}
.box-articles-other .box-title .view-all{ font-weight: bold; font-size: 16px; font-style: italic; color: #000; align-items: center; margin-bottom: 3px;}
.box-articles-other .box-title .view-all:hover{ color: #ff6600;}
.box-articles-other .box-title .view-all:hover i::before{ background-color: #ff6600;}
.box-articles-other .box-title .view-all i{ margin-left: 2px;}
.box-articles-other .box-title .view-all i::before{ height: 10px;}
.box-articles-other .item{ padding: 10px 0; margin-bottom: 10px;}
.box-articles-other .item:last-child{ border: 0;}
.box-articles-other .item .image{ width: 130px;}
.box-articles-other .item .info .name{ text-transform: uppercase; margin-bottom: 10px;}

.box-product-home{ padding: 0 0 10px;}
.box-product-home .box-title{ text-align: center; position: relative;}
.box-product-home .box-title::after{ content: ""; height: 2px; width: 100%; background-color: #DDD; position: absolute; left: 0; top: 50%; margin-top: -1px; z-index: 1;}
.box-product-home .box-title .title{ text-transform: uppercase; font-size: 20px; letter-spacing: 2px; font-weight: normal; padding: 0 15px; position: relative; z-index: 2; background-color: #FFF; display: inline;}
.box-product-home .box-title .title a{ text-transform: uppercase; font-size: 20px; letter-spacing: 2px; color: #000;}
.box-product-home .box-content{ padding-top: 20px; display: flex; flex-wrap: wrap;}

.box-product-top{ margin-top: 30px;}
.box-product-top .box-title{ font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 12px 15px 10px; background-color: #e6e7e8;}
.box-product-top .box-content{ padding: 12px 8px; border: 2px solid #e6e7e8;}
.box-product-top .box-content .item{ display: flex; margin-bottom: 10px;}
.box-product-top .box-content .item:last-child{ margin: 0;}
.box-product-top .box-content .item .image{ width: 80px;}
.box-product-top .box-content .item .image img{ width: 100%;}
.box-product-top .box-content .item .info{ flex: 1; padding-left: 10px;}
.box-product-top .box-content .item .info .name{ margin: 0; font-size: 14px;color:#333}
.box-product-top .box-content .item .info .name a{ color: #333;}
.box-product-top .box-content .item .info .price{ margin: 5px 0 0;}
.box-product-top .box-content .item .info .price s{ color:#333;}
.box-product-top .box-content .item .info .price span{ color: #ff6600; display: block; font-size: 16px; letter-spacing: 0.5px;}

.box-product-other{ margin-top: 30px;}
.box-product-other .box-title{ border-bottom: 2px solid #7a7a7a; display: flex; margin-bottom: 15px; justify-content: space-between; align-items: flex-end;}
.box-product-other .box-title .title{ position: relative; color: #000; font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 7px 0px;}
.box-product-other .box-title .title::after{ content: ""; position: absolute; width: 50%; height: 3px; background-color: #000; bottom: -1px; left: 0;}
.box-product-other .box-title .title a{ color: #000; font-size: 16px;}
.box-product-other .box-title .title a:hover{ color: #ff6600;}
.box-product-other .box-title .view-all{ font-weight: bold; font-size: 16px; font-style: italic; color: #000; align-items: center; margin-bottom: 3px;}
.box-product-other .box-title .view-all:hover{ color: #ff6600;}
.box-product-other .box-title .view-all:hover i::before{ background-color: #ff6600;}
.box-product-other .box-title .view-all i{ margin-left: 2px;}
.box-product-other .box-title .view-all i::before{ height: 10px;}
.box-product-other .box-content{ display: flex;}

.box-social{ padding: 30px 0;}
.box-social .box-title{ text-transform: uppercase; font-size: 27px; text-align: center; margin: 0; letter-spacing: 1.5px;}
.box-social .box-content{ display: flex; flex-wrap: wrap; padding: 40px 0 0;}
.box-social .box-content .item{ width: 25%; text-align: center; border-left: 1px solid #DDD;}
.box-social .box-content .item:first-child{ border: 0;}
.box-social .box-content .item .image img{ border-radius: 7px; width: 40px;}
.box-social .box-content .item .title{ margin: 15px 0;}

.box-contact{ background-color: #ff6600; padding: 16px 0;}
.box-contact .container{ width: 1100px; max-width: 100%;}
.box-contact .box-content{ display: flex; justify-content: space-between;}
.box-contact .item{ padding-left: 60px; margin: 0 15px; max-width: 320px;}
.box-contact .item .text{ font-size: 18px; text-transform: uppercase; text-align: center; line-height: 100%; padding-top: 7px;}
.box-contact .item .phone{ color: #000; font-size: 36px; font-weight: bold; text-align: center; display: block; line-height: 100%;}
.box-contact .item.buy{ background: url(../images/icon-buy.png) no-repeat left top; background-size: 50px auto;}
.box-contact .item.feedback{ background: url(../images/icon-kn.png) no-repeat left top; background-size: 50px auto;}
.box-contact .item.form{ width: 340px; padding: 0; margin: 0;}
.box-contact .item.form .text{ text-align: left; color: #FFF; font-size: 24px; margin-bottom: 3px; padding-top: 0;}
.box-contact .item.form .form-control{ border: 0; border-radius: 5px 0 0 5px; height: 38px;}
.box-contact .item.form .btn{ border-radius: 0 5px 5px 0; background-color: #000; color: #FFF; height: 38px; padding: 0 26px; outline: none;}

.box-brand{ padding: 35px 0 50px; background-color: #f2f2f2;}
.box-brand .box-title{ text-align: center; margin-bottom: 20px;}
.box-brand .box-title .title{ text-transform: uppercase; margin: 0; padding: 0; font-size: 25px; font-family: Roboto, sans-serif;}
.box-brand .item{ background-color: #ffffff; border-radius: 5px; text-align: center; display: block; overflow: hidden; padding: 10px;}
.box-brand .owl-carousel .owl-nav div{ width: 30px; background-size: 30px auto; opacity: 0; transition: all 0.15s;}
.box-brand .owl-carousel .owl-nav .owl-next{ right: 0;}
.box-brand .owl-carousel .owl-nav .owl-prev{ left: 0;}
.box-brand:hover .owl-carousel .owl-nav div{ opacity: 1;}

.box-customer{ padding: 35px 0 35px; background-color: #ffffff;}
.box-customer .item{ background-color: #ffffff; border-radius: 5px; text-align: center; display: block; overflow: hidden; transition: all 0.15s;}
.box-customer .owl-carousel .owl-nav div{ width: 30px; background-size: 30px auto; opacity: 0; transition: all 0.15s;}
.box-customer .owl-carousel .owl-nav .owl-next{ right: 0;}
.box-customer .owl-carousel .owl-nav .owl-prev{ left: 0;}
.box-customer:hover .owl-carousel .owl-nav div{ opacity: 1;}

.box-footer .box-title{ font-size: 16px; text-transform: uppercase; margin: 0 0 15px;}
.box-footer .box-content{ border-top: 3px solid #ff6600; padding: 20px 0 10px; display: flex; flex-wrap: wrap;}
.box-footer .info{ width: 430px; max-width: 100%;}
.box-footer .info .item{ margin-bottom: 15px; position: relative; padding-left: 15px;}
.box-footer .info .item::before{ content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; background-color: #000; border-radius: 50%;}
.box-footer .info .item b{ display: block; font-size: 16px; margin-bottom: 5px;}
.box-footer .info .item b span{ color: #FF0000; font-size: 16px;}
.box-footer .menu{ flex: 1;}
.box-footer .menu>ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;}
.box-footer .menu>ul>li{ flex: 1; padding-left: 40px;}
.box-footer .menu>ul>li>ul{ margin: 0; padding: 0; list-style: none;}
.box-footer .menu>ul>li>ul>li>a{ color: #000; line-height: 26px;}
.box-footer .menu>ul>li>ul>li>a.image>span{ display: none;}
.box-footer .social .content{ display: flex; align-items: center; gap: 8px;}
.box-footer .social .content .item img{ height: 34px; border-radius: 3px;}

.box-copyright{ padding: 0 0 20px;}
.box-copyright *{ font-size: 12px; color: #999;}
.box-copyright span{ color: #FF0000;}
.box-copyright .row{ align-items: center;}
.box-copyright .cert{ text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 5px;}
.box-copyright .cert img{ height: 30px;}
.box-copyright .cert img.img-1{ height: 46px;}

.page-breadcrumbs ul{ list-style: none; margin: 0; padding: 15px 0; display: flex; flex-wrap: wrap;}
.page-breadcrumbs ul li{ padding: 0 20px 0 10px; position: relative; font-size: 15px;}
.page-breadcrumbs ul li::before{ content: ""; position: absolute; top: 50%; right: 0; margin-top: -4px; width: 8px; height: 8px; background: url(../images/svgs/light/chevron-right.svg) no-repeat center center; opacity: 0.8;}
.page-breadcrumbs ul li:first-child{ padding-left: 0;}
.page-breadcrumbs ul li:last-child{ padding-right: 0;}
.page-breadcrumbs ul li:last-child::before{ display: none;}
.page-breadcrumbs ul li a{ color: #000; font-size: 15px;}
.page-breadcrumbs ul li a:hover{ color: #ff6600;}

.page-product .container{ margin-bottom: 20px}
.page-product .page-menu{ margin-bottom: 20px;}
.page-product .category-banner{ margin-bottom: 20px;}
.page-product .category-banner img{ width: 100%;}
.page-product .filter-category{ overflow-x: auto; white-space: nowrap; padding-bottom: 15px;}
.page-product .filter-category .item{display: inline-flex; flex-direction: column; margin-right: 20px; align-items: center; position: relative;}
.page-product .filter-category .item img{width: 85px;    border: solid 1px #e0e0e0;    padding: 2px;    border-radius: 10%;    margin-bottom: 8px;}
.page-product .filter-category .item span{ color: #333; white-space: normal; display: block; text-align: center; margin-top: 5px;}
.page-product .filter-category .item .arrow-filter { display: none; width: 27px; height: 14px; bottom: -15px; left: 50%; margin-left: -13px; position: absolute; z-index: 4; overflow: hidden; }
.page-product .filter-category .item .arrow-filter::before { content: ""; position: absolute; width: 27px; height: 27px; background: #fff; transform: rotate(45deg); top: 10px; left: 0; box-shadow: 0px 0px 1px 0px; }
.page-product .filter-category .item.active span{ color: #ff6600;}
.page-product .filter-category .item.active .arrow-filter{ display: block;}
.page-product .filter-category.no-url{ margin-bottom: 15px;}
.page-product .filter-category.no-url .item.active .arrow-filter{ display: none;}
.page-product .filter-url{ overflow-x: auto; white-space: nowrap; margin-bottom: 15px; padding-bottom: 10px; padding: 10px; border: 1px solid #EEE; z-index: 3; margin-top: -1px; border-radius: 5px;}
.page-product .filter-url .item{ background-color: #fff; border: 1px solid #e0e0e0; color: #333; border-radius: 4px; cursor: pointer; padding: 9px 10px 8px; margin-right: 10px;}
.page-product .filter-url .item.active{ border-color: #ff6600; color: #ff6600;}
.page-product .filter-all { display: flex; margin-bottom: 20px; padding-bottom: 10px; white-space: nowrap; position: relative;}
.page-product .filter-all .all-title{ margin-right: 10px; background: url('../images/icon-filter.svg') no-repeat 7px center #fff; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; padding: 9px 10px 8px 30px; position: relative; z-index: 999;}
.page-product .filter-all .all-title .total{ display: none; background-color: #ff6600; color: #FFF; height: 16px; min-width: 16px; font-size: 12px; padding: 0 2px; text-align: center; line-height: 16px; position: absolute; top: -8px; right: 0px; border-radius: 50%;} 
.page-product .filter-all .all-title .arrow-filter { display: none; width: 27px; height: 14px; top: 30px; left: 25px; position: absolute; z-index: 4; overflow: hidden; }
.page-product .filter-all .all-title .arrow-filter::before { content: ""; position: absolute; width: 27px; height: 27px; background: #fff; transform: rotate(45deg); top: 10px; left: 0; box-shadow: -2px -2px 5px -4px; }
.page-product .filter-all .all-button{ display: none; background-color: #fff; box-shadow: 0 -4px 8px rgba(0,0,0,.05); font-size: 0; margin: 8px 0 0; padding: 8px 10px; text-align: center;}
.page-product .filter-all .filter-sort{ margin-left: auto;}
.page-product .filter-all .filter-sort select{ height: 33px;}
.page-product .filter-other { white-space: nowrap;}
.page-product .filter-other .all-other{ padding: 0;}
.page-product .filter-other .all-other .list-active{ display: none;}
.page-product .filter-other .all-header{ display: none; text-align: right; border-bottom: 1px solid #e0e0e0; padding: 12px 7px; margin-bottom: 5px; position: sticky; top: 0px; background: white; }
.page-product .filter-other .all-header .btn{ padding: 2px 15px; height: 30px;}
.page-product .filter-other .other{ margin-right: 10px; position: relative; display: inline-block;}
.page-product .filter-other .other .title{ background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; padding: 9px 10px 8px; position: relative; z-index: 99;}
.page-product .filter-other .other .title span{ padding-right: 12px; position: relative;}
.page-product .filter-other .other .title span::before{ border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333; content: ''; height: 0; position: absolute; top: 6px; right: 0; width: 0;}
.page-product .filter-other .other .title span.text-selected{ display: none;}
.page-product .filter-other .other .title .arrow-filter { display: none; width: 27px; height: 14px; top: 30px; left: 25px; position: absolute; z-index: 4; overflow: hidden; }
.page-product .filter-other .other .title .arrow-filter::before { content: ""; position: absolute; width: 27px; height: 27px; background: #fff; transform: rotate(45deg); top: 10px; left: 0; box-shadow: -2px -2px 5px -4px; }
.page-product .filter-other .other .content{ display: none; background-color: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.5); border-radius: 4px; width: 600px; max-width: 600px; min-width: 400px; width: max-content; left: 0; position: absolute; padding: 10px 10px 0 10px; top: 44px; white-space: normal; z-index: 3;}
.page-product .filter-other .other .content .arrow-close{ display: none; position: absolute; width: 24px; height: 24px; top: 5px; right: 5px; border-radius: 50%; border: 1px solid #CCC; background: url(../images/svgs/solid/xmark.svg) no-repeat center center; background-size: 10px; opacity: 0.6; cursor: pointer; }
.page-product .filter-other .other .content .filter-list{ display: flex; flex-wrap: wrap;}
.page-product .filter-other .other .content .filter-list .item{ cursor: pointer; align-items: center; border: 1px solid #e0e0e0; border-radius: 4px; color: #333; display: flex; font-size: 14px; justify-content: center; line-height: 17px; margin-bottom: 10px; margin-right: 10px; padding: 7px 9px;}
.page-product .filter-other .other .content .filter-list .item i{ margin-left: 3px;}
.page-product .filter-other .other .content .filter-list .item.active{ border-color: #ff6600;}
.page-product .filter-other .other .content .filter-button{background-color: #fff; box-shadow: 0 -4px 8px rgba(0,0,0,.05); font-size: 0; margin: 8px -10px 0; padding: 8px 10px; text-align: center;}
.page-product .filter-other .other .content .item input{ display: none;}
.page-product .filter-other .other .content .item .color{ width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 1px #000;}
.page-product .filter-other .other .content.color{ max-width: 310px; min-width: 310px;}
.page-product .filter-other .other .content.color .item{padding: 3px; border-radius: 50%; border-color: transparent;}
.page-product .filter-other .other .content.color .item .color{ width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 1px #000;}
.page-product .filter-other .other.list-active .content .item{ border-color: #ff6600; color: #ff6600;}
.page-product .filter-other .btn-filter-close, 
.page-product .filter-other .btn-filter-readmore { border-radius: 4px; display: inline-block; font-size: 14px; line-height: 16px; margin: 0 5px; padding: 10px 0; text-align: center; width: 120px; position: relative; }
.page-product .filter-other .btn-filter-close { border: 1px solid #dd1c1a; color: #dd1c1a; }
.page-product .filter-other .btn-filter-readmore { background-color: #288ad6; color: #fff; }
.page-product .filter-all.active .all-title .arrow-filter{ display: block;}
.page-product .filter-all.active .all-title .all-header{ display: block;}
.page-product .filter-all.active .all-header{ display: block;}
.page-product .filter-all.active .all-button{ display: block;}
.page-product .filter-all.active .filter-other{ background-color: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.5); border-radius: 4px; max-width: 800px; min-width: 382px; left: 0; position: absolute; padding: 0; top: 44px; width: max-content; white-space: normal; z-index: 99; overflow: hidden;}
.page-product .filter-all.active .filter-other .all-other{max-height: 500px; overflow: auto; padding: 10px 10px 0 10px;}
.page-product .filter-all.active .filter-other .other{ display: block; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #EEE;}
.page-product .filter-all.active .filter-other .other.list-active{ display: none;}
.page-product .filter-all.active .filter-other .other .title{ border: 0; padding-bottom: 0; display: flex; justify-content: space-between;}
.page-product .filter-all.active .filter-other .other .title .arrow-filter{ display: none !important;}
.page-product .filter-all.active .filter-other .other .title span{ font-size: 15px; font-weight: 600;}
.page-product .filter-all.active .filter-other .other .title span::before{ display: none;}
.page-product .filter-all.active .filter-other .other .title span.text{ display: inline !important;}
.page-product .filter-all.active .filter-other .other .title span.text-selected{ display: none !important;}
.page-product .filter-all.active .filter-other .other .content{ display: block; position: relative; max-width: 100%; top: 0; left: 0; box-shadow: none; border: 0;}
.page-product .filter-all.active .filter-other .other .content .filter-button{ display: none;}
.page-product .filter-all.active .filter-other .other .content.color .item{ border-width: 2px;}
.page-product .filter-other .other.active .title{ border-color: #ff6600;}
.page-product .filter-other .other.active .title .arrow-filter{ display: block;}
.page-product .filter-other .other.active .content{ display: block;}
.page-product .page-wrapper{ flex: 1;}
.page-product .page-content{ display: flex; flex-wrap: wrap;}
.page-product .page-content .product-item{ width: 20%;}
.page-product .page-title{ display: flex; justify-content: space-between; margin-bottom: 2px;}
.page-product .page-title h1{ margin: 0; font-size: 18px; text-transform: uppercase;}
.page-product .page-title .form-control{ padding: 5px; height: 32px;}
.page-product .page-filter{ display: flex; flex-wrap: wrap;}
.page-product .page-filter .item{ display: flex; align-items: center; padding: 2px 7px; border-radius: 3px; white-space: nowrap; margin: 0 5px 5px 0; background-color: #F1F1F1; font-size: 18px; color: #ff6600;}
.page-product .page-filter .item.clear{ background-color: #666; font-size: 12px; color: #FFF; padding-left: 10px; padding-right: 10px;}
.page-product .page-filter .item.clear a{ color: #FFF;}
.page-product .page-filter .item i{ margin-left: 3px; cursor: pointer;}
.page-product .page-filter .item i::before{ background-color: #666;}
.page-product .page-filter .item .color{ width: 20px; height: 20px; border-radius: 3px;}
.page-product .category-description{ font-size: 15px;}
.page-product .category-description *{ font-size: 15px;line-height: 2.3}
.page-product .category-description h2{ font-size: 20px;}
.page-product .category-content{ font-size: 15px; position: relative; height: 150px; overflow: hidden;}
.page-product .category-content p{line-height: 2.5}
.page-product .category-content h2{font-size: 22px;padding: 12px 0}
.page-product .category-content h2 strong {font-size: 22px;}
.page-product .category-content *{ font-size: 15px;}
.page-product .category-content img{ max-width: 650px !important;}
.page-product .category-content-detail {    font-size: 15px; }
.page-product .category-content-detail p {    line-height: 2.5}
.page-product .category-content-detail h2 {    font-size: 22px;    padding: 12px 0}
.page-product .category-content-detail h2 strong {    font-size: 22px;}
.page-product .category-content-detail * {    font-size: 15px;}

.page-product .bg-article { background: linear-gradient(to bottom,rgba(255 255 255/0),rgba(255 255 255/62.5),rgba(255 255 255/1)); bottom: -22px; height: 105px; left: 0; position: absolute; width: 100%; margin-bottom: 3px; }
.page-product .btn-seemore{ text-align: center; display: block; margin: -22px auto 0;}
.page-product .btn-seemore span{ color: #ff6600; position: relative; padding: 0 18px; font-size: 16px; }
.page-product .btn-seemore span::before { border-bottom: 1px solid #ff6600; border-right: 1px solid #ff6600; content: ''; height: 8px; position: absolute; transform: rotate(45deg); top: 2px; right: 0; width: 8px; }
.page-product .btn-seemore.hide-content{ margin-top: 20px;}
.page-product .btn-seemore.hide-content span::before { border-bottom: 1px solid #ff6600; border-right: 1px solid #ff6600; content: ''; height: 8px; position: absolute; transform: rotate(225deg); top: 9px; right: 0; width: 8px; }
.page-product.detail{ width: 100%;}
.page-product.detail .container{ display: block;}
.page-product.detail .product-image{ position: relative; margin-top: 20px; display: flex;}
.page-product.detail .product-image::after{ content: ""; display: block; clear: both;}
.page-product.detail .product-image .image-slide{ float: left; margin-right: 10px; position: relative;}
.page-product.detail .product-image .image-slide .wrapper{ overflow: hidden; height: 500px;}
.page-product.detail .product-image .image-slide .prev{ position: absolute; left: 0; top: -18px; width: 100%; height: 18px; background: url(../images/svgs/regular/chevron-up.svg) no-repeat center center; background-size: 16px; opacity: 0.7; cursor: pointer;}
.page-product.detail .product-image .image-slide .prev:hover{ opacity: 1;}
.page-product.detail .product-image .image-slide .next{ position: absolute; left: 0; bottom: -18px; width: 100%; height: 18px; background: url(../images/svgs/regular/chevron-down.svg) no-repeat center center; background-size: 16px; opacity: 0.7; cursor: pointer;}
.page-product.detail .product-image .image-slide .next:hover{ opacity: 1;}
.page-product.detail .product-image .image-thumb{ transition: all 0.2s; display: flex; flex-direction: column; width: 58px;}
.page-product.detail .product-image .image-thumb .item{ padding: 0; margin-bottom: 5px;}
.page-product.detail .product-image .image-thumb .item img{ border: 1px solid #EEE; width: auto; height: 58px;}
.page-product.detail .product-image .image-thumb .item.video{ position: relative;}
.page-product.detail .product-image .image-thumb .item.video::after{ content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; background: url(../images/icon-play.png); background-size: 100%; border-radius: 100%;}
.page-product.detail .product-image .image-thumb .item.video img{ width: 58px;}
.page-product.detail .product-image .image-thumb .item.active img{ border: 1px solid #ff6600;}
.page-product.detail .product-image .image-zoom{ float: left; position: relative; width: 100%;}
.page-product.detail .product-image .image-zoom img{ max-height: 499px; max-width: 100%; border: 1px solid #dcdcdc;}
.page-product.detail .product-image .image-zoom .ratio{ max-width: 499px;}
.page-product.detail .product-image .image-zoom .item.video{ display: block; position: relative; width: 499px; padding-top: 499px; max-width: 499px;}
.page-product.detail .product-image .image-zoom .item.video::after{ content: ""; position: absolute; width: 70px; height: 50px; top: 50%; left: 50%; margin: -25px 0 0 -35px; background: url(../images/icon-play-youtube.png); background-size: 100%;}
.page-product.detail .product-image .image-zoom .item.video img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.page-product.detail .product-image .image-zoom div{ top: 0; left: 0; background-size: 40px !important;}
.page-product.detail .product-image .owl-carousel { padding-bottom: 30px;}
.page-product.detail .product-image .owl-carousel .owl-dots{ bottom: 0;}
.page-product.detail .product-image .owl-carousel .owl-dots .owl-dot{ width: 8px; height: 8px; background-color: #D6D6D6; margin: 5px 5px;}
.page-product.detail .product-image .owl-carousel .owl-dots .owl-dot.active{ background-color: #869791;}
.page-product.detail .product-image .owl-carousel .owl-item .item.video{ display: block; position: relative; width: 100%; padding-top: 100%;}
.page-product.detail .product-image .owl-carousel .owl-item .item.video::after{ content: ""; position: absolute; width: 70px; height: 50px; top: 50%; left: 50%; margin: -25px 0 0 -35px; background: url(../images/icon-play-youtube.png); background-size: 100%;}
.page-product.detail .product-image .owl-carousel .owl-item .item.video img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.page-product.detail .product-info{ margin-top: 20px;}
.page-product.detail .product-info .title{ font-size: 19px; color: #333; margin: 0; padding: 0;}
.page-product.detail .product-info .brand{ color: #333; font-size: 15px; font-weight: bold; margin-top: 10px; text-transform: uppercase; margin-bottom: 15px;}
.page-product.detail .product-info .brand a{ color: #ff6600;}
.page-product.detail .product-info .price{ border-top: 2px solid #e0e0e0; padding-top: 10px;}
.page-product.detail .product-info .price span{ font-size: 27px; font-weight: 700; letter-spacing: 2px; color: #ff6600;}
.page-product.detail .product-info .price s{ font-weight: 700; color: #000; margin-left: 5px; font-size: 16px;}
.page-product.detail .product-info .discount{ font-style: italic; font-size: 15px; font-weight: bold; padding-top: 15px;}
.page-product.detail .product-info .gift_content{ margin-top: 15px; padding: 15px; background-color: rgb(245 245 245); border: 1px solid #EEE; border-radius: 5px; background-image: url(/static/web/images/gift.png); background-size: 40px; background-repeat: no-repeat; padding-left: 20px; background-position: 10px;}
.page-product.detail .product-info .gift_content p{ padding-left: 40px; font-weight: bold; color:#555; font-size: 16px;}
.page-product.detail .product-info .size{ margin-top: 15px;}
.page-product.detail .product-info .size .label{ text-transform: uppercase; font-size: 15px; font-weight: bold; color: #333;}
.page-product.detail .product-info .size .list{ padding-top: 5px;}
.page-product.detail .product-info .size .list a{ display: inline-flex; height: 30px; width: 34px; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; border: 1px solid #EEE; color: #333; margin-right: 3px;padding: 15px 25px}
.page-product.detail .product-info .size .list a.active{ background-color: #ff6600; border-color: #ff6600; color: #FFF;}
.page-product.detail .product-info .size .list a:hover{ border-color: #999;}
.page-product.detail .product-info .color{ margin-top: 15px;}
.page-product.detail .product-info .color .label{ text-transform: uppercase; font-size: 15px; font-weight: bold; color: #333;}
.page-product.detail .product-info .color .list{ padding-top: 5px;}
.page-product.detail .product-info .color .list a{ margin-right: 15px;}
.page-product.detail .product-info .color .list a img{ width: 55px; border: 1px solid #EEE;}
.page-product.detail .product-info .color .list a.active img{ border-color: #ff6600;}
.page-product.detail .product-info .color .list a:hover img{ border-color: #999;}
.page-product.detail .product-info .order{ margin-top: 15px;}
.page-product.detail .product-info .order .btn{ background-color: #ff6600; text-align: center; padding: 15px; border-radius: 0; color: #FFF; width: 100%; height: auto; display: block;}
.page-product.detail .product-info .order .btn .text{ display: block; font-weight: bold; font-size: 16px; letter-spacing: 1px; margin-bottom: 2px;}
.page-product.detail .product-info .order .btn .note{ font-size: 14px;}
.page-product.detail .product-info .hotline{ text-align: center; line-height: 24px; font-size: 16px; margin-top: 20px;}
.page-product.detail .product-content{ margin-top: 40px;}
.page-product.detail .product-content .tabs-title{ border-bottom: 2px solid #7a7a7a; display: flex; margin-bottom: 15px;}
.page-product.detail .product-content .tabs-title .item{ cursor: pointer; position: relative; margin-right: 0; color: #7a7a7a; font-size: 16px; font-weight: 400; text-transform: uppercase; padding: 5px 0px; margin-right: 50px;}
.page-product.detail .product-content .tabs-title .item.active{ color: #000;}
.page-product.detail .product-content .tabs-title .item.active::after{ content: ""; position: absolute; width: 100%; height: 3px; background-color: #000; bottom: -1px; left: 0;}
.page-product.detail .product-content .tabs-content{ display: none;}
.page-product.detail .product-content .tabs-content.active{ display: block;}
.page-product.promotion .container{ display: block;}
.page-product.promotion .page-wrapper{ margin: 0;}
.page-product.promotion .page-banner{ margin-bottom: 20px;}
.page-product.promotion .page-banner img{ width: 100%;}
.page-product.promotion .page-title{ border-bottom: 3px solid #ff6600; text-transform: uppercase; font-weight: bold; padding: 0 0 10px; font-size: 18px; margin-bottom: 30px;}
.page-product.promotion .page-pagination{ justify-content: center;}
.page-product.promotion .product-item{ width: 20%;}
.page-product.search .container{ display: block;}
.page-product.search .page-wrapper{ margin: 0;}
.page-product.search .page-pagination{ justify-content: center;}
.page-product.search .product-item{ width: 20%;}

.page-articles .page-title{ margin-bottom: 20px;}
.page-articles .page-title .title{ font-size: 24px; text-transform: uppercase; line-height: 28px; margin: 0 0 20px;}
.page-articles .page-date{ font-style: italic; margin-bottom: 10px; color: #808080; display: none;}
.page-articles.detail .ck-content h2{font-size:20px;}
.page-articles.detail .ck-content h3{font-size:18px;}
.page-articles.detail .ck-content h4{font-size:16px;}
.page-articles.detail .ck-content h5{font-size:14px;}
.page-articles.detail .ck-content h6{font-size:14px;}

.page-pagination{ display: flex; justify-content: flex-end; padding: 25px 0 10px 0;}
.page-pagination ul{ display: flex; align-items: center; margin: 0; padding: 0; list-style: none;}
.page-pagination ul li{ margin-left: 5px;}
.page-pagination ul li a{ background-color: #EEE; display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 5px; border-radius: 3px; color: #333; font-size: 14px;}
.page-pagination ul li a:hover{ background-color: #DDD; color: #fc6c26;}
.page-pagination ul li i::before{ width: 10px; height: 10px; background-color: #333;}
.page-pagination ul li.text a{ padding: 0 10px;}
.page-pagination ul li.active a{ background-color: #fc6c26; color: #FFF; font-weight: bold;}
.page-pagination ul li.total{ margin-right: 20px;}
.page-pagination ul li.total span{ background-color: #EEE; display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 10px; border-radius: 3px; color: #333; font-size: 16px;}

.page-cart .page-wrapper{ width: 930px; max-width: 100%; margin: 15px auto; background-color: #fff; padding: 20px; box-shadow: 0px 0px 27px #ccc; border-radius: 5px;}
.page-cart .text-top-cart{ width: 930px; max-width: 100%; margin: 30px auto 0;}
.page-cart .text-top-cart a{ color: #ff6600; display: flex; align-items: center;}
.page-cart .text-top-cart a i::before{ background-color: #ff6600;}
.page-cart .text-footer-cart{ text-align: center; margin-bottom: 20px; font-size: 16px;}
.page-cart .total-cart{ display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid #ddd; margin: 20px 0 36px 0;}
.page-cart .total-cart .text{ color: #000; text-transform: uppercase; font-weight: bold; font-size: 18px;}
.page-cart .total-cart .price{ color: red; font-size: 22px; font-weight: bold;}
.page-cart .form .form-footer{ display: flex; justify-content: space-between;}
.page-cart .form .form-footer .btn{ color: #FFF; text-transform: uppercase; height: 45px; font-size: 16px; padding: 0 10px; width: 260px; max-width: 100%;}
.page-cart .form .form-footer .btn-back{ background-color: #199fda;}
.page-cart .form .form-footer .btn-submit{ background-color: #ff6600;}
.page-cart .products .item{ display: flex; margin-bottom: 20px;}
.page-cart .products .item .image{ width: 180px;}
.page-cart .products .item .image img{ width: 100%; border-radius: 3px; border: 1px solid #ddd; padding: 10px;}
.page-cart .products .item .info{ flex: 1; padding-left: 30px;}
.page-cart .products .item .info .name{ margin: 0 0 10px 0; padding: 0; font-size: 20px; font-weight: bold; color: #000;}
.page-cart .products .item .info .name a{ color: #000;font-size: 20px;}
.page-cart .products .item .info .name a:hover{ color: #ff6600;}
.page-cart .products .item .info .control{ display: flex; justify-content: space-between; align-items: flex-start;}
.page-cart .products .item .info .price{color: #ff6600; font-weight: bold; margin: 0;}
.page-cart .products .item .info .price span{ font-size: 22px;}
.page-cart .products .item .info .price s{ display: block; color: #999; font-weight: normal; font-size: 20px; margin-top: 2px;}
.page-cart .products .item .info .amount{ text-align: center;}
.page-cart .products .item .info .input-group{ margin-bottom: 15px;}
.page-cart .products .item .info .input-group span{ width: 34px; height: 34px; border: 1px solid #CCC; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; cursor: pointer;}
.page-cart .products .item .info .input-group input{ width: 40px; height: 34px; border-radius: 0; border-left: 0; border-right: 0; text-align: center; padding-left: 5px; padding-right: 5px;}
.page-cart .products .item .info .btn-delete{ background-color: #d9534f; color: #FFF; padding: 5px 10px; height: 30px;}
.page-cart .products .item .info .btn-delete:hover{ background-color: rgb(203, 56, 56);}
.page-cart .cart-success{ text-align: center; padding: 10px;}
.page-cart .cart-success p{ margin: 0; line-height: 22px;}
.page-cart .cart-success .status{ font-size: 24px; font-weight: bold; color: #ff6600; margin-bottom: 12px; text-transform: uppercase;}

.page-contact .contact-info ul{ margin: 10px 0 10px 20px; padding: 0; font-size: 16px;}
.page-contact .contact-info ul li{ margin-bottom: 15px; font-size: 14px;}
.page-contact .contact-info ul li b{ font-size: 16px; line-height: 24px;}
.page-contact .contact-info ul li b span{ font-size: 16px;}
.page-contact .contact-map{ margin: 30px 0;}
.page-contact .contact-map figure.media{ margin: 0;}
.page-contact .contact-map .item{ border-top: 1px solid #EEE; padding: 20px 0 30px;}
.page-contact .contact-map .item-name{ font-weight: bold; font-size: 16px; padding: 0 0 10px 0;}
.page-contact .form{ max-width: 100%; margin: 10px 0;}
.page-contact .form .control{ display: flex; justify-content: center;}
.page-contact .form .control .btn{ color: #FFF; text-transform: uppercase; height: 42px; font-size: 16px; padding: 0 15px; width: 200px; max-width: 100%;}
.page-contact .form .control .btn-submit{ background-color: #ff6600;}

.page-menu-content{ float: right; margin: 5px 0 15px 15px; border: 1px solid #999; max-width: 300px; padding: 10px 15px 5px;}
.page-menu-content a{color:#333}
.page-menu-content a:hover{color:#ff6600}
.page-menu-content .menu-title { margin-bottom: 5px;}
.page-menu-content .menu-title *{ font-size: 16px !important; font-weight: 500;}
.page-menu-content .menu-title .control span{ color: #237c3a; cursor: pointer;}
.page-menu-content .menu-content{ padding-bottom: 5px;}
.page-menu-content .menu-content *{ line-height: 1.2 !important;}
.page-menu-content .menu-content div{ position: relative; padding-left: 12px;}
.page-menu-content .menu-content div::after{ content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: #666; top: 6px; left: 0;}
.page-menu-content .menu-content .menu-h2{ margin-bottom: 10px;}
.page-menu-content .menu-content .menu-h3{ margin-bottom: 10px; margin-left: 20px;}
.page-menu-content .menu-content .menu-h4{ margin-bottom: 10px; margin-left: 40px;}
.page-menu-content .menu-content .menu-h5{ margin-bottom: 10px; margin-left: 60px;}
.page-menu-content .menu-content .menu-h6{ margin-bottom: 10px; margin-left: 80px;}


.box-menu-mobile{ background: #dfdfdf;}
.box-menu-mobile .header{ display: flex; justify-content: space-between; align-items: center;}
.box-menu-mobile .header .toggle-menu{ padding: 5px 10px; cursor: pointer;}
.box-menu-mobile .header .toggle-menu i{ margin-top: 3px;}
.box-menu-mobile .header .toggle-menu i::before{ background-color: #ff6600; width: 30px; height: 30px;}
.box-menu-mobile .header .search{ flex: 1; max-width: 100%; position: relative; padding: 0 10px 0 0;}
.box-menu-mobile .header .search .input-group{ overflow: hidden;}
.box-menu-mobile .header .search .input-group input{ border: 0; height: 30px; border-radius: 0; font-size: 13px; transition: none;}
.box-menu-mobile .header .search .input-group button{ border: 0; height: 30px; width: 40px; background-color: #ff6600; border-radius: 0; transition: none;}
.box-menu-mobile .header .search .input-group button i::before{ background-color: #FFF; width: 14px; height: 14px;}
.box-menu-mobile .header .search .search-result{ display: none; position: absolute; top: 35px; left: 0; width: calc(100% - 10px); background-color: #FFF; padding: 5px 15px; border-radius: 5px; z-index: 9999; box-shadow: 0 0 5px #999;}
.box-menu-mobile .header .search .search-result .item{ display: flex; padding: 10px 0; border-bottom: 1px solid #EEE;}
.box-menu-mobile .header .search .search-result .item:last-child{ border: 0;}
.box-menu-mobile .header .search .search-result .item .image{ width: 60px;}
.box-menu-mobile .header .search .search-result .item .image img{ width: 100%;}
.box-menu-mobile .header .search .search-result .item .info{ flex: 1; padding-left: 10px; display: block;}
.box-menu-mobile .header .search .search-result .item .info .name{ margin: 0; font-size: 14px;color:#333}
.box-menu-mobile .header .search .search-result .item .info .name a{ color: #333;}
.box-menu-mobile .header .search .search-result .item .info .price{ margin: 5px 0 0;}
.box-menu-mobile .header .search .search-result .item .info .price span{ color: #ff6600; margin-right: 10px; font-size: 16px; letter-spacing: 0.5px;}
.box-menu-mobile .header .search .search-result .item .info .price s{ color: #666; font-size: 14px; letter-spacing: 0.5px;}
.box-menu-mobile .header .logo{ display: none;}
.box-menu-mobile .header .product-cart{ display: none;}
.box-menu-mobile .header .close-menu{ display: none;}
.box-menu-mobile .menu{ display: none;}
.box-menu-mobile .info{ display: none;}
.box-menu-mobile.open{ position: fixed; top: 0; left: 0; width: 100%; height: calc(100% - 55px); border-bottom: 1px solid #DDD; overflow-y: scroll; background-color: #FFF; z-index: 9999;}
.box-menu-mobile.open .header { background-color: #199fda; padding: 10px 10px;}
.box-menu-mobile.open .header .toggle-menu{ display: none;}
.box-menu-mobile.open .header .logo{ display: flex; width: 120px;}
.box-menu-mobile.open .header .logo img{ height: auto; width: 120px;}
.box-menu-mobile.open .header .product-cart{ display: flex; align-items: center; position: relative; margin: 0 10px;}
.box-menu-mobile.open .header .product-cart i::before{ background-color: #FFF; width: 20px; height: 20px;}
.box-menu-mobile.open .header .product-cart .amount{ display: none; font-weight: bold; color: #ff6600; font-size: 18px; line-height: 100%; position: absolute; top: -6px; right: -6px;}
.box-menu-mobile.open .header .close-menu{ display: inline-flex;}
.box-menu-mobile.open .header .close-menu::before{ background-color: #FFF; width: 24px; height: 24px;}
.box-menu-mobile.open .header .search{ margin: 0 10px; padding: 0; background: #FFF; display: block; flex: auto; border-radius: 3px;}
.box-menu-mobile.open .header .search .input-group{ width: 100%;}
.box-menu-mobile.open .header .search .input-group input{ width: 100%; padding: 0 5px; background: none;}
.box-menu-mobile.open .header .search .input-group button{ width: 30px; background: none;}
.box-menu-mobile.open .header .search .input-group button i::before{ background-color: #CCC;}
.box-menu-mobile.open .header .search .search-result{ position: fixed; top: 50px; left: 10px; width: calc(100% - 20px);}
.box-menu-mobile.open .menu{ display: block;}
.box-menu-mobile.open .menu ul{ list-style: none; margin: 0; padding: 0;}
.box-menu-mobile.open .menu>ul>li{ position: relative; border: 0; border-bottom: 1px solid #DDD; padding: 10px 15px 8px; border-radius: 0; display: block;}
.box-menu-mobile.open .menu>ul>li>a{ display: flex; width: 100%; align-items: center; gap: 14px; color: #333; font-size: 16px; text-transform: uppercase;}
.box-menu-mobile.open .menu>ul>li>a>img{ height: 34px;}
.box-menu-mobile.open .menu>ul>li>a>span{ font-size: 16px; color: #333;}
.box-menu-mobile.open .menu>ul>li>ul{ display: none; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; padding-top: 5px;}
.box-menu-mobile.open .menu>ul>li>ul.show{ display: flex;}
.box-menu-mobile.open .menu>ul>li>ul>li{ width: 25%; padding: 11px;}
.box-menu-mobile.open .menu>ul>li>ul>li>a{ text-align: center; color: #333; font-size: 14px; display: block;}
.box-menu-mobile.open .menu>ul>li>ul>li>a>span{ color: #333; font-size: 14px; text-align: center;line-height: 1.3;}
.box-menu-mobile.open .menu>ul>li>ul>li>a>img{ width: 100%; margin-bottom: 5px; border: 1px solid #DDD; border-radius: 5px; padding: 2px;}
.box-menu-mobile.open .menu>ul>li.dropdown-menu{ position: relative;}
.box-menu-mobile.open .menu>ul>li.dropdown-menu>i{ position: absolute; right: 5px; top: 0; padding: 20px 10px;}
.box-menu-mobile.open .menu>ul>li.dropdown-menu>i::before{ background-color: #666;}
.box-menu-mobile.open .menu>ul>li.dropdown-menu>a{ display: inline-flex; width: auto;}
.box-menu-mobile.open .info{ display: block; padding: 15px 0;}
.box-menu-mobile.open .info .item{ display: block; padding: 10px 15px; font-size: 16px; color: #333;}


.box-croll-top{ display: none; position:fixed; bottom:82px; right:15px; z-index:120; border:none; outline:none; color:white; cursor:pointer; padding: 15px; border-radius: 4px;}

body.loading::before{ content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(68, 68, 68, 0.3); z-index: 9998;}
body.loading::after{ content: ""; position: fixed; top: 50%; left: 50%; margin: -4px 0 0 0; font-size: 10px; width: 8px; height: 8px; border-radius: 50% !important; text-indent: -9999em; -webkit-animation: load 1.3s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); opacity: 0.8;  z-index: 9999;}

.popup-bg{ position: fixed; z-index: 998; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; top: 0; left: 0;}

@keyframes zoom{0%{transform:scale(.5);opacity:0}50%{opacity:1}to{opacity:0;transform:scale(1)}}@keyframes lucidgenzalo{0% {transform:rotate(-25deg)} 50%{transform:rotate(25deg)}}
.jscroll-to-top{bottom:100px}.fcta-zalo-ben-trong-nut svg path{fill:#fff}
.fcta-zalo-vi-tri-nut{position:fixed;bottom:24px;right:20px;z-index:999}
.fcta-zalo-nen-nut,div.fcta-zalo-mess{box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16)}
.fcta-zalo-nen-nut{width:50px;height:50px;text-align:center;color:#fff;background:#0068ff;border-radius:50%;position:relative}
.fcta-zalo-nen-nut::after,.fcta-zalo-nen-nut::before{content:"";position:absolute;border:1px solid #0068ff;background:#0068ff80;z-index:-1;left:-20px;right:-20px;top:-20px;bottom:-20px;border-radius:50%;animation:zoom 1.9s linear infinite}
.fcta-zalo-nen-nut::after{animation-delay:.4s}
.fcta-zalo-ben-trong-nut,.fcta-zalo-ben-trong-nut i{transition:all 1s}
.fcta-zalo-ben-trong-nut{position:absolute;text-align:center;width:60%;height:60%;left:10px;bottom:25px;line-height:70px;font-size:25px;opacity:1}
.fcta-zalo-ben-trong-nut i{animation:lucidgenzalo 1s linear infinite}
.fcta-zalo-nen-nut:hover .fcta-zalo-ben-trong-nut,.fcta-zalo-text{opacity:0}
.fcta-zalo-nen-nut:hover i{transform:scale(.5);transition:all .5s ease-in}
.fcta-zalo-text a{text-decoration:none;color:#fff}
.fcta-zalo-text{position:absolute;top:6px;text-transform:uppercase;font-size:12px;font-weight:700;transform:scaleX(-1);transition:all .5s;line-height:1.5}
.fcta-zalo-nen-nut:hover .fcta-zalo-text{transform:scaleX(1);opacity:1}
div.fcta-zalo-mess{position:fixed;bottom:29px;right:58px;z-index:99;background:#fff;padding:7px 25px 7px 15px;color:#0068ff;border-radius:50px 0 0 50px;font-weight:700;font-size:15px}
.fcta-zalo-mess span{color:#0068ff!important}
span#fcta-zalo-tracking{font-family:Roboto;line-height:1.5}
.fcta-zalo-text{font-family:Roboto}

@keyframes zoom{0%{transform:scale(.5);opacity:0}50%{opacity:1}to{opacity:0;transform:scale(1)}}@keyframes lucidgenzalo{0% {transform:rotate(-25deg)} 50%{transform:rotate(25deg)}}.jscroll-to-top{bottom:100px;}
.fcta-zalo-ben-trong-nut1 svg path{fill:#fff;}
.fcta-zalo-vi-tri-nut1{position:fixed;bottom:106px;right:20px;z-index:999;}
.fcta-zalo-nen-nut1,div.fcta-zalo-mess1{box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);}
.fcta-zalo-nen-nut1{width:50px;height:50px;text-align:center;color:#fff;background:#0068ff;border-radius:50%;position:relative;}
.fcta-zalo-nen-nut1::after,.fcta-zalo-nen-nut1::before{content:"";position:absolute;border:1px solid #0068ff;background:#0068ff80;z-index:-1;left:-20px;right:-20px;top:-20px;bottom:-20px;border-radius:50%;animation:zoom 1.9s linear infinite;}
.fcta-zalo-nen-nut1::after{animation-delay:.4s;}
.fcta-zalo-ben-trong-nut1,.fcta-zalo-ben-trong-nut1 i{transition:all 1s;}
.fcta-zalo-ben-trong-nut1{position:absolute;text-align:center;width:60%;height:60%;left:10px;bottom:25px;line-height:70px;font-size:25px;opacity:1;}
.fcta-zalo-ben-trong-nut1 i{animation:lucidgenzalo 1s linear infinite;}
.fcta-zalo-nen-nut1:hover .fcta-zalo-ben-trong-nut,.fcta-zalo-text{opacity:0;}
.fcta-zalo-nen-nut1:hover i{transform:scale(.5);transition:all .5s ease-in;}
.fcta-zalo-text1 a{text-decoration:none;color:#fff;}
.fcta-zalo-text1{position:absolute;top:6px;text-transform:uppercase;font-size:12px;font-weight:700;transform:scaleX(-1);transition:all .5s;line-height:1.5;}
.fcta-zalo-nen-nut1:hover .fcta-zalo-text1{transform:scaleX(1);opacity:1;}
div.fcta-zalo-mess1{position:fixed;bottom:113px;right:58px;z-index:99;background:#fff;padding:7px 25px 7px 15px;color:#0068ff;border-radius:50px 0 0 50px;font-weight:700;font-size:15px;}
.fcta-zalo-mess1 span{color:#0068ff!important;}
span#fcta-zalo-tracking1{font-family:Roboto;line-height:1.5;}
.fcta-zalo-text1{font-family:Roboto;}

.fab-text{ position: absolute; right: 30px; bottom: 27px; height: 36px; padding: 0 15px; border-radius: 18px; font-size: 16px; font-weight: bold; color: #2f82fc; width: 130px; background-color: #FFF; box-shadow: 0 0 10px #CCC; display: flex; align-items: center; z-index: 222;}
.fab-wrapper{position:fixed;bottom:5px;right:0;z-index:9999999;}
.fab-checkbox{display:none!important;}
.fab-checkbox:checked~ .devvn_bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);z-index:1;}
.fab{width:60px;max-width:unset;height:60px;display:flex!important;justify-content:center;align-items:center;margin:0;border-radius:50%;background:#2f82fc;box-shadow:0 3px 6px #000 0 3px 6px #000;position:absolute;right:16px;bottom:16px;z-index:1000;overflow:hidden;transform:rotate(0deg);-webkit-transition:all .15s cubic-bezier(.15,.87,.45,1.23);transition:all .15s cubic-bezier(.15,.87,.45,1.23);}
.fab img{ width: 60%;}
.fab-checkbox:checked~.fab{/*transform:rotate(90deg);*/-webkit-transition:all .15s cubic-bezier(.15,.87,.45,1.23);transition:all .15s cubic-bezier(.15,.87,.45,1.23);}
[class*=icon-cps-]{display:inline-block;vertical-align:middle;background-image:url("https://topbag.vn/static/web/images/zalo.png")!important;background-repeat:no-repeat;background-size:453px;}
.icon-cps-fab-menu{width:50px;height:50px;margin:0!important;background-size:694px;background-position:-649px 0;}
.fab-checkbox:checked~.fab .icon-cps-fab-menu{width:30px;height:30px;margin:0;background-size:615px;background-position:-291px -70px;}
.fab-wheel{position:absolute;bottom:15px;right:12px;transform:scale(0);transform-origin:bottom right;transition:all .3s ease;z-index:12;}
.fab-checkbox:checked~.fab-wheel{transform:scale(1);}
.fab-wheel .fab-action{display:flex;align-items:center;font-size:14px;font-weight:700;color:#fff;position:absolute;text-decoration:none;}

.fab-wheel .fab-action-4{left: auto; right:12px;bottom:251px;}
.fab-wheel .fab-action-3{left: auto; right:12px;bottom:191px;}
.fab-wheel .fab-action-2{left: auto; right:12px;bottom:132px;}
.fab-wheel .fab-action-1{left: auto; right:12px;bottom:73px;}

.fab-title{float:left;margin:0 5px 0 0;opacity:0;white-space: nowrap;}
.fab-checkbox:checked~.fab-wheel .fab-title{opacity:1;}
.fab-button{width:45px;height:45px;display:flex;justify-content:center;align-items:center;float:left;padding:4px;border-radius:50%;background:#0f1941;box-shadow:0 1px 3px #000 0 1px 2px #000;font-size:24px;color:#fff;transition:all 1s ease;overflow:hidden;}
.fab-button img{ width: 80%;}
.icon-cps-local{width:28px;height:28px;background-position:0 -49px;}
.fab-wheel .fab-button-1{background:#dd5145;}
.fab-wheel .fab-button-2{background:#fb0;}
.icon-cps-phone{width:28px;height:28px;background-position:-51px -49px;}
.fab-wheel .fab-button-3{background:#0f9d58;}
.icon-cps-chat{width:30px;height:30px;background-position:-369px 0;}
.fab-wheel .fab-button-4{background:#2f82fc;}
.icon-cps-chat-zalo{width:30px;height:30px;background-position:-362px -1px;background-size:515px;}
.suggestions-chat-box{min-width:140px;min-height:50px;display:flex;justify-content:center;align-items:center;border:1px solid #1d72e0;border-radius:10px;background:#277cea;box-shadow:0 .5rem 1rem #000;font-size:14px;font-weight:700;color:#fff;position:fixed;right:80px;bottom:7%;z-index:11;}
.hidden{display:none!important;}
.align-items-center{-ms-flex-align:center!important;align-items:center!important;-ms-flex-pack:distribute!important;justify-content:space-around!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important;}
.suggestions-chat-box #btnClose{position:absolute;top:2px;left:2px}i.icon-cps-face{width:28px;height:28px;background-position:-177px 0;}
.fab-checkbox:not(:checked)~.fab{animation-name:zoom;-webkit-animation-name:zoom;animation-delay:0;-webkit-animation-delay:0;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;cursor:pointer;box-shadow:0 0 0 0 #2f82fc}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);-ms-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent};}

.modal-video .btn-close{ position: absolute; top: -30px; right: 0; opacity: 1; background: #FFF var(--bs-btn-close-bg) center/1em auto no-repeat;}
.modal-video .modal-content{ background: none;}

@-webkit-keyframes load { 0%, 100% { box-shadow: 0 -3em 0 0.2em #F1F1F1, 2em -2em 0 0em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 12.5% { box-shadow: 0 -3em 0 0 #F1F1F1, 2em -2em 0 0.2em #F1F1F1, 3em 0 0 0 #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 25% { box-shadow: 0 -3em 0 -0.5em #F1F1F1, 2em -2em 0 0 #F1F1F1, 3em 0 0 0.2em #F1F1F1, 2em 2em 0 0 #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 37.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 0 #F1F1F1, 2em 2em 0 0.2em #F1F1F1, 0 3em 0 0em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 50% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 0em #F1F1F1, 0 3em 0 0.2em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 62.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 0 #F1F1F1, -2em 2em 0 0.2em #F1F1F1, -3em 0 0 0 #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 75% { box-shadow: 0em -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0.2em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 87.5% { box-shadow: 0em -3em 0 0 #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0 #F1F1F1, -2em -2em 0 0.2em #F1F1F1; } }
@-moz-keyframes load { 0%, 100% { box-shadow: 0 -3em 0 0.2em #F1F1F1, 2em -2em 0 0em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 12.5% { box-shadow: 0 -3em 0 0 #F1F1F1, 2em -2em 0 0.2em #F1F1F1, 3em 0 0 0 #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 25% { box-shadow: 0 -3em 0 -0.5em #F1F1F1, 2em -2em 0 0 #F1F1F1, 3em 0 0 0.2em #F1F1F1, 2em 2em 0 0 #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 37.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 0 #F1F1F1, 2em 2em 0 0.2em #F1F1F1, 0 3em 0 0em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 50% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 0em #F1F1F1, 0 3em 0 0.2em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 62.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 0 #F1F1F1, -2em 2em 0 0.2em #F1F1F1, -3em 0 0 0 #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 75% { box-shadow: 0em -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0.2em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 87.5% { box-shadow: 0em -3em 0 0 #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0 #F1F1F1, -2em -2em 0 0.2em #F1F1F1; } }
@keyframes load { 0%, 100% { box-shadow: 0 -3em 0 0.2em #F1F1F1, 2em -2em 0 0em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 12.5% { box-shadow: 0 -3em 0 0 #F1F1F1, 2em -2em 0 0.2em #F1F1F1, 3em 0 0 0 #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 25% { box-shadow: 0 -3em 0 -0.5em #F1F1F1, 2em -2em 0 0 #F1F1F1, 3em 0 0 0.2em #F1F1F1, 2em 2em 0 0 #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 37.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 0 #F1F1F1, 2em 2em 0 0.2em #F1F1F1, 0 3em 0 0em #F1F1F1, -2em 2em 0 -1em #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 50% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 0em #F1F1F1, 0 3em 0 0.2em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 -1em #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 62.5% { box-shadow: 0 -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 0 #F1F1F1, -2em 2em 0 0.2em #F1F1F1, -3em 0 0 0 #F1F1F1, -2em -2em 0 -1em #F1F1F1; } 75% { box-shadow: 0em -3em 0 -1em #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0em 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0.2em #F1F1F1, -2em -2em 0 0 #F1F1F1; } 87.5% { box-shadow: 0em -3em 0 0 #F1F1F1, 2em -2em 0 -1em #F1F1F1, 3em 0 0 -1em #F1F1F1, 2em 2em 0 -1em #F1F1F1, 0 3em 0 -1em #F1F1F1, -2em 2em 0 0 #F1F1F1, -3em 0em 0 0 #F1F1F1, -2em -2em 0 0.2em #F1F1F1; } }

@media (min-width: 1200px) {
    *::-webkit-scrollbar-track { background-color: #F5F5F5; }
    *::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; }
    *::-webkit-scrollbar-thumb { background-color: #999; }
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1190px; }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1360px; }
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    .box-header .logo{ width: 180px;}
    .box-header .logo img { height: 53px; }
    .box-header .menu{ margin-top: 0;}
    .box-header .product-cart{ margin-top: 0;}
    .box-header .search{ margin: 0 0 0 0;}

    .box-articles-home .container{ width: 1080px;}

    .box-footer .info{ width: 340px;}
}

@media (max-width: 1250px) {
    .container{ width: 100%; max-width: 100%;}

    .box-footer .info{ width: 340px;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .product-item{ width: 25%;}
    .product-item .thumbs{ display: none;}
    .product-item .info .percent{ top: 0;}

    .box-articles-home .container{ width: 100%;}

    .page-product .page-title{ margin-bottom: 20px;}

    .box-header{ padding: 15px 0;}
    .box-header .search{ width: 300px;}
    .box-header .logo img{ height: 42px !important;}
    .box-footer .info{ width: 300px;}
    .box-contact .item{ margin-left: 10px; width: 300px;}
    .box-contact .item .phone{ font-size: 30px;}
    .box-contact .item.form{ margin-right: 10px;}
    .box-contact .item.form .text{ font-size: 21px;}
    .box-contact .item.buy{ padding-left: 50px;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .ck-content *{ max-width: 100% !important; height: auto !important;margin:auto;}
    .ck-content .image img {width: 100%;}

    .product-item{ padding-bottom: 0; width: 25%;}
    .product-item .thumbs{ display: none;}
    .product-item .info .percent{ top: 0;}

    .articles-item{ padding: 10px 0;}
    .articles-item .image{ width: 120px;}
    .articles-item .info{ padding: 0 0 0 10px;}

    .owl-carousel .owl-dots{ bottom: 10px;}
    .owl-carousel .owl-dots .owl-dot{ margin: 0 4px;}
    .owl-carousel .owl-nav div{ background-size: 40px auto; width: 40px;}
    .owl-carousel .owl-nav .owl-prev{ left: 10px;}
    .owl-carousel .owl-nav .owl-next{ right: 10px;}

    .menu-category-mobile{ display: flex; margin-bottom: 10px;}
    .menu-category-mobile .item{ flex: 1; padding: 0 10px; text-align: center;}
    .menu-category-mobile .item a{ display: block; color: #000;}
    .menu-category-mobile .item img{ width: 100%; margin-bottom: 5px;}

    .box-header .logo{ width: auto;}
    .box-header .menu{ display: none;}

    .box-menu-main .box-content>ul>li>a{ padding-left: 20px; padding-right: 20px;}
    .box-menu-main .box-content>ul>li>ul>li:last-child>a>img{ width: 250px;}

    .box-slider{ margin-bottom: 40px;}
    .box-slider .owl-carousel .owl-dots{ display: block; bottom: -30px;}
    .box-slider .owl-carousel .owl-dots .owl-dot{ background-color: #D6D6D6; margin: 5px 7px; width: 15px; height: 15px;}
    .box-slider .owl-carousel .owl-dots .owl-dot.active{ background: #199fda;}

    .box-product-other{ padding: 0 12px;}
    .box-product-other .box-content.owl-carousel{ display: flex; flex-wrap: nowrap; margin-left: -1px; overflow: hidden;}
    .box-product-other .box-content.owl-carousel .product-item{ width: auto; border: 1px solid #DDD;}
    .box-product-other .owl-carousel .owl-nav div{ width: 36px; height: 36px; border: 1px solid #DDD; border-radius: 50%; top: 100px;}
    .box-product-other .owl-carousel .owl-nav .owl-next{ background: url(../images/svgs/regular/chevron-right.svg) no-repeat center center; background-size: 10px; right: 5px;}
    .box-product-other .owl-carousel .owl-nav .owl-prev{ background: url(../images/svgs/regular/chevron-left.svg) no-repeat center center; background-size: 10px; left: 5px;}

    .box-articles-highlight .box-content .item .image{ width: 80px;}
    .box-articles-highlight .box-content .item .info .name a{ font-size: 14px;}
    .box-articles-new .box-content .item .image{ width: 80px;}
    .box-articles-new .box-content .item .info .name a{ font-size: 14px;}

    .box-social .box-content .item{ margin-bottom: 20px;}
    .box-social .box-content .item:nth-child(3){ border: 0;}

    .box-brand{ padding-top: 30px;}
    .box-brand .box-title .title{ font-weight: normal; color: #333;}

    .box-footer.mobile .menu{ margin-top: 20px;}
    .box-footer.mobile .menu>ul>li{ padding: 0; margin-bottom: 10px; position: relative;}
    .box-footer.mobile .menu>ul>li>.box-title{ margin-bottom: 5px;}
    .box-footer.mobile .menu>ul>li>ul{ margin-bottom: 10px; display: none;}
    .box-footer.mobile .menu>ul>li:last-child{ margin-bottom: 0;}
    .box-footer.mobile .menu>ul>li:last-child>.box-title{ display: none;}
    .box-footer.mobile .menu>ul>li:last-child>ul{ display: flex; align-items: center; justify-content: center; margin: 0;}
    .box-footer.mobile .menu>ul>li:last-child>ul>li{ padding: 10px 20px 0;}
    .box-footer.mobile .menu>ul>li:last-child>i{ display: none;}
    .box-footer.mobile .menu>ul>li.dropdown-menu{ position: relative;}
    .box-footer.mobile .menu>ul>li.dropdown-menu>i{ position: absolute; right: 3px; top: 0; padding: 3px 3px;}
    .box-footer.mobile .menu>ul>li.dropdown-menu>i::before{ background-color: #000;}
    .box-footer.mobile .menu>ul>li>ul>li>a{ margin-bottom: 5px;}

    .box-copyright{ padding-bottom: 75px; line-height: 20px;}
    .box-copyright *{ font-size: 12px;}

    .box-menu-mobile-footer{ position: fixed; bottom: 0; left: 0; background-color: #FFF; z-index: 999; display: flex; width: 100%; padding: 7px 0; box-shadow: 0 4px 10px 0 #999;}
    .box-menu-mobile-footer .item{ width: 20%; text-align: center; display: flex; justify-content: space-between; align-items: center; flex-direction: column; position: relative;}
    .box-menu-mobile-footer .item i{ width: 32px; height: 32px; border-radius: 50%; background-color: #097aaa; margin-bottom: 2px;}
    .box-menu-mobile-footer .item i::before{ display: block; width: 18px; height: 18px; opacity: 0.8; background-color: #FFF; margin-top: 7px; margin-left: 7px;}
    .box-menu-mobile-footer .item i.fa-hotline{ width: 50px; height: 50px; margin-top: -20px; border: 1px solid #FFF; background: url(../images/icon-phone.png) no-repeat center center #6cb917; background-size: 60%;}
    .box-menu-mobile-footer .item i.fa-hotline::before{ display: none;}
    .box-menu-mobile-footer .item i.fa-messenger{ background: url(../images/icon-messenger.png) no-repeat center center; background-size: 100%;}
    .box-menu-mobile-footer .item i.fa-messenger::before{ background: none;}
    .box-menu-mobile-footer .item i.fa-zalo{ background: url(../images/icon-zalo.png) no-repeat center center; background-size: 100%;}
    .box-menu-mobile-footer .item i.fa-zalo::before{ background: none;}
    .box-menu-mobile-footer .item i.fa-location-dot{ background-color: #666;}
    .box-menu-mobile-footer .item img{ height: 24px; margin-bottom: 5px;}
    .box-menu-mobile-footer .item .text{ font-size: 12px; color: #333;}
    .box-menu-mobile-footer .item .menu{ position: absolute; bottom: 50px; right: -56px; z-index: 222; display: none;}
    .box-menu-mobile-footer .item .menu .zalo-action{ display: flex; justify-content: flex-end; align-items: center; width: 220px; margin-bottom: 10px;}
    .box-menu-mobile-footer .item .menu .zalo-button{ margin-left: 10px; padding: 5px; width: 40px; height: 40px; border-radius: 50%; background-color: #dd5145; display: flex; justify-content: center; align-items: center;}
    .box-menu-mobile-footer .item .menu .zalo-button img{ margin: 0;}
    .box-menu-mobile-footer .item .menu .zalo-button.zalo-button-2{background:#fb0;}
    .box-menu-mobile-footer .item .menu .zalo-button.zalo-button-3{background:#0f9d58;}
    .box-menu-mobile-footer .item .menu .zalo-button.zalo-button-4{background:#2f82fc;}
    .box-menu-mobile-footer .item .menu .zalo-title{ font-weight: bold; color: #FFF;}
    .box-menu-mobile-footer .item .menu-bg{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 111;}
    .box-menu-mobile-footer .item.active .menu{ display: block;}
    .box-menu-mobile-footer .item.active .menu-bg{ display: block;}

    .page-product .container{ display: block; padding: 0;}
    .page-product .page-title{ padding: 15px 12px; align-items: center;}
    .page-product .page-wrapper{ margin: 0;}
    .page-product .page-content{ border-bottom: 1px solid #DDD;}
    .page-product .page-content .product-item{ width: 33.33%;}
    .page-product .category-content{ padding: 15px;}
    .page-product.detail .product-image{ margin: 0;}
    .page-product.detail .product-image .owl-carousel .owl-nav div{ width: 36px; height: 36px; border: 1px solid #DDD; border-radius: 50%; top: 50%; margin-top: -35px;}
    .page-product.detail .product-image .owl-carousel .owl-nav .owl-next{ background: url(../images/svgs/regular/chevron-right.svg) no-repeat center center; background-size: 10px; right: 15px;}
    .page-product.detail .product-image .owl-carousel .owl-nav .owl-prev{ background: url(../images/svgs/regular/chevron-left.svg) no-repeat center center; background-size: 10px; left: 15px;}
    .page-product.detail .product-info{ padding: 0 12px;}
    .page-product.detail .product-content{ margin-top: 20px; padding: 0 12px;}
    .page-product.detail .product-content .tabs-title .item{ margin: 0 40px 0 0; padding: 0 0 5px; letter-spacing: 0; text-align: center; line-height: 22px;} 

    .page-cart .page-wrapper{ box-shadow: none; padding: 0;}
    .page-cart .products .item .image{ width: 120px;}
    .page-cart .products .item .image a{ display: block;}
    .page-cart .products .item .info{ padding-left: 15px;}
    .page-cart .products .item .info .name{ font-size: 15px; margin-bottom: 2px;}
    .page-cart .products .item .info .control{ display: block;}
    .page-cart .products .item .info .price{ font-size: 16px; display: flex; margin-bottom: 15px;}
    .page-cart .products .item .info .price s{ font-size: 16px; margin: 0 0 0 5px;}
    .page-cart .products .item .info .amount{ display: flex; justify-content: space-between;}
    .page-cart .form .form-footer .btn{ width: auto;}
    .page-cart .form .form-footer .btn-back{ text-align: center;}
    .page-cart .text-top-cart{ display: none;}

    .page-pagination{ justify-content: center;}
    .page-breadcrumbs ul{ display: block;}
    .page-breadcrumbs ul li{ display: inline; line-height: 22px;}

    .box-footer .info{ width: 100%; display: flex; flex-wrap: wrap;}
    .box-footer .box-title{ width: 100%;}
    .box-footer .info .item{ width: 50%;}
    .box-footer .menu{ padding-top: 20px;}
    .box-footer .menu>ul>li:first-child{ padding-left: 0;}

    .box-contact .item{ margin: 0;}
    .box-contact .item .phone{ font-size: 25px;}
    .box-contact .item.feedback{ padding-left: 40px; margin-left: 20px;}
    .box-contact .item.form .text{ font-size: 19px;}
    .box-contact .item.form .btn{ padding: 0 10px;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    a:has(img) { display: inline;}

    .product-item{ width: 50%; border-left: 1px solid #DDD; border-top: 1px solid #DDD; padding-bottom: 0;}
    .product-item .image{ padding: 10px 15px 4px 15px;}
    .product-item .image a{ display: block;}
    .product-item .info{ padding: 15px 6px 10px 6px; text-align: left;}
    .product-item .info .percent{ top: -14px;}
    .product-item .info .price{ display: flex; justify-content: space-between; min-height: 21px;}
    .product-item .info .price span{font-size: 14px;}
    .product-item .info .price s{font-size: 14px;}
    .product-item .info .name a{ height: 39px;letter-spacing: normal;}
    .product-item .info .gift{ top: -28px;}
    .product-item .thumbs{ display: none;}

    .articles-item .info .name a{ color: #333; font-size: 16px;}
    .articles-item .info .desc{ display: none;}

    .box-top{ display: none;}
    .box-header{ border: 0; padding: 6px 0;}
    .box-header .logo img{ height: 46px;}
    .box-header .search{ display: none;}
    .box-header .menu{ display: none;}
    .box-header .product-cart .info{ height: 36px;}
    .box-header .product-cart .info p{font-size: 12px;}
    .box-header .product-cart .info p.amount{ font-size: 16px;}
    .box-header .product-cart .icon{ width: 36px; height: 36px;}
    .box-header .product-cart .icon i::before{ width: 20px; height: 20px;}
    .box-header .product-cart-fixed{ bottom: 120px; right: 17px;}

    .box-menu-main{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background-color: rgba(0, 0, 0, 0.5);}
    .box-menu-main .container{ position: fixed; top: 0; left: 0; width: 280px; max-width: 70%; height: 100%; overflow: auto; background-color: #FFF; padding: 0;}
    .box-menu-main .box-content>ul{ display: block;}
    .box-menu-main .box-content>ul>li{ border-top: 1px solid #ececec;}
    .box-menu-main .box-content>ul>li>a{ padding: 15px 20px; text-transform: uppercase; color: #777; font-size: 14px;}
    .box-menu-main .box-content>ul>li:hover>a{ color: #777;}
    .box-menu-main .box-content>ul>li:first-child>a{ padding: 15px 20px;}
    .box-menu-main .box-content>ul>li:nth-last-child(2)>a{ color: #777;}
    .box-menu-main .box-content>ul>li:last-child>a{ color: #777;}
    .box-menu-main .box-content>ul>li>ul{ display: none; position: relative; box-shadow: none; top: 0; padding-top: 0;}
    .box-menu-main .box-content>ul>li>ul>li>ul{ padding: 5px 0 15px;}
    .box-menu-main .box-content>ul>li>ul>li>a>img{ width: 100%;}
    .box-menu-main .box-content>ul>li>ul>li>h3{ color: #444; font-size: 14px; border-width: 1px;}
    .box-menu-main .box-content>ul>li:hover>ul{ display: none;}
    .box-menu-main .box-content>ul>li.dropdown-menu{ position: relative;}
    .box-menu-main .box-content>ul>li.dropdown-menu>i{ position: absolute; right: 5px; top: 0; padding: 17px 10px;}
    .box-menu-main .box-content>ul>li.dropdown-menu>i::before{ background-color: #999;}
    .box-menu-main .box-content .logo{ display: flex; justify-content: space-between; padding: 15px;}
    .box-menu-main .box-content .logo i{ margin-right: -4px;}
    .box-menu-main .box-content .logo i::before{ width: 20px; height: 20px; background-color: #999;}
    .box-menu-main .box-content .logo img{ height: 40px;}
    .box-menu-main .box-content .hotline{ border-top: 1px solid #ececec; display: flex; text-align: center; padding: 10px 0;}
    .box-menu-main .box-content .hotline .item{ flex: 1;}
    .box-menu-main .box-content .hotline .item span{ text-transform: uppercase; font-weight: bold; font-size: 12px; padding-bottom: 3px;}
    .box-menu-main .box-content .hotline .item a{ color: #ff6600; font-size: 16px; font-weight: bold;}
    
    .box-product-home{ padding: 0; border-bottom: 40px solid #dfdfdf;}
    .box-product-home .container{ padding: 0;}
    .box-product-home .box-title{ text-align: left; padding: 15px 10px;}
    .box-product-home .box-content{ padding: 0;}
    .box-product-home .box-title::after{ display: none;}
    .box-product-home .box-title .title{ padding: 0;}
    .box-product-home .box-content .product-item:nth-child(odd){ border-left: none;}
    .box-product-home .box-content.owl-carousel{ display: flex; flex-wrap: nowrap; margin-left: -1px; overflow: hidden;}
    .box-product-home .box-content.owl-carousel .product-item{ width: auto; border-left: 1px solid #DDD;}
    .box-product-home .owl-carousel .owl-nav div{ width: 36px; height: 36px; border: 1px solid #DDD; border-radius: 50%; top: 100px;}
    .box-product-home .owl-carousel .owl-nav .owl-next{ background: url(../images/svgs/regular/chevron-right.svg) no-repeat center center; background-size: 10px; right: 5px;}
    .box-product-home .owl-carousel .owl-nav .owl-prev{ background: url(../images/svgs/regular/chevron-left.svg) no-repeat center center; background-size: 10px; left: 5px;}
    .box-product-home .view-all{ display: block; font-size: 16px; padding: 15px 0; text-align: center; color: #ff6600; border-top: 1px solid #DDD;}

    .box-articles-home{ background-color: #FFF; padding: 0; border-bottom: 40px solid #dfdfdf;}
    .box-articles-home .container{ padding: 0;}
    .box-articles-home .box-title{ text-align: left; padding: 12px 0; border-bottom: 2px solid #DDD;}
    .box-articles-home .box-title::after{ display: none;}
    .box-articles-home .box-title .title{ font-size: 22px; font-weight: 500; background: none;}
    .box-articles-home .box-content{ display: block;}
    .box-articles-home .item{ width: 100%; display: flex; padding: 0 20px; margin-bottom: 15px;}
    .box-articles-home .item .image{ height: auto; width: 120px;}
    .box-articles-home .item .image img{ position: relative; top: 0; margin: 0;}
    .box-articles-home .item .info{ flex: 1; padding-left: 15px;}
    .box-articles-home .item .info .title{ height: auto; text-transform: none; margin: 0;}
    .box-articles-home .item .info .title a{ color: #333;}
    .box-articles-home .item .info .desc{ display: none;}

    .box-contact .box-content{ justify-content: center;}
    .box-contact .item.feedback{ width: auto; padding-left: 60px; margin-left: -30px;}
    .box-contact .item .phone{ font-size: 30px;}
    .box-contact .item.buy{ display: none;}
    .box-contact .item.form{ display: none;}

    .box-product-top .box-content{ border: 0;}
    .box-articles-right .box-content{ border: 0;}
    .box-articles-highlight{ margin-top: 20px; border: 1px solid #DDD;}
    .box-articles-highlight .box-content{ border-top: 1px solid #DDD;}

    .box-social .box-content .item{ width: 50%;}
    .box-footer .info{ width: 100%;}
    .box-footer .info .item{ width: 100%;}
    .box-footer .menu{ padding-top: 0;}
    .box-footer .menu>ul>li{ flex: auto; width: 100%;}

    .page-product .container{ display: block; padding: 0;}
    .page-product .container>.row{ margin-left: 0; margin-right: 0;}
    .page-product .page-content .product-item{ width: 50%;}
    .page-product .page-content .product-item:nth-child(odd){ border-left: none;}
    .page-product .filter-category{ padding: 0 10px 10px; margin-bottom: 10px;}
    .page-product .filter-category .item{width: 85px; flex-wrap: wrap;}
    .page-product .filter-category .item.active .arrow-filter{ display: none;}
    .page-product .filter-url{ padding: 0 10px 10px; margin-bottom: 0px; border: 0;}
    .page-product .filter-all{ padding: 10px 10px 10px; overflow: auto;}
    .page-product .filter-all.active .all-title{ z-index: 1 !important;}
    .page-product .filter-all.active .all-title .arrow-filter{display: none;}
    .page-product .filter-all.active .filter-other{position: fixed; z-index: 99; top: 30px; left: 5%; background: #FFF; width: 90%; padding: 0; box-shadow: 0 2px 20px rgba(0,0,0,.5); border-radius: 5px; max-width: 100%; min-width: 0; overflow: hidden;}
    .page-product .filter-all.active .filter-other .all-other{ max-height: 550px;}
    .page-product .filter-all.active .filter-other .other .content{ min-width: 0;}
    .page-product .filter-all.active .filter-other .other .content .arrow-close{ display: none;}
    .page-product .filter-other .other.active{position: fixed; z-index: 99; top: 30px; left: 5%; background: #FFF; width: 90%; padding: 15px 15px 0; box-shadow: 0 2px 20px rgba(0,0,0,.5); border-radius: 5px;}
    .page-product .filter-other .other.active .title{ border: 0; font-size: 16px; font-weight: 600; padding: 0 0 15px 0;}
    .page-product .filter-other .other.active .title span::before{ display: none;}
    .page-product .filter-other .other.active .title .arrow-filter{ display: none;}
    .page-product .filter-other .other.active .content{ position: relative; box-shadow: none; top: 0; padding: 0; max-width: 100%; min-width: 0;}
    .page-product .filter-other .other .content .arrow-close{ top: -35px; right: -5px;}
    .page-product .filter-other .other .content .filter-button{ margin-left: -15px; margin-right: -15px;}
    .page-product .filter-all .all-title{ z-index: 9 !important;}
    .page-product .filter-other .other .title{ z-index: 9 !important;}

    .page-product.detail .container>.row>div{ padding: 0;}
    .page-product.detail .product-content .tabs-title{padding-left: 6.5%}
    .page-product.detail .product-content .tabs-title .item{ margin: 0 30px 0 0;} 

    .page-pagination{ padding-left: 5px; padding-right: 5px;;}
    .page-pagination ul{ flex-wrap: wrap; justify-content: center;}
    .page-pagination ul li{ margin: 2px;}
    .page-pagination ul li.total{ margin: 2px;}
    .page-pagination ul li.total span{ font-size: 14px;}
}


/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .box-social .box-title{ font-size: 22px;}
    .box-croll-top { bottom: 70px; right: 24px; padding: 0; }
}