/* ============================================================
   CAREER QUIZ — CSS gộp từ handoff: quiz.html + result.html + career.html
   Prefix .cq- scoped, không đè theme Flatsome và ngược lại.
   Token màu/font/spacing theo design-system.md — KHÔNG bo góc, hard shadow.
   ============================================================ */

/* ==================== DESIGN TOKENS ==================== */
.cq-root {
  --cq-bg: #F5F3EE;
  --cq-surface: #FFFFFF;
  --cq-ink: #111111;
  --cq-ink-soft: #44443F;
  --cq-muted: #66655F;
  --cq-accent: #00E05A;
  --cq-accent-hover: #067A3A;
  --cq-accent-ink: #0A4D26;
  --cq-line: #111111;
  --cq-line-soft: #D8D5CC;
  --cq-track: #E7E4DB;
  --cq-paper-on-dark: #F5F3EE;
  --cq-r: #0074E4; --cq-i: #6D5AE6; --cq-a: #E0518F;
  --cq-s: #2BD67B; --cq-e: #F59F0A; --cq-c: #0FA8A0;
  --cq-font-display: 'Space Grotesk', 'Be Vietnam Pro', sans-serif;
  --cq-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --cq-font-mono: 'JetBrains Mono', monospace;
  --cq-radius: 0;
  --cq-shadow-hard-sm: 3px 3px 0 var(--cq-ink);
  --cq-shadow-hard: 5px 5px 0 var(--cq-ink);
  --cq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--cq-font-body);
  color: var(--cq-ink);
  background: var(--cq-bg);
  margin: 0;
}
.cq-root * { box-sizing: border-box; }
.cq-app { min-height: 100vh; }
.cq-screen--quiz { min-height: 100vh; display: flex; flex-direction: column; }
.cq-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.cq-mono { font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cq-muted); }
/* Chống CSS Flatsome leak vào button trong plugin */
.cq-root button { margin: 0; }

