/* =========================================================
   Trang CHI TIẾT tuyển dụng  (/tuyen-dung/{slug})
   Tự nạp qua AppHelper::autoload() theo controller/action.
   ========================================================= */

/* Breadcrumb */
.breadcrumb-bar {
    background: #F8F9FA; border-bottom: 1px solid #EAECEF;
    padding: 14px 0; margin-top: 74px;
    font-size: 13px; color: #9EA8B5;
}
.breadcrumb-bar a { color: #9EA8B5; }
.breadcrumb-bar a:hover { color: #39B683; text-decoration: none; }
.breadcrumb-bar span { color: #47535D; font-weight: 600; }
.breadcrumb-bar .sep { margin: 0 8px; }

/* Header vị trí */
.job-header { padding: 36px 0 28px; background: #fff; border-bottom: 1px solid #F0F2F5; }
.job-header .job-title-main { font-size: 28px; font-weight: 700; color: #1F2937; margin: 0 0 12px; }
.job-tag-hot {
    display: inline-block; background: #e8faf3; color: #39B683;
    font-size: 12px; font-weight: 700; padding: 3px 10px;
    border-radius: 8px; margin-left: 10px; vertical-align: middle;
}
.perk-badge {
    display: inline-block; background: #e8faf3; color: #39B683;
    font-size: 12px; font-weight: 700; padding: 3px 10px;
    border-radius: 8px; margin-left: 8px; vertical-align: middle;
}
.job-header-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 6px; }
.job-header-meta .meta-item { font-size: 13px; color: #6B7280; display: flex; align-items: center; gap: 5px; }
.job-header-meta .meta-item .ico { color: #39B683; font-size: 15px; }

/* Bố cục chính */
#job-content { padding: 36px 0 60px; }

/* Sidebar */
.job-sidebar-card {
    background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08);
    padding: 24px; position: sticky; top: 90px;
}
.job-sidebar-card .info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid #F3F4F6; font-size: 14px;
}
.job-sidebar-card .info-row:last-of-type { border-bottom: none; margin-bottom: 20px; }
.job-sidebar-card .info-label { color: #9EA8B5; }
.job-sidebar-card .info-value { font-weight: 600; color: #1F2937; text-align: right; max-width: 60%; }
.job-sidebar-card .info-value.green { color: #39B683; }

.btn-apply {
    display: block; width: 100%; text-align: center;
    background: #39B683; color: #fff; font-size: 15px; font-weight: 700;
    padding: 13px 20px; border-radius: 30px;
    transition: background .2s, transform .2s;
}
.btn-apply:hover { background: #2d9e70; color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn-apply-outline {
    display: block; width: 100%; text-align: center; margin-top: 10px;
    border: 1.5px solid #39B683; color: #39B683; font-size: 14px; font-weight: 600;
    padding: 11px 20px; border-radius: 30px; transition: all .2s;
}
.btn-apply-outline:hover { background: #e8faf3; color: #2d9e70; text-decoration: none; }

/* Các section nội dung JD */
.job-section { margin-bottom: 36px; }
.job-section h3 {
    font-size: 18px; font-weight: 700; color: #1F2937;
    padding-bottom: 12px; border-bottom: 2px solid #39B683;
    margin-bottom: 20px; display: inline-block;
}
.job-section .job-intro {
    font-size: 14px; color: #4B5563; line-height: 1.8;
    margin-bottom: 16px; padding: 16px 20px;
    background: #F8FFFE; border-left: 3px solid #39B683; border-radius: 0 8px 8px 0;
}
.job-section ul { list-style: none; padding: 0; margin: 0; }
.job-section ul li {
    position: relative; padding: 8px 0 8px 26px;
    font-size: 14px; color: #4B5563; line-height: 1.75;
}
.job-section ul li::before {
    content: '';
    position: absolute; left: 0; top: 13px;
    width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2339B683'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Nhãn nhóm yêu cầu (Kỹ năng chuyên môn / Ưu tiên / Lợi thế...) */
.req-label {
    font-size: 13px; font-weight: 700; color: #39B683;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 20px 0 6px; display: block;
}
.req-label:first-of-type { margin-top: 0; }

/* Địa điểm — một dòng */
.job-section .address-item { padding: 6px 0; font-size: 14px; color: #4B5563; }
.job-section .address-item::before { display: none; }
.job-section .address-item strong { color: #1F2937; }

/* Địa điểm — nhiều nơi */
.address-list { list-style: none; padding: 0; margin: 0; }
.address-list li {
    padding: 8px 0 8px 22px; font-size: 14px; color: #4B5563;
    border-bottom: 1px solid #F3F4F6; position: relative;
}
.address-list li:last-child { border-bottom: none; }
.address-list li::before { content: '📍'; position: absolute; left: 0; top: 8px; font-size: 13px; }

/* Hộp thời gian làm việc */
.work-time-box {
    background: #F8F9FA; border-radius: 8px; padding: 14px 20px;
    font-size: 14px; color: #4B5563; margin-top: 10px;
}
.work-time-box strong { color: #1F2937; }

/* Mobile: bỏ sticky sidebar, thêm khoảng cách */
@media (max-width: 991px) {
    .job-sidebar-card { position: static; margin-top: 30px; }
}