:root{
  --rc-accent: #F0A500;
  --rc-accent-dark: #d99200;
  --rc-ink: #111111;
  --rc-ink-2: #444444;
  --rc-ink-soft: #777777;
  --rc-card: #ffffff;
  --rc-bg: #f9f8f5;
  --rc-line: #e8e6e0;
  --rc-radius: 16px;
  --rc-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.recruitment-page{ background:var(--rc-bg); color:var(--rc-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; overflow-x:hidden; }
.recruitment-page *{ box-sizing:border-box; }
.recruitment-page a{ color:inherit; }
.rc-container{ max-width:720px; margin:0 auto; padding:0 16px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.rc-hero{ position:relative; background-color:var(--rc-ink); color:#fff; text-align:center; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:340px; padding:32px 16px; contain:layout paint; }
.rc-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.rc-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,.5) 0%, rgba(17,17,17,.8) 100%); }
.rc-hero-content{ position:relative; }
.rc-hero-badge{ display:inline-block; background:var(--rc-accent); color:#111; font-weight:700; font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:16px; }
.rc-hero h1{ color:#fff; font-size:28px; line-height:1.3; margin:0 0 12px; font-weight:800; }
.rc-hero h1 em{ color:var(--rc-accent); font-style:normal; }
.rc-hero p{ color:#eee; font-size:15px; max-width:520px; margin:0 auto; }
@media(min-width:640px){ .rc-hero{ min-height:440px; } .rc-hero h1{ font-size:40px; } .rc-hero p{ font-size:17px; } }

/* ── Banner riêng từng vị trí (trang form) ─────────────────────── */
.rc-form-banner{ position:relative; min-height:220px; background-color:var(--rc-ink); display:flex; align-items:flex-end; overflow:hidden; contain:layout paint; }
.rc-form-banner-label{ position:relative; color:#fff; font-size:22px; font-weight:800; padding:16px; }
@media(min-width:640px){ .rc-form-banner{ min-height:300px; } .rc-form-banner-label{ font-size:30px; padding:28px; } }

/* ── Sections ─────────────────────────────────────────────────── */
.rc-section{ padding:36px 0; }
.rc-section h2{ font-size:20px; font-weight:800; margin:0 0 16px; text-align:center; }

/* ── Position cards ───────────────────────────────────────────── */
.rc-positions{ display:flex; flex-direction:column; gap:12px; }
.rc-position-card{ display:flex; align-items:center; gap:14px; background:var(--rc-card); border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:12px; text-decoration:none; box-shadow:var(--rc-shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden; }
.rc-position-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.14); border-color:var(--rc-accent); }
.rc-position-card:active{ transform:scale(.98); }
.rc-position-card-imgwrap{ display:block; width:64px; height:64px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.rc-position-card-img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.rc-position-card:hover .rc-position-card-img{ transform:scale(1.12); }
.rc-position-card-body{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex:1; min-width:0; }
.rc-position-card .name{ font-size:17px; font-weight:700; color:var(--rc-ink); }
.rc-position-card .cta{ background:var(--rc-accent); color:#111; font-weight:700; font-size:14px; padding:10px 16px; border-radius:999px; white-space:nowrap; transition:background .2s ease; }
.rc-position-card:hover .cta{ background:var(--rc-accent-dark); }
@media(min-width:480px){ .rc-position-card-imgwrap{ width:80px; height:80px; } }

/* ── Form page ────────────────────────────────────────────────── */
.rc-form-wrap{ padding:24px 0 60px; }
.rc-form-title{ font-size:22px; font-weight:800; margin:0 0 4px; }
.rc-form-sub{ color:var(--rc-ink-soft); font-size:14px; margin:0 0 16px; }

.rc-progress{ margin-bottom:20px; }
.rc-progress-bar{ height:8px; border-radius:999px; background:var(--rc-line); overflow:hidden; }
.rc-progress-fill{ height:100%; width:0%; background:var(--rc-accent); border-radius:999px; transition:width .25s ease; }
.rc-progress-label{ display:block; font-size:12px; color:var(--rc-ink-soft); margin-top:4px; }

.rc-hint{ background:var(--rc-accent-light,#fff8e6); border:1px solid var(--rc-accent-border,#ffd97a); color:var(--rc-ink-2); font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:12px; }

/* ── Nhóm khối thông tin (gọn hơn thay vì để rời rạc) ─────────────── */
.rc-group{ background:var(--rc-card); border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:16px; margin-bottom:16px; }
.rc-group-title{ font-size:15px; font-weight:700; margin-bottom:12px; }
.rc-group-title i{ color:var(--rc-accent); margin-right:6px; }
.rc-group-hint{ font-size:12px; color:var(--rc-ink-soft); margin:-6px 0 12px; }
.rc-group .rc-field:last-child{ margin-bottom:0; }
.rc-group .rc-row:last-child{ margin-bottom:0; }

.rc-field{ margin-bottom:16px; }
.rc-field label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.rc-field label i, .rc-hero-badge i, .rc-form-banner-label i, .rc-section h2 i, .rc-hint i, .rc-submit-btn i{ color:var(--rc-accent); margin-right:6px; }
.rc-hero-badge i, .rc-submit-btn i{ color:inherit; }
.rc-photo-box i{ color:var(--rc-accent); margin-right:4px; }
.rc-field input[type=text], .rc-field input[type=tel], .rc-field input[type=email], .rc-field input[type=date], .rc-field select, .rc-field textarea{
  width:100%; min-height:46px; padding:10px 14px; font-size:15px; border:1px solid var(--rc-line); border-radius:10px; background:#fff; outline:none; font-family:inherit;
}
.rc-field textarea{ resize:vertical; min-height:80px; }
.rc-field select{ appearance:auto; }
/* input type=date đôi khi bị các trình duyệt trong-app (Zalo/Messenger) render tràn khung,
   bỏ qua width CSS bình thường — khoá cứng nhiều lớp + cắt tại chính field để không lộ ra ngoài */
.rc-field:has(input[type=date]){ overflow:hidden; }
.rc-field input[type=date]{
  display:block; width:100% !important; max-width:100% !important; min-width:0 !important;
  box-sizing:border-box !important; overflow:hidden;
}
@media(max-width:480px){ .rc-field input[type=date]{ font-size:14px; padding:10px 8px; } }
/* Hiệu ứng viền vàng khi focus — chỉ bật ở màn hình lớn (chuột+bàn phím).
   Trên di động (chạm tay) bỏ đi theo yêu cầu, không cần thiết. */
@media(min-width:768px){
  .rc-field input:focus, .rc-field select:focus, .rc-field textarea:focus{ border-color:var(--rc-accent); box-shadow:0 0 0 3px rgba(240,165,0,.15); }
  .rc-field input.rc-field-invalid:focus{ box-shadow:0 0 0 3px rgba(192,57,43,.15); }
}
.rc-field input.rc-field-invalid{ border-color:#c0392b; }
.rc-field-error{ color:#c0392b; font-size:12px; margin-top:4px; display:none; }
.rc-field-error.show{ display:block; }
.rc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:480px){ .rc-row{ grid-template-columns:1fr; } }

/* ── Chi nhánh mong muốn (hiện hàng đầu, mờ dần bên dưới, bấm để xem hết) ── */
.rc-branch-wrap{ position:relative; }
.rc-branch-wrap.rc-collapsed{ max-height:196px; overflow:hidden; }
.rc-branch-wrap.rc-collapsed::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(to bottom, rgba(249,248,245,0) 0%, var(--rc-bg) 80%);
  pointer-events:none;
}
.rc-branch-wrap.rc-collapsed .rc-branch-grid > *:nth-child(n+4){ filter:blur(4px); }
.rc-branch-expand-btn{
  display:none; position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2;
  background:var(--rc-ink); color:#fff; border:0; padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:700; cursor:pointer; align-items:center; gap:6px; white-space:nowrap;
}
.rc-branch-wrap.rc-collapsed .rc-branch-expand-btn{ display:inline-flex; }
.rc-branch-expand-btn i{ color:#fff !important; margin-right:0 !important; }

.rc-branch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:380px){ .rc-branch-grid{ grid-template-columns:repeat(2,1fr); } }
.rc-branch-card{ position:relative; display:block; cursor:pointer; border:2px solid var(--rc-line); border-radius:12px; overflow:hidden; background:#fff; transition:border-color .15s ease, transform .15s ease; }
.rc-branch-card:active{ transform:scale(.97); }
.rc-branch-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.rc-branch-imgwrap{ position:relative; display:block; width:100%; aspect-ratio:1; background:#eee; overflow:hidden; }
.rc-branch-imgwrap img{ width:100%; height:100%; object-fit:cover; }
.rc-branch-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--rc-ink-soft); font-size:22px; }
.rc-branch-check{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.85); color:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s ease; }
.rc-branch-name{ display:block; font-size:11px; font-weight:600; color:var(--rc-ink-2); padding:6px; line-height:1.3; text-align:center; }
.rc-branch-card input:checked ~ .rc-branch-imgwrap .rc-branch-check{ background:var(--rc-accent); color:#111; }
.rc-branch-card input:checked ~ .rc-branch-name{ color:var(--rc-ink); }
.rc-branch-card:has(input:checked){ border-color:var(--rc-accent); }

/* ── Mức lương / thu nhập (thanh kéo) ───────────────────────────── */
.rc-slider-field{ border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:14px 16px 18px; background:var(--rc-card); }
.rc-slider-value{ display:inline-block; font-weight:800; font-size:20px; margin-bottom:10px; }
.rc-field input[type=range]{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%; height:24px; background:transparent;
  border:none; outline:none; padding:0; min-height:0; margin:8px 0 0; cursor:pointer;
}
/* Track — bắt buộc phải style riêng pseudo-element này, nếu không Chrome/WebView
   sẽ tự vẽ track mặc định (viền hộp) đè lên, chỉ có thumb là custom */
.rc-field input[type=range]::-webkit-slider-runnable-track{
  -webkit-appearance:none; width:100%; height:6px; border-radius:999px; background:var(--rc-line); border:none;
}
.rc-field input[type=range]::-moz-range-track{
  width:100%; height:6px; border-radius:999px; background:var(--rc-line); border:none;
}
.rc-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--rc-slider-color, var(--rc-accent)); border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35);
  cursor:pointer; margin-top:-9px; /* căn giữa thumb 24px trên track 6px: (24-6)/2 */
}
.rc-field input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--rc-slider-color, var(--rc-accent));
  border:3px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35); cursor:pointer;
}
.rc-field input[type=range]::-moz-focus-outer{ border:0; }

.rc-slider-orange{ --rc-slider-color:#F0A500; }
.rc-slider-orange .rc-slider-value{ color:#b97900; }
.rc-slider-blue{ --rc-slider-color:#2f7fd6; }
.rc-slider-blue .rc-slider-value{ color:#1f5c9e; }

.rc-skills{ background:var(--rc-card); border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:16px; margin-bottom:16px; transition:border-color .15s ease; }
.rc-skills.rc-field-invalid{ border-color:#c0392b; }
.rc-skill-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--rc-line); gap:8px; flex-wrap:wrap; }
.rc-skill-row:last-child{ border-bottom:none; }
.rc-skill-name{ font-size:14px; font-weight:600; }

.rc-stars{ display:inline-flex; flex-direction:row-reverse; font-size:44px; }
.rc-stars input{ display:none; }
.rc-stars label{ color:#ddd; cursor:pointer; padding:12px 8px; line-height:1; }

.rc-skill-row-text{ flex-direction:column; align-items:stretch; }
.rc-skill-text-input{ width:100%; min-height:44px; padding:10px 14px; font-size:15px; border:1px solid var(--rc-line); border-radius:10px; background:#fff; margin-top:6px; }

@media(max-width:480px){
  .rc-skill-row:not(.rc-skill-row-text){ flex-direction:column; align-items:flex-start; gap:2px; }
  .rc-stars{ font-size:52px; align-self:center; }
  .rc-stars label{ padding:10px 9px; }
}
.rc-stars input:checked ~ label,
.rc-stars label:hover,
.rc-stars label:hover ~ label{ color:var(--rc-accent); }

/* ── Photo uploader ───────────────────────────────────────────── */
.rc-photo-box{ border:2px dashed var(--rc-line); border-radius:var(--rc-radius); padding:20px; text-align:center; cursor:pointer; background:#fff; }
.rc-photo-box.dragover{ border-color:var(--rc-accent); background:var(--rc-accent-light,#fff8e6); }
.rc-photo-box .hint{ font-size:13px; color:var(--rc-ink-soft); margin-top:4px; }
.rc-photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
@media(max-width:380px){ .rc-photo-grid{ grid-template-columns:repeat(2,1fr); } }
.rc-photo-thumb{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:#eee; }
.rc-photo-thumb img{ width:100%; height:100%; object-fit:cover; }
.rc-photo-thumb .remove{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:0; font-size:14px; line-height:22px; cursor:pointer; }
.rc-photo-thumb .compressing{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7); font-size:11px; }

.cf-turnstile{ margin:16px 0; display:flex; justify-content:center; }

.rc-submit-btn{ width:100%; margin-top:8px; display:block; background:var(--rc-ink); color:#fff; font-weight:700; font-size:16px; border:0; border-radius:12px; padding:14px; cursor:pointer; }
.rc-submit-btn:disabled{ opacity:.6; cursor:wait; }

/* ── Checklist trước nút gửi ──────────────────────────────────────── */
.rc-ready-box{ border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:14px 16px; background:var(--rc-card); margin-bottom:4px; }
.rc-ready-box .rc-progress{ margin-bottom:10px; }
.rc-ready-ok{ display:flex; align-items:center; gap:8px; color:#1e7e34; font-weight:700; font-size:14px; }
.rc-ready-missing{ display:none; font-size:13px; color:var(--rc-ink-2); line-height:2; }
.rc-ready-missing i{ color:#c0392b; margin-right:6px; }
.rc-ready-missing span{ display:inline-block; background:#fdecea; color:#c0392b; font-weight:600; font-size:12px; padding:3px 10px; border-radius:999px; margin:2px 4px 2px 0; }

.rc-alert{ border-radius:12px; padding:12px 16px; font-size:14px; margin-bottom:16px; }
.rc-alert-error{ background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; }
.rc-alert-success{ background:#eafaf1; color:#1e7e34; border:1px solid #c3e6cb; }

.rc-thankyou{ text-align:center; padding:48px 16px 32px; }
.rc-thankyou .icon{ font-size:56px; }
.rc-thankyou h2{ font-size:21px; margin:12px 0 10px; color:var(--rc-ink); }
.rc-thankyou-lead{ color:var(--rc-ink-2); font-size:15px; max-width:480px; margin:0 auto 20px; }
.rc-thankyou-box{ background:var(--rc-card); border:1px solid var(--rc-line); border-radius:var(--rc-radius); padding:18px; text-align:left; max-width:480px; margin:0 auto 20px; }
.rc-thankyou-box p{ font-size:14px; color:var(--rc-ink-2); margin:0 0 12px; line-height:1.6; }
.rc-thankyou-box p:last-child{ margin-bottom:0; }
.rc-thankyou-box i{ color:var(--rc-accent); margin-right:6px; }
.rc-thankyou-box a{ color:var(--rc-accent-dark); font-weight:600; text-decoration:underline; }
.rc-thankyou-name{ font-size:13px; color:var(--rc-ink-soft); }