/* =========================================================
FOOTER CAM PASTEL
File: assets/css/footer.css
========================================================= */

html body footer.site-footer{
    position:relative;
    z-index:10;

    width:100%;
    padding:72px 0 0;

    background-color:#f8cda5 !important;

    background-image:linear-gradient(
        135deg,
        #ffe5cc 0%,
        #fbd0a8 48%,
        #f3bb86 100%
    ) !important;

    color:#583720 !important;
}

/* Bố cục */
html body footer.site-footer .footer-grid{
    display:grid !important;
    grid-template-columns:1.15fr .85fr .9fr 1.1fr !important;
    gap:clamp(30px, 4vw, 58px) !important;

    margin:0 0 56px !important;
    padding:0 !important;
}

/* Logo */
html body footer.site-footer .footer-logo{
    display:inline-flex !important;
    align-items:center !important;

    margin:0 0 22px !important;

    text-decoration:none !important;
}

html body footer.site-footer .footer-brand-logo{
    display:block !important;

    width:auto !important;
    height:58px !important;
    max-width:220px !important;

    object-fit:contain !important;
    filter:none !important;
}

/* Nội dung giới thiệu */
html body footer.site-footer .footer-desc{
    max-width:350px !important;

    margin:0 0 24px !important;

    color:#70472e !important;

    font-family:"Inter", Arial, sans-serif !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.8 !important;
}

/* Tiêu đề cột */
html body footer.site-footer .footer-col h4{
    position:relative !important;

    margin:0 0 24px !important;
    padding:0 0 13px !important;

    color:#382216 !important;

    font-family:"Inter", Arial, sans-serif !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
}

html body footer.site-footer .footer-col h4::after{
    content:"" !important;

    position:absolute !important;
    left:0 !important;
    bottom:0 !important;

    width:38px !important;
    height:3px !important;

    border-radius:999px !important;

    background:linear-gradient(
        90deg,
        #e85d04,
        #d4af37
    ) !important;
}

/* Xóa dấu danh sách */
html body footer.site-footer .footer-links,
html body footer.site-footer .footer-contact-list{
    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

/* Danh sách đường dẫn */
html body footer.site-footer .footer-links{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}

html body footer.site-footer .footer-links li{
    margin:0 !important;
    padding:0 !important;
}

/* Link footer */
html body footer.site-footer .footer-links a{
    display:inline-block !important;

    color:#54341f !important;

    font-family:"Inter", Arial, sans-serif !important;
    font-size:15px !important;
    font-weight:500 !important;
    line-height:1.6 !important;

    text-decoration:none !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

html body footer.site-footer .footer-links a:hover{
    color:#c94f00 !important;
    transform:translateX(5px) !important;
}

/* Danh sách liên hệ */
html body footer.site-footer .footer-contact-list{
    display:flex !important;
    flex-direction:column !important;
    gap:17px !important;
}

html body footer.site-footer .footer-contact-list li{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;

    margin:0 !important;
    padding:0 !important;

    color:#54341f !important;

    font-size:15px !important;
    line-height:1.65 !important;
}

/* Link liên hệ */
html body footer.site-footer .footer-contact-list a{
    color:#54341f !important;

    font-family:"Inter", Arial, sans-serif !important;
    font-size:15px !important;
    line-height:1.65 !important;

    text-decoration:none !important;
    overflow-wrap:anywhere !important;

    transition:color .25s ease !important;
}

html body footer.site-footer .footer-contact-list a:hover{
    color:#c94f00 !important;
}

/* Icon liên hệ */
html body footer.site-footer .footer-contact-icon{
    flex:0 0 22px !important;

    color:#e85d04 !important;

    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.65 !important;
}

/* Mạng xã hội */
html body footer.site-footer .social-links{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
}

html body footer.site-footer .social-icon{
    width:42px !important;
    height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid rgba(95,56,32,.16) !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.58) !important;
    color:#684027 !important;

    text-decoration:none !important;

    box-shadow:0 7px 20px rgba(102,61,34,.10) !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease !important;
}

html body footer.site-footer .social-icon:hover{
    border-color:#e85d04 !important;
    background:#e85d04 !important;
    color:#ffffff !important;

    transform:translateY(-4px) !important;
}

/* Copyright */
html body footer.site-footer .footer-bottom{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:25px 0 !important;

    border-top:1px solid rgba(91,55,32,.20) !important;
}

html body footer.site-footer .footer-bottom p{
    margin:0 !important;

    color:#70472e !important;

    font-family:"Inter", Arial, sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.6 !important;
    text-align:center !important;
}

/* Tablet */
@media(max-width:1024px){

    html body footer.site-footer .footer-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

}

/* Mobile */
@media(max-width:767px){

    html body footer.site-footer{
        padding-top:50px !important;
    }

    html body footer.site-footer .footer-grid{
        grid-template-columns:1fr !important;
        gap:36px !important;
        margin-bottom:38px !important;
    }

    html body footer.site-footer .footer-desc{
        max-width:100% !important;
    }

    html body footer.site-footer .footer-col h4{
        margin-bottom:20px !important;
    }

    html body footer.site-footer .footer-bottom{
        padding:21px 12px !important;
    }

    html body footer.site-footer .footer-bottom p{
        font-size:13px !important;
    }

}
/* =========================================================
FOOTER CAM ĐÀO PASTEL LOANG
========================================================= */

html body footer.site-footer{
    position:relative;
    overflow:hidden;

    background-color:#fbd1b9 !important;

    background-image:
        radial-gradient(
            circle at 8% 15%,
            rgba(248, 156, 91, .95) 0%,
            rgba(250, 190, 148, .72) 24%,
            rgba(250, 203, 170, .28) 47%,
            transparent 65%
        ),

        radial-gradient(
            circle at 48% 38%,
            rgba(255, 241, 225, .98) 0%,
            rgba(251, 231, 212, .90) 28%,
            rgba(251, 218, 188, .42) 58%,
            transparent 76%
        ),

        radial-gradient(
            circle at 92% 85%,
            rgba(248, 178, 147, .88) 0%,
            rgba(250, 203, 170, .60) 32%,
            transparent 67%
        ),

        radial-gradient(
            circle at 25% 100%,
            rgba(244, 203, 162, .80) 0%,
            rgba(250, 213, 185, .38) 45%,
            transparent 70%
        ),

        linear-gradient(
            135deg,
            #f8a56e 0%,
            #fbd1ad 35%,
            #fbe7d4 62%,
            #f8b293 100%
        ) !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:cover !important;

    color:#593823 !important;
}

.site-footer .footer-contact-icon{
    flex:0 0 22px !important;
    width:22px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-top:5px !important;

    color:rgb(255, 166, 70) !important;

    font-size:18px !important;
    line-height:1 !important;
    text-align:center !important;
}