/* ===================================================
   VỀ CHÚNG TÔI — Page-specific styles
   =================================================== */

/* HERO */
.about-hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(140px,18vw,190px) 5% clamp(60px,8vw,90px)}
.about-hero .hero-bg{position:absolute;inset:0;z-index:0}
.about-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.about-hero .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,46,.85),rgba(26,26,46,.95))}
.about-hero .sec-center{position:relative;z-index:2;text-align:center;color:white}
.about-hero h1{font-family:var(--ff-h);font-size:var(--fs-2xl);font-weight:800;color:white;margin-bottom:14px}
.about-hero h1 em{color:var(--gold);font-style:normal}
.about-hero .hero-desc{font-size:var(--fs-md);color:rgba(255,255,255,.7);max-width:800px;margin:0 auto;line-height:1.85}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-h);font-size:var(--fs-xs);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}

/* STATS (about-specific) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:linear-gradient(135deg,var(--navy-d),var(--navy));border-radius:0;padding:40px 5%;box-shadow:0 16px 50px rgba(26,26,46,.25)}
.stat{text-align:center;padding:16px;position:relative}
.stat:not(:last-child)::after{content:'';position:absolute;right:0;top:25%;height:50%;width:1px;background:rgba(255,255,255,.1)}
.stat-num{font-family:var(--ff-h);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;color:var(--gold);line-height:1}
.stat-num span{font-size:.45em;font-weight:500;opacity:.5}
.stat-lbl{font-family:var(--ff-h);font-size:var(--fs-xs);letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px}

/* HISTORY */
.history-split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,5vw,70px);margin-top:48px;align-items:start}
.history-img{position:relative;border-radius:0;overflow:hidden;box-shadow:var(--sh-l)}
.history-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.img-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:linear-gradient(180deg,transparent,rgba(26,26,46,.7));color:white;font-family:var(--ff-h);font-size:var(--fs-xs);font-weight:600;letter-spacing:2px;text-transform:uppercase}

