/* ============================================================
   PACELAND — Recruitment Design System (careers.css)
   Chỉ nạp trên /tuyen-dung.html và /tuyen-dung/*.html (body.careers).
   Tinh thần: Insider · Authoritative · Restrained — trắng / đen / đỏ,
   typography mạnh, khoảng trắng là nội dung, motion dứt khoát.
   Mọi class có tiền tố cr- để không ảnh hưởng phần còn lại của site.
   ============================================================ */

.cr {
  --cr-ink: #0E0C0A;
  --cr-ink-2: #34302B;
  --cr-muted: #5F5850;
  --cr-line: rgba(14, 12, 10, 0.12);
  --cr-line-2: rgba(14, 12, 10, 0.22);
  --cr-soft: #F4F2EE;
  --cr-red: var(--red, #C70018);
  --cr-red-2: #A30014;
  --cr-red-on-dark: #FF5A6B;
  --cr-err: #B00016;
  --cr-dark: #0E0C0A;
  --cr-on-dark: #F4F1EC;
  --cr-on-dark-2: rgba(244, 241, 236, 0.74);
  --cr-on-dark-line: rgba(244, 241, 236, 0.16);
  background: #fff;
  color: var(--cr-ink-2);
  font-family: var(--body);
}
.cr h1, .cr h2, .cr h3 { font-family: var(--head); color: var(--cr-ink); }
.cr :where(a) { color: inherit; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr [id] { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }

/* ---------- Section rhythm ---------- */
.cr-sec { padding-block: clamp(72px, 9vw, 128px); }
.cr-sec + .cr-sec:not(.cr-dark):not(.cr-soft) { border-top: 1px solid var(--cr-line); }
.cr-soft { background: var(--cr-soft); }
.cr-dark { background: var(--cr-dark); color: var(--cr-on-dark-2); }
.cr-dark h2, .cr-dark h3 { color: var(--cr-on-dark); }
.cr-narrow { max-width: 900px; }

.cr-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; font: 700 0.74rem/1.2 var(--head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cr-red); }
.cr-eyebrow::before { content: ""; width: 9px; height: 9px; background: currentColor; flex: none; }
.cr-dark .cr-eyebrow { color: var(--cr-red-on-dark); }

.cr-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.cr-head h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.028em; }
.cr-head > p:not(.cr-eyebrow) { margin-top: 1rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; max-width: 58ch; }
.cr-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; max-width: none; }
.cr-subhead { font-size: 1.05rem; margin: 2rem 0 0.9rem; }

/* ---------- Buttons & links ---------- */
.cr-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 52px; padding: 0.95rem 1.6rem; border: 1.5px solid transparent; border-radius: 2px; font: 700 0.95rem/1.1 var(--head); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.18s var(--ease-snap), color 0.18s, border-color 0.18s; }
.cr-btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.18s var(--ease-snap); }
.cr-btn:hover svg { transform: translateX(3px); }
.cr-btn--red { background: var(--cr-red); color: #fff; }
.cr-btn--red:hover { background: var(--cr-red-2); }
.cr-btn--line { border-color: var(--cr-ink); color: var(--cr-ink); background: transparent; }
.cr-btn--line:hover { background: var(--cr-ink); color: #fff; }
.cr-dark .cr-btn--line { border-color: rgba(244, 241, 236, 0.45); color: var(--cr-on-dark); }
.cr-dark .cr-btn--line:hover { background: var(--cr-on-dark); color: var(--cr-ink); }
.cr-btn--block { width: 100%; }
.cr-btn[aria-busy="true"] { opacity: 0.8; cursor: progress; }
.cr-btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cr-spin 0.7s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

.cr-textlink { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.6rem; font: 700 0.95rem var(--head); color: var(--cr-ink); text-decoration: none; border-bottom: 2px solid var(--cr-red); padding-bottom: 3px; }
.cr-textlink svg { width: 16px; height: 16px; transition: transform 0.18s var(--ease-snap); }
.cr-textlink:hover svg { transform: translateX(3px); }

.cr :focus-visible { outline: 3px solid var(--cr-ink); outline-offset: 3px; }
.cr-dark :focus-visible { outline-color: var(--cr-on-dark); }

/* ---------- Hero ---------- */
.cr-hero { position: relative; padding-top: calc(var(--header-h) + clamp(28px, 6vw, 88px)); padding-bottom: clamp(44px, 6vw, 72px); background: #fff; }
.cr-crumb { margin-bottom: clamp(28px, 4vw, 48px); }
.cr-h1 { display: flex; align-items: baseline; gap: 0.6rem; max-width: 52ch; margin: 0 0 clamp(0.9rem, 1.6vw, 1.3rem); font: 700 clamp(0.98rem, 1.3vw, 1.1rem)/1.45 var(--head); letter-spacing: 0; text-wrap: balance; }
.cr-h1::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--cr-red); }
.cr-hero__title { margin: 0; font-family: var(--head); font-size: clamp(2.5rem, 7.4vw, 6.3rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; max-width: 12.5ch; color: var(--cr-ink); }
.cr-hero__title span { display: block; color: var(--cr-red); }
.cr-hero__sub { margin-top: clamp(1.2rem, 2vw, 1.8rem); max-width: 54ch; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.6; color: var(--cr-ink-2); }

.cr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--cr-line-2); }
.cr-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.3rem 1.2rem 0 0; }
.cr-stat + .cr-stat { padding-left: 1.2rem; border-left: 1px solid var(--cr-line); }
.cr-stat dt { order: 2; font: 600 0.92rem/1.4 var(--head); color: var(--cr-ink); }
.cr-stat__v { order: 1; font: 800 clamp(2rem, 3.7vw, 3.1rem)/1 var(--head); letter-spacing: -0.035em; color: var(--cr-ink); }
.cr-stat__n { order: 3; font-size: 0.85rem; color: var(--cr-muted); }

