/* ===== Khối "Khách hàng tiêu biểu" =====
   Dùng chung cho Trang chủ (.sec-home-6) và Giới thiệu (.page-about-6) — hai trang trước
   đây mỗi nơi tự chế một kiểu ô logo hơi khác nhau, sửa một chỗ thì chỗ kia lệch.

   Vì sao đổi: logo khách hàng là bằng chứng uy tín mạnh nhất trên trang, nhưng đang bị
   chìm — ô nhỏ, viền gần như vô hình, logo đệm dày nên chữ trong logo bé xíu, lại nằm trên
   nền trắng y hệt nền trang nên cả khối trôi đi mất.

   Nay: nền khối ngả nhẹ màu thương hiệu để ô trắng nổi lên, ô cao và bo tròn hơn, viền +
   bóng rõ hơn một nấc, logo to hơn (giảm đệm trong). Tất cả màu đều lấy từ biến thương
   hiệu nên chủ website đổi màu trong Admin là khối này đổi theo. */

/* Nền khối: trắng ở trên, loang nhẹ sắc thương hiệu ở dưới.
   (Trang Giới thiệu trước đây còn sót nền hồng #fbe9ea của bộ màu đỏ cũ.) */
#main .sec-home-6,
#main .page-about-6 {
    background: linear-gradient(180deg, #fff 0%, rgba(var(--brand-rgb), .12) 100%);
}

/* Tiêu đề "Khách hàng tiêu biểu": to và đậm hơn, màu chữ thương hiệu. */
.list-logo .title h4 {
    font-size: 1.5rem;
    font-family: var(--bold);
    color: var(--brand-text);
}

/* Gạch nhấn dưới tiêu đề: dày và dài hơn, bo đầu. */
.sec-home-6 .col-right .col-inner:after,
.page-about-6 .col-right .col-inner:after {
    width: 9.5rem;
    height: .25rem;
    border-radius: .125rem;
}

/* Lưới logo: flex thay cho grid để hàng cuối thiếu ô thì tự CĂN GIỮA,
   không dồn hẳn về trái như lưới grid. */
.list-logo .logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 1.75rem;
}

.list-logo .logo > * {
    flex: 0 0 calc((100% - 3 * 1.75rem) / 4);
    max-width: calc((100% - 3 * 1.75rem) / 4);
}

/* Ô logo. padding-top:0 để vô hiệu tỉ lệ khung inline trong view — chiều cao cố định
   ở đây cho mọi ô bằng nhau, logo ngang hay dọc đều nằm chính giữa. */
.list-logo .logo .img-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
    padding-top: 0 !important;
    background: #fff;
    border: .0625rem solid rgba(var(--brand-dark-rgb), .10);
    border-radius: .875rem;
    box-shadow: 0 .25rem .875rem rgba(var(--brand-dark-rgb), .08);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.list-logo .logo .img-inner img {
    position: static !important;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    padding: .75rem 1.125rem;
    box-sizing: border-box;
    transition: transform .3s;
}

.list-logo .logo .img-inner:hover {
    border-color: rgba(var(--brand-rgb), .6);
    box-shadow: 0 .75rem 1.5rem rgba(var(--brand-dark-rgb), .15);
    transform: translateY(-.25rem);
}

.list-logo .logo .img-inner:hover img {
    transform: scale(1.06);
}

@media screen and (max-width: 1024px) {
    .list-logo .logo > * {
        flex: 0 0 calc((100% - 2 * 1.75rem) / 3);
        max-width: calc((100% - 2 * 1.75rem) / 3);
    }
}

@media screen and (max-width: 575.98px) {
    .list-logo .logo {
        gap: 1rem 1rem;
    }

    .list-logo .logo > * {
        flex: 0 0 calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
    }

    .list-logo .logo .img-inner {
        height: 5.5rem;
    }

    .list-logo .title h4 {
        font-size: 1.25rem;
    }
}