/* ============================================
   EXPERT TEAM PAGE STYLES
   ============================================ */

/* ============================================
   SECTION 1: EXPERT INTRO
   ============================================ */
.expert-intro-section {
    padding-top: 120px;
    padding-bottom: 80px;
}

.expert-intro-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    align-items: center;
    justify-content: center;
}

/* Left: Text Box */
.expert-text-box {
    background: #eceeff;
    border-radius: 20px;
    padding: 40px;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    flex: 1;
    max-width: 600px;
    position: relative;
}

.expert-text-box::after {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: solid 3px #757bc6;
    border-radius: 20px;
    z-index: -1;
}

.expert-text-box p {
    margin-bottom: 20px;
}

.expert-text-box p:last-child {
    margin-bottom: 0;
}

.highlight-brand {
    color: #2e3293;
    font-weight: 700;
}

.highlight-key {
    color: #ff9900;
    font-weight: 600;
}

/* Right: Images Grid */
.expert-images-grid {
    position: relative;
    display: flex;
    gap: 20px;
    width: 600px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid-item {
    width: calc(50% - 10px);
    overflow: hidden;
    border-radius: 12px;
    max-height: 200px;
}

.grid-item.grid-icon {
    background: gray;
    aspect-ratio: 1;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 60px;
    color: white;

}

.grid-item.grid-icon.icon-blue {
    background: #2e3293;
    transform-origin: 0% 100%;
    transform: scale(0.55);
}

.grid-item.grid-icon.icon-orange {
    background: #eaa125;
    transform-origin: 100% 0%;
    transform: scale(0.7);
}

/* Image Items */
.grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Decorative Icons */

.deco-icon img {
    width: 100%;
    height: auto;
    display: block;
}

.deco-plane-expert {
    width: 400px;
    top: -57px;
    right: 18px;
    animation: float 3s ease-in-out infinite;
    z-index: -1;
}

.deco-idea-expert {
    width: 200px;
    bottom: -38px;
    left: -28px;
    animation: pulse 2s ease-in-out infinite;
}

/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.1);
    }
}



/* ============================================
   SECTION 2: EXPERT PROFILES
   ============================================ */
.expert-profiles-section {
    padding: 50px 0;
}

/* Custom section title for expert profiles - override utilities.css */
.expert-profiles-section .section-title {
    font-size: 2.5rem;
    /* Base: 2.2rem */
    margin-bottom: 15px;
    /* Base: var(--spacing-xxl) */
    padding-bottom: 20px;
    /* Base: 15px */
}

