/* =====================================================
   WELCOME SECTION
===================================================== */

.section-welcome{
    padding:70px 0;
}

/* TEXT AREA */

.section-welcome .subtitle{
    color:#8a92a8;
    font-weight:700;
    font-size:14px;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.section-welcome .title{
    font-size:2rem;
    font-weight:800;
    margin-bottom:16px;

    background:linear-gradient(90deg,#08103b,#3b2b7a);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    letter-spacing:-0.2px;
}

.section-welcome p{
    font-size:15.5px;
    color:#596274;

    line-height:1.75;
    margin-bottom:14px;

    text-align:left;
}

.section-welcome .welcome-text{
    max-width:540px;
}

/* BUTTON */

.section-welcome .btn-wrap{
    display:flex;
    gap:14px;
    margin-top:20px;
}

.welcome-cta{

    display:inline-block;

    padding:13px 30px;

    border-radius:999px;

    font-weight:700;

    color:#08103b;
    text-decoration:none;

    background:linear-gradient(90deg,#ffffff,#ffd37a,#8B5E3C,#ffffff);
    background-size:200% 100%;

    box-shadow:0 8px 30px rgba(9,12,40,0.12);

    transition:all .3s ease;
}

.welcome-cta:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(11,23,75,0.12);
}



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

.welcome-gallery{

    display:grid;
    grid-template-columns:1.3fr 1fr;

    gap:18px;

    height:420px; /* chiều cao chung */

}

/* MAIN IMAGE */

.welcome-main-card{

    border-radius:14px;
    overflow:hidden;

    height:100%;

    box-shadow:0 18px 40px rgba(11,23,75,0.08);

    transition:all .4s ease;

}

.welcome-main-img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.welcome-main-card:hover .welcome-main-img{

    transform:scale(1.03);

}



/* SIDE IMAGES */

.welcome-side-cards{

    display:grid;
    grid-template-rows:repeat(3,1fr);

    gap:12px;

    height:100%;

}

.welcome-thumb{

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(11,23,75,0.06);

    transition:all .35s ease;

}

.welcome-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.welcome-thumb:hover{

    transform:translateY(-6px);

}

.welcome-thumb:hover img{

    transform:scale(1.05);

}



/* =====================================================
   ANIMATION
===================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.section-welcome .subtitle,
.section-welcome .title,
.section-welcome p,
.section-welcome .btn-wrap,
.welcome-main-card,
.welcome-thumb{

    opacity:0;

    animation:fadeUp .7s ease forwards;

}

/* delay */

.section-welcome .title{animation-delay:.1s;}
.section-welcome p{animation-delay:.2s;}
.section-welcome .btn-wrap{animation-delay:.3s;}

.welcome-main-card{animation-delay:.35s;}

.welcome-thumb:nth-child(1){animation-delay:.45s;}
.welcome-thumb:nth-child(2){animation-delay:.55s;}
.welcome-thumb:nth-child(3){animation-delay:.65s;}



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

@media(max-width:991px){

    .welcome-gallery{

        grid-template-columns:1fr 1fr;

    }

    .welcome-main-card{

        height:360px;

    }

}


@media(max-width:767px){

    .section-welcome{

        padding:50px 0;

    }

    .section-welcome p{

        text-align:left;

    }

    .welcome-gallery{

        grid-template-columns:1fr;

    }

    .welcome-main-card{

        height:240px;

    }

    .welcome-side-cards{

        grid-template-columns:repeat(3,1fr);

        grid-template-rows:none;

    }

    .welcome-thumb{

        height:100px;

    }

    .section-welcome .btn-wrap{

        justify-content:center;

    }

}



/* =====================================================
   IMAGE QUALITY FIX
===================================================== */

.welcome-main-img,
.welcome-thumb img{

    image-rendering:auto;

    backface-visibility:hidden;

    transform:translateZ(0);

}