<style>

/* ==========================================================
   VUA ÁO ĐẤU
   SECTION: VÌ SAO CHỌN CHÚNG TÔI

   DESKTOP:
   - 5 CARD / 1 HÀNG
   - FULL WIDTH CONTAINER
   - ICON / TEXT CÂN GIỮA

   MOBILE:
   - ẨN CARD 5 "ĐỒNG HÀNH LÂU DÀI"
   - 4 CARD = 2 x 2
   - CHỮ MÔ TẢ NHỎ HƠN
   - KHÔNG TRÀN / KHÔNG LỆCH
========================================================== */


/* ==========================================================
   01. RESET
========================================================== */

.vad-why-section,
.vad-why-section *,
.vad-why-section *::before,
.vad-why-section *::after {
    box-sizing: border-box;
}


/* ==========================================================
   02. SECTION DESKTOP
========================================================== */

.vad-why-section {
    display: block;
    position: relative;

    width: 100%;
    max-width: 1360px;

    margin: 0 auto;

    padding: 38px 15px 42px;
}


/* ==========================================================
   03. HEADING
========================================================== */

.vad-why-heading {
    width: 100%;

    margin: 0 auto 22px;

    padding: 0;

    text-align: center;
}


/* ==========================================================
   04. TIÊU ĐỀ CHÍNH
========================================================== */

.vad-why-heading h2 {
    display: block;

    width: 100%;

    margin: 0 auto 8px !important;

    padding: 0 !important;

    color: #111 !important;

    font-size: 32px !important;

    line-height: 1.2 !important;

    font-weight: 700 !important;

    text-align: center !important;

    text-transform: uppercase;

    text-indent: 0 !important;

    white-space: normal !important;
}


/* ==========================================================
   05. TIÊU ĐỀ PHỤ
========================================================== */

.vad-why-heading p {
    display: block;

    width: 100%;

    margin: 0 auto !important;

    padding: 0 !important;

    color: #555 !important;

    font-size: 17px !important;

    line-height: 1.45 !important;

    font-weight: 400 !important;

    text-align: center !important;

    text-indent: 0 !important;
}


/* ==========================================================
   06. GRID DESKTOP
   5 CARD / 1 HÀNG
========================================================== */

.vad-why-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 14px;

    margin: 0;

    padding: 0;
}


/* ==========================================================
   07. CARD
   NỀN ĐEN THUẦN
========================================================== */

.vad-why-card {
    width: 100%;
    min-width: 0;

    min-height: 175px;

    margin: 0;

    padding: 20px 12px 17px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    /* NỀN ĐEN THUẦN */
    background: #000000 !important;

    border: 1px solid #333;

    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0
        2px
        5px
        rgba(0,0,0,.16);

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


/* ==========================================================
   08. HOVER
========================================================== */

@media (hover: hover) {

    .vad-why-card:hover {
        transform: translateY(-4px);

        border-color: #FEBE10;

        box-shadow:
            0
            8px
            20px
            rgba(0,0,0,.20);
    }

}


/* ==========================================================
   09. ICON CHUNG
========================================================== */

.vad-why-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;
    min-height: 50px;

    max-width: 50px;
    max-height: 50px;

    margin: 0 auto 10px !important;

    padding: 0 !important;

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: center;

    color: #FEBE10 !important;

    font-family: Arial, sans-serif !important;

    font-size: 41px !important;

    line-height: 50px !important;

    font-weight: 400 !important;

    text-align: center !important;

    overflow: hidden;
}


/* ==========================================================
   10. ICON RIÊNG
========================================================== */

.vad-icon-design {
    font-size: 41px !important;
}

.vad-icon-quality {
    font-size: 40px !important;
}

.vad-icon-price {
    font-size: 41px !important;
}

.vad-icon-delivery {
    font-size: 38px !important;
}


/* ==========================================================
   11. ICON ĐỒNG HÀNH - CARD 5
========================================================== */

.vad-icon-support {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;

    max-width: 32px !important;
    max-height: 32px !important;

    margin: 0 auto 12px !important;

    padding: 0 !important;

    border: 2px solid #FEBE10 !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color: #FEBE10 !important;

    font-size: 22px !important;

    line-height: 32px !important;

    text-align: center !important;

    overflow: hidden !important;
}


/* ==========================================================
   12. CARD TITLE
========================================================== */

.vad-why-card h3 {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto 7px !important;

    padding: 0 !important;

    color: #fff !important;

    font-size: 15px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;

    text-align: center !important;

    text-transform: uppercase;

    text-indent: 0 !important;

    white-space: normal !important;

    word-break: normal !important;
}


/* ==========================================================
   13. CARD DESCRIPTION - DESKTOP
========================================================== */

.vad-why-card p {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto !important;

    padding: 0 !important;

    color: #ededed !important;

    font-size: 14px !important;

    line-height: 1.45 !important;

    font-weight: 400 !important;

    text-align: center !important;

    text-indent: 0 !important;

    white-space: normal !important;
}


/* ==========================================================
   14. LAPTOP
========================================================== */

