/* Job detail, "Khối màu" — the 'new' arm of the jobdetail experiment.
 * Prefixed .jd3- because .jd2- belongs to the previous redesign of this page.
 * House rules: radius 0, no shadow, no gradient, no translucency.
 */
body,.jd3-hero,.jd3-body{
  --k2-ink:#0a0a0a; --k2-paper:#fff; --k2-dim:#4b5563; --k2-lab:#9aa1ab; --k2-hair:#e6e6e6;
  --k2-blue:#1a3aff; --k2-orange:#e8501e; --k2-green:#0f7a4a;
  --k2-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --k2-pad:clamp(20px,5vw,72px);
}
.jd3-hero,.jd3-body{font-family:var(--k2-font)}
.jd3-hero *,.jd3-body *{box-sizing:border-box}
.jd3-in{max-width:1100px;margin:0 auto;padding-left:var(--k2-pad);padding-right:var(--k2-pad)}

.jd3-hero{background:var(--k2-ink);color:#fff;padding:clamp(28px,4.2vw,58px) 0}
.jd3-back{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.8);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.jd3-h1{font-size:clamp(24px,3.4vw,44px);line-height:1.1;letter-spacing:-.042em;font-weight:800;
  margin:14px 0 0;color:#fff;max-width:24ch}
.jd3-co{font-size:clamp(15px,1.7vw,19px);font-weight:700;color:#fff;margin:10px 0 0}
.jd3-meta{font-size:13.5px;color:rgba(255,255,255,.7);margin:8px 0 0}
.jd3-pay{font-size:15px;font-weight:800;color:var(--k2-green);margin:8px 0 0;
  background:#fff;display:inline-block;padding:5px 11px}
.jd3-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.jd3-note{font-size:12.5px;color:rgba(255,255,255,.65);margin:12px 0 0}
.jd3-applied{font-size:14px;font-weight:800;color:var(--k2-green);align-self:center}

.jd3-body{background:var(--k2-paper);padding:clamp(28px,4vw,52px) 0 clamp(44px,6vw,80px)}
.jd3-cols{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,50px)}
@media (min-width:1040px){ .jd3-cols{grid-template-columns:minmax(0,1fr) 290px} }
.jd3-main{min-width:0}
.jd3-block{margin-bottom:32px}
.jd3-block-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--k2-lab);padding-bottom:9px;border-bottom:2px solid var(--k2-ink);margin-bottom:16px}

.jd3-skills{display:flex;flex-wrap:wrap;gap:7px}
.jd3-skill{font-size:12.5px;font-weight:700;border:1px solid var(--k2-hair);padding:6px 11px;
  color:var(--k2-dim)}

/* The description is arbitrary formatted HTML from the JD formatter, so it gets
   ordinary reading typography rather than the flat chrome treatment. */
.jd3-desc{font-size:15px;line-height:1.75;color:var(--k2-ink);max-width:70ch}
.jd3-desc p{margin:0 0 1em}
.jd3-desc ul,.jd3-desc ol{margin:0 0 1em;padding-left:1.35em}
.jd3-desc li{margin-bottom:.4em}
.jd3-desc h2,.jd3-desc h3,.jd3-desc h4{font-weight:800;letter-spacing:-.028em;line-height:1.25;
  margin:1.5em 0 .5em;color:var(--k2-ink)}
.jd3-desc h2{font-size:20px} .jd3-desc h3{font-size:17px} .jd3-desc h4{font-size:15.5px}
.jd3-desc strong{font-weight:800}
.jd3-desc a{color:var(--k2-blue);text-decoration:underline;text-underline-offset:3px}
.jd3-endcta{margin-top:30px;padding-top:24px;border-top:2px solid var(--k2-ink)}

.jd3-side{min-width:0;display:grid;gap:18px;align-content:start}
@media (min-width:1040px){ .jd3-side{position:sticky;top:64px} }
.jd3-panel{border:2px solid var(--k2-ink);padding:16px}
.jd3-panel-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--k2-lab);margin-bottom:10px}
.jd3-panel-p{font-size:13px;line-height:1.55;color:var(--k2-dim);margin:0 0 12px}
.jd3-panel-cta{background:var(--k2-ink);border-color:var(--k2-ink)}
.jd3-panel-cta .jd3-panel-h{color:rgba(255,255,255,.5)}
.jd3-panel-cta .jd3-panel-p{color:rgba(255,255,255,.78)}
.jd3-panel-cta .jd3-btn{background:#fff;color:var(--k2-ink);border-color:#fff}
.jd3-mini{display:block;padding:10px 0;border-top:1px solid var(--k2-hair);text-decoration:none;
  color:var(--k2-ink)}
.jd3-mini:first-of-type{border-top:0;padding-top:0}
.jd3-mini b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.jd3-mini span{display:block;font-size:11.5px;color:var(--k2-lab);margin-top:3px}
.jd3-mini:hover b{text-decoration:underline;text-underline-offset:3px}

.jd3-btn{display:inline-block;padding:14px 26px;font-weight:800;font-size:14.5px;
  text-decoration:none;border:2px solid var(--k2-ink);background:var(--k2-ink);color:#fff;
  border-radius:0;font-family:inherit;cursor:pointer;line-height:1.2}
.jd3-btn:hover{background:#252525;border-color:#252525}
.jd3-btn-sm{padding:10px 17px;font-size:12.5px}
.jd3-btn-line{background:transparent;color:var(--k2-ink)}
.jd3-btn-line:hover{background:var(--k2-ink);color:#fff}
.jd3-hero .jd3-btn-on{background:#fff;color:var(--k2-ink);border-color:#fff}
.jd3-hero .jd3-btn-on:hover{background:#f0f0f0;border-color:#f0f0f0}
.jd3-hero .jd3-btn-ghost{background:transparent;color:#fff;border-color:#fff}
.jd3-hero .jd3-btn-ghost:hover{background:#fff;color:var(--k2-ink)}

/* ── defensive: design-system.css owns bare a / a:hover ── */
.jd3-page a.jd3-mini,.jd3-page a.jd3-mini:hover{color:var(--k2-ink);text-decoration:none}
.jd3-page a.jd3-btn,.jd3-page a.jd3-btn:hover{color:#fff;text-decoration:none}
.jd3-page a.jd3-btn-line{color:var(--k2-ink)}
.jd3-page a.jd3-btn-line:hover{color:#fff}
.jd3-page .jd3-panel-cta a.jd3-btn{color:var(--k2-ink)}
.jd3-page .jd3-hero a.jd3-btn-on{color:var(--k2-ink)}
.jd3-page .jd3-hero a.jd3-btn-ghost{color:#fff}
.jd3-page .jd3-hero a.jd3-btn-ghost:hover{color:var(--k2-ink)}
.jd3-page a.jd3-back,.jd3-page a.jd3-back:hover{color:rgba(255,255,255,.8)}
.jd3-page .jd3-h1,.jd3-page .jd3-co{color:#fff}
.jd3-page .jd3-panel-h,.jd3-page .jd3-mini span{color:var(--k2-lab)}
.jd3-page .jd3-panel-p{color:var(--k2-dim)}
.jd3-page .jd3-panel-cta .jd3-panel-p{color:rgba(255,255,255,.78)}