/* ============================================================
   TUYENDUNG.CSS — Trang tuyển dụng
   Ý tưởng: lấy từ chính xưởng — vòng tiện đồng tâm trên mặt mâm,
   phiếu thông số kỹ thuật, con số đo bằng font mono.
   Mọi class đều tiền tố .td- / .job- để KHÔNG đụng trangchu.css.
============================================================ */

/* ── Nền & khung chung ───────────────────────────────── */
.td-page { position:relative; z-index:1; }
.td-band { border-bottom:1px solid var(--c-border); }
.td-band--dark { background:var(--c-bg); }
.td-band--surface { background:var(--c-surface); }
.td-wrap { max-width:1140px; margin:0 auto; padding:5.5rem 2rem; }
.td-wrap--tight { padding:4rem 2rem; }

/* Nhãn kỹ thuật dùng chung */
.td-eyebrow {
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-gold);
  display:flex; align-items:center; gap:14px; margin-bottom:1.25rem;
}
.td-eyebrow::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(200,149,42,.4),transparent); }
.td-eyebrow--center { justify-content:center; }
.td-eyebrow--center::after { display:none; }
.td-eyebrow--center::before {
  content:''; width:28px; height:1px; background:var(--c-gold);
}

.td-h2 { font-family:var(--f-display); font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:600; color:var(--c-white); line-height:1.15; }
.td-h2 em { font-style:italic; color:var(--c-gold); }
.td-lead { margin-top:.9rem; color:var(--c-muted); font-size:.95rem; line-height:1.75; max-width:52ch; }
.td-head-center { text-align:center; margin-bottom:3rem; }
.td-head-center .td-lead { margin-left:auto; margin-right:auto; }

/* ── HERO: chia đôi, bên phải là mặt mâm tiện ────────── */
.td-hero { position:relative; overflow:hidden; background:var(--c-bg); border-bottom:1px solid var(--c-border); }
.td-hero-inner {
  max-width:1140px; margin:0 auto; padding:5rem 2rem 4.5rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
}
.td-hero h1 {
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.4rem,5vw,4rem); line-height:1.05; color:var(--c-white);
}
.td-hero h1 em { font-style:italic; color:var(--c-gold); display:block; }
.td-hero h1 strong { font-weight:700; display:block; }
.td-hero-sub { margin-top:1.5rem; color:var(--c-muted); font-size:1rem; line-height:1.8; max-width:46ch; }

/* Dải thông số dưới hero — nhịp giống bảng thông số mâm */
.td-specs { display:flex; flex-wrap:wrap; gap:0; margin-top:2.5rem; border-top:1px solid var(--c-border); }
.td-spec { padding:1.1rem 1.75rem 1.1rem 0; margin-right:1.75rem; border-right:1px solid var(--c-border); }
.td-spec:last-child { border-right:none; margin-right:0; }
.td-spec-val { font-family:var(--f-display); font-size:1.75rem; font-weight:600; color:var(--c-gold); line-height:1; }
.td-spec-key { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); margin-top:.45rem; }

.td-hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:2.5rem; }

/* Mặt mâm tiện — vòng đồng tâm (chữ ký của trang) */
.td-wheel { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.td-wheel-ring {
  position:absolute; border-radius:50%; border:1px solid rgba(200,149,42,.16);
}
.td-wheel-ring:nth-child(1){ inset:0; }
.td-wheel-ring:nth-child(2){ inset:9%;  border-color:rgba(200,149,42,.12); }
.td-wheel-ring:nth-child(3){ inset:19%; border-color:rgba(200,149,42,.2); }
.td-wheel-ring:nth-child(4){ inset:31%; border-color:rgba(200,149,42,.1); }
.td-wheel-ring:nth-child(5){ inset:44%; border-color:rgba(200,149,42,.24); }
.td-wheel-core {
  position:relative; width:34%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(200,149,42,.22), rgba(200,149,42,.04) 70%);
  border:1px solid rgba(200,149,42,.35);
  display:grid; place-items:center;
}
.td-wheel-core span { font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:var(--c-gold); }
/* Nan mâm */
.td-wheel-spokes { position:absolute; inset:19%; animation:td-spin 42s linear infinite; }
.td-wheel-spokes i {
  position:absolute; left:50%; top:50%; width:1px; height:50%;
  background:linear-gradient(180deg,rgba(200,149,42,.28),transparent);
  transform-origin:top center;
}
@keyframes td-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .td-wheel-spokes { animation:none; } }

/* ── QUYỀN LỢI: hàng ngang, gạch phân cách ───────────── */
.td-perks { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; }
.td-perk { padding:2rem 1.6rem; border-right:1px solid var(--c-border); background:var(--c-card); transition:background .3s; }
.td-perk:last-child { border-right:none; }
.td-perk:hover { background:rgba(200,149,42,.045); }
.td-perk-key { font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); margin-bottom:1rem; }
.td-perk-name { font-family:var(--f-display); font-size:1.2rem; font-weight:600; color:var(--c-white); margin-bottom:.5rem; }
.td-perk-desc { font-size:.84rem; color:var(--c-muted); line-height:1.7; }

