/* ปรับให้เป็น 3 คอลัมน์ในหน้าจอใหญ่ และให้งานสุดท้ายอยู่ซ้ายสุด */
.job-list-container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;  /* จัดตำแหน่งให้อยู่ชิดซ้าย */
    gap: 20px;
    align-items: stretch;  /* ทำให้ความสูงของการ์ดเท่ากัน */
}

/* กำหนดให้ card เป็น 3 คอลัมน์ */
.job-list-container .col-md-4 {
    flex: 0 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    display: flex;
}

/* ปรับแต่ง card */
.job-list-container .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(to bottom right, #ffffff, #f1f5f9);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    position: relative;
}

/* เพิ่มลูกเล่นเมื่อ hover */
.job-list-container .card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* ปรับตำแหน่งปุ่ม */
.job-list-container .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

/* ปรับขนาดปุ่ม */
.job-list-container .card .btn {
    align-self: flex-start;
    background-color: #1e466b;
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, transform 0.2s;
    margin-top: auto;
}

.job-list-container .card .btn:hover {
    background-color: #2563EB;
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .job-list-container .col-md-4 {
        flex: 0 1 calc(50% - 20px); /* 2 คอลัมน์ในหน้าจอกลาง */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .job-list-container .col-md-4 {
        flex: 0 1 100%; /* 1 คอลัมน์บนจอเล็ก */
        max-width: 100%;
    }

    .job-list-container .card .btn {
        width: 100%;
    }
}