body {
        font-family: "Sarabun", sans-serif;
        background-color: #f8f9fa;
        background: linear-gradient(180deg, #f9f9f9, #e3f6e5);
    }

    /* ===========================
   NAVBAR PREMIUM STYLE
=========================== */

    /* พื้นหลังเขียวเข้ม หรูๆ */
    .main-navbar {
        background: #1b5e20;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        position: relative;
        z-index: 9999 !important;
    }

    /* โลโก้ */
    .navbar-brand img {
        border-radius: 12px;
    }

    /* ลิงก์เมนู */
    .navbar-nav .nav-link {
        position: relative;
        padding: 10px 16px;
        font-weight: 500;
        color: #e8f5e9 !important;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.35s ease;
    }

    /* แสงวิ่งแบบ link-card */
    .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 120%;
        height: 100%;
        background: linear-gradient(120deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.35) 50%,
                rgba(255, 255, 255, 0) 100%);
        transition: all 0.55s ease;
    }

    /* Hover */
    .navbar-nav .nav-link:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
        color: #ffffff !important;
    }

    .navbar-nav .nav-link:hover::before {
        left: 100%;
    }

    /* dropdown arrow หมุน */
    .dropdown-toggle .dropdown-arrow {
        transition: transform 0.3s ease;
    }

    .nav-item.dropdown.show .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* DROPDOWN MENU */
    .dropdown-menu {
        position: absolute;
        z-index: 99999 !important;
        border-radius: 14px;
        padding: 12px;
        border: none;

        /* Glass effect */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        /* เงานุ่ม ๆ */
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);

        /* Animation */
        animation: fadeDown 0.25s ease-out;
    }

    .dropdown-menu .dropdown-item {
        padding: 10px 16px;
        border-radius: 10px;
        font-weight: 500;
        color: #1b5e20;
        transition: all 0.25s ease;
    }

    .dropdown-menu .dropdown-item:hover {
        background: linear-gradient(135deg, #e8ffd9, #ffeab9);
        transform: translateX(6px);
        color: #1b5e20 !important;
    }

    /* MOBILE FIX — ไม่ล้น */
    @media (max-width: 991px) {
        .navbar-nav .nav-link {
            width: 100%;
            border-radius: 8px;
        }

        body,
        html {
            overflow-x: hidden;
        }
    }

    /* Animation keyframes */
    @keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ปุ่มเข้าสู่ระบบ */
    .btn-light {
        background-color: #ffffff;
        border: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s;
    }

    .btn-light:hover {
        transform: translateY(-2px);
        background-color: #ffeb3b;
        color: #000 !important;
    }

    /* Carousel */
    #schoolCarousel img {
        height: 90vh;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        #schoolCarousel img {
            height: 32vh;
            /* เล็กลงในมือถือ */
        }
    }

    /* ลด z-index ของ carousel เพื่อไม่ให้ทับ */
    .carousel {
        position: relative;
        z-index: 1 !important;
    }

    .carousel-caption {
        background-color: rgba(0, 0, 0, 0.45);
        border-radius: 12px;
    }

    /* กรอบ Carousel อัตราส่วน 16:9 */
    .carousel-16x9 {
        aspect-ratio: 16 / 9;
        width: 100%;
        overflow: hidden;
    }

    /* ให้รูปครอบพื้นที่พอดี */
    .carousel-16x9 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Footer */
    footer {
        background-color: #1b5e20;
        color: white;
        padding: 25px 0;
        margin-top: 50px;
    }

    footer a {
        color: #ffe082;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }

    .info-section {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 40px;
        margin-top: 40px;
    }

    h2.section-title {
        color: #1b5e20;
        border-left: 8px solid #ff6f00;
        padding-left: 15px;
        font-weight: 700;
    }

    .hover-card {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .hover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    }

    .quote-card {
        background: linear-gradient(90deg, #f1f8e9, #fffde7);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .card-title i {
        margin-right: 8px;
    }

    /* Animation */
    [class*="col-"] {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
    }

    [class*="col-"].show {
        opacity: 1;
        transform: translateY(0);
    }

    /* สไตล์ ปุ่ม Bac to top */
    #btn-back-to-top {
        position: fixed;
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.4s ease;
        z-index: 9999;
    }

    #btn-back-to-top.show-btn {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* เอฟเฟกต์ตอน hover */
    #btn-back-to-top:hover {
        transform: scale(1.15);
        background-color: rgb(80, 80, 80);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }

    /* เพิ่มแอนิเมชัน bounce เล็กน้อยตอนโผล่ */
    @keyframes bounceIn {
        0% {
            transform: translateY(20px);
            opacity: 0;
        }

        60% {
            transform: translateY(-5px);
            opacity: 1;
        }

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

    #btn-back-to-top.show-btn {
        animation: bounceIn 0.4s ease;
    }

    /* เอฟเฟกต์ fade-in */
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease-out forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ปรับสไตล์หัวข้อ */
    section h2 {
        letter-spacing: 0.5px;
    }

    .alert-success {
        background: linear-gradient(90deg, #28a745, #81c784);
        color: white;
        border: none;
    }

    /* structure */
    /* โครงสร้างองค์กร */
    .org-chart {
        position: relative;
    }

    .org-box {
        background: #fff;
        border-left: 5px solid #28a745;
        border-radius: 12px;
        padding: 15px 20px;
        width: 260px;
        transition: all 0.3s ease;
    }

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

    .org-box.top {
        margin: 0 auto;
        background: linear-gradient(90deg, #28a745, #81c784);
        color: white;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .org-level {
        position: relative;
    }

    .org-connector {
        width: 2px;
        height: 30px;
        background: #28a745;
        margin: 0 auto;
    }

    /* สำหรับมือถือ */
    @media (max-width: 768px) {
        .org-box {
            width: 100%;
        }
    }

    .organization {
        background: linear-gradient(180deg, #f9fff9, #ffffff);
    }

    .org-box {
        background-color: #fff;
        border-radius: 1rem;
        transition: all 0.3s ease;
    }

    .org-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* รูปบุคลากรแบบครึ่งตัว */
    .staff-img {
        width: 100%;
        height: 300px;
        /* ปรับได้ตามรูปของคุณ */
        object-fit: cover;
        /* สำคัญที่สุด ทำให้รูปไม่ล้น */
        object-position: top;
        border-radius: 12px;
    }


    /* เส้นกั้น */
    .divider-line {
        width: 200px;
        height: 4px;
        background: linear-gradient(90deg, #75ff95, #ffac75);
        border-radius: 2px;
        position: relative;
    }

    .divider-line::before,
    .divider-line::after {
        content: "";
        position: absolute;
        top: -3px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #28a745;
    }

    .divider-line::before {
        left: -8px;
    }

    .divider-line::after {
        right: -8px;
        background-color: #ff6600;
    }

    /* News and link */
    .news-card img {
        height: 200px;
        object-fit: cover;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .link-card {
        display: flex;
        /* ใช้ flexbox */
        flex-direction: column;
        /* จัดเรียงแนวตั้ง */
        align-items: center;
        /* จัดแนวนอนให้อยู่ตรงกลาง */
        justify-content: center;
        /* จัดแนวตั้งให้อยู่ตรงกลาง */
        border-radius: 14px;
        transition: all 0.35s ease;
        background: #ffffff;
        position: relative;
        overflow: hidden;
    }

    /* แสงวิ่ง (Highlight Animation) */
    .link-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0) 100%);
        transition: all 0.5s ease;
    }

    /* เอฟเฟกต์ Hover */
    .link-card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
        background: linear-gradient(135deg, #eafff0, #fff9e6);
    }

    /* แสงวิ่งตอน hover */
    .link-card:hover::before {
        left: 100%;
    }

    /* ไอคอนเด้งนิด ๆ */
    .link-card i {
        transition: transform 0.3s ease;
    }

    .link-card:hover i {
        transform: scale(1.2) rotate(3deg);
    }

    /* ไอคอนแบบรูปภาพในแหล่งเรียนรู้ออนไลน์ */
    .link-icon-img {
        max-width: 54px;
        max-height: 54px;
        /* ปรับขนาดรูป */
        height: auto;
        margin-bottom: 10px;
        /* ระยะห่างระหว่างรูปกับข้อความ */
        transition: transform 0.3s ease;
    }

    /* เอฟเฟกต์ตอน hover ให้เด้งเหมือนไอคอนเดิม */
    .link-card:hover .link-icon-img {
        transform: scale(1.12);
    }

    /* แก้ Facebook page plugin ล้นจอมือถือ */
    .fb-wrapper {
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
        padding: 10px 0;
    }

    .fb-wrapper iframe {
        width: 100% !important;
    }

    .fb-page {
        width: 100% !important;
    }