.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold),var(--gold-d));opacity:.15;border-radius:0}
.tl-item{padding:0 0 32px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-30px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--gold-bg);border:2px solid var(--gold-brd);z-index:2;transition:all .4s}
.tl-item:hover .tl-dot{background:var(--gold);box-shadow:0 0 0 5px var(--gold-bg)}
.tl-year{font-family:var(--ff-h);font-size:var(--fs-xs);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.tl-item h4{font-family:var(--ff-h);font-size:.95rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.tl-item p{font-size:var(--fs-base);color:var(--txt-m);line-height:1.75}

/* VISION SPLIT */
.vision-split{display:grid;grid-template-columns:1fr 1fr;min-height:500px}
.vision-img{overflow:hidden}
.vision-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.vision-img:hover img{transform:scale(1.04)}
.vision-content-side{display:flex;align-items:center;background:var(--cream);padding:clamp(40px,6vw,80px)}
.vision-content-side .inner{max-width:520px}
.vision-grid{display:grid;gap:20px;margin-top:32px}
.vision-card{padding:24px;border-radius:0;background:var(--white);border:1px solid var(--brd);transition:all .5s var(--ease)}
.vision-card:hover{border-color:var(--gold-brd);box-shadow:var(--sh-m);transform:translateX(4px)}
.v-icon{width:42px;height:42px;border-radius:0;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.v-icon svg{width:18px;height:18px;color:var(--gold)}
.vision-card h3{font-family:var(--ff-h);font-size:.95rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.vision-card p{font-size:var(--fs-base);color:var(--txt-m);line-height:1.75}

/* CORE VALUES */
.values-showcase{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;overflow:hidden;border-radius:0;box-shadow:var(--sh-l)}
.values-img{position:relative;overflow:hidden;min-height:400px}
.values-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.values-img:hover img{transform:scale(1.04)}
.img-overlay{position:absolute;bottom:0;left:0;right:0;padding:clamp(24px,3vw,36px);background:linear-gradient(180deg,transparent,rgba(26,26,46,.8));color:white}
.img-overlay h3{font-family:var(--ff-h);font-size:1rem;font-weight:700;margin-bottom:4px}
.img-overlay p{font-size:var(--fs-base);opacity:.7}
.values-content-side{background:var(--cream);padding:clamp(24px,4vw,48px)}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.val-card{padding:24px;border-radius:0;background:var(--white);border:1px solid var(--brd);transition:all .5s var(--ease)}
.val-card:hover{border-color:var(--gold-brd);box-shadow:var(--sh-m);transform:translateY(-4px)}
.val-num{font-family:var(--ff-h);font-size:1.8rem;font-weight:800;color:var(--gold);opacity:.2;margin-bottom:4px;transition:opacity .4s}
.val-card:hover .val-num{opacity:1}
.val-card h4{font-family:var(--ff-h);font-size:.88rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.val-card p{font-size:var(--fs-base);color:var(--txt-m);line-height:1.7}

/* LEADERSHIP — Hierarchical Org Chart */
.leadership-sec {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(40px, 6vw, 60px);
}
.leader-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.leader-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .04;
}

/* Base Hierarchy Layout */
.leader-hierarchy {
    margin-top: 36px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Background Glowing Aura behind Org Chart */
.leader-hierarchy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(176, 140, 32, 0.035) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

.leader-tier {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

/* Desktop Connectors (Fluid and Aligned) */
.chart-connector {
    width: 100%;
    position: relative;
    z-index: 1;
    display: none;
}

@media (min-width: 1025px) {
    .chart-connector {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.line-vertical {
    width: 2px;
    height: 20px;
    background: var(--gold-brd);
    transition: all 0.4s var(--ease);
}
.line-horizontal {
    height: 2px;
    background: var(--gold-brd);
    transition: all 0.4s var(--ease);
}
.line-branch {
    width: 2px;
    height: 20px;
    background: var(--gold-brd);
    transition: all 0.4s var(--ease);
}
.line-branches-quad {
    display: flex;
    justify-content: space-between;
    transition: all 0.4s var(--ease);
}

/* Connector-specific Widths aligning with Card Centers */
.connector-1-2 {
    max-width: 320px;
    margin: 0 auto;
}

.connector-2-3 {
    max-width: 1000px;
    margin: 0 auto;
}
.connector-2-3 .line-horizontal,
.connector-2-3 .line-branches-quad {
    width: 77.5%; /* Spans exactly between Tier 3 centers (4 columns) */
}

/* Tier Specific Sizing (More compact) */
.tier-1 {
    max-width: 320px;
}
.tier-1 .leader-card {
    border: 1px solid rgba(176, 140, 32, 0.28);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 243, 0.92));
    box-shadow: 0 12px 35px rgba(176, 140, 32, 0.04), 0 2px 4px rgba(0, 0, 0, 0.01);
}
.tier-1 .leader-avatar {
    width: 72px;
    height: 72px;
}
.tier-1 .leader-card h4 {
    font-size: 1.05rem;
}
.tier-1 .leader-role {
    font-size: var(--fs-xs);
    letter-spacing: 2px;
    padding: 3px 12px;
    background: rgba(176, 140, 32, 0.08);
}

.tier-2 {
    max-width: 320px;
}
.tier-2 .leader-card {
    border: 1px solid rgba(176, 140, 32, 0.2);
}
.tier-2 .leader-avatar {
    width: 72px;
    height: 72px;
}
.tier-2 .leader-card h4 {
    font-size: 1.02rem;
}
.tier-2 .leader-role {
    font-size: var(--fs-xs);
    letter-spacing: 2px;
    padding: 3px 12px;
}

.tier-3 {
    max-width: 1000px;
    gap: 3%;
    justify-content: space-between;
}
.tier-3 .leader-card {
    width: 22.5%;
    padding: 18px 14px;
}
.tier-3 .leader-avatar {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}
.tier-3 .leader-card h4 {
    font-size: 0.9rem;
}
.tier-3 .leader-role {
    font-size: 0.62rem;
    letter-spacing: 1px;
    padding: 2px 8px;
    margin-top: 4px;
}
.tier-3 .leader-card p {
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Premium Card Design System */
.leader-card {
    text-align: center;
    padding: 22px 18px;
    border-radius:0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(250, 248, 243, 0.85));
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(176, 140, 32, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.01), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.5s var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Luxury Card Shimmer Sweep */
.leader-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-25deg);
    transition: 0.85s var(--ease);
    pointer-events: none;
    z-index: 2;
}

.leader-card:hover::after {
    left: 150%;
}

.leader-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 140, 32, 0.4);
    box-shadow: 0 16px 36px rgba(176, 140, 32, 0.1), 0 3px 8px rgba(0, 0, 0, 0.02);
}

/* SVG Avatar styling */
.leader-avatar {
    margin: 0 auto 14px;
    display: block;
    position: relative;
}

.leader-svg-avatar {
    width: 100%;
    height: 100%;
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.leader-card:hover .leader-svg-avatar {
    transform: scale(1.05) rotate(3deg);
    filter: drop-shadow(0 0 6px rgba(176, 140, 32, 0.3));
}

.leader-card h4 {
    font-family: var(--ff-h);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

/* High-end badge role */
.leader-role {
    display: inline-block;
    background: rgba(176, 140, 32, 0.04);
    border: 1px solid rgba(176, 140, 32, 0.08);
    color: var(--gold-d);
    font-family: var(--ff-h);
    font-weight: 600;
    text-transform: uppercase;
    border-radius:0;
    transition: all 0.4s var(--ease);
    position: relative;
    z-index: 1;
}

.leader-card:hover .leader-role {
    background: rgba(176, 140, 32, 0.08);
    border-color: rgba(176, 140, 32, 0.2);
    color: var(--gold);
}

.card-divider {
    height: 1px;
    width: 40px;
    background: linear-gradient(90deg, transparent, rgba(176, 140, 32, 0.2), transparent);
    margin: 10px auto;
    transition: width 0.4s var(--ease);
}

.leader-card:hover .card-divider {
    width: 65px;
    background: linear-gradient(90deg, transparent, rgba(176, 140, 32, 0.4), transparent);
}

.leader-card p {
    font-size: var(--fs-base);
    color: var(--txt-m);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Interactive Path Glow using :has() */
.leader-hierarchy:has(.tier-1 .leader-card:hover) .connector-1-2 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

.leader-hierarchy:has(.tier-2 .leader-card:hover) .connector-1-2 .line-vertical,
.leader-hierarchy:has(.tier-2 .leader-card:hover) .connector-2-3 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

.leader-hierarchy:has(.tier-3 .leader-card:nth-child(1):hover) .connector-2-3 .line-branches-quad .line-branch:nth-child(1),
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(1):hover) .connector-2-3 .line-horizontal,
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(1):hover) .connector-2-3 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

.leader-hierarchy:has(.tier-3 .leader-card:nth-child(2):hover) .connector-2-3 .line-branches-quad .line-branch:nth-child(2),
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(2):hover) .connector-2-3 .line-horizontal,
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(2):hover) .connector-2-3 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

.leader-hierarchy:has(.tier-3 .leader-card:nth-child(3):hover) .connector-2-3 .line-branches-quad .line-branch:nth-child(3),
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(3):hover) .connector-2-3 .line-horizontal,
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(3):hover) .connector-2-3 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

