/* สีทั้งหมดดูดมาจากโปสเตอร์ */
:root{
  --band:#123B70; --band-2:#0C2C58;
  --on-band:#FFFFFF; --on-band-2:#C3D5EC;
  --blue:#1963B1;
  --pill:#123B70; --pill-ink:#FFFFFF;
  --chip:#B6E5F6; --chip-ink:#0F3563;
  --wash:#E4F3FA;
  --ground:#F4F9FB; --surface:#FFFFFF;
  --ink:#0F2644; --ink-2:#3B5170; --ink-3:#667A94;
  --line:#D5E3ED;
  --now:#D22F86; --now-ring:rgba(240,78,174,.28);
  --photo-a:#E4F4FB; --photo-b:#B6E5F6;
  --shadow:0 1px 2px rgba(15,38,68,.06), 0 16px 36px -22px rgba(15,38,68,.45);
  --font:"Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --band-2:#0A2448;
    --blue:#86BBF2;
    --pill:#2463AE; --pill-ink:#FFFFFF;
    --chip:#1D4671; --chip-ink:#CDEBF8;
    --wash:#13294A;
    --ground:#08131F; --surface:#0F2036;
    --ink:#E9F1FA; --ink-2:#B4C5DB; --ink-3:#8699B2;
    --line:#203754;
    --now:#FF7CC0; --now-ring:rgba(255,124,192,.25);
    --photo-a:#173A63; --photo-b:#275C92;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -22px rgba(0,0,0,.9);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
[hidden]{display:none !important}
h1,h2,h3{margin:0; line-height:1.38; text-wrap:balance}
p{margin:0}
a{color:var(--blue)}
.wrap{max-width:980px; margin-inline:auto;
  padding-left:max(18px, env(safe-area-inset-left, 0px));
  padding-right:max(18px, env(safe-area-inset-right, 0px))}

/* ---------- แถบหัว ---------- */
.band{position:relative; overflow:hidden; color:var(--on-band);
  background:linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%);
  padding-top:env(safe-area-inset-top, 0px)}
.band__art{position:absolute; top:-6%; right:-140px; height:112%; width:auto; pointer-events:none; opacity:.7}
.band__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
  gap:12px; padding-block:22px 72px}
.band__logo{height:30px; width:auto; margin-bottom:12px}
.band__kicker{font-size:clamp(30px, 7.6vw, 48px); font-weight:700; line-height:1.2; letter-spacing:-.01em}
.band__theme{background:#FFFFFF; color:#123B70; font-weight:600; line-height:1.5;
  font-size:clamp(13.5px, 3.5vw, 16.5px); padding:5px 16px; border-radius:18px}
