/* Trang tuyển dụng — Lucian UX/UI Prompt (MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/)
   #042 thanh bước · #017 thanh kéo có bong bóng nghiêng · #016 chấm sao kỹ năng · #019 chọn chi nhánh · #032 kéo thả ảnh · #005 gửi hồ sơ · #044 mở/đóng mục.
   JS đi kèm: lx-recruit.js. */
:root { --lr-ease: cubic-bezier(.2,.8,.2,1); --lr-spring: cubic-bezier(.34,1.45,.64,1); }

/* ── Landing: thẻ vị trí ── */
.rc-position-card { transition: transform .5s var(--lr-spring), box-shadow .4s var(--lr-ease); }
.rc-position-card-img { transition: transform .8s var(--lr-ease); }
.rc-position-card .rc-btn, .rc-position-card [class*="btn"] { transition: transform .35s var(--lr-spring), box-shadow .3s; }
@media (hover: hover) { .rc-position-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -28px rgba(0,0,0,.45); } .rc-position-card:hover .rc-position-card-img { transform: scale(1.08); } }
.rc-hero-badge { animation: lr-float 3.6s ease-in-out infinite alternate; }
@keyframes lr-float { to { transform: translateY(-4px); } }

/* ── Thanh tiến độ ── */
.rc-progress-fill { background: linear-gradient(90deg, var(--rc-accent), #ffcf5a, var(--rc-accent)) !important; background-size: 200% 100% !important; animation: lr-shimmer 2.4s linear infinite; transition: width .6s var(--lr-ease) !important; }
@keyframes lr-shimmer { to { background-position: -200% 0; } }
.rc-progress-label { font-variant-numeric: tabular-nums; }

/* ── Thanh bước (#042) ── */
.lr-wiz-ph { margin: 0 0 16px; }
.lr-wiz { z-index: 90; margin: 0; padding: 14px 16px 10px; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(17,17,17,.08), 0 18px 36px -26px rgba(17,17,17,.45); }
.lr-wiz ol { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.lr-wiz .line { position: absolute; left: 14px; right: 14px; top: 13px; height: 3px; border-radius: 2px; background: #e8e8e8; list-style: none; }
.lr-wiz .line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--rc-accent, #f0a500), #ffcf5a); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--lr-ease); }
.lr-wiz li.st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 28px; }
.lr-wiz button.dot { position: relative; width: 28px; height: 28px; border: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px #dcdcdc; font-size: 12px; font-weight: 800; color: #999; cursor: pointer; transition: box-shadow .35s, background-color .35s, color .35s, transform .45s var(--lr-spring); }
.lr-wiz .dot svg { position: absolute; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lr-wiz .dot path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s var(--lr-ease) .1s; }
.lr-wiz li.cur .dot { box-shadow: inset 0 0 0 2px var(--rc-accent, #f0a500), 0 0 0 5px rgba(240,165,0,.18); color: #b97900; transform: scale(1.1); }
.lr-wiz li.done .dot { background: var(--rc-accent, #f0a500); box-shadow: none; color: #111; }
.lr-wiz li.done .dot span { opacity: 0; } .lr-wiz li.done .dot svg { opacity: 1; } .lr-wiz li.done .dot path { stroke-dashoffset: 0; }
.lr-wiz small { font-size: 10.5px; font-weight: 700; color: #999; white-space: nowrap; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
.lr-wiz li.cur small, .lr-wiz li.done small { color: #111; }
.lr-wiz.lr-fix { position: fixed; }
@media (max-width: 640px) { .lr-wiz small { display: none; } .lr-wiz { padding: 10px 12px; } }

/* ── Mục (details) ── */
.rc-group { transition: box-shadow .35s var(--lr-ease); }
.rc-group[open] { box-shadow: 0 22px 36px -30px rgba(0,0,0,.4); }
.rc-group-chevron { transition: transform .5s var(--lr-spring) !important; }

/* ── Chọn chi nhánh (#019) ── */
.rc-branch-card { transition: transform .45s var(--lr-spring), box-shadow .35s var(--lr-ease), border-color .25s !important; }
@media (hover: hover) { .rc-branch-card:hover { transform: translateY(-3px); box-shadow: 0 18px 28px -20px rgba(0,0,0,.45); } }
.rc-branch-card input:checked ~ .rc-branch-imgwrap .rc-branch-check { animation: lr-pop .5s var(--lr-spring); }
.rc-branch-card.lr-no { animation: lr-shake .42s var(--lr-ease); }
@keyframes lr-pop { 40% { transform: scale(1.4); } }
@keyframes lr-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ── Thanh kéo có bong bóng (#017) ── */
.lr-slider { position: relative; padding-top: 4px; }
.lr-bub { position: absolute; top: -2px; left: 0; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--rc-slider-color, #f0a500); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; transform: translate(var(--bx, 0px), 0) translateX(-50%) rotate(var(--rot, 0deg)); transform-origin: 50% 100%; opacity: 0; transition: transform .5s var(--lr-spring), opacity .25s; }
.lr-bub::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.lr-slider.on .lr-bub { opacity: 1; }
.lr-bub.live { transition: transform .06s linear, opacity .25s; }
.rc-field input[type=range].lr-r::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--rc-slider-color, #f0a500) var(--lr-p, 0%), var(--rc-line, #e5e5e5) var(--lr-p, 0%)) !important; }
.rc-field input[type=range].lr-r::-moz-range-track { background: linear-gradient(90deg, var(--rc-slider-color, #f0a500) var(--lr-p, 0%), var(--rc-line, #e5e5e5) var(--lr-p, 0%)) !important; }
.rc-field input[type=range]::-webkit-slider-thumb { transition: transform .3s var(--lr-spring); }
.rc-field input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); }

/* ── Chấm sao kỹ năng (#016): dãy ★ gốc ẩn đi, bộ sao Lucian (lx-stars.js) thay vào; radio gốc vẫn là nguồn dữ liệu ── */
.rc-stars.lr-stars-hidden { display: none !important; }
.rc-skill-row .lx-stars--sm { align-self: center; }

/* ── Tải ảnh (#032): vùng kéo-thả viền đứt chạy, thanh tiến trình + tick ── */
.rc-photo-box.lr-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 168px; padding: 20px; border: 0; border-radius: 22px; background: #fff; transition: transform .5s var(--lr-spring), background-color .3s var(--lr-ease); }
.rc-photo-box.lr-zone:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.lr-dash { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible; pointer-events: none; }
.lr-dash rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: #d6d6d6; stroke-width: 2; stroke-dasharray: 8 7; transition: stroke .3s var(--lr-ease); }
.lr-zone:hover .lr-dash rect, .lr-zone.is-over .lr-dash rect { stroke: var(--rc-accent, #f0a500); animation: lr-dash .9s linear infinite; }
@keyframes lr-dash { to { stroke-dashoffset: -30; } }
.rc-photo-box.lr-zone.is-over { transform: scale(1.025); background: rgba(240,165,0,.08); }
.lr-orb { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #111; background: linear-gradient(140deg, #ffd66b, #ffaa2c 60%, #ff7a45); box-shadow: 0 16px 26px -14px rgba(255,150,30,.85); transition: transform .5s var(--lr-spring); }
.lr-orb svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lr-zone:hover .lr-orb { transform: translateY(-4px); }
.lr-zone.is-over .lr-orb { transform: translateY(-8px) scale(1.12) rotate(-6deg); }
.rc-photo-box.lr-zone b { margin-top: 12px; font-size: 15px; font-weight: 800; }
.rc-photo-box.lr-zone b em { font-style: normal; color: #b97900; }
.rc-photo-box.lr-zone small { margin-top: 4px; font-size: 12.5px; color: var(--rc-ink-soft, #888); max-width: 360px; }
.lr-count { position: absolute; right: 12px; top: 10px; padding: 3px 10px; border-radius: 999px; background: #f3f3f3; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #555; transition: background-color .3s, color .3s, transform .4s var(--lr-spring); }
.lr-count.full { background: #00a650; color: #fff; transform: scale(1.08); }
.rc-photo-thumb.lr-new { animation: lr-thumb .55s var(--lr-spring); }
@keyframes lr-thumb { from { transform: scale(.7) translateY(10px); opacity: 0; } }
.rc-photo-thumb .lr-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--rc-accent, #f0a500); transform-origin: 0 50%; transform: scaleX(.05); animation: lr-load 1.6s cubic-bezier(.3,.7,.2,1) forwards; z-index: 2; }
@keyframes lr-load { to { transform: scaleX(.92); } }
.rc-photo-thumb.lr-done .lr-bar { animation: none; transform: scaleX(1); background: #00a650; opacity: 0; transition: transform .25s linear, opacity .5s .45s; }
.rc-photo-thumb .lr-ok { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #00a650; color: #fff; transform: scale(0); z-index: 3; }
.rc-photo-thumb .lr-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rc-photo-thumb .lr-ok path { stroke-dasharray: 16; stroke-dashoffset: 16; }
.rc-photo-thumb.lr-done .lr-ok { animation: lr-okpop .5s var(--lr-spring) .1s forwards; }
.rc-photo-thumb.lr-done .lr-ok path { animation: lr-okdraw .4s var(--lr-ease) .3s forwards; }
@keyframes lr-okpop { to { transform: scale(1); } }
@keyframes lr-okdraw { to { stroke-dashoffset: 0; } }
.rc-photo-thumb .compressing { backdrop-filter: blur(2px); font-weight: 700; }
.rc-photo-thumb .remove { transition: transform .35s var(--lr-spring), background-color .2s; }
.rc-photo-thumb .remove:hover { transform: scale(1.15) rotate(90deg); background: #d0021b; }

/* ── Ô nhập / nút gửi (#005) ── */
.rc-field input[type=text], .rc-field input[type=tel], .rc-field input[type=date], .rc-field textarea { border-radius: 12px; transition: border-color .2s, box-shadow .35s var(--lr-ease); }
.rc-field input:focus, .rc-field textarea:focus { border-color: #111; box-shadow: 0 0 0 4px rgba(17,17,17,.08); outline: none; }
.rc-submit-btn { position: relative; overflow: hidden; transition: transform .35s var(--lr-spring), box-shadow .3s var(--lr-ease), filter .2s; }
@media (hover: hover) { .rc-submit-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(0,0,0,.55); } }
.rc-submit-btn:not(:disabled):active { transform: scale(.97); }
.rc-submit-btn i { display: inline-block; transition: transform .9s var(--lr-ease), opacity .5s; }
.rc-submit-btn.lr-go i { transform: translate(90px,-46px) rotate(-16deg) scale(.5); opacity: 0; }
.rc-ready-ok { animation: lr-pop .6s var(--lr-spring); }
.lx-rip { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: translate(-50%,-50%) scale(0); animation: lr-rip .65s var(--lr-ease) forwards; }
@keyframes lr-rip { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ── Select (#031) ── */
body #rcApplyForm .lx-sel-btn { min-height: 46px; background: #fff; box-shadow: inset 0 0 0 1px var(--rc-line, #ddd); }
body #rcApplyForm .lx-sel-btn:focus-visible, body #rcApplyForm .lx-sel.is-open .lx-sel-btn { box-shadow: inset 0 0 0 2px #111, 0 0 0 5px rgba(17,17,17,.08); }

@media (prefers-reduced-motion: reduce) { .rc-progress-fill, .rc-hero-badge, .lr-zone.is-over .lr-dash rect, .rc-photo-thumb .lr-bar { animation: none !important; } .lr-bub { transition-duration: .001ms; } }