@media only screen and (min-width: 992px) and (max-width: 1399px) {

    .vad-why-section {
        width: 100%;
        max-width: 100%;

        padding-left: 30px;
        padding-right: 30px;
    }

    .vad-why-grid {
        gap: 12px;
    }

}


/* ==========================================================
   15. TABLET
========================================================== */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .vad-why-section {
        width: 100%;
        max-width: 100%;

        padding: 30px 15px 34px;
    }


    .vad-why-heading h2 {
        font-size: 28px !important;
    }


    .vad-why-heading p {
        font-size: 15px !important;
    }


    .vad-why-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        gap: 8px;
    }


    .vad-why-card {
        min-height: 155px;

        padding: 14px 5px;

        background: #000000 !important;
    }


    .vad-why-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;

        max-width: 42px;
        max-height: 42px;

        font-size: 34px !important;

        line-height: 42px !important;
    }


    .vad-why-card h3 {
        font-size: 12px !important;
    }


    .vad-why-card p {
        font-size: 11px !important;
    }

}


/* ==========================================================
   16. MOBILE
   <= 767PX

   - 4 CARD
   - 2 x 2
   - CARD 5 ẨN
   - DESCRIPTION NHỎ HƠN
========================================================== */

@media only screen and (max-width: 767px) {


    /* SECTION */

    .vad-why-section {
        display: block !important;

        position: relative !important;

        width: auto !important;

        max-width: none !important;

        min-width: 0 !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding: 28px 0 32px !important;

        left: auto !important;

        right: auto !important;

        transform: none !important;

        overflow: visible !important;
    }


    /* HEADING */

    .vad-why-heading {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 19px !important;

        padding: 0 !important;

        text-align: center !important;
    }


    /* TITLE */

    .vad-why-heading h2 {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 7px !important;

        padding: 0 !important;

        font-size: 25px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;

        text-align: center !important;

        white-space: normal !important;
    }


    /* SUBTITLE */

    .vad-why-heading p {
        width: 100% !important;

        max-width: 390px !important;

        margin: 0 auto !important;

        padding: 0 5px !important;

        font-size: 14px !important;

        line-height: 1.4 !important;

        font-weight: 400 !important;

        text-align: center !important;
    }


    /* GRID MOBILE */

    .vad-why-grid {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 10px !important;

        row-gap: 10px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ẨN CARD 5 */

    .vad-why-card-support,
    .vad-why-card:nth-child(5) {
        display: none !important;
    }


    /* CARD MOBILE */

    .vad-why-card {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 158px !important;

        margin: 0 !important;

        padding: 15px 8px 13px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        text-align: center !important;

        /* NỀN ĐEN THUẦN */
        background: #000000 !important;

        border-radius: 6px;

        overflow: hidden !important;
    }


    /* ICON MOBILE */

    .vad-why-icon {
        width: 43px !important;
        height: 43px !important;

        min-width: 43px !important;
        min-height: 43px !important;

        max-width: 43px !important;
        max-height: 43px !important;

        margin: 0 auto 9px !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        align-self: center !important;

        font-size: 35px !important;

        line-height: 43px !important;

        text-align: center !important;
    }


    /* TITLE CARD MOBILE */

    .vad-why-card h3 {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 auto 6px !important;

        padding: 0 1px !important;

        color: #fff !important;

        font-size: 12px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        letter-spacing: -0.1px !important;

        text-align: center !important;

        text-indent: 0 !important;

        white-space: normal !important;
    }


    /* DESCRIPTION MOBILE */

    .vad-why-card p {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 auto !important;

        padding: 0 2px !important;

        color: #ededed !important;

        font-size: 10.5px !important;

        line-height: 1.4 !important;

        font-weight: 400 !important;

        letter-spacing: 0 !important;

        text-align: center !important;

        text-indent: 0 !important;

        white-space: normal !important;

        word-break: normal !important;
    }

}


/* ==========================================================
   17. MOBILE NHỎ
   <= 380PX
========================================================== */

@media only screen and (max-width: 380px) {

    /* SECTION */

    .vad-why-section {
        margin-left: 10px !important;

        margin-right: 10px !important;
    }


    /* HEADING */

    .vad-why-heading h2 {
        font-size: 23px !important;
    }


    /* SUBTITLE */

    .vad-why-heading p {
        font-size: 13px !important;
    }


    /* GRID */

    .vad-why-grid {
        column-gap: 8px !important;

        row-gap: 8px !important;
    }


    /* CARD */

    .vad-why-card {
        min-height: 152px !important;

        padding-left: 6px !important;

        padding-right: 6px !important;

        background: #000000 !important;
    }


    /* ICON */

    .vad-why-icon {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        min-height: 40px !important;

        max-width: 40px !important;
        max-height: 40px !important;

        font-size: 32px !important;

        line-height: 40px !important;
    }


    /* ICON ĐỒNG HÀNH */

    .vad-icon-support {
        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;

        max-width: 30px !important;
        max-height: 30px !important;

        margin: 0 auto 12px !important;

        font-size: 20px !important;

        line-height: 26px !important;
    }

}

</style>
