/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

#product-category-section .card-block-title>.container,
.product-category-row > .col-cover>.container {
    width: 100%;
    padding: 0;
}

.product-category-wrapper {
    position: relative;
}
.product-category-wrapper + .product-category-wrapper {
    margin-top: 50px;
}
.product-category-wrapper .menu-sub-category-row {
    padding-top: 5px;
}
.product-category-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
.product-category-row,
.cover-product-category > .inside {
    height: 550px;
}
.product-category-row > .col-cover {
    position: relative;
    width: 305px;
    z-index: 1;
}
.cover-product-category {
    position: relative;
}
.cover-product-category > .inside {
    position: relative;
    display: block !important;
    width: 100%;
    border-radius: 10px;
    background: #ccc;
    overflow: hidden;
}
.cover-product-category > .inside::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 2;
}
.cover-product-category .img-cover {
    width: 100% !important;
    height: 100% !important;
}
.cover-product-category .title-group {
    position: absolute;
    width:calc(100% - 60px);
    height: auto;
    bottom: 0;
    left: 30px;
    right: 0;
    text-align: left;
    color: rgba(255,255,255,1) !important;
    padding-bottom: 20px;
    margin-bottom: 30px;
    z-index: 3;
}
.cover-product-category > .inside .title-group::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: rgba(255,255,255,1);
    transition: width 0.3s ease;
	-webkit-transition: width 0.3s ease;
	-moz-transition: width 0.3s ease;
	-ms-transition: width 0.3s ease;
	-o-transition: width 0.3s ease;
}
.cover-product-category > .inside:hover .title-group::before {
    width: 80px;
}
.cover-product-category .title-group>.title {
    font-size: 20px;
    line-height: 25px;
}
.cover-product-category .title-group>.title.th {
    display: none;
}
.cover-product-category .title-group>.title.en {
    font-family: 'rubik';
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase !important;
}
.cover-product-category .title-group>.detail {
    font-size: 12px;
    line-height: 20px;
}


/* .product-category-row {
    background-color: rgba(255,0,0,0.2);
}
.product-category-row .card-block.product {
    opacity: 0.5;
    background-color: rgba(0,255,0,0.8);
} */
.product-category-row > .col-product {
    position: relative;
    flex: 1 0 0%;
    width: calc(100% - 305px);
    z-index: 2;
    /* padding-left: 20px !important; */
}
.product-category-row > .col-product .card-block-row.product {
    top: -25px;
    /* width: calc(100% + 80px); */ /* left 20+30 - right 30 */
    /* left: -40px; */
    width: calc(100% + 20px); /* left 20 - right 30 */
    left: 0;
}
.product-category-row > .col-product .card-block-row.product:before,
.product-category-row > .col-product .card-block-row.product:after {
    position: absolute;
    content: '';;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 20px;
}
.product-category-row > .col-product .card-block-row.product:before {
    /* left: 0;
    right: auto;
    width: 60px; */
    left: 0;
    background: linear-gradient( to right, rgba(250,250,250,1) 30% , rgba(250,250,250,0) );
    /* opacity: 0.3; */
}
.product-category-row > .col-product .card-block-row.product:after {
    /* left: auto;
    right: 0;
    width: 40px; */
    right: 0;
    background: linear-gradient( to left, rgba(250,250,250,1) 30% , rgba(250,250,250,0) );
}
.product-category-row > .col-product .card-block-row.product .splide-arrows>.splide-arrow {
    z-index: 15;
}

/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

#product-result-section {    
}

/* ----- filter btn ----- */

#btn-filter-section,
.filter-btn-row,
.filter-btn-row>[class*="col-"] {
    position: relative;
}
#btn-filter-section {
    padding: 20px 0 30px 0 !important;
    z-index: 50;
}
.filter-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 41px;
}
.filter-btn-row>.col-btn-filter {
    flex: 1 0 0%;
}
/* .filter-btn-row>.col-mobile-filter {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
} */

.btn-filter {}
.btn-filter-on-outside.selected {
    display: none !important;
    opacity: 0 !important;
}

/* ----- mobile filter ----- */