/* ---------- Story: 5 bước ---------- */
.cr-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cr-step { position: relative; padding: 1.6rem 1.4rem 0 0; border-top: 2px solid var(--cr-line); }
.cr-step::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--cr-red); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease-out); }
.cr-step.is-in::before { transform: scaleX(1); }
.cr-step__kicker { font: 700 0.72rem/1 var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-muted); }
.cr-step h3 { margin: 0.85rem 0 0.5rem; font-size: 1.22rem; letter-spacing: -0.01em; line-height: 1.25; }
.cr-step p { font-size: 0.96rem; line-height: 1.6; }

/* ---------- Ecosystem ---------- */
.cr-mods { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cr-on-dark-line); border-left: 1px solid var(--cr-on-dark-line); }
.cr-mods--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-mods--1 { grid-template-columns: minmax(0, 1fr); }
.cr-mod { display: flex; flex-direction: column; gap: 0.6rem; min-height: 190px; padding: clamp(1.4rem, 2.4vw, 2rem); border-right: 1px solid var(--cr-on-dark-line); border-bottom: 1px solid var(--cr-on-dark-line); }
.cr-mod h3 { font-size: 1.16rem; }
.cr-mod p { font-size: 0.95rem; line-height: 1.6; }
.cr-mod a { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font: 600 0.9rem var(--head); color: var(--cr-on-dark); text-decoration: underline; text-decoration-color: rgba(244, 241, 236, 0.35); text-underline-offset: 5px; }
.cr-mod a svg { width: 15px; height: 15px; }
.cr-mod a:hover { text-decoration-color: var(--cr-red-on-dark); }
.cr-rail { list-style: none; display: flex; align-items: stretch; margin-top: clamp(36px, 5vw, 56px); }
.cr-rail li { position: relative; flex: 1; display: grid; place-items: center; padding: 0.95rem 0.7rem; text-align: center; font: 700 0.92rem/1.25 var(--head); color: var(--cr-on-dark); border: 1px solid var(--cr-on-dark-line); }
.cr-rail li + li { margin-left: 30px; }
.cr-rail li + li::before { content: "→"; position: absolute; left: -24px; top: 50%; transform: translateY(-50%); color: var(--cr-on-dark-2); font-weight: 400; }
.cr-rail li.is-agent { background: var(--cr-red); border-color: var(--cr-red); color: #fff; }

/* ---------- Career path ---------- */
.cr-track { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--cr-ink); }
.cr-stage { position: relative; padding: 1.8rem 1.6rem 0 0; }
.cr-stage + .cr-stage { padding-left: 1.6rem; border-left: 1px solid var(--cr-line); }
.cr-stage::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; background: #fff; border: 2px solid var(--cr-ink); border-radius: 50%; }
.cr-stage + .cr-stage::before { left: 1.6rem; }
.cr-stage.is-current::before { background: var(--cr-red); border-color: var(--cr-red); }
.cr-stage__idx { font: 700 0.76rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-muted); }
.cr-stage__idx b { color: var(--cr-red); }
.cr-stage h3 { margin: 0.7rem 0 1rem; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -0.02em; }
.cr-stage ul { list-style: none; display: grid; gap: 0.55rem; }
.cr-stage li { position: relative; padding-left: 1rem; font-size: 0.97rem; line-height: 1.55; }
.cr-stage li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--cr-red); }
.cr-stage > a { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.2rem; font: 700 0.92rem var(--head); color: var(--cr-ink); text-decoration: none; border-bottom: 2px solid var(--cr-red); padding-bottom: 2px; }
.cr-stage > a svg { width: 15px; height: 15px; }

