/* Tổng thể trang */
    .category-page {
        padding: 3rem 0;
        background-color: #f9f9f9;
    }

    /* Tiêu đề nhóm */
    .group-title {
        border-left: 5px solid #cc2027;
        padding-left: 1rem;
        padding-top: 0.5rem;
        margin-bottom: 2rem;
        font-weight: 800;
        text-transform: uppercase;
        color: #cc2027;
        font-family: var(--playfair-font);
    }
/* Container bao quanh tiêu đề */
.group-title-container {
    display: flex;
    align-items: center;
    border-left: 0.25rem solid #cc2027; /* Giảm độ dày sọc đỏ cho thanh thoát ~4px */
    padding-left: 1rem;                /* Khoảng cách chữ và sọc ~16px */
    margin-bottom: 2rem;               /* Khoảng cách với sản phẩm bên dưới */
    margin-top: 0.5rem;
}

/* Hình ảnh tiêu đề (Mì ăn liền, Bún phở...) */
.group-title-custom-img {
    height: 1rem;               /* GIẢM SIZE: Hạ xuống còn ~48px để vừa mắt hơn */
    width: auto;                /* Giữ tỉ lệ chuẩn của hình */
    max-width: 100%;
    object-fit: contain;
    
    /* Khử bóng đổ quá đậm để nhìn sạch sẽ hơn */
    filter: drop-shadow(0.0625rem 0.125rem 0.25rem rgba(0,0,0,0.08));
}

/* Tablet & Mobile */
@media (max-width: 48rem) { /* ~768px */
    .group-title-custom-img {
        height: 2.2rem;         /* Thu nhỏ thêm một chút trên mobile ~35px */
    }
    .group-title-container {
        padding-left: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .group-title-container {
        border-left-width: 0.25rem; /* ~4px */
        padding-left: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .group-title-custom-img {
        height: 3.5rem;             /* Thu nhỏ trên mobile ~56px */
    }
}
    /* Card Category (Thương hiệu) */
    .cat-item-card {
        position: relative;
        display: block;
        border-radius: 1rem; /* ~16px */
        overflow: hidden;
        aspect-ratio: 1 / 1; /* Giữ khung vuông */
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border: none;
    }

    .cat-item-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
    }

    /* Ảnh nền sản phẩm (mờ) */
    .cat-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85); /* Làm tối nhẹ để nổi logo */
        transition: 0.5s;
    }

    .cat-item-card:hover .cat-bg-image {
        transform: scale(1.1);
    }

    /* Logo thương hiệu nằm giữa (Yes Mom, Fitme...) */
    .brand-logo-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75%; /* Chiếm 75% chiều rộng card */
        z-index: 2;
        pointer-events: none; /* Không cản trở click vào card */
    }

    .brand-logo-overlay img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Hiệu ứng phủ màu mờ */
    .cat-item-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
    }