/* ==========================================================================
   ITEM CARD GRID / INSPIRATION PRODUCTS - PURE BEM STANDARD
   ========================================================================== */

.item-card-grid {
    padding: clamp(60px, 8vw, 90px) 0;
    background-color: var(--color-primary, #ffffff);
}

.item-card-grid__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.item-card-grid__header {
    text-align: center;
    margin-bottom: 40px;
}

/* Áp dụng kế thừa style qua thẻ h2 bên trong wrapper */
.item-card-grid__header h2,
.item-card-grid__title-top h2,
.item-card-grid__title-sub h2 {
    color: var(--text-title);
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.item-card-grid__title-top {
    display: block;
}

.item-card-grid__title-sub {
    display: block;
    margin-top: 4px;
}

.item-card-grid__header p {
    color: var(--text-dark, #0F0F0F);
    opacity: 0.85;
    max-width: 650px;
    margin: 10px auto 0 auto;
}

/* LƯỚI SẢN PHẨM DESKTOP (Được đặt làm mặc định toàn cầu) */
.item-card-grid__desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Ẩn phần giao diện mobile swiper mặc định */
.item-card-grid__mobile {
    display: none;
}

/* GIỮ LẠI ĐỂ TRÁNH LỖI HTML NHƯNG SẼ KHÔNG HIỂN THỊ DO BỊ ẨN BỞI .item-card-grid__mobile */
.item-card-grid__swiper {
    overflow: hidden;
    padding-bottom: 4px;
}

.item-card-grid__progress-bar {
    width: 140px;
    height: 4px;
    background-color: #f2eedf;
    border-radius: 4px;
    margin: 24px auto 0 auto;
    position: relative;
    overflow: hidden;
}

.item-card-grid__progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background-color: var(--color-accent, #3d4734);
    border-radius: 4px;
    transition: left 0.3s ease;
}