:root {
    --color-1: #ee1d23;
    --color-2:#c4123f;
}

@font-face {
    font-family: 'QuicksandR';
    src: url(templates/fonts/Quicksand-Regular.ttf);
}

@font-face {
    font-family: 'QuicksandM';
    src: url(templates/fonts/Quicksand-Medium.ttf);
}

@font-face {
    font-family: 'QuicksandB';
    src: url(templates/fonts/Quicksand-Bold.ttf);
}

body{
    font-family:'QuicksandR'!important;
    max-width:1920px;
    overflow-x:hidden;
    margin:0 auto;
}

.title_rsSearch{
    margin-bottom:10px;
    font-size:16px;
    font-family:'QuicksandB';
}

.pn-search{
    padding:30px 0;
}
.pn-search .title-page{
    margin-bottom:15px;
}
.pn-search .pagination-page{
    margin-top:20px;
    margin-top:10px;
}
.product-img{
    width:100%;
    height:0;
    padding-bottom:100%;
    position:relative;
}
.product-img a img{
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
   object-fit:contain;
}
.df{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}
.un-style{
    list-style-type:none;
    margin:0;
    padding:0;
}
.banner_heading{
    width:100%;
}
.pn-heading{
    padding:10px 0;
    background-color:var(--color-2);
    color:#fff;
}
.df-heading{
    align-items:center;
}
.df-heading .left,.df-heading .right{
    width:250px;
}
.df-heading .left{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.df-heading .left .m_menu svg{
    color:#fff;
}
.df-heading .center{
    width:calc(100% - 630px);
}
.search_form{
    position:relative;
}
.search_form #search{
    border-radius:5px;
    height:42px;
    padding:2px 5px 2px 10px;
    outline:none;
    box-shadow:unset;
}

.search_form .btn_search{
    position:absolute;
    right:5px;
    top:5px;
    background-color:var(--color-2);
    font-size:20px;
    color:#fff;
    box-shadow:unset;
    border:unset;
    outline:unset;
    padding:5px 20px;
    line-height:1;
    border-radius:3px;
    height:33px;
}
.heading_ht{
    margin-top:10px;
}
.heading_ht ul{
    display:flex;
    justify-content:flex-start;
}
.heading_ht ul li{
    margin-right:10px;
}
.heading_ht ul li img{
    height:24px;
}

.header-action_text ul{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    color:#fff;
}
.header-action_text ul li{
    margin-left:10px;
}
.header-action_text ul li a{
    color:#fff;
}
.header-action_text ul li a svg{
    color:#fff;
}
.site-cart{
    position:relative;
}
.site-cart .count-style{
    position:absolute;
    top:-7px;
    left:10px;
    background-color:#111;
    color:#fff;
    padding:1px 3px;
    border-radius:50%;
    font-size:12px;
}
.site-cart .txt{
    margin-left:5px;
}

.pn-menu{
    background:#f2f2f2;
}

.menuList-primary{
    position:relative;
    display:block;
    text-align:left;
}
.menuList-primary > li{
    display:inline-block;
    margin: 0 7.5px;
    position: relative;
}
.menuList-primary > li > a{
    color:#c4123f;
    display:block;
    font-size:14px;
    padding:15px 4px;
    text-transform:uppercase;
    font-family:'QuicksandB';
}
.menuList-primary > li > ul{
    position: absolute;
    width: 100%;
    top: 100% !important;
    left: 0;
    z-index: 999;
    background: #fff;
    min-width: 300px;
    width: max-content;
    opacity: 0;
    z-index: -1;
    -webkit-box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
    box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
    border-radius: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.menuList-primary > li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    z-index: 9;
}
.menuList-primary > li > ul > li{
    padding:5px 10px;
    border-bottom:1px solid #eee;
}
.menuList-primary > li > ul > li:last-child{
    border-bottom-color:transparent;
}
.menuList-primary > li > ul > li > a{
    text-align:left;
    line-height:1.6;
    display:block;
}
.slider-area{
    border-radius:5px;
}

.pn-menui{
    padding:15px 0;
}
.pn-menui .block-title{
    margin-bottom:20px;
}
.pn-menui .block-title h2{
    font-size:24px;
    font-family:'QuicksandB';
    color:var(--color-2);
    margin:0;
}