/* ---------- Personal brand ---------- */
.cr-brand { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.cr-brand h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.025em; }
.cr-brand__text { margin-top: 1rem; font-size: 1.05rem; line-height: 1.7; max-width: 56ch; }
.cr-brand__links { display: flex; flex-wrap: wrap; gap: 0 1.8rem; }
.cr-idcard-wrap { margin: 0; }
.cr-idcard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; aspect-ratio: 1.6 / 1; padding: clamp(1.2rem, 2.4vw, 1.7rem); border-radius: 6px; background: var(--cr-ink); color: var(--cr-on-dark); }
.cr-idcard::after { content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 5px; background: var(--cr-red); }
.cr-idcard__top { display: flex; justify-content: space-between; gap: 1rem; font: 700 0.7rem/1.2 var(--head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-on-dark-2); }
.cr-idcard__name { font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.1 var(--head); color: #fff; }
.cr-idcard__code { margin-top: 0.4rem; font: 700 1.05rem ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.1em; color: var(--cr-red-on-dark); }
.cr-idcard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--cr-on-dark-2); }
.cr-idcard__ok { font-weight: 700; color: #8FE3A2; }
.cr-idcard-wrap figcaption { margin-top: 0.7rem; font-size: 0.82rem; color: var(--cr-muted); }

/* ---------- Split layouts, posters, lists ---------- */
.cr-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cr-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-poster { margin: 0; }
.cr-poster img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--cr-soft); }
.cr-poster--sticky { position: sticky; top: calc(var(--header-h) + 24px); }

.cr-bullets { list-style: none; display: grid; gap: 0.9rem 1.8rem; margin-top: 2rem; }
.cr-bullets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-bullets li, .cr-checks li { position: relative; padding-left: 1.15rem; font-size: 0.98rem; line-height: 1.55; color: var(--cr-ink-2); }
.cr-bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--cr-red); }
.cr-checks { list-style: none; display: grid; gap: 0.7rem; }
.cr-checks li { padding-left: 1.6rem; }
.cr-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--cr-red); }
.cr-checks--lg li { font-size: 1.05rem; }

.cr-comp { width: 100%; border-collapse: collapse; border-top: 2px solid var(--cr-ink); }
.cr-comp thead th { padding: 0.85rem 1rem 0.85rem 0; font: 700 0.74rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-muted); text-align: left; border-bottom: 1px solid var(--cr-line); }
.cr-comp tbody th, .cr-comp td { padding: 1rem 1rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cr-line); }
.cr-comp tbody th { width: 40%; font: 700 0.98rem/1.4 var(--head); color: var(--cr-ink); }
.cr-comp tbody th a { text-decoration: underline; text-decoration-color: var(--cr-line-2); text-underline-offset: 4px; }
.cr-comp tbody th a:hover { text-decoration-color: var(--cr-red); }
.cr-comp td { font-size: 0.97rem; line-height: 1.5; }