/* ── PHIẾU VỊ TRÍ TUYỂN ──────────────────────────────── */
.td-jobs { display:grid; gap:1.5rem; }
.job-sheet {
  background:var(--c-card); border:1px solid var(--c-border); border-radius:16px;
  overflow:hidden; transition:border-color .3s, transform .3s;
}
.job-sheet:hover { border-color:rgba(200,149,42,.32); transform:translateY(-2px); }

.job-sheet-top {
  display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:start;
  padding:1.75rem 1.9rem 1.4rem; border-bottom:1px dashed var(--c-border);
}
.job-name { font-family:var(--f-display); font-size:1.55rem; font-weight:600; color:var(--c-white); line-height:1.2; }
.job-flags { display:flex; flex-wrap:wrap; gap:7px; margin-top:.85rem; }
.job-flag {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em;
  padding:4px 10px; border-radius:5px;
  border:1px solid var(--c-border); color:var(--c-muted); background:var(--c-surface);
}
.job-flag--hot { border-color:rgba(232,184,75,.4); color:var(--c-gold-lt); background:rgba(200,149,42,.09); }

.job-pay { text-align:right; }
.job-pay-num { font-family:var(--f-display); font-size:1.7rem; font-weight:700; color:var(--c-gold); line-height:1.1; white-space:nowrap; }
.job-pay-key { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); margin-top:.35rem; }

.job-sheet-body { padding:1.5rem 1.9rem; }
.job-block + .job-block { margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.04); }
.job-block-key { font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.7rem; }
.job-text { font-size:.9rem; color:#b6c0cc; line-height:1.8; white-space:pre-wrap; }
.job-checks { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.2rem 1.5rem; }
.job-checks li { display:flex; gap:10px; font-size:.87rem; color:#c2cad6; padding:5px 0; line-height:1.6; }
.job-checks li::before { content:'—'; color:var(--c-gold); flex-shrink:0; }

.job-sheet-foot {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.2rem 1.9rem; background:var(--c-surface); border-top:1px solid var(--c-border);
}
.job-posted { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--c-muted); }
.job-apply-btn {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--c-gold); color:var(--c-bg);
  font-family:var(--f-body); font-weight:600; font-size:.86rem;
  padding:11px 22px; border-radius:9px; border:none; cursor:pointer; transition:all .22s;
}
.job-apply-btn:hover { background:var(--c-gold-lt); box-shadow:0 6px 20px rgba(200,149,42,.28); }

.td-empty { text-align:center; padding:4.5rem 2rem; border:1px dashed var(--c-border); border-radius:16px; }
.td-empty-mark { font-family:var(--f-display); font-size:3rem; color:rgba(200,149,42,.3); margin-bottom:.75rem; }
.td-empty p { color:var(--c-muted); font-size:.92rem; line-height:1.7; }
.td-empty strong { display:block; color:var(--c-white); font-size:1.05rem; margin-bottom:.4rem; font-weight:500; }

/* ── QUY TRÌNH: đánh số vì đây là chuỗi thật ─────────── */
.td-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.td-step { position:relative; padding:0 1.5rem 0 0; }
.td-step::before {
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--c-gold);
  display:block; margin-bottom:1rem;
}
.td-step::after {
  content:''; position:absolute; left:0; top:-1.5rem; width:100%; height:1px;
  background:var(--c-border);
}
.td-step:first-child::after { background:linear-gradient(90deg,var(--c-gold) 0 22%,var(--c-border) 22%); }
.td-step h4 { font-family:var(--f-display); font-size:1.15rem; font-weight:600; color:var(--c-white); margin-bottom:.45rem; }
.td-step p { font-size:.84rem; color:var(--c-muted); line-height:1.7; }

/* ── FORM ỨNG TUYỂN ─────────────────────────────────── */
.td-form-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:3.5rem; align-items:start; }
.td-form-aside .td-h2 { font-size:clamp(1.7rem,3vw,2.3rem); }
.td-contact-line {
  display:flex; align-items:center; gap:13px; padding:1rem 0;
  border-bottom:1px solid var(--c-border); color:var(--c-muted); font-size:.9rem;
}
.td-contact-line:first-of-type { border-top:1px solid var(--c-border); }
.td-contact-line i { color:var(--c-gold); width:18px; text-align:center; }
.td-contact-line a { color:var(--c-white); text-decoration:none; font-family:var(--f-mono); font-size:.88rem; }
.td-contact-line a:hover { color:var(--c-gold); }

