.elementor-575 .elementor-element.elementor-element-6de8d3d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-575 .elementor-element.elementor-element-0b3b8c2{--display:flex;--min-height:400px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:10px 10px 10px 10px;box-shadow:5px 5px 10px 0px rgba(0, 0, 0, 0.25);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-575 .elementor-element.elementor-element-0b3b8c2:not(.elementor-motion-effects-element-type-background), .elementor-575 .elementor-element.elementor-element-0b3b8c2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, #F2F3F4 100%);}.elementor-575 .elementor-element.elementor-element-f1cc662{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-575 .elementor-element.elementor-element-f8fc408 .elementor-heading-title{color:#006600;}.elementor-widget-text-editor{font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-575 .elementor-element.elementor-element-005bf8d{font-size:14px;font-weight:400;font-style:italic;color:#FF0000;}@media(min-width:768px){.elementor-575 .elementor-element.elementor-element-6de8d3d{--content-width:800px;}}/* Start custom CSS for shortcode, class: .elementor-element-94032cb */.mepr-signup-form .mp-form-row {
    margin-bottom: 20px;
    text-align: left;
}

/* จัดสไตล์ข้อความป้ายกำกับ (Labels) */
.mepr-signup-form label,
.mepr-signup-form .mp-form-row label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b; /* สีเทาเข้ม */
    margin-bottom: 8px;
}

/* ซ่อนสัญลักษณ์เครื่องหมายดอกจันสีแดงบังคับกรอก (*) ถ้าต้องการความสะอาดตา */
.mepr-signup-form .mepr-required {
    color: #ef4444;
    margin-left: 4px;
}

/* =======================================================
   2. จัดแต่งช่องสำหรับกรอกข้อมูล (Input Fields & Dropdowns)
   ======================================================= */

/* ปรับแต่งความสวยงามของช่องกรอกทุกประเภท */
.mepr-signup-form input[type="text"], 
.mepr-signup-form input[type="email"], 
.mepr-signup-form input[type="password"],
.mepr-signup-form select,
.mepr-signup-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #cbd5e1 !important; /* ขอบเทาอ่อน */
    border-radius: 8px !important; /* ขอบมน */
    font-size: 15px !important;
    background-color: #f8fafc !important; /* พื้นหลังช่องกรอกสีเทาจาง */
    color: #334155 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* เอฟเฟกต์เมื่อคลิกเลือกช่องกรอก (Focus) */
.mepr-signup-form input[type="text"]:focus, 
.mepr-signup-form input[type="email"]:focus, 
.mepr-signup-form input[type="password"]:focus,
.mepr-signup-form select:focus,
.mepr-signup-form textarea:focus {
    border-color: #6366f1 !important; /* เปลี่ยนขอบเป็นสีม่วงคราม */
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important; /* แสงฟุ้งรอบปุ่ม */
    outline: none !important;
}

<!-- STREAMING_CHUNK:เขียน CSS ในส่วนของช่อง Checkbox และปุ่มสมัครสมาชิก -->
/* =======================================================
   3. จัดแต่งช่องติ๊กยอมรับเงื่อนไข (Checkboxes & Terms)
   ======================================================= */

/* จัดระเบียบข้อความยอมรับเงื่อนไขให้จัดเรียงสวยงาม */
.mepr-signup-form .mepr-checkbox-field {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    margin: 15px 0 !important;
}

.mepr-signup-form .mepr-checkbox-field input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px !important;
    border-radius: 4px !important;
    cursor: pointer;
}

.mepr-signup-form .mepr-checkbox-field label {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    cursor: pointer;
}

/* ลิงก์ข้อกำหนดเงื่อนไขการใช้บริการ */
.mepr-signup-form .mepr-checkbox-field a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.mepr-signup-form .mepr-checkbox-field a:hover {
    text-decoration: underline;
}

/* =======================================================
   4. จัดแต่งปุ่มสมัครสมาชิก (Submit Button)
   ======================================================= */

/* ปรับสไตล์ปุ่มยืนยันการสมัครให้เด่นและหรูหรา */
.mepr-signup-form .mepr_spacer {
    margin-top: 15px;
}

.mepr-signup-form input.mepr-submit {
    width: 100% !important;
    background-color: #6366f1 !important; /* สีม่วงครามเดียวกับหน้า Login */
    color: #ffffff !important;
    padding: 14px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2) !important;
}

/* เอฟเฟกต์ตอนชี้เมาส์ที่ปุ่มสมัคร (Hover) */
.mepr-signup-form input.mepr-submit:hover {
    background-color: #4f46e5 !important; /* สีเข้มขึ้น */
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
}

.mepr-signup-form input.mepr-submit:active {
    transform: translateY(0px) !important;
}

/* =======================================================
   5. จัดแต่งกล่องข้อความแจ้งเตือนสีแดงและสีเขียว (Errors & Messages)
   ======================================================= */
.mepr-signup-form .mepr_error, 
.mepr-signup-form .mepr-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #ef4444 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}/* End custom CSS */