.mobile-filter-row {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    height: 35px;
    line-height: 35px;
}
.mobile-filter-row>[class*="col-"] {
    position: relative;
}
.mobile-filter-row>.col-filter,
.mobile-filter-row>.col-sort {
    height: 100%;
}
.mobile-filter-row>.col-title,
.mobile-filter-row>.col-filter {
    display: none !important;
}

.dropdown-filter-group {
    position: relative;
}
.dropdown-filter-group .dropdown-filter-section {
    position: absolute;
    display: none;
    width: 250px;
    top: 100%;
    left: auto;
    right: 0;
    line-height: 25px;
}
.dropdown-filter-group .dropdown-filter-section .dropdown-container {
    position: relative;
    display: block;
    padding: 30px !important;
    background-color: rgba(255,255,255,1);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-radius: 5px;   
}
.dropdown-filter-group .dropdown-filter-section .dropdown-container ul.product-filter-option.border-middle-format>li+li {
    border-color: rgba(0,0,0,0.05);
}
.dropdown-filter-group .dropdown-filter-section .dropdown-container .product-filter-option-btn {
    padding: 10px 0 !important;
}

/* 

#btn-sort-product {
    width: 200px;
}
#btn-sort-product .field-group {
    padding: 0 !important;
}
#btn-sort-product .field-group>.field.select-field {
    border-radius: 0 !important;
    background: none !important;
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 !important;
}
#btn-sort-product .field-group > .field > .input-text {
    padding-right: 30px !important;
}
#btn-sort-product .field-group > .field > .label-text ,
#btn-sort-product .field-group > .field > .input-text,
#btn-sort-product .field-group > .field > .icon.right>i {
    line-height: 35px !important;
}
#btn-sort-product .field-group > .field > .icon.right {
    padding-right: 0 !important;
    width: 30px !important;
    height: 35px !important;
    line-height: 35px !important;
} */

/* ----- selected filter ----- */

#selected-filter-section {
    position: relative;
    margin-bottom: 30px;
}
.btn-remove-filter {
    cursor: default !important;
}
.btn-remove-filter .this-remove-filter {
    cursor: pointer !important;
}

/* ----- result filter ----- */

#result-filter-section {
    z-index: 1;
}
#result-filter-section .result-filter-row {
    position: relative;
    min-height: 517px;
}
.scroll-fixed-box #result-filter-section .result-filter-row.container,
.scroll-fixed-box #result-filter-section .result-filter-title.container {
    padding: 0 !important;
}

/* title */
#result-filter-section .title-row {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,1);
}

#check-result-section {
    position: relative;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

#loading-result-section {
    position: absolute !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
}

#product-result-found,
#product-result-not-found {
    position: relative;
    z-index:1;
}
#product-result-not-found {

}


/* --------------------------------------------------------------- */
/* ---------------------- PRODUCT BY BRANDS ---------------------- */
/* --------------------------------------------------------------- */

.card-block-row.brand {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    margin: 0 -10px;
}
.card-block.brand {
    width: calc(100% / 7);
    padding: 0 10px;
    margin-bottom: 20px;
}
.card-block.brand>.inside {
    display: block;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer !important;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}
