*{box-sizing:border-box}
:root{
  --bg:#f7f8fc; --fg:#1b2340; --muted:#6b7590;
  --navy:#1f3a7a; --navy-2:#2c56b3; --sky:#e8eefb;
  --accent:#f5a524; --accent-2:#ffd166; --accent-ink:#3a2a05;
  --card:#fff; --line:#294070; --line-soft:#e3e7f1;
  --doodle:#c9cfdf;
  --sh-1:0 1px 2px rgba(27,35,64,.05), 0 2px 8px rgba(27,35,64,.05);
  --sh-2:0 4px 14px rgba(27,35,64,.08), 0 18px 40px -16px rgba(27,35,64,.18);
  --sh-3:0 30px 70px -20px rgba(27,35,64,.3);
  --r:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--fg);
  font-family:"Anuphan","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:0 clamp(14px,4vw,32px) calc(12px + env(safe-area-inset-bottom));
}
button{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--navy-2); outline-offset:3px}
main{margin-bottom:auto; width:100%; max-width:960px; margin-inline:auto}

/* ---------- ฉากหลัง doodle เคลื่อนไหว ---------- */
.doodles{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.doodles svg{position:absolute; width:var(--w,120px); height:auto; color:var(--doodle);
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.9; animation:float var(--t,14s) ease-in-out var(--d,0s) infinite}
.doodles .fill{fill:currentColor; stroke:none}
.doodles .thin{stroke-width:1.6}
.doodles .dash{stroke-dasharray:7 8}
.doodles svg.spin{animation:float var(--t,14s) ease-in-out var(--d,0s) infinite, spin 40s linear infinite}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%{transform:translate3d(var(--dx,0px),var(--dy,-14px),0) rotate(calc(var(--rot,0deg) + var(--dr,3deg)))}
}
@keyframes spin{to{rotate:360deg}}
.doodles .arc{position:absolute; left:-4vw; right:-4vw; height:auto; width:108vw; stroke-width:2}
.doodles .arc.bot{bottom:-3vh} .doodles .arc.top{top:-6vh; transform:scaleY(-1)}
/* วางตำแหน่ง (ใช้ % เพื่อให้ตามขนาดจอ) */
.d1{left:5%;  top:6%;   --w:110px; --t:16s; --rot:-8deg}
.d2{right:6%; top:4%;   --w:170px; --t:19s; --d:-4s; --dx:10px; --dy:-18px}
.d3{right:-2%; top:17%; --w:150px; --t:22s; --d:-9s; --rot:6deg}
.d4{left:-3%;  top:33%; --w:190px; --t:20s; --d:-3s; --dy:12px}
.d5{left:26%;  top:22%; --w:150px; --t:18s; --d:-6s}
.d6{right:8%;  top:31%; --w:160px; --t:17s; --d:-11s; --rot:4deg}
.d7{left:42%;  top:46%; --w:180px; --t:21s; --d:-2s; --dy:-10px; --dx:-8px}
.d8{right:-2%; top:50%; --w:210px; --t:23s; --d:-7s}
.d9{left:-2%;  top:60%; --w:190px; --t:19s; --d:-5s; --rot:-5deg}
.d10{left:38%; top:68%; --w:170px; --t:16s; --d:-1s}
.d11{left:2%;  top:80%; --w:180px; --t:24s; --d:-8s; --rot:8deg}
.d12{right:6%; top:78%; --w:220px; --t:20s; --d:-10s; --rot:-4deg}
@media (max-width:720px){
  .doodles svg{--w:calc(var(--w-m, 90px)); opacity:.7}
  .d5,.d7,.d10{display:none} /* ของกลางจอบังตัวหนังสือบนมือถือ */
  .d1{--w-m:64px} .d2{--w-m:110px} .d3{--w-m:88px;top:14%} .d4{--w-m:120px;top:27%} .d5{--w-m:96px;left:44%}
  .d6{--w-m:96px} .d7{--w-m:110px;left:38%} .d8{--w-m:130px} .d9{--w-m:120px} .d10{--w-m:104px;left:40%}
  .d11{--w-m:120px} .d12{--w-m:140px}
}

