/* ==========================
   D GRID SYSTEM
   ========================== */

:root {
    --d-gap: 12px;
}

/* GAP OPTIONS */

.gap-0{--d-gap:0px;}
.gap-1{--d-gap:4px;}
.gap-2{--d-gap:8px;}
.gap-3{--d-gap:12px;}
.gap-4{--d-gap:16px;}
.gap-5{--d-gap:20px;}
.gap-6{--d-gap:24px;}
.gap-7{--d-gap:28px;}
.gap-8{--d-gap:32px;}
.gap-9{--d-gap:36px;}
.gap-10{--d-gap:40px;}

.gap-1px{--d-gap:1px;}.gap-2px{--d-gap:2px;}.gap-3px{--d-gap:3px;}.gap-4px{--d-gap:4px;}.gap-5px{--d-gap:5px;}.gap-6px{--d-gap:6px;}.gap-7px{--d-gap:7px;}.gap-8px{--d-gap:8px;}.gap-9px{--d-gap:9px;}.gap-10px{--d-gap:10px;}.gap-11px{--d-gap:11px;}.gap-12px{--d-gap:12px;}.gap-13px{--d-gap:13px;}.gap-14px{--d-gap:14px;}.gap-15px{--d-gap:15px;}.gap-16px{--d-gap:16px;}.gap-17px{--d-gap:17px;}.gap-18px{--d-gap:18px;}.gap-19px{--d-gap:19px;}.gap-20px{--d-gap:20px;}.gap-21px{--d-gap:21px;}.gap-22px{--d-gap:22px;}.gap-23px{--d-gap:23px;}.gap-24px{--d-gap:24px;}.gap-25px{--d-gap:25px;}.gap-26px{--d-gap:26px;}.gap-27px{--d-gap:27px;}.gap-28px{--d-gap:28px;}.gap-29px{--d-gap:29px;}.gap-30px{--d-gap:30px;}.gap-31px{--d-gap:31px;}.gap-32px{--d-gap:32px;}.gap-33px{--d-gap:33px;}.gap-34px{--d-gap:34px;}.gap-35px{--d-gap:35px;}.gap-36px{--d-gap:36px;}.gap-37px{--d-gap:37px;}.gap-38px{--d-gap:38px;}.gap-39px{--d-gap:39px;}.gap-40px{--d-gap:40px;}.gap-41px{--d-gap:41px;}.gap-42px{--d-gap:42px;}.gap-43px{--d-gap:43px;}.gap-44px{--d-gap:44px;}.gap-45px{--d-gap:45px;}.gap-46px{--d-gap:46px;}.gap-47px{--d-gap:47px;}.gap-48px{--d-gap:48px;}.gap-49px{--d-gap:49px;}.gap-50px{--d-gap:50px;}.gap-51px{--d-gap:51px;}.gap-52px{--d-gap:52px;}.gap-53px{--d-gap:53px;}.gap-54px{--d-gap:54px;}.gap-55px{--d-gap:55px;}.gap-56px{--d-gap:56px;}.gap-57px{--d-gap:57px;}.gap-58px{--d-gap:58px;}.gap-59px{--d-gap:59px;}.gap-60px{--d-gap:60px;}.gap-61px{--d-gap:61px;}.gap-62px{--d-gap:62px;}.gap-63px{--d-gap:63px;}.gap-64px{--d-gap:64px;}.gap-65px{--d-gap:65px;}.gap-66px{--d-gap:66px;}.gap-67px{--d-gap:67px;}.gap-68px{--d-gap:68px;}.gap-69px{--d-gap:69px;}.gap-70px{--d-gap:70px;}.gap-71px{--d-gap:71px;}.gap-72px{--d-gap:72px;}.gap-73px{--d-gap:73px;}.gap-74px{--d-gap:74px;}.gap-75px{--d-gap:75px;}.gap-76px{--d-gap:76px;}.gap-77px{--d-gap:77px;}.gap-78px{--d-gap:78px;}.gap-79px{--d-gap:79px;}.gap-80px{--d-gap:80px;}.gap-81px{--d-gap:81px;}.gap-82px{--d-gap:82px;}.gap-83px{--d-gap:83px;}.gap-84px{--d-gap:84px;}.gap-85px{--d-gap:85px;}.gap-86px{--d-gap:86px;}.gap-87px{--d-gap:87px;}.gap-88px{--d-gap:88px;}.gap-89px{--d-gap:89px;}.gap-90px{--d-gap:90px;}.gap-91px{--d-gap:91px;}.gap-92px{--d-gap:92px;}.gap-93px{--d-gap:93px;}.gap-94px{--d-gap:94px;}.gap-95px{--d-gap:95px;}.gap-96px{--d-gap:96px;}.gap-97px{--d-gap:97px;}.gap-98px{--d-gap:98px;}.gap-99px{--d-gap:99px;}.gap-100px{--d-gap:100px;}

