.philosophy-section {
    padding: 100px 0 0;
}

.philosophy-section .container {
    display: flex;
    gap: 20px;
}

.philosophy-section .philosophy-content {
    /* width: 36%; */
    width: 500px;
    padding-bottom: 120px;
}

.philosophy-section .philosophy-image {
    width: 47%;
    /* align-self: end; */
    margin-left: auto;
    position: relative;
    --container-height: auto; /* Will be set by JavaScript */
}

.philosophy-section .philosophy-image img {
    width: 100%;
    max-width: 626px;
}
@media (min-width: 1024px) {
    .philosophy-section .philosophy-image img {
        width: 100%;
        max-width: 626px;
        opacity: 0.4!important;
        position: absolute;
        bottom: 0; /* Ban đầu ở dưới cùng */
        left: 0;
        transition: all 2s ease-out;
        translate: 0 0;
    }
    
    .philosophy-section .philosophy-image:hover img{
        opacity: 1!important;
        translate: 0 calc(-1 * var(--container-height) + 100%); /* Dynamic container height */
    }
}
@media (max-width: 1023.95px) {
    .philosophy-section .container{
        display: block;
    }
    .philosophy-section .philosophy-content{
        width: 100%;
        padding-bottom: 100px;
    }
    .philosophy-section .philosophy-image{
        width: 100%;
    }
    .philosophy-section .philosophy-image img{
        opacity: 1;
        display: block;
        margin: auto;
    }
}
@media (max-width: 767.95px) {
    .philosophy-section {
        padding-top: 65px;
    }
    /* .philosophy-section .container{
        display: block;
    }
    .philosophy-section .philosophy-content{
        width: 100%;
        padding-bottom: 75px;
    }
    .philosophy-section .philosophy-image{
        width: 100%;
    }
    .philosophy-section .philosophy-image img{
        opacity: 1;
    } */
}