/* ---------- หัวเว็บ ---------- */
header.hero{max-width:960px; width:100%; margin:0 auto; padding:clamp(18px,4vw,44px) 0 clamp(16px,3.5vw,30px); text-align:center}
.top + header.hero{padding-top:clamp(10px,2vw,22px)}
.crest{width:clamp(64px,12vw,96px); height:auto; aspect-ratio:1; object-fit:contain; animation:pop .7s var(--ease) both}
h1{font-size:clamp(21px,5.2vw,36px); font-weight:700; letter-spacing:-.015em; line-height:1.3; margin:12px auto 10px;
  max-width:34ch; text-wrap:balance; color:var(--navy); animation:rise .6s var(--ease) .06s both}
h1 .nb{white-space:nowrap}
h1.big{font-size:clamp(40px,9vw,64px); line-height:1.1; margin:14px auto 6px; letter-spacing:-.03em}
.tagline{margin:0 0 14px; font-size:clamp(16px,3.6vw,22px); font-weight:600; color:var(--fg); animation:rise .6s var(--ease) .1s both}
.tagline + .term{margin-top:0}
.term{display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; font-size:14px; font-weight:700;
  color:var(--accent-ink); background:linear-gradient(135deg,var(--accent-2),var(--accent)); box-shadow:0 4px 14px rgba(245,165,36,.3);
  animation:rise .6s var(--ease) .14s both}
.term::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-ink); opacity:.55}
.hint{color:var(--muted); font-size:clamp(14px,3.4vw,16px); margin:16px 0 0; animation:rise .6s var(--ease) .2s both}
@media (max-width:520px){ header.hero{padding-top:14px} .hint{margin-top:12px} }

.screen{display:none}
.screen.on{display:block}

/* ---------- แถบกลับ ---------- */
.bar{display:flex; align-items:center; gap:12px; margin:0 0 18px; flex-wrap:wrap; position:sticky; top:0; z-index:5;
  padding:10px 0; background:linear-gradient(var(--bg) 70%,transparent)}
.back{display:inline-flex; align-items:center; gap:7px; padding:10px 16px 10px 12px; border:1.5px solid var(--line);
  border-radius:999px; background:var(--card); color:var(--fg); font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  box-shadow:var(--sh-1); transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.back:hover{transform:translateX(-3px); box-shadow:var(--sh-2)}
.back:active{transform:scale(.96)}
.crumb{display:inline-flex; align-items:center; gap:10px; font-size:clamp(20px,5vw,26px); font-weight:700; letter-spacing:-.01em; color:var(--navy)}
.crumb .pill{display:inline-grid; place-items:center; min-width:2.1em; padding:2px 12px; border-radius:12px; color:#fff; background:var(--tone); font-size:.9em}
.crumb small{color:var(--muted); font-weight:500; font-size:.62em; margin-left:8px}

/* ---------- การ์ดระดับชั้น ---------- */
.grid-lv{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2.4vw,18px)}
.lv{position:relative; border:0; padding:0; cursor:pointer; font:inherit; color:#fff; text-align:left;
  border-radius:var(--r); overflow:hidden; aspect-ratio:1/.72; isolation:isolate;
  background:linear-gradient(145deg,var(--tone-2),var(--tone)); box-shadow:0 10px 26px -10px var(--tone), var(--sh-1);
  animation:rise .55s var(--ease) both; animation-delay:calc(var(--i)*55ms + .1s);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.lv::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.34),transparent 60%)}