/* ==========================
   RESET FLATSOME GUTTER
   ========================== */

.d_grid .row{
    margin-left:0;
    margin-right:0;
}

.d_grid .col,
.d_grid .columns,
.d_grid .gallery-item{
    padding-left:0;
    padding-right:0;
    padding-bottom: 0 ;
}

.d_grid > .col {
    padding-left: 15px ;
    padding-right: 15px ;
}

.d_grid .row:not(.row-collapse){
    display:flex;
    flex-wrap:wrap;
    gap:var(--d-gap)
}

/* ==========================
   LARGE COLUMNS
   ========================== */

.d_grid .large-columns-1>.col{
    flex:0 0 100%;
    max-width:100%;
}

.d_grid .large-columns-2>.col{
    flex:0 0 calc((100% - var(--d-gap))/2);
    max-width:calc((100% - var(--d-gap))/2);
}

.d_grid .large-columns-3>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
    max-width:calc((100% - (var(--d-gap) * 2))/3);
}

.d_grid .large-columns-4>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
    max-width:calc((100% - (var(--d-gap) * 3))/4);
}

.d_grid .large-columns-5>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
    max-width:calc((100% - (var(--d-gap) * 4))/5);
}

.d_grid .large-columns-6>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
    max-width:calc((100% - (var(--d-gap) * 5))/6);
}

.d_grid .large-columns-7>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 6))/7);
    max-width:calc((100% - (var(--d-gap) * 6))/7);
}

.d_grid .large-columns-8>.col{
    flex:0 0 calc((100% - (var(--d-gap) * 7))/8);
    max-width:calc((100% - (var(--d-gap) * 7))/8);
}

/* ==========================
   MEDIUM
   ========================== */

@media(max-width:849px){

    .d_grid .medium-columns-1>.col{
        flex:0 0 100%;
        max-width:100%;
    }

    .d_grid .medium-columns-2>.col{
        flex:0 0 calc((100% - var(--d-gap))/2);
        max-width:calc((100% - var(--d-gap))/2);
    }

    .d_grid .medium-columns-3>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
        max-width:calc((100% - (var(--d-gap) * 2))/3);
    }

    .d_grid .medium-columns-4>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
        max-width:calc((100% - (var(--d-gap) * 3))/4);
    }

    .d_grid .medium-columns-5>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
        max-width:calc((100% - (var(--d-gap) * 4))/5);
    }

    .d_grid .medium-columns-6>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
        max-width:calc((100% - (var(--d-gap) * 5))/6);
    }

}

/* ==========================
   SMALL
   ========================== */

@media(max-width:549px){

    .d_grid .small-columns-1>.col{
        flex:0 0 100%;
        max-width:100%;
    }

    .d_grid .small-columns-2>.col{
        flex:0 0 calc((100% - var(--d-gap))/2);
        max-width:calc((100% - var(--d-gap))/2);
    }

    .d_grid .small-columns-3>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 2))/3);
        max-width:calc((100% - (var(--d-gap) * 2))/3);
    }

    .d_grid .small-columns-4>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 3))/4);
        max-width:calc((100% - (var(--d-gap) * 3))/4);
    }

    .d_grid .small-columns-5>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 4))/5);
        max-width:calc((100% - (var(--d-gap) * 4))/5);
    }

    .d_grid .small-columns-6>.col{
        flex:0 0 calc((100% - (var(--d-gap) * 5))/6);
        max-width:calc((100% - (var(--d-gap) * 5))/6);
    }

}