/* ---------- Jobs ---------- */
.cr-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cr-filter button { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.55rem 1.05rem; border: 1px solid var(--cr-line-2); border-radius: 999px; background: #fff; color: var(--cr-ink); font: 600 0.92rem var(--head); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.cr-filter button span { font-size: 0.78rem; color: var(--cr-muted); }
.cr-filter button:hover { border-color: var(--cr-ink); }
.cr-filter button[aria-pressed="true"] { background: var(--cr-ink); border-color: var(--cr-ink); color: #fff; }
.cr-filter button[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.7); }
.cr-jobs__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cr-joblist { list-style: none; border-top: 2px solid var(--cr-ink); }
.cr-job { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 1.4rem; align-items: start; padding: 1.6rem 0.6rem; border-bottom: 1px solid var(--cr-line); transition: background-color 0.15s; }
.cr-job[hidden] { display: none; }
.cr-job:hover { background: rgba(255, 255, 255, 0.7); }
.cr-soft .cr-job:hover { background: #fff; }
.cr-job__link { text-decoration: none; }
.cr-job__link::after { content: ""; position: absolute; inset: 0; }
.cr-job__link:focus-visible { outline: none; }
.cr-job__link:focus-visible::after { outline: 3px solid var(--cr-ink); outline-offset: -3px; }
.cr-job__count { font: 800 clamp(2.2rem, 3.4vw, 3rem)/0.9 var(--head); letter-spacing: -0.04em; color: var(--cr-red); }
.cr-job__count small { display: block; margin-top: 0.45rem; font: 600 0.7rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cr-muted); }
.cr-job__title { font-size: clamp(1.18rem, 1.8vw, 1.45rem); letter-spacing: -0.015em; line-height: 1.25; }
.cr-job__meta { margin-top: 0.4rem; font-size: 0.87rem; color: var(--cr-muted); }
.cr-job__vp { margin-top: 0.6rem; max-width: 56ch; font-size: 0.97rem; line-height: 1.55; color: var(--cr-ink-2); }
.cr-job__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; min-width: 190px; text-align: right; }
.cr-job__pay { max-width: 230px; font: 700 0.92rem/1.4 var(--head); color: var(--cr-ink); }
.cr-job__cta { display: inline-flex; align-items: center; gap: 0.4rem; font: 700 0.92rem var(--head); color: var(--cr-red); }
.cr-job__cta svg { width: 16px; height: 16px; transition: transform 0.18s var(--ease-snap); }
.cr-job:hover .cr-job__cta svg { transform: translateX(3px); }
.cr-joblist--compact .cr-job { padding: 1.2rem 0.6rem; }
.cr-empty { margin-top: 1.4rem; font-size: 0.98rem; }
.cr-empty a { color: var(--cr-red); font-weight: 700; }

/* ---------- Ban lãnh đạo ---------- */
.cr-leaders__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); column-gap: 2rem; border-top: 2px solid var(--cr-ink); }
.cr-leaders__list li { border-bottom: 1px solid var(--cr-line); }
.cr-leaders__list a { display: flex; align-items: center; gap: 1rem; min-height: 88px; padding: 1rem 0; text-decoration: none; }
.cr-mono { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cr-ink); color: #fff; font: 800 0.95rem/1 var(--head); letter-spacing: 0.04em; }
.cr-leader { display: grid; gap: 0.2rem; }
.cr-leader b { font: 700 1.02rem/1.3 var(--head); color: var(--cr-ink); }
.cr-leader > span { font-size: 0.9rem; line-height: 1.45; color: var(--cr-muted); }
.cr-leader > .cr-leader__code { font: 700 0.8rem ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.08em; color: var(--cr-red); }
.cr-leaders__list a:hover b { text-decoration: underline; text-decoration-color: var(--cr-red); text-underline-offset: 4px; }