.nw{white-space:nowrap}
.band__title{margin-top:6px; padding-block:.08em; font-size:clamp(28px, 7.4vw, 50px);
  font-weight:700; line-height:1.28; letter-spacing:-.01em; color:#FBA43C}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .band__title{color:transparent;
    background:linear-gradient(90deg, #F04EAE 0%, #F7736F 42%, #FBA43C 78%, #FCC83A 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-box-decoration-break:clone}
}

/* ---------- การ์ดวัน-เวลา-สถานที่ ---------- */
.info{position:relative; z-index:2; margin-top:-44px; background:var(--surface);
  border-radius:16px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr}
.info__item{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:16px 18px}
.info__item + .info__item{border-top:1px solid var(--line)}
.info__icon{width:44px; height:44px; border-radius:12px; background:var(--wash); color:var(--blue);
  display:grid; place-items:center}
.info b{display:block; font-size:17px; font-weight:700; line-height:1.4}
.info__sub{display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; font-size:14.5px; color:var(--ink-2)}
.maplink{display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:14px;
  text-decoration:none; white-space:nowrap}
.maplink:hover{text-decoration:underline}
@media (min-width:720px){
  .info{grid-template-columns:1fr 1fr}
  .info__item + .info__item{border-top:0; border-left:1px solid var(--line)}
}

/* ---------- ส่วนเนื้อหา ---------- */
main{display:flex; flex-direction:column; gap:48px; padding-block:34px 60px}
.sec__head{display:flex; flex-direction:column; gap:2px; margin-bottom:16px}
.sec__head h2{font-size:clamp(21px, 5.2vw, 25px); font-weight:700}
.sec__head p{font-size:14.5px; color:var(--ink-3)}

/* เอกสาร */
.docs{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:760px){ .docs{grid-template-columns:repeat(3, minmax(0,1fr))} }
.doc{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:14px 14px 14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s, box-shadow .15s, transform .1s}
.doc:hover{border-color:var(--blue); box-shadow:var(--shadow)}
.doc:active{transform:scale(.985)}
.doc:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.doc__file{position:relative; width:40px; height:50px; border-radius:5px 12px 5px 5px;
  background:var(--wash); color:var(--chip-ink); display:grid; place-items:end center;
  padding-bottom:7px; font-size:10.5px; font-weight:700; letter-spacing:.05em}
.doc__file::before{content:""; position:absolute; top:0; right:0; width:12px; height:12px;
  border-radius:0 0 0 4px; background:linear-gradient(225deg, var(--ground) 50%, var(--chip) 50%)}
.doc__body b{display:block; font-size:15.5px; font-weight:600; line-height:1.45}
.doc__body small{display:block; margin-top:2px; font-size:13px; color:var(--ink-3)}
.doc__go{width:40px; height:40px; border-radius:50%; background:var(--pill); color:var(--pill-ink);
  display:grid; place-items:center; flex:none}
.doc[data-placeholder] .doc__go{background:var(--wash); color:var(--ink-3)}

/* กำหนดการ */
.demo{display:flex; gap:10px; align-items:flex-start; margin-bottom:18px; padding:10px 14px;
  border-radius:10px; background:var(--wash); color:var(--ink-2); font-size:13.5px}
.demo::before{content:"i"; flex:none; width:20px; height:20px; border-radius:50%; margin-top:1px;
  background:var(--blue); color:var(--surface); font-size:12px; font-weight:700; display:grid; place-items:center}
.agenda{list-style:none; margin:0; padding:0; position:relative}
.agenda::before{content:""; position:absolute; left:8px; top:12px; bottom:14px; width:2px; background:var(--line)}
.slot{position:relative; padding:0 0 26px 34px}
.slot:last-child{padding-bottom:0}
.slot::before{content:""; position:absolute; left:1px; top:7px; width:16px; height:16px; border-radius:50%;
  background:var(--ground); border:2.5px solid var(--pill)}
.slot__when{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.slot__time{display:inline-block; background:var(--pill); color:var(--pill-ink); font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.6; padding:2px 12px; border-radius:8px; white-space:nowrap;
  border:1.5px solid var(--pill)}
.live{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--now)}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 4px var(--now-ring); animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.slot__body{margin-top:8px}
.slot h3{font-size:17.5px; font-weight:700}
.topic{font-size:14.5px; color:var(--ink-2)}
.by{margin-top:8px; font-size:15px; font-weight:600; color:var(--blue)}
.role{font-size:13.5px; color:var(--ink-3)}
.parts{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.parts li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
.chip{display:inline-block; background:var(--chip); color:var(--chip-ink); font-size:13px; font-weight:600;
  line-height:1.6; padding:2px 11px; border-radius:7px; white-space:nowrap}
.parts b{display:block; font-size:15px; font-weight:600; line-height:1.5}
.parts span{font-size:13.5px; color:var(--ink-3)}
.jump{display:inline-block; margin-top:12px; font-size:14px; font-weight:600; text-decoration:none}
.jump:hover{text-decoration:underline}

.slot.is-now::before{background:var(--now); border-color:var(--now); box-shadow:0 0 0 5px var(--now-ring)}
.slot.is-now .slot__time{background:var(--now); border-color:var(--now); color:#FFFFFF}
.slot.is-past::before{background:var(--line); border-color:var(--line)}
.slot.is-past .slot__time{background:transparent; color:var(--ink-3); border-color:var(--line)}
.slot.is-past h3{color:var(--ink-2)}

@media (min-width:720px){
  .slot{display:grid; grid-template-columns:168px minmax(0,1fr); gap:0 22px}
  .slot__when{flex-direction:column; align-items:flex-start}
  .slot__body{margin-top:0}
}

/* วิทยากร */
.panel{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 14px}
@media (min-width:820px){ .panel{grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px} }
.person{margin:0; display:flex; flex-direction:column; gap:10px}
.photo{aspect-ratio:360 / 414; max-width:100%; overflow:hidden; border-radius:14px;
  background:linear-gradient(180deg, var(--photo-a) 0%, var(--photo-b) 100%)}
.photo img{width:100%; height:100%; object-fit:cover; object-position:top center}
.p-name{display:block; font-size:15.5px; font-weight:700; line-height:1.4}
.p-role{display:block; margin-top:3px; font-size:13px; line-height:1.55; color:var(--ink-2)}
.mod{margin-top:22px; display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; align-items:center;
  padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px}
.mod .photo{border-radius:10px}
.mod .chip{margin-bottom:6px}

/* ท้ายหน้า */
.foot{background:var(--band); color:var(--on-band-2); font-size:13.5px;
  padding-block:26px calc(26px + env(safe-area-inset-bottom, 0px))}
.foot .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.foot img{height:26px; width:auto}
.foot b{color:#FFFFFF; font-weight:600}

/* แจ้งเตือนเล็ก (ตอนกดปุ่มเอกสารที่ยังไม่มีไฟล์) */
.toast{position:fixed; z-index:50; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom, 0px)); width:min(calc(100% - 32px), 460px);
  padding:12px 16px; border-radius:12px; background:var(--ink); color:var(--ground);
  font-size:14px; line-height:1.55; box-shadow:var(--shadow)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* หน้า 404 */
.info.info--single{grid-template-columns:1fr}
.doc.doc--home{grid-template-columns:minmax(0,1fr) auto}