/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 09 2026 | 10:00:18 */
.danhmuclocsanpham {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	gap: 20px;
}
span.badge-giam-gia p {
    margin-bottom: 0px;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}
p.off {
    font-size: 14px !important;
}
span.badge-giam-gia {
    display: flex;
    gap: 5px;
    padding: 10px;
    background: #911616;
    border-radius: 5px 0px 0px 0px;
    align-items: flex-end;
}
#san-pham-duoc-loc {
    width: 100%;
}

.sanpham_color_pa {
    gap: 5px;
    display: flex;
}

img.color-image_name_color {
    width: 20px;
}

ul.danh-sach-san-pham {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); /* 4 cột bằng nhau */
    gap: 20px 20px; /* khoảng cách giữa các cột và hàng */
    list-style: none; /* bỏ dấu chấm trước thẻ li */
    padding: 0;
    margin: 0;
}
.danh-sach-san-pham > div {
    width: 100%; /* Bắt buộc full width trong grid-cell */
}
div#bo-loc-san-pham {
    min-width: 250px !important;
    max-width: 250px !important;
}

.filter-group-size-zap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
}

/*  */
label.custom-option_danhmuc_sanpham {
    margin-top: 5px;
}

/* Label của từng option */
.custom-option_danhmuc_sanpham {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f6f1;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    user-select: none;
    white-space: nowrap;
    position: relative;
}

/* Ẩn checkbox mặc định */
.custom-option_danhmuc_sanpham input[type="checkbox"] {
    display: none;
}

/* Khi checkbox được check */
.custom-option_danhmuc_sanpham:has(input[type="checkbox"]:checked) {
    background-color: #333;
    color: white;
    border-color: #333;
}

/* Hover nhẹ khi rê chuột vào */
.custom-option_danhmuc_sanpham:hover {
    border-color: #999;
}

/*  */
.filter-group-colorpa {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Nhóm container cho các label */
.list-color-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.custom-color-loc-color {
    display: flex;
    cursor: pointer;
}

.custom-color-loc-color input[type="checkbox"] {
    display: none;
}

.color-text-wrapper-color-text-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.color-imagecolor-loc-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Khi checkbox được chọn -> hiện viền */
.custom-color-loc-color input[type="checkbox"]:checked + .color-text-wrapper {
    border-color: #333;
}

.custom-option_danhmuc_sanpham input[type="checkbox"] {
    display: none;
}

/* Khi checkbox được check */
.custom-option_danhmuc_sanpham:has(input[type="checkbox"]:checked) {
    background-color: #333;
    color: white;
    border-color: #333;
}
.custom-color-loc-color input[type="checkbox"] {
    display: none;
}

.custom-color-loc-color:has(input[type="checkbox"]:checked) {
    background-color: #333;
    color: white;
    border-color: #333;
    padding: 2px;
    height: 24px;
    border-radius: 5px;
    width: 24px;
}

/* Hover nhẹ khi rê chuột vào */
.custom-option_danhmuc_sanpham:hover {
    border-color: #999;
}

img.color-image-loc-color {
    min-width: 25px !important;
    max-width: 25px !important;
}

/*  */
.custom-option_danhmuc_category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0px;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
    user-select: none;
    white-space: nowrap;
    position: relative;
}

.custom-option_danhmuc_category input[type="checkbox"] {
    display: none;
}

.custom-option_danhmuc_category:has(input[type="checkbox"]:checked) {
    border-color: #333;
    border-bottom: 2px solid #000;
    border-radius: 0px;
}

/* Hover nhẹ khi rê chuột vào */
.custom-option_danhmuc_category:hover {
    border-color: #999;
}

.danhmuclocsanpham .bo-loc-san-pham h4 {
    border-left: 3px solid #000;
    padding-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.duonggachngang {
    background: #000000;
    height: 5px;
    margin-left: 7px;
    min-width: 50% !important;
    max-width: 50% !important;
}

.danh-muc-cap-2 {
    margin-left: 15px;
}

.danh-muc-cap-3 {
    margin-left: 15px;
}

.filter-group-size-zap {
    margin-left: 15px;
}

.filter-group-colorpa {
    margin-left: 15px;
}

button#load-more {
    margin: 0 auto !important;
    display: block;
    margin-top: 2rem !important;
    color: #000;
    border: 1px solid #000;
    padding: 8px 16px 8px 16px;
    border-radius: 10px;
}

button#load-more:hover{
    color: #ffffff;
    background: #000000;
}