/* =========================
   FOUNDER SECTION - PREMIUM
========================= */

.founder-section{
    padding:110px 0;
    background:linear-gradient(135deg,#f8f9ff,#eef2ff);
}

/* layout: ảnh trái - text phải */
.founder-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    flex-wrap:wrap;
}

/* =========================
   TEXT SIDE
========================= */

.founder-text{
    flex:1 1 520px;
    max-width:600px;
}

.founder-text h2{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#ff7a18;
    font-weight:700;
    margin-bottom:12px;
}

.founder-text h3{
    font-size:38px;
    font-weight:800;
    color:#0c1451;
    line-height:1.25;
    margin-bottom:22px;
}

.founder-text p{
    font-size:16.5px;
    line-height:1.85;
    color:#555;
    margin-bottom:30px;
}

/* =========================
   BUTTON - LUXURY STYLE
========================= */

.button.button-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border-radius:40px;
    background:linear-gradient(135deg,#0c1451,#1f2b7b);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    letter-spacing:.4px;

    box-shadow:0 12px 30px rgba(12,20,81,.25);
    transition:all .35s ease;
}

.button.button-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(12,20,81,.35);
}

/* =========================
   GALLERY SIDE (LEFT)
========================= */

.founder-gallery{
    order:-1; /* ép qua trái */
    perspective:1400px;
    width:380px;
    height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* khối xoay */
.fg-slides{
    position:relative;
    width:320px;
    height:320px;
    transform-style:preserve-3d;
    animation:spin3d 16s linear infinite;
}

.founder-gallery:hover .fg-slides{
    animation-play-state:paused;
}

/* ảnh */
.fg-slides img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;

    box-shadow:
            0 25px 60px rgba(0,0,0,.18),
            0 8px 18px rgba(0,0,0,.1);

    backface-visibility:hidden;
}

/* 3 ảnh vòng tròn */
.fg-slides img:nth-child(1){ transform:rotateY(0deg) translateZ(190px); }
.fg-slides img:nth-child(2){ transform:rotateY(120deg) translateZ(190px); }
.fg-slides img:nth-child(3){ transform:rotateY(240deg) translateZ(190px); }

@keyframes spin3d{
    from{ transform:rotateY(0deg); }
    to{ transform:rotateY(360deg); }
}


/* =========================
   MOBILE
========================= */

@media (max-width:900px){

    .founder-wrap{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .founder-gallery{
        order:0;
        width:260px;
        height:260px;
    }

    .fg-slides{
        width:240px;
        height:240px;
    }

    .fg-slides img:nth-child(1){ transform:rotateY(0deg) translateZ(130px); }
    .fg-slides img:nth-child(2){ transform:rotateY(120deg) translateZ(130px); }
    .fg-slides img:nth-child(3){ transform:rotateY(240deg) translateZ(130px); }

    .founder-text h3{
        font-size:28px;
    }
}
/* =========================
   CENTER LOGO
========================= */

.fg-logo{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    transform:translateZ(40px); /* nổi lên phía trước */
    pointer-events:none;
}

/* vòng tròn nền trắng */
.fg-logo::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    background:#fff;
    border-radius:50%;

    box-shadow:
            0 10px 30px rgba(0,0,0,.12),
            inset 0 0 0 6px rgba(255,255,255,.6);
}

/* logo */
.fg-logo img{
    width:70px;
    height:auto;
    z-index:2;

    animation:logoSpin 18s linear infinite; /* quay chậm */
}

/* quay logo */
@keyframes logoSpin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(-360deg); }
}
/* =========================
   EXTRA SHADOW / DEPTH FX
========================= */

/* bóng tổng thể dưới slider (ground shadow) */
.founder-gallery{
    position:relative;
}

.founder-gallery::after{
    content:"";
    position:absolute;
    bottom:-35px;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    height:40px;

    background:radial-gradient(
            ellipse at center,
            rgba(0,0,0,.25) 0%,
            rgba(0,0,0,.12) 40%,
            transparent 75%
    );

    filter:blur(14px);
    z-index:-1;
}


/* ảnh có chiều sâu hơn */
.fg-slides img{
    box-shadow:
            0 30px 70px rgba(0,0,0,.22),
            0 10px 25px rgba(0,0,0,.15);
}


/* =========================
   LOGO SHADOW / GLOW
========================= */

/* nền logo nổi hơn */
.fg-logo::before{
    box-shadow:
            0 18px 40px rgba(0,0,0,.25),
            0 0 0 8px rgba(255,255,255,.75);
}


/* glow nhẹ cho logo */
.fg-logo img{
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));
}


/* =========================
   HOVER EFFECT (xịn hơn)
========================= */

.founder-gallery:hover .fg-slides{
    transform:scale(1.03);
    transition:transform .4s ease;
}
/* =========================
   MOBILE FINAL POLISH
========================= */

@media (max-width:768px){

    /* spacing tổng */
    .founder-section{
        padding:70px 18px;
    }

    /* stack dọc */
    .founder-wrap{
        flex-direction:column;
        text-align:center;
        gap:36px;
    }

    /* slider lên trên */
    .founder-gallery{
        order:-1;
        width:100%;
        height:auto;
    }

    /* size slider vừa màn hình */
    .fg-slides{
        width:230px;
        height:230px;
        margin:auto;
        animation-duration:20s; /* quay chậm hơn mobile */
    }

    /* khoảng cách ảnh 3D nhỏ lại */
    .fg-slides img:nth-child(1){ transform:rotateY(0deg) translateZ(120px); }
    .fg-slides img:nth-child(2){ transform:rotateY(120deg) translateZ(120px); }
    .fg-slides img:nth-child(3){ transform:rotateY(240deg) translateZ(120px); }


    /* ===== LOGO nhỏ lại ===== */
    .fg-logo::before{
        width:85px;
        height:85px;
    }

    .fg-logo img{
        width:50px;
    }


    /* ===== TEXT ===== */
    .founder-text{
        max-width:100%;
        padding:0 6px;
    }

    .founder-text h2{
        font-size:12px;
        letter-spacing:2px;
    }

    .founder-text h3{
        font-size:24px;
        line-height:1.35;
    }

    .founder-text p{
        font-size:15px;
        line-height:1.75;
    }


    /* ===== BUTTON full width ===== */
    .button.button-primary{
        width:100%;
        justify-content:center;
        padding:15px 20px;
        border-radius:14px;
    }


    /* ===== bóng nhỏ lại cho hợp mobile ===== */
    .founder-gallery::after{
        width:55%;
        height:28px;
        bottom:-20px;
        filter:blur(10px);
    }
}


/* extra small phone */
@media (max-width:420px){

    .fg-slides{
        width:200px;
        height:200px;
    }

    .fg-slides img:nth-child(1){ transform:rotateY(0deg) translateZ(105px); }
    .fg-slides img:nth-child(2){ transform:rotateY(120deg) translateZ(105px); }
    .fg-slides img:nth-child(3){ transform:rotateY(240deg) translateZ(105px); }

    .founder-text h3{
        font-size:20px;
    }
}