/* General Body Styling */
		/* ตั้งค่าฟอนต์, ขอบเขต และรูปพื้นหลังของ body */
        body {
            font-family: 'Prompt', sans-serif; /* ตั้งค่าฟอนต์ของหน้าเว็บ */
            margin: 0; /* ลบขอบเขตด้านนอกของ body */
            padding: 0; /* ลบช่องว่างด้านในของ body */
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            flex-direction: column; /* ตั้งค่าการจัดเรียงเนื้อหาให้เป็นแนวตั้ง */
            min-height: 100vh; /* กำหนดความสูงขั้นต่ำให้เท่ากับความสูงของ viewport */
            color: #333; /* ตั้งค่าสีของข้อความ */
            background-image: url('../img/พื้นหลัง login3.png'); /* ตั้งค่ารูปภาพพื้นหลัง */
            background-size: cover; /* ให้รูปภาพพื้นหลังครอบคลุมทั้ง body */
            background-position: center; /* จัดตำแหน่งรูปภาพพื้นหลังให้อยู่ตรงกลาง */
            background-repeat: no-repeat; /* ไม่ให้รูปภาพพื้นหลังทำซ้ำ */
            background-attachment: fixed; /* ให้รูปภาพพื้นหลังยึดติดกับหน้าจอไม่เลื่อนตาม */
        }
        
        /* สไตล์สำหรับ header */
        header {
            background: rgb(1,176,169);
            background: linear-gradient(90deg, rgba(1,176,169,1) 0%, rgba(95,206,210,1) 46.55%, rgba(42,203,198,1) 100%);
            color: #fff; /* สีของข้อความใน header */
            padding: 20px; /* การเว้นช่องว่างภายใน header */
            width: 100%; /* ให้ header ครอบคลุมความกว้างทั้งหมดของ viewport */
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            justify-content: space-between; /* จัดเรียงเนื้อหาให้ห่างกัน */
            align-items: center; /* จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางแนวตั้ง */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
        }
        
        /* สไตล์สำหรับ container ที่ครอบฟอร์ม */
        .container {
            flex: 1; /* ให้ container ขยายเต็มที่ของพื้นที่ที่เหลือ */
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            justify-content: center; /* จัดเนื้อหาให้อยู่กลางแนวนอน */
            align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
            padding: 20px; /* การเว้นช่องว่างภายใน container */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
        }
        
        /* สไตล์สำหรับฟอร์ม */
        .upload-form {
            background: rgb(41,214,152);
        background: linear-gradient(90deg, rgba(41,214,152,1) 0%, rgba(23,228,172,1) 100%);
            border-radius: 10px; /* มุมของฟอร์มเป็นวงกลม */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* เงาที่ฟอร์ม */
            padding: 5px; /* การเว้นช่องว่างภายในฟอร์ม */
            width: 100%; /* ความกว้างของฟอร์มเต็มที่ */
            max-width: 550px; /* ความกว้างสูงสุดของฟอร์ม */
            margin-top: 5%;
        }
        
        /* สไตล์สำหรับหัวข้อในฟอร์ม */
        .upload-form h2 {
            margin-top: 0; /* ลบช่องว่างด้านบนของหัวข้อ */
            margin-bottom: 30px; /* ช่องว่างด้านล่างของหัวข้อ */
            font-size: 22px; /* ขนาดฟอนต์ของหัวข้อ */
            text-align: center; /* จัดตำแหน่งหัวข้อให้อยู่กลาง */
        }
        
        /* สไตล์สำหรับป้าย (labels) ของฟอร์ม */
        .upload-form label {
            display: block; /* ทำให้ป้ายแสดงเป็นบล็อก */
            margin-bottom: 10px; /* ช่องว่างด้านล่างของป้าย */
            font-size: 15px; /* ขนาดฟอนต์ของป้าย */
        }
        
        /* สไตล์สำหรับ input และปุ่มในฟอร์ม */
        .upload-form input[type="email"],
        .upload-form input[type="password"],
        .upload-form button {
            width: 100%; /* ความกว้างเต็มที่ */
            padding: 12px; /* การเว้นช่องว่างภายใน */
            margin-bottom: 15px; /* ช่องว่างด้านล่าง */
            border: 1px solid #ccc; /* ขอบของ input และปุ่ม */
            border-radius: 5px; /* มุมของ input และปุ่มเป็นวงกลม */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            font-size: 15px; /* ขนาดฟอนต์ของ input และปุ่ม */
        }
        
        /* สไตล์สำหรับปุ่มในฟอร์ม */
        .upload-form button {
            background-color: #1a1a1a; /* สีพื้นหลังของปุ่ม */
            color: #fff; /* สีข้อความของปุ่ม */
            border: none; /* ลบขอบของปุ่ม */
            cursor: pointer; /* เปลี่ยนรูปแบบเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
            font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
            transition: background-color 0.3s; /* เอฟเฟกต์การเปลี่ยนสีพื้นหลังเมื่อเลื่อนเมาส์ */
        }
        
        /* สไตล์สำหรับปุ่มเมื่อเลื่อนเมาส์ */
        .upload-form button:hover {
            background-color: #333; /* สีพื้นหลังใหม่เมื่อเลื่อนเมาส์ */
        }
        
        /* สไตล์สำหรับลิงก์ในฟอร์ม */
        .horizontal-links {
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงลิงก์ */
            justify-content: space-between; /* จัดลิงก์ให้ห่างกัน */
            margin-top: 5px; /* ช่องว่างด้านบน */
            margin-left: 22rem;
        
        }
        
        /* สไตล์สำหรับลิงก์ในฟอร์ม */
        .horizontal-links a {
            text-decoration: none; /* ลบขีดเส้นใต้ของลิงก์ */
            color: #007bff; /* สีของลิงก์ */
            font-size: 14px; /* ขนาดฟอนต์ของลิงก์ */
            transition: color 0.3s ease; /* การเปลี่ยนแปลงสีลิงก์ */
        }
        
        /* สไตล์สำหรับลิงก์เมื่อเลื่อนเมาส์ */
        .horizontal-links a:hover {
            color: #0056b3; /* สีใหม่เมื่อเลื่อนเมาส์ */
        }
        
        /* สไตล์สำหรับข้อความแสดงข้อผิดพลาด */
        .error {
            color: red; /* สีของข้อความข้อผิดพลาด */
            font-size: 14px; /* ขนาดฟอนต์ของข้อความข้อผิดพลาด */
            margin-top: 10px; /* ช่องว่างด้านบน */
            text-align: center; /* จัดตำแหน่งข้อความให้อยู่กลาง */
        }
        
        /* สไตล์สำหรับ tab และเนื้อหาภายใน header */
        .tab {
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            align-items: center; /* จัดตำแหน่งเนื้อหาให้อยู่กลางแนวตั้ง */
        }
        
        .tab img {
            height: 80px; /* Maintain the height of the image */
            width: 80px; /* Set the width to match the height */
            border-radius: 50%; /* Make the image circular */
            margin-right: 20px; /* Maintain the spacing on the right */
        }
        
        .tab-text h1 {
            font-size: 24px; /* ขนาดฟอนต์ของหัวเรื่อง */
            margin: 0; /* ลบช่องว่างด้านบนและด้านล่าง */
            margin-bottom: 5px; /* ช่องว่างด้านล่างของหัวเรื่อง */
        }
        
        .tab-text p {
            font-size: 16px; /* ขนาดฟอนต์ของข้อความ */
            margin: 5px 0; /* ช่องว่างด้านบนและด้านล่างของข้อความ */
        }
        
        .tab-text hr {
            margin: 0; /* ลบช่องว่างด้านบนและด้านล่างของเส้นขอบ */
            margin-top: 5px; /* ช่องว่างด้านบนของเส้นขอบ */
            border: 0.5px solid #ccc; /* ขอบของเส้นขอบ */
        }
        
        /* สไตล์สำหรับการจัดเรียงเนื้อหาไปทางขวา */
        .right-align {
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            align-items: center; /* จัดตำแหน่งเนื้อหาให้อยู่กลางแนวตั้ง */
            text-align: right; /* จัดข้อความให้อยู่ทางด้านขวา */
        }
        
        .right-align img {
            height: 60px; /* ขนาดความสูงของรูปภาพ */
            vertical-align: middle; /* จัดตำแหน่งรูปภาพแนวตั้ง */
        
        }
        .box1 {
            background: #fff; /* สีพื้นหลังของฟอร์ม */
            border: 1px solid #ddd; /* ขอบของฟอร์ม */
            border-radius: 10px; /* มุมของฟอร์มเป็นวงกลม */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* เงาของฟอร์ม */
            padding: 20px; /* การเว้นช่องว่างภายในฟอร์ม */
            width: 100%; /* ความกว้างของฟอร์มเต็มที่ */
            max-width: 540px; /* ความกว้างสูงสุดของฟอร์ม */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            margin: 0 auto; /* จัดให้อยู่ตรงกลางแนวนอน */
            transition: box-shadow 0.3s ease; /* เพิ่มการเปลี่ยนแปลงเงา */
        }
        
        /* สไตล์เมื่อเลื่อนเมาส์บน container */
        .box1:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* เงาที่เพิ่มขึ้นเมื่อเลื่อนเมาส์ */
        }
        
        /* สไตล์สำหรับฟอร์ม */
        form {
            margin: 0; /* ลบช่องว่างด้านนอกของฟอร์ม */
        }
        
        /* สไตล์สำหรับป้าย (labels) ของฟอร์ม */
        form label {
            display: block; /* ทำให้ป้ายแสดงเป็นบล็อก */
            margin-bottom: 10px; /* ช่องว่างด้านล่างของป้าย */
            font-size: 15px; /* ขนาดฟอนต์ของป้าย */
            font-weight: bold; /* ข้อความเป็นตัวหนา */
            color: #333; /* สีของข้อความ */
        }
        
        /* สไตล์สำหรับ input ในฟอร์ม */
        form input[type="email"],
        form input[type="password"] {
            width: 100%; /* ความกว้างเต็มที่ */
            padding: 12px; /* การเว้นช่องว่างภายใน */
            margin-bottom: 15px; /* ช่องว่างด้านล่าง */
            border: 1px solid #ccc; /* ขอบของ input */
            border-radius: 5px; /* มุมของ input เป็นวงกลม */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            font-size: 15px; /* ขนาดฟอนต์ของ input */
            transition: border-color 0.3s ease; /* การเปลี่ยนแปลงสีขอบ */
        }
        
        /* สไตล์เมื่อโฟกัสบน input */
        form input[type="email"]:focus,
        form input[type="password"]:focus {
            border-color: #007bff; /* สีขอบเมื่อโฟกัส */
            outline: none; /* ลบขอบของเบราว์เซอร์ */
        }
        
        /* สไตล์สำหรับปุ่มในฟอร์ม */
        form button {
            background-color: #1a1a1a; /* สีพื้นหลังของปุ่ม */
            color: #fff; /* สีข้อความของปุ่ม */
            border: none; /* ลบขอบของปุ่ม */
            cursor: pointer; /* เปลี่ยนรูปแบบเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
            font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
            padding: 12px; /* การเว้นช่องว่างภายใน */
            border-radius: 5px; /* มุมของปุ่มเป็นวงกลม */
            width: 100%; /* ความกว้างเต็มที่ */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            transition: background-color 0.3s ease, transform 0.2s ease; /* การเปลี่ยนแปลงสีพื้นหลังและการแปลง */
        }
        
        /* สไตล์เมื่อเลื่อนเมาส์บนปุ่ม */
        form button:hover {
            background-color: #333; /* สีพื้นหลังใหม่เมื่อเลื่อนเมาส์ */
            transform: translateY(-2px); /* ยกปุ่มขึ้นเล็กน้อยเมื่อเลื่อนเมาส์ */
        }
        .Box-login {
            margin-top: 14px;
            color: #fff;
            display: flex; /* Use Flexbox to align items */
            align-items: center; /* Center items vertically */
            justify-content: center; /* Center items horizontally */
            text-align: center; /* Center text */
        }
        .Box-login img {
            height: 70px; /* Image height */
            margin-bottom: 30px; /* Space between image and heading */
            vertical-align: middle; /* Vertical alignment */
        }
        /* Container for form action buttons */
        .form-actions {
            display: flex; /* Align items horizontally */
            justify-content: space-between; /* Space between items */
            align-items: center; /* Center items vertically */
            margin-top: 15px; /* Space above the container */
            gap: 10px; /* Space between the link and button */
        }
        
        /* Style for the link */
        .form-actions a {
            display: flex; /* Use flexbox to align items */
            align-items: center; /* Center text vertically */
            justify-content: center; /* Center text horizontally */
            text-decoration: none; /* Remove underline */
            background-color: #007bff; /* Blue background */
            color: #fff; /* White text */
            border: 2px solid #007bff; /* Blue border */
            border-radius: 5px; /* Rounded corners */
            padding: 10px 20px; /* Padding inside the link */
            font-size: 16px; /* Font size */
            font-weight: bold; /* Make text bold */
            transition: background-color 0.3s, color 0.3s; /* Smooth transition */
            cursor: pointer; /* Pointer cursor on hover */
            height: 45px; /* Set a fixed height */
            width: 100%; /* Make link take full width available */
            text-align: center; /* Center text horizontally */
            box-sizing: border-box; /* Include padding and border in element’s total width and height */
        }
        
        /* Hover effect for the link */
        .form-actions a:hover {
            background-color: #0056b3; /* Darker blue background */
            color: #fff; /* White text */
        }
        
        /* Style for the button */
        .form-actions button {
            background-color: #28a745; /* Green background */
            color: #fff; /* White text */
            border: 2px solid #28a745; /* Green border */
            border-radius: 5px; /* Rounded corners */
            padding: 10px 20px; /* Padding inside the button */
            font-size: 16px; /* Font size */
            font-weight: bold; /* Make text bold */
            cursor: pointer; /* Pointer cursor on hover */
            transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
            border: none; /* Remove default border */
            outline: none; /* Remove default outline */
            height: 45px; /* Set a fixed height */
            width: 100%; /* Make button take full width available */
            box-sizing: border-box; /* Include padding and border in element’s total width and height */
        }
        
        /* Hover effect for the button */
        .form-actions button:hover {
            background-color: #218838; /* Darker green background */
            transform: translateY(-2px); /* Lift button slightly */
        }
        
        @media (max-width: 768px) {
            header {
                padding: 20px;
            }
            .footer-text {
                    font-size: 1.2em; /* ขนาดฟอนต์เล็กลงสำหรับหน้าจอมือถือ */
                }
            .footer-heading {
                font-size: 18px;
                margin-left: 0;
            }
            .forgot-password {
                font-size: 12px;
            }
        
            .tab-text {
                text-align: center;
                margin: 10px 0;
            }
        
            .container {
                padding: 10px;
            }
        
            .upload-form {
                padding: 15px;
                margin-top: 20px;
                max-width: 100%;
            }
        
            .form-actions {
                flex-direction: column;
                align-items: stretch;
                margin-left: 0;
                margin-right: 0;
            }
        
            .form-actions a, .form-actions button {
                width: 100%;
                margin-bottom: 10px;
            }
        
            .Box-login {
                text-align: center;
                padding: 20px;
            }
        
            .Box-login img {
                height: 50px;
                margin-bottom: 15px;
            }
        
            .Box-login h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }
        
            .tab {
                text-align: center;
                margin-bottom: 20px;
            }
        
            .tab img {
                height: 70px;
            }
        
            .right-align {
                display: none; /* ซ่อนเนื้อหาภายใน .right-align */
            }
        
            .box1 {
                padding: 20px;
                max-width: 100%;
                margin-bottom: 20px;
            }
        }
        
        @media (max-width: 480px) {
            header {
                padding: 10px;
            }
            .footer-text {
                    font-size: 1em; /* ขนาดฟอนต์เล็กลงอีกสำหรับหน้าจอมือถือที่เล็กที่สุด */
                    margin-left: 10px; /* ปรับขนาดของ margin-left ให้เหมาะสม */
                }
        
            .tab img {
                height: 70px;
            }
        
            .tab-text h1 {
                font-size: 18px;
            }
        
            .tab-text p {
                font-size: 14px;
            }
        
            .right-align {
                display: none; /* ซ่อนเนื้อหาภายใน .right-align */
            }
        
            .upload-form {
                padding: 10px;
                margin-top: 15%;
            }
        
            .form-actions {
                flex-direction: column;
                align-items: stretch;
            }
        
            .form-actions a, .form-actions button {
                width: 100%;
                margin-bottom: 10px;
            }
        
            .Box-login img {
                height: 40px;
            }
        
            .Box-login h2 {
                font-size: 30px;
            }
        
            .box1 {
                padding: 10px;
            }
        }
        /* สไตล์สำหรับ container ที่ครอบฟอร์ม */
        .forgot-password-container {
            display: flex; /* ใช้ Flexbox เพื่อจัดเรียงเนื้อหา */
            justify-content: center; /* จัดเนื้อหาให้อยู่กลางแนวนอน */
            align-items: center; /* จัดเนื้อหาให้อยู่กลางแนวตั้ง */
            min-height: 80vh; /* กำหนดความสูงขั้นต่ำของ container */
            padding: 20px; /* การเว้นช่องว่างภายใน */
        }
        
        /* สไตล์สำหรับฟอร์ม */
        .forgot-password-form {
            background: #ffffff; /* สีพื้นหลังของฟอร์ม */
            border-radius: 8px; /* มุมของฟอร์มเป็นวงกลม */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เงาที่ฟอร์ม */
            padding: 20px; /* การเว้นช่องว่างภายในฟอร์ม */
            width: 100%; /* ความกว้างของฟอร์มเต็มที่ */
            max-width: 400px; /* ความกว้างสูงสุดของฟอร์ม */
            margin: 0 auto; /* จัดให้อยู่ตรงกลางแนวนอน */
        }
        
        /* สไตล์สำหรับหัวข้อในฟอร์ม */
        .forgot-password-form h2 {
            margin-top: 0; /* ลบช่องว่างด้านบนของหัวข้อ */
            margin-bottom: 20px; /* ช่องว่างด้านล่างของหัวข้อ */
            font-size: 24px; /* ขนาดฟอนต์ของหัวข้อ */
            text-align: center; /* จัดตำแหน่งหัวข้อให้อยู่กลาง */
            color: #333; /* สีของข้อความ */
        }
        
        /* สไตล์สำหรับป้าย (labels) ของฟอร์ม */
        .forgot-password-form label {
            display: block; /* ทำให้ป้ายแสดงเป็นบล็อก */
            margin-bottom: 10px; /* ช่องว่างด้านล่างของป้าย */
            font-size: 14px; /* ขนาดฟอนต์ของป้าย */
            color: #555; /* สีของข้อความ */
        }
        
        /* สไตล์สำหรับ input */
        .forgot-password-form input[type="email"] {
            width: 100%; /* ความกว้างเต็มที่ */
            padding: 12px; /* การเว้นช่องว่างภายใน */
            margin-bottom: 15px; /* ช่องว่างด้านล่าง */
            border: 1px solid #ccc; /* ขอบของ input */
            border-radius: 5px; /* มุมของ input เป็นวงกลม */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            font-size: 14px; /* ขนาดฟอนต์ของ input */
            transition: border-color 0.3s ease; /* การเปลี่ยนแปลงสีขอบ */
        }
        
        /* สไตล์เมื่อโฟกัสบน input */
        .forgot-password-form input[type="email"]:focus {
            border-color: #007bff; /* สีขอบเมื่อโฟกัส */
            outline: none; /* ลบขอบของเบราว์เซอร์ */
        }
        
        /* สไตล์สำหรับปุ่มในฟอร์ม */
        .forgot-password-form button {
            background-color: #007bff; /* สีพื้นหลังของปุ่ม */
            color: #fff; /* สีข้อความของปุ่ม */
            border: none; /* ลบขอบของปุ่ม */
            cursor: pointer; /* เปลี่ยนรูปแบบเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
            font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
            padding: 12px; /* การเว้นช่องว่างภายใน */
            border-radius: 5px; /* มุมของปุ่มเป็นวงกลม */
            width: 100%; /* ความกว้างเต็มที่ */
            box-sizing: border-box; /* รวม padding และ border ในความกว้างของ element */
            transition: background-color 0.3s ease, transform 0.2s ease; /* การเปลี่ยนแปลงสีพื้นหลังและการแปลง */
        }
        
        /* สไตล์เมื่อเลื่อนเมาส์บนปุ่ม */
        .forgot-password-form button:hover {
            background-color: #0056b3; /* สีพื้นหลังใหม่เมื่อเลื่อนเมาส์ */
            transform: translateY(-2px); /* ยกปุ่มขึ้นเล็กน้อยเมื่อเลื่อนเมาส์ */
        }
        
                /***************************************************/
                .error-message {
                    display: none;
                    color: red;
                    font-size: 0.9em;
                }
                .register-form {
                    margin-top: 50px;
                    padding: 20px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    background-color: #f9f9f9;
                }