html, body {
    overflow-x: hidden;
}
/* ==========================================================================
   LEADERS SLIDER COMPONENT — Full-width banner style
   ========================================================================== */
.leaders-slider {
    font-family: var(--mc-font-primary, 'Plus Jakarta Sans', 'Inter', sans-serif);
    position: relative;
}
/* --- Helper: bứt full-width edge-to-edge khỏi khung content Elementor --- */
.leaders-header-section,
.leaders-slider-stage {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* 1. KHỐI HEADER (nền sáng) */
/* .leaders-header-section { 
    background:
        radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px) 0 0/16px 16px,
        #f3f4f6;
    padding: 40px 0 0;
}
 */
.leaders-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.leaders-title {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.leaders-title-main   { color: #000; }
.leaders-title-accent { color:  #1E7FE0; margin-left: 8px; }

.leaders-view-more-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1E7FE0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
.leaders-view-more-top .vm-arrow { font-size: 14px; }
.leaders-view-more-top:hover { text-decoration: underline; }

/* Nút điều hướng: vòng tròn viền đỏ */
.leaders-nav { 
	display: flex; gap: 12px; flex-shrink: 0; margin-top: 6px; 
	position: relative;
    z-index: 21;
}
button.mc-slider-btn[type="button"] {
    background: #fff;
    border: 1.5px solid #1E7FE0;
    color: #1E7FE0;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

button.mc-slider-btn[type="button"]:hover,
button.mc-slider-btn[type="button"]:focus {
    background: #1E7FE0;
    color: #fff;
    outline: none;
}

/* Focus bằng bàn phím (Tab) vẫn cần viền nhận biết, nhưng dùng màu của bạn thay vì mặc định */
button.mc-slider-btn[type="button"]:focus-visible {
    outline: 2px solid #1E7FE0;
    outline-offset: 3px;
}

/* Vạch chấm phân cách */
.leaders-separator {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}
.leaders-separator::before {
    content: '';
    display: block;
    border-top: 2px dotted rgba(0,0,0,0.15);
}

/* 2. KHỐI SÂN KHẤU (nền navy, full-width, ảnh tràn lên) */
.leaders-slider-stage {
    background: #122a52;
    overflow: visible; /* để ảnh tràn lên trên */
    padding: 90px 0 70px;
    z-index: 1; /* nằm sau header trong DOM => tự vẽ đè lên header khi tràn */
}

.leaders-slider-inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

.leaders-slider-track {
    position: relative;
    min-height: 420px;
}

/* 3. CẤU TRÚC SLIDE */
.leader-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.leader-slide.active { opacity: 1; pointer-events: auto; visibility: visible; z-index: 10; }
.leader-slide.enter-next { transform: translateX(100vw); opacity: 0; }
.leader-slide.enter-prev { transform: translateX(-100vw); opacity: 0; }
.leader-slide.exit-next { transform: translateX(-100vw); opacity: 0; transition: transform 0.6s cubic-bezier(0.8,0,0.2,1), opacity 0.6s; }
.leader-slide.exit-prev { transform: translateX(100vw); opacity: 0; transition: transform 0.6s cubic-bezier(0.8,0,0.2,1), opacity 0.6s; }

.leader-slide-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    height: 100%;
    align-items: center;
}

/* Khối CHỮ bay vào từ mép trái trang */
.leader-slide-text.slide-from-left {
    opacity: 0;
    transform: translateX(-15vw);
    transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.leader-slide.active .leader-slide-text.slide-from-left {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger từng dòng chữ bên trong */
.leader-slide-name, .leader-slide-tag, .leader-slide-quote-wrap, .leader-slide-more {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.leader-slide.active .leader-slide-name         { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.leader-slide.active .leader-slide-tag          { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.leader-slide.active .leader-slide-quote-wrap   { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }
.leader-slide.active .leader-slide-more         { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }

/* Khối ẢNH bay vào từ mép phải trang */
.leader-slide-photo.slide-from-right {
    opacity: 0;
    transform: translateX(15vw);
    transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.leader-slide.active .leader-slide-photo.slide-from-right {
    opacity: 1;
    transform: translateX(0);
}

.leader-slide.exit-next { transform: translateX(-100vw); opacity: 0; transition: transform 1.4s cubic-bezier(0.8,0,0.2,1), opacity 1.4s; }
.leader-slide.exit-prev { transform: translateX(100vw); opacity: 0; transition: transform 1.4s cubic-bezier(0.8,0,0.2,1), opacity 1.4s; }

.leader-slide-name {
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.leader-slide-tag {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 24px;
}
.leader-slide-quote-wrap {
    position: relative;
    padding-left: 28px;
    margin-bottom: 32px;
}
.quote-icon {
    position: absolute; left: 0; top: -14px;
    font-size: 44px; color: #1E7FE0;
    font-family: Georgia, serif; line-height: 1;
}
.leader-slide-bio {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.7;
    margin: 0;
}
.leader-slide-more {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none; font-weight: 700;
    font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
    transition: color 0.3s;
}
.leader-slide-more .vm-arrow { color: #1E7FE0; font-size: 14px; }
.leader-slide-more:hover { color: #22d3ee; }

/* 3.2 CỘT ẢNH (Right) — tràn lên khỏi vạch phân cách */
.leader-slide-photo {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Khối ẢNH bay vào từ mép phải trang */
.leader-slide-photo.slide-from-right {
    opacity: 0;
    transform: translateX(15vw);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.leader-slide.active .leader-slide-photo.slide-from-right {
    opacity: 1;
    transform: translateX(0);
}

.leader-photo-img {
    position: absolute;
    bottom: 0;
    max-height: calc(100% + 220px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    z-index: 5;
}
.leaders-slider:hover .leader-slide.active .leader-photo-img {
    transform: scale(1.03);
}

.leader-slide-photo-bg {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    z-index: 1;
}
.leader-slide-deco { display: none; } /* không dùng trong mẫu mới, có thể xoá hẳn nếu muốn */

/* Avatar fallback (khi không có ảnh) */
.leader-slide-avatar {
    width: 220px; height: 220px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; font-weight: 800; color: #fff;
    z-index: 5;
}
.leader-slide-avatar.av-blue   { background: #2563eb; }
.leader-slide-avatar.av-green  { background: #16a34a; }
.leader-slide-avatar.av-purple { background: #9333ea; }

/* 4. PHÂN TRANG (Dots) — căn giữa phía dưới */
.leader-dots {
    position: absolute;
    bottom: -40px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 8px;
    z-index: 50;
}
.leader-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    border: none; padding: 0;
    transition: all 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.leader-dot.active {
    width: 26px;
    border-radius: 4px;
    background: #2563eb;
}

/* Responsive */
@media (max-width: 992px) {
    .leader-slide-inner { grid-template-columns: 1fr; gap: 20px; }
    .leader-slide { position: relative; inset: auto; }
    .leader-photo-img { position: relative; max-height: 320px; }
    .leaders-header-inner { flex-direction: column; align-items: flex-start; }
    .leaders-slider-track { min-height: auto; }
}

/* ============ HIỆU ỨNG BAY VÀO TỪ 2 MÉP MÀN HÌNH ============ */

/* Khối CHỮ: xuất phát từ NGOÀI mép trái màn hình */
.leader-slide-text.slide-from-left {
    opacity: 0;
    transform: translateX(calc(-50vw - 50%));
    transition: opacity 1.6s cubic-bezier(0.16,1,0.3,1),
                transform 1.6s cubic-bezier(0.16,1,0.3,1);
}
.leader-slide.active .leader-slide-text.slide-from-left {
    opacity: 1;
    transform: translateX(0);
}

/* Khối ẢNH: xuất phát từ NGOÀI mép phải màn hình */
.leader-slide-photo.slide-from-right {
    opacity: 0;
    transform: translateX(calc(50vw + 50%));
    transition: opacity 1.6s cubic-bezier(0.16,1,0.3,1),
                transform 1.6s cubic-bezier(0.16,1,0.3,1);
}
.leader-slide.active .leader-slide-photo.slide-from-right {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger từng dòng chữ bên trong (xuất hiện tuần tự sau khi khối chữ bay tới) */
.leader-slide-name, .leader-slide-tag, .leader-slide-quote-wrap, .leader-slide-more {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.leader-slide.active .leader-slide-name        { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.leader-slide.active .leader-slide-tag         { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.leader-slide.active .leader-slide-quote-wrap  { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.leader-slide.active .leader-slide-more        { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }

/* Ảnh bên trong khối photo — bỏ mọi transform/transition riêng, để khối cha lo việc di chuyển */
.leader-photo-img {
    position: absolute;
    bottom: 0;
    max-height: calc(100% + 220px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    z-index: 5;
}

/* Exit: slide cũ trượt ra cũng chậm khớp nhịp */
.leader-slide.exit-next { transform: translateX(-100vw); opacity: 0; transition: transform 1.6s cubic-bezier(0.8,0,0.2,1), opacity 1.6s; }
.leader-slide.exit-prev { transform: translateX(100vw); opacity: 0; transition: transform 1.6s cubic-bezier(0.8,0,0.2,1), opacity 1.6s; }