@charset "utf-8";
    /* CSS Document */
    

    html,
    body {
        height: 100%;
    }
    
    body {
        background: #f3fff9;
        color: #212529;
        font-family: "Kanit";
        margin: 0;
        line-height: 1.55;
    }
    
    .text-main-head {
        font-family: "Kanit";
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        color: #000;
    }
    .text-main-head h1 {
        font-family: "Kanit";
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        color: #000;
    }
    .tex-sub2 h2 {
        color: #03c78d;
        text-align: center;
        font-family: "Kanit";
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }
    
    .tex-sub2 {
        color: #03c78d;
        text-align: center;
        font-family: "Kanit";
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }
    
    .tex-sub3 {
        color: #000;
        text-align: center;
        font-family: "Kanit";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }
    
    .tex-sub4 {
        text-align: center;
        font-family: "Kanit";
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px;
    }
    
    .mtb-25 {
        margin: 15px auto 25px;
    }
    
    .mtb-15 {
        margin: 15px auto 15px;
    }
    
    .mb-25 {
        margin-bottom: 25px!important;
    }
    
    .f-w400 {
        font-weight: 400;
    }
    
    .tex-small-01 {
        color: #666;
        text-align: center;
        font-family: "Kanit";
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
    }
    
    .text-form-02 {
        font-size: 18px;
        padding-bottom: 10px;
        text-align: center;
        font-weight: 400;
    }
    
    .text-black {
        color: #000;
    }
    
    .text-blue {
        color: #004A87;
    }
    
    .text-light-blue {
        color: #3caaa6;
    }
    
    .text-light-blue {
        color: #50b748;
    }
    .text-light-red{
        color: #f22424;
    }
    /* ///////////btn///////// */
    
    .button-group-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
        /* max-width: 358px; */
        max-width: 270px;
        margin: 0 auto;
        margin-bottom: 35px;
    }
    
    .button.login--phone:hover {
        background-color: #02b882;
    }

