@media (max-width: 1279px) {
    .product-card a:hover h3,
    .group:hover .product-name{
        color: #D52128;
    }

    #brochure a:hover {
        background-color: #D52128;
    }

    .filter-trigger {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 8px;
        border-radius: 8px;
        border: none;

        font-size: 14px;
        font-weight: 500;
        line-height: 1.42857;

        cursor: pointer;

        color: #0C0C0C;
        background-color: #F6F6F6;

        transition: background-color 0.1s ease, color 0.1s ease;
    }

    /* Hover */
    .filter-trigger:hover {
        background-color: #FEE2E2;
    }

    /* Active */
    .filter-trigger.active {
        font-weight: 700;
        background-color: #FEE2E2;
        color: #D52128;
    }

    .filter-pill {
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 8px 12px;
        min-width: 80px;

        font-size: 14px;
        font-weight: 500;
        line-height: 1.42857;

        color: #0C0C0C;
        background-color: #FFFFFF;

        border: 1px solid #ABABAB;
        border-radius: 9999px;

        cursor: pointer;

        transition: color 0.1s ease,
            background-color 0.1s ease,
            border-color 0.1s ease;
    }

    /* Checked state (peer) */
    .peer:checked+.filter-pill {
        color: #D52128;
        background-color: #FEE2E2;
        border-color: #D52128;
    }
}

@media (min-width: 1024px) {}

.pseudo-checkbox::before,
.parent-checkbox::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/icon-checkbox-red.08c64764240b.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.parent-checkbox::before {
    background-image: url("../images/icon-minus.3691e6eafd3c.svg");
}

.peer:checked+.pseudo-checkbox::before,
.peer:checked+.parent-checkbox::before {
    opacity: 1;
}

/* Swipper */

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background-color: #D1D1D1;
    transition: all 0.25s ease;
}

.swiper-pagination-bullet-active {
    background-color: #D52128;
}
#product .dropdown-content-body h2 {
    font-size: 36px;

}
#product .dropdown-content-body > *{
    /* margin-bottom: 24px; */
}
/* #product .dropdown-content-body > img{
    width: 100%;
} */

#products-filter-form label{
    /* user-select: none; */
    -webkit-user-select: none;
    /* Safari cũ + iOS */
    -webkit-touch-callout: none;
    /* iOS Safari (ngăn menu callout) */
    -moz-user-select: none;
    /* Firefox cũ (thỉnh thoảng vẫn cần) */
    -ms-user-select: none;
    /* IE/Edge cũ */
    user-select: none;
}
.drop_down_top_image_description > *{
    display: inline;
    margin-right: 2px;
}
.drop_down_top_image_description > * > br{
    display: none;
}

@media (min-width: 640px) {

.drop_down_top_image_description > *{
    display: block;
    margin-right: 0px;
}
.drop_down_top_image_description > * > br{
    display: block;
}
}

.dropdown-header-wrapper::-webkit-scrollbar {
  width: 0px;               /* Độ rộng cho scroll dọc */
  height: 10px;              /* Độ cao cho scroll ngang */
}

/* 2. Thiết kế phần nền (Track) */
.dropdown-header-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;
}

/* 3. Thiết kế phần thanh trượt (Thumb) */
.dropdown-header-wrapper::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* Tạo khoảng trống giả xung quanh thumb */
}

/* 4. Hiệu ứng khi di chuột vào (Hover) */
.dropdown-header-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555; 
}