/* ==================== TOP BAR + PROGRESS (quiz.html) ==================== */
.cq-topbar { position: sticky; top: 0; z-index: 10; background: var(--cq-bg); border-bottom: 1px solid var(--cq-line); }
.cq-topbar__inner { max-width: 760px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cq-back { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; color: var(--cq-ink); font-family: var(--cq-font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 4px; transition: color 120ms; }
.cq-back:hover { color: var(--cq-accent-hover); }
.cq-counter { font-family: var(--cq-font-mono); font-size: 13.5px; font-weight: 700; }
.cq-lang { display: flex; }
.cq-lang__btn { border: 1px solid var(--cq-ink); background: transparent; color: var(--cq-ink); font-family: var(--cq-font-mono); font-size: 11.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.cq-lang__btn + .cq-lang__btn { border-left: none; }
.cq-lang__btn.is-active { background: var(--cq-ink); color: var(--cq-paper-on-dark); }
.cq-progress { height: 8px; background: var(--cq-track); border-top: 1px solid var(--cq-line); }
.cq-progress__fill { height: 100%; background: var(--cq-accent); border-right: 1px solid var(--cq-line); transition: width 360ms var(--cq-ease); }

/* ==================== VÙNG CÂU HỎI ==================== */
.cq-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px 48px; gap: 20px; }
.cq-milestone { background: var(--cq-surface); border: 1px solid var(--cq-line); font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; padding: 8px 18px; animation: cq-fade-up 360ms var(--cq-ease); }
.cq-card { width: 100%; max-width: 660px; background: var(--cq-surface); border: 1px solid var(--cq-line); padding: clamp(24px, 4vw, 40px); }
/* Restart animation slide-in bằng cách đảo 2 animation-name giống hệt nhau theo chẵn/lẻ index câu */
.cq-card.is-entering-a { animation: cq-slide-in-a 280ms var(--cq-ease); }
.cq-card.is-entering-b { animation: cq-slide-in-b 280ms var(--cq-ease); }
.cq-card__prompt { font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cq-muted); margin-bottom: 14px; }
.cq-card__question { font-family: var(--cq-font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; min-height: 2.7em; }

/* ==================== NÚT THANG 5 MỨC ==================== */
.cq-options { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.cq-option {
  display: flex; align-items: center; gap: 16px;
  min-height: 54px;               /* >= 44px chuẩn hit-target mobile */
  padding: 12px 18px; width: 100%;
  border: 1px solid var(--cq-line); border-radius: var(--cq-radius);
  background: var(--cq-surface); color: var(--cq-ink);
  font-family: var(--cq-font-body); font-size: 16px; font-weight: 600; text-align: left;
  cursor: pointer; transition: all 120ms var(--cq-ease);
  text-transform: none; letter-spacing: normal; /* chống theme leak */
}
.cq-option:hover { transform: translate(-2px, -2px); box-shadow: var(--cq-shadow-hard-sm); }
.cq-option:active { transform: translate(0, 0); box-shadow: none; }
.cq-option.is-selected { background: var(--cq-accent); }
.cq-option:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.cq-option__meter { display: flex; gap: 3px; flex-shrink: 0; }
.cq-option__cell { width: 9px; height: 9px; border: 1px solid var(--cq-ink); background: transparent; }
.cq-option__cell.is-filled { background: var(--cq-ink); }
.cq-hint { font-family: var(--cq-font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cq-muted); }

/* ==================== MÀN NHIỆM VỤ MỞ KHÓA (gate) ==================== */
.cq-screen--gate { min-height: 100vh; display: flex; flex-direction: column; }
.cq-gate__title { font-family: var(--cq-font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 12px; }
.cq-gate__desc { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--cq-ink-soft); }
/* Nội dung nhiệm vụ soạn từ wp-admin — ảnh/video co theo card */
.cq-gate__content { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--cq-ink-soft); }
.cq-gate__content p { margin: 0 0 12px; }
.cq-gate__content img { max-width: 100%; height: auto; display: block; border: 1px solid var(--cq-line); }
.cq-gate__content iframe, .cq-gate__content video { max-width: 100%; border: 1px solid var(--cq-line); }
.cq-gate__content .wp-video, .cq-gate__content .fluid-width-video-wrapper { max-width: 100% !important; }
.cq-gate__content button {
  display: inline-block; cursor: pointer; vertical-align: middle; margin-left: 8px;
  border: 1px solid var(--cq-line); border-radius: var(--cq-radius);
  background: var(--cq-surface); color: var(--cq-ink);
  font-family: var(--cq-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 12px; transition: all 120ms var(--cq-ease);
}
.cq-gate__content button:hover { box-shadow: var(--cq-shadow-hard-sm); transform: translate(-2px, -2px); }
.cq-gate__content button:active { box-shadow: none; transform: translate(0, 0); }
.cq-gate__form { display: flex; flex-wrap: wrap; gap: 10px; }
.cq-gate__input {
  flex: 1; min-width: 200px; min-height: 50px;
  border: 1px solid var(--cq-line); border-radius: var(--cq-radius);
  background: var(--cq-bg); color: var(--cq-ink);
  font-family: var(--cq-font-mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 16px; outline: none; transition: all 120ms var(--cq-ease);
}
.cq-gate__input:focus { background: var(--cq-surface); box-shadow: var(--cq-shadow-hard-sm); transform: translate(-2px, -2px); }
.cq-gate__error { margin-top: 14px; font-family: var(--cq-font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: #C0392B; }
.cq-gate.is-shake { animation: cq-shake 280ms var(--cq-ease); }
@keyframes cq-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

/* ==================== MÀN ĐANG TÍNH KẾT QUẢ ==================== */
.cq-screen--loading { min-height: 100vh; display: flex; flex-direction: column; }
.cq-screen--loading .cq-loading { flex: 1; }
.cq-loading { min-height: 100vh; background: var(--cq-ink); color: var(--cq-paper-on-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; text-align: center; }
.cq-loading__spinner { position: relative; width: 72px; height: 72px; }
.cq-loading__ring { position: absolute; inset: 0; border: 1px solid rgba(245,243,238,0.25); border-top-color: var(--cq-accent); animation: cq-spin 0.9s linear infinite; }
.cq-loading__core { position: absolute; inset: 26px; background: var(--cq-accent); animation: cq-pulse 1.2s ease-in-out infinite; }
.cq-loading__msg { font-family: var(--cq-font-mono); font-size: clamp(15px, 2.2vw, 19px); font-weight: 500; max-width: 560px; line-height: 1.6; }
.cq-loading__caret { display: inline-block; margin-left: 3px; color: var(--cq-accent); animation: cq-blink 1s steps(1) infinite; }
.cq-loading__sub { font-family: var(--cq-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,243,238,0.5); }

/* ==================== TRANG KẾT QUẢ (result.html) ==================== */
.cq-rhead { border-bottom: 1px solid var(--cq-line); padding: 0 24px; }
.cq-rhead__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 13px 0; border-bottom: 1px solid var(--cq-line-soft); font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cq-muted); }
.cq-rhead__body { max-width: 1200px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cq-code { display: flex; gap: 10px; }
.cq-code__chip {
  width: clamp(56px, 9vw, 76px); height: clamp(56px, 9vw, 76px);
  border: 1px solid var(--cq-line); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cq-font-display); font-size: clamp(28px, 5vw, 40px); font-weight: 700;
  animation: cq-fade-up 360ms var(--cq-ease) both; /* stagger 80ms/chip qua animation-delay */
}
.cq-rhead__title { font-family: var(--cq-font-display); font-size: clamp(30px, 5vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin: 0; max-width: 900px; }
.cq-rhead__desc { margin: 0; font-size: clamp(15px, 2vw, 17px); line-height: 1.65; color: var(--cq-ink-soft); max-width: 560px; }

/* Nút chia sẻ / hành động */
.cq-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cq-font-display); font-size: 15px; font-weight: 700; border: 1px solid var(--cq-line); padding: 13px 26px; cursor: pointer; transition: all 120ms var(--cq-ease); text-transform: none; letter-spacing: normal; text-decoration: none; }
.cq-btn--accent { background: var(--cq-accent); color: var(--cq-ink); }
.cq-btn--ghost { background: var(--cq-surface); color: var(--cq-ink); }
.cq-btn--dark { background: var(--cq-ink); color: var(--cq-paper-on-dark); }
.cq-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--cq-shadow-hard-sm); }
.cq-btn:active { transform: translate(0, 0); box-shadow: none; }

/* Panel biểu đồ */
.cq-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding-top: clamp(32px, 5vw, 56px); }
.cq-panel { background: var(--cq-surface); border: 1px solid var(--cq-line); padding: 24px; }
.cq-panel__title { font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cq-muted); margin-bottom: 12px; }
/* Radar: polygon vẽ từ tâm ra (scale 0→1, 600ms) — interaction-notes.md */
.cq-radar-shape { transform-origin: 150px 140px; transform: scale(0); transition: transform 600ms var(--cq-ease); }
.cq-radar-shape.is-shown { transform: scale(1); }
/* Bar chart */
.cq-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cq-bar__head { display: flex; justify-content: space-between; font-size: 13.5px; }
.cq-bar__name { font-weight: 600; }
.cq-bar__pct { font-family: var(--cq-font-mono); font-weight: 700; }
.cq-bar__track { height: 10px; background: var(--cq-track); border: 1px solid var(--cq-line); overflow: hidden; }
.cq-bar__fill { height: 100%; width: 0; transition: width 600ms var(--cq-ease); } /* animate 0→% khi vào trang, stagger 60ms */

