.job-detail{
    padding:40px 0;
    background:#f5f7fb;
}

.job-detail-layout{
    display:grid;
    grid-template-columns:2.2fr 1fr;
    gap:25px;
}

/* MAIN */
.job-main{
    background:#fff;
    padding:28px;
    border-radius:12px;
    border:1px solid #eaeaea;
    box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

/* TITLE */
.job-main h1{
    font-size:24px;
    font-weight:700;
    margin-bottom:6px;
    color:#222;
}

/* COMPANY */
.job-company{
    font-size:15px;
    color:#0a66c2;
    font-weight:600;
    margin-bottom:10px;
}

/* INFO BOX */
.job-info-box{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:15px 0;
}

.job-info-box div{
    background:#f1f5fb;
    padding:6px 12px;
    border-radius:6px;
    font-size:14px;
    color:#444;
}

/* BUTTON */
.apply-btn{
    background:linear-gradient(135deg,#0a66c2,#1e88e5);
    color:#fff;
    padding:12px 25px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    transition:0.2s;
}

.apply-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(30,136,229,0.3);
}

/* DESCRIPTION */
.job-description{
    margin-top:25px;
    line-height:1.6;
    color:#333;
}

.job-description h3{
    margin-top:20px;
    margin-bottom:8px;
    font-size:18px;
    color:#111;
}

.job-description ul{
    padding-left:18px;
}

.job-description li{
    margin-bottom:6px;
}

/* SIDEBAR */
.job-sidebar{
    background:#fff;
    padding:20px;
    border-radius:12px;
    border:1px solid #eaeaea;
    height:fit-content;
    box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

/* COMPANY CARD */
/* COMPANY CARD */
.company-card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    border:1px solid #eaeaea;
    text-align:center;
    margin-bottom:20px;
}

/* LOGO TO */
.company-logo{
    margin-bottom:15px;
}

.company-logo img{
    width:90px;
    height:90px;
    object-fit:contain;
    border-radius:10px;
    border:1px solid #eee;
    padding:6px;
    background:#fff;
}

/* NAME */
.company-name{
    font-size:18px;
    font-weight:600;
    margin-bottom:8px;
}

/* META */
.company-meta{
    font-size:14px;
    color:#666;
    margin-bottom:15px;
}

.company-meta div{
    margin-bottom:5px;
}

/* BUTTON */
.btn-outline{
    display:block;
    width:100%;
    padding:10px;
    border:1px solid #0a66c2;
    color:#0a66c2;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    transition:0.25s;
}

.btn-outline:hover{
    background:#0a66c2;
    color:#fff;
}

/* JOB LIST */
.company-jobs{
    background:#fff;
    border-radius:12px;
    padding:15px;
    border:1px solid #eaeaea;
}

.company-jobs h4{
    font-size:16px;
    margin-bottom:10px;
}

/* ITEM */
.company-job-item{
    padding:10px;
    border-radius:8px;
    border:1px solid #f0f0f0;
    margin-bottom:10px;
    transition:0.2s;
}

.company-job-item:hover{
    border-color:#0a66c2;
    background:#f8fbff;
}

/* TITLE */
.cj-title{
    font-weight:600;
    color:#222;
    text-decoration:none;
    display:block;
    margin-bottom:4px;
}

.cj-title:hover{
    color:#0a66c2;
}

/* META */
.cj-meta{
    font-size:13px;
    color:#777;
}

/* BUTTON OUTLINE */
.btn-outline{
    width:100%;
    margin-top:12px;
    padding:10px;
    border:1px solid #0a66c2;
    background:#fff;
    color:#0a66c2;
    border-radius:6px;
    cursor:pointer;
    transition:0.2s;
}

.btn-outline:hover{
    background:#0a66c2;
    color:#fff;
}

/* RELATED JOBS */
.related-item{
    border:1px solid #eee;
    padding:10px;
    border-radius:8px;
    margin-bottom:10px;
    transition:0.2s;
}

.related-item:hover{
    border-color:#0a66c2;
    background:#f8fbff;
}
.job-actions{
    display:flex;
    gap:12px;
    margin:15px 0 20px;
}

/* APPLY */
.apply-btn{
    flex:1;
    height:44px;

    background:linear-gradient(135deg,#0a66c2,#1e88e5);
    color:#fff;

    border:none;
    border-radius:6px;

    font-weight:600;
    cursor:pointer;

    transition:0.25s;
}

.apply-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(30,136,229,0.3);
}

/* SAVE - CÙNG STYLE KHÁC MÀU */
.save-btn{
    flex:1;
    height:44px;

    background:#fff;
    color:#0a66c2;

    border:1px solid #0a66c2;
    border-radius:6px;

    font-weight:600;
    cursor:pointer;

    transition:0.25s;
}

/* HOVER */
.save-btn:hover{
    background:#0a66c2;
    color:#fff;
}

/* ACTIVE */
.save-btn.active{
    background:#ff4d4f;
    border-color:#ff4d4f;
    color:#fff;
}

/* MOBILE */
@media(max-width:768px){

    .job-detail-layout{
        grid-template-columns:1fr;
    }

    .job-main{
        padding:20px;
    }

    .job-sidebar{
        padding:15px;
    }

}