/* CSS riêng của trang /trac-nghiem/ (tách từ bản cũ). */
:root{
  --ground:#E8EBF0; --surface:#FFFFFF; --surface-2:#F2F4F8;
  --ink:#14181F; --ink-2:#4A5260; --ink-3:#79818F;
  --line:#D2D7E0; --line-2:#E3E7ED;
  --accent:#2E3A8C; --on-accent:#FFFFFF;
  --t-mbti:#2E3A8C; --t-disc:#A3323F; --t-holland:#0E6B62; --t-big5:#8A5A12; --t-eq:#6B2F8F;
  --ax-ei:#B4531F; --ax-sn:#0E6B62; --ax-tf:#7A2E72; --ax-jp:#2E3A8C;
  --g-nt:#2E3A8C; --g-nf:#0E6B62; --g-sj:#8A5A12; --g-sp:#A33A57;
  --ok:#1E7A4B; --scrim:rgba(20,24,31,.55);
  --shadow:0 1px 2px rgba(20,24,31,.06), 0 8px 24px -12px rgba(20,24,31,.18);
  --shadow-lg:0 24px 60px -20px rgba(20,24,31,.45);
  --radius:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#101319; --surface:#181C24; --surface-2:#1F242E;
  --ink:#E9ECF2; --ink-2:#A9B1BF; --ink-3:#79818F;
  --line:#2C323D; --line-2:#242933;
  --accent:#93A2F2; --on-accent:#101319;
  --t-mbti:#93A2F2; --t-disc:#E8808D; --t-holland:#5FBFB2; --t-big5:#D6A64E; --t-eq:#C79BE8;
  --ax-ei:#E0925F; --ax-sn:#5FBFB2; --ax-tf:#CE8FC6; --ax-jp:#93A2F2;
  --g-nt:#93A2F2; --g-nf:#5FBFB2; --g-sj:#D6A64E; --g-sp:#E0798F;
  --ok:#5FC98E; --scrim:rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --ground:#101319; --surface:#181C24; --surface-2:#1F242E;
  --ink:#E9ECF2; --ink-2:#A9B1BF; --ink-3:#79818F;
  --line:#2C323D; --line-2:#242933;
  --accent:#93A2F2; --on-accent:#101319;
  --t-mbti:#93A2F2; --t-disc:#E8808D; --t-holland:#5FBFB2; --t-big5:#D6A64E; --t-eq:#C79BE8;
  --ax-ei:#E0925F; --ax-sn:#5FBFB2; --ax-tf:#CE8FC6; --ax-jp:#93A2F2;
  --g-nt:#93A2F2; --g-nf:#5FBFB2; --g-sj:#D6A64E; --g-sp:#E0798F;
  --ok:#5FC98E; --scrim:rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{height:auto}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
h1,h2,h3,.disp{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; text-wrap:balance; letter-spacing:-.015em}
.mono{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
button{font:inherit; color:inherit; cursor:pointer}
button[disabled]{cursor:not-allowed; opacity:.45}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.topbar .wrap{display:flex; align-items:center; gap:10px; height:52px}
.brand{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.02em; margin-right:auto; background:none; border:none; padding:0}
.brand span{color:var(--accent)}
.ghost{background:none; border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.06em; color:var(--ink-2)}
.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- hub ---------- */
.hero{padding-block:40px 24px}
.hero h1{font-size:clamp(29px,6.6vw,44px); font-weight:800; line-height:1.08; margin:10px 0 14px}
.lede{font-size:19px; color:var(--ink-2); max-width:58ch; margin:0 0 4px}
.hub{display:grid; gap:12px; margin-top:26px}
.hub-card{display:grid; grid-template-columns:auto 1fr; gap:0 16px; align-items:start; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--tc); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow)}
.hub-card:hover{border-color:var(--tc)}
.hub-mark{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600; font-size:13px; letter-spacing:.1em; color:var(--tc);
  border:1px solid var(--tc); border-radius:6px; padding:4px 8px; grid-row:span 2; margin-top:3px}
