:root {
            --primary-green: #006837;
            --light-green-bg: #f3f9f4;
            --text-color: #333;
            --heading-color: #00562c;
            --teal-color: #00a99d;
        }

        body {
            font-family: 'CHULALONGKORN', 'Sarabun', sans-serif;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            line-height: 1.7;
            font-size: 16px;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 0px 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'CHULALONGKORN', 'Sarabun', sans-serif;
        }

        h1,
        h2,
        h3 {
            color: var(--heading-color);
            text-align: center;
            font-weight: 700;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 40px;
        }

        h3 {
            font-size: 1.8rem;
        }

        /* --- Header --- */
        .main-header {
            background-color: #fff;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main-header .logo {
            height: 50px;
        }

        .main-header nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 25px;
        }

        .main-header nav a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 700;
            transition: color 0.3s;
        }

        .main-header nav a:hover {
            color: var(--primary-green);
        }


        /* --- Full Width Image Banner --- */
        .image-banner {
            padding: 100px 0;
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            position: relative;
        }

        .image-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .image-banner .container {
            position: relative;
            z-index: 2;
        }

        .image-banner h2 {
            color: white;
            font-size: 3.5rem;
        }

        /* --- Two Column Layout --- */
        .two-columns {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .two-columns .col {
            flex: 1;
        }

        .two-columns img {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* --- Process Timeline --- */
        #process {
            background-color: white;
        }

        .timeline {
            position: relative;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 3px;
            background-color: var(--primary-green);
            opacity: 0.3;
            top: 0;
            bottom: 0;
            left: 30px;
            margin-left: -1.5px;
        }

        .timeline-item {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 100%;
            margin-left: 20px;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: auto;
            left: -12.5px;
            background-color: white;
            border: 4px solid var(--primary-green);
            top: 25px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-content {
            padding: 20px 30px;
            background-color: #fff;
            position: relative;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        .timeline-content h3 {
            text-align: left;
            margin-top: 0;
        }

        .timeline-content p,
        .timeline-content ul {
            text-align: left;
        }

        .step-title {
            color: var(--primary-green);
            font-weight: 700;
            font-size: 1.2rem;
        }

        .process-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .process-table th,
        .process-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .process-table th {
            background-color: var(--light-green-bg);
        }

        /* --- Section-specific Backgrounds --- */
        .bg-light-green {
            background-color: var(--light-green-bg);
        }

        /* --- Photo Gallery --- */
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 40px;
        }

        .photo-gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* --- Awards Section --- */
        .awards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-top: 40px;
        }

        .award-card {
            background-color: var(--light-green-bg);
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .award-card img {
            max-height: 150px;
            margin-bottom: 15px;
        }

        /* --- Partners Section --- */
        .partners-logos {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin: 40px 0;
        }

        .partners-logos img {
            max-height: 70px;
            filter: grayscale(1);
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .partners-logos img:hover {
            filter: grayscale(0);
            opacity: 1;
        }

        /* --- Footer --- */
        .main-footer {
            background-color: #222;
            color: #ccc;
            padding: 40px 0;
        }

        .main-footer .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 30px;
        }

        .footer-col {
            flex: 1;
            min-width: 250px;
        }

        .footer-col.contact-info img {
            height: 60px;
            margin-bottom: 15px;
        }

        .footer-col h4 {
            color: white;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--primary-green);
            padding-bottom: 10px;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-col li {
            margin-bottom: 10px;
        }

        .footer-col a {
            color: #ccc;
            text-decoration: none;
        }

        .footer-col a:hover {
            color: white;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .social-icons a {
            font-size: 1.5rem;
        }

        .banner {
            width: 100%;
        }


        .desktop-nav .nav-link {
            position: relative;
            /* เพื่อให้ ::after ยึดตำแหน่งกับลิงก์นี้ */
            padding-bottom: 8px;
            /* เพิ่มช่องว่างเล็กน้อยใต้ข้อความ */
            text-decoration: none;
            /* เอาขีดเส้นใต้ปกติออก */
        }

        /* สร้างเส้นขีดล่างด้วย pseudo-element */
        .desktop-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            /* ความหนาของเส้น */
            background-color: #006837;
            /* สีเขียว */

            /* ซ่อนเส้นไว้ก่อนในสถานะปกติ */
            transform: scaleX(0);
            transform-origin: center;
            /* ทำให้เส้นขยายออกจากตรงกลาง */
            transition: transform 0.3s ease-out;
        }

        /* เมื่อ hover หรือมี class 'active' ให้แสดงเส้น */
        .desktop-nav .nav-link:hover::after,
        .desktop-nav .nav-link.active::after {
            transform: scaleX(1);
            /* ขยายเส้นให้เต็มความกว้าง */
        }

        /* ทำให้สีตัวอักษรของลิงก์ที่ active เป็นสีเขียวเข้ม */
        .desktop-nav .nav-link.active {
            color: #006837;
            /* สีเขียวเดียวกับเส้น */
            font-weight: bold;
        }

        .my-gallery-slider .swiper-wrapper {
            transition-timing-function: linear !important;
        }


        .img-slide {
            height: 200px;
        }

        .sec-img {
            width: 50%;
        }

        .sec-img40 {
            width: 40%;
        }

        .sec-img70 {
            width: 70%;
        }

        .mt--70 {
            margin-top: -70px;
        }

        .mt--100 {
            margin-top: -100px;
        }

        .ml-auto {
            margin-left: auto;
        }

        .mlr-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .bt-50px {
            bottom: -50px !important;
        }

        .green-br-silde {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: #026937 !important;
        }

        .swiper-pagination-bullet-active {
            background: #026937 !important;

        }

        .bg-color2 {
            background: linear-gradient(0deg, rgba(2, 105, 55, 1) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .text-shadow-dhc {
            text-shadow: 0px 0px 2px #000000a8;
        }

        .tab-btn.active {
            background-color: #2a5543;
            color: white;
            border-color: transparent;
        }

        /* สไตล์สำหรับปุ่มที่ไม่ถูกเลือก */
        .tab-btn {
            background-color: white;
            color: #374151;
            /* text-gray-700 */
            border: 1px solid #e5e7eb;
            /* border-gray-200 */
        }

        .center-fx {
            align-items: center;
            display: flex;
        }

        .pad-tp-120 {
            padding-top: 120px;
            padding-bottom: 120px;
        
        }
        .pad-tp-240 {
            padding-top: 240px;
            padding-bottom: 240px;
        
        }
        .pad-tp-360 {
            padding-top: 360px;
            padding-bottom: 360px;
        
        }


         .marquee-track-container {
        overflow: hidden;
        width: 100%;
    }
    .marquee-track {
        display: flex;
        gap: 1.5rem; /* = space-x-6 */
        animation: marquee-scroll 40s linear infinite;
        width: max-content;
    }
    .marquee-track.marquee-reverse {
        animation-direction: reverse;
    }
    /* บรรทัดที่ทำให้หยุดเมื่อ hover ถูกลบออกจากตรงนี้แล้ว */
    .marquee-item {
        flex-shrink: 0;
        height: 10rem; /* = h-40 */
    }
    .marquee-item img {
        height: 100%;
        border-radius: 0.5rem; /* = rounded-lg */
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* = shadow-md */
        cursor: pointer; /* เพิ่ม cursor ให้รู้ว่าคลิกได้ */
    }
    @keyframes marquee-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
        @media only screen and (max-width: 600px) {
            .hg-line {
                height: 83%;
                left: 30px;
                top: 25px;

            }
              .sec-img-slide{
                width: 100%;
                height: 300px;
            
            }
        }

        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (min-width: 600px) {
            .hg-line {
                height: 83%;
                left: 30px;
                top: 25px;
            }
              .sec-img-slide{
                width: 100%;
                height: 300px;
            
            }
        }

        /* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (min-width: 768px) {
            .hg-line {
                height: 83%;
                left: 13px;
            }
              .sec-img-slide{
                width: 100%;
                height: 300px;
            
            }
        }

        /* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (min-width: 992px) {
            .hg-line {
                height: 79%;
                top: 100px;
                left: 13px;
            }
              .sec-img-slide{
                width: 100%;
                height: 600px;
            
            }
        }

        /* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 1200px) {
            .hg-line {
                height: 79%;
                top: 100px;
                left: 13px;
            }

            .sec-img-slide{
                width: 100%;
                height: 600px;
            
            }
        }