/* วิทยากร /speakers และโปรไฟล์ /speakers/:slug (ต.ค. 69) · สร้างจากม็อกอัพ speakers.html + speaker.html · ทุกกฎอยู่ใต้ .sx · โหลดจาก layout.ejs */
.sx{--navy:#062A4B;
  --navy-2:#0D3B66;
  --navy-3:#1B5287;
  --orange:#FF8000;
  --orange-ink:#B35500;
  --orange-soft:#FFF1E3;
  --sky:#F2F6FA;
  --paper:#FFFFFF;
  --ink:#14263A;
  --muted:#5A6B7D;
  --line:#DCE5EE;
  --line-green:#06C755;
  --display:"Anuphan","Noto Sans Thai",system-ui,sans-serif;
  --body:"Noto Sans Thai","Sarabun",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;}
.sx *{box-sizing:border-box}
.sx{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;margin:0}
.sx h1,.sx h2,.sx h3,.sx h4{font-family:var(--display);color:var(--navy);text-wrap:balance;margin:0;line-height:1.25}
.sx p{margin:0}
.sx a{color:inherit}
.sx img{max-width:100%}
.sx .wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sx .band{padding-block:76px}
.sx .band.sky{background:var(--sky)}
.sx .eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--orange-ink);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sx .sec-head{display:flex;flex-direction:column;gap:10px;max-width:680px}
.sx .sec-head h2{font-size:clamp(26px,3.4vw,36px)}
.sx .sec-head p{color:var(--muted)}
.sx .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.sx .link{color:var(--navy-3);font-weight:600;text-decoration:none;white-space:nowrap}
.sx .link:hover{color:var(--orange-ink)}
.sx .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;font-size:16px;padding:13px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease}
.sx .btn:hover{transform:translateY(-1px)}
.sx .btn:focus-visible,.sx a:focus-visible,.sx summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sx .btn-primary{background:var(--orange);color:#fff}
.sx .btn-line{background:var(--line-green);color:#fff}
.sx .btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.sx .btn{white-space:nowrap}
.sx{--mono:"JetBrains Mono","Noto Sans Thai",ui-monospace,Consolas,monospace}
.sx .grid-light{background-image:linear-gradient(rgba(13,59,102,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(13,59,102,.06) 1px,transparent 1px);background-size:32px 32px}
.sx .crumbs{font-size:13px;color:#A9BDD1;display:flex;gap:8px;flex-wrap:wrap}
.sx .crumbs a{color:#C9D6E3;text-decoration:none}
.sx .crumbs a:hover{color:#fff}
.sx .ppl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sx .tcard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0;transition:transform .25s ease,box-shadow .25s ease}
.sx .tcard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(6,42,75,.5)}
.sx .tcard .photo{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--sky)}
.sx .tcard .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .5s ease}
.sx .tcard:hover .photo img{transform:scale(1.05)}
.sx .tcard .cnt{position:absolute;right:10px;bottom:10px;z-index:1;font-size:12px;font-weight:600;background:var(--orange);color:#fff;border-radius:999px;padding:4px 11px;box-shadow:0 6px 14px -6px rgba(194,94,0,.7)}
.sx .tcard .cap{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.sx .tcard h3{font-size:17px}
.sx .tcard .role{font-size:13px;color:var(--orange-ink);font-weight:600}
.sx .tcard .skills{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sx .tcard .skills span{font-size:12px;background:var(--sky);color:var(--navy-2);border-radius:999px;padding:3px 10px}
.sx .tcard .bio{font-size:15px;line-height:1.55;color:var(--ink,#1d2b3a);margin-top:10px}
.sx .tcard .more{margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;color:var(--orange-ink);transition:transform .25s ease}
.sx .tcard:hover .more{transform:translateX(4px)}
@media (max-width:1000px){.sx .ppl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){.sx .ppl{grid-template-columns:1fr}
}
.sx .eyebrow{font-size:14.5px!important}
.sx .tcard .skills span,.sx .tcard .cnt{font-size:13.5px!important}
.sx .tcard .role{font-size:14px!important}
@media (prefers-reduced-motion:reduce){.sx *{transition:none!important;scroll-behavior:auto!important}
}
.sx [hidden]{display:none!important}
.sx .s-hero{background-color:var(--sky);padding-block:44px 56px;border-bottom:1px solid var(--line)}
.sx .s-hero .copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;max-width:820px;margin-inline:auto}
.sx .s-hero .crumbs{color:var(--muted);justify-content:center}
.sx .s-hero .crumbs a{color:var(--navy-3)}
.sx .s-hero h1{color:var(--navy);font-size:clamp(30px,4.2vw,48px);line-height:1.2}
.sx .s-hero h1 em{font-style:normal;color:var(--orange)}
.sx .s-hero .lead{font-size:17px;color:#3B4F63;max-width:660px}
.sx .from{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.sx .from span{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px 8px 8px;font-size:14px;color:var(--muted)}
.sx .from img{height:30px;width:64px;object-fit:contain;display:block}
.sx .from b{display:block;color:var(--navy);font-family:var(--display);font-size:15px;line-height:1.2}
.sx .from .t{display:block;text-align:left}
.sx .from-ttl{font-size:13.5px;font-weight:600;color:var(--muted);margin-top:8px}
.sx .voices{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 20px}
.sx .voice{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.sx .voice img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sx .voice .bub{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:14px 18px;box-shadow:0 12px 26px -18px rgba(6,42,75,.45)}
.sx .voice q{quotes:none;display:block;font-family:var(--display);font-weight:600;color:var(--navy);font-size:17px;line-height:1.5}
.sx .voice small{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.sx .voices{grid-template-columns:1fr}
}
.sx .list{padding-block:56px}
.sx .list .head-row{margin-bottom:22px}
.sx .ppl .tcard .cap{padding:18px 20px 20px}
.sx .ppl .tcard h3{font-size:18.5px}
.sx .cta{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--navy);color:#DCE6F0;border-radius:22px;padding:28px clamp(20px,4vw,40px);position:relative;overflow:hidden;isolation:isolate}
.sx .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 240px at 100% 0%,rgba(255,128,0,.3),transparent 65%)}
.sx .cta h2{color:#fff;font-size:clamp(22px,2.8vw,28px)}
.sx .cta p{color:#B9C9D9;margin-top:6px}
.sx .cta .row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.sx .cta{grid-template-columns:1fr}
}
.sx [hidden]{display:none!important}
.sx .p-hero{background-color:var(--sky);padding-block:36px 52px;border-bottom:1px solid var(--line)}
.sx .p-hero .inner{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:center}
.sx .p-hero .crumbs{color:var(--muted);margin-bottom:18px}
.sx .p-hero .crumbs a{color:var(--navy-3)}
.sx .p-hero .face{border-radius:26px;overflow:hidden;aspect-ratio:1;background:#fff;box-shadow:0 26px 50px -30px rgba(6,42,75,.55);border:6px solid #fff}
.sx .p-hero .face img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.sx .p-hero .copy{display:flex;flex-direction:column;gap:12px;min-width:0}
.sx .p-hero h1{color:var(--navy);font-size:clamp(30px,4vw,46px);line-height:1.15}
.sx .p-hero .role{font-weight:600;color:var(--orange-ink);font-size:17px}
.sx .p-hero .say{font-family:var(--display);font-weight:600;color:var(--navy);font-size:clamp(19px,2vw,23px);line-height:1.45;max-width:640px}
.sx .quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:14px 18px;max-width:600px;box-shadow:0 12px 26px -18px rgba(6,42,75,.45)}
.sx .quote q{quotes:none;display:block;font-family:var(--display);font-weight:600;color:var(--navy);font-size:17.5px;line-height:1.5}
.sx .quote small{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
.sx .facts{display:flex;gap:8px;flex-wrap:wrap}
.sx .facts span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--muted)}
.sx .facts b{color:var(--navy);font-family:var(--display)}
.sx .p-hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
@media (max-width:820px){.sx .p-hero .inner{grid-template-columns:1fr;gap:24px}
.sx .p-hero .face{max-width:240px}
}
.sx .sec{padding-block:56px}
.sx .sec h2{font-size:clamp(22px,2.6vw,28px)}
.sx .sec .eyebrow{margin-bottom:6px}
.sx .sec .top{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sx .sec .top p{color:var(--muted);font-size:15px}
.sx .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sx .cc{display:grid;grid-template-columns:120px 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.sx .cc:hover{box-shadow:0 16px 34px -22px rgba(6,42,75,.45);transform:translateY(-3px);border-color:#FFC58C}
.sx .cc img{width:100%;height:100%;object-fit:cover;display:block;min-height:104px}
.sx .cc div{padding:12px 16px;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.sx .cc b{font-family:var(--display);color:var(--navy);font-size:16px;line-height:1.4}
.sx .cc span{font-size:14px;color:var(--muted)}
.sx .cc .pr{font-family:var(--display);font-weight:700;color:var(--navy);font-size:16px}
.sx .cc .pr small{font-family:var(--body);font-weight:400;color:var(--muted);font-size:13.5px}
@media (max-width:760px){.sx .cgrid{grid-template-columns:1fr}
}
.sx .tline p{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.55}
.sx .exp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sx .exp div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.sx .exp i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-weight:700;display:grid;place-items:center;font-size:14px}
.sx .exp b{display:block;font-family:var(--display);color:var(--navy);font-size:16px}
.sx .exp small{font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.sx .exp{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.sx .exp{grid-template-columns:1fr}
}
.sx .two{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){.sx .two{grid-template-columns:1fr}
}
.sx .bio p{color:var(--ink);font-size:16px;line-height:1.75}
.sx .bio details{margin-top:10px}
.sx .bio summary{cursor:pointer;color:var(--orange-ink);font-weight:600;list-style:none}
.sx .bio summary::-webkit-details-marker{display:none}
.sx .bio details p{margin-top:10px;color:var(--muted);font-size:15.5px}
.sx .tline{list-style:none;margin:0;padding:0;position:relative}
.sx .tline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.sx .tline li{position:relative;padding:0 0 18px 30px}
.sx .tline li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--orange)}
.sx .tline li:first-child::before{background:var(--orange)}
.sx .tline time{font-family:var(--mono);font-size:13.5px;color:var(--orange-ink);font-weight:700}
.sx .tline b{display:block;font-family:var(--display);color:var(--navy);font-size:16.5px}
.sx .tline span{font-size:14.5px;color:var(--muted)}
.sx .cards2{display:grid;gap:10px}
.sx .card2{background:var(--sky);border-radius:14px;padding:12px 16px}
.sx .card2 b{display:block;font-family:var(--display);color:var(--navy);font-size:15.5px}
.sx .card2 span{font-size:14px;color:var(--muted)}
.sx .h3{font-family:var(--display);font-weight:700;color:var(--navy);font-size:18px;margin:0 0 12px}
.sx .others{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sx .oc{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;text-decoration:none;color:inherit;transition:border-color .2s ease}
.sx .oc:hover{border-color:var(--orange)}
.sx .oc img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#fff;border:1px solid var(--line)}
.sx .oc b{display:block;font-family:var(--display);color:var(--navy);font-size:15.5px}
.sx .oc span{font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.sx .others{grid-template-columns:1fr}
}
.sx .cta{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--navy);color:#DCE6F0;border-radius:22px;padding:28px clamp(20px,4vw,40px);position:relative;overflow:hidden;isolation:isolate}
.sx .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 240px at 100% 0%,rgba(255,128,0,.3),transparent 65%)}
.sx .cta h2{color:#fff}
.sx .cta p{color:#B9C9D9;margin-top:6px}
.sx .cta .row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.sx .cta{grid-template-columns:1fr}
}
.sx .soon{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;background:var(--sky);border:1px dashed #C9D6E3;border-radius:18px;padding:20px 24px}
.sx .soon b{font-family:var(--display);color:var(--navy);font-size:18px}
.sx .soon p{color:var(--muted);margin-top:4px;max-width:640px}
.sx .soon .row{display:flex;gap:10px;flex-wrap:wrap}
.sx .pubs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:760px){.sx .pubs{grid-template-columns:1fr}
}
/* live-only additions */
.sx{overflow-x:clip}
.sx img{height:auto}
.sx .nb{white-space:nowrap}
.sx .tcard .photo img{height:100%}
.sx .p-hero .face img{height:100%}
.sx .p-hero .face .ini{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:56px;color:var(--navy);background:var(--sky)}
.sx .quote .say2{font-family:var(--display);font-weight:600;color:var(--navy);font-size:17px;line-height:1.55}
.sx .team-note{font-size:14px;color:var(--muted)}
.sx .ev-sec{padding-block:24px 0}
.sx .cc img{height:100%}
.sx a.card2{display:block;text-decoration:none;color:inherit}
.sx a.card2:hover b{color:var(--orange-ink)}
.sx .teams{margin-top:28px}
.sx .teams-h{font-family:var(--display);font-weight:600;color:var(--navy);margin-bottom:10px}
.sx .team-list{display:flex;flex-wrap:wrap;gap:10px}
.sx .team-list a{display:flex;gap:10px;align-items:baseline;background:var(--sky);border:1px solid var(--line);border-radius:999px;padding:7px 16px;text-decoration:none;color:var(--navy)}
.sx .team-list a:hover{border-color:var(--orange)}
.sx .team-list span{font-size:13.5px;color:var(--muted)}
.sx .voice .say{font-family:var(--display);font-weight:600;color:var(--navy);font-size:16.5px;line-height:1.55}
.sx .others .oc img{height:64px}.sx .sec.sky{background-color:var(--sky)}