/* สไตล์หน้าบทความของ MBTI Thailand
   ใช้โทนเดียวกับหน้าแรกและแบนเนอร์แบรนด์ พื้นสว่าง น้ำเงิน ทอง ครีม มุมมน เงานุ่ม
   ไฟล์ต้นทางอยู่ที่ content/article.css แล้ว build.js คัดลอกไป public/mbti/article.css ให้เอง */
:root{
  --navy:#011941; --blue:#074194; --gold:#fdc844; --cream:#fef5e5;
  --page:#f4f7fc; --card:#ffffff; --line:#e2e8f4;
  --ink:#14213f; --dim:#5b6884;
  --accent:var(--blue);
  --r:18px;
  --sh:0 1px 2px rgba(1,25,65,.05), 0 8px 24px rgba(1,25,65,.07);
  --sh-lift:0 4px 8px rgba(1,25,65,.07), 0 16px 40px rgba(1,25,65,.11);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--page); -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--page); color:var(--ink); line-height:1.8; font-size:18px; overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
h1,h2,h3,.head{font-family:"Kanit","Noto Sans Thai",sans-serif; line-height:1.4; font-weight:600}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:var(--gold); color:var(--navy);
  padding:12px 18px; border-radius:12px; z-index:50}

/* ---- แถบบน ---- */
.topnav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px max(16px,env(safe-area-inset-left));
  position:sticky; top:0; z-index:10;
  background:rgba(244,247,252,.92); backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);
}
.topnav .home{
  font-family:"Kanit",sans-serif; font-weight:700; font-size:18px; letter-spacing:.5px;
  color:var(--navy); text-decoration:none;
}
.topnav .home span{color:#a9740a}
.playbtn{
  font-family:"Kanit",sans-serif; font-weight:600; font-size:15px;
  padding:9px 18px; border-radius:999px; min-height:42px;
  background:var(--gold); color:var(--navy); border:2px solid var(--gold);
  text-decoration:none; display:flex; align-items:center;
  box-shadow:0 3px 0 #e0a91e; transition:transform .12s ease, box-shadow .12s ease;
}
.playbtn:active{transform:translateY(1px); box-shadow:0 1px 0 #e0a91e}

.crumbs{
  max-width:1120px; margin:0 auto; padding:16px max(16px,env(safe-area-inset-left)) 0;
  font-size:14.5px; color:var(--dim);
}
.crumbs a{color:var(--dim); text-decoration:none}
.crumbs em{font-style:normal; margin:0 8px; color:#aeb8cc}

/* ---- โครงหน้า ---- */
main{
  max-width:1120px; margin:0 auto; display:grid; gap:40px;
  grid-template-columns:minmax(0,1fr) 300px;
  padding:24px max(16px,env(safe-area-inset-left)) 70px;
}
@media (max-width:900px){ main{grid-template-columns:1fr} }
/* หน้าฮับกับหน้าเสาหลักไม่มีคอลัมน์อ่านต่อ จึงไม่ต้องกันที่ 300px ไว้เปล่า ๆ */
main:not(:has(.related)){grid-template-columns:minmax(0,1fr); max-width:900px}

article{min-width:0}
.eyebrow{
  display:inline-block; background:var(--cream); color:#8a5a06;
  font-size:14px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
h1{font-size:clamp(28px,4.6vw,42px); font-weight:700; color:var(--navy);
  text-wrap:balance; margin-bottom:20px}
.cover{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--sh);
  display:block; margin-bottom:28px; background:var(--card)}
.lead{font-size:20px; color:var(--ink); margin-bottom:28px; text-wrap:pretty}
article h2{
  font-size:clamp(21px,3vw,27px); font-weight:700; color:var(--navy);
  margin:40px 0 14px; padding-left:14px; border-left:5px solid var(--accent);
  text-wrap:balance;
  scroll-margin-top:86px;   /* กันหัวข้อโดนแถบบนแบบ sticky บังตอนกดลิงก์ anchor */
}
article h3{font-size:19.5px; font-weight:600; color:var(--navy); margin:26px 0 10px}
article p{margin-bottom:17px; max-width:70ch; text-wrap:pretty}
article ul,article ol{margin:0 0 22px 0; padding-left:0; list-style:none; max-width:70ch}
article ul li{position:relative; padding-left:26px; margin-bottom:10px}
article ul li::before{content:""; position:absolute; left:3px; top:14px;
  width:8px; height:8px; border-radius:50%; background:var(--accent)}
article ol{counter-reset:n}
article ol li{position:relative; padding-left:38px; margin-bottom:10px; counter-increment:n}
article ol li::before{
  content:counter(n); position:absolute; left:0; top:6px;
  width:26px; height:26px; border-radius:50%; background:var(--cream); color:#8a5a06;
  font-family:"Kanit",sans-serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
code{background:var(--card); padding:3px 8px; font-size:.9em; border:1.5px solid var(--line);
  border-radius:7px}
strong{color:var(--navy); font-weight:600}
.soonlist{color:var(--dim); font-size:15.5px; line-height:1.9; max-width:none}

/* ---- หน้ารวมหัวข้อ: การ์ดลิงก์ ---- */
.cardgrid{display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-bottom:28px}
.card{
  display:flex; flex-direction:column; gap:5px; padding:18px 20px;
  background:var(--card); border-radius:var(--r); box-shadow:var(--sh);
  text-decoration:none; color:var(--ink); transition:.14s ease;
}
.card .ct{font-family:"Kanit",sans-serif; font-weight:600; font-size:17px; line-height:1.5;
  color:var(--navy)}
.card .ck{font-size:13.5px; color:var(--dim); line-height:1.6}

/* ---- ฮับ ---- */
.typegrid{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
  margin-bottom:36px}
.tcard{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px; text-decoration:none;
  background:var(--card); border-radius:14px; box-shadow:var(--sh); color:var(--ink);
  transition:.14s ease;
}
.tcard b{font-family:"Kanit",sans-serif; font-size:17px; font-weight:700; color:var(--blue)}
.tcard span{font-size:14px; color:var(--dim)}
.clus{margin-bottom:36px; padding-bottom:28px; border-bottom:1.5px solid var(--line)}
.clus h2{border-left-color:var(--accent)}
.clus h2 a{text-decoration:none; color:var(--navy)}
.clus h2 em{font-style:normal; font-size:14px; color:var(--dim); font-weight:400; margin-left:8px}
.links{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  margin-top:14px}
.links li{padding-left:0!important}
.links li::before{display:none!important}
.links a{font-size:16px}
.more{display:inline-block; margin-top:12px; font-size:15px}

/* ---- คำถามที่พบบ่อย ---- */
.faq details{background:var(--card); border-radius:14px; box-shadow:var(--sh); margin-bottom:10px}
.faq summary{
  font-family:"Kanit",sans-serif; font-weight:600; font-size:17px; color:var(--navy);
  padding:16px 20px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--blue); font-size:22px; line-height:1; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 20px 18px; margin:0; color:var(--dim); max-width:none}

/* ---- แถบชวนทำแบบทดสอบ ---- */
.cta{
  margin:48px 0 0; padding:34px 26px; text-align:center;
  background:var(--navy); color:#fff; border-radius:24px;
  background-image:radial-gradient(circle at 12% 18%, rgba(253,200,68,.16), transparent 42%);
}
.cta .head{font-family:"Kanit",sans-serif; font-size:clamp(20px,3vw,26px); font-weight:700;
  color:#fff; margin-bottom:8px}
.cta p{max-width:none; color:#b9c6e0; margin-bottom:6px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; margin-top:16px;
  font-family:"Kanit",sans-serif; font-weight:600; font-size:17px;
  padding:16px 30px; min-height:56px; border-radius:999px;
  background:var(--gold); color:var(--navy); border:2px solid var(--gold);
  text-decoration:none; box-shadow:0 3px 0 #e0a91e;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 #e0a91e}

/* ---- คอลัมน์บทความที่เกี่ยวข้อง ---- */
.related{min-width:0}
@media (min-width:901px){ .related{position:sticky; top:84px; align-self:start} }
.related h2{
  font-family:"Kanit",sans-serif; font-size:17px; font-weight:700;
  color:var(--navy); margin-bottom:14px;
}
.related ul{list-style:none; background:var(--card); border-radius:var(--r);
  box-shadow:var(--sh); padding:6px 18px}
.related li{border-bottom:1.5px solid var(--line); padding:13px 0}
.related li:last-child{border-bottom:0}
.related a{font-size:16px; font-weight:600; text-decoration:none; color:var(--navy); line-height:1.55}
.related span{display:block; font-size:13.5px; color:var(--dim); margin-top:3px; font-weight:400}

footer{
  border-top:1.5px solid var(--line); padding:26px max(16px,env(safe-area-inset-left)) 40px;
  color:var(--dim); font-size:15px;
  display:flex; justify-content:center; gap:8px 26px; flex-wrap:wrap;
}
footer a{color:var(--dim); text-decoration:none}

@media (max-width:560px){
  body{font-size:17px}
  .lead{font-size:18.5px}
  .cta{padding:28px 18px; border-radius:20px}
}

/* อุปกรณ์สัมผัสไม่ควรติด :hover ค้างหลังแตะ */
@media (hover:hover){
  a:hover{color:var(--navy)}
  .playbtn:hover{transform:translateY(-2px); box-shadow:0 5px 0 #e0a91e}
  .crumbs a:hover{color:var(--blue)}
  .card:hover{transform:translateY(-3px); box-shadow:var(--sh-lift)}
  .tcard:hover{transform:translateY(-3px); box-shadow:var(--sh-lift)}
  .clus h2 a:hover{color:var(--blue)}
  .btn:hover{transform:translateY(-2px); box-shadow:0 5px 0 #e0a91e}
  .related a:hover{color:var(--blue)}
  footer a:hover{color:var(--blue)}
}