/* =========================================================
   academician.css  -  หน้าบุคลากรสายสอนและวิจัย คณะวิศวกรรมศาสตร์ PNU
   ทุกสไตล์ขึ้นต้นด้วย #pnu-staff เพื่อไม่ให้ชนกับธีมของเว็บ
   - --hdr : ความสูงของ header ของเว็บ (ถ้า header ติดค้างขณะเลื่อน) ใช้กำหนดตำแหน่งแถบค้นหา
   - --night : สีพื้น hero (สีเดียวกับ footer ของเว็บ)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@500;600;700&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;1,600;1,700&display=swap');

#pnu-staff{
  position:relative; box-sizing:border-box; margin:0; width:100%;
  background:var(--bg); color:var(--ink);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
#pnu-staff *,#pnu-staff *::before,#pnu-staff *::after{ box-sizing:inherit; }
#pnu-staff{
  box-sizing:border-box;

  --night:#47141f;
  --gold:#e3c27f;

  --bg:#fcf8f9;
  --surface:#ffffff;
  --ink:#2b161b;
  --muted:#6a5559;
  --line:#e3d8db;
  --accent:#7b1e2e;
  --accent-soft:rgba(123,30,46,.10);
  --on-bg:#7b1e2e;
  --on-ink:#ffffff;
  --mark:rgba(227,194,127,.55);

  --c-com:#2a63ad;
  --c-ind:#6b4fa0;
  --c-mech:#c2570c;
  --c-elec:#8a7410;
  --c-civil:#1f7a6d;

  --serif:'Noto Serif Thai','Thonburi','Tahoma',serif;
  --sans:'Sarabun','Leelawadee UI','Tahoma',system-ui,sans-serif;
  --hdr:0px;
  color-scheme:light;
}
#pnu-staff a{ color:inherit; }
#pnu-staff :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#pnu-staff .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#pnu-staff .hero{
  position:relative; overflow:hidden; isolation:isolate; color:#fff7f8;
  background:
    radial-gradient(1000px 440px at 50% 112%, rgba(255,222,160,.14), transparent 70%),
    radial-gradient(760px 400px at 12% -8%, rgba(255,150,170,.08), transparent 70%),
    var(--night);
}
#pnu-staff .hero canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1;
  animation:skyIn 1.8s ease-out both;
}
#pnu-staff .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
#pnu-staff .hero-in{
  max-width:1160px; margin:0 auto; text-align:center;
  padding:clamp(56px,10vw,108px) 20px clamp(96px,13vw,140px);
}
#pnu-staff .hero h1{
  margin:0; font:600 clamp(32px,6.2vw,58px)/1.35 var(--serif);
  animation:riseIn 1s .15s cubic-bezier(.2,.7,.2,1) both;
}
#pnu-staff .hero .sub{
  margin:8px 0 0; font-size:clamp(17px,2.8vw,24px); line-height:1.4; color:#ffe9ed; font-weight:700; font-style:italic;
  animation:riseIn 1s .35s cubic-bezier(.2,.7,.2,1) both;
}
#pnu-staff .hero .lede{
  max-width:560px; margin:22px auto 0; color:#fff3f5; font-size:15.5px;
  animation:riseIn 1s .55s cubic-bezier(.2,.7,.2,1) both;
}
#pnu-staff .hero .rule{
  display:block; width:min(220px,50%); height:1px; margin:22px auto 0;
  background:linear-gradient(90deg,transparent,#ffe2a8,transparent); opacity:.85;
  animation:riseIn 1s .45s ease both;
}
@keyframes skyIn{ from{opacity:0} to{opacity:1} }
@keyframes riseIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
#pnu-staff .wrap{ max-width:1160px; margin:0 auto; padding:0 20px; }
#pnu-staff .bar{ position:relative; z-index:30; background:var(--bg); padding:6px 0 14px; }
@media (min-width:720px){
#pnu-staff .bar{
    position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr)); padding:12px 0;
    background:color-mix(in srgb,var(--bg) 93%,transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-bottom:1px solid transparent;
  }
#pnu-staff .bar.stuck{ border-bottom-color:var(--line); }
}
#pnu-staff .bar-in{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
#pnu-staff .search{
  flex:1 1 300px; display:flex; align-items:center; gap:10px; height:48px; padding:0 8px 0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--muted);
}
#pnu-staff .search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
#pnu-staff .search svg{ width:19px; height:19px; flex:none; }
#pnu-staff .search input{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ink);
  font:400 16px/1 var(--sans);
}
#pnu-staff .search input::placeholder{ color:var(--muted); opacity:.85; }
#pnu-staff .search input::-webkit-search-cancel-button{ display:none; }
#pnu-staff .clear{
  width:34px; height:34px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer;
  display:none; place-items:center;
}
#pnu-staff .search input:not(:placeholder-shown) ~ .clear{ display:grid; }
#pnu-staff .clear:hover{ background:var(--accent-soft); color:var(--accent); }
#pnu-staff .clear svg{ width:16px; height:16px; }
#pnu-staff .seg{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
#pnu-staff .seg-btns{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }
#pnu-staff .seg-btns button{
  font:inherit; font-size:14.5px; color:var(--ink); background:transparent; border:0; padding:0 16px; height:46px; cursor:pointer;
}
#pnu-staff .seg-btns button+button{ border-left:1px solid var(--line); }
#pnu-staff .seg-btns button[aria-pressed="true"]{ background:var(--on-bg); color:var(--on-ink); }
#pnu-staff .filters{ padding-top:10px; display:grid; gap:12px; }
#pnu-staff .frow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
#pnu-staff .flabel{ font-size:14px; color:var(--muted); min-width:104px; }
#pnu-staff .chips{ display:flex; flex-wrap:wrap; gap:8px; }
#pnu-staff .chip{
  font:inherit; font-size:14px; line-height:1; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:11px 14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
#pnu-staff .chip:hover{ border-color:var(--accent); }
#pnu-staff .chip .c{ color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
#pnu-staff .chip i{ width:8px; height:8px; border-radius:50%; background:var(--dc); flex:none; }
#pnu-staff .chip[aria-pressed="true"]{ background:var(--on-bg); border-color:var(--on-bg); color:var(--on-ink); }
#pnu-staff .chip[aria-pressed="true"] .c{ color:inherit; opacity:.8; }
#pnu-staff .chip[data-n="0"]:not([aria-pressed="true"]){ opacity:.45; }
#pnu-staff .fstatus{ display:flex; align-items:center; gap:14px; min-height:34px; font-size:14px; color:var(--muted); }
#pnu-staff .fstatus button{
  font:inherit; font-size:14px; color:var(--accent); background:none; border:0; padding:6px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
#pnu-staff .pnu-list{ padding-top:6px; padding-bottom:64px; min-height:40vh; }
#pnu-staff .sec{ margin-top:36px; }
#pnu-staff .sec:first-child{ margin-top:14px; }
#pnu-staff .sec-h{
  position:relative; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; padding:12px 18px 15px; margin:0 0 14px;
  background:#521a2a; color:#ffffff; border-radius:6px; overflow:hidden;
}
#pnu-staff .sec-h::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--sec,#f1d08a); }
#pnu-staff .sec-h h2{ margin:0; font:600 clamp(20px,3vw,25px)/1.45 var(--serif); color:#ffffff; }
#pnu-staff .sec-h .en{ font-size:14.5px; color:#e3c2c9; }
#pnu-staff .sec-h .n{ margin-left:auto; font-size:14px; color:#e3c2c9; }
#pnu-staff .sec[data-d="com"]{ --sec:#6ba6ee; }
#pnu-staff .sec[data-d="ind"]{ --sec:#a58ee0; }
#pnu-staff .sec[data-d="mech"]{ --sec:#f0925a; }
#pnu-staff .sec[data-d="elec"]{ --sec:#d6c25a; }
#pnu-staff .sec[data-d="civil"]{ --sec:#4fc4b0; }
#pnu-staff .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
#pnu-staff .card{
  --dc:var(--c-civil);
  --surface:#521a2a; --ink:#fff4f5; --muted:#e3c2c9; --line:#74303f;
  --accent:#f1d08a; --accent-soft:rgba(241,208,138,.16); --mark:rgba(227,194,127,.4);
  color:#ffffff;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--dc); border-radius:6px;
  padding:16px 16px 10px;
}
#pnu-staff .card[data-d="com"]{ --dc:#6ba6ee; }
#pnu-staff .card[data-d="ind"]{ --dc:#a58ee0; }
#pnu-staff .card[data-d="mech"]{ --dc:#f0925a; }
#pnu-staff .card[data-d="elec"]{ --dc:#d6c25a; }
#pnu-staff .card[data-d="civil"]{ --dc:#4fc4b0; }
#pnu-staff .card:hover{ border-color:color-mix(in srgb,var(--dc) 50%,var(--line)); border-top-color:var(--dc); }
#pnu-staff .av{
  grid-row:1 / span 3; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font:600 16px/1 var(--serif); color:var(--dc); border:1.5px solid var(--dc);
  background:color-mix(in srgb,var(--dc) 20%,transparent);
}
#pnu-staff .nm{ margin:0; font:600 17px/1.45 var(--serif); color:#ffffff; }
#pnu-staff .nm a{ text-decoration:none; }
#pnu-staff .nm a:hover{ text-decoration:underline; text-underline-offset:3px; }
#pnu-staff .sn{ margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); }
#pnu-staff .meta{ margin:4px 0 0; font-size:13.5px; line-height:1.5; display:flex; align-items:center; gap:7px; color:var(--ink); }
#pnu-staff .meta i{ width:8px; height:8px; border-radius:50%; background:var(--dc); flex:none; }
#pnu-staff .mail{
  grid-column:1 / -1; display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:8px; border-top:1px solid var(--line);
  font-size:14px;
}
#pnu-staff .mail a{ flex:1; min-width:0; color:var(--muted); text-decoration:none; overflow-wrap:anywhere; padding:4px 0; }
#pnu-staff .mail a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
#pnu-staff .cp{
  flex:none; width:36px; height:36px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer;
  display:grid; place-items:center;
}
#pnu-staff .cp:hover{ background:var(--accent-soft); color:var(--accent); }
#pnu-staff .cp svg{ width:17px; height:17px; }
#pnu-staff mark{ background:var(--mark); color:inherit; border-radius:2px; padding:0 1px; }
#pnu-staff .empty{ padding:56px 0 24px; text-align:center; color:var(--muted); }
#pnu-staff .empty p{ margin:0 0 6px; font-size:17px; color:var(--ink); }
#pnu-staff .empty button{
  margin-top:14px; font:inherit; font-size:15px; color:var(--on-ink); background:var(--on-bg); border:0; border-radius:8px; padding:11px 18px; cursor:pointer;
}
#pnu-staff .toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:70;
  background:var(--on-bg); color:var(--on-ink); padding:10px 18px; border-radius:8px; font-size:14.5px;
  transform:translate(-50%,12px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#pnu-staff .toast.show{ opacity:1; transform:translate(-50%,0); }
@media (max-width:540px){
#pnu-staff .flabel{ min-width:100%; }
#pnu-staff .seg{ width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion: reduce){

}