.gird_products{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    grid-gap:15px;
}

.item_product{
    position:relative;
    border-radius:5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    overflow:hidden;
}

.item_product .img{
    position:relative;
    height:0;
    padding-bottom:65%;
    overflow:hidden;
    margin-bottom:5px;
}

.item_product .img img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    background-color:#fff;
}
.item_product .info{
    padding:10px;
}
.item_product .info h3{
    font-size:16px;
}
.item_product .info h3 a{
    font-size:16px;
    line-height:1.4;
    font-family:'QuicksandM';
}

.product-price-2 .amount{
    color:var(--color-1);
    font-family:'QuicksandM';
}

.cate_link{
    margin:20px 0 10px 0;
    text-align:center;
}
.cate_link a{
    padding:0 40px;
    line-height:40px;
    color:#fff;
    background-color:var(--color-2);
    font-size:14px;
    font-family:'QuicksandM';
    display:inline-block;
}

.title-page{
    color:#333;
}

.sodotrang li{
    display:inline-block;
}
.breabcumb{
    padding:10px 0;
}

.sodotrang > li > a{
    text-decoration:none;
}

.sodotrang > li + li:before {
    padding: 0 3px;
    margin-left: 5px;
    color: #ccc;
    font-family: 'FontAwesome';
    content: "/\00a0";
}
.tolbar__area{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.heading-box{
    display:flex;
    justify-content:flex-start;
}
.heading-box .title{
    font-size:24px;
    font-family:'QuicksandB';
    color:var(--color-2);
    margin-bottom:0;
}
.heading-box .filter-box{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-left:20px;
    padding-top:5px;
}
.heading-box .filter-box strong{
    margin-right:5px;
}

#product-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap:15px;
}

.pagination-page {
    text-align: center;
    margin-bottom: 20px;
    margin-top:10px;
}

.pagination-page > span, .pagination-page a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: solid 1px #ddd;
    color: #000;
}
.pagination-page a:hover, .pagination-page > span {
    background:var(--color-2);
    color: #FFF;
}

/**/

.aside_left>ul {
    list-style-type: none;
    margin: 0;
    padding:10px 10px;
    display: flex;
    flex-direction: column;
    background-color: #fcfcfc;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.menui-right>li {
    border-bottom: 1px solid #ccc;
    padding:5px 0;
    position: relative;
}

.menuii>li>ul {
    list-style-type: none;
    padding: 0 0;
    margin: 0 0;
}

.menui-right>li:last-child {
    border-bottom: transparent;
}

.menuii li {
    text-indent:10px;
    padding:5px 10px;
}

.menuii li a {
    line-height:26px;
    font-size:15px!important;
    font-family: 'QuicksandM';
    display: block;
    border-bottom: 1px solid #d7d8da;
}

.menuii>li:last-child a {
    border-bottom-color: transparent;
}

.menuiiii {
    list-style-type: none;
    margin: 0 0;
    padding: 0 0;
}

.aside_left ul li .b_toogle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

.aside_left ul li .b_toogle span {
    width:30px;
    height:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:16px;
    color: #555;
    cursor: pointer;
}

.aside_left ul li .b_toogle span i {
    font-size:20px;
}

.aside_left ul li .b_toogle a {
    display: block;
    width: calc(100% - 40px);
}

.aside_left ul li a {
    font-size: 16px;
    font-family: 'QuicksandM';
}

.aside_left ul li a span {
    margin-right:3px;
}

.aside_left ul li .img {
    width: 85px;
    padding-right:10px;
}

.aside_left ul li a .img img {
    width: 75px;
    height: 50px;
    object-fit: cover;
}

.aside_left ul li a h4 {
    font-size: 14px;
    line-height:20px;
    color: #555
}

.menui-right li a:hover {
    color: red;
}

.menui-right>li>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #eee;
    display: none;
}


/* */

.home_blog_area{
    padding:30px 0;
}
.pn-search-m{
    display:none;
    visibility:hidden
}

