:root{
    --color-text-footer: #FAF5EC;
}

.footer *{
    color: var(--color-text-footer);
    letter-spacing: 1.2px;
    font-size: 16px;
    /* box-sizing: border-box; */
}

/* Không reset body ở footer (tránh đè header layout) */

.footer {
    background-color: var(--color-main);
    padding-top: 34px;
    padding-bottom: 23px;
    width: 100%;
    
}

.footer a{
    text-decoration: none;
}

.footer li{
    list-style: none;
    font-weight: 300;
}

/* Đồng bộ giữa các trang (trang có/không có reset *) */
.footer ul{
    margin: 0;
    padding: 0;
}

.footer strong{
    font-weight: 700 !important;
}

.intro, .footer_links, .footer_info{
    display: flex;
    flex-direction: column;
    gap: 1vh;
}
.footer_links{
   text-wrap: nowrap;
}

.footer_links{
   text-wrap: nowrap;
   gap: 18px;
}

.intro{
    width: 24vw;

}

.content_footer{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18%;
    padding: 0 10%;
    border-bottom: 1px solid var(--color-text-footer);
    margin-bottom: 15px;
}

.footer_info{
    width: 22%;
    gap: 25px; 
    padding-left: 20px;
}

.footer_info span{
    padding-left: 0;
}

.footer_info li{
    display: flex;
    align-items: center; 
    gap: 5%;            
    line-height: 1.1;
}

.footer_links a:hover{
    border-bottom: 1px solid var(--color-text-footer);
}

.footer > a{
    font-weight: 100;
    font-size: 13px;
    padding-left: 38%;
}

.social-buttons {
    position: fixed; 
    right: 20px;
    bottom: 30px; 
    z-index: 9999; 
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.social-buttons img {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: transform 0.3s;
}

.social-buttons>a:nth-child(3)>img{
    
}

@keyframes shake-zoom {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.1) rotate(-6deg); }
  30%  { transform: scale(1.15) rotate(6deg); }
  45%  { transform: scale(1.1) rotate(-6deg); }
  60%  { transform: scale(1.15) rotate(6deg); }
  75%  { transform: scale(1.1) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.social-buttons img{
    animation: shake-zoom 1.3s ease-in-out infinite;
}

.social-buttons img:hover {
    /* transform: scale(1.1);  */
    animation-play-state: paused;
} 

/* Responsive footer (giữ màu & thứ tự nội dung, chỉ co giãn bố cục) */
@media (max-width: 992px){
    .content_footer{
        gap: 10%;
        padding: 0 24px;
    }

    .intro{
        width: 34vw;
    }

    .footer_info{
        width: 30%;
        padding-left: 0;
    }
}

@media (max-width: 768px){
    .content_footer{
        flex-direction: column;
        gap: 22px;
        padding: 0 16px;
        align-items: flex-start;
    }

    .intro,
    .footer_info{
        width: 100%;
    }

    /* override inline width theo vw trong footer.html */
    .intro p{
        width: 100% !important;
        margin: 10px 0 18px 0 !important;
        line-height: 1.5;
    }

    .intro img{
        width: min(240px, 70vw) !important;
        height: auto !important;
        display: block;
    }

    .footer_links{
        text-wrap: wrap;
        gap: 12px;
    }

    .footer_info{
        gap: 14px;
    }

    .footer_info li{
        line-height: 1.35;
    }

    .footer > a{
        display: block;
        padding-left: 0;
        text-align: center;
        padding: 12px 16px 0;
    }

    .social-buttons{
        right: 14px;
        bottom: 18px;
        gap: 12px;
    }

    .social-buttons img{
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 430px){
    .footer{
        padding-top: 26px;
        padding-bottom: 18px;
    }

    .footer *{
        font-size: 14px;
    }

    .footer_info li:nth-child(1),
    .footer_links li:nth-child(1){
        font-size: 15px;
    }

    .social-buttons{
        right: 12px;
        bottom: 16px;
    }

    .social-buttons img{
        width: 38px;
        height: 38px;
    }
}