/* ══ layout ══════════════════════════════════════════════
   โครงหน้า: ฉากหลัง / เมนู / หัวข้อ section / footer
   ชิ้นส่วนที่ใช้ซ้ำทุกหน้าอยู่ไฟล์นี้
   ═══════════════════════════════════════════════════════ */

.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}

/* ── เมนู ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:var(--s2); height:66px}
.mark{
  font-family:var(--disp); font-weight:800; font-size:1.28rem;
  letter-spacing:-.03em; text-decoration:none;
  display:flex; align-items:center; gap:.55rem; white-space:nowrap;
}
.mark svg{display:block}
.nav nav{margin-left:auto; display:flex; gap:var(--s2); align-items:center}
.nav nav a{
  font-size:var(--fs0); font-weight:500; text-decoration:none; color:var(--ink-2);
  transition:color .15s ease; position:relative;
}
.nav nav a:hover{color:var(--green-dk)}
.nav nav a.active{color:var(--ink); font-weight:600}
.nav nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--green); border-radius:2px;
}
.nav nav a.hire{
  color:#fff; background:var(--ink); padding:.5rem 1.05rem; border-radius:99px;
  font-weight:600;
}
.nav nav a.hire:hover{background:var(--green-dk); color:#fff}
.nav nav a.hire.active::after{display:none}
@media(max-width:640px){
  .nav .wrap{gap:.9rem}
  .nav nav{gap:1rem}
  .nav nav a{font-size:var(--fs-1)}
}

/* ── section ──────────────────────────────────────────── */
section{padding:var(--s5) 0}
@media(max-width:900px){ section{padding:var(--s4) 0} }

.head{
  display:flex; align-items:baseline; gap:var(--s2);
  margin-bottom:var(--s3); border-bottom:1px solid var(--line);
  padding-bottom:var(--s1); flex-wrap:wrap;
}
.head .count{font-size:var(--fs0); color:var(--ink-3); margin-left:auto}
.head .count b{font-family:var(--mono); font-weight:500; color:var(--ink-2)}

/* หัวหน้าเพจ (หน้ารอง) */
.pagehead{padding:var(--s4) 0 0}
.pagehead .lat{color:var(--ink-3); display:block; margin-bottom:.6rem}
.pagehead .thainame{color:var(--ink-3); font-size:var(--fs2); margin-top:.3rem}
.pagehead p{color:var(--ink-2); font-size:var(--fs2); max-width:46ch; margin-top:var(--s1)}

/* ── footer ───────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--line); background:var(--card);
  margin-top:var(--s4);
}
.site-footer .wrap{
  padding:var(--s3) 0; display:flex; gap:var(--s2); flex-wrap:wrap;
  align-items:center; font-size:var(--fs-1); color:var(--ink-3);
}
.site-footer nav{display:flex; gap:var(--s2); margin-left:auto; flex-wrap:wrap}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--green-dk)}
.site-footer .copy{font-family:var(--mono)}