/* ---------- CTA giữa trang ---------- */
.cr-mid { padding-block: clamp(36px, 5vw, 56px); background: var(--cr-red); color: #fff; }
.cr-mid__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.4rem; }
.cr-mid__t { font: 800 clamp(1.5rem, 2.8vw, 2.2rem)/1.12 var(--head); letter-spacing: -0.02em; color: #fff; }
.cr-mid__s { margin-top: 0.5rem; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); }
.cr-mid__a { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cr-mid .cr-btn--red { background: #fff; color: var(--cr-red); }
.cr-mid .cr-btn--red:hover { background: var(--cr-ink); color: #fff; }
.cr-mid .cr-btn--line { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.cr-mid .cr-btn--line:hover { background: #fff; color: var(--cr-red); }
.cr-mid :focus-visible { outline-color: #fff; }

/* ---------- Products ---------- */
.cr-prodlist { list-style: none; border-top: 1px solid var(--cr-line-2); }
.cr-prodlist a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--cr-line); text-decoration: none; }
.cr-prodlist img { width: 96px; height: 64px; object-fit: cover; border-radius: 2px; background: var(--cr-soft); }
.cr-prodlist b { display: block; font: 700 1.02rem/1.3 var(--head); color: var(--cr-ink); }
.cr-prodlist a > span > span { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--cr-muted); }
.cr-prodlist svg { width: 18px; height: 18px; color: var(--cr-red); transition: transform 0.18s var(--ease-snap); }
.cr-prodlist a:hover svg { transform: translateX(3px); }

/* ---------- Process ---------- */
.cr-proc { list-style: none; counter-reset: cr-p; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cr-line-2); }
.cr-proc li { counter-increment: cr-p; padding: 1.5rem 1.4rem 0 0; }
.cr-proc li::before { content: counter(cr-p, decimal-leading-zero); font: 800 0.8rem var(--head); letter-spacing: 0.14em; color: var(--cr-red); }
.cr-proc h3 { margin: 0.7rem 0 0.45rem; font-size: 1.14rem; }
.cr-proc p { font-size: 0.95rem; line-height: 1.6; }

/* ---------- Job page blocks ---------- */
.cr-hero--job .cr-hero__title { font-size: clamp(2.3rem, 5.4vw, 4.6rem); max-width: 15ch; }
.cr-jobhero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--cr-line-2); }
.cr-facts div { padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--cr-line); }
.cr-facts dt { font: 700 0.74rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-muted); }
.cr-facts dd { margin-top: 0.35rem; font: 700 1.02rem/1.4 var(--head); color: var(--cr-ink); }
.cr-posted { margin-top: 1rem; font-size: 0.86rem; color: var(--cr-muted); }

.cr-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cr-line-2); }
.cr-points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-points--1 { grid-template-columns: minmax(0, 1fr); }
.cr-points li { padding: 1.5rem 1.5rem 0 0; }
.cr-points li + li { padding-left: 1.5rem; border-left: 1px solid var(--cr-line); }
.cr-points h3 { font-size: 1.14rem; margin-bottom: 0.5rem; }
.cr-points p { font-size: 0.97rem; line-height: 1.6; }

.cr-duties { list-style: none; counter-reset: cr-d; border-top: 2px solid var(--cr-ink); }
.cr-duties li { counter-increment: cr-d; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--cr-line); font-size: 1rem; line-height: 1.55; color: var(--cr-ink); }
.cr-duties li::before { content: counter(cr-d, decimal-leading-zero); padding-top: 0.15rem; font: 800 0.82rem var(--head); letter-spacing: 0.1em; color: var(--cr-red); }
/* Ô nội dung PHẢI là một phần tử bọc duy nhất. Để chữ trần cạnh <strong> thì lưới
   coi mỗi thứ là một ô, phần chữ rơi xuống hàng mới trong cột số rộng 44px. */
.cr-duties li > div { min-width: 0; }
.cr-profiles { display: grid; gap: 1rem; }
.cr-profile { padding-top: 1.1rem; border-top: 2px solid var(--cr-ink); }
.cr-profile + .cr-profile { margin-top: 0.6rem; }
.cr-profile h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.cr-profile p { font-size: 0.96rem; line-height: 1.6; }
.cr-work .cr-head, .cr-env .cr-head { margin-bottom: 1.6rem; }
.cr-work .cr-head h2, .cr-env .cr-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* Gioi han be ngang moi the: vi tri chi co mot muc thu nhap thi the khong gian het trang */
.cr-compcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 320px)); justify-content: start; border-top: 2px solid var(--cr-ink); }
.cr-compcards div { padding: 1.4rem 1.4rem 0 0; }
.cr-compcards div + div { padding-left: 1.4rem; border-left: 1px solid var(--cr-line); }
.cr-compcards dt { font: 700 0.74rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-muted); }
.cr-compcards .v { margin-top: 0.5rem; font: 800 clamp(1.5rem, 2.8vw, 2.2rem)/1.1 var(--head); letter-spacing: -0.025em; color: var(--cr-ink); }
.cr-compcards .n { margin-top: 0.35rem; font-size: 0.9rem; color: var(--cr-muted); }

/* ---------- FAQ ---------- */
.cr-faqlist { border-top: 2px solid var(--cr-ink); }
.cr-qa { border-bottom: 1px solid var(--cr-line); }
.cr-qa summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; padding: 1.25rem 0; cursor: pointer; list-style: none; }
.cr-qa summary::-webkit-details-marker { display: none; }
.cr-qa summary h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.cr-qa summary::after { content: "+"; flex: none; font: 400 1.7rem/1 var(--head); color: var(--cr-red); transition: transform 0.18s var(--ease-snap); }
.cr-qa[open] summary::after { transform: rotate(45deg); }
.cr-qa > div { padding: 0 2.4rem 1.35rem 0; }
.cr-qa p { max-width: 70ch; font-size: 1rem; line-height: 1.7; }

