@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;700&display=swap");

body {
    font-family: "Sarabun", sans-serif !important;
    background: #facad3;
}

.btn-submit {
    border: none;
    background-color: #f76c92;
}

.btn-submit:hover {
    border: none;
    background-color: #f7b7c8;
}

.btn-submit:active {
    border: none;
    background-color: #f7b7c8 !important;
}

a {
    text-decoration: none;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    color: #2f2f2f;
    text-decoration: underline;
}

a:hover {
    color: #2f2f2f;
    text-decoration: none;
}

/*------------ Login container ------------*/
.box-area {
    width: 100%;
    /* เปลี่ยนจาก 930px เป็น 100% */
    max-width: 930px;
    /* เพิ่มค่า max-width เพื่อไม่ให้เกินขนาดนี้ */
    margin: 0 auto;
    /* จัดให้อยู่กลาง */
}

/*------------ Right box ------------*/
.right-box {
    padding: 40px 30px 40px 40px;
}

/*------------ Custom Placeholder ------------*/
::placeholder {
    font-size: 16px;
}

.rounded-4 {
    border-radius: 20px;
}

.rounded-5 {
    border-radius: 30px;
}

/*------------ For small screens------------*/
@media only screen and (max-width: 768px) {

    .left-box {
        height: auto;
        overflow: hidden;
    }

    .right-box {
        padding: 20px;
    }

    /* ปรับให้แบบฟอร์มใช้งานง่ายในมือถือ */
    .input-group input {
        font-size: 14px;
        /* ลดขนาดตัวอักษร */
    }

    .btn {
        font-size: 16px;
        /* ปรับขนาดปุ่มให้พอดี */
    }

    .header-text h2 {
        font-size: 24px;
        /* ลดขนาดของหัวข้อในมือถือ */
    }

    .header-text p {
        font-size: 14px;
        /* ลดขนาดพารากราฟ */
    }
}

.under-line {
    text-decoration: underline;
}