/* style.css */

/* กฎสำหรับตกแต่งทั้งหน้าเว็บ */
body {
    font-family: Arial, sans-serif; /* เปลี่ยนฟอนต์ให้อ่านง่ายขึ้น */
    background-color: #f0f8ff;      /* เปลี่ยนสีพื้นหลังเป็นสีฟ้าอ่อน */
    text-align: center;             /* จัดทุกอย่างให้อยู่กึ่งกลาง */
    margin-top: 50px;               /* เพิ่มระยะห่างจากขอบบน */
}

/* กฎสำหรับตกแต่งหัวข้อหลัก */
h1 {
    color: #005a9c; /* เปลี่ยนสีหัวข้อเป็นสีน้ำเงินเข้ม */
}

/* กฎสำหรับตกแต่งปุ่ม */
button {
    background-color: #007bff; /* เปลี่ยนสีพื้นหลังปุ่ม */
    color: white;              /* เปลี่ยนสีตัวอักษรบนปุ่มเป็นสีขาว */
    padding: 12px 20px;        /* เพิ่มระยะห่างภายในปุ่ม (ทำให้ปุ่มใหญ่ขึ้น) */
    border: none;              /* เอาเส้นขอบออก */
    border-radius: 5px;        /* ทำให้ขอบปุ่มมนขึ้น */
    cursor: pointer;           /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ที่ปุ่ม */
    font-size: 16px;           /* เพิ่มขนาดตัวอักษร */
}

/* กฎเมื่อเอาเมาส์ไปชี้ที่ปุ่ม */
button:hover {
    background-color: #0056b3; /* ทำให้สีปุ่มเข้มขึ้น */
}
/*=============== STYLES FOR FORMS ===============*/

/* จัดระเบียบฟอร์มให้อยู่ในกรอบสวยงาม */
form {
    background-color: white;         /* พื้นหลังสีขาว */
    max-width: 600px;                /* ความกว้างสูงสุดไม่เกิน 600px */
    margin: 20px auto;               /* จัดให้อยู่กึ่งกลางจอ */
    padding: 20px;                   /* ระยะห่างภายใน */
    border-radius: 8px;              /* ขอบมน */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* เพิ่มเงาจางๆ */
    text-align: left;                /* จัดข้อความในฟอร์มให้ชิดซ้าย */
}

/* ตกแต่งช่องกรอกข้อมูลทุกชนิด */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="file"],
select,
textarea {
    width: 100%;                     /* ความกว้างเต็ม 100% ของกรอบฟอร์ม */
    padding: 10px;                   /* ระยะห่างภายในช่องกรอก */
    margin-bottom: 15px;             /* ระยะห่างจากช่องถัดไป */
    border: 1px solid #ccc;          /* เส้นขอบสีเทา */
    border-radius: 4px;              /* ขอบมน */
    box-sizing: border-box;          /* ป้องกัน padding ทำให้ช่องกรอกล้นกรอบ */
}

/* ตกแต่งป้ายชื่อ (label) */
label {
    font-weight: bold;               /* ทำให้เป็นตัวหนา */
    display: block;                  /* ทำให้ขึ้นบรรทัดใหม่เสมอ */
    margin-bottom: 5px;              /* ระยะห่างจากช่องกรอก */
}