* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            position: relative;
        }
        
        /* Header - ลดความสูง */
        .header {
            background: #F7C873;
            padding: 8px 0px; /* ลดจาก 10px เป็น 8px */
            text-align: center;
            position: fixed;
            width: 100vw;
            max-width: 100%;
            top: 0;
            left: 0;
            z-index: 1500;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            height: 90px; /* กำหนดความสูงให้แน่นอน */
        }

        .header h1 {
            font-size: 4rem;
            color: #2A363B;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            letter-spacing: 2px;
            font-family: 'Srisakdi', serif;
            z-index: 1600;
            position: absolute;
            white-space: nowrap;
            margin: 0;
        }

        .contact-footer {
            background: #F7C873;
            padding: 20px 0; /* ลดจาก 25px เป็น 20px */
            text-align: center;
            font-size: 18px; /* ลดจาก 20px เป็น 18px */
            color: #1e1d2b;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            letter-spacing: 2px;
            position: static; /* เปลี่ยนจาก fixed เป็น static */
            width: 100vw;
            margin-left: -20px; /* ชดเชย padding ของ body */
            margin-right: -20px;
            margin-bottom: -20px;
            box-sizing: border-box;
            z-index: 1000;
            margin-top: auto; /* ให้ footer อยู่ล่างสุด */
        }

        .header-section {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.836), rgba(255, 255, 255, 0.363)),
                url("img/DSC_4141.jpg");
            background-size: cover;
            background-position: center;
            padding: 40px 20px;
            text-align: center;
            position: relative;
            margin-top: 90px;
        }

        .temple-info {
            color: #2c3e50;
            font-size: 16px;
            margin-bottom: 20px;
            font-weight: 400;
        }

        .logo-container {
            text-align: center;
            margin: 30px 0;
        }

        .logo-container img {
            width: 300px;
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
}

        .logo {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main-title {
            color: #1b1f35;
            font-size: 50px;
            font-weight: 700;
            margin-top: 20px;
            font-family: 'Charmonman', cursive;
            text-shadow: 2px 2px 6px rgb(255, 255, 255);
        }

        /* Content Section */
        .content-section {
            background: white;
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .content-text {
            color: #555;
            font-size: 25px;
            line-height: 1.8;
            text-align: justify;
            max-width: 900px;
            margin: 0 auto;
            letter-spacing: 2px;
            word-spacing: 1px;
        }

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

        /* Green Section with Background */
        .green-section {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.699), rgba(255, 255, 255, 0.212)), 
                url("img/DSC_4094.jpg");
            background-size: cover;
            background-position: center;
            padding: 250px 20px;
            text-align: left;
            position: relative;
        }

        .green-info {
            font-size: 16px;
            margin-bottom: 30px;
            font-weight: 500;
        }

        .green-title {
            font-size: 50px;
            font-weight: 700;
            text-align: center;
            color: #1b1f35;
            font-family: 'Charmonman', cursive;
            text-shadow: 2px 2px 6px rgb(255, 255, 255);
        }

        /* Bottom Content Section */
        .bottom-content {
            background: white;
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .bottom-text {
            color: #555;
            font-size: 25px;
            line-height: 1.8;
            text-align: justify;
            max-width: 900px;
            margin: 0 auto;
            letter-spacing: 1px;
            word-spacing: 1px;
        }

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

        .back-home-container {
            text-align: center;
            position: absolute;
            right: 30px;
            bottom: 100px;
            z-index: 10;
        }

        .back-home-btn {
            background: linear-gradient(45deg, #CF4647, #ee5a52);
            color: white;
            border: none;
            padding: 20px 40px;
            border-radius: 50px;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(116, 0, 0, 0.6);
            position: relative;
            overflow: hidden;
        }

        .back-home-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(116, 0, 0, 0.6);
            background: linear-gradient(45deg, #CF4647, #ff6b6b);
        }

        .back-home-btn:active {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(116, 0, 0, 0.6);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header-section {
                padding: 30px 15px;
            }

            .main-title {
                font-size: 26px;
            }

            .green-title {
                font-size: 26px;
            }

            .content-title, .bottom-title {
                font-size: 24px;
            }

            .content-text, .bottom-text {
                font-size: 16px;
            }

            .logo {
                width: 100px;
                height: 100px;
                font-size: 20px;
            }
        }
        