.expert-profiles-section .section-title::after {
    width: 80px;
    /* Base: 60px */
    background: linear-gradient(90deg, #ff9900, #ffb84d);
    /* Base: solid var(--secondary-color) */
}


.experts-list {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Expert Card */
.expert-card {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    background: white;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    border: solid 1px #dee5ef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.expert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Zigzag Layout - Reverse for even cards */
.expert-card-reverse {
    flex-direction: row-reverse;
}

/* Expert Number Badge */
.expert-number {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(46, 50, 147, 0.08);
    line-height: 1;
}

.expert-card-reverse .expert-number {
    right: auto;
    left: 30px;
}

/* Avatar */
.expert-avatar {
    position: relative;
    flex-shrink: 0;
}

.expert-avatar img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.avatar-border {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e3293, #a7aaff, #2e3293);
    z-index: 1;
    animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Content */
.expert-content {
    flex: 1;
    min-width: 0;
}

.expert-header {
    margin-bottom: 20px;
}

.expert-name {
    font-size: 1.8rem;
    font-weight: 900;
    color: #333;
    position: relative;
    display: inline-block;
}

.expert-name::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ff9900, transparent);
}

/* Orange Accent Variant */
.orange-accent .avatar-border {
    background: linear-gradient(135deg, #e08600, #ffc060, #ff7600);
}



/* Badge */
.expert-badge {
    display: inline-block;
    padding: 3px 13px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    top: -2px;
    margin-left: 8px;
}

.badge-blue {
    background: #e0e3ff;
    color: var(--primary-color-text);
}



/* Description */
.expert-description {
    position: relative;
}

.description-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
    transition: all 0.4s ease;
}

.description-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.description-text p {
    margin-bottom: 15px;
}

.description-text p:last-child {
    margin-bottom: 0;
}

/* Expand Button */
.btn-expand {
    background: transparent;
    border: none;
    color: #e28e0f;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;

}

.btn-expand:hover {
    color: #fea012;
}

.btn-expand i {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.btn-expand.expanded i {
    transform: rotate(180deg);
}


/*CSS block Phương pháp giảng dạy*/
.expert-method-teaching {
    padding: 80px 0;
}

.teaching-method-wp-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: auto;
    margin-top: 58px;
}

.teaching-text-box {
    padding: 32px;
    border-radius: 16px;
    background-color: #fff2e3;
    max-width: 800px;
    margin: auto;
    font-size: 17px;
    position: relative;
    margin-bottom: 60px;
}

.teaching-text-box::after {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 20px solid #fdf2e4;
}

.teaching-text-box .highlight-brand {
    color: #e68a00;
}

.card-method-teaching {
    position: relative;
    background: white;
    border-radius: 16px;
    box-shadow: 6px 15px 30px rgba(0, 0, 0, 0.15);
    flex: 1;
    padding: 24px;
}

.card-method-teaching::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    width: 20px;
    height: 100px;
    background-color: #ffffff;
    z-index: -1;
}

.card-method-teaching:last-child::after {
    display: none;
}

.card-method-teaching::before {
    content: '';
    position: absolute;
    width: 108%;
    height: 105%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    z-index: -2;
    border: solid 3px #757bc6;
}

.card-method-teaching .nb-badge {
    position: absolute;
    width: 66px;
    height: 66px;
    top: 30px;
    left: -48px;
    font-size: 36px;
    font-weight: 800;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 6px white;
    z-index: 1;
}

.card-method-teaching .illus-img {
    max-width: 110px;
    margin: auto;
    margin-bottom: 16px;
}

.card-method-teaching .title-method {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 12px;
}

.card-method-teaching .method-text {
    font-size: 17px;
}

.teaching-method-wp-content .arrow-connect {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    align-self: center;
}

.teaching-method-wp-content .arrow-connect .arrow-mt {
    width: 16px;
    opacity: 0;
    animation: fadeInLeftToRight 1.5s ease-in-out infinite;
}

.teaching-method-wp-content .arrow-connect .arrow1 {
    animation-delay: 0s;
}

.teaching-method-wp-content .arrow-connect .arrow2 {
    animation-delay: 0.2s;
}

.teaching-method-wp-content .arrow-connect .arrow3 {
    animation-delay: 0.4s;
}

@keyframes fadeInLeftToRight {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}


/*End CSS block Phương pháp giảng dạy*/

/* ============================================
   SECTION 4: CORE VALUES
   ============================================ */
.core-values-grid {
    margin-top: 36px;
}

/* Responsive for core values will be added here later */

/* ============================================
   SECTION 5: EXPERT COMPANION
   ============================================ */
.expert-companion-section {
    background-image: url('/web/img/bg-pattern-caro.jpg');
    background-size: cover;
    background-position: center;
}

.inner-companion-section {
    display: flex;
    gap: 100px;
    align-items: center;
}

.wp-sideCt-expertCompanion {
    flex: 1;
    max-width: 800px;
}

.wp-side-illus-expertCompanion {
    flex: 1;
    position: relative;

    /* CSS Variables for easy responsive scaling */
    --orbit-scale: 1;
    --container-size: calc(540px * var(--orbit-scale));
    --logo-size: calc(120px * var(--orbit-scale));
    --ring-1-size: calc(200px * var(--orbit-scale));
    --ring-2-size: calc(320px * var(--orbit-scale));
    --ring-3-size: calc(440px * var(--orbit-scale));
    --radius-1: calc(100px * var(--orbit-scale));
    /* Half of ring-1: 200/2 = 100 */
    --radius-2: calc(220px * var(--orbit-scale));
    /* Half of ring-2: 440/2 = 160 */
    --avatar-size: calc(80px * var(--orbit-scale));
    --icon-size: calc(50px * var(--orbit-scale));
    --dot-size: calc(20px * var(--orbit-scale));

    width: var(--container-size);
    height: var(--container-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Logo */
.orbit-center {
    position: absolute;
    width: var(--logo-size);
    height: var(--logo-size);
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(46, 50, 147, 0.15);
    z-index: 10;
}

.orbit-center img {
    width: calc(var(--logo-size) * 0.67);
    height: auto;
    filter: brightness(30);
}

/* Rotating Orbit Rings (dashed circles) */
.orbit-ring {
    position: absolute;
    border: 2px dashed rgba(46, 50, 147, 0.2);
    border-radius: 50%;
    animation: rotate-orbit 60s linear infinite;
}

.orbit-ring-1 {
    width: var(--ring-1-size);
    height: var(--ring-1-size);
}

.orbit-ring-2 {
    width: var(--ring-2-size);
    height: var(--ring-2-size);
}

.orbit-ring-3 {
    width: var(--ring-3-size);
    height: var(--ring-3-size);
}

/* Orbit Items - Simple class-based positioning */
.orbit-item {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* Orbit 1 (Inner ring) */
.illus-cpn-icon-comments {
    left: 41%;
    top: 24%;
}

.illus-cpn-vuhoangdiep {
    left: 78%;
    top: 70%;
    animation: avatar-pulse 3s ease-in-out infinite;
    animation-delay: 0s;
}

.illus-cpn-icon-heart {
    left: 50%;
    top: 80%;
}

/* Orbit 3 (Outer ring) */
.illus-cpn-icon-handshake {
    left: 81%;
    top: 41%;
}

.illus-cpn-dangtu {
    left: 62%;
    top: 24%;
    animation: avatar-pulse 3s ease-in-out infinite;
    animation-delay: 0.75s;
}

.illus-cpn-dot-orange {
    left: 46%;
    top: 10%;
}

.illus-cpn-dinhvanhung {
    left: 22%;
    top: 30%;
    animation: avatar-pulse 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.illus-cpn-dot-green {
    left: 18%;
    top: 48%;
}

.illus-cpn-icon-users {
    left: 28%;
    top: 58%;
}

.illus-cpn-hoangminhtien {
    left: 32%;
    top: 82%;
    animation: avatar-pulse 3s ease-in-out infinite;
    animation-delay: 2.25s;
}

.illus-cpn-dot-blue {
    left: 49%;
    top: 68%;
}

/* Avatar Pulse Animation */
@keyframes avatar-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Avatar Styling */
.orbit-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.orbit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon with Background */
.orbit-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--icon-size) * 0.4);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-blue {
    background: #4A90E2;
}

.icon-orange {
    background: #f4ac25;
}

.icon-purple {
    background: #8B5CF6;
}

.icon-teal {
    background: #14B8A6;
}

.icon-green {
    background: #a1bf46;
}

/* Colored Dots (no icon) */
.orbit-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
}

.dot-blue {
    background: #60A5FA;
}

.dot-green {
    background: #34D399;
}

.dot-orange {
    background: #FB923C;
}

.dot-purple {
    background: #C084FC;
}

/* Animations */
@keyframes rotate-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes counter-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes counter-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* ============================================
   END CORE VALUES SECTION
   ============================================ */


/* repsonsive Đội ngũ chuyên gia*/
@media(max-width:575px) {

    /* Expert Intro Section */
    .expert-intro-section {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .expert-intro-grid {
        gap: 30px;
    }

    .expert-text-box {
        padding: 20px;
        font-size: 16px;
        max-width: 100%;
        order: 2;
    }

    .expert-images-grid {
        display: none;
    }

    .expert-text-box::after {
        top: -13px;
        left: -1.5%;
        border-width: 2px;
    }

    .expert-text-box p {
        margin-bottom: 12px;
    }


    /* Expert Profiles Section */
    .expert-profiles-section {
        padding: 30px 0;
    }



    /* Override the custom larger title for mobile */

    .expert-profiles-section .section-title::after {
        width: 35px;
    }



    .experts-list {
        gap: 20px;
    }

    /* Expert Card - Stack vertically */
    .expert-avatar {
        align-self: center;
    }

    .expert-card,
    .expert-card-reverse {
        flex-direction: column;
        padding: 24px;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }

    .expert-number {
        font-size: 2rem;
        top: 10px;
        right: 15px;
    }

    .expert-card-reverse .expert-number {
        left: 15px;
    }

    .expert-avatar img {
        width: 120px;
        height: 120px;
    }

    .avatar-border {
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
    }

    .expert-name {
        font-size: 20px;
    }

    .expert-badge {
        font-size: 12px;
        padding: 2px 10px;
    }

    .description-text {
        font-size: 15px;
    }

    /* Teaching Method Section */
    .expert-method-teaching {
        padding: 40px 0;
    }



    .teaching-text-box {
        padding: 20px;
        font-size: 16px;
        margin-bottom: 40px;
    }

    .teaching-text-box::after {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 15px solid #fdf2e4;
        bottom: -15px;
    }

    .teaching-method-wp-content {
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
        width: 100%;
        max-width: 100%;
    }

    .card-method-teaching {
        padding: 20px;
        width: 90%;
        margin: auto;
        max-width: 400px;
    }



    .card-method-teaching::after {
        display: none;
    }

    .card-method-teaching::before {
        border-width: 2px;
        width: 105%;
    }

    .card-method-teaching .nb-badge {
        width: 44px;
        height: 44px;
        font-size: 24px;
        left: -38px;
        top: 20px;
        border-width: 4px;
    }

    .card-method-teaching .illus-img {
        max-width: 80px;
        margin-bottom: 12px;
    }

    .card-method-teaching .title-method {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .card-method-teaching .method-text {
        font-size: 16px;
    }

    .teaching-method-wp-content .arrow-connect {
        transform: rotate(90deg);
        z-index: 2;
    }

    /* Core Values Section */

    .core-values-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }

    /* Expert Companion Section */
    .expert-companion-section {
        padding: 40px 0;
    }

    .inner-companion-section {
        flex-direction: column;
        gap: 40px;
    }

    .wp-sideCt-expertCompanion {
        max-width: 100%;
    }



    .pillar-core-value {
        padding: 20px;
    }

    .pillar-core-value p {
        font-size: 17px;
    }

    /* Orbit visualization - scale down significantly */
    .wp-side-illus-expertCompanion {
        --orbit-scale: 0.74;
        height: 373px;
        position: relative;
        flex: none;
        width: 350px;
        margin: auto;
        margin-top: -40px;
        margin-bottom: -40px;
        overflow: hidden;
    }

    .illus-cpn-dinhvanhung {
        left: 10%;
    }

    .illus-cpn-dangtu {
        left: 66%;
        top: 22%;
    }

    .illus-cpn-hoangminhtien {
        left: 20%;
    }

    .illus-cpn-vuhoangdiep {
        left: 90%;
    }




}

@media(min-width:576px) and (max-width:767px) {

    .expert-images-grid {
        display: none;
    }

    .expert-card {
        padding: 24px;
        gap: 32px;
    }

    .expert-avatar img {
        width: 120px;
        height: 120px;
    }

    .avatar-border {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
    }

    .expert-name {
        font-size: 22px;
    }

    .expert-number {
        top: 12px;
        right: 16px;
        font-size: 38px;
    }

    .expert-text-box {
        font-size: 17px;
    }

    .expert-text-box::after {
        top: -20px;
        left: 14px;
        width: 94%;
    }

    .expert-intro-section {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .experts-list {
        gap: 20px;
    }

    /* Teaching Method Section */
    .expert-method-teaching {
        padding: 40px 0;
    }



    .teaching-text-box::after {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 15px solid #fdf2e4;
        bottom: -15px;
    }

    .teaching-method-wp-content {
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
        width: 100%;
        max-width: 100%;
    }

    .card-method-teaching {
        padding: 20px;
        width: 90%;
        margin: auto;
        position: relative;
        padding-left: 100px;
    }



    .card-method-teaching::after {
        display: none;
    }

    .card-method-teaching::before {
        border-width: 2px;
        width: 104%;
        height: 108%;
    }

    .card-method-teaching .nb-badge {
        width: 44px;
        height: 44px;
        font-size: 24px;
        left: -35px;
        top: 20px;
        border-width: 4px;
    }

    .card-method-teaching .illus-img {
        max-width: 80px;
        position: absolute;
        left: 10px;
        top: 22px;
        margin-bottom: 0;
    }

    .card-method-teaching .title-method {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .card-method-teaching .method-text {
        font-size: 15px;
    }

    .teaching-method-wp-content .arrow-connect {
        transform: rotate(90deg);
        z-index: 2;
    }

    .expert-profiles-section {
        padding: 30px 0;
    }

    /* Expert Companion Section */
    .expert-companion-section {
        padding: 40px 0;
    }

    .inner-companion-section {
        flex-direction: column;
        gap: 40px;
    }

    .wp-sideCt-expertCompanion {
        max-width: 100%;
    }



    .pillar-core-value {
        padding: 20px;
    }

    .pillar-core-value p {
        font-size: 17px;
    }

    /* Orbit visualization - scale down significantly */
    .wp-side-illus-expertCompanion {
        --orbit-scale: 0.8;
        height: 373px;
        position: relative;
        flex: none;
        width: 450px;
        margin: auto;
        overflow: hidden;
    }

    .illus-cpn-dinhvanhung {
        left: 15%;
    }

    .illus-cpn-dangtu {
        left: 66%;
        top: 22%;
    }

    .illus-cpn-hoangminhtien {
        left: 20%;
    }

    .illus-cpn-vuhoangdiep {
        left: 85%;
    }



}

@media(min-width:768px) and (max-width:991px) {
    .expert-images-grid {
        display: none;
    }

    .expert-intro-section {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .expert-name {
        font-size: 24px;
    }

    .expert-card {
        padding: 30px;
    }

    .expert-avatar img {
        width: 148px;
        height: 148px;
    }

    .experts-list {
        gap: 20px;
    }


    /* Teaching Method Section */
    .expert-method-teaching {
        padding: 50px 0;
    }



    .teaching-text-box::after {
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 15px solid #fdf2e4;
        bottom: -15px;
    }

    .teaching-method-wp-content {
        flex-direction: column;
        gap: 12px;
        margin-top: 40px;
        width: 100%;
        max-width: 100%;
    }

    .card-method-teaching {
        padding: 20px;
        width: 90%;
        margin: auto;
        position: relative;
        padding-left: 150px;
    }



    .card-method-teaching::after {
        display: none;
    }

    .card-method-teaching::before {
        border-width: 2px;
        width: 102%;
        height: 113%;
    }

    .card-method-teaching .nb-badge {
        width: 44px;
        height: 44px;
        font-size: 24px;
        left: -35px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 4px;
    }

    .card-method-teaching .illus-img {
        max-width: 90px;
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        margin-bottom: 0;
    }

    .card-method-teaching .title-method {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .card-method-teaching .method-text {
        font-size: 15px;
    }

    .teaching-method-wp-content .arrow-connect {
        transform: rotate(90deg);
        z-index: 2;
    }

    .expert-profiles-section {
        padding: 30px 0;
    }



    /* Orbit visualization - scale down significantly */
    .wp-side-illus-expertCompanion {
        height: 440px;
        position: relative;
        flex: none;
        width: 550px;
        margin: auto;
        overflow: hidden;
        transform: scale(0.9);
    }

    .illus-cpn-dinhvanhung {
        left: 15%;
    }

    .illus-cpn-dangtu {
        left: 66%;
        top: 22%;
    }

    .illus-cpn-hoangminhtien {
        left: 20%;
    }

    .illus-cpn-vuhoangdiep {
        left: 85%;
    }

    /* Expert Companion Section */
    .expert-companion-section {
        padding: 40px 0;
    }

    .inner-companion-section {
        flex-direction: column;
        gap: 20px;
    }

    .wp-sideCt-expertCompanion {
        max-width: 100%;
    }


    .pillar-core-value {
        max-width: 700px;
        margin: auto;
    }

    .pillar-core-value p {
        font-size: 17px;
    }


}

@media(min-width:992px) and (max-width:1199px) {
    .expert-images-grid {
        margin-left: -40px;
        width: 350px;
    }

    .deco-idea-expert {
        width: 146px;
        bottom: -38px;
        left: 0;
    }

    .deco-plane-expert {
        width: 300px;
        top: -57px;
        right: 30px;
    }

    .expert-text-box::after {
        top: -20px;
        left: auto;
        right: -16px;
    }

    .expert-intro-section {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .experts-list {
        gap: 20px;
    }

    .expert-avatar img {
        width: 160px;
        height: 160px;
    }

    .expert-method-teaching {
        padding: 50px 0;
    }

    .teaching-method-wp-content {
        gap: 8px;
        padding: 0px 20px;
    }

    .card-method-teaching {
        padding: 16px;
    }

    .card-method-teaching .title-method {
        font-size: 20px;
    }

    .card-method-teaching .illus-img {
        max-width: 90px;
    }

    .card-method-teaching .nb-badge {
        width: 52px;
        height: 52px;
        font-size: 24px;
        left: -38px;
    }

    .teaching-method-wp-content .arrow-connect {
        gap: 0;
        left: -6px;
        position: relative;
    }

    .card-method-teaching .method-text {
        font-size: 16px;
    }


    .inner-companion-section {
        gap: 40px;
    }

    .wp-side-illus-expertCompanion {
        overflow: hidden;
    }

    .wp-sideCt-expertCompanion {
        padding-left: 30px;
    }




}

@media(min-width:1200px) and (max-width:1499px) {
    .expert-images-grid {
        margin-left: -40px;
        width: 350px;
    }

    .deco-idea-expert {
        width: 146px;
        bottom: -38px;
        left: 0;
    }

    .deco-plane-expert {
        width: 300px;
        top: -57px;
        right: 30px;
    }

    .expert-method-teaching {
        padding: 60px 0;
    }

    .teaching-method-wp-content {
        gap: 16px;
    }

    .teaching-method-wp-content .arrow-connect {
        gap: 0;
        left: -6px;
        position: relative;
    }

    .inner-companion-section {
        gap: 32px;
    }


}

/* end repsonsive Đội ngũ chuyên gia*/
/* ============================================
   END EXPERT TEAM PAGE STYLES
   ============================================ */