/* ---------- Apply + form ---------- */
.cr-apply__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cr-apply h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.032em; }
.cr-apply__sub { margin-top: 1.1rem; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--cr-on-dark); }
.cr-apply__hint { margin-top: 1rem; font-size: 0.95rem; }
.cr-apply__alt { list-style: none; display: grid; gap: 0.7rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--cr-on-dark-line); }
.cr-apply__alt li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0.8rem; font-size: 0.97rem; }
.cr-apply__alt span { font: 700 0.74rem/1.9 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-on-dark-2); }
.cr-apply__alt a { color: var(--cr-on-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(244, 241, 236, 0.35); text-underline-offset: 5px; overflow-wrap: anywhere; }
.cr-apply__panel { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 4px; background: #fff; color: var(--cr-ink-2); }
.cr-apply__panel :focus-visible { outline-color: var(--cr-ink); }

.cr-form { display: grid; gap: 1.05rem; }
.cr-field label { display: block; margin-bottom: 0.45rem; font: 700 0.9rem var(--head); color: var(--cr-ink); }
.cr-field .req { color: var(--cr-red); }
.cr-field .cr-opt { font-weight: 500; color: var(--cr-muted); }
.cr-field input, .cr-field select, .cr-field textarea { display: block; width: 100%; min-height: 52px; padding: 0.8rem 0.95rem; border: 1.5px solid #8A847C; border-radius: 2px; background: #fff; color: var(--cr-ink); font: 400 1rem/1.4 var(--body); -webkit-appearance: none; appearance: none; transition: border-color 0.15s, box-shadow 0.15s; }
.cr-field select { padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0C0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; }
.cr-field textarea { min-height: 110px; resize: vertical; }
.cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus { outline: none; border-color: var(--cr-ink); box-shadow: 0 0 0 3px rgba(14, 12, 10, 0.14); }
.cr-field [aria-invalid="true"] { border-color: var(--cr-err); }
.cr-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(176, 0, 22, 0.16); }
.cr-err { margin-top: 0.4rem; font-size: 0.87rem; font-weight: 600; color: var(--cr-err); }
.cr-more { border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); }
.cr-more summary { position: relative; display: block; min-height: 48px; padding: 0.8rem 0 0.8rem 1.35rem; cursor: pointer; list-style: none; font: 700 0.92rem/1.45 var(--head); color: var(--cr-ink); }
.cr-more summary::-webkit-details-marker { display: none; }
.cr-more summary::before { content: "+"; position: absolute; left: 0; top: 0.72rem; font: 400 1.3rem/1 var(--head); color: var(--cr-red); }
.cr-more[open] summary::before { content: "–"; }
.cr-more summary span { font-weight: 500; color: var(--cr-muted); }
.cr-more__body { display: grid; gap: 1.05rem; padding: 0.4rem 0 1.2rem; }
.cr-hp { display: none !important; }
.cr-form__note { font-size: 0.84rem; line-height: 1.5; color: var(--cr-muted); }
.cr-form__status { padding: 0.8rem 1rem; border: 1px solid rgba(176, 0, 22, 0.35); border-radius: 2px; background: rgba(176, 0, 22, 0.05); font-size: 0.93rem; font-weight: 600; line-height: 1.5; color: var(--cr-err); }
.cr-done__title { margin: 0.2rem 0 0.7rem; font: 800 clamp(1.5rem, 2.8vw, 2rem)/1.15 var(--head); letter-spacing: -0.02em; color: var(--cr-ink); }
.cr-done > p { font-size: 1rem; line-height: 1.65; }
.cr-done__id { margin-top: 0.9rem; font-size: 0.92rem; color: var(--cr-muted); }
.cr-done__id b { color: var(--cr-ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.04em; }
.cr-done__next { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.cr-done__next .cr-btn { min-height: 46px; padding: 0.75rem 1.1rem; font-size: 0.88rem; }
.cr-done:focus { outline: none; }

/* ---------- Share + sticky ---------- */
.cr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: clamp(40px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--cr-line); }
.cr-share__label { margin-right: 0.4rem; font: 700 0.78rem var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-muted); }
.cr-share a, .cr-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--cr-line-2); border-radius: 999px; background: #fff; color: var(--cr-ink); font: 600 0.9rem var(--head); text-decoration: none; cursor: pointer; }
.cr-share a:hover, .cr-share button:hover { border-color: var(--cr-ink); }
.cr-share [hidden] { display: none; }

