@charset "UTF-8";

/* ==============================================
   Custom CSS สำหรับระบบรับสมัครพนักงาน
============================================== */

body { 
    font-family: 'Sarabun', sans-serif; 
    background-color: #f0f2f5; 
}

.card { 
    border: none; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
    margin-bottom: 20px; 
}

.card-header { 
    background-color: #ffffff; 
    border-bottom: 2px solid #f0f2f5; 
    padding: 1.5rem; 
    border-radius: 12px 12px 0 0 !important; 
}

.card-title { 
    color: #2c3e50; 
    font-weight: 600; 
    margin-bottom: 0; 
    font-size: 1.1rem; 
}

.card-title i { 
    color: #0d6efd; 
    margin-right: 10px; 
}

.form-label { 
    font-weight: 500; 
    color: #555; 
    margin-bottom: 0.5rem; 
    font-size: 0.95rem; 
}

.form-control, .form-select { 
    border-radius: 8px; 
    padding: 0.6rem 1rem; 
    border: 1px solid #dee2e6; 
}

.form-control:focus, .form-select:focus { 
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); 
}

.btn-main { 
    padding: 12px 40px; 
    border-radius: 30px; 
    font-weight: 600; 
}

.required-star { 
    color: #dc3545; 
}

/* สไตล์กรอบสีแดงเมื่อลืมกรอกข้อมูล */
.form-control.is-invalid, .form-select.is-invalid { 
    border-color: #dc3545 !important; 
    background-image: none; 
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); 
}

/* กล่องพรีวิวรูปภาพ (หน้า 1 และหน้า 2) */
.preview-box { 
    width: 180px; 
    height: 220px; 
    border: 2px dashed #ccc; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    margin: 0 auto 15px auto; 
    background: #fafafa; 
}
.preview-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* กล่องรูปภาพสำหรับหน้า Profile โดยเฉพาะ */
.profile-box {
    width: 220px; 
    height: 280px; 
    border: 3px solid #fff; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    margin: 0 auto 20px auto; 
    background: #fafafa;
}
.profile-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* กล่องข้อมูลย่อยที่เพิ่มหลายแถวได้ (หน้า 3) */
.dynamic-row { 
    background-color: #f8f9fa; 
    padding: 15px; 
    border-radius: 8px; 
    border-left: 4px solid #0d6efd; 
    margin-bottom: 15px; 
    position: relative;
}

.btn-remove-row { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
}