.card-block.brand>.inside:hover {
    border-color: rgba(0,0,0,1);
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY USAGE ---------------------- */
/* --------------------------------------------------------------- */

.card-block-row.usage-category {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 20px);
    margin: 0 -10px;
}
.card-block.usage-category {
    width: calc(100% / 4);
    padding: 0 10px;
    margin-bottom: 20px;
}
.card-block.usage-category>.inside {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer !important;
}
.card-block.usage-category .img-usage-category-sec {
    position: relative;
    z-index: 1;
}
.card-block.usage-category .text-usage-category-sec {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background-color: rgba(0,0,0,0.6);
    color: rgba(255,255,255,1);
    z-index: 2;
    transition: background-color 0.2s ease;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
}
.card-block.usage-category>.inside:hover .text-usage-category-sec {
    background-color: rgba(0,0,0,0.8);    
}
.card-block.usage-category .text-usage-category-sec>.en,
.card-block.usage-category .text-usage-category-sec>.th {
    width: 100% !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.card-block.usage-category .text-usage-category-sec>.en {
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase !important;
}
.card-block.usage-category .text-usage-category-sec>.th {
    /* font-size: 12px;
    line-height: 20px; */
}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

.product-category-row, .cover-product-category > .inside {
    height: 510px;
}
.product-category-row > .col-cover {
    width: 260px;
}
.product-category-row > .col-product {
    width: calc(100% - 260px);
}

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed {   
    display: none !important; 
}
#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-content { 
    width: 100% !important;  
    padding: 0 !important;
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

.product-category-row, .cover-product-category > .inside {
    height: 540px;
}
.product-category-row > .col-cover {
    width: 293.33px;
}
.product-category-row > .col-product {
    width: calc(100% - 293.33px);
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY BRAND ---------------------- */
/* --------------------------------------------------------------- */

.card-block.brand {
    width: calc(100% / 6);
    padding: 0 5px;
    margin-bottom: 10px;
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY USAGE ---------------------- */
/* --------------------------------------------------------------- */

.card-block.usage-category {
    width: calc(100% / 3);
}

}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed {   
    display: none !important; 
}
#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-content { 
    width: 100% !important;  
    padding: 0 !important;
}
    
/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

/* product */

#product-category-section>.container {
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
}
#product-category-section .card-block-title>.container,
.product-category-row > .col-cover>.container {
    width: inherit !important;
    padding: 0 20px !important;
}

.product-category-wrapper + .product-category-wrapper {
    margin-top: 20px;
}

.product-category-row, .cover-product-category > .inside {
    height: auto !important;
}
.product-category-row {
    display: block;
}
.product-category-row > .col-cover {
    width: 100% !important;
    flex: none !important;
}
.product-category-row > .col-product {
    width: 100% !important;
    margin: 0 !important;
}
.product-category-row > .col-product .card-block-row.product {
    top: auto;
    left:  auto;
    width: 100% !important;
}

.product-category-wrapper .title-row>.col-dot-slide {
    display: none !important;
}
.product-category-wrapper .menu-sub-category-row {
    display: none !important;
}

/* slide product */
.product-category-row > .col-product .card-block-row.product:before,
.product-category-row > .col-product .card-block-row.product:after {
    display: none !important;
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY BRAND ---------------------- */
/* --------------------------------------------------------------- */

.card-block.brand {
    width: calc(100% / 4);
    padding: 0 5px;
    margin-bottom: 10px;
}


/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY USAGE ---------------------- */
/* --------------------------------------------------------------- */

.card-block.usage-category {
    width: 50%;
}

}

/* sm - xs */
@media (max-width: 767.98px) {

/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-fixed {   
    display: none !important; 
}
#product-result-section .scroll-fixed-box>.sf-box-inside>.sf-box-col.col-content { 
    width: 100% !important;  
    padding: 0 !important;
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT BY USAGE ---------------------- */
/* --------------------------------------------------------------- */

.card-block-row.usage-category {
    width: calc(100% + 10px);
    margin: 0 -5px;
}
.card-block.usage-category {
    width: 50%;
    padding: 0 5px;
    margin-bottom: 10px;
}

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    
/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

/* cover */

.cover-product-category .title-group {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    left: 0;
    text-align: center;
    padding: 30px !important;
    margin: 0 !important;
}
.cover-product-category .title-group>.title,
.cover-product-category .title-group>.detail {
    width: 100%;
}
.cover-product-category .title-group>.title.en {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.cover-product-category > .inside .title-group::before {
    display: none !important;
}


/* product */

#product-category-section>.container {
    width: 100% !important;
    padding: 0 !important;
    max-width: 100% !important;
}
#product-category-section .card-block-title>.container,
.product-category-row > .col-cover>.container {
    width: inherit !important;
    padding: 0 20px !important;
}

.product-category-wrapper + .product-category-wrapper {
    margin-top: 20px;
}

.product-category-row, .cover-product-category > .inside {
    height: auto !important;
}
.product-category-row {
    display: block;
}
.product-category-row > .col-cover {
    width: 100% !important;
    flex: none !important;
}
.product-category-row > .col-product {
    width: 100% !important;
    margin: 0 !important;
}
.product-category-row > .col-product .card-block-row.product {
    top: auto;
    left:  auto;
    width: 100% !important;
}

.product-category-wrapper .title-row>.col-dot-slide {
    display: none !important;
}
.product-category-wrapper .menu-sub-category-row {
    display: none !important;
}

/* slide product */
.product-category-row > .col-product .card-block-row.product:before,
.product-category-row > .col-product .card-block-row.product:after {
    display: none !important;
}

/* --------------------------------------------------------------- */
/* ---------------------- PRODUCT BY BRANDS ---------------------- */
/* --------------------------------------------------------------- */

.card-block-row.brand {
    width: calc(100% + 10px);
    margin: 0 -5px;
}
.card-block.brand {
    width: calc( 100% / 3 );
    padding: 0 5px;
    margin-bottom: 10px;
}

}