.cr-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: 0.6rem; padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--cr-line); background: rgba(255, 255, 255, 0.97); transform: translateY(110%); transition: transform 0.22s var(--ease-out); }
.cr-sticky.is-visible { transform: translateY(0); }
.cr-sticky .cr-btn { min-height: 48px; padding-inline: 1.2rem; }
.cr-sticky .cr-btn--red { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
  .cr-mods, .cr-mods--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-jobs__grid { grid-template-columns: minmax(0, 1fr); }
  .cr-jobs__poster { max-width: 440px; }
  .cr-poster--sticky { position: static; }
  .cr-split, .cr-split--even, .cr-brand, .cr-apply__grid { grid-template-columns: minmax(0, 1fr); }
  .cr-split > .cr-poster { max-width: 440px; }
  .cr-proc { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
}
@media (max-width: 899px) {
  .cr-jobhero { grid-template-columns: minmax(0, 1fr); }
  .cr-jobhero__poster { display: none; }
  .cr-sticky { display: flex; }
  /* Chua cho ho cho thanh dinh o chan footer, khong o body: padding cua body to mau nen sang
     nen khi thanh dinh an di se lo mot dai sang duoi footer toi */
  body.careers .footer-bottom { padding-bottom: calc(1.8rem + 76px + env(safe-area-inset-bottom)); }
  body.careers .float-contact { display: none; }
}
@media (max-width: 767px) {
  .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .cr-stat:nth-child(n + 3) { margin-top: 1.2rem; border-top: 1px solid var(--cr-line); }
  .cr-mods, .cr-mods--2 { grid-template-columns: minmax(0, 1fr); }
  .cr-mod { min-height: 0; }
  .cr-rail { flex-direction: column; }
  .cr-rail li + li { margin-left: 0; margin-top: 30px; }
  .cr-rail li + li::before { content: "↓"; left: 50%; top: -25px; transform: translateX(-50%); }
  .cr-track { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--cr-ink); }
  .cr-stage, .cr-stage + .cr-stage { padding: 0 0 2rem 1.6rem; border-left: 0; }
  .cr-stage::before, .cr-stage + .cr-stage::before { top: 0.15rem; left: -9px; }
  .cr-points, .cr-points--2 { grid-template-columns: minmax(0, 1fr); }
  .cr-points li, .cr-points li + li { padding: 1.3rem 0 0; border-left: 0; }
  .cr-points li + li { margin-top: 1.1rem; border-top: 1px solid var(--cr-line); }
  .cr-bullets--2 { grid-template-columns: minmax(0, 1fr); }
  .cr-crumb { margin-bottom: 1.2rem; }
  .cr-jobs__poster { display: none; }
  .cr-job, .cr-joblist--compact .cr-job { grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; padding-inline: 0; }
  .cr-mid__a { width: 100%; }
  .cr-mid__a .cr-btn { flex: 1 1 auto; }
  .cr-job__count { font-size: 2rem; }
  .cr-job__side { grid-column: 2; align-items: flex-start; min-width: 0; text-align: left; gap: 0.6rem; }
  .cr-compcards div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--cr-line); }
  .cr-compcards div { padding-bottom: 1.2rem; }
  .cr-facts { grid-template-columns: minmax(0, 1fr); }
  .cr-actions .cr-btn { flex: 1 1 100%; }
  .cr-apply__alt li { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .cr-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .cr-step { padding: 0 0 1.6rem 1.4rem; border-top: 0; border-left: 2px solid var(--cr-line); }
  .cr-step::before { top: 0; left: -2px; width: 2px; height: 100%; transform: scaleY(0); transform-origin: center top; }
  .cr-step.is-in::before { transform: scaleY(1); }
  .cr-proc { grid-template-columns: minmax(0, 1fr); }
  .cr-qa > div { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cr *, .cr *::before, .cr *::after { transition: none !important; animation: none !important; }
  .cr-step::before { transform: none; }
}

/* ---------- JD chi tiết: chỉ số theo dõi, quyền lợi & nghĩa vụ ---------- */
.cr-subhead--top { margin-top: 0; padding-top: 0; border-top: 0; }
.cr-kpinote { margin-top: .8rem; max-width: 52ch; font-size: .88rem; line-height: 1.6; color: var(--cr-muted); }

/* Cột phải có ba loại nội dung nối nhau (chân dung → yêu cầu → chỉ số). Khoảng cách giữa
   hai loại phải lớn hơn hẳn khoảng cách giữa hai mục cùng loại, nếu không mắt đọc thành một khối. */
.cr-work .cr-subhead { margin-top: 2.6rem; padding-top: 1.1rem; border-top: 2px solid var(--cr-ink); font-size: 1.22rem; letter-spacing: -0.015em; }

/* Chỉ số KHÔNG dùng dấu tích: dấu tích đọc là "bạn đã có / bạn được nhận",
   trong khi chỉ số là thứ sẽ được đo. Dùng ô vuông rỗng cho đúng nghĩa. */
.cr-kpis { list-style: none; display: grid; gap: .7rem; }
.cr-kpis li { position: relative; padding-left: 1.6rem; max-width: 58ch; font-size: .98rem; line-height: 1.55; color: var(--cr-ink-2); }
.cr-kpis li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border: 1.5px solid var(--cr-red); }