.td-form { background:var(--c-card); border:1px solid var(--c-border); border-radius:18px; padding:2rem; }
.td-field { margin-bottom:1.15rem; }
.td-field label {
  display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-muted); margin-bottom:.5rem;
}
.td-field label b { color:var(--c-gold); font-weight:400; }
.td-input {
  width:100%; background:var(--c-surface); border:1px solid var(--c-border);
  color:var(--c-white); padding:12px 15px; border-radius:10px;
  font-family:var(--f-body); font-size:.92rem; outline:none; transition:all .2s;
}
.td-input::placeholder { color:#3d4a5c; }
.td-input:focus { border-color:var(--c-gold); box-shadow:0 0 0 3px rgba(200,149,42,.11); }
select.td-input { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8952a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; }
textarea.td-input { resize:vertical; min-height:110px; line-height:1.7; }
.td-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.td-submit {
  width:100%; padding:15px; margin-top:.5rem;
  background:var(--c-gold); color:var(--c-bg); border:none; border-radius:10px;
  font-family:var(--f-body); font-weight:700; font-size:.95rem; cursor:pointer; transition:all .22s;
}
.td-submit:hover:not(:disabled) { background:var(--c-gold-lt); box-shadow:0 8px 24px rgba(200,149,42,.28); }
.td-submit:disabled { opacity:.55; cursor:not-allowed; }
.td-formnote { text-align:center; font-size:.78rem; color:var(--c-muted); margin-top:.9rem; }
.td-formnote a { color:var(--c-gold); text-decoration:none; }

.td-msg { display:none; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:10px; font-size:.86rem; line-height:1.6; margin-bottom:1.25rem; }
.td-msg.show { display:flex; }
.td-msg.ok   { background:rgba(34,197,94,.09);  border:1px solid rgba(34,197,94,.28);  color:#4ade80; }
.td-msg.err  { background:rgba(239,68,68,.09);  border:1px solid rgba(239,68,68,.28);  color:#f87171; }
.td-msg.warn { background:rgba(200,149,42,.1);  border:1px solid rgba(200,149,42,.3);  color:var(--c-gold-lt); }

/* ── FAQ ─────────────────────────────────────────────── */
.td-faq { max-width:780px; margin:0 auto; }
.td-faq-item { border-bottom:1px solid var(--c-border); }
.td-faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.4rem 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--f-body); font-size:.98rem; font-weight:500; color:var(--c-white); transition:color .2s;
}
.td-faq-q:hover { color:var(--c-gold); }
.td-faq-mark { font-family:var(--f-mono); font-size:1.1rem; color:var(--c-gold); flex-shrink:0; transition:transform .3s; }
.td-faq-item.open .td-faq-mark { transform:rotate(45deg); }
.td-faq-a { max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.td-faq-item.open .td-faq-a { max-height:340px; }
.td-faq-a p { padding:0 0 1.4rem; color:var(--c-muted); font-size:.9rem; line-height:1.85; max-width:64ch; }

/* ── KHỐI TUYỂN DỤNG TRÊN TRANG CHỦ ─────────────────── */
.hj-band { background:var(--c-surface); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.hj-wrap { max-width:1140px; margin:0 auto; padding:5rem 2rem; }
.hj-top { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; }
.hj-card {
  background:var(--c-card); border:1px solid var(--c-border); border-radius:14px;
  padding:1.6rem; display:flex; flex-direction:column; transition:all .3s;
}
.hj-card:hover { border-color:rgba(200,149,42,.3); transform:translateY(-3px); }
.hj-name { font-family:var(--f-display); font-size:1.25rem; font-weight:600; color:var(--c-white); margin-bottom:.6rem; }
.hj-pay { font-family:var(--f-mono); font-size:.88rem; color:var(--c-gold); font-weight:700; margin-bottom:.9rem; }
.hj-meta { font-size:.8rem; color:var(--c-muted); line-height:1.8; margin-bottom:1.3rem; flex:1; }
.hj-link {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:9px; border:1px solid var(--c-border);
  color:var(--c-white); text-decoration:none; font-size:.86rem; font-weight:500; transition:all .22s;
}
.hj-link:hover { border-color:rgba(200,149,42,.45); color:var(--c-gold); background:rgba(200,149,42,.06); }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width:1000px){
  .td-hero-inner { grid-template-columns:1fr; gap:2.5rem; }
  .td-wheel { max-width:340px; margin:0 auto; }
  .td-perks { grid-template-columns:1fr 1fr; }
  .td-perk:nth-child(2){ border-right:none; }
  .td-perk:nth-child(1),.td-perk:nth-child(2){ border-bottom:1px solid var(--c-border); }
  .td-steps { grid-template-columns:1fr 1fr; gap:2rem 0; }
  .td-form-grid { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:640px){
  .td-wrap, .hj-wrap { padding:3.5rem 1.25rem; }
  .td-hero-inner { padding:3.5rem 1.25rem; }
  .td-perks { grid-template-columns:1fr; }
  .td-perk { border-right:none; border-bottom:1px solid var(--c-border); }
  .td-perk:last-child { border-bottom:none; }
  .td-steps { grid-template-columns:1fr; gap:1.75rem; }
  .td-step { padding-right:0; }
  .td-specs { gap:0; }
  .td-spec { padding-right:1.25rem; margin-right:1.25rem; }
  .job-sheet-top { grid-template-columns:1fr; gap:1rem; padding:1.4rem 1.35rem 1.15rem; }
  .job-pay { text-align:left; }
  .job-sheet-body, .job-sheet-foot { padding-left:1.35rem; padding-right:1.35rem; }
  .td-form { padding:1.5rem 1.25rem; }
  .td-row2 { grid-template-columns:1fr; }
  .td-hero-cta { flex-direction:column; }
  .td-hero-cta > * { justify-content:center; }
}