/* =========================
   FOOTER SOFT PREMIUM (UPDATED)
========================= */

.site-footer{
    /* ⭐ màu mới sang hơn trắng */
    background:#f2f4f8;

    padding:75px 0 32px;

    border-top:1px solid #e6e9f2;

    font-size:.95rem;
    color:#5f687a;

    /* tạo chiều sâu */
    box-shadow:0 -8px 40px rgba(8,16,59,.04);
}

/* =========================
   LAYOUT
========================= */

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:60px;
    flex-wrap:wrap;
}

/* column */
.footer-col{
    min-width:170px;
    display:flex;
    flex-direction:column;
}

/* =========================
   HEADING
========================= */

.footer-col h5{
    font-size:15px;
    font-weight:700;
    color:#08103b;
    margin-bottom:18px;
    letter-spacing:.5px;
}

/* =========================
   LINKS
========================= */

.footer-col a{
    text-decoration:none;
    color:#6b7280;
    margin-bottom:11px;
    transition:.25s ease;
}

.footer-col a:hover{
    color:#08103b;
    transform:translateX(5px);
}

/* =========================
   BRAND
========================= */

.brand .logo{
    font-size:20px;
    font-weight:800;
    color:#08103b;
    margin-bottom:12px;
}

.brand p{
    max-width:260px;
    line-height:1.7;
    color:#70798c;
}

/* =========================
   BOTTOM
========================= */

.footer-bottom{
    margin-top:55px;
    padding-top:22px;

    border-top:1px solid #e3e6ee;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.rights{
    margin:0;
    color:#8b93a7;
}

/* =========================
   SOCIALS
========================= */

.socials a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    border-radius:12px;

    /* nhẹ hơn trắng */
    background:#e8ebf3;

    color:#08103b;

    margin-left:8px;
    text-decoration:none;

    transition:.25s;
}

.socials a:hover{
    background:#08103b;
    color:#fff;
    transform:translateY(-4px);
}

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

@media(max-width:768px){

    .footer-inner{
        gap:30px;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .socials{
        margin-top:10px;
    }
}