.hub-card h2{margin:0 0 3px; font-size:20px; font-weight:600}
.hub-card p{margin:0 0 9px; color:var(--ink-2); font-size:16px}
.hub-meta{display:flex; flex-wrap:wrap; gap:6px; grid-column:2}
.tag{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px; color:var(--ink-3)}

.resume{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px;
  background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow)}
.resume div{flex:1 1 240px}
.resume p{margin:0; font-size:16px; color:var(--ink-2)}
.resume p b{color:var(--ink)}
.resume .eyebrow{margin-bottom:3px}

/* ---------- set picker ---------- */
.crumb{display:flex; align-items:center; gap:8px; padding-block:26px 0; font-size:14px; color:var(--ink-3)}
.crumb button{background:none; border:none; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-size:14px}
.setlist{display:grid; gap:10px; margin-top:16px}
.set-opt{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 14px; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.set-opt:hover{border-color:var(--tc); box-shadow:var(--shadow)}
.set-opt b{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:18px}
.set-opt span{grid-column:1; color:var(--ink-2); font-size:15px}
.set-opt em{grid-row:span 2; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-style:normal; font-size:13px; color:var(--tc);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; white-space:nowrap}

/* ---------- quiz ---------- */
.progress{position:sticky; top:calc(52px + env(safe-area-inset-top,0px)); z-index:15; background:var(--ground); padding:12px 0 10px}
.bar{height:4px; background:var(--line); border-radius:2px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--tc,var(--accent)); width:0; transition:width .3s ease}
.pmeta{display:flex; justify-content:space-between; margin-top:7px; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.08em; color:var(--ink-3)}
.qcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow); margin-top:14px}
.qnum{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.12em; color:var(--axc); margin-bottom:12px}
.qtext{font-size:clamp(20px,4.4vw,25px); line-height:1.35; margin:0 0 22px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600}
.ab{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:-6px 0 20px}
.ab-o{display:flex; gap:11px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-radius:9px; padding:13px 15px; font-family:"Bricolage Grotesque",sans-serif; font-size:16px; line-height:1.4}
.ab-o b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; color:var(--axc); flex:none; margin-top:1px}
@media (max-width:540px){ .ab{grid-template-columns:1fr} }
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--surface-2);
  border:1px solid transparent; border-radius:8px; padding:13px 15px; font-size:16px;
  font-family:"Bricolage Grotesque",sans-serif; transition:background .12s, border-color .12s}
.opt:hover{border-color:var(--axc); background:var(--surface)}
.opt[aria-pressed="true"]{border-color:var(--axc); background:var(--surface); box-shadow:inset 3px 0 0 var(--axc)}
.dot{width:11px; height:11px; border-radius:50%; border:2px solid var(--ink-3); flex:none}
.opt[aria-pressed="true"] .dot{border-color:var(--axc); background:var(--axc)}
.opt kbd{display:none; margin-left:auto; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:10.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:1px 6px}
.qnav{display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap}
.qnav .hint{flex-basis:100%; order:-1; font-size:13px; color:var(--ink-3); text-align:right}
#nextBtn{margin-left:auto; min-width:170px; padding:13px 24px; font-weight:700; font-size:16px}
#nextBtn:disabled{opacity:.45; cursor:not-allowed}
@media (max-width:520px){ .qnav .hint{text-align:left} #nextBtn{flex-basis:100%; order:-1; margin-left:0} }

/* ---------- gate modal ---------- */
.scrim{position:fixed; inset:0; z-index:60; background:var(--scrim); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  width:100%; max-width:480px; max-height:86vh; overflow-y:auto; padding:26px 24px 22px}
/* popup mật mã trong khung điện thoại, luôn nền sáng cho dễ đọc ảnh hướng dẫn */
.phone{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F3F0;
  --ink:oklch(.22 .03 165); --ink-2:oklch(.42 .03 165); --ink-3:oklch(.56 .025 165);
  --line:oklch(.91 .01 75); --line-2:oklch(.945 .007 75);
  --accent:oklch(.44 .08 170); --on-accent:#FFFFFF;
  --tint-l:.965; --tint-c:.03; --soft-l:.92; --soft-c:.06; --hi-l:.45; --hi-c:.13;
  position:relative; width:100%; max-width:392px; padding:16px 11px 13px;
  background:linear-gradient(170deg,#2B2B31,#17171B); border-radius:46px;
  box-shadow:0 0 0 2px #3A3A42 inset, 0 26px 60px -18px rgb(0 0 0 / .65); color:var(--ink)}
.phone .ph-bar{position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:82px; height:5px; border-radius:99px; background:#4A4A54}
.phone .modal{max-width:none; border:none; border-radius:34px; max-height:74vh; padding:22px 18px 18px}
@media (max-width:420px){ .phone{padding:14px 8px 11px; border-radius:38px} .phone .modal{border-radius:30px; padding:18px 15px 16px} }
.modal h2{margin:8px 0 6px; font-size:23px; font-weight:800}
.modal .sub{margin:0 0 18px; color:var(--ink-2); font-size:16px}
.guide{background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; padding:14px 16px; margin-bottom:18px}
.guide .g-h{margin:0 0 8px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:16px; color:var(--ink)}
.guide .g-b{font-size:15.5px; color:var(--ink-2); line-height:1.6}
.guide .g-b > :first-child{margin-top:0}
.guide .g-b > :last-child{margin-bottom:0}
.guide .g-b p{margin:0 0 10px}
.guide .g-b img{max-width:100%; height:auto; border-radius:7px; display:block; margin:10px 0}
.guide .g-b figure{margin:10px 0}
.guide .g-b figcaption{font-size:13px; color:var(--ink-3); margin-top:5px}
.guide .g-b a{color:var(--accent)}
.guide .g-more{margin-top:12px; background:none; border:1px dashed var(--line); border-radius:7px;
  padding:9px 14px; width:100%; font-family:"Bricolage Grotesque",sans-serif; font-size:14px; color:var(--accent)}
.guide .g-more:hover{border-color:var(--accent); border-style:solid; background:var(--surface)}
.guide .g-more[disabled]{color:var(--ink-3); border-style:dashed}
.guide .g-b ul,.guide .g-b ol{margin:0 0 10px; padding-left:20px}
.steps{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.step{display:grid; grid-template-columns:26px 1fr; gap:4px 12px; align-items:start;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:13px 15px; transition:border-color .15s}
.step.done{border-color:var(--ok)}
.step .no{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--ink-3); color:var(--ink-3);
  display:grid; place-items:center; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; font-weight:600; grid-row:span 3}
.step.done .no{border-color:var(--ok); background:var(--ok); color:var(--surface)}
.step .lab{font-family:"Bricolage Grotesque",sans-serif; font-size:16px; line-height:1.35}
.step .sm{font-size:13.5px; color:var(--ink-3); grid-column:2}
.step .act{grid-column:2; margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.step input[type=text],.step input[type=email],.step input[type=tel]{
  width:100%; font:inherit; font-size:16px; font-family:"Bricolage Grotesque",sans-serif;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:10px 12px}
.step input:focus{border-color:var(--accent); outline:none}
.mini{background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:8px 14px;
  font-family:"Bricolage Grotesque",sans-serif; font-size:14px; text-decoration:none; color:var(--ink); display:inline-block}
.mini:hover{border-color:var(--accent); color:var(--accent)}
.mini.on{border-color:var(--ok); color:var(--ok)}
.cbx{display:flex; gap:10px; align-items:flex-start; grid-column:1/-1; cursor:pointer}
.cbx input{margin-top:4px; width:17px; height:17px; accent-color:var(--accent); flex:none}
.err{color:#C0392B; font-size:13.5px; margin:0 0 12px; min-height:1px}
:root[data-theme="dark"] .err, :root:not([data-theme="light"]) .err{color:#F09A90}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .err{color:#C0392B}}
.unlock{width:100%; background:var(--accent); color:var(--on-accent); border:none; border-radius:9px; padding:14px 20px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:17px}
.privacy{font-size:12.5px; color:var(--ink-3); text-align:center; margin:11px 0 0}
.ring{display:grid; place-items:center; padding:12px 0 18px}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:6}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .95s linear}
.ring .cnt{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:13px; color:var(--ink-2); margin-top:10px}

/* ---------- result ---------- */
.res-head{text-align:center; padding-block:30px 6px}
.res-code{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-wrap:anywhere; font-weight:600; font-size:clamp(40px,12vw,72px); letter-spacing:.06em; color:var(--gc); line-height:1; margin:8px 0}
.res-name{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(22px,5vw,30px); margin:0}
.res-tag{color:var(--ink-2); font-style:italic; margin:8px auto 0; max-width:46ch}
.slider{margin:26px 0; display:flex; flex-direction:column; gap:18px}
.sl-row{display:grid; gap:6px}
.sl-top{display:flex; justify-content:space-between; gap:10px; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; letter-spacing:.04em}
.sl-top b{font-weight:600; white-space:nowrap}
.sl-track{height:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; position:relative; overflow:hidden}
.sl-fill{position:absolute; inset:0 auto 0 0; background:var(--c); opacity:.85}
.sl-mid{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line)}
.sl-fill.sl-div{inset:0 auto; top:0; bottom:0}
.sl-top span{opacity:.62; white-space:nowrap}
.sl-top span.win{opacity:1; font-weight:700}
.sl-top span b{font-weight:800}
.sl-lab.sl-lean{justify-content:center; text-align:center}
.sl-mid{width:2px; background:var(--ink-3); z-index:1}
.sl-lab{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-2)}
.sec{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:14px}
.sec h3{margin:0 0 10px; font-size:15px; font-weight:600; letter-spacing:.02em}
.sec ul{margin:0; padding-left:20px}
.sec li{margin-bottom:6px; color:var(--ink-2)}
.sec p{margin:0 0 10px; color:var(--ink-2)}
.sec p:last-child{margin-bottom:0}
.sec p b{color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; font-size:14px; color:var(--ink-2)}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:14px}
.two .sec{margin-top:0}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 8px}
.btn{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:11px 18px;
  font-family:"Bricolage Grotesque",sans-serif; font-size:15px}
.btn:hover{border-color:var(--accent); color:var(--accent)}
a.btn{text-decoration:none; color:var(--ink); display:inline-block}
.btn.pri{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.grid16{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin-top:16px}
.tcard{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gc); border-radius:8px;
  padding:11px 13px; text-align:left; display:block; width:100%}
.tcard:hover{border-color:var(--gc)}
.tcard b{display:block; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; letter-spacing:.08em; color:var(--gc)}
.tcard small{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:13.5px; color:var(--ink-2); margin-top:2px}
.axes{margin:34px 0 0; border-top:1px solid var(--line); padding-top:22px}
.axis-row{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:15px}
.axis-row:last-child{border-bottom:none}
.axis-key{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600; font-size:13px; letter-spacing:.06em; min-width:62px; flex:none}
.axis-row p{margin:0; color:var(--ink-2)}
footer{margin-top:44px; padding-block:22px 40px; border-top:1px solid var(--line-2); font-size:13.5px; color:var(--ink-3)}
footer p{margin:0 0 6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}

/* =====================================================================
   GIAO DIỆN VUI NHỘN — cùng hệ màu với website (assets/style.css)
   ===================================================================== */
:root{
  --h:275;
  --acc-l:.66; --acc-c:.16;  --hi-l:.45; --hi-c:.13;
  --tint-l:.965; --tint-c:.03; --soft-l:.92; --soft-c:.06;
  --ground:oklch(.99 .004 75); --surface:#FFFFFF; --surface-2:oklch(.968 .007 75);
  --ink:oklch(.22 .03 165); --ink-2:oklch(.42 .03 165); --ink-3:oklch(.56 .025 165);
  --line:oklch(.91 .01 75); --line-2:oklch(.945 .007 75);
  --accent:oklch(.44 0.08 170); --on-accent:#FFFFFF; --ok:oklch(.5 .13 150);
  --scrim:oklch(.2 .03 285 / .55);
  --shadow:0 1px 2px oklch(.3 .03 285 / .06), 0 10px 30px -14px oklch(.3 .05 285 / .22);
  --radius:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --acc-l:.74; --acc-c:.14;  --hi-l:.86; --hi-c:.10;
  --tint-l:.25; --tint-c:.04; --soft-l:.32; --soft-c:.06;
  --ground:oklch(.17 .02 70); --surface:oklch(.215 .025 70); --surface-2:oklch(.25 .025 70);
  --ink:oklch(.95 .01 165); --ink-2:oklch(.8 .02 165); --ink-3:oklch(.66 .02 165);
  --line:oklch(.32 .025 70); --line-2:oklch(.27 .022 70);
  --accent:oklch(.78 0.08 170); --on-accent:oklch(.17 .02 165); --ok:oklch(.78 .13 150);
  --scrim:oklch(0 0 0 / .7);
}}
:root[data-theme="dark"]{
  --acc-l:.74; --acc-c:.14;  --hi-l:.86; --hi-c:.10;
  --tint-l:.25; --tint-c:.04; --soft-l:.32; --soft-c:.06;
  --ground:oklch(.17 .02 70); --surface:oklch(.215 .025 70); --surface-2:oklch(.25 .025 70);
  --ink:oklch(.95 .01 165); --ink-2:oklch(.8 .02 165); --ink-3:oklch(.66 .02 165);
  --line:oklch(.32 .025 70); --line-2:oklch(.27 .022 70);
  --accent:oklch(.78 0.08 170); --on-accent:oklch(.17 .02 165); --ok:oklch(.78 .13 150);
  --scrim:oklch(0 0 0 / .7);
}
:root{
  --t-mbti:oklch(var(--hi-l) var(--hi-c) 290); --t-disc:oklch(var(--hi-l) var(--hi-c) 25);
  --t-holland:oklch(var(--hi-l) var(--hi-c) 200); --t-big5:oklch(var(--hi-l) var(--hi-c) 330);
  --t-eq:oklch(var(--hi-l) var(--hi-c) 80);
  --t-ennea:oklch(var(--hi-l) var(--hi-c) 250); --t-love:oklch(var(--hi-l) var(--hi-c) 0); --t-attach:oklch(var(--hi-l) var(--hi-c) 150);
  --ax-ei:oklch(var(--hi-l) var(--hi-c) 55); --ax-sn:oklch(var(--hi-l) var(--hi-c) 185);
  --ax-tf:oklch(var(--hi-l) var(--hi-c) 330); --ax-jp:oklch(var(--hi-l) var(--hi-c) 255);
  --g-nt:oklch(var(--hi-l) var(--hi-c) 305); --g-nf:oklch(var(--hi-l) var(--hi-c) 170);
  --g-sj:oklch(var(--hi-l) var(--hi-c) 245); --g-sp:oklch(var(--hi-l) var(--hi-c) 45);
}
*, ::before, ::after{
  --acc:oklch(var(--acc-l) var(--acc-c) var(--h)); --hi:oklch(var(--hi-l) var(--hi-c) var(--h));
  --tint:oklch(var(--tint-l) var(--tint-c) var(--h)); --soft:oklch(var(--soft-l) var(--soft-c) var(--h));
}
[style*="--h"]{--gc:var(--hi)}
body{line-height:1.7}
h1,h2,h3,.disp,.brand,.qtext,.res-name{font-family:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif}
.eyebrow{font-weight:700; letter-spacing:.1em}
.brand span{color:oklch(.66 .2 25)}
.ghost,.cta,.unlock,.btn.pri{border-radius:999px}
.btn{border-radius:12px}
.qcard,.hub-card,.set-opt,.sec,.modal,.resume{border-radius:20px}
.hub-card{border:none; border-left:6px solid var(--tc); box-shadow:var(--shadow)}
.hub-mark{border:none; background:color-mix(in oklch, var(--tc) 14%, var(--surface)); border-radius:10px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.opt{border-radius:14px}
.ab-o{border-radius:14px}
/* ======== MÀN CÂU HỎI — bảng màu "sang mà tươi" ========
   xanh ngọc (A / đúng) · san hô (B / không đúng) · đào (giữa) · kem · chữ xanh rêu sẫm */
:root{
  --q-a:#2A7565; --q-a-l:#4EB09B; --q-a-t:#E4F3EF;
  --q-b:#B04A3B; --q-b-l:#F28076; --q-b-t:#FFECE8;
  --q-m:#C98A55; --q-m-l:#FBC193; --q-m-t:#FDF0E3;
  --q-ink:#17302A; --q-cream:#FFFCF8; --q-sand:#FAE0C7; --q-pink:#FFB6AF;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --q-a-t:#17312B; --q-b-t:#36201C; --q-m-t:#33271C; --q-ink:#EEF3F1; --q-cream:#221B15; --q-sand:#3A2F25; } }
:root[data-theme="dark"]{ --q-a-t:#17312B; --q-b-t:#36201C; --q-m-t:#33271C; --q-ink:#EEF3F1; --q-cream:#221B15; --q-sand:#3A2F25; }
#quiz .qcard{background:var(--q-cream); border:1px solid var(--q-sand); border-radius:26px; padding:26px 22px 22px}
#quiz .qtext{font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:-.005em; color:var(--q-ink); font-size:clamp(22px,4.8vw,30px); line-height:1.3}
#quiz .qnum{font-size:11.5px; letter-spacing:.14em; font-weight:700}
#quiz .bar i{background:linear-gradient(90deg,var(--q-m-l),var(--q-b-l))}
/* thẻ A/B: ô chữ cái đặc màu + thân nhạt; khi chọn, cả thẻ tô đặc */
.ab-o.ab-a,.ab-o.ab-b{padding:0; gap:0; overflow:hidden; border:0; border-radius:16px; align-items:stretch; min-height:64px;
  font-family:"Be Vietnam Pro",system-ui,sans-serif; font-weight:600; font-size:16.5px; transition:box-shadow .15s, transform .15s}
.ab-o.ab-a b,.ab-o.ab-b b{display:grid; place-items:center; width:56px; flex:none; margin:0; border-radius:0; color:#fff;
  font-family:"Playfair Display",Georgia,serif; font-size:24px; font-weight:800}
.ab-o.ab-a b{background:var(--q-a)} .ab-o.ab-b b{background:var(--q-b)}
.ab-o.ab-a span,.ab-o.ab-b span{display:flex; align-items:center; flex:1; padding:12px 16px; color:var(--q-ink); line-height:1.4}
.ab-o.ab-a span{background:var(--q-a-t)} .ab-o.ab-b span{background:var(--q-b-t)}
.ab-o.ab-a.on span{background:var(--q-a); color:#fff} .ab-o.ab-b.on span{background:var(--q-b); color:#fff}
.ab-o.ab-a.on{box-shadow:0 10px 24px -14px var(--q-a)} .ab-o.ab-b.on{box-shadow:0 10px 24px -14px var(--q-b)}
/* thang 5 vòng tròn */
.opts.scale{display:block; padding:6px 0 0}
.sc-ends{display:flex; justify-content:space-between; max-width:480px; margin:0 auto 8px;
  font-family:"Be Vietnam Pro",system-ui,sans-serif; font-size:13px; font-weight:800; letter-spacing:.01em}
.sc-l{color:var(--q-a)} .sc-r{color:var(--q-b)}
.sc-row{display:flex; align-items:center; justify-content:space-between; max-width:480px; margin:0 auto}
.bub{--c:var(--q-a); --cl:var(--q-a-l); --ct:var(--q-a-t); display:grid; place-items:center; padding:0; border:0; background:none;
  cursor:pointer; border-radius:50%; width:66px; height:66px; -webkit-tap-highlight-color:transparent}
.bub.neg{--c:var(--q-b); --cl:var(--q-b-l); --ct:var(--q-b-t)}
.bub.mid{--c:var(--q-m); --cl:var(--q-m-l); --ct:var(--q-m-t)}
.bub i{display:block; box-sizing:border-box; border-radius:50%; border:3px solid var(--cl); background:var(--ct);
  transition:transform .15s, background .15s, box-shadow .15s, border-color .15s}
.bub.s2 i{width:62px; height:62px} .bub.s1 i{width:48px; height:48px} .bub.s0 i{width:34px; height:34px}
.bub:hover i{transform:scale(1.07); border-color:var(--c)}
.bub[aria-checked="true"] i{background:var(--c); border-color:var(--c); box-shadow:0 0 0 5px var(--ct)}
.bub:focus-visible{outline:3px solid var(--q-ink); outline-offset:3px}
.res-mascot{display:block; width:200px; height:auto; margin:-8px auto 6px; position:relative; z-index:1;
  filter:drop-shadow(0 10px 18px rgb(0 0 0 / .14)); animation:mascotIn .5s ease-out both}
@keyframes mascotIn{from{opacity:0; transform:translateY(12px) scale(.94)}}
@media (prefers-reduced-motion:reduce){ .res-mascot{animation:none} }
.tcard.has-img{position:relative; overflow:hidden; padding-right:62px; min-height:70px; text-align:left}
.tcard.has-img .tc-img{position:absolute; right:-2px; bottom:-6px; width:62px; height:auto}
/* biểu đồ hai chiều của bài Kiểu gắn bó */
.quad{position:relative; padding:0 0 26px 26px; margin-top:8px}
.qd-y{position:absolute; left:0; top:0; bottom:26px; writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; font-size:12px; color:var(--ink-3)}
.qd-x{position:absolute; left:26px; right:0; bottom:0; text-align:center; font-size:12px; color:var(--ink-3)}
.qd-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; height:clamp(200px,42vw,300px); border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.qd-c{display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; background:var(--tint); color:var(--ink-3); font-size:13px; opacity:.75}
.qd-c b{font-weight:600}
.qd-c.on{background:color-mix(in oklch, var(--hi) 22%, var(--surface)); color:var(--ink); opacity:1}
.qd-c.on b{font-weight:800}
.qd-dot{position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--ink); border:3px solid var(--surface); box-shadow:0 2px 8px oklch(0 0 0 / .25)}
.gsw{display:inline-flex; align-items:center; gap:6px; margin:14px auto 0; padding:4px 4px 4px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:13px}
.gsw span{color:var(--ink-3); font-weight:600}
.gsw button{border:none; background:none; color:var(--ink-2); font:inherit; font-weight:600; padding:5px 14px; border-radius:999px; cursor:pointer}
.gsw button[aria-pressed="true"]{background:color-mix(in oklch, var(--gc,var(--accent)) 16%, var(--surface)); color:var(--gc,var(--accent))}
.res-cite{font-size:13px; color:var(--ink-3); margin:18px 0 0}
.sc-cap{text-align:center; margin:10px 0 0; min-height:1.4em; font-size:14.5px; font-weight:700; color:var(--ink-2)}
@media (max-width:420px){
  .bub{width:56px; height:56px}
  .bub.s2 i{width:52px; height:52px} .bub.s1 i{width:41px; height:41px} .bub.s0 i{width:30px; height:30px}
  #quiz .qcard{padding:22px 16px 18px}
}
@media (prefers-reduced-motion:reduce){ .bub i,.ab-o{transition:none} .bub:hover i{transform:none} }
.bar{height:8px; border-radius:999px} .bar i{border-radius:999px}
/* đầu trang kết quả: dải màu của tính cách, kèm chấm trang trí */
.res-head{position:relative; overflow:hidden; background:var(--tint); border-radius:26px;
  padding:34px 20px 30px; margin-top:16px}
.res-head > i{position:absolute; border-radius:50%; background:var(--soft)}
.res-head > i:nth-of-type(1){width:130px; height:130px; right:-30px; top:-40px}
.res-head > i:nth-of-type(2){width:70px; height:70px; left:-18px; bottom:-22px; background:transparent; border:4px solid var(--acc)}
.res-head > *:not(i){position:relative}
.res-head .eyebrow{color:var(--hi)}
.res-code{color:var(--gc,var(--hi)); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:.03em}
.chip{background:var(--soft); border:none; color:var(--hi); font-weight:600}
#result .sec h3{color:var(--ink)}
.tcard{background:var(--tint); border:2px solid transparent; border-radius:14px}
.tcard:hover{border-color:var(--acc)}
.tcard b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px}
.sl-track{height:12px; border:none; background:var(--surface-2)}
.sl-fill{border-radius:999px; opacity:1}
.sl-top b{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:13px}
.guide{border-left:none; background:var(--surface-2); border-radius:14px}
@media (prefers-reduced-motion: reduce){*{animation:none!important}}

/* ---------- DISC cổ điển: chọn giống nhất / ít giống nhất ---------- */
:root{ --yes:oklch(var(--hi-l) .13 150); --no:oklch(var(--hi-l) .15 25); }
.opts.rank{gap:10px}
.rk{display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center; background:var(--surface-2);
  border:2px solid transparent; border-radius:14px; padding:12px 14px; transition:border-color .12s, background .12s}
.rk.is-m{border-color:var(--yes); background:var(--surface)}
.rk.is-l{border-color:var(--no); background:var(--surface)}
.rk-t{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif; font-size:16px; line-height:1.4}
.rk-b{display:flex; gap:6px}
.rk-b button{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 13px;
  font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.rk-m:hover{border-color:var(--yes); color:var(--yes)} .rk-l:hover{border-color:var(--no); color:var(--no)}
.rk-m[aria-pressed="true"]{background:var(--yes); border-color:var(--yes); color:var(--on-accent)}
.rk-l[aria-pressed="true"]{background:var(--no); border-color:var(--no); color:var(--on-accent)}
@media (max-width:540px){ .rk{grid-template-columns:1fr} .rk-b button{flex:1} }
.graphs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.gcol{background:var(--surface-2); border-radius:14px; padding:14px 16px}
.gcol h4{margin:0; font-family:"Bricolage Grotesque",sans-serif; font-size:16px}
.gsub{margin:2px 0 10px!important; font-size:13px!important; color:var(--ink-3)!important}
.grow{display:grid; grid-template-columns:20px 1fr 42px; gap:8px; align-items:center; margin:7px 0}
.grow b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.gbar{height:10px; background:var(--surface); border-radius:999px; overflow:hidden}
.gbar i{display:block; height:100%; background:var(--acc); border-radius:999px}
.grow em{font-style:normal; font-size:13px; font-weight:700; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums}
.gnote{font-size:13px!important; color:var(--ink-3)!important}
@media (max-width:560px){ .graphs{grid-template-columns:1fr} }