.leader-hierarchy:has(.tier-3 .leader-card:nth-child(4):hover) .connector-2-3 .line-branches-quad .line-branch:nth-child(4),
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(4):hover) .connector-2-3 .line-horizontal,
.leader-hierarchy:has(.tier-3 .leader-card:nth-child(4):hover) .connector-2-3 .line-vertical {
    background: var(--gold);
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(176,140,32,0.5);
}

/* PHILOSOPHY */
.philo{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.philo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.philo::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,26,46,.85),rgba(26,26,46,.75))}
.philo-content{position:relative;z-index:2;text-align:center;max-width:680px;padding:0 5%;color:white}
.philo-content .qm{font-family:var(--ff-a);font-size:clamp(4rem,8vw,6rem);color:var(--gold);line-height:.6;margin-bottom:16px;opacity:.6}
.philo-content blockquote{font-family:var(--ff-a);font-size:clamp(1rem,1.8vw,1.35rem);font-style:italic;line-height:1.75;margin-bottom:16px;opacity:.9}
.philo-content cite{font-style:normal;font-family:var(--ff-h);font-size:var(--fs-xs);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);opacity:.7}

/* CTA */
.cta-about{position:relative;min-height:350px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;color:white;padding:clamp(60px,10vw,100px) 5%}
.cta-about .cta-bg{position:absolute;inset:0;z-index:0}
.cta-about .cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-about .cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,26,46,.85),rgba(26,26,46,.75))}
.cta-about .cta-inner{position:relative;z-index:2}
.cta-about h2{font-family:var(--ff-h);font-size:var(--fs-xl);font-weight:700;margin-bottom:14px}
.cta-about p{font-size:var(--fs-md);opacity:.7;max-width:500px;margin:0 auto 28px;line-height:1.85}
.btn-gold{display:inline-flex;align-items:center;gap:8px;padding:14px 36px;border-radius:0;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:white;font-family:var(--ff-h);font-size:var(--fs-sm);font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;box-shadow:0 6px 25px rgba(176,140,32,.25);transition:all .4s var(--ease)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(176,140,32,.35)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 36px;border-radius:0;background:transparent;border:1.5px solid rgba(255,255,255,.2);color:white;font-family:var(--ff-h);font-size:var(--fs-sm);font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .4s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* RESPONSIVE */
@media(max-width:1024px){
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:not(:last-child)::after{display:none}
    .history-split{grid-template-columns:1fr}
    .vision-split{grid-template-columns:1fr}
    .vision-img{height:300px}
    .values-showcase{grid-template-columns:1fr}
    .values-img{min-height:280px}
    
    /* Responsive Leadership vertical stack and flow lines */
    .leader-hierarchy {
        gap: 32px;
    }
    .leader-tier {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        max-width: 100% !important;
    }
    .leader-card {
        width: 100% !important;
        max-width: 420px !important;
    }
    .leader-card:not(:last-child)::before {
        content: '';
        position: absolute;
        bottom: -32px;
        left: 50%;
        width: 2px;
        height: 32px;
        background: linear-gradient(180deg, var(--gold-brd), transparent);
        transform: translateX(-50%);
        z-index: 1;
        pointer-events: none;
    }
    .leader-tier:not(:last-child) .leader-card:last-child::before {
        content: '';
        position: absolute;
        bottom: -32px;
        left: 50%;
        width: 2px;
        height: 32px;
        background: linear-gradient(180deg, var(--gold-brd), var(--gold));
        opacity: 0.4;
        transform: translateX(-50%);
        z-index: 1;
        pointer-events: none;
    }
}
@media(max-width:768px){
    .stats{grid-template-columns:1fr;gap:0;padding:24px 5%}
    .stat{padding:12px 16px}
    .values-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
    .leader-card{padding:24px 20px !important}
    .leader-avatar{width:70px !important;height:70px !important}
    .vision-content-side{padding:24px}
    .values-content-side{padding:20px}
}