/* Hai cột cố định thay cho auto-fit: auto-fit sinh thêm track rỗng và một khe thừa bên phải.
   Mốc 768px cho khớp hệ mốc chung của site (1023 / 899 / 767 / 599). */
.cr-duo { display: grid; gap: clamp(20px, 3.5vw, 48px); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 768px) { .cr-duo { grid-template-columns: 1fr 1fr; } }

/* Nghĩa vụ gập lại: đọc được khi cần, không chắn đường ứng viên tới nút ứng tuyển */
.cr-oblig { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--cr-line); }
.cr-oblig > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: 1.1rem 0; font-family: var(--head); font-weight: 700; font-size: 1.1rem; color: var(--cr-ink); }
.cr-oblig > summary::-webkit-details-marker { display: none; }
.cr-oblig > summary span { font-family: var(--body); font-weight: 400; font-size: .92rem; color: var(--cr-muted); }
.cr-oblig > summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--cr-red); }
.cr-oblig[open] > summary::after { content: "–"; }
.cr-oblig > div { padding-bottom: 1.4rem; }
/* Nghĩa vụ dùng dấu gạch trung tính, không dùng dấu tích như quyền lợi */
.cr-duty-list { list-style: none; display: grid; gap: .7rem; }
.cr-duty-list li { position: relative; padding-left: 1.6rem; max-width: 58ch; font-size: 0.98rem; line-height: 1.55; color: var(--cr-ink-2); }
.cr-duty-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 2px; background: var(--cr-muted); }

/* Tiêu đề đầu việc phải nổi hơn phần giải thích, nếu không cả khối là một mảng chữ đều nhau */
.cr-duties li { color: var(--cr-ink-2); padding: 1.2rem 0; }
.cr-duties li strong, .cr-duty-list li strong { display: block; margin-bottom: .3rem; font-family: var(--head); font-size: 1.06rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--cr-ink); }
.cr-duty-list li strong { font-size: 1rem; }

/* Chặn độ dài dòng chữ. Ở dải 768–1023px hai cột sập làm một, dòng dài tới hơn 100 ký tự.
   Dùng 58ch chứ không phải 68ch: đơn vị ch đo theo bề rộng chữ số 0, mà chữ thường tiếng Việt
   hẹp hơn nên 68ch rơi vào khoảng 88 ký tự thật — vẫn quá ngưỡng dễ đọc 75. */
.cr-duties li > div, .cr-checks li, .cr-profile p { max-width: 58ch; }
@media (max-width: 1023px) {
  .cr-work .cr-split > div, .cr-env .cr-split > div { max-width: 70ch; }
}

/* Thanh nhảy mục: trang vị trí dài hơn 20 màn hình, không có mục lục thì chỉ còn cách cuộn hết */
.cr-jump { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cr-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--cr-line); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--cr-ink-2); text-decoration: none; transition: border-color .18s ease, color .18s ease; }
.cr-jump a:hover { border-color: var(--cr-red); color: var(--cr-red); }
@media (max-width: 599px) {
  .cr-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .cr-jump::-webkit-scrollbar { display: none; }
  .cr-jump a { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cr-jump a { transition: none; } }