/* ===== Trắc nghiệm Holland ===== */
.hl-intro{text-align:center}
.hl-badge{display:inline-block;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad);padding:5px 14px;border-radius:999px}
.hl-ic{font-size:42px;margin:10px 0 4px}
.hl-intro h1{font-size:clamp(20px,4vw,28px);font-weight:900;margin:6px 0 8px}
.hl-intro p{color:var(--muted);font-size:14.5px;max-width:560px;margin:0 auto 14px}
.hl-method{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:12px 14px;font-size:13px;color:#166534;text-align:left;max-width:560px;margin:0 auto 16px;line-height:1.7}
.hl-method b{color:#15803d}

/* progress */
.hl-prog{margin-bottom:14px}
.hl-prog-top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.hl-prog-top b{color:var(--brand)}
.hl-track{height:6px;background:#eceefb;border-radius:10px;overflow:hidden}
.hl-fill{height:100%;border-radius:10px;background:var(--grad);transition:width .4s ease;width:0}

/* question */
.hl-qhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hl-cat{font-size:11px;font-weight:700;padding:3px 11px;border-radius:999px;background:#e0e7ff;color:#3730a3}
.hl-cat.skill{background:#d1fae5;color:#065f46}.hl-cat.personality{background:#fce7f3;color:#9d174d}
.hl-cat.goal{background:#fef3c7;color:#92400e}.hl-cat.scenario{background:#e0e7ff;color:#3730a3}
.hl-hint{font-size:11.5px;font-weight:600;color:var(--warn);background:#fffaeb;padding:3px 11px;border-radius:999px}
.hl-qtext{font-size:16px;font-weight:700;margin-bottom:14px;line-height:1.5}
.hl-opts{display:flex;flex-direction:column;gap:7px}
.hl-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:2px solid var(--line);border-radius:11px;cursor:pointer;font-size:14px;transition:.15s;line-height:1.45;background:#fff}
.hl-opt:hover{border-color:var(--brand);background:#f8f7ff}
.hl-opt.on{border-color:var(--brand);background:#f4f2ff;font-weight:600}
.hl-opt.dis{opacity:.4;cursor:not-allowed}
.hl-chk{width:20px;height:20px;min-width:20px;border:2px solid var(--line);border-radius:6px;display:grid;place-items:center;margin-top:1px;transition:.15s}
.hl-opt.on .hl-chk{border-color:var(--brand);background:var(--brand)}
.hl-opt.on .hl-chk::after{content:'✓';color:#fff;font-size:12px;font-weight:800}
.hl-opt.none{border-style:dashed;color:var(--muted);background:#fafbfc}
.hl-opt.none.on{border-style:solid;border-color:var(--bad);background:#fef2f2;color:#991b1b}
.hl-opt.none.on .hl-chk{border-color:var(--bad);background:var(--bad)}
.hl-selc{text-align:right;font-size:12px;color:var(--muted);margin-top:8px}
.hl-selc b{color:var(--brand)}

/* nav */
.hl-nav{display:flex;gap:8px;margin-top:14px}
.hl-nb{flex:1;padding:13px;border:2px solid var(--line);border-radius:11px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:#fff;color:var(--muted);transition:.15s}
.hl-nb.back:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.hl-nb.next{background:var(--grad);color:#fff;border-color:transparent}
.hl-nb.done{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.hl-nb:disabled{opacity:.4;cursor:not-allowed}

/* result */
.hl-rhead{text-align:center;margin-bottom:14px}
.hl-rhead h2{font-size:20px;font-weight:900}
.hl-rhead p{color:var(--muted);font-size:13.5px;margin-top:2px}
.hl-rhead p b{color:var(--brand);letter-spacing:2px;font-size:16px}
.hl-radar{height:300px;max-width:420px;margin:0 auto 16px}
.hl-profile{background:linear-gradient(135deg,#f4f2ff,#fff0f7);border:1px solid #ece9ff;border-radius:14px;padding:16px;margin-bottom:14px}
.hl-profile h3{font-size:14px;font-weight:700;margin-bottom:10px}
.hl-brow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hl-bl{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
.hl-bn{font-size:12.5px;font-weight:600;color:var(--muted);width:78px;flex:0 0 auto}
.hl-bt{flex:1;height:8px;background:#e9eaf2;border-radius:10px;overflow:hidden}
.hl-bf{height:100%;border-radius:10px;transition:width .7s ease}
.hl-bf.gd{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.hl-bp{font-size:12px;font-weight:700;min-width:34px;text-align:right;color:var(--muted)}
.hl-note{border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:500;margin-bottom:14px}
.hl-note.ok{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.hl-note.warn{background:#fffaeb;color:#b54708;border:1px solid #fedf89}
.hl-gt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 10px}
.hl-major{display:block;position:relative;border:2px solid #ece9ff;border-radius:13px;padding:13px 14px 14px;margin-bottom:9px;background:linear-gradient(135deg,#f8f7ff,#fff);transition:.2s}
.hl-major:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,30,80,.1);border-color:#d8d4ff}
.hl-major.gold{border-color:#fcd34d;background:linear-gradient(135deg,#fffbeb,#fef3c7)}
.hl-major.silver{border-color:#cbd5e1;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
.hl-major.bronze{border-color:#fbbf77;background:linear-gradient(135deg,#fffbeb,#fefce8)}
.hl-rank{position:absolute;top:10px;right:12px;font-size:11px;font-weight:800;color:#fff;background:var(--brand);padding:2px 9px;border-radius:10px}
.hl-major.gold .hl-rank{background:#d97706}.hl-major.silver .hl-rank{background:#64748b}.hl-major.bronze .hl-rank{background:#b45309}
.hl-major h3{font-size:15px;font-weight:700;padding-right:60px;margin-bottom:3px}
.hl-mc{font-size:11.5px;color:var(--muted);margin-bottom:8px;line-height:1.4}
.hl-mc b{color:var(--brand)}
.hl-bw{display:flex;align-items:center;gap:8px}
.hl-acts{display:flex;gap:10px;margin-top:14px}
.btn-go.alt{background:linear-gradient(135deg,#11a8d4,#2f6bff);box-shadow:0 8px 20px rgba(47,107,255,.28)}
.btn-go.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.hl-acts .btn-go{flex:1;text-align:center;justify-content:center;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
@media(max-width:560px){.hl-acts{flex-direction:column}}

/* Mobile: nút Quay lại / Tiếp theo LUÔN NỔI ở đáy — chỉ cần dê chọn đáp án rồi bấm */
@media(max-width:640px){
  .hl-quiz .hl-nav{position:fixed;left:0;right:0;bottom:0;margin:0;padding:10px 12px;gap:10px;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,20,60,.1);z-index:60}
  .hl-quiz{padding-bottom:84px}   /* chừa chỗ cho thanh nút cố định */
}