/* ═══ TOKENS — hệ ĐỎ PNE một tông ══════════════════════════════════════ */
:root {
  --red:       #D12026;   /* PNE đỏ gốc — CTA, accent */
  --red-deep:  #A8181D;
  --red-ink:   #7E1114;   /* heading, chữ đậm thương hiệu */
  --wine-1:    #6B0F12;   /* đầu gradient khối tối */
  --wine-2:    #A8181D;
  --rose:      #F5C8CA;   /* viền hồng nhạt cho băng lương */
  --red-soft:  #FDECEC;
  --red-mist:  #FBF5F5;
  --navy:      #27348B;
  --navy-deep: #1E2870;
  --navy-ink:  #171E4E;
  --peri:      #A6ABD3;
  --sky:       #EEF1FB;
  --ink:       #1B1C22;
  --muted:     #5B5E70;
  --line:      #E7E5EA;
  --bg:        #FFFFFF;
  --bg-soft:   #FAF9FB;
  --ff: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-card: 16px;
  --r-input: 10px;
  --sh-card: 0 1px 2px rgba(23,30,78,.05), 0 12px 32px rgba(23,30,78,.08);
  --sh-pop:  0 2px 6px rgba(23,30,78,.07), 0 24px 64px rgba(23,30,78,.13);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--ff); color: var(--ink); background: var(--bg); font-size: 16px; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.jf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h2 { color: var(--navy-ink); font-size: clamp(27px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h2 em { font-style: normal; color: var(--red); white-space: nowrap; }
.jf-sub { color: var(--muted); max-width: 62ch; margin-top: 12px; }

.jf-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 700; font-size: 16px; padding: 15px 30px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.jf-btn:active { transform: translateY(1px) scale(.99); }
.jf-btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 20px rgba(209,32,38,.30); }
.jf-btn--red:hover { background: var(--red-deep); transform: translateY(-2px); }
.jf-btn--ghost { border-color: var(--line); color: var(--navy-ink); background: #fff; }
.jf-btn--ghost:hover { background: var(--sky); border-color: var(--peri); transform: translateY(-2px); }
.jf-btn--glass { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); }
.jf-btn--glass:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* ═══ 1 · HERO ẢNH TRÀN VIỀN ═══════════════════════════════════════════ */
.jf-hero { position: relative; color: #fff; overflow: hidden; }
.jf-hero::before { content: ""; position: absolute; inset: 0; background: url("assets/img/dresden-frauenkirche.jpg") center 32% / cover no-repeat; }
.jf-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(78deg, rgba(23,30,78,.92) 0%, rgba(23,30,78,.72) 46%, rgba(23,30,78,.28) 100%), linear-gradient(0deg, rgba(23,30,78,.55) 0%, transparent 34%); }
.jf-hero__in { position: relative; z-index: 2; }
.jf-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; }
.jf-topbar__logos { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 8px 14px; }
.jf-topbar__logos img { height: 38px; width: auto; }
/* Logo PNE (đơn vị tổ chức) to hơn HWK cho cân bằng thị giác. */
.jf-topbar__logos img[src*="logo-pne"] { height: 50px; }
.jf-topbar__logos .x { color: var(--peri); font-weight: 600; }
.jf-hero__body { text-align: left; padding: 84px 0 96px; max-width: 820px; }
/* line-height 1.36 (chị Vi 05/09, chỉnh 2 lần): khối đỏ .hl thưa hẳn với dấu thanh dòng trên (Ộ/Ề/Ứ) — đừng hạ xuống. */
.jf-hero h1 { margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.36; text-transform: uppercase; font-size: clamp(32px, 5.4vw, 56px); text-shadow: 0 2px 26px rgba(0,0,0,.4); }
.jf-hero h1 .kicker { display: block; font-size: clamp(17px, 1.9vw, 23px); letter-spacing: .22em; font-weight: 800; opacity: .92; margin-bottom: 12px; }
.jf-hero h1 .hl { background: var(--red); padding: .06em .16em; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.jf-hero__sub { color: #DCE0F2; font-size: clamp(16px, 2vw, 18.5px); max-width: 50ch; margin: 20px 0 0; }
.jf-hero__sub b { color: #fff; }
.jf-hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Dòng nhỏ ngay dưới 2 nút hero: trắng mờ, nhắc số lượng có hạn. */
.jf-hero__note { margin-top: 13px; font-size: 13.5px; color: rgba(255,255,255,.85); }
/* Meta = khung "glass" cùng ngôn ngữ nút Xem chương trình: nền trắng mờ + viền trắng .35 + bo 14px. */
.jf-hero__meta { margin-top: 26px; font-size: 14px; color: #EDEFFA; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); border-radius: 14px; padding: 14px 20px; }
.jf-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.jf-hero__meta i { color: #fff; opacity: .85; font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .jf-hero::before { animation: jf-kb 14s ease-out both; }
  @keyframes jf-kb { from { transform: scale(1.07); } to { transform: scale(1); } }
  .jf-hero__body > * { animation: jf-in .65s cubic-bezier(.16,1,.3,1) both; }
  .jf-hero__body > *:nth-child(2) { animation-delay: .08s; }
  .jf-hero__body > *:nth-child(3) { animation-delay: .16s; }
  .jf-hero__body > *:nth-child(4) { animation-delay: .24s; }
  .jf-hero__body > *:nth-child(5) { animation-delay: .3s; }
  @keyframes jf-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* Marquee mảnh */
.jf-marq { background: var(--red); color: #fff; overflow: hidden; padding: 10px 0; position: relative; z-index: 2; }
.jf-marq__track { display: flex; gap: 56px; white-space: nowrap; width: max-content; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.jf-marq__track span { display: inline-flex; align-items: center; gap: 56px; }
.jf-marq__track em { font-style: normal; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .jf-marq__track { animation: jf-marq 34s linear infinite; }
  @keyframes jf-marq { to { transform: translateX(-50%); } }
}

/* ═══ 3 · DOANH NGHIỆP CÓ MẶT ══════════════════════════════════════════ */
.jf-firms { background: var(--sky); padding: 60px 0 64px; }
.jf-firms__head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.jf-firms__head .jf-sub { margin-inline: auto; }
/* max-width 800: 3 thẻ 250px/hàng → 6 DN chia 3+3 cân (05/09), HWK vẫn riêng hàng đầu. */
.jf-firms__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 800px; margin: 0 auto; }
.jf-firm { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px 18px; width: 250px; text-align: center; transition: transform .16s ease, box-shadow .16s ease; }
/* Thẻ HWK (đầu danh sách) riêng 1 hàng trên cùng + to hơn — chị Vi 05/09. Break ép xuống hàng vì flex-wrap không tự tách. */
.jf-firm--lead { width: 340px; border-color: var(--peri); }
.jf-firm--lead .jf-firm__logo { height: 76px; }
.jf-firms__break { flex-basis: 100%; height: 0; }
.jf-firm:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.jf-firm__logo { height: 66px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.jf-firm__logo img { max-height: 100%; max-width: 86%; object-fit: contain; }
.jf-firm__name { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.3; display: block; }
.jf-firm__note { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.jf-firms__note { margin-top: 24px; text-align: center; font-size: 13.5px; color: var(--muted); }
.jf-firms__note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 4 · ĐẾN NGÀY HỘI ĐỂ (thẻ lớn: ảnh + 5 dòng) ═════════════════════ */
.jf-why { padding: 56px 0 64px; }
.jf-why__card { display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--sh-card); }
.jf-why__items h2 { margin: 4px 0 6px; }
.jf-why__photo { position: relative; min-height: 520px; }
.jf-why__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jf-why__photo .tag { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--navy-ink); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 7px 15px; box-shadow: var(--sh-card); }
.jf-why__items { list-style: none; padding: 30px 40px; display: flex; flex-direction: column; justify-content: center; }
.jf-why__items li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 17px 0; align-items: start; }
.jf-why__items li + li { border-top: 1px solid var(--line); }
/* line-height khớp dòng đầu của title (b: 15.5px × 1.35) để số căn thẳng hàng đầu dòng, không nhô cao. */
.jf-why__items .no { font-size: 24px; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; line-height: 1.35; }
.jf-why__items b { display: block; color: var(--navy-ink); font-size: 15.5px; line-height: 1.35; }
.jf-why__items p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* ═══ 4 · CƠ HỘI PHỎNG VẤN 1:1 (panel sáng: tiêu đề + 2 nút) ═══════════ */
/* Chốt 05/09 (mockup-hook-v3 option G): 2 thẻ medallion — trái tham dự tự do, phải PV 1:1 + ruy băng chéo.
   Nền section TRẮNG (⛔ không bg-soft — màn .jf-day ngay dưới đã bg-soft, 2 nền giống nhau dính là lỗi cũ). */
.jf-hook { padding: 60px 0 64px; background: #fff; }
.jf-hook__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.jf-hook__head p { color: var(--muted); margin-top: 12px; }
.jf-hook__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.jf-hook__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 0 0 30px; box-shadow: var(--sh-card); overflow: hidden; }
.jf-hook__top { display: flex; align-items: center; gap: 16px; padding: 26px 30px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sky), #fff); }
.jf-hook__top .md { width: 54px; height: 54px; border-radius: 16px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; box-shadow: 0 8px 20px rgba(39,52,139,.28); }
.jf-hook__top .t small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jf-hook__top .t b { display: block; font-size: 18px; font-weight: 800; color: var(--navy-ink); line-height: 1.3; }
.jf-hook__body { padding: 20px 30px 0; display: flex; flex-direction: column; flex: 1; }
.jf-hook__body .lead { font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.jf-hook__body ul { list-style: none; margin: 8px 0 24px; }
.jf-hook__body li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 15px; }
.jf-hook__body li + li { border-top: 1px solid var(--line); }
.jf-hook__body li i { color: #fff; background: var(--navy); border-radius: 50%; width: 21px; height: 21px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 3px; }
.jf-hook__card .jf-btn { margin: auto 30px 0; justify-content: center; }
.jf-hook__card--vip { border: 1.5px solid var(--rose); }
/* padding-right 92px: chừa chỗ cho ruy băng góc — desktop hẹp tiêu đề không chui vào gầm ruy băng (bug 05/09). */
.jf-hook__card--vip .jf-hook__top { background: linear-gradient(180deg, var(--red-soft), #fff); border-bottom-color: var(--rose); padding-right: 92px; }
.jf-hook__card--vip .jf-hook__top .md { background: var(--red); box-shadow: 0 8px 20px rgba(209,32,38,.32); }
.jf-hook__card--vip .jf-hook__top .t small { color: var(--red-deep); }
.jf-hook__card--vip .jf-hook__body li i { background: var(--red); }
.jf-hook__card--vip .jf-hook__body li + li { border-top-color: var(--red-soft); }
/* Ruy băng chéo góc: width cố định + 45deg, top/right đẩy xa góc để CHỮ không bị mép thẻ cắt (đã dính 04/09) — chỉ 2 đuôi bị cắt. */
.jf-hook__ribbon { position: absolute; top: 34px; right: -62px; width: 250px; text-align: center; transform: rotate(45deg); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 7px 0; box-shadow: 0 4px 12px rgba(209,32,38,.3); white-space: nowrap; z-index: 2; }

/* ═══ 5 · NGÀY HỘI CÓ GÌ — GỘP NGHỀ + CHƯƠNG TRÌNH (chép từ mockup) ════ */
.jf-day { padding:64px 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.jf-day__head { text-align:center; max-width:680px; margin:0 auto 28px; }
.jf-day__head .jf-sub { margin-inline:auto; }
.jf-day__grid { display:grid; grid-template-columns:1.06fr 1fr; gap:22px; align-items:stretch; }

/* thẻ chung */
.jf-day__card { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-card); overflow:hidden; display:flex; flex-direction:column; }
.jf-day__card > header { display:flex; align-items:center; gap:10px; padding:18px 24px 14px; border-bottom:1px solid var(--line); }
/* Header thẻ nghề: nền gradient sky→trắng cho tiêu đề nổi (05/09) — đồng bộ header thẻ khối Gặp gỡ DN. Thẻ sched giữ nguyên (đã nền sky). */
.jf-day__card:not(.jf-day__card--sched) > header { background: linear-gradient(180deg, var(--sky), #fff); }
.jf-day__card:not(.jf-day__card--sched) > header i { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(39,52,139,.25); }
.jf-day__card > header i { width:34px; height:34px; border-radius:10px; background:var(--sky); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:18px; }
.jf-day__card > header b { font-size:17px; font-weight:800; color:var(--navy-ink); }
.jf-day__card > header b em { font-style:normal; color:var(--red); }
.jf-day__card > header span { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--muted); }

/* trái — 7 nghề, hàng nén */
.jf-day__job { display:grid; grid-template-columns:38px 1fr auto; gap:14px; align-items:center; padding:10.5px 24px; }
.jf-day__job + .jf-day__job { border-top:1px solid var(--line); }
.jf-day__job i { width:38px; height:38px; border-radius:10px; background:var(--sky); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:19px; }
.jf-day__job b { display:block; font-weight:800; color:var(--navy-ink); font-size:14px; line-height:1.25; }
.jf-day__job p { color:var(--muted); font-size:12.5px; margin-top:1px; }
.jf-day__job .yr { font-size:11.5px; font-weight:700; color:var(--navy-ink); background:var(--sky); border-radius:999px; padding:3px 11px; white-space:nowrap; }
.jf-day__pay { margin-top:auto; display:flex; align-items:center; gap:12px; padding:14px 24px; background:var(--red-soft); border-top:1px solid var(--rose); }
.jf-day__pay i { font-size:22px; color:var(--red); flex-shrink:0; }
.jf-day__pay span { color:var(--red); font-size:13px; }
.jf-day__pay b { color:var(--red); font-size:14.5px; }

/* phải — agenda kiểu LỊCH: nền sky, mỗi mốc là chip trắng, ô giờ đặc màu */
.jf-day__card--sched { background:var(--sky); }
.jf-day__card--sched > header { background:#fff; }
.jf-day__tl { padding:16px 18px 6px; position:relative; flex:1; }
.jf-tl__part { display:flex; align-items:baseline; gap:8px; margin:16px 4px 9px; font-weight:800; color:var(--navy-ink); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.jf-tl__part:first-child { margin-top:2px; }
.jf-tl__part span { color:var(--muted); font-weight:600; font-size:12px; text-transform:none; letter-spacing:0; }
.jf-tl__row { display:grid; grid-template-columns:60px 1fr; gap:0; align-items:stretch; background:#fff; border:1px solid #fff; border-radius:12px; box-shadow:0 2px 8px rgba(23,30,78,.06); overflow:hidden; }
.jf-tl__row + .jf-tl__row { margin-top:7px; }
.jf-tl__row time { display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:12.5px; font-variant-numeric:tabular-nums; background:var(--navy); }
.jf-tl__row--pm time { background:var(--red); }
.jf-tl__row p { font-size:14px; font-weight:600; color:var(--ink); padding:11px 14px; }
.jf-day__free { padding:12px 18px 18px; }
.jf-day__free a { background:#fff; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid var(--line); border-radius:999px; padding:11px 18px; font-weight:700; font-size:14px; color:var(--navy-ink); text-decoration:none; }
.jf-day__free a i { color:var(--red); }
.jf-day__free a:hover { border-color:var(--peri); }

/* mobile — chép từ mockup */
@media (max-width: 900px) {
  .jf-day { padding:44px 0; }
  .jf-day__grid { grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 640px) {
  .jf-day__job { padding:10px 16px; grid-template-columns:34px 1fr; gap:12px; }
  .jf-day__job i { width:34px; height:34px; font-size:17px; }
  .jf-day__job .yr { display:none; }
  .jf-day__job p[data-nam]:not([data-nam=""])::after { content:" · " attr(data-nam); }
  .jf-day__card > header, .jf-day__pay, .jf-day__tl, .jf-day__free { padding-left:16px; padding-right:16px; }
}

/* ═══ 10 · FORM 2 CỘT ══════════════════════════════════════════════════ */
/* Nền section: đỏ pha rất nhạt + confetti chấm mờ màu brand (đỏ/hồng/peri) + border-top rose */
.jf-formsec { padding: 64px 0 72px; background-color: var(--red-mist); border-top: 1px solid var(--rose);
  background-image:
    radial-gradient(circle 5px at 8% 18%,  rgba(209,32,38,.14) 98%, transparent),
    radial-gradient(circle 4px at 16% 72%, rgba(166,171,211,.4) 98%, transparent),
    radial-gradient(circle 6px at 27% 34%, rgba(245,200,202,.8) 98%, transparent),
    radial-gradient(circle 4px at 45% 12%, rgba(209,32,38,.10) 98%, transparent),
    radial-gradient(circle 5px at 62% 80%, rgba(245,200,202,.8) 98%, transparent),
    radial-gradient(circle 4px at 73% 20%, rgba(166,171,211,.4) 98%, transparent),
    radial-gradient(circle 6px at 87% 55%, rgba(209,32,38,.12) 98%, transparent),
    radial-gradient(circle 4px at 94% 24%, rgba(245,200,202,.85) 98%, transparent),
    radial-gradient(circle 5px at 36% 88%, rgba(166,171,211,.35) 98%, transparent); }
.jf-formsec__head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.jf-formsec__head .jf-sub { margin-inline: auto; }

/* Card = TẤM VÉ: border rose, viền đỏ 5px đỉnh, 2 cột .85/1.15 */
.jf-form { max-width: 1020px; margin: 32px auto 0; background: #fff; border: 1px solid var(--rose); border-top: 5px solid var(--red); border-radius: 22px; box-shadow: var(--sh-pop); overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; position: relative; }

/* ── CUỐNG VÉ (panel trái) ── */
.jf-form__panel { position: relative; color: var(--ink); padding: 34px 30px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FBF5F5, #FDECEC); border-right: 1px solid var(--rose); }
.jf-form__panel h3 { font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--navy-ink); }
/* băng vé đỏ bleed sát mép */
.jf-tk__band { margin: -34px -30px 24px; background: var(--red); color: #fff; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 12px 10px; }
.jf-tk__band i { margin-right: 7px; }
/* lưới boarding-pass */
.jf-tk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 20px; }
.jf-tk__cell--full { grid-column: 1 / -1; }
.jf-tk__cell span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.jf-tk__cell b { font-size: 15px; font-weight: 800; color: var(--navy-ink); line-height: 1.35; }
.jf-tk__cell small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
/* Mã vạch + serial: đã bỏ theo chị Vi 05/09. */
/* 3 dòng lợi ích */
.jf-form__perks { margin-top: 22px; }
.jf-form__perks p { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.jf-form__perks p + p { margin-top: 9px; }
.jf-form__perks i { color: var(--red); font-size: 17px; margin-top: 1px; }

/* ── THÂN VÉ (form phải): ranh giới răng cưa + 2 khấc tròn ── */
.jf-form__body { padding: 32px 34px 34px; position: relative; border-left: 2px dashed var(--rose); }
.jf-form__body::before, .jf-form__body::after { content: ""; position: absolute; left: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--red-mist); border: 1px solid var(--rose); }
.jf-form__body::before { top: -14px; }
.jf-form__body::after { bottom: -14px; }
.jf-grp { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.jf-grp i { color: var(--red); margin-right: 6px; }
.jf-grp--mt { margin-top: 26px; }
.jf-grp .req { color: var(--red); }
.jf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.jf-field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy-ink); margin-bottom: 6px; }
.jf-field .req { color: var(--red); }
.jf-field input, .jf-field select, .jf-field textarea { width: 100%; font-family: var(--ff); font-size: 15px; color: var(--ink); background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none; transition: border-color .15s ease, background .15s ease; }
.jf-field input::placeholder, .jf-field textarea::placeholder { color: #9B9EAF; }
.jf-field input:focus, .jf-field select:focus, .jf-field textarea:focus { border-color: var(--navy); background: #fff; }
.jf-field.thu-dien-tu, .thu-dien-tu { display: none; }

/* radio 2 thẻ icon */
.jf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jf-choice > span { display: block; }
.jf-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jf-choice__card { position: relative; display: block; height: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 14px 13px 52px; cursor: pointer; background: #fff; transition: border-color .15s ease, background .15s ease; }
.jf-choice__card i.ic { position: absolute; left: 13px; top: 14px; width: 28px; height: 28px; border-radius: 8px; background: var(--sky); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.jf-choice__card b { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy-ink); }
.jf-choice__card span { font-size: 12.5px; color: var(--muted); }
.jf-choice input:checked + .jf-choice__card { border-color: var(--red); background: var(--red-soft); }
.jf-choice input:checked + .jf-choice__card i.ic { background: #fff; color: var(--red); }
.jf-choice input:checked + .jf-choice__card::after { content: "\ea5e"; font-family: "tabler-icons"; position: absolute; right: 11px; top: 9px; color: var(--red); font-size: 17px; }
.jf-choice input:focus-visible + .jf-choice__card { outline: 2px solid var(--navy); outline-offset: 2px; }
/* gate B1: thẻ Phỏng vấn bị khoá → mờ .55 như card --off của mockup */
#jf-loai-pv-wrap.is-disabled .jf-choice__card { opacity: .55; cursor: not-allowed; }
.jf-hint { font-size: 13px; color: var(--red); margin-top: 8px; }
.jf-hint i { margin-right: 5px; }

/* khối nghề = khung nét đứt + CHIP 2 cột */
.jf-nghe { margin-top: 14px; background: var(--bg-soft); border: 1px dashed var(--peri); border-radius: 14px; padding: 14px 16px; }
.jf-nghe[hidden] { display: none; }
.jf-nghe__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.jf-nghe__top b { font-size: 13.5px; font-weight: 700; color: var(--navy-ink); }
.jf-nghe__top span { font-size: 12px; color: var(--muted); }
.jf-nghe__desc { font-size: 12.5px; color: var(--muted); margin: -6px 0 10px; }
.jf-nghe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jf-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 11px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.jf-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jf-chip i { font-size: 15px; color: var(--peri); flex: 0 0 auto; }
.jf-chip .ti-square-check { display: none; }
.jf-chip:has(input:checked) { border-color: var(--red); background: var(--red-soft); font-weight: 600; }
.jf-chip:has(input:checked) i { color: var(--red); }
.jf-chip:has(input:checked) .ti-square { display: none; }
.jf-chip:has(input:checked) .ti-square-check { display: inline-block; }
.jf-chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* lời nhắn + nút submit + bảo mật */
.jf-more { margin-top: 16px; }
.jf-more summary { cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--red); list-style: none; }
.jf-more summary::-webkit-details-marker { display: none; }
.jf-more summary::before { content: "+ "; }
.jf-more textarea { margin-top: 10px; }
.jf-submit { margin-top: 18px; }
.jf-submit button { width: 100%; font-family: var(--ff); font-size: 16.5px; font-weight: 800; color: #fff; background: var(--red); border: 0; border-radius: 999px; padding: 16px; cursor: pointer; box-shadow: 0 10px 26px rgba(209,32,38,.3); transition: background .15s ease; }
.jf-submit button:hover { background: var(--red-deep); }
.jf-privacy { display: flex; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.jf-privacy i { color: var(--red); margin-top: 1px; }

/* Đếm ngược — 3 thẻ trắng số đỏ viền rose (JS #jf-countdown giữ nguyên) */
.jf-cd { margin-top: 26px; }
.jf-cd[hidden] { display: none; }
.jf-cd__label { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.jf-cd__row { display: flex; gap: 10px; }
.jf-cd__box { flex: 1; text-align: center; background: #fff; border: 1px solid var(--rose); border-radius: 14px; padding: 13px 6px 10px; box-shadow: 0 4px 14px rgba(209,32,38,.08); }
.jf-cd__box b { display: block; font-size: 28px; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; line-height: 1; }
.jf-cd__box span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.jf-countdown__live { display: inline-block; font-weight: 800; color: var(--red); background: var(--red-soft); border-radius: 999px; padding: 6px 14px; font-size: 14px; }

/* Khối lỗi validate / ghi chú trang cảm ơn (giữ chức năng — chữ đỏ dùng --red) */
.jf-alert { display: flex; gap: 12px; align-items: flex-start; background: var(--red-soft); border: 1px solid var(--rose); color: var(--red); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 22px; font-size: 14.5px; }
.jf-alert i, .jf-alert > span:first-child { color: var(--red); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.jf-alert b { color: var(--red-ink); }

/* Trang cảm ơn */
.jf-thanks { min-height: 72vh; display: flex; align-items: center; padding: 64px 0; }
.jf-thanks__card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 20px; box-shadow: var(--sh-pop); padding: 48px 40px; text-align: center; }
.jf-thanks__ico { width: 72px; height: 72px; border-radius: 50%; background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 20px; }
.jf-thanks__card h1 { font-size: 28px; font-weight: 900; color: var(--navy-ink); letter-spacing: -.02em; }
.jf-thanks__card > p { color: var(--muted); font-size: 16px; max-width: 460px; margin: 10px auto 0; }
.jf-thanks__card > p b { color: var(--navy-ink); }
.jf-thanks .jf-alert { text-align: left; margin: 26px auto 0; max-width: 480px; }
.jf-thanks__back { margin-top: 28px; }

/* ═══ 11 · FOOTER ══════════════════════════════════════════════════════ */
/* Footer đã BỎ 05/09 — trang dừng ở form. Chỉ còn dòng credit ảnh nhỏ cuối section form (license CC BY-SA). */
.jf-credit { text-align: center; font-size: 11px; color: #A6A3AC; margin-top: 34px; }

/* ═══ STICKY CTA (nút nổi bám đáy) ═════════════════════════════════════ */
/* Mobile: bar full-width nền trắng viền trên nhẹ. Ẩn mặc định, trượt lên khi .is-on. */
.jf-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(23,30,78,.12);
  transform: translateY(130%); opacity: 0; visibility: hidden;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease, visibility .28s; }
.jf-sticky.is-on { transform: none; opacity: 1; visibility: visible; }
.jf-sticky .jf-btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .jf-sticky { transition: opacity .2s ease, visibility .2s; } }
/* Desktop: pill nổi góc phải dưới (không full-width, không nền bar). */
@media (min-width: 720px) {
  .jf-sticky { left: auto; right: 24px; bottom: 24px; padding: 0;
    background: transparent; border: 0; box-shadow: none; }
  .jf-sticky .jf-btn { width: auto; box-shadow: 0 12px 30px rgba(209,32,38,.42); }
}

/* ═══ NÚT CHAT FANPAGE (FAB tròn đỏ, nằm TRÊN sticky CTA) ══════════════ */
.jf-chat { position: fixed; right: 16px; bottom: 16px; z-index: 61;
  transition: bottom .28s cubic-bezier(.16,1,.3,1), opacity .28s ease, visibility .28s, transform .28s ease; }
.jf-chat a { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(209,32,38,.45); }
.jf-chat a:hover { background: var(--red-deep); transform: translateY(-2px); }
.jf-chat i { font-size: 27px; }
/* Sticky mobile = bar full-width (~64px): nâng nút chat lên trên bar khi bar hiện. */
.jf-chat.is-raised { bottom: 84px; }
/* Chân trang trong tầm nhìn (sticky đã ẩn để khỏi che credit) → nút chat cũng lui đi. */
.jf-chat.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
@media (min-width: 720px) {
  .jf-chat { right: 24px; bottom: 24px; }
  .jf-chat.is-raised { bottom: 92px; } /* trên pill đỏ (bottom 24 + cao ~50) */
}

/* ═══ MOBILE ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .jf-why__card { grid-template-columns: 1fr; }
  .jf-why__photo { min-height: 280px; }
  .jf-why__items { padding: 8px 24px 18px; }
  .jf-hero__body { padding: 56px 0 72px; }
}
/* Tấm vé ≤900: 1 cột — khấc + răng cưa chuyển sang cạnh NGANG giữa cuống và thân vé */
@media (max-width: 900px) {
  .jf-form { grid-template-columns: 1fr; }
  .jf-form__panel { border-right: 0; border-bottom: 1px solid var(--rose); padding: 28px 22px; }
  .jf-form__body { border-left: 0; border-top: 2px dashed var(--rose); padding: 26px 22px 28px; }
  .jf-form__body::before { top: -14px; left: -14px; bottom: auto; }
  .jf-form__body::after { top: -14px; left: auto; right: -14px; bottom: auto; }
  .jf-grid2, .jf-choice { grid-template-columns: 1fr; }
  /* Khối gặp gỡ DN: 2 thẻ xếp dọc */
  .jf-hook__grid { grid-template-columns: 1fr; }
  .jf-hook__top, .jf-hook__body { padding-left: 22px; padding-right: 22px; }
  .jf-hook__card .jf-btn { margin-left: 22px; margin-right: 22px; }
}
@media (max-width: 640px) {
  .jf-nghe__grid { grid-template-columns: 1fr; } /* chip nghề 1 cột */
  /* Ruy băng chéo thẻ PV: ẨN trên mobile — thẻ hẹp kiểu gì cũng đè tiêu đề (đã dính 05/09);
     ý "số lượng giới hạn" đã có trong dòng quyền lợi cuối. */
  .jf-hook__ribbon { display: none; }
  .jf-hook__card--vip .jf-hook__top { padding-right: 22px; } /* ruy băng đã ẩn → trả lại chỗ cho tiêu đề */

  /* ── FORM VÉ mobile: gọn về ~1 màn hình (desktop KHÔNG đổi) ── */
  /* Cuống vé: ẩn 3 lợi ích (thông tin đã có ở section khác) */
  .jf-form__perks { display: none; }
  /* Panel/thân vé thu padding (băng vé bleed phải khớp padding ngang panel) */
  .jf-form__panel { padding: 24px 20px; }
  .jf-form__body { padding: 22px 20px 24px; }
  /* Giữ lưới thông tin, chữ nhỏ lại một nấc */
  .jf-tk__band { margin: -24px -20px 18px; letter-spacing: .12em; }
  .jf-tk__grid { gap: 12px 14px; margin-top: 16px; }
  .jf-tk__cell span { font-size: 10px; }
  .jf-tk__cell b { font-size: 14px; }
  .jf-tk__cell small { font-size: 12px; }
  /* Đếm ngược: 3 ô thấp hơn */
  .jf-cd { margin-top: 18px; }
  .jf-cd__label { margin-bottom: 8px; }
  .jf-cd__box { padding: 8px 4px 7px; }
  .jf-cd__box b { font-size: 22px; }
  .jf-cd__box span { font-size: 11px; }
  /* Thân vé nén: nhãn nhóm gọn, lưới field khít, input thấp */
  .jf-grp { margin-bottom: 10px; }
  .jf-grp--mt { margin-top: 18px; }
  .jf-grid2 { gap: 10px; }
  .jf-field label { margin-bottom: 4px; font-size: 13px; }
  .jf-field input, .jf-field select, .jf-field textarea { padding: 9px 12px; }
  /* Thẻ radio: desc 12px, padding gọn (icon theo lên) */
  .jf-choice { gap: 10px; }
  .jf-choice__card { padding: 12px 12px 11px 48px; }
  .jf-choice__card i.ic { top: 12px; }
  .jf-choice__card span { font-size: 12px; }
  /* Khối nghề: chip 1 cột padding 7px */
  .jf-nghe { margin-top: 12px; padding: 12px 12px; }
  .jf-chip { padding: 7px 10px; }
  /* Nút gửi gọn */
  .jf-submit { margin-top: 14px; }
  .jf-submit button { padding: 14px; font-size: 16px; }

  /* Khối "Đến Ngày hội để": cột số 46px → 32px, gap 16px → 12px, số 24px → 18px (desktop giữ nguyên). */
  .jf-why__items li { grid-template-columns: 32px 1fr; gap: 12px; }
  .jf-why__items .no { font-size: 18px; }
  /* Gom nhịp dọc trên mobile: các section ~44px trên/dưới. */
  /* Khung meta hero: mỗi mục 1 dòng dọc cho dễ đọc trên mobile. */
  .jf-hero__meta { flex-direction: column; align-items: flex-start; gap: 11px; padding: 16px 18px; }
  .jf-firms  { padding: 44px 0; }
  .jf-why    { padding: 44px 0; }
  .jf-hook   { padding: 44px 0; }
  .jf-formsec{ padding: 44px 0; }
}
@media (max-width: 560px) {
  /* Dải logo doanh nghiệp: 2 cột cho gọn (7 thẻ → ~4 hàng thay vì cuộn dài 1 cột). */
  .jf-firms__grid { gap: 10px; }
  .jf-firm { width: calc(50% - 5px); padding: 14px 10px 12px; border-radius: 12px; }
  .jf-firm--lead { width: 100%; } /* HWK: nguyên 1 hàng trên cùng ở mobile (chị Vi 05/09) */
  /* Thẻ cuối lẻ hàng (vd HWK — đơn vị đồng tổ chức) → span cả hàng cho cân. */
  .jf-firm:last-child:nth-child(odd) { width: 100%; }
  .jf-firm__logo { height: 42px; margin-bottom: 8px; }
  .jf-firm__name { font-size: 12px; line-height: 1.25; }
  .jf-hero__cta .jf-btn { width: 100%; justify-content: center; }
  .jf-topbar { justify-content: center; }
  /* Logo cặp trên mobile: thu chiều cao để logo HWK (bản ngang có chữ) không tràn khung trắng (bug đt 05/09) */
  .jf-topbar__logos { max-width: 100%; gap: 10px; padding: 7px 12px; }
  .jf-topbar__logos img { height: 28px; }
  .jf-topbar__logos img[src*="logo-pne"] { height: 38px; }
  /* ≤560 (mục tiêu 390): nén thêm một nấc, băng vé bleed khớp padding 18px */
  .jf-form__panel { padding: 20px 18px; }
  .jf-form__body { padding: 20px 18px 22px; }
  .jf-tk__band { margin: -20px -18px 16px; }
  input, select, textarea { font-size: 16px; } /* giữ 16px chống iOS auto-zoom khi focus */
}