main .section-6 .card h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 21px;
        height: 20px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin-bottom: 30px;
    }
    
    /* ✅ ใช้เฉพาะใน section-4 swiper-44 */
    /* 🌟 Circular Glassmorphism Card for Swiper-44 */
    main .section-4 {
        overflow: visible !important;
    }
    main .section-4 .swiper-44 {
        overflow: hidden;
        /* ✅ ซ่อนภาพที่อยู่นอกขอบจอ */
        padding: 50px 0;
    }

    main .section-4 .swiper-44 .swiper-wrapper {
        overflow: visible !important;
    }

    main .section-4 .swiper-44 .swiper-slide{
        overflow: visible !important;
    }

    main .section-4 .container-xxl {
        overflow: visible !important;
    }

    main .section-4 .swiper-44 .glass-card {
        /* background: rgba(255, 255, 255, 0.12); */
        border: 1px solid rgba(255, 255, 255, 0.25);
        /* backdrop-filter: blur(84px); */
        /* -webkit-backdrop-filter: blur(84px); */
        border-radius: 10%;
        color: #fff;
        width: 300px;
        height: 450px;
        margin: 0 auto;
        overflow: visible !important;
        /* box-shadow: 0 2px 84px rgba(0, 0, 0, 0.2); */
        transition: all 0.4s ease;
        text-align: center;
        position: relative;
    }

    main .section-4 .swiper-44 .glass-card .card {
        overflow: visible !important;
    }

    main .section-4 .swiper-44 .glass-card:hover {
        transform: translateY(-8px);
        /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); */
        background: rgba(255, 255, 255, 0.18);
    }

    /* ✅ Card Body */
    main .section-4 .swiper-44 .glass-card .card-body {
        display: flex;
        flex-direction: column;
        /* ✅ เรียงแนวตั้ง */
        justify-content: flex-start;
        /* ✅ ด้านบนสุด */
        align-items: center;
        /* ✅ จัดกึ่งกลางแนวนอน */
        height: 100%;
        text-align: center;
        padding: 20px 15px 15px;
        position: relative;
        overflow: visible !important;
    }

    /* ✅ Image */
    main .section-4 .swiper-44 .glass-card .card-body img {
        position: absolute;
        top: 25px;
        /* ✅ ห่างจากขอบบน */
        left: 35%;
        /* ✅ ยกเลิก absolute */
        width: 110px !important;
        height: 110px !important;
        object-fit: contain !important;
        border-radius: 20% !important;
        background: rgba(255, 255, 255, 0.18);
        padding: 8px;
        margin-top: 25px;
        margin-bottom: 15px;
        /* ✅ เว้นช่องก่อนข้อความ */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.4s ease, background 0.3s ease;
    }

    main .section-4 .swiper-44 .glass-card:hover .card-body img {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.25);
    }

    /* ✅ Text */
    main .section-4 .swiper-44 .glass-card .card-body h5 {
        margin-top: 150px;
        /* ✅ ระยะห่างจากภาพ */
        margin-bottom: 10px;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.4em;
        color: #2e0242ff;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    main .section-4 .swiper-44 .glass-card .card-body p {
        font-size: 1.5rem;
        color: rgb(43, 56, 247);
        text-shadow: 0 1px 3px rgba(53, 52, 52, 0.4);
        margin-top: 0px;
        font-weight: 800;
        margin-bottom: 1px;
    }

    /* ✅ Footer */
    main .section-4 .swiper-44 .glass-card .card-footer {
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        background: transparent;
        border: none;
        text-align: center;
    }

    /* ✅ Button */
    main .section-4 .swiper-44 .glass-card .btn {
        border: none !important;
        border-radius: 25px;
        padding: 8px 20px;
        font-weight: 600;
        background: linear-gradient(135deg, #f9c600, #ffd84d);
        color: #000 !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    main .section-4 .swiper-44 .glass-card .btn img {
        width: 40px !important;
        height: auto;
    }

    main .section-4 .swiper-44 .glass-card .btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #ffdd4d, #fff066);
        box-shadow: 0 5px 20px rgba(255, 210, 0, 0.4);
    }

    /* ✅ Navigation Arrows */
    main .section-4 .swiper-44 .swiper-button-next,
    main .section-4 .swiper-44 .swiper-button-prev {
        width: 28px !important;
        height: 28px !important;
        color: #ffffff !important;
        opacity: 0.7;
        transition: all 0.3s ease;
        background: transparent !important;
        border: none !important;
    }

    main .section-4 .swiper-44 .swiper-button-next::after,
    main .section-4 .swiper-44 .swiper-button-prev::after {
        font-size: 20px !important;
        font-weight: bold;
    }

    main .section-4 .swiper-44 .swiper-button-next:hover,
    main .section-4 .swiper-44 .swiper-button-prev:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    /* ✅ Smooth transition */
    /* .swiper-wrapper {
        transition-timing-function: ease-in-out !important;
    } */
    /* Banner */
    /* Force fade to override slide transform */
    .swiper-hbanner {
        width: 100%;
        max-width: 1920px;
        height: auto;      /* หรือ 350–400 ตามดีไซน์ */
        
        margin: 0 auto;
        background: #fff;
    }

    .swiper-hbanner .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ✅ CSS สำหรับ effect: fade */
    .swiper-hbanner.swiper-fade .swiper-slide {
        opacity: 0;
        transition-property: opacity;
    }

    .swiper-hbanner.swiper-fade .swiper-slide.swiper-slide-active {
        opacity: 1;
    }


    /* ✅ Force all slides visible */
    /* .swiper-slide {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    } */

    /* ✅ ล้างสีเหลืองของ active card ทุกกรณี */
    main .section-4 .swiper-44 .swiper-slide-active,
    main .section-4 .swiper-44 .swiper-slide-active .glass-card,
    main .section-4 .swiper-44 .swiper-slide-active .card,
    main .section-4 .swiper-44 .swiper-slide-active .card-body {
        /* background: rgba(255, 255, 255, 0.12) !important; */
        background: none !important;
        color: inherit !important;
        display: block !important;
        /* border: 1px solid rgba(255, 255, 255, 0.25) !important; */
        /* backdrop-filter: blur(14px) !important; */
        /* -webkit-backdrop-filter: blur(14px) !important; */
        /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important; */
        /* color: #fff !important; */
    }

    /* ✅ ล้าง pseudo-element บางธีม (overlay เหลือง) */
    main .section-4 .swiper-44 .swiper-slide-active::before,
    main .section-4 .swiper-44 .swiper-slide-active::after {
        content: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* ✅ ป้องกัน Bootstrap หรือ Theme ใส่ .active สีเหลือง */
    main .section-4 .swiper-44 .swiper-slide-active.active,
    main .section-4 .swiper-44 .swiper-slide.active,
    main .section-4 .swiper-44 .card.active {
        background-color: transparent !important;
    }

    /* 🧹 ล้างทุก overlay หรือภาพซ้อนของ card แรก */
    .section-4 .swiper-44 .swiper-slide-active::before,
    .section-4 .swiper-44 .swiper-slide-active::after,
    .section-4 .swiper-44 .swiper-slide:first-child::before,
    .section-4 .swiper-44 .swiper-slide:first-child::after {
        content: none !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 🧹 ล้างทุกการใส่ background image อัตโนมัติ */
    .section-4 .swiper-44 .swiper-slide-active,
    .section-4 .swiper-44 .swiper-slide:first-child {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* 🧹 ล้างเงา fade overlay ของ Swiper ทุกกรณี */
    .section-4 .swiper-44 .swiper-slide-shadow-left,
    .section-4 .swiper-44 .swiper-slide-shadow-right,
    .section-4 .swiper-44 .swiper-slide-shadow-top,
    .section-4 .swiper-44 .swiper-slide-shadow-bottom {
        background: none !important;
        background-image: none !important;
        opacity: 0 !important;
        display: none !important;
        box-shadow: none !important;
    }

    /* 🧹 ล้าง pseudo element ที่ Swiper แอบใช้ทำเงา */
    .section-4 .swiper-44 .swiper-slide::before,
    .section-4 .swiper-44 .swiper-slide::after {
        content: none !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* 🚫 ปิดการเน้นสไลด์ active/pre/next ทั้งหมด */
    .section-4 .swiper-44 .swiper-slide-active,
    .section-4 .swiper-44 .swiper-slide-prev,
    .section-4 .swiper-44 .swiper-slide-next {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
        transform: none !important;
        z-index: auto !important;
        filter: none !important;
    }

    /* ✅ คืนค่า card เดิมให้ทุกสไลด์เหมือนกัน */
    .section-4 .swiper-44 .glass-card {
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        color: #fff !important;
        box-shadow: 0 8px 11px rgba(0, 0, 0, 0.2) !important;
        overflow: visible !important;
    }

    

    .section-7 .container {
        position: relative;
        top: -200px;
        /* ✅ เว้นห่างจากขอบบน 200px */
        z-index: 2;
        /* ✅ ให้อยู่เหนือพื้นหลัง */
    }

    /* ====== Style พิเศษสำหรับฟอร์มค้นหา ====== */
    .search-card {
        background: #fff;
        border-radius: 12px;
        /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
        padding: 25px 30px;
        margin: 20px 0;
        /* border-top: 5px solid #155095; */
    }

    .search-card h4 {
        font-weight: 700;
        color: #155095;
        margin-bottom: 20px;
    }

    .search-card label {
        font-weight: 500;
        color: #333;
    }

    .search-card input[type="text"],
    .search-card input[type="date"] {
        border-radius: 6px;
        border: 1px solid #ccc;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .search-card .btn-1 {
        background-color: #155095;
        color: #fff;
        border-radius: 0 6px 6px 0;
        transition: all 0.3s ease;
    }

    .search-card .btn-1:hover {
        background-color: #0c386b;
    }

    .search-card .badge {
        margin: 3px;
        font-size: 0.9rem;
    }

    .search-card .form-check {
        margin-right: 10px;
    }

    .search-card .section-divider {
        border-top: 2px solid #eee;
        margin: 20px 0;
    }

    /* ====== ปรับสไตล์กล่องกลุ่มเนื้อหา ====== */
    .filter-section {
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 20px 25px;
        margin-top: 25px;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    }

    .filter-toggle {
        background: #155095;
        color: #fff;
        border: none;
        width: 100%;
        text-align: left;
        font-weight: 600;
        padding: 10px 15px;
        border-radius: 8px;
        transition: 0.3s;
    }

    .filter-toggle:hover {
        background: #0e3f7a;
    }

    .filter-toggle i {
        float: right;
        transition: transform 0.3s ease;
    }

    .filter-toggle.collapsed i {
        transform: rotate(180deg);
    }

    .filter-body {
        margin-top: 15px;
        padding-left: 10px;
    }

    main .section-3 h2 {
        font-weight: 700;
        color: #0e3f7a;
        /* text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 4px 10px rgba(0, 0, 0, 0.7); */
    }

    main .section-5 h2 {
        font-weight: 700;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 4px 10px rgba(0, 0, 0, 0.4);
    }

    /* main .section-5 .container {
      position: relative;
      margin-top: -420 !important;
      z-index: 80 !important;
    } */
    main .section-3 .container-xxl {
        /* background: transparent !important; */
        background: #004aad;
        border-radius: 25px;
        background: radial-gradient(circle at top left, #e3f2fd 0%, transparent 60%);
        padding-bottom: 15px;
         /* ✅ เพิ่มเงาแบบนุ่ม */
        /* box-shadow: 0 20px 40px rgba(0,0,0,0.25); */
        box-shadow: 0 0 50px 15px rgba(0,74,173,0.3);
    }

    /* ✅ Restore checkbox appearance */
    .form-check-input[type="checkbox"] {
        appearance: checkbox !important;
        -webkit-appearance: checkbox !important;
        -moz-appearance: checkbox !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }

    .section-two .service {
        border: none;
        background-color: #fff;
        color: #002b5c;
        border-radius: 10px;
        transition: 0.3s;
    }

    .section-two .service:hover {
        transform: scale(1.05);
        background-color: linear-gradient(135deg, #f9c600, #ffd84d) !important;
        color: #002b5c !important;
    }

    .section-two .service.active {
        background-color: linear-gradient(135deg, #f9c600, #ffd84d) !important;
        border: solid #f2cd5b;
        border-radius: 10px;
        color: #002b5c !important;
        position: relative;
    }

    /* 🔹 พื้นฐาน desktop */
    main.home .section-two {
        background: #ffffff;
        color: #002b5c;
    }

    main.home .section-two .service {
        background: #004aad;
        color: #fff;
        border: none;
        padding: 10px 24px;
        border-radius: 25px;
        transition: 0.3s;
        font-weight: 500;
        margin: 0 5px;
        /* font-size: clamp(14px, 2vw, 20px); */
        font-size: 20px;
    }

    @media (min-width: 576px) {
        main.home .section-two .service {
            /* font-size: clamp(14px, 1.8vw, 18px); */
            font-size: 14px;
        }
    }

    @media (min-width: 768px) {
        main.home .section-two .service {
            /* font-size: clamp(16px, 1.5vw, 20px); */
            font-size: 16px;
        }
    }

    @media (min-width: 1000px) {
        main.home .section-two .service {
            /* font-size: clamp(18px, 1.5vw, 22px); */
            font-size: 18px;
        }
    }

    @media (min-width: 1200px) {
        main.home .section-two .service {
            /* font-size: clamp(20px, 1vw, 26px); */
            font-size: 20px;
        }
    }
    main.home .section-two .service:hover,
    main.home .section-two .service.active {
        background: #f1f508ff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    /* 🔹 กล่องข้อความ “บริการของ สสช.” */
    main.home .section-two .service-box {
        position: relative;
        background: linear-gradient(135deg, #004aad, #007bff);
        color: #fff;
        padding: 25px 30px;
        border-radius: 12px;
        font-size: 2rem;
        font-weight: bold;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        line-height: 1.3;
        text-align: center;
    }

    main.home .section-two .service-box::after {
        content: "";
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #007bff;
    }

    /* =======================================================
   🔸 MOBILE (≤991px)
   ใช้ปุ่มแท็บเดียวแสดงแบบมี prev / next ลูกศร
   ======================================================= */
    /* ✅ Section 5 wrapper */
    /* 🔥 ป้องกันเมนูถูกบัง */
    /* .section-5 {
        position: relative;
        overflow: visible;
        
        z-index: 2; 
    } */

    /* ✅ เฉพาะจอเล็ก */
    @media (max-width: 992px) {
        .menu-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-bottom: 1rem;
            z-index: 5;
        }

        .menu-arrow {
            background: linear-gradient(135deg, #004aad, #007bff);
            color: #fff;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;
            transition: 0.3s;
        }

        .menu-arrow.left-arrow {
            position: absolute;
            left: 10px;
        }

        .menu-arrow.right-arrow {
            position: absolute;
            right: 10px;
        }

        .set_text_service {
            width: 100%;
            padding: 0 60px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-scroll {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu-scroll .service {
            flex: 0 0 auto;
            min-width: 180px;
            background-color: #004aad;
            color: #fff;
            border: none;
            border-radius: 25px;
            padding: 12px 20px;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
            transition: all 0.3s ease;
            opacity: 0;
            transform: scale(0.9);
            display: none;
        }

        .menu-scroll .service.active {
            display: inline-block;
            opacity: 1;
            transform: scale(1.1);
            background-color: #f2cd5b;
            color: #000;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        }
    }




    /* ✅ ตั้งขนาดรูปภาพในสไลด์ให้เท่ากันทุกอัน */
    .section-two .swiper-container {
        width: 100%;
        max-width: 900px;
        /* 👈 ปรับได้ เช่น 600px, 700px */
        margin: 0 auto;
        /* จัดให้อยู่ตรงกลาง */
        overflow: hidden;
        position: relative;
    }

    .section-two .swiper-slide {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box;
        max-width: 100%;
    }

    .section-two .swiper-slide img {
        width: 100px;
        /* ปรับขนาดภาพให้เท่ากันทุกอัน */
        height: 150px;
        /* กำหนดความสูงคงที่ */
        object-fit: contain;
        /* ครอบภาพแบบไม่บิดเบือน (เห็นเต็มรูป) */
        border-radius: 8px;
        background-color: #fff;
        padding: 10px;
        display: block;
    }

    /* ✅ ข้อความใต้ภาพ */
    .section-two .swiper-slide p {
        margin-top: 10px;
        font-size: 30px;
        color: #004b8d;
        /* text-blue */
        text-align: center;
        word-wrap: break-word;
        /* ตัดคำยาว */
        white-space: normal;
        /* ให้ตัดบรรทัด */
        line-height: 1.3em;
        width: 90%;
        /* จำกัดความกว้างของข้อความ */
        overflow: hidden;
        /* text-overflow: ellipsis; */
        /* ถ้ายาวเกินก็จะตัดด้วย ... */
    }

    /* ✅ ป้องกันไม่ให้ swiper ทับฝั่งซ้าย */
    .section-two .row {
        overflow: hidden;
        /* กันล้นทุกอย่างในแถว */
    }

    /* ✅ จำกัดพื้นที่ของ swiper container ด้านขวา */
    .section-two .col-lg-8 .swiper-container {
        width: 100%;
        position: relative;
        z-index: 0;
        /* ทำให้ต่ำกว่าข้อความฝั่งซ้าย */
    }

    /* ✅ ปรับปุ่ม prev / next ไม่ให้ล้น */
    .section-two .swiper-button-prev,
    .section-two .swiper-button-next {
        width: 28px !important;
        height: 28px !important;
        color: #ffffff !important;
        opacity: 0.7;
        transition: all 0.3s ease;
        background: transparent !important;
        border: none !important;
    }

    /* ✅ เพิ่ม margin หรือ padding ให้ swiper ด้านขวาห่างจากข้อความฝั่งซ้าย */
    .section-two .col-lg-8 {
        padding-left: 30px;
        /* ปรับค่าตามที่เหมาะ */
    }

    /* ✅ ปรับให้ภาพอยู่ภายในขอบ */
    .section-two .swiper-slide img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        display: block;
        /* margin: 0 auto; */
        margin-top: 5px;
    }

    /* .section-5 .container {
        position: relative;
        top: -350px !important;
    } */

    /* 🎨 พื้นหลัง section-two */
    .section-two {
        /* background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); */
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        padding: 40px 20px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 50px 15px rgba(0,74,173,0.3);
    }

    /* 🩵 เพิ่ม layer gradient faint */
    .section-two::before {
        content: "";
        position: absolute;
        top: -50px;
        left: -50px;
        right: -50px;
        bottom: -50px;
        background: radial-gradient(circle at top left, #e3f2fd 0%, transparent 60%);
        z-index: 0;
    }

    .section-two>* {
        position: relative;
        z-index: 1;
    }

    /* 💠 กล่อง Swiper */
    .section-two .swiper-container {
        background-color: #ffffff;
        border-radius: 16px;
        padding: 20px 10px;
        max-width: 900px;
        margin: 0 auto;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* 🖼️ กรอบ slide แต่ละอัน */
    .section-two .swiper-slide {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s, box-shadow 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* padding: 15px; */
    }

    .section-two .swiper-slide:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* 🖼️ รูปใน Swiper */
    .section-two .swiper-slide img {
        width: 120px;
        height: 120px;
        object-fit: contain;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* 📝 ข้อความใต้รูป */
    .section-two .swiper-slide p {
        color: #0d47a1;
        font-size: 19px;
        text-align: center;
        margin: 0;
        line-height: 1.4em;
        word-break: break-word;
        white-space: normal;
        max-width: 90%;
    }

    /* 🔘 ปุ่มลูกศร Swiper */
    .section-two .swiper-button-prev,
    .section-two .swiper-button-next {
        color: #0d47a1;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .section-two .swiper-button-prev:hover,
    .section-two .swiper-button-next:hover {
        background: #0d47a1;
        color: #fff;
    }

    /* 📱 Responsive */
    @media (max-width: 768px) {
        .section-two {
            padding: 30px 10px;
        }

        .section-two .swiper-container {
            padding: 10px;
            max-width: 100%;
        }

        .section-two .swiper-slide img {
            width: 100px;
            height: 100px;
        }
    }

    /* 🔹 ปุ่มลูกศร */
    @media (max-width: 1205px) {
        .menu-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .menu-arrow {
            background: linear-gradient(135deg, #004aad, #007bff);
            color: #fff;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 5;
            transition: 0.3s;
        }

        .menu-arrow.left-arrow {
            position: absolute;
            left: 5px;
        }

        .menu-arrow.right-arrow {
            position: absolute;
            right: 5px;
        }

        .set_text_service {
            width: 100%;
            padding: 0 45px;
        }

        .menu-scroll {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.5rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .menu-scroll::-webkit-scrollbar {
            display: none;
        }

        .menu-scroll .service {
            flex: 0 0 auto;
            background-color: #004aad;
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .menu-scroll .service.active {
            background-color: #f2cd5b;
            color: #000;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        }
    }

    /* 🔹 กำหนดความสูงเท่ากันให้ Swiper ใน section-5 */
    .section-5 .swiper-container {
        height: 320px;
        /* ปรับได้ เช่น 300–400px */
        display: flex;
        align-items: center;
    }

    /* 🔹 ให้สไลด์ในแต่ละ Swiper อยู่กึ่งกลางแนวดิ่ง */
    .section-5 .swiper-slide {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        text-align: center;
    }

    /* 🔹 รูปภาพใน Swiper */
    .section-5 .swiper-slide img {
        max-height: 220px;
        width: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        
    }

    /* 🔹 ข้อความใต้ภาพ */
    .section-5 .swiper-slide p {
        margin-top: 10px;
        line-height: 1.3em;
    }

    /* ให้แถวเป็น flex สูงเท่ากัน */
    .service__show {
        display: flex;
        flex-wrap: wrap;
        /* รองรับจอเล็ก */
        align-items: stretch;
        /* 🔹 ให้ col ซ้าย-ขวาสูงเท่ากัน */
    }

    /* ให้กล่องซ้าย (หัวข้อ) เต็มสูงเท่ากับ swiper */
    .service__show .col-lg-4 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    /* กล่องหัวข้อด้านใน */
    .service__show .col-lg-4>div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section-6 .list button {
        width: 100%;
        border: 2px solid #00387f;
        /* เส้นขอบน้ำเงิน */
        color: #00387f;
        /* สีตัวอักษรน้ำเงิน */
        background: transparent;
        /* ไม่มีพื้นหลัง */
        border-radius: 50px;
        /* ขอบมน */
        padding: 10px 20px;
        font-weight: 600;
        text-align: left;
        transition: all 0.3s ease;
        box-shadow: none;
        /* ไม่ให้มีเงาเริ่มต้น */
    }

    /* hover — แค่เปลี่ยนเงา ไม่เปลี่ยนพื้นหลัง */
    .section-6 .list button:hover {
        background: transparent !important;
        color: #000;
        box-shadow: 0 0 10px rgba(0, 56, 127, 0.2);
    }

    /* active — ไม่มีพื้นหลัง แต่ขอบเข้มขึ้น */
    .section-6 .list button.active {
        /* background: transparent !important;
        border-color: #f2cd5b; */
        /* เปลี่ยนสีขอบให้เห็นชัดว่า active */
        /* color: #000; */
        /* box-shadow: 0 0 12px rgba(242, 205, 91, 0.4); */
        /* background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
        color: #f2cd5b;
        border-color: #f2cd5b;
        box-shadow: 0 0 12px rgba(242, 205, 91, 0.5); */
        background: #fff7da;
        color: #000;
        border-color: #f2cd5b;
        box-shadow: 0 0 8px rgba(242, 205, 91, 0.3);
    }

    .bdload-1,
    .bdload-2,
    .bdload-3,
    .bdload-4 {
        position: relative;
        padding-bottom: 120px;
        /* กันไม่ให้ปุ่มชนตาราง */
    }

    /* ✅ ปุ่มดูทั้งหมดให้อยู่ชิดล่าง */
    .bdload-1 .showall-wrapper,
    .bdload-2 .showall-wrapper,
    .bdload-3 .showall-wrapper,
    .bdload-4 .showall-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
        text-align: center;
        padding-top: 80px;
        padding-bottom: 30px;
    }

    /* เอฟเฟกต์ hover เดิม */
    .bdload-1 .showall-wrapper a.seemore,
    .bdload-2 .showall-wrapper a.seemore,
    .bdload-3 .showall-wrapper a.seemore,
    .bdload-4 .showall-wrapper a.seemore {
        text-decoration: none;
        display: inline-block;
        transition: transform 0.25s ease, opacity 0.25s ease;
        transform-origin: center bottom;
        /* ✅ จุดขยายอยู่ด้านล่าง */
        position: relative;
        z-index: 5;
        /* กันไม่ให้เงาถูกตัดถ้ามี overflow */
        /* ✅ เพิ่มขอบ */
        border: 2px solid #00387f;
        /* สีขอบ */
        border-radius: 30px;
        /* ขอบโค้งมน */
        padding: 10px 25px;
        /* ระยะห่างภายใน */
        background-color: #fff;
        /* พื้นหลังขาว */
        color: #00387f;
        /* สีตัวอักษรเข้ากับขอบ */
    }

    .bdload-1 .showall-wrapper a.seemore:hover,
    .bdload-2 .showall-wrapper a.seemore:hover,
    .bdload-3 .showall-wrapper a.seemore:hover,
    .bdload-4 .showall-wrapper a.seemore:hover {
        transform: scale(1.05) translateY(-2px);
        /* ✅ ขยายขึ้นบนเล็กน้อย */
        opacity: 0.9;
        background-color: #00387f;
        /* เปลี่ยนพื้นหลังเมื่อ hover */
        color: #fff;
        /* ตัวอักษรเป็นขาว */
        border-color: #00387f;
        /* สีขอบเข้มขึ้น */
    }

    /* section-seven */
    /* 🌈 พื้นหลัง section */
    .section-seven {
        position: relative;
        /* background: linear-gradient(135deg, #00458a 0%, #012b5a 100%); */
        overflow: hidden;
        padding-bottom: 80px;
    }

    .section-seven .before {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.2;
        z-index: 1;
    }

    /* 🎯 ส่วนหัวข้อ */
    .section-6 h2 {
        font-weight: 700;
        color: #00387f;
        text-shadow:
            0 2px 4px rgba(255, 255, 255, 0.5),
            0 4px 10px rgba(255, 255, 255, 0.4);
        position: relative;
        z-index: 3;
    }

    .section-seven h2 {
        font-weight: 700;
        color: #00387f;
        /* text-shadow:
            0 3px 8px rgba(0, 0, 0, 0.85),
            0 6px 20px rgba(0, 0, 0, 0.8),
            0 0 25px rgba(0, 0, 0, 0.7); */
    }

    /* 📅 รายการกิจกรรม */
    .section-seven ul {
        position: relative;
        z-index: 3;
        list-style: none;
    }

    .section-seven li {
        background: rgba(255, 255, 255, 0.65);
        border-radius: 12px;
        padding: 10px 15px;
        transition: all 0.3s ease;
        backdrop-filter: blur(3px);
        color: #002b5c;
        /* ✅ เพิ่มเงา */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .section-seven li:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-3px);
    }

    /* 🔹 วันที่ */
    .section-seven .day {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        /* 🔹 ขนาดคงที่ */
        width: 70px;
        height: 70px;

        background: #fff;
        border-radius: 12px;
        color: #00387f;
        text-align: center;
        line-height: 1.1;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

    /* 🔹 ตัวเลขวัน */
    .section-seven .day span:first-child {
        font-size: 1.5rem;
        font-weight: 700;
        display: block;
        line-height: 1.2;
    }

    /* 🔹 ชื่อเดือน */
    .section-seven .day span:last-child {
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    /* 📖 รายละเอียดกิจกรรม */
    .section-seven .detail {
        display: flex !important;
        justify-content: space-between;
        /* ✅ ดันลูกศรชิดขวา */
        align-items: right;
        gap: 2px;
        /* ระยะระหว่างข้อความกับไอคอน */
        text-decoration: none;
        color: #00387f;
        flex: 1;
    }

    .section-seven .detail:hover {
        color: #004aad;
        /* น้ำเงินฟ้าสดขึ้น */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .section-seven .detail img {
        width: 18px;
        opacity: 0.85;
        transition: transform 0.25s ease;
        margin-left: 0;
    }

    .section-seven .detail:hover img.img-2 {
        transform: translateX(4px);
    }

    /* 🔘 ปุ่ม Show all */
    .section-seven .seemore {
        display: inline-block;
        background: #fff;
        color: #00458a;
        border-radius: 30px;
        padding: 8px 24px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .section-seven .seemore:hover {
        background: #ffda6b;
        color: #000;
    }

    /* 🎞️ Swiper Box */
    .section-seven .swiper-container {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 3;
        /* width: 500px; */
    }

    .section-seven .swiper-slide {
        background-size: cover;
        background-position: center center;
        /* height: 380px; */
        position: relative;
        overflow: hidden;
    }

    .section-seven .slide-captions {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
        color: #fff;
    }

    .section-seven .col-lg-5 {
        display: flex;
        justify-content: center;
        /* จัดกลางแนวนอน */
        align-items: center;
        /* จัดกลางแนวตั้ง */
    }

    .section-seven .right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .section-seven .swiper-container {
  width: 100%;   /* ขนาดของ swiper — ปรับตามต้องการ */
    height: 100%;
    /* ปรับให้พอดี */
    max-width: 600px;
    /* กันไม่ให้ใหญ่เกิน */
    max-height: 600px;
    border-radius: 12px;
    overflow: hidden;
    }

    */

    /* จุด pagination */
    .swiper-pagination-bullet {
        background: #fff !important;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background: #ffda6b !important;
        opacity: 1;
    }

    /* กล่องสไลด์ */
    /* ✅ ตั้งค่าขนาด Swiper ให้เหมาะสม */
    .swiper-seven {
        width: 100%;

        /* ป้องกันใหญ่เกินคอลัมน์ */
        height: 400px;
        /* หรือกำหนดเอง */
        border-radius: 12px;
        overflow: hidden;
        background: #00387f;
    }

    /* ✅ ภาพในสไลด์ไม่ถูกครอบ */
    .swiper-seven .swiper-slide {
        background-size: cover !important;
        /* ให้แสดงเต็มภาพโดยไม่ครอบ */
        background-repeat: no-repeat;
        background-position: center center;
        /* display: block; */
    }

    /* แคปชันทับด้านล่าง */
    .swiper-seven .slide-captions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 16px 18px;
        background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
        color: #fff;
        font-size: .95rem;
        z-index: 10;
    }

    /* จุด pagination */
    .swiper-seven .swiper-pagination {
        position: absolute;
        bottom: 10px;
        text-align: center;
        z-index: 11;
    }

    .swiper-seven .swiper-pagination-bullet {
        background: #fff;
        opacity: .7;
    }

    .swiper-seven .swiper-pagination-bullet-active {
        background: #ffda6b;
        opacity: 1;
    }

    .swiper-seven {
        overflow: hidden !important;
        /* ✅ ป้องกัน AOS ครอบภาพ */
    }

    /* Banner Link ล่างสุด */
    .link-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 140px;
        background-size: cover;
        background-position: center;
        border-radius: 16px;
        position: relative;
        overflow: hidden;
        text-decoration: none;
        color: #fff;
        /* ✨ เส้นกรอบขาวบางๆ */
        border: 1.5px solid rgba(255, 255, 255, 0.7);
        filter: brightness(1.15) contrast(1.1) saturate(1.05);
        /* ✅ เพิ่มความสว่างและสีสด */
        box-shadow: 0 10px 15px rgba(255, 255, 255, 0.35);
        /* ✅ เงาเบาๆ ให้ดูมีมิติ */
        transition: all 0.35s ease;
    }

    /* เพิ่มแสงโปร่งใสให้กล่องดูสว่าง */
    .link-1::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
        z-index: 1;
        transition: all 0.35s ease;
    }

    /* ข้อความ */
    .link-1 h3 {
        position: relative;
        z-index: 2;
        font-size: 1.6rem;
        text-align: center;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        /* text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); */
        /* ✅ ทำให้ข้อความเด่นแต่ไม่กลืนกับภาพ */
    }

    .link-1 .see {
        position: relative;
        z-index: 2;
        margin-top: 10px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        color: #ffda6b;
        font-weight: 500;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    /* ✨ เอฟเฟกต์ Hover */
    .link-1:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow:
            0 12px 24px rgba(21, 2, 129, 0.3),
            0 0 15px rgba(255, 218, 107, 0.35);
        /* แสงเหลืองอ่อนเรืองรอบ */
        filter: brightness(1.25) contrast(1.15);
    }

    /* เพิ่มความเหลืองเรืองบนภาพ */
    .link-1:hover::before {
        background: linear-gradient(180deg, rgba(255, 218, 107, 0.25) 0%, rgba(255, 218, 107, 0.4) 100%);
    }

    /* สีตัวอักษรตอน hover */
    .link-1:hover h3,
    .link-1:hover .see {
        color: #0e0561;
    }

    .btn-outline-nso {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        /* ระยะห่างระหว่าง icon กับข้อความ */
        padding: 10px 25px;
        border: 2px solid #00387f;
        /* ✅ ขอบสีน้ำเงิน */
        border-radius: 30px;
        /* ✅ มุมโค้งมน */
        background-color: #fff;
        /* ✅ พื้นหลังขาว */
        color: #00387f;
        /* ✅ ตัวอักษรสีน้ำเงิน */
        font-weight: bold;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .btn-outline-nso:hover {
        background-color: #00387f;
        /* ✅ สลับสีตอน hover */
        color: #fff;
        transform: scale(1.05) translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 56, 127, 0.3);
        /* ✅ เงานุ่ม */
    }

    /* ✅ บังคับให้เมนูเล็กยังแสดงถึง 1401px */
    @media (max-width: 991.98px) {
        .menu-wrapper.d-lg-none {
            display: flex !important;
            /* หรือ block ก็ได้ แล้วแต่ layout */
        }

        .text-center.d-lg-flex {
            display: none !important;
        }
    }

    .btn-custom {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-weight: 600;
        border-radius: 30px;
        padding: 10px 0;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    /* 🔵 ปุ่มค้นหา */
    .btn-search {
        background-color: #004aad;
        color: #fff;
        /* border: none; */
        border: 2px solid #0056d2;
    }
    .btn-search:hover {
        background-color: #003580;
        box-shadow: 0 0 15px rgba(0, 74, 173, 0.4);
    }

    /* ⚪ ปุ่มคืนค่าเริ่มต้น */
    .btn-reset {
        background-color: #ffffff;
        color: #004aad;
        border: 2px solid #004aad;
    }
    .btn-reset:hover {
        background-color: #e3f2fd;
        box-shadow: 0 0 15px rgba(0, 74, 173, 0.2);
    }