/*
|--------------------------------------------------------------------------
| DMC LAYOUT SYSTEM v1.0
|--------------------------------------------------------------------------
|
| Chỉ quản lý bố cục dùng chung.
| Không chứa màu sắc hoặc giao diện riêng của Card.
|
*/


/* =====================================================
   SECTION
===================================================== */

.dmc-section {
    margin-bottom: var(--dmc-section-gap);
}

.dmc-section__body {
    margin-top: var(--dmc-space-md);
}


/* =====================================================
   HORIZONTAL SCROLL
===================================================== */

.dmc-scroll-row {
    display: flex;
    flex: 0 0 auto;
    gap: var(--dmc-card-gap);
    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: var(--dmc-space-sm);

    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dmc-scroll-row::-webkit-scrollbar {
    display: none;
}

.dmc-scroll-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}


/* =====================================================
   GRID
===================================================== */

.dmc-grid {
    display: grid;
    gap: var(--dmc-card-gap);
}

.dmc-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dmc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dmc-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {
    .dmc-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dmc-grid--3,
    .dmc-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =====================================================
   PRODUCT CARD WIDTH IN HORIZONTAL SCROLL
===================================================== */

.dmc-scroll-row .dmc-product-card {
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
}