/* =========================================================
   DLD - CẨM NANG
   KHÁM PHÁ THEO CHỦ ĐỀ
========================================================= */


/* =========================================================
   01. WRAPPER
========================================================= */

.dld-camnang-chude {
    width: 100%;
}


/* =========================================================
   02. DANH SÁCH
========================================================= */

.dld-camnang-chude-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;

    width: 100%;
    gap: 10px;
}


/* =========================================================
   03. CARD
========================================================= */

.dld-camnang-chude-item {
    position: relative;

    flex: 1 1 0;
    min-width: 0;
    min-height: 118px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 12px 9px;

    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #f4f8fd 100%
    );

    border: 1px solid #e3eaf4;
    border-radius: 12px;

    text-align: center;
    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}


/* =========================================================
   04. ICON
========================================================= */

.dld-camnang-chude-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 60px;
    height: 60px;

    margin: 0 0 7px;

    transition: transform .22s ease;
}


.dld-camnang-chude-icon img {
    display: block;

    width: 60px;
    height: 60px;

    max-width: none;

    object-fit: contain;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05. CONTENT
========================================================= */

.dld-camnang-chude-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}


/* =========================================================
   06. TITLE
========================================================= */

.dld-camnang-chude-title {
    display: block;

    margin: 0 0 4px;

    color: #1C2473;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;

    transition: color .2s ease;
}


/* =========================================================
   07. DESCRIPTION
========================================================= */

.dld-camnang-chude-desc {
    display: block;

    max-width: 135px;
    margin: 0 auto;

    color: #778196;

    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
   08. ĐƯỜNG ĐỎ
========================================================= */

.dld-camnang-chude-item::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #EE2D38;

    border-radius: 3px 3px 0 0;

    transform: translateX(-50%);

    transition: width .22s ease;
}


/* =========================================================
   09. HOVER
========================================================= */

.dld-camnang-chude-item:hover {
    background: #ffffff;

    border-color: rgba(238, 45, 56, .22);

    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(28, 36, 115, .09);
}


.dld-camnang-chude-item:hover::after {
    width: 42%;
}


.dld-camnang-chude-item:hover
.dld-camnang-chude-title {
    color: #EE2D38;
}


.dld-camnang-chude-item:hover
.dld-camnang-chude-icon {
    transform: translateY(-2px) scale(1.04);
}


/* =========================================================
   10. BULLET
   DESKTOP / TABLET: ẨN
========================================================= */

.dld-camnang-chude-dots {
    display: none;
}


/* =========================================================
   11. TABLET
========================================================= */

@media (max-width: 849px) and (min-width: 550px) {

    .dld-camnang-chude-list {
        flex-wrap: wrap;
        gap: 10px;
    }


    .dld-camnang-chude-item {
        flex: 0 0 calc(25% - 7.5px);

        min-height: 116px;
    }


    .dld-camnang-chude-icon {
        width: 56px;
        height: 56px;
    }


    .dld-camnang-chude-icon img {
        width: 56px;
        height: 56px;
    }

}


/* =========================================================
   12. MOBILE
   2 SLIDE
   MỖI SLIDE 4 CARD - 2 x 2
========================================================= */

@media (max-width: 549px) {

    .dld-camnang-chude {
        width: 100%;
        overflow: hidden;
    }


    /* =====================================================
       SLIDER
    ===================================================== */

    .dld-camnang-chude-list {
        display: grid;

        grid-template-rows:
            repeat(2, 116px);

        grid-auto-flow: column;

        grid-auto-columns:
            calc((100% - 8px) / 2);

        column-gap: 8px;
        row-gap: 8px;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        padding: 0;
        margin: 0;
    }


    .dld-camnang-chude-list::-webkit-scrollbar {
        display: none;
    }


    /* =====================================================
       CARD
    ===================================================== */

    .dld-camnang-chude-item {
        flex: none;

        width: 100%;
        height: 116px;

        min-width: 0;
        min-height: 0;

        padding: 9px 7px;

        border-radius: 10px;
    }


    /*
       Card 1 = Slide 1
       Card 5 = Slide 2
    */

    .dld-camnang-chude-item:nth-child(1),
    .dld-camnang-chude-item:nth-child(5) {
        scroll-snap-align: start;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .dld-camnang-chude-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 5px;
    }


    .dld-camnang-chude-icon img {
        width: 52px;
        height: 52px;

        object-fit: contain;
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .dld-camnang-chude-title {
        margin-bottom: 3px;

        font-size: 13px;
        line-height: 1.25;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .dld-camnang-chude-desc {
        max-width: 145px;

        font-size: 11px;
        line-height: 1.3;
    }


    /* =====================================================
       BULLETS - MOBILE
    ===================================================== */
    
    .dld-camnang-chude-dots {
        display: flex;
        align-items: center;
        justify-content: center;
    
        gap: 7px;
    
        width: 100%;
        margin-top: 10px;
    }
    
    
    /* CHẤM */
    
    .dld-camnang-chude-dot {
        display: block;
    
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        min-height: 7px !important;
    
        margin: 0 !important;
        padding: 0 !important;
    
        background: #cbd2df !important;
    
        border: 0 !important;
        border-radius: 50% !important;
    
        box-shadow: none !important;
    
        transition: background-color .2s ease;
    }
    
    
    /* CHẤM ĐANG ACTIVE */
    
    .dld-camnang-chude-dot.is-active {
        width: 7px !important;
        height: 7px !important;
    
        background: #EE2D38 !important;
    }
    
    
    /* XÓA STYLE BUTTON FLATSOME */
    
    .dld-camnang-chude-dot:hover,
    .dld-camnang-chude-dot:focus,
    .dld-camnang-chude-dot:active {
        width: 7px !important;
        height: 7px !important;
    
        background: #cbd2df !important;
    
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    
    /* GIỮ MÀU ĐỎ KHI ACTIVE */
    
    .dld-camnang-chude-dot.is-active:hover,
    .dld-camnang-chude-dot.is-active:focus,
    .dld-camnang-chude-dot.is-active:active {
        background: #EE2D38 !important;
    }


    /* BỎ STYLE BUTTON CỦA FLATSOME */

    .dld-camnang-chude-dot:hover,
    .dld-camnang-chude-dot:focus,
    .dld-camnang-chude-dot:active {
        border: 0;
        box-shadow: none;
        outline: none;
    }


    /* MOBILE KHÔNG NHẢY CARD */

    .dld-camnang-chude-item:hover {
        transform: none;
    }


    .dld-camnang-chude-item:hover
    .dld-camnang-chude-icon {
        transform: none;
    }

}