/* =========================================================
   VUA AO DAU - FEEDBACK KHACH HANG
   ========================================================= */

.vad-feedback-section,
.vad-feedback-section * {
    box-sizing: border-box;
}
 
/* ========================= 
   SECTION 
   ========================= */ 
 
.vad-feedback-section { 
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 24px 0 32px; 
    background: #fff; 
    overflow: hidden; 
} 
 
 
/* ========================= 
   HEADER 
   ========================= */ 
 
.vad-feedback-header { 
    width: 100%; 
    text-align: center; 
    margin: 0 auto 18px; 
    padding: 0 15px; 
} 
 
.vad-feedback-header h2 { 
    margin: 0 0 4px; 
    padding: 0; 
 
    color: #111; 

    /* ĐỒNG BỘ VỚI TIÊU ĐỀ QUY TRÌNH */
    font-size: 29px; 

    font-weight: 800; 
    line-height: 1.2; 
    letter-spacing: -0.4px; 
    text-transform: uppercase; 
} 
 
.vad-feedback-header p { 
    margin: 0; 
    padding: 0; 
 
    color: #555; 

    /* ĐỒNG BỘ VỚI TIÊU ĐỀ PHỤ QUY TRÌNH */
    font-size: 16px; 

    font-weight: 400; 
    line-height: 1.5; 
} 
 
 
/* ========================= 
   SLIDER WRAPPER 
   ========================= */ 
 
.vad-feedback-slider-wrap { 
    position: relative; 
 
    width: 100%; 
    max-width: 100%; 
 
    margin: 0 auto; 
    padding: 0 36px; 
} 
 
 
/* ========================= 
   SLIDER 
   ========================= */ 
 
.vad-feedback-slider { 
    width: 100%; 
 
    display: flex; 
    align-items: stretch; 
 
    gap: 14px; 
 
    overflow-x: auto; 
    overflow-y: hidden; 
 
    scroll-behavior: smooth; 
    scroll-snap-type: x mandatory; 
 
    -webkit-overflow-scrolling: touch; 
 
    scrollbar-width: none; 
 
    padding: 2px 0 4px; 
} 
 
.vad-feedback-slider::-webkit-scrollbar { 
    display: none; 
} 
 
 
/* ========================= 
   CARD 
   ========================= */ 
 
.vad-feedback-card { 
    position: relative; 
 
    flex: 0 0 calc((100% - 42px) / 4); 
 
    min-width: 0; 
 
    background: #fff; 
 
    border: 1px solid #e7e7e7; 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    scroll-snap-align: start; 
 
    box-shadow: 
        0 1px 2px rgba(0,0,0,.03), 
        0 2px 8px rgba(0,0,0,.025); 
 
    transition: 
        transform .25s ease, 
        box-shadow .25s ease, 
        border-color .25s ease; 
} 
 
.vad-feedback-card:hover { 
    transform: translateY(-2px); 
 
    border-color: #ddd; 
 
    box-shadow: 
        0 4px 14px rgba(0,0,0,.07); 
} 
 
 
/* ========================= 
   TEAM IMAGE 
   ========================= */ 
 
.vad-feedback-image { 
    position: relative; 
 
    width: 100%; 
    height: 120px; 
 
    overflow: hidden; 
 
    background: #f3f3f3; 
} 
 
.vad-feedback-image img { 
    display: block; 
 
    width: 100%; 
    height: 100%; 
 
    object-fit: cover; 
    object-position: center; 
 
    margin: 0; 
} 
 
 
/* ========================= 
   CONTENT 
   ========================= */ 
 
.vad-feedback-content { 
    width: 100%; 
 
    padding: 12px 14px 12px; 
} 
 
.vad-feedback-user { 
    display: flex; 
    align-items: flex-start; 
 
    gap: 11px; 
} 
 
 
/* ========================= 
   AVATAR 
   ========================= */ 
 
.vad-feedback-avatar { 
    flex: 0 0 42px; 
 
    width: 42px; 
    height: 42px; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
} 
 
.vad-feedback-avatar img { 
    display: block; 
 
    width: 100%; 
    height: 100%; 
 
    object-fit: cover; 
 
    margin: 0; 
} 
 
 
/* ========================= 
   CUSTOMER INFORMATION 
   ========================= */ 
 
.vad-feedback-info { 
    flex: 1; 
    min-width: 0; 
} 
 
.vad-feedback-info h3 { 
    margin: 0 0 5px; 
    padding: 0; 
 
    color: #111; 
 
    font-size: 14px; 
    font-weight: 700; 
    line-height: 1.25; 
} 
 
.vad-feedback-info p { 
    min-height: 57px; 
 
    margin: 0 0 5px; 
    padding: 0; 
 
    color: #333; 
 
    font-size: 13px; 
    font-weight: 400; 
    font-style: italic; 
 
    line-height: 1.48; 
} 
 
 
/* ========================= 
   STARS 
   ========================= */ 
 
.vad-feedback-stars { 
    color: #FEBE10; 
 
    font-size: 17px; 
    font-weight: 700; 
 
    line-height: 1; 
 
    letter-spacing: 1px; 
 
    white-space: nowrap; 
} 
 
 
/* ========================= 
   ARROWS 
   ========================= */ 
 
