/* ========== FACULTY HERO ========== */
    .faculty-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%);
        position: relative;
        overflow: hidden;
    }
    .faculty-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 15% 30%, rgba(235,0,139,0.22) 0%, transparent 55%),
                    radial-gradient(ellipse at 85% 15%, rgba(255,200,45,0.14) 0%, transparent 50%),
                    radial-gradient(ellipse at 60% 85%, rgba(76,110,142,0.25) 0%, transparent 55%);
        pointer-events: none;
    }
    .faculty-orb {
        position: absolute; border-radius: 50%;
        filter: blur(60px); pointer-events: none; opacity: 0.55;
        animation: facOrbFloat 9s ease-in-out infinite;
    }
    .faculty-orb-1 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(235,0,139,0.4), transparent); top: -60px; left: -60px; }
    .faculty-orb-2 { width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,200,45,0.3), transparent); bottom: -50px; right: -40px; animation-delay: -3s; }
    .faculty-orb-3 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(76,110,142,0.35), transparent); top: 55%; left: 55%; animation-delay: -5s; }
    @keyframes facOrbFloat {
        0%,100% { transform: translate(0,0) scale(1); }
        33%     { transform: translate(18px,-14px) scale(1.05); }
        66%     { transform: translate(-12px,10px) scale(0.95); }
    }
    .faculty-wave {
        position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0;
    }
    .anim-up { animation: facFadeUp 0.7s ease both; }
    .anim-delay-1 { animation-delay: .1s; }
    .anim-delay-2 { animation-delay: .2s; }
    .anim-delay-3 { animation-delay: .3s; }
    @keyframes facFadeUp {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ========== SPINE TOKENS ========== */
    .spine-pink { --spine-a: #EB008B; --spine-b: #c4006b; --spine-tint: rgba(235,0,139,0.08); }
    .spine-gold { --spine-a: #E3B34C; --spine-b: #b8872a; --spine-tint: rgba(227,179,76,0.10); }
    .spine-blue { --spine-a: #4C6E8E; --spine-b: #33475c; --spine-tint: rgba(76,110,142,0.10); }

    /* ========== FACULTY GRID / CARD (ชั้นหนังสือ) ========== */
    .faculty-shelf-rail {
        height: 10px; border-radius: 999px;
        background: linear-gradient(90deg, #EB008B, #E3B34C, #4C6E8E, #EB008B);
        background-size: 200% 100%;
        opacity: .18;
    }

    .faculty-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0,1fr));
        gap: 1.25rem;
    }
    @media (min-width: 640px)  { .faculty-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
    @media (min-width: 1024px) { .faculty-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

    .faculty-card {
        position: relative;
        display: flex; align-items: stretch;
        background: #fff;
        border-radius: 1.1rem;
        border: 1.5px solid #f0eef5;
        box-shadow: 0 4px 18px rgba(0,0,0,0.04);
        text-decoration: none !important;
        overflow: hidden;
        transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
    }
    .faculty-card:hover {
        transform: translateX(6px) translateY(-3px);
        box-shadow: 0 18px 36px var(--spine-tint), 0 4px 10px rgba(0,0,0,0.05);
        border-color: var(--spine-a);
    }

    /* สันหนังสือ ด้านซ้ายของการ์ด */
    .faculty-spine {
        width: 14px; flex-shrink: 0;
        background: linear-gradient(180deg, var(--spine-a), var(--spine-b));
        position: relative;
        transition: width .3s ease;
    }
    .faculty-card:hover .faculty-spine { width: 20px; }
    .faculty-spine::after {
        content: '';
        position: absolute; top: 14px; bottom: 14px; left: 50%;
        width: 1px; transform: translateX(-50%);
        background: rgba(255,255,255,0.35);
    }

    .faculty-body {
        flex: 1;
        padding: 1.4rem 1.4rem 1.4rem 1.2rem;
        display: flex; align-items: center; gap: 1rem;
    }

    .faculty-icon {
        flex-shrink: 0;
        width: 52px; height: 52px; border-radius: 0.9rem;
        display: flex; align-items: center; justify-content: center;
        background: var(--spine-tint);
        color: var(--spine-a);
        font-size: 1.25rem;
        transition: transform .3s ease;
    }
    .faculty-card:hover .faculty-icon {
        transform: rotate(-6deg) scale(1.08);
        background: linear-gradient(135deg, var(--spine-a), var(--spine-b));
        color: #fff;
    }

    .faculty-text { 
        min-width: 0; 
        display: flex;
        flex-direction: column;
        flex: 1; /* ให้ส่วนข้อความขยายพื้นที่ให้มากที่สุดเท่าที่เป็นไปได้ */
    }
    .faculty-name-th {
        font-family: 'Kanit', sans-serif;
        font-weight: 700; 
        font-size: 1.1rem; 
        color: #232238;
        line-height: 1.35;
    }
    .faculty-name-en {
        font-family: 'Sarabun', sans-serif;
        font-size: 14px; 
        color: #292929; 
        margin-top: 2px;
        letter-spacing: .01em;
        white-space: normal; /* อนุญาตให้ขึ้นบรรทัดใหม่ได้ */
        word-break: break-word; /* ตัดคำเมื่อยาวเกินไป */
    }

    .faculty-arrow {
        flex-shrink: 0;
        width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #c9cbdb; background: #f7f6fb;
        transition: all .3s ease;
        /* margin-left: auto; ถูกลบออก */
    }
    .faculty-card:hover .faculty-arrow {
        background: var(--spine-a); color: #fff; transform: translateX(3px);
    }

    .faculty-count-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 18px; border-radius: 999px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.9);
        font-size: 14px; font-family: 'Kanit', sans-serif; font-weight: 500;
        backdrop-filter: blur(6px);
    }



    /* ========== FACULTY HERO ========== */