/* ==========================
   FIX FLATSOME WIDTH
   ========================== */

.d_grid .row,
.d_grid .row-small,
.d_grid .row-large{
    max-width:none;
}

/* --------------------------------------------------------------------------------------- */

/* ====================================
   FLATSOME PRODUCT GRID GAP SYSTEM
   ==================================== */

.products.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    display:flex;
    flex-wrap:wrap;
    gap: 15px;
}

/* bỏ gutter flatsome */

.products.row > .product-small{
    padding:0;
    margin:0;
}

/* ===== DESKTOP ===== */

.products.large-columns-1 > .product-small{
    flex:0 0 100%;
    max-width:100%;
}

.products.large-columns-2 > .product-small{
    flex:0 0 calc((100% - 12px)/2);
    max-width:calc((100% - 12px)/2);
}

.products.large-columns-3 > .product-small{
    flex:0 0 calc((100% - 24px)/3);
    max-width:calc((100% - 24px)/3);
}

.products.large-columns-4 > .product-small{
    flex:0 0 calc((100% - 36px)/4);
    max-width:calc((100% - 36px)/4);
}

.products.large-columns-5 > .product-small{
    flex:0 0 calc((100% - 48px)/5);
    max-width:calc((100% - 48px)/5);
}

.products.large-columns-6 > .product-small{
    flex:0 0 calc((100% - 60px)/6);
    max-width:calc((100% - 60px)/6);
}

/* ===== TABLET ===== */

@media(max-width:849px){

    .products.medium-columns-1 > .product-small{
        flex:0 0 100%;
        max-width:100%;
    }

    .products.medium-columns-2 > .product-small{
        flex:0 0 calc((100% - 12px)/2);
        max-width:calc((100% - 12px)/2);
    }

    .products.medium-columns-3 > .product-small{
        flex:0 0 calc((100% - 24px)/3);
        max-width:calc((100% - 24px)/3);
    }

    .products.medium-columns-4 > .product-small{
        flex:0 0 calc((100% - 36px)/4);
        max-width:calc((100% - 36px)/4);
    }

}

/* ===== MOBILE ===== */

@media(max-width:549px){

    .products.small-columns-1 > .product-small{
        flex:0 0 100%;
        max-width:100%;
    }

    .products.small-columns-2 > .product-small{
        flex:0 0 calc((100% - 12px)/2);
        max-width:calc((100% - 12px)/2);
    }

    .products.small-columns-3 > .product-small{
        flex:0 0 calc((100% - 24px)/3);
        max-width:calc((100% - 24px)/3);
    }

}

/* ==========================================
   SCROLLBAR TOÀN TRANG
========================================== */

::-webkit-scrollbar{
    width:6px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#efefef;
}

::-webkit-scrollbar-thumb{
    background:var(--fs-color-primary);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--fs-color-primary);
}


/* ==========================================
   SCROLLBAR RIÊNG CHO MÔ TẢ SẢN PHẨM
========================================== */

.archive-short-desc{
    min-height: 110px;
    max-height: 110px;
    overflow-y:auto;
    overflow-x:hidden;
}

.archive-short-desc::-webkit-scrollbar{
    width:4px;
}

.archive-short-desc::-webkit-scrollbar-track{
    background:#efefef;
    border-radius:999px;
}

.archive-short-desc::-webkit-scrollbar-thumb{
    background:var(--fs-color-primary);
    border-radius:999px;
}

.archive-short-desc::-webkit-scrollbar-thumb:hover{
    background:var(--fs-color-primary);
}