/**/
.m__menu{
    display:none;
    visibility:hidden;
}
.sub_cate{
    margin-bottom:10px;
    display:none;
    visibility:hidden;
}
.sub_cate ul{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}
.sub_cate ul li{
    padding:5px 5px 5px 0;
}
.sub_cate ul li a{
    font-family:'QuicksandM';
}

.pagination-style{
    padding:10px 0;
}

.br-xemthem {
    background: linear-gradient(to bottom, rgba(255 255 255/0), rgba(255 255 255/62.5), rgba(255 255 255/1));
    height: 105px;
    left: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-top: 51px;
}

.btn-xemthem {
    border: 1px solid;
    border-radius: 30px;
    padding: 5px 30px 7px;
    background-color:var(--color-2);
    color:#fff;
    border-color:transparent;
    line-height:1;
}

.chitiet_danhmuc {
    transition: all 0.4s linear;
    margin-bottom: 30px;
    font-size:16px;
    line-height:1.625;
}
.footer-newsletter{
    margin-top:10px;
}

.gird_bannerHome{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap:30px;
}


@media screen and (min-width: 1600px){
   .container{
      max-width:1400px;
   }
}
@media screen and (max-width: 1580px){
    .container{
        max-width:1300px;
    }
    .pn-menu .container{
        max-width:100%;
    }
    
}
@media screen and (max-width: 1400px){
    .menuList-primary > li{
        margin:0 5px;
    }
}
@media screen and (max-width: 1400px){
    .menuList-primary > li > a{
        font-size:13px
    }
}
@media screen and (max-width: 1200px){
    .df-heading .center{
        width: calc(100% - 500px);
    }
    .menuList-primary{
        text-align:center;
    }
    .gird_bannerHome{
        grid-gap:20px;
    }
    
}
@media screen and (max-width:1100px){
  
   .heading_ht{
    display:none;
   }
}
@media screen and (max-width:991px){
    .gird_bannerHome{
        grid-template-columns:1fr 1fr;
    }
    .sub_cate{
        display:block;
        visibility:visible;
    }
    .m__menu{
    display:block;
    visibility:visible;
   }
   .m__menu .navbar-toggle{
    margin-top:0;
    margin-bottom:0;
    padding-left:0;
   }
   .navbar-toggle .icon-bar{
      background-color:#fff;
   }

   .pn-banner{
    display:none;
   }
   .pn-menu{
    display:none;
   }
   .hidden-991{
    display:none;
   }
   .search_form .form-group{
     margin-bottom:0;
   }
   .df-heading .center{
     display:none;
     visibility:hidden;
   }
   .pn-search-m{
     display:block;
     visibility:visible;
     padding:10px 0;
    }
    .gird_products{
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
    .row_products_side{
        display:none;
    }

}
@media screen and (max-width:850px){
    .gird_products,#product-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width:700px){
    .gird_products,#product-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width:650px){
    .heading-box .title{
        font-size:20px;
    }
    .sub_cate{
        max-height:200px;
        overflow-x:auto;
        border:1px solid #ddd;
        padding:5px 5px 10px 5px;
        border-radius:5px;
    }
    .toolbar .orderby-wrapper{
        justify-content:flex-end;
    }
   .sub_cate ul{
    grid-template-columns:1fr 1fr;
   }
   .tolbar__area{
    flex-direction:column-reverse;
   }
   .heading-box,.toolbar{
    width:100%;
   }
   .footer-top-area{
    padding-top:30px;
   }
   .item_product .img{
    padding-bottom:90%;
   }
   .gird_bannerHome{
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
    .cate_pro > a{
        display:none;
    }
    .cate_pro .text-center{
        display:none;
    }
    .gird_bannerHome{
        grid-gap:10px;
    }
    .cate_pro .body_c .content .title{
        font-size:13px;
        margin-bottom:0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:3;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cate_pro .body_c{
        padding:5px;
    }
    .cate_pro{
        margin-bottom:0;
       
    }
    .cate_pro .body_c{
      min-height:65px;
      display:flex;
        align-items:center;
        justify-content:center;
    }
    .danhmucsp{
        padding-top:15px;
    }
    

}
@media screen and (max-width:500px){
    .hc-offcanvas-nav .nav-container{
        top:65px!important;
    }
}