.vad-feedback-arrow { 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 10; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    width: 30px; 
    height: 54px; 
 
    padding: 0; 
    margin: 0; 
 
    border: 0; 
    outline: 0; 
 
    background: transparent !important; 
 
    color: #111 !important; 
 
    font-family: Arial, sans-serif; 
    font-size: 42px; 
    font-weight: 300; 
    line-height: 1; 
 
    cursor: pointer; 
 
    box-shadow: none !important; 
 
    text-shadow: none; 
 
    transform: translateY(-50%); 
 
    transition: 
        opacity .2s ease, 
        transform .2s ease; 
} 
 
.vad-feedback-arrow:hover { 
    opacity: .55; 
 
    transform: translateY(-50%) scale(1.08); 
} 
 
.vad-feedback-prev { 
    left: 2px; 
} 
 
.vad-feedback-next { 
    right: 2px; 
} 
 
 
/* ========================================================= 
   LARGE DESKTOP 
   ========================================================= */ 
 
@media (min-width: 1200px) { 
 
    .vad-feedback-slider-wrap { 
        padding-left: 36px; 
        padding-right: 36px; 
    } 
 
    .vad-feedback-image { 
        height: 120px; 
    } 
 
} 
 
 
/* ========================================================= 
   TABLET 
   ========================================================= */ 
 
@media (max-width: 991px) { 
 
    .vad-feedback-section { 
        padding-top: 22px; 
        padding-bottom: 28px; 
    } 
 
    .vad-feedback-slider-wrap { 
        padding-left: 30px; 
        padding-right: 30px; 
    } 
 
    .vad-feedback-slider { 
        gap: 12px; 
    } 
 
    .vad-feedback-card { 
        flex-basis: calc((100% - 24px) / 3); 
    } 
 
    .vad-feedback-image { 
        height: 115px; 
    } 
 
} 
 
 
/* ========================================================= 
   MOBILE 
   ========================================================= */ 
 
@media (max-width: 767px) { 
 
    .vad-feedback-section { 
        padding: 18px 0 24px; 
    } 
 
 
    /* HEADER */ 
 
    .vad-feedback-header { 
        margin-bottom: 14px; 
        padding-left: 15px; 
        padding-right: 15px; 
    } 
 
    .vad-feedback-header h2 { 

        /* ĐỒNG BỘ VỚI QUY TRÌNH MOBILE */
        font-size: 24px; 

        line-height: 1.25; 
        letter-spacing: -0.2px; 
    } 
 
    .vad-feedback-header p { 
        margin-top: 3px; 

        /* ĐỒNG BỘ VỚI QUY TRÌNH MOBILE */
        font-size: 14px; 

        line-height: 1.4; 
    } 
 
 
    /* SLIDER */ 
 
    .vad-feedback-slider-wrap { 
        padding-left: 15px; 
        padding-right: 15px; 
    } 
 
    .vad-feedback-slider { 
        gap: 10px; 
 
        padding-right: 32px; 
    } 
 
 
    /* CARD */ 
 
    .vad-feedback-card { 
        flex: 0 0 86%; 
 
        border-radius: 9px; 
    } 
 
 
    /* IMAGE */ 
 
    .vad-feedback-image { 
        height: 145px; 
    } 
 
 
    /* CONTENT */ 
 
    .vad-feedback-content { 
        padding: 11px 12px 12px; 
    } 
 
    .vad-feedback-user { 
        gap: 10px; 
    } 
 
 
    /* AVATAR */ 
 
    .vad-feedback-avatar { 
        flex-basis: 40px; 
 
        width: 40px; 
        height: 40px; 
    } 
 
 
    /* TEXT */ 
 
    .vad-feedback-info h3 { 
        margin-bottom: 4px; 
 
        font-size: 13px; 
    } 
 
    .vad-feedback-info p { 
        min-height: 0; 
 
        margin-bottom: 7px; 
 
        font-size: 12.5px; 
        line-height: 1.45; 
    } 
 
    .vad-feedback-info p br { 
        display: none; 
    } 
 
    .vad-feedback-stars { 
        font-size: 16px; 
        letter-spacing: .8px; 
    } 
 
 
    /* MOBILE ARROWS */ 
 
    .vad-feedback-arrow { 
        display: none; 
    } 
 
} 
 
 
/* ========================================================= 
   SMALL MOBILE 
   ========================================================= */ 
 
@media (max-width: 420px) { 
 
    .vad-feedback-header h2 { 

        /* ĐỒNG BỘ VỚI QUY TRÌNH MOBILE NHỎ */
        font-size: 22px; 
    } 
 
    .vad-feedback-header p { 
        font-size: 13px; 
    } 
 
    .vad-feedback-card { 
        flex-basis: 88%; 
    } 
 
    .vad-feedback-image { 
        height: 135px; 
    } 
 
} 
 
 
/* ========================================================= 
   VERY SMALL MOBILE 
   ========================================================= */ 
 
@media (max-width: 360px) { 
 
    .vad-feedback-card { 
        flex-basis: 91%; 
    } 
 
    .vad-feedback-image { 
        height: 125px; 
    } 
 
}