.button.login--phone {
    background-color: #03c78d36;
    text-shadow: 1px 1px 20px #638174;
    pointer-events: none;
}
    
    .button:hover {
        text-decoration: none;
        color: #FFF;
    }
    
    a:hover {
        color: #0056b3;
        text-decoration: none;
    }
    
    .button {
        display: inline-flex;
        width: 100%;
        padding: 16px 56px;
        align-items: center;
        gap: 20px;
        color: #FFF;
        font-size: 18px;
        font-weight: 500;
        border-radius: 100px;
        cursor: pointer;
        transition: background-color 0.35s ease-in-out;
    }
    
    span.login--icon {
        width: 10px;
        color: #FFF;
    }
    
    .button.login--facebook {
        background-color: #0865FE;
    }
    
    .button.login--facebook:hover {
        background-color: #0b53ea;
    }
    
    .button {
        display: inline-flex;
        width: 100%;
        padding: 16px 56px;
        align-items: center;
        gap: 20px;
        color: #FFF;
        font-size: 18px;
        font-weight: 500;
        border-radius: 100px;
        cursor: pointer;
        transition: background-color 0.35s ease-in-out;
    }
    /* /////end-btn///// */
    
    .tex-small-main {
        color: #004A87;
        font-family: "Kanit";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    
    .tex-small-main a {
        color: #007bff;
        font-family: "Kanit";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }
    
    .text-detail {
        color: #000!important;
        text-align: center;
        font-family: "Kanit";
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px;
    }
    
    .policy-block {
        max-width: 650px;
        margin: 50px auto;
        font-size: 12px;
        text-align: center;
        color: #989898;
    }
    
    .text-sub-main-form {
        color: #000;
        font-family: "Kanit";
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
    }
    
    .text-register-btn3 {
        color: #004A87;
        font-size: 18px;
        font-weight: 400;
    }
    
    .text-register-btn3:hover {
        color: #0056b3;
    }
    
    .box-form02 {
        display: flex;
        /* width: 47px;
        height: 26px; */
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
    }
    
    input[type="text"] {
        font-weight: 300;
        font-size: 15px;
        color: #6C757D;
    }
    
    .button--list-crop2 {
        justify-content: center;
        display: flex;
        text-align: center;
    }
    
    @media (max-width: 991px) {
        .button {
            display: inline-flex;
            width: 100%;
            padding: 16px 35px;
            align-items: center;
            gap: 20px;
            color: #FFF;
            font-size: 15px;
            font-weight: 500;
            border-radius: 100px;
            cursor: pointer;
            transition: background-color 0.35s ease-in-out;
            max-width: 200px;
        }
    }
    
    @media (max-width: 520px) {
        .tex-sub2 h2 {

            font-size: 21px;
         
        }
        .tex-sub2 {
            font-size: 21px;
        }
        .tex-sub3 {
            font-size: 18px;
            line-height: 30px;
        }
    }
    
    @media (max-width: 430px) {
        .text-main-head h1 {
            font-size: 30px;
     
        }
        
        .text-detail p br {
            display: none;
        }
        .text-main-head {
            font-size: 30px;
        }
        .tex-small-01 br {
            display: none;
        }
        .text-form-02 {
            font-size: 16px;
        }
        .text-register-btn3 {
            font-size: 16px;
        }
    }
    
    .form-group-wrapper {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .form-group {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .form-group span {
        width: 100px;
        /* กำหนดความกว้างของ label หรือ span */
        margin-right: 10px;
    }
    
    .form-group input {
        flex: 1;
        /* ให้ input ขยายเต็มพื้นที่ที่เหลือ */
        padding: 12px 18px;
    }
    
    .button--list {
        text-align: center;
    }
    
    .button.primary {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }
    
    .button.primary:hover {
        background-color: #0056b3;
    }
    
    .tex-small-main a:hover {
        color: #0056b3;
    }
    /* ///////////////////////////////////////////////// */

.group-wrapper-box-crop {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 50px 0px 10px;
}
    
    .form-group span {
        width: 60px;
        margin-right: 10px;
    }
    
    .btn-confirm1 {
        display: flex;
        padding: 16px 32px;
        justify-content: center;
        align-items: center;
        gap: 32px;
        flex: 1 0 0;
        background-color: #004A87;
        width: 258px;
        max-width: 258px;
        cursor: pointer;
        color: #ffffff;
        display: flex;
    }
    
    .btn-confirm1:hover {
        background-color: #074073;
        color: #ffffff;
        text-decoration: none!important;
    }
    
    .btn-back01 {
        display: flex;
        padding: 16px 32px;
        justify-content: center;
        align-items: center;
        gap: 32px;
        flex: 1 0 0;
        border: 1px solid #cecece;
        width: 258px;
        max-width: 258px;
        cursor: pointer;
        color: #000;
        display: flex;
        border-radius: 100px;
    }
    
    .btn-back01:hover {
        background-color: #414141;
        color: #ffffff;
        text-decoration: none !important;
    }
    /* ////////map */
    
    .crop-map-main {
        width: auto;
        margin: 14px auto 45px;
        justify-content: center;
        text-align: center;
    }
    
    .btn-map-main a {
        font-size: 18px;
        font-weight: 400;
        color: #000;
        text-align: right;
        border: 1px solid #dee1ee;
        border-radius: 8px;
        margin-bottom: 0;
        transition-duration: 400ms;
        margin-top: 2px;
        padding: 10.5px 15px 10px 15px;
        text-decoration: none;
    }
    
    .btn-map-main:hover {
        opacity: 0.5;
        transition-duration: 400ms;
    }
    
    .icon-map {
        position: relative;
        top: 1px;
        margin-right: 10px;
        font-size: 20px;
        /* color: #fe4e00; */
        color: #03c78d;
    }
    /* /////// */
    
    .cover-pic-status img {
        animation: zoom 3s infinite;
        /* ระยะเวลาแอนิเมชัน 3 วินาที */
    }
    
    @keyframes zoom {
        0%,
        100% {
            transform: scale(1);
            /* ขนาดปกติ */
        }
        50% {
            transform: scale(1.2);
            /* ขยายขนาดขึ้น 20% */
        }
    }
    /* //////////////////////// */
    
    .group-wrapper-box-crop-2 {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 390px;
        margin: 0 auto;
        margin-bottom: 20px;
        padding: 20px 0px 20px;
    }
    
    a.text-pdpa1 {
        font-size: 12px;
        text-decoration: underline;
        color: #211312;
    }
    
    a.text-pdpa1:hover {
        color: #0056b3;
    }