/* สไตล์สำหรับ 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 */
}
/* ปรับแต่งสไตล์สำหรับลิงก์ "Register" และปุ่ม "Login" ให้อยู่ในแนวนอนเดียวกัน */
.form-actions {
    display: flex; /* จัดลิงก์และปุ่มให้อยู่ในแนวนอน */
    justify-content: space-between; /* จัดให้อยู่ห่างกัน */
	margin-left: 50px;
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    margin-top: 15px; /* เพิ่มช่องว่างด้านบน */
}

.form-actions a {
    text-decoration: none; /* ลบขีดเส้นใต้ของลิงก์ */
    border: 2px solid #007bff; /* เพิ่มขอบรอบลิงก์ให้สมดุลกับปุ่ม */
    border-radius: 5px; /* มุมของลิงก์เป็นวงกลม */
    transition: background-color 0.3s ease, color 0.3s ease; /* เพิ่มเอฟเฟกต์เมื่อชี้เมาส์ */
	background-color: #9F9F9F; /* สีพื้นหลังของปุ่ม */
    color: #fff; /* สีข้อความของปุ่ม */
    border: 2px solid #007bff; /* ขอบปุ่ม */
    cursor: pointer; /* เปลี่ยนรูปแบบเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
    font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
    padding: 10px 20px; /* การเว้นช่องว่างภายในปุ่ม */
    border-radius: 10px; /* มุมของปุ่มเป็นวงกลม */
    transition: background-color 0.3s ease, transform 0.2s ease; /* เพิ่มเอฟเฟกต์เมื่อชี้เมาส์ */
	width: 180px; 
}

.form-actions a:hover {
    background-color: #007bff; /* สีพื้นหลังเมื่อชี้เมาส์ */
    color: #fff; /* เปลี่ยนสีข้อความเมื่อชี้เมาส์ */
}

.form-actions button {
    background-color: #07E777; /* สีพื้นหลังของปุ่ม */
    color: #fff; /* สีข้อความของปุ่ม */
    border: 2px solid #007bff; /* ขอบปุ่ม */
    cursor: pointer; /* เปลี่ยนรูปแบบเคอร์เซอร์เมื่อชี้ที่ปุ่ม */
    font-size: 16px; /* ขนาดฟอนต์ของปุ่ม */
    padding: 10px 20px; /* การเว้นช่องว่างภายในปุ่ม */
    border-radius: 10px; /* มุมของปุ่มเป็นวงกลม */
    transition: background-color 0.3s ease, transform 0.2s ease; /* เพิ่มเอฟเฟกต์เมื่อชี้เมาส์ */
	width: 180px; 
	margin-right: 50px;

}

.form-actions button:hover {
    background-color: #0056b3; /* สีพื้นหลังเมื่อชี้เมาส์ */
    transform: translateY(-2px); /* ยกปุ่มขึ้นเล็กน้อยเมื่อชี้เมาส์ */
}
.Box-Confirm{
			margin-Top: 13px;
		}

@media (max-width: 768px) {
    header {
        padding: 20px;
    }
	.Box-Confirm{
			margin-Top: 1px;
		}
	.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: row; /* ให้ปุ่มอยู่ในแนวนอน */
        align-items: center; /* จัดตำแหน่งปุ่มในแนวกลาง */
        margin-left: 0;
        margin-right: 0;
    }

    .form-actions a, .form-actions button {
        flex: 1; /* ปรับให้ปุ่มขยายเต็มความกว้างที่มี */
        margin-bottom: 0; /* ลบช่องว่างด้านล่าง */
        margin-right: 10px; /* เพิ่มช่องว่างด้านขวาของปุ่ม */
    }

    .form-actions button:last-child {
        margin-right: 0; /* ลบช่องว่างด้านขวาของปุ่มสุดท้าย */
    }

    .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: row; /* ปรับให้ปุ่มอยู่ในแนวนอน */
    }

    .form-actions a, .form-actions button {
        flex: 1; /* ให้ปุ่มและลิงก์ขยายเต็มความกว้าง */
        margin-bottom: 0; /* ลบช่องว่างด้านล่าง */
        margin-right: 10px; /* เพิ่มช่องว่างด้านขวาของปุ่ม */
    }

    .form-actions button:last-child {
        margin-right: 0; /* ลบช่องว่างด้านขวาของปุ่มสุดท้าย */
    }

    .Box-login img {
        height: 40px;
    }

    .Box-login h2 {
        font-size: 30px;
    }

    .box1 {
        padding: 10px;
    }
}
		/***************************************************/
        .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;
        }