.lv .n{position:absolute; left:18px; bottom:14px; font-size:clamp(34px,8vw,52px); font-weight:700; letter-spacing:-.03em; line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.18)}
.lv .n span{font-size:.5em; font-weight:600; opacity:.9; margin-right:3px}
.lv .lbl{position:absolute; left:18px; top:14px; font-size:12.5px; font-weight:600; opacity:.9}
.lv .wm{position:absolute; right:-6px; top:-18px; font-size:clamp(96px,22vw,150px); font-weight:700; line-height:1; letter-spacing:-.06em;
  color:#fff; opacity:.14; pointer-events:none; user-select:none}
.lv .dots{position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:radial-gradient(#fff 1.2px,transparent 1.3px); background-size:14px 14px; mask:linear-gradient(200deg,#000,transparent 55%)}
.lv .go{position:absolute; right:14px; bottom:14px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.22); transition:background .2s, transform .2s var(--ease)}
.lv .go svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.lv:hover{transform:translateY(-6px); box-shadow:0 22px 40px -14px var(--tone), var(--sh-2)}
.lv:hover .go{background:rgba(255,255,255,.34); transform:translateX(3px)}
.lv:active{transform:translateY(-1px) scale(.985)}
@media (max-width:440px){
  .grid-lv{grid-template-columns:repeat(2,1fr)}
  .lv{aspect-ratio:1/.66; border-radius:18px}
  .lv .n{left:14px; bottom:12px; font-size:36px}
  .lv .lbl{left:14px; top:12px; font-size:12px}
  .lv .go{width:30px; height:30px; right:12px; bottom:12px}
}

/* ---------- ปุ่มห้อง ---------- */
.grid-rm{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:clamp(10px,2.4vw,14px)}
.rm{position:relative; border:1.5px solid color-mix(in srgb,var(--tone) 28%,#fff); border-radius:18px; cursor:pointer; font:inherit;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--tone) 8%,#fff)); color:var(--fg); aspect-ratio:1/.9;
  display:grid; place-content:center; gap:4px; box-shadow:var(--sh-1); overflow:hidden;
  animation:rise .45s var(--ease) both; animation-delay:calc(var(--i)*40ms + .05s);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s, background .24s}
.rm::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--tone)}
.rm b{font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--tone)}
.rm em{font-style:normal; font-size:12.5px; color:var(--muted); font-weight:600}
.rm:hover{transform:translateY(-5px); box-shadow:0 14px 30px -12px var(--tone), var(--sh-2); border-color:var(--tone)}
.rm:active{transform:scale(.95)}
.rm .dot{position:absolute; top:10px; right:10px; padding:2px 7px; border-radius:999px; font-size:10.5px; font-weight:700;
  color:#fff; background:var(--tone)}
@media (max-width:520px){ .grid-rm{grid-template-columns:repeat(3,1fr)} .rm b{font-size:28px} }
/* จอกว้าง: 3 คอลัมน์ การ์ดแนวนอน เลขซ้าย ชื่อขวา */
@media (min-width:720px){
  .grid-rm{grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin-inline:auto}
  .bar{max-width:900px; margin-inline:auto}
  .rm{aspect-ratio:auto; min-height:96px; display:flex; align-items:center; gap:18px; padding:18px 22px 18px 26px; text-align:left}
  .rm b{font-size:44px; min-width:1.2ch}
  .rm em{font-size:15px; color:var(--fg)}
  .rm em::after{content:"ดูตารางเรียน"; display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:2px}
  .rm .dot{top:auto; right:18px; font-size:11.5px; padding:3px 9px}
  .rm .arrow{margin-left:auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
    border:1.5px solid color-mix(in srgb,var(--tone) 40%,#fff); color:var(--tone); transition:background .2s, color .2s, transform .2s var(--ease)}
  .rm .arrow svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
  .rm:hover .arrow{background:var(--tone); color:#fff; transform:translateX(3px)}
  .rm .dot ~ .arrow{margin-right:0}
  .rm:has(.dot) .arrow{display:none}
}
@media (max-width:719.98px){ .rm .arrow{display:none} }

/* ---------- หน้าต่างตาราง ---------- */
.viewer{position:fixed; inset:0; z-index:50; display:none; flex-direction:column; background:rgba(247,248,252,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.viewer.on{display:flex; animation:fade .25s ease both}
.viewer.off{display:flex; animation:fadeout .2s ease both; pointer-events:none}
@keyframes fadeout{to{opacity:0; transform:scale(.985)}}
.viewer.on .vhead,.viewer.on .vfoot{animation:rise .34s var(--ease) .04s both}
.viewer.on .stage{animation:zoomin .38s var(--ease) both}
.vhead{display:flex; align-items:center; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  border-bottom:1px solid var(--line-soft); background:#fff}
.vhead .ttl{font-size:19px; font-weight:700; letter-spacing:-.01em; flex:1; min-width:0; color:var(--tone,var(--navy));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vhead .ttl i{font-style:normal; color:var(--muted); font-weight:500; font-size:13px; display:block; margin-top:1px}
.ico{width:42px; height:42px; flex:none; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:13px;
  background:var(--card); color:var(--fg); cursor:pointer; box-shadow:var(--sh-1); font:inherit;
  transition:transform .18s var(--ease), background .18s}
.ico:hover{transform:translateY(-2px); background:var(--sky)}
.ico:active{transform:scale(.9)}
.ico[disabled]{opacity:.5; cursor:progress; transform:none}
.ico svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.ico.pri{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border-color:transparent; box-shadow:0 6px 16px rgba(245,165,36,.35)}
.ico.pri:hover{filter:brightness(1.04)}

.tabs{display:flex; gap:8px; padding:10px 14px 2px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none; padding:8px 15px; border:1.5px solid var(--line); border-radius:999px; background:var(--card);
  color:var(--line); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:color .2s, border-color .2s, background .2s, transform .18s var(--ease)}
.tab:active{transform:scale(.94)}
.tab[aria-selected="true"]{color:#fff; border-color:transparent; background:var(--tone,var(--navy))}

.stage{position:relative; flex:1 1 0; min-height:0; min-width:0; overflow:hidden; touch-action:none; cursor:grab;
  display:grid; grid-template:100% / 100%; place-items:center}
.stage:active{cursor:grabbing}
.stage img{max-width:none; max-height:none; transform-origin:center center; will-change:transform;
  border-radius:8px; background:#fff; box-shadow:var(--sh-3); -webkit-user-drag:none; user-select:none; opacity:0}
.stage img.ready{opacity:1}
.skel{position:absolute; width:min(84vw,620px); aspect-ratio:1.45; border-radius:14px; background:#fff;
  border:1.5px solid var(--line); overflow:hidden}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(41,64,112,.08),transparent); animation:shim 1.25s infinite}
.skel.off{display:none}
.err{position:absolute; display:none; text-align:center; color:var(--muted); font-size:15px; padding:20px}
.err.on{display:block}
.err button{margin-top:10px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font:inherit; cursor:pointer}
.vfoot{display:flex; align-items:center; justify-content:center; gap:9px; background:#fff;
  padding:12px 14px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft)}
.zoomlbl{min-width:52px; text-align:center; font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}

.toast{position:fixed; left:50%; bottom:calc(86px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(14px);
  z-index:60; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:500; color:#fff;
  background:var(--fg); box-shadow:var(--sh-2); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); max-width:90vw; text-align:center}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- ท้ายเว็บ (แบบย่อ) ---------- */
footer{width:100%; max-width:960px; margin:clamp(28px,6vw,48px) auto 0; color:var(--muted); font-size:13px}
.fbar{display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; padding:14px 18px; border-radius:16px; background:#fff;
  border:1.5px solid var(--line); box-shadow:var(--sh-1)}
.fi{line-height:1.35; color:var(--fg); font-weight:600; font-size:13px}
.fi small{display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.social{display:flex; gap:8px; margin-left:auto}
.social a{width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#fff; transition:transform .18s var(--ease)}
.social a.fb{background:#1877f2} .social a.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)} .social a.tt{background:#111} .social a.wb{background:var(--navy)}
.social a:hover{transform:translateY(-2px)}
.social svg{width:18px; height:18px; fill:currentColor}
.social a.wb svg{fill:none; stroke:currentColor; stroke-width:1.9}
.copy{text-align:center; margin:12px 0 0; font-size:12px}
@media (max-width:600px){ .fbar{flex-direction:column; align-items:flex-start; gap:10px} .social{margin-left:0} }

@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.82)}to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes zoomin{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}
@keyframes shim{100%{transform:translateX(100%)}}

/* ---------- สลับหน้าแบบ View Transition ---------- */
@media (prefers-reduced-motion:no-preference){
  html[data-nav="fwd"]::view-transition-old(root){animation:vo-l .24s ease both}
  html[data-nav="fwd"]::view-transition-new(root){animation:vi-r .32s var(--ease) both}
  html[data-nav="back"]::view-transition-old(root){animation:vo-r .24s ease both}
  html[data-nav="back"]::view-transition-new(root){animation:vi-l .32s var(--ease) both}
}
@keyframes vo-l{to{opacity:0; transform:translateX(-26px)}}
@keyframes vi-r{from{opacity:0; transform:translateX(34px)}}
@keyframes vo-r{to{opacity:0; transform:translateX(26px)}}
@keyframes vi-l{from{opacity:0; transform:translateX(-34px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .doodles svg{animation:none}
}

/* ---------- ปุ่มกลับหน้าแรก (หน้าย่อย) ---------- */
.top{max-width:960px; width:100%; margin:0 auto; padding:calc(12px + env(safe-area-inset-top)) 0 0; display:flex}
.top .back{text-decoration:none}

/* ---------- หน้าแรก: การ์ดเลือกประเภทตาราง ---------- */
.home{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2.4vw,20px)}
.hc{position:relative; display:flex; flex-direction:column; gap:10px; min-height:190px; padding:22px 22px 20px; text-decoration:none;
  border-radius:var(--r); color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(145deg,var(--tone-2),var(--tone)); box-shadow:0 12px 28px -12px var(--tone), var(--sh-1);
  animation:rise .55s var(--ease) both; animation-delay:calc(var(--i)*60ms + .1s);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.hc::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.34),transparent 60%)}
.hc .ic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.22)}
.hc .ic svg{width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hc h2{margin:auto 0 0; font-size:clamp(20px,3vw,26px); font-weight:700; letter-spacing:-.01em; line-height:1.2}
.hc p{margin:0; font-size:13.5px; opacity:.92; line-height:1.5}
.hc .go{position:absolute; right:16px; top:16px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.22); transition:background .2s, transform .2s var(--ease)}
.hc .go svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.hc .wm{position:absolute; right:-10px; bottom:-30px; width:150px; height:150px; opacity:.13; stroke:#fff; fill:none; stroke-width:1.5; pointer-events:none}
.hc:hover{transform:translateY(-6px); box-shadow:0 24px 44px -16px var(--tone), var(--sh-2)}
.hc:hover .go{background:rgba(255,255,255,.36); transform:translateX(3px)}
.hc:active{transform:translateY(-1px) scale(.985)}
@media (max-width:520px){ .home{grid-template-columns:1fr; gap:12px} .hc{min-height:150px; padding:18px} }
@media (min-width:860px){ .home{grid-template-columns:repeat(4,1fr)} .hc{min-height:230px} }

/* ---------- หัวหน้า (หน้าย่อย) ---------- */
.ph{max-width:960px; margin:clamp(18px,4vw,36px) auto 18px; display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.ph h1{margin:0; font-size:clamp(24px,5vw,34px); letter-spacing:-.02em; color:var(--navy); line-height:1.2}
.ph h1 em{display:inline-block; font-style:normal; vertical-align:middle; width:12px; height:12px; border-radius:4px; background:var(--tone,var(--accent)); margin-right:10px}
.ph p{margin:4px 0 0; color:var(--muted); font-size:14.5px}
.ph .term{margin-left:auto}
@media (max-width:520px){ .ph .term{margin-left:0} }

/* ---------- ค้นหา + ตัวกรอง ---------- */
.tools{position:sticky; top:0; z-index:5; padding:10px 0 12px; margin:0 0 6px;
  background:linear-gradient(var(--bg) 82%,transparent)}
.search{position:relative; display:flex; align-items:center}
.search svg{position:absolute; left:16px; width:20px; height:20px; stroke:var(--muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.search input{width:100%; padding:14px 46px 14px 48px; border:1.5px solid var(--line); border-radius:16px; background:#fff; color:var(--fg);
  font:inherit; font-size:16px; box-shadow:var(--sh-1); outline:none; transition:box-shadow .18s, border-color .18s}
.search input:focus{border-color:var(--navy-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--navy-2) 16%,transparent)}
.search input::placeholder{color:#9aa3ba}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none; appearance:none}
.search .clr{position:absolute; right:10px; width:32px; height:32px; border:0; border-radius:50%; background:var(--sky); color:var(--navy);
  font:inherit; font-size:18px; line-height:1; cursor:pointer; display:none}
.search input:not(:placeholder-shown) ~ .clr{display:grid; place-items:center}
.chips{display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--line);
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .18s, color .18s, transform .16s var(--ease)}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--tone,var(--navy)); border-color:transparent; color:#fff}
.chip b{font-weight:500; opacity:.7; margin-left:4px; font-size:12px}
.count{margin:6px 0 12px; font-size:13px; color:var(--muted)}

/* ---------- รายการผลลัพธ์ ---------- */
.list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.row{position:relative; display:flex; align-items:center; gap:14px; padding:12px 16px 12px 14px; text-align:left; border:1.5px solid var(--line-soft);
  border-radius:16px; background:#fff; color:var(--fg); font:inherit; cursor:pointer; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s}
.row:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--tone,var(--navy))}
.row:active{transform:scale(.985)}
.row::before{content:""; flex:none; width:4px; align-self:stretch; border-radius:4px; background:var(--tone,var(--navy)); margin:-2px 0}
.row .tx{min-width:0; flex:1}
.row b{display:block; font-size:15.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .tag{flex:none; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; color:var(--tone,var(--navy));
  background:color-mix(in srgb,var(--tone,var(--navy)) 12%,#fff)}
.row mark{background:color-mix(in srgb,var(--accent) 45%,#fff); color:inherit; border-radius:3px; padding:0 1px}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:40px 16px; border:1.5px dashed var(--line-soft); border-radius:16px; background:#fff}
.empty b{display:block; color:var(--fg); margin-bottom:4px}

/* ---------- ป้ายผู้ใช้ (มุมขวาบน) ---------- */
.who{position:fixed; top:calc(10px + env(safe-area-inset-top)); right:clamp(10px,3vw,24px); z-index:6; display:flex; align-items:center; gap:8px;
  padding:6px 6px 6px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--line); box-shadow:var(--sh-1); font-size:13px; font-weight:600; color:var(--navy)}
.who span{max-width:38vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who button{border:0; border-radius:999px; padding:6px 12px; background:var(--sky); color:var(--navy); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer}
.who button:hover{background:var(--navy); color:#fff}
@media (max-width:520px){ .who{right:10px; padding:5px 5px 5px 12px; font-size:12.5px} .who span{max-width:32vw} .who button{padding:6px 10px; font-size:12px}
  .top{padding-right:56vw} header.hero{padding-top:clamp(52px,12vw,60px)} }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login{display:grid; place-items:center; min-height:calc(100dvh - 40px); padding:20px 0}
.lcard{width:min(100%,440px); text-align:center; background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:clamp(24px,5vw,40px) clamp(20px,5vw,36px);
  box-shadow:var(--sh-2); border-top:5px solid var(--accent)}
.lcard h1{margin:14px 0 8px; font-size:28px; color:var(--navy); letter-spacing:-.02em}
.lcard p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.7}
.lcard p b{color:var(--fg)}
.lerr{margin:14px 0 0 !important; padding:10px 14px; border-radius:12px; background:#fff1f2; color:#b91c1c !important; font-weight:600; font-size:13.5px !important}
.gbtn{display:flex; align-items:center; justify-content:center; gap:12px; margin:22px 0 14px; padding:14px 18px; border-radius:14px;
  background:var(--navy); color:#fff; font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 10px 24px -10px var(--navy);
  transition:transform .18s var(--ease), background .18s}
.gbtn svg{width:22px; height:22px; background:#fff; border-radius:50%; padding:3px}
.gbtn:hover{transform:translateY(-2px); background:var(--navy-2)}
.gbtn:active{transform:scale(.98)}
.lhome{font-size:13.5px; color:var(--muted); text-decoration:none}
.lhome:hover{color:var(--navy)}

/* ---------- ออฟไลน์ ---------- */
.offline{position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); z-index:70;
  padding:9px 16px; border-radius:999px; background:#1b2340; color:#fff; font-size:13px; font-weight:600; box-shadow:var(--sh-2);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); max-width:92vw; text-align:center}
.offline.on{opacity:1; transform:translateX(-50%)}
.save{margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--navy); font:inherit; font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--sh-1); transition:transform .18s var(--ease)}
.save b{font-weight:700}
.save:hover{transform:translateY(-2px)}
.save.done{background:#ecfdf5; border-color:#12a66d; color:#0b7a4f; cursor:default}
.save[disabled]{opacity:.7; cursor:progress}
@media (max-width:520px){ .save{margin-left:0; flex-basis:100%; justify-content:center} }