/* Trait cards */
.cq-trait { background: var(--cq-surface); border: 1px solid var(--cq-line); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cq-trait__chip { width: 32px; height: 32px; border: 1px solid var(--cq-line); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--cq-font-display); font-weight: 700; font-size: 15px; }
.cq-trait__row { display: flex; align-items: center; gap: 10px; }
.cq-trait__name { font-family: var(--cq-font-display); font-weight: 700; }
.cq-trait__pct { margin-left: auto; font-family: var(--cq-font-mono); font-weight: 700; font-size: 13.5px; }
.cq-trait__desc { font-size: 14px; line-height: 1.65; color: var(--cq-ink-soft); }

/* Card nghề */
.cq-career { text-align: left; background: var(--cq-surface); border: 1px solid var(--cq-line); padding: 22px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all 120ms var(--cq-ease); font-family: inherit; text-transform: none; letter-spacing: normal; }
.cq-career:hover { transform: translate(-3px, -3px); box-shadow: var(--cq-shadow-hard); }
.cq-career__badge { display: flex; align-items: center; gap: 8px; font-family: var(--cq-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cq-career__dot { width: 10px; height: 10px; border: 1px solid var(--cq-line); }
.cq-career__name { font-family: var(--cq-font-display); font-size: 18px; font-weight: 700; line-height: 1.3; }
.cq-career__desc { font-size: 13.5px; line-height: 1.6; color: var(--cq-ink-soft); }
.cq-career__salary { font-family: var(--cq-font-mono); font-size: 12.5px; font-weight: 700; }
.cq-career__link { font-family: var(--cq-font-display); font-size: 14px; font-weight: 700; color: var(--cq-accent-hover); }

.cq-h2 { font-family: var(--cq-font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; }
.cq-disclaimer { font-family: var(--cq-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--cq-muted); text-align: center; max-width: 480px; line-height: 1.7; margin: 0 auto; }

/* ==================== TRANG CHI TIẾT NGHỀ (career.html) ==================== */
.cq-chead { background: var(--cq-surface); border-bottom: 1px solid var(--cq-line); }
.cq-chead__inner { max-width: 760px; margin: 0 auto; padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.cq-chead .cq-back { align-self: flex-start; padding: 8px 0; }
.cq-type-badge { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-family: var(--cq-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cq-type-badge__dot { width: 10px; height: 10px; border: 1px solid var(--cq-line); }
.cq-chead__title { margin: 0; font-family: var(--cq-font-display); font-size: clamp(28px, 4.5vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.cq-chead__desc { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--cq-ink-soft); }

.cq-cbody { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; display: flex; flex-direction: column; gap: 16px; }
/* Khối lương — dải đen, số accent */
.cq-salary { background: var(--cq-ink); color: var(--cq-paper-on-dark); padding: 20px 24px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.cq-salary__label { font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,243,238,0.6); }
.cq-salary__value { font-family: var(--cq-font-display); font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; color: var(--cq-accent); }

.cq-block { background: var(--cq-surface); border: 1px solid var(--cq-line); padding: 24px; }
.cq-block__title { font-family: var(--cq-font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cq-muted); margin-bottom: 14px; }
.cq-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.cq-skill { display: inline-block; font-size: 13.5px; font-weight: 600; border: 1px solid var(--cq-line); background: var(--cq-bg); padding: 7px 16px; }
/* Lộ trình */
.cq-road { display: flex; gap: 14px; }
.cq-road__rail { display: flex; flex-direction: column; align-items: center; }
.cq-road__num { width: 28px; height: 28px; background: var(--cq-ink); color: var(--cq-paper-on-dark); display: flex; align-items: center; justify-content: center; font-family: var(--cq-font-mono); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.cq-road__line { width: 1px; flex: 1; background: var(--cq-line-soft); min-height: 14px; }
.cq-road__text { font-size: 14.5px; line-height: 1.55; color: var(--cq-ink-soft); padding: 5px 0 20px; }
/* Card nghề liên quan */
.cq-rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cq-rel { text-align: left; background: var(--cq-surface); border: 1px solid var(--cq-line); padding: 18px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: all 120ms var(--cq-ease); font-family: inherit; text-transform: none; letter-spacing: normal; }
.cq-rel:hover { transform: translate(-2px, -2px); box-shadow: var(--cq-shadow-hard-sm); }
.cq-rel__name { font-family: var(--cq-font-display); font-size: 16px; font-weight: 700; }
.cq-rel__link { font-family: var(--cq-font-display); font-size: 13.5px; font-weight: 700; color: var(--cq-accent-hover); }

/* ==================== KEYFRAMES ==================== */
@keyframes cq-slide-in-a { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cq-slide-in-b { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cq-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cq-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cq-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
@keyframes cq-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }