: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;
  --g-NT:#2E3A8C; --g-NF:#0E6B62; --g-SJ:#8A5A12; --g-SP:#A33A57;
  --warn:#A3323F; --ok:#1E7A4B;
  --shadow:0 1px 2px rgba(20,24,31,.06), 0 8px 24px -12px rgba(20,24,31,.18);
  --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;
  --g-NT:#93A2F2; --g-NF:#5FBFB2; --g-SJ:#D6A64E; --g-SP:#E0798F;
  --warn:#E8808D; --ok:#5FC98E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
}}
: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;
  --g-NT:#93A2F2; --g-NF:#5FBFB2; --g-SJ:#D6A64E; --g-SP:#E0798F;
  --warn:#E8808D; --ok:#5FC98E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
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:18px; line-height:1.68;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:740px; margin:0 auto; padding:0 20px}
h1,h2,h3,.disp{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif; text-wrap:balance; letter-spacing:-.018em; line-height:1.18}
.mono{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-variant-numeric:tabular-nums}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.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); margin:0 0 10px}
.g-NT{--gc:var(--g-NT)} .g-NF{--gc:var(--g-NF)} .g-SJ{--gc:var(--g-SJ)} .g-SP{--gc:var(--g-SP)}

/* header / footer */
header.site{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
header.site .wrap{display:flex; align-items:center; gap:14px; height:56px}
.brand{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; letter-spacing:-.02em;
  margin-right:auto; text-decoration:none; color:var(--ink)}
.brand span{color:var(--accent)}
header.site nav{display:flex; align-items:center; gap:14px; font-family:"Bricolage Grotesque",sans-serif; font-size:14px}
header.site nav a{text-decoration:none; color:var(--ink-2)}
header.site nav a:hover{color:var(--accent)}
.cta-sm{background:var(--accent); color:var(--on-accent)!important; border-radius:999px; padding:7px 15px}
footer.site{margin-top:54px; border-top:1px solid var(--line-2); background:var(--surface-2)}
footer.site .wrap{padding-block:26px 44px}
footer.site p{margin:0 0 8px; font-size:14.5px; color:var(--ink-3); line-height:1.6}
footer.site .upd{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; margin-top:14px}

/* article */
.article{padding-block:0 0}
.crumb{font-size:14px; color:var(--ink-3); padding-block:20px 0}
.crumb a{color:var(--ink-2); text-decoration:none}
.crumb a:hover{color:var(--accent); text-decoration:underline}
.crumb span{margin:0 4px}
.hero-type{padding-block:26px 30px; border-bottom:3px solid var(--gc); margin-bottom:6px}
.hero-type h1{font-size:clamp(28px,6vw,42px); font-weight:800; margin:0 0 14px}
.tagline{font-size:20px; font-style:italic; color:var(--ink-2); margin:0 0 20px; max-width:52ch}
.code-strip{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.code-strip span{display:inline-flex; align-items:baseline; gap:7px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13.5px;
  font-family:"Bricolage Grotesque",sans-serif; color:var(--ink-2)}
.code-strip b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; color:var(--gc)}

.toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:28px 0}
.toc-h{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:26px; font-family:"Bricolage Grotesque",sans-serif; font-size:15px}
.toc li{margin-bottom:5px; break-inside:avoid}
.toc a{text-decoration:none; color:var(--ink-2)}
.toc a:hover{color:var(--accent); text-decoration:underline}

.article section{margin-block:38px}
.article h2{font-size:clamp(23px,4.4vw,30px); font-weight:700; margin:0 0 16px; scroll-margin-top:72px}
.article h3{font-size:19px; font-weight:600; margin:26px 0 10px}
.article p{margin:0 0 16px; color:var(--ink-2)}
.article p strong{color:var(--ink)}
.article em{color:var(--ink)}

ul.ticks,ul.warns,ol.steps{margin:0; padding-left:0; list-style:none; display:grid; gap:10px}
ul.ticks li,ul.warns li,ol.steps li{background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:13px 16px 13px 44px; position:relative; color:var(--ink-2); font-size:17px}
ul.ticks li::before{content:"✓"; position:absolute; left:16px; color:var(--ok); font-weight:700}
ul.warns li::before{content:"!"; position:absolute; left:18px; color:var(--warn); font-weight:700;
  font-family:"Bricolage Grotesque",sans-serif}
ol.steps{counter-reset:s}
ol.steps li{counter-increment:s}
ol.steps li::before{content:counter(s); position:absolute; left:15px; top:13px; width:19px; height:19px;
  border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:600;
  display:grid; place-items:center; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

ul.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
ul.chips li{background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:7px 15px; font-size:15px; font-family:"Bricolage Grotesque",sans-serif; color:var(--ink-2)}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:16px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; color:var(--ink-2)}
th{font-family:"Bricolage Grotesque",sans-serif; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); background:var(--surface-2)}
tr:last-child td{border-bottom:none}
td.mono{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600; color:var(--ink); width:1%}
td strong{color:var(--ink)}

.matches{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.match{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--gc); border-radius:9px; padding:15px 17px}
.match:hover{border-color:var(--gc)}
.match b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; color:var(--gc); letter-spacing:.06em}
.match span{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:15px; color:var(--ink); margin:1px 0 8px}
.match p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.55}

.cta-box{background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius);
  padding:26px 24px; margin-block:38px; box-shadow:var(--shadow)}
.cta-box h2{margin:0 0 10px; font-size:23px}
.cta-box p{margin:0 0 18px}
a.cta{display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none;
  border-radius:9px; padding:14px 26px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:17px}
a.cta:hover{filter:brightness(1.08)}

details{background:var(--surface); border:1px solid var(--line); border-radius:9px; margin-bottom:9px}
summary{cursor:pointer; padding:15px 18px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600;
  font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent); font-size:20px; line-height:1; flex:none}
details[open] summary::after{content:"–"}
details > div{padding:0 18px 16px}
details p{margin:0}

.others{border-top:1px solid var(--line); padding-top:30px}
.grid16{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px; margin-bottom:22px}
.tcard{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--gc); border-radius:8px; padding:11px 13px}
.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}
.tcard em{display:block; font-style:normal; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; color:var(--ink-3); margin-top:3px}
h3.gh{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:30px 0 12px;
  padding-left:11px; border-left:4px solid var(--gc); font-size:18px}
h3.gh span{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12.5px; color:var(--ink-3); font-weight:400}

@media (max-width:560px){ .toc ol{columns:1} body{font-size:17px} }
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* =====================================================================
   ĐIỀU HƯỚNG DÙNG CHUNG
   ===================================================================== */
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-accent);
  padding:10px 16px; border-radius:0 0 8px 0; z-index:100; text-decoration:none}
.skip:focus{left:0}
header.site .wrap{gap:8px}
header.site nav.main{display:flex; align-items:center; gap:4px; margin-left:auto}
header.site nav.main a{padding:8px 12px; border-radius:7px; text-decoration:none; color:var(--ink-2);
  font-family:"Bricolage Grotesque",sans-serif; font-size:14.5px; white-space:nowrap}
header.site nav.main a:hover{background:var(--surface-2); color:var(--ink)}
header.site nav.main a[aria-current="page"]{color:var(--ink); background:var(--surface-2)}
.hdr-btns{display:flex; align-items:center; gap:8px}
.icon-btn{background:none; border:1px solid var(--line); border-radius:8px; width:34px; height:34px;
  display:grid; place-items:center; color:var(--ink-2); padding:0; flex:none}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.icon-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.nav-toggle{display:none}
#navPanel{display:none; border-top:1px solid var(--line-2); background:var(--surface)}
#navPanel a{display:block; padding:13px 0; border-bottom:1px solid var(--line-2); text-decoration:none;
  color:var(--ink); font-family:"Bricolage Grotesque",sans-serif; font-size:16px}
#navPanel a:last-child{border-bottom:none}
@media (max-width:760px){
  header.site nav.main{display:none}
  .nav-toggle{display:grid}
  #navPanel[data-open="1"]{display:block}
}

/* =====================================================================
   TRANG CHỦ
   ===================================================================== */
/* Bài viết giữ 740px cho dễ đọc; trang chủ và thanh điều hướng rộng hơn. */
header.site .wrap, footer.site .wrap, .home .wrap, .statbar{max-width:1120px; margin-inline:auto}
.statbar{padding-inline:0}
.home section{margin-block:0}
.band{border-bottom:1px solid var(--line-2)}
.band.alt{background:var(--surface-2)}
.band > .wrap{padding-block:clamp(44px,7vw,72px)}
.sec-head{max-width:60ch; margin-bottom:26px}
.sec-head h2{font-size:clamp(25px,4.6vw,34px); font-weight:700; margin:0 0 10px}
.sec-head p{margin:0; color:var(--ink-2); font-size:17.5px}

/* hero */
.hero-home{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,56px); align-items:center;
  padding-block:clamp(38px,6vw,66px) clamp(34px,5vw,58px)}
.hero-home h1{font-size:clamp(32px,5.6vw,52px); font-weight:800; margin:12px 0 16px; line-height:1.06}
.hero-home .lede{font-size:clamp(17px,2.2vw,20px); color:var(--ink-2); margin:0 0 26px; max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:11px; align-items:center}
.btn-lg{display:inline-flex; align-items:center; gap:9px; border-radius:10px; padding:15px 26px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:17px; text-decoration:none;
  border:1px solid transparent}
.btn-lg.primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow)}
.btn-lg.primary:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn-lg.ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn-lg.ghost:hover{border-color:var(--accent); color:var(--accent)}
.hero-note{margin:16px 0 0; font-size:14.5px; color:var(--ink-3)}

/* lưới 16 nhóm trong hero */
.hero-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.hero-cell{display:flex; flex-direction:column; justify-content:space-between; gap:3px; aspect-ratio:1/1;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gc);
  border-radius:9px; padding:9px 10px; text-decoration:none; transition:transform .13s, border-color .13s}
.hero-cell:hover{transform:translateY(-3px); border-color:var(--gc)}
.hero-cell b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:clamp(12px,1.6vw,15px); letter-spacing:.05em; color:var(--gc)}
.hero-cell span{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(9.5px,1.15vw,11.5px);
  line-height:1.25; color:var(--ink-3)}
.hero-legend{display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:13px; font-size:12.5px; color:var(--ink-3)}
.hero-legend span{display:inline-flex; align-items:center; gap:6px}
.hero-legend i{width:9px; height:9px; border-radius:2px; background:var(--gc); display:inline-block}
@media (max-width:820px){
  .hero-home{grid-template-columns:1fr; gap:32px}
  .hero-home .lede{max-width:none}
}

/* dải số liệu */
.statbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
  background:var(--line); border-block:1px solid var(--line)}
.statbar div{background:var(--ground); padding:18px 16px; text-align:center}
.statbar{border-inline:1px solid var(--line)}
@media (max-width:1160px){ .statbar{border-inline:none} }
.statbar b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:clamp(21px,3vw,27px); color:var(--ink)}
.statbar span{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3)}

/* thẻ bài test */
.tests{display:grid; gap:12px}
.tcard-big{display:grid; grid-template-columns:auto 1fr auto; gap:6px 18px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gc);
  border-radius:11px; padding:20px 22px; text-decoration:none; transition:border-color .13s, transform .13s}
.tcard-big:hover{border-color:var(--gc); transform:translateX(2px)}
.tcard-big .mark{grid-row:span 3; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.09em; color:var(--gc); border:1px solid var(--gc); border-radius:7px; padding:6px 10px; align-self:start}
.tcard-big h3{margin:0; font-size:20px; font-weight:600; color:var(--ink)}
.tcard-big p{margin:0; grid-column:2; color:var(--ink-2); font-size:16px}
.tcard-big .meta{grid-column:2; display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.tcard-big .go{grid-row:span 3; font-size:22px; color:var(--gc); align-self:center}
@media (max-width:640px){
  .tcard-big{grid-template-columns:auto 1fr; padding:17px 18px}
  .tcard-big .go{display:none}
}

/* 3 bước */
.steps3{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; counter-reset:st}
.steps3 div{counter-increment:st; background:var(--surface); border:1px solid var(--line);
  border-radius:11px; padding:22px 20px; position:relative}
.steps3 div::before{content:counter(st,decimal-leading-zero); display:block;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; letter-spacing:.1em; color:var(--accent); margin-bottom:10px}
.steps3 h3{margin:0 0 7px; font-size:18px; font-weight:600}
.steps3 p{margin:0; font-size:15.5px; color:var(--ink-2)}

/* nhóm 16 kiểu theo họ */
.fam{margin-bottom:22px}
.fam:last-child{margin-bottom:0}
.fam-h{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:0 0 11px;
  padding-left:11px; border-left:4px solid var(--gc); font-size:17px; font-weight:600;
  font-family:"Bricolage Grotesque",sans-serif}
.fam-h em{font-style:normal; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; color:var(--ink-3)}
.fam-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:9px}

/* vì sao tin được */
.why{display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:16px}
.why div{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:20px}
.why h3{margin:0 0 8px; font-size:17px; font-weight:600; display:flex; align-items:center; gap:9px}
.why h3 svg{width:19px; height:19px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.why p{margin:0; font-size:15.5px; color:var(--ink-2)}

/* dải kêu gọi cuối */
.cta-band{background:var(--accent); color:var(--on-accent); text-align:center}
.cta-band .wrap{padding-block:clamp(40px,6vw,62px)}
.cta-band h2{margin:0 0 12px; font-size:clamp(25px,4.4vw,34px); font-weight:800; color:var(--on-accent)}
.cta-band p{margin:0 auto 24px; max-width:50ch; opacity:.86; font-size:17.5px}
.cta-band a{display:inline-block; background:var(--surface); color:var(--accent); text-decoration:none;
  border-radius:10px; padding:15px 30px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:17px}
.cta-band a:hover{transform:translateY(-1px)}

/* chân trang nhiều cột */
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px; padding-block:34px 26px}
.foot-cols h4{margin:0 0 11px; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-weight:600}
.foot-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.foot-cols a{color:var(--ink-2); text-decoration:none; font-size:15px}
.foot-cols a:hover{color:var(--accent)}
.foot-cols p{margin:0 0 9px; font-size:15px; color:var(--ink-2)}
@media (max-width:640px){ .foot-cols{grid-template-columns:1fr; gap:22px} }

/* trang chạy bài test: ẩn thanh điều hướng riêng của app, dùng chung header của site */
body.app-page .topbar{display:none}
body.app-page .progress{top:calc(56px + env(safe-area-inset-top,0px))}
body.app-page main.wrap{padding-bottom:40px}

/* nhãn nhỏ dùng chung (thiếu khi tách stylesheet) */
.tag{display:inline-block; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:999px; padding:4px 10px; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.tcard-big .tag{background:var(--ground)}

/* ---------- sửa hiển thị trên điện thoại ---------- */
.brand{white-space:nowrap}
.cta-sm{white-space:nowrap; line-height:1.3}
header.site .wrap{min-height:56px; height:auto}
@media (max-width:480px){
  header.site .wrap{gap:6px; padding-block:9px}
  .brand{font-size:13.5px}
  .cta-sm{padding:7px 12px; font-size:13.5px}
  .icon-btn{width:32px; height:32px}
  .hero-cta{display:grid; grid-template-columns:1fr}
  .hero-cta .btn-lg{justify-content:center}
}
/* ô nhóm tính cách trong hero: màn nhỏ chỉ giữ mã, bỏ tên cho khỏi tràn */
.hero-cell{overflow:hidden}
.hero-cell span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@media (max-width:520px){
  .hero-grid{gap:6px}
  .hero-cell{aspect-ratio:auto; padding:11px 8px; align-items:center; justify-content:center}
  .hero-cell span{display:none}
  .hero-cell b{font-size:14px}
}

/* =====================================================================
   MÀU CHO CÁC CỤM KIẾN THỨC (DISC, Holland, Big Five, EQ)
   ===================================================================== */
:root{ --c1:#2E3A8C; --c2:#0E6B62; --c3:#8A5A12; --c4:#A33A57; --c5:#7A2E72; --c6:#B4531F; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --c1:#93A2F2; --c2:#5FBFB2; --c3:#D6A64E; --c4:#E0798F; --c5:#CE8FC6; --c6:#E0925F; }}
:root[data-theme="dark"]{ --c1:#93A2F2; --c2:#5FBFB2; --c3:#D6A64E; --c4:#E0798F; --c5:#CE8FC6; --c6:#E0925F; }
.c1{--gc:var(--c1)} .c2{--gc:var(--c2)} .c3{--gc:var(--c3)} .c4{--gc:var(--c4)} .c5{--gc:var(--c5)} .c6{--gc:var(--c6)}

/* hai cột nên / không nên */
.dodont{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dodont > div{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px}
.dodont h3{margin:0 0 10px!important; font-size:16px!important}
.dodont ul{margin:0; padding-left:18px}
.dodont li{margin-bottom:6px; color:var(--ink-2); font-size:16px}
.dodont .do h3{color:var(--ok)}
.dodont .dont h3{color:var(--warn)}
@media (max-width:600px){ .dodont{grid-template-columns:1fr} }

/* khối kết hợp / mức độ */
.combo{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gc);
  border-radius:9px; padding:14px 18px; margin-bottom:10px}
.combo b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--gc); letter-spacing:.05em}
.combo p{margin:6px 0 0!important}
.levels{display:grid; gap:10px}
.level{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:15px 18px}
.level h3{margin:0 0 6px!important; font-size:16.5px!important; display:flex; gap:10px; align-items:baseline}
.level h3 span{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:11px; letter-spacing:.1em; color:var(--gc); text-transform:uppercase}
.level p{margin:0!important}

/* trang tổng hợp kiến thức */
.kb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.kb-card{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gc);
  border-radius:11px; padding:20px 22px}
.kb-card h2{margin:0 0 8px!important; font-size:21px!important}
.kb-card h2 a{color:var(--ink); text-decoration:none}
.kb-card h2 a:hover{color:var(--gc)}
.kb-card p{margin:0 0 12px!important; font-size:15.5px}
.kb-card ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.kb-card li a{display:inline-block; font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:12px; letter-spacing:.05em;
  border:1px solid var(--line); border-radius:6px; padding:4px 9px; text-decoration:none; color:var(--gc)}
.kb-card li a:hover{border-color:var(--gc)}

/* =====================================================================
   GIAO DIỆN VUI NHỘN — MỖI TÍNH CÁCH MỘT TÔNG MÀU
   Mỗi phần tử chỉ cần đặt --h (góc màu OKLCH); cả bộ màu được tự sinh:
     --acc  màu nhấn cho viền, thanh, chấm trang trí
     --hi   màu chữ (đạt tương phản ≥ 4.5:1 trên nền trắng, nền nhạt và ô màu)
     --tint nền nhạt cho dải lớn
     --soft ô màu cho nhãn, thẻ
   ===================================================================== */
: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(.975 .008 285); --surface:#FFFFFF; --surface-2:oklch(.955 .012 285);
  --ink:oklch(.22 .03 285); --ink-2:oklch(.42 .03 285); --ink-3:oklch(.56 .025 285);
  --line:oklch(.9 .014 285); --line-2:oklch(.94 .01 285);
  --accent:oklch(.5 .2 275); --on-accent:#FFFFFF;
  --ok:oklch(.5 .13 150); --warn:oklch(.52 .17 25);
  --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 285); --surface:oklch(.215 .025 285); --surface-2:oklch(.25 .025 285);
  --ink:oklch(.95 .01 285); --ink-2:oklch(.8 .02 285); --ink-3:oklch(.66 .02 285);
  --line:oklch(.32 .025 285); --line-2:oklch(.27 .022 285);
  --accent:oklch(.78 .13 275); --on-accent:oklch(.17 .02 285);
  --ok:oklch(.78 .13 150); --warn:oklch(.76 .13 25);
  --shadow:0 1px 2px oklch(0 0 0 / .4), 0 12px 32px -16px 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 285); --surface:oklch(.215 .025 285); --surface-2:oklch(.25 .025 285);
  --ink:oklch(.95 .01 285); --ink-2:oklch(.8 .02 285); --ink-3:oklch(.66 .02 285);
  --line:oklch(.32 .025 285); --line-2:oklch(.27 .022 285);
  --accent:oklch(.78 .13 275); --on-accent:oklch(.17 .02 285);
  --ok:oklch(.78 .13 150); --warn:oklch(.76 .13 25);
  --shadow:0 1px 2px oklch(0 0 0 / .4), 0 12px 32px -16px oklch(0 0 0 / .7);
}
/* mỗi phần tử tự tính bộ màu từ --h mà nó thừa hưởng hoặc tự đặt */
*, ::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));
}
/* các lớp màu cũ giờ chỉ đặt góc màu */
.g-NT{--h:305} .g-NF{--h:170} .g-SJ{--h:245} .g-SP{--h:45}
.c1{--h:255} .c2{--h:175} .c3{--h:75} .c4{--h:15} .c5{--h:315} .c6{--h:50}
.g-NT,.g-NF,.g-SJ,.g-SP,.c1,.c2,.c3,.c4,.c5,.c6,[style*="--h"]{--gc:var(--hi)}

/* ---------- chữ ---------- */
body{font-size:17px; line-height:1.72}
h1,h2,h3,.disp,.brand{font-family:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif}
.eyebrow{font-weight:700; letter-spacing:.1em; font-size:11.5px}
.tagline{font-style:normal; font-weight:500}
a{color:var(--accent)}
.brand span{color:oklch(.66 .2 25); font-size:1.3em; line-height:0}

/* ---------- nút & header ---------- */
.cta-sm, a.cta, .btn-lg.primary{border-radius:999px; background:var(--accent); color:var(--on-accent)!important}
.btn-lg{border-radius:999px}
.btn-lg.ghost{border-radius:999px}
header.site nav.main a{border-radius:999px}
.icon-btn{border-radius:999px}

/* ---------- dải đầu trang của mỗi tính cách ---------- */
.hero-type{
  position:relative; border-bottom:none; margin-bottom:10px;
  background:var(--tint); box-shadow:0 0 0 100vmax var(--tint); clip-path:inset(0 -100vmax);
  padding-block:34px 38px;
  display:grid; grid-template-columns:1fr auto; gap:10px 28px; align-items:center;
}
.hero-type > *{grid-column:1}
.hero-type .emblem{grid-column:2; grid-row:1 / span 4}
.hero-type .eyebrow{color:var(--hi)}
.hero-type h1{color:var(--ink)}
.hero-type .tagline{color:var(--ink-2)}
.crumb{padding-block:18px 14px}
.crumb + article .hero-type, .crumb + .hero-type{margin-top:0}

/* huy hiệu: chữ mã tính cách trong một khối màu, kèm vài chấm trang trí */
.emblem{position:relative; width:168px; aspect-ratio:1; display:grid; place-items:center; flex:none}
.emblem::before{content:""; position:absolute; inset:0; background:var(--soft);
  border:3px solid var(--acc); border-radius:44% 56% 52% 48% / 55% 45% 55% 45%;
  animation:blob 9s ease-in-out infinite alternate}
.emblem b{position:relative; font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(30px,6vw,44px); letter-spacing:.02em; color:var(--hi); line-height:1}
.emblem b.long{font-size:clamp(20px,4vw,26px); text-align:center; padding:0 18px; line-height:1.15}
.emblem i{position:absolute; border-radius:50%; background:var(--acc)}
.emblem i:nth-of-type(1){width:22px; height:22px; top:6%; right:2%}
.emblem i:nth-of-type(2){width:12px; height:12px; bottom:10%; left:0; background:var(--hi); opacity:.6}
.emblem i:nth-of-type(3){width:34px; height:34px; bottom:-4%; right:12%; background:transparent; border:3px solid var(--acc)}
@keyframes blob{to{border-radius:56% 44% 45% 55% / 45% 58% 42% 55%; transform:rotate(6deg)}}
@media (max-width:620px){
  .hero-type{grid-template-columns:1fr}
  .hero-type .emblem{grid-column:1; grid-row:auto; width:118px; order:-1; margin-bottom:6px}
  .emblem b{font-size:30px}
}
.code-strip span{background:var(--surface); border:none; box-shadow:var(--shadow)}
.code-strip b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800}

/* ---------- nội dung bài viết theo tông của trang ---------- */
.article h2{display:flex; align-items:center; gap:12px}
.article h2::before{content:""; width:12px; height:12px; flex:none; border-radius:4px; background:var(--acc); transform:rotate(12deg)}
.toc{background:var(--tint); border:none; border-radius:var(--radius)}
.toc a:hover{color:var(--hi)}
ul.ticks li, ul.warns li, ol.steps li{border-radius:14px; border-color:var(--line-2)}
ul.ticks li::before{color:var(--hi)}
ol.steps li::before{background:var(--acc); color:oklch(.2 .03 var(--h))}
ul.chips li{background:var(--soft); border:none; color:var(--hi); font-weight:600; border-radius:999px}
.table-wrap{border-radius:var(--radius)}
th{background:var(--tint); color:var(--hi)}
td.mono{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.cta-box{background:var(--tint); border:2px dashed var(--acc); border-radius:22px; box-shadow:none}
details{border-radius:14px}
summary::after{color:var(--hi)}
.combo, .level{border-radius:14px}
.combo{border-left:4px solid var(--acc)}
.combo b, .level h3 span{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.dodont > div{border-radius:14px}

/* ---------- thẻ tính cách: mỗi thẻ một màu ---------- */
.tcard{background:var(--tint); border:2px solid transparent; border-radius:14px; transition:transform .15s, border-color .15s}
.tcard:hover{border-color:var(--acc); transform:translateY(-2px)}
.tcard b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px; letter-spacing:.03em}
.tcard small{color:var(--ink-2)}
.match{background:var(--tint); border:2px solid transparent; border-radius:16px}
.match:hover{border-color:var(--acc)}
.match b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.kb-card{border:none; border-top:5px solid var(--acc); border-radius:18px; box-shadow:var(--shadow)}
.kb-card li a{background:var(--soft); border:none; color:var(--hi); font-weight:700; border-radius:999px; padding:5px 11px;
  font-family:"Bricolage Grotesque",sans-serif}
.fam-h{border-left-color:var(--acc)}
.fam-h, h3.gh{color:var(--hi)}
h3.gh{border-left-color:var(--acc)}

/* ---------- trang chủ ---------- */
.hero-home{position:relative}
.hero-cell{background:var(--soft); border:2px solid transparent; border-radius:16px}
.hero-cell:hover{border-color:var(--acc); transform:translateY(-3px) rotate(-1.5deg)}
.hero-cell b{color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(13px,1.7vw,17px)}
.hero-cell span{color:var(--hi); opacity:.85}
.hero-legend i{background:var(--acc); border-radius:50%}
.statbar div:nth-child(1) b{color:oklch(var(--hi-l) var(--hi-c) 290)}
.statbar div:nth-child(2) b{color:oklch(var(--hi-l) var(--hi-c) 160)}
.statbar div:nth-child(3) b{color:oklch(var(--hi-l) var(--hi-c) 250)}
.statbar div:nth-child(4) b{color:oklch(var(--hi-l) var(--hi-c) 40)}
.statbar span{font-weight:600}
.tcard-big{border:none; border-left:6px solid var(--acc); border-radius:18px; box-shadow:var(--shadow)}
.tcard-big .mark{border:none; background:var(--soft); color:var(--hi); border-radius:10px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800}
.tcard-big .go{color:var(--hi)}
.tcard-big .tag{background:var(--tint); border:none; color:var(--hi)}
.steps3 div{border:none; border-radius:18px; box-shadow:var(--shadow)}
.steps3 div:nth-child(1){--h:290} .steps3 div:nth-child(2){--h:160} .steps3 div:nth-child(3){--h:40}
.steps3 div::before{content:counter(st); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--soft); color:var(--hi); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px; letter-spacing:0}
.why div{border:none; border-radius:18px; box-shadow:var(--shadow)}
.why div:nth-child(1){--h:290} .why div:nth-child(2){--h:160} .why div:nth-child(3){--h:250} .why div:nth-child(4){--h:40}
.why h3 svg{stroke:var(--hi)}
.cta-band{--h:275; background:var(--accent)}
.cta-band a{border-radius:999px}
/* chấm màu trang trí phía sau lưới 16 nhóm */
.hero-home > div:last-child{position:relative}
.hero-home > div:last-child::before, .hero-home > div:last-child::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); opacity:.55}
.hero-home > div:last-child::before{--h:40; width:120px; height:120px; background:var(--soft); top:-34px; right:-24px}
.hero-home > div:last-child::after{--h:160; width:84px; height:84px; background:var(--soft); bottom:-26px; left:-22px}
.band{position:relative; isolation:isolate; overflow-x:clip}   /* cắt chấm trang trí lòi ra mép, không tạo thanh cuộn */

@media (prefers-reduced-motion: reduce){ .emblem::before{animation:none} }

/* ---------- bài hướng dẫn chuyên đề ---------- */
.reads{margin:40px 0 0; padding-top:30px; border-top:1px solid var(--line)}
.reads > h2{margin:0 0 16px}
.reads-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.read-card{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:16px;
  background:var(--tint); border:1px solid var(--line-2); color:var(--ink); text-decoration:none;
  transition:transform .15s ease, border-color .15s ease}
.read-card:hover{transform:translateY(-2px); border-color:var(--acc)}
.read-card b{font-size:16.5px; line-height:1.35}
.read-card small{color:var(--ink-2); font-size:14px; line-height:1.45}
.read-tag{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--hi); background:var(--soft); border-radius:999px; padding:3px 10px}
.kb-sub{margin:14px 0 6px!important; font-size:12px!important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.kb-card ol.kb-reads{margin:0; padding-left:20px; display:block}
.kb-card ol.kb-reads li{margin:0 0 5px; font-size:15px}
.kb-card ol.kb-reads li a{display:inline; font:inherit; letter-spacing:0; padding:0; border:0; background:none; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.kb-card ol.kb-reads li a:hover{color:var(--hi); text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){ .read-card{transition:none} .read-card:hover{transform:none} }