body{
    background: var(--neutral-n-20, #F6F6F6);
}

.contain{
    position: relative;
}

.block{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block-logo{
    display: flex;
    justify-content: center;
}
.block-txt{
    padding-top: 60px;
    display: flex;
    justify-content: center;
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 49px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.block-form{
    display: flex;
    margin-top: 40px;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--dark-green-d-300, #354F52);
    background: var(--neutral-n-0, #FFF);
    flex-direction: column;
    z-index: 10;
}

.block-form-txt{
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
}

.form{
    padding: 32px 0 32px 0;
}

input::placeholder{
    color: var(--neutral-n-60, #B6B9BA);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.block-1{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-txt-1{
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

input{
    padding: 16px;
    gap: 16px;
    border-radius: 6px;
    background: var(--neutral-n-20, #F6F6F6);
    border: 0;
}

.block-2{
    display: flex;
    justify-content: space-between;
}

.block-2-txt{
    color: var(--neutral-n-300, #646B6B);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}

.block-2-txt-1{
    color: var(--green-g-300, #B9BF1C);
    /* Normal Link */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-decoration-line: underline;
}

.btn{
    cursor: pointer;
    /* width: 100%; */
    padding: 16px 64px;
    margin-top: 32px;
    border-radius: 8px;
    background: var(--green-g-300, #B9BF1C);
    border: 0;
}

.btn:hover{
    background-color: #828614;
}

.btn-btn{
    width: 100%;
    /* padding: 16px 32px;
    margin-top: 32px; */
    border-radius: 8px;
    background: var(--green-g-300, #B9BF1C);
    border: 0;
}

.btn1{
    width: 100%;
    padding: 16px 32px;
    margin-top: 32px;
    border-radius: 8px;
    border: 0;
    background: var(--green-g-50, #F8F9E8);
}

.btn:hover{
    background: var(--dark-green-d-300, #354F52);
}

.btn-txt{
    color: var(--neutral-n-0, #FFF);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

.btn-back{
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid var(--green-g-300, #B9BF1C);
}

.btn-back:hover{
    border: 2px solid var(--dark-green-d-300, #354F52);
}

.btn-txt-1{
    color: var(--green-g-300, #B9BF1C);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 19.5px */
}

.btn-txt-1:hover{
    color: var(--dark-green-d-300, #354F52);
}

.block-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.second-img{
    width: 100%;
    position: absolute;
    bottom: 0;
}

.btn-file{
    position: relative;
    padding: 22px;
    border-radius: 4px;
    border: 1px dashed #2C3345;
    background: #FBFCFF;
    overflow: hidden;
}

.btn-file input[type="file"]{
    position: absolute;
    text-align: center;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.form-file-txt{
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 24px */
}

.form-file-txt-1{
    color: var(--neutral-n-60, #B6B9BA);
    font-family: Kanit;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 19.5px */
}

.form-file-txt-2{
    color: var(--neutral-n-60, #B6B9BA);
    font-family: Kanit;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 19.5px */
}

.check-txt-1{
    color: var(--neutral-n-500, #4A5253);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 19.5px */
}

.check-txt-2{
    color: var(--green-g-300, #B9BF1C);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.block-txt-form{
    width: 795px;
    margin-top: 55px;
    color: var(--dark-green-d-300, #354F52);
    text-align: center;
    font-family: Kanit;
    font-size: 49px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 58.8px */
}

.form-1-txt{
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 30px */
}

.form-2-txt{
    color: var(--neutral-n-300, #646B6B);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 19.5px */
}

.txt-form{
    display: flex;
    gap: 8px;
    margin-top: 32px;
    align-items: center;
}

.form-block-txt-1{
    color: var(--neutral-n-700, #2E3738);
    text-align: center;
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.form-block-txt-2{
    color: var(--neutral-n-300, #646B6B);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 19.5px */
}

.btn-button{
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: var(--neutral-n-20, #F5F5F6);
}

.btn-block{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.btn-block1{
    width: 75%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

.btn-block2{
    width: 20%;
    display: flex;
    justify-content: flex-end;
}

.sub-btn-block1{
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon{
    display: flex;
    padding: 8px;
    border-radius: 100px;
    background: var(--neutral-n-40, #E0E2E2);
    color: #000;
}

.btn-icon:hover{
    color: #fff;
    background: var(--green-g-300, #B9BF1C);
}

.btn-checkbox{
    opacity: 0;
}

.third-image{
    width: 144px;
    display: flex;
    padding: 16px;
    border-radius: 100px;
    background: var(--green-g-300, #B9BF1C);
}

.element{
    display: flex;
    justify-content: space-around;
}

.elt-txt{
    display: flex;
    width: 463px;
    color: var(--dark-green-d-300, #354F52);
    text-align: center;
    font-family: Kanit;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 30px */
}

.element-1{
    margin-top: 36px;
}

.col-img{
    display: flex;
    justify-content: space-around;
}

.block-verif-txt{
    width: 464px;
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
}

.res-text{
    color: var(--dark-green-d-300, #354F52);
    font-family: Kanit;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 24px */
}

.row{
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.otp{
    width: 100%;
    height: 95px;
    color: var(--neutral-n-700, #2E3738);
    font-family: Kanit;
    font-size: 61px;
    text-align: center;
}

.alert{
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: #FCE4E4;
    grid-column-start: 1;
    grid-column-end: 3;
}

.error-txt{
    color: var(--neutral-n-300, #686F60);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}