/* xs */
@media (max-width: 575.98px) {

#product-page {
    background: none !important;
}
#product-page #loading-result-section {
    background-color: rgba(255,255,255,1) !important;
}

/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

#title-result-product {
    background-color: rgba(0,0,0,0.05) !important;
    padding: 20px 0 !important;
    text-align: center !important;
}
#btn-filter-section,
#btn-filter-section>.container {
    height: 60px !important;
    padding: 0 !important;
}
#btn-filter-section>.container {    
    background-color: rgba(255,255,255,1);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
#btn-filter-section.fixed>.container {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;      
    z-index: 1000;
}

.filter-btn-row {
    height: 100%;
}
.filter-btn-row>.col-btn-filter {
    display: none !important;
}
.filter-btn-row>.col-mobile-filter {
    flex: 1 0 0 !important;
    width: 100%;
}

/* ----- mobile filter ----- */

.mobile-filter-row {
    height: 60px;
    line-height: 60px;
}
.mobile-filter-row>[class*="col-"] {}
.mobile-filter-row>.col-title,
.mobile-filter-row>.col-filter {
    display: block !important;
}
.mobile-filter-row>.col-title {
    flex: 1 0 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    line-height: 25px;
    font-weight: 700;
}
.mobile-filter-row>.col-title,
#btn-filter-product,
#btn-sort-product {
    padding: 0 20px !important;
}
.mobile-filter-row>.col-filter:before,
.mobile-filter-row>.col-sort:before {
    position: absolute;
    content: '';
    top: 50%;
    margin-top: -17.5px;
    bottom: 0;
    left: 0;
    height: 35px;
    border-left: 1px solid rgba(0,0,0,0.1);   
}
.dropdown-filter-group .dropdown-filter-section {
    top: 59px;
    border-radius: 0 !important;    
}

/* --------------------------------------------------------------- */
/* ----------------------- PRODUCT CATEGORY ---------------------- */
/* --------------------------------------------------------------- */

/* cover */

.cover-product-category .title-group {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    left: 0;
    text-align: center;
    padding: 30px !important;
    margin: 0 !important;
}
.cover-product-category .title-group>.title,
.cover-product-category .title-group>.detail {
    width: 100%;
}
.cover-product-category .title-group>.title.en {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
.cover-product-category > .inside .title-group::before {
    display: none !important;
}

/* product */

.product-category-wrapper + .product-category-wrapper {
    margin-top: 20px;
}

.product-category-row, .cover-product-category > .inside {
    height: auto !important;
}
.product-category-row {
    display: block;
}
.product-category-row > .col-cover {
    width: 100% !important;
    flex: none !important;
}
.product-category-row > .col-product {
    width: calc(100% + 40px) !important;
    margin: 0 -20px !important;
}
.product-category-row > .col-product .card-block-row.product {
    top: auto;
    left:  auto;
    width: 100% !important;
}

.product-category-wrapper .title-row>.col-dot-slide {
    display: none !important;
}
.product-category-wrapper .menu-sub-category-row {
    display: none !important;
}

/* slide product */
.product-category-row > .col-product .card-block-row.product:before,
.product-category-row > .col-product .card-block-row.product:after {
    display: none !important;
}

/* --------------------------------------------------------------- */
/* ---------------------- PRODUCT BY BRANDS ---------------------- */
/* --------------------------------------------------------------- */

.card-block-row.brand {
    width: calc(100% + 10px);
    margin: 0 -5px;
}
.card-block.brand {
    width: calc( 100% / 3 );
    padding: 0 5px;
    margin-bottom: 10px;
}

}

/* xs custom */
@media (max-width: 399.98px) {}