/* Job detail page (/tuyen-dung/{slug}); cards, modal and rich-text rules come from pages/jobs.css. */
.jd-main { padding: 48px 0 70px; background: var(--page-alt); }
.jd-container { display: flex; flex-direction: column; gap: 20px; }
.jd-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.jd-crumb a { color: inherit; }
.jd-crumb a:hover { color: var(--primary); }
.jd-main h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.jd-flash { font-size: 15px; }
.jd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.jd-body, .jd-side { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.jd-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jd-body h2 { font-size: 20px; font-weight: 700; color: #111; }
.jd-summary { font-size: 17px; line-height: 1.6; color: var(--text); }
.jd-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.jd-meta { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.jd-meta > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.jd-meta dt { font-size: 13px; color: var(--muted); }
.jd-meta dd { margin: 0; font-size: 16px; font-weight: 700; color: #111; overflow-wrap: anywhere; }
.jd-apply { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.jd-apply:hover { color: #fff; }
.jd-back { align-self: center; font-size: 14px; font-weight: 600; color: var(--accent-text); text-decoration: underline; }

@media (max-width: 900px) {
    .jd-grid { grid-template-columns: 1fr; }
    .jd-side { position: static; order: -1; }
    .jd-body, .jd-side { padding: 20px; }
}