:root{--sjv:860;--bg:#f3f6f8;--panel:#fff;--panel2:#f6f8fa;--line:#dde3e8;--fg:#17232e;--mute:#5c6a77;--sea:#0f6fa8;--sea2:#14a3a1;--ok:#23784a;--warn:#a86a00;--bad:#c2333f;--accent:#e07a2e;
  --r:14px;--sh:0 2px 10px rgba(16,40,60,.08);font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:light}
html[data-theme="dark"]{--bg:#0e1419;--panel:#161e25;--panel2:#1c262f;--line:#2a3640;--fg:#e5ebf0;--mute:#98a6b3;--sea:#4ea3e0;--sea2:#3cc1bd;--ok:#5cc08a;--warn:#e0a640;--bad:#ef6b75;--sh:0 2px 10px rgba(0,0,0,.35);color-scheme:dark}@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--bg:#0e1419;--panel:#161e25;--panel2:#1c262f;--line:#2a3640;--fg:#e5ebf0;--mute:#98a6b3;--sea:#4ea3e0;--sea2:#3cc1bd;--ok:#5cc08a;--warn:#e0a640;--bad:#ef6b75;--sh:0 2px 10px rgba(0,0,0,.35);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--sea)}
#app{max-width:560px;margin:0 auto;padding:16px 16px 96px;min-height:100vh}
#app.wide{max-width:1180px}
.boot{display:grid;place-items:center;min-height:70vh;color:var(--mute)}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--sea);animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#banner{position:sticky;top:0;z-index:20;background:#fff4dc;color:#6b4800;border-bottom:1px solid #f0d9a6;padding:6px 14px;font-size:13px;text-align:center}
html[data-theme="dark"] #banner{background:#3a2c0e;color:#f3d79a;border-color:#5a4415}@media (prefers-color-scheme:dark){html:not([data-theme="light"]) #banner{background:#3a2c0e;color:#f3d79a;border-color:#5a4415}}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:50;background:#17232e;color:#fff;padding:10px 16px;border-radius:12px;box-shadow:var(--sh);max-width:min(92vw,480px);font-size:15px}
#toast.bad{background:var(--bad)}#toast.ok{background:var(--ok)}
h1{font-size:24px;line-height:1.25;margin:4px 0 6px}h2{font-size:19px;margin:18px 0 8px}h3{font-size:16px;margin:14px 0 6px}
p{margin:6px 0}.mute{color:var(--mute)}.small{font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin:10px 0}
.hero{background:linear-gradient(135deg,#0a3f73,#0f6fa8 50%,#14a3a1);color:#fff;border:0}
.hero .mute{color:rgba(255,255,255,.85)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--fg);min-height:44px}
.btn svg{width:22px;height:22px;flex:none}.btn:hover{border-color:var(--sea)}.btn:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.btn.pri{background:var(--sea);border-color:var(--sea);color:#fff}.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn.bad{color:var(--bad)}
.btn.big{width:100%;min-height:60px;font-size:19px;border-radius:16px}
.btn.huge{width:100%;min-height:84px;font-size:22px;border-radius:18px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>*{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.grid4{grid-template-columns:1fr 1fr}.grid3.wrap{grid-template-columns:1fr}}
label.f{display:block;margin:8px 0}label.f span{display:block;font-size:14px;color:var(--mute);margin-bottom:4px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:11px 12px;min-height:46px}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--sea);cursor:pointer;vertical-align:middle}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sea);border-color:var(--sea)}
input.kg{font-size:34px;font-weight:700;text-align:center;letter-spacing:.02em}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kpi .v{font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.kpi .v small{font-size:14px;font-weight:500;color:var(--mute);margin-left:3px}.kpi .l{font-size:13px;color:var(--mute)}
.hero .kpi{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}.hero .kpi .l,.hero .kpi .v small{color:rgba(255,255,255,.88)}
.tag{display:inline-block;font-size:12px;border-radius:999px;padding:1px 8px;border:1px solid var(--line);color:var(--mute);vertical-align:middle}
.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}.tag.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.list{display:grid;gap:8px}.li{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.li .grow{flex:1;min-width:0}.li b{display:block}.li small{color:var(--mute)}
.bar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:var(--sea2)}.bar i.full{background:var(--bad)}.bar i.near{background:var(--warn)}
.mascots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.masc{border:2px solid var(--line);border-radius:14px;padding:10px 4px;text-align:center;background:var(--panel);cursor:pointer}
.masc[aria-pressed="true"]{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--panel))}
.masc .e{font-size:30px;line-height:1.1}.masc small{display:block;font-size:12px;color:var(--mute)}
.cardm{border-radius:16px;padding:14px;text-align:center;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:var(--sh)}
.cardm .e{font-size:44px}.cardm.lock{background:var(--panel2)!important;color:var(--mute);border:1px dashed var(--line);box-shadow:none}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--panel);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{display:flex;max-width:560px;width:100%}
.tabbar button{flex:1;border:0;background:none;padding:8px 2px 10px;font-size:12px;color:var(--mute);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px}
.tabbar button svg{width:24px;height:24px}.tabbar button[aria-current="page"]{color:var(--sea);font-weight:600}
.scanbox{border-radius:16px;overflow:hidden;background:#000;min-height:260px}
#reader video{width:100%!important;border-radius:16px}
.map{height:320px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
table.t{width:100%;border-collapse:collapse;font-size:14px}table.t th,table.t td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}table.t th{color:var(--mute);font-weight:500}table.t td.n{text-align:right;font-variant-numeric:tabular-nums}
.top{display:flex;align-items:center;gap:10px;margin-bottom:6px}.top .logo{width:36px;height:36px;border-radius:10px}.top .grow{flex:1}
.chart{width:100%;height:180px}
.side{display:grid;grid-template-columns:220px 1fr;gap:16px}@media (max-width:860px){.side{grid-template-columns:1fr}}
.nav{display:flex;flex-direction:column;gap:4px}.nav button{text-align:left;border:0;background:none;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:500}.nav button[aria-current="page"]{background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea)}
@media (max-width:860px){.nav{flex-direction:row;overflow-x:auto}.nav button{white-space:nowrap}}
.code{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--panel2);padding:2px 6px;border-radius:6px;word-break:break-all}
.consent{font-size:14px;background:var(--panel2);border-radius:12px;padding:10px 12px}
.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0}.check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px}
/* ป้ายสติกเกอร์ QR สำหรับพิมพ์ */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.stk{border:1px dashed #999;border-radius:3mm;padding:3mm;text-align:center;break-inside:avoid;background:#fff;color:#000}
.stk svg{width:30mm;height:30mm}.stk b{display:block;font-size:13pt;font-family:ui-monospace,Menlo,monospace}.stk small{font-size:8pt}
.pqr{break-after:page;text-align:center;padding:10mm;color:#000;background:#fff}.pqr svg{width:120mm;height:120mm}
@media print{body{background:#fff}#app{max-width:none;padding:0}.noprint,#banner,.tabbar{display:none!important}.stk{border-color:#bbb}}

/* มาสคอตจากภาพของทีม */
.av{border-radius:50%;object-fit:cover;display:block;background:var(--panel2);box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,.18)}
.masc .av{margin:0 auto 4px}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:var(--c);border:2px solid var(--c);border-radius:999px;padding:3px 14px;font-weight:700;font-size:14px;white-space:nowrap}
.pill b{width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:12px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width:520px){.cards{grid-template-columns:repeat(3,1fr)}}
.mcard{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:var(--panel2);cursor:pointer;box-shadow:var(--sh)}
.mcard img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .pill{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:13px}
.mcard.lock{cursor:default}.mcard.lock img{filter:grayscale(1) blur(3px) brightness(.75)}
.mcard .lk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.mcard:not(.lock):hover{transform:translateY(-2px);transition:transform .15s}
.zoom{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);display:grid;place-items:center;padding:20px}
.zin{position:relative;width:min(88vw,420px);aspect-ratio:3/4;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.zin img{width:100%;height:100%;object-fit:cover}.zin .pill{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:18px}
/* v2: ทีม ภารกิจ อันดับ */
.teamstrip{display:flex;justify-content:center;gap:4px;margin:4px 0 14px;flex-wrap:wrap}
.mcard.on{outline:4px solid var(--sea);outline-offset:2px}.mcard:disabled{opacity:.45;cursor:not-allowed}
.cards.pick .mcard{aspect-ratio:3/4}
.aic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea)}.aic svg{width:21px;height:21px}.aic.big{width:48px;height:48px}
.ptsb{color:var(--ok);font-size:17px;white-space:nowrap}
.li.act{min-height:64px}
.seg4{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px;margin:6px 0}
.seg4 button{flex:1;border:0;background:none;border-radius:9px;padding:9px 4px;font-weight:600;color:var(--mute);cursor:pointer;min-height:42px}
.seg4 button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin:12px 0}
.pd .pimg{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--sh)}.pd .pimg img{width:100%;height:100%;object-fit:cover}.pd .pimg .pill{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:11px;padding:1px 8px 1px 2px}.pd .pimg .pill b{width:18px;height:18px;font-size:10px}
.pd .pst{text-align:center;border-radius:0 0 12px 12px;margin-top:6px;padding:6px 2px;color:#fff}.pd .pst b{display:block;font-size:24px;line-height:1}.pd .pst small{font-size:12px}
.pd.p1 .pst{background:linear-gradient(#e6b422,#b8860b);min-height:74px}.pd.p2 .pst{background:linear-gradient(#c9ced6,#8e96a3);min-height:56px}.pd.p3 .pst{background:linear-gradient(#d08a4e,#9a5a2a);min-height:44px}
.pd.mine .pimg{outline:3px solid var(--sea);outline-offset:2px}
.teamhero{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh)}.teamhero img{width:100%;height:100%;object-fit:cover;object-position:center 30%}.teamhero .pill{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:18px}
.staffcard .sav{flex:none;width:52px;height:52px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700}
.badge{display:inline-block;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-style:normal;font-size:11px;line-height:18px;padding:0 5px}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--tc,#0f6fa8) 85%,#000),var(--tc,#0f6fa8) 55%,#14a3a1)}

.seg2{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#e6edf3;border-radius:14px;padding:4px;margin:0 0 8px}
.seg2 button{border:0;background:transparent;border-radius:11px;padding:10px;font:inherit;font-weight:700;color:#4a5866;cursor:pointer}
.seg2 button[aria-pressed=true]{background:#fff;color:var(--sea);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.myrk{margin:6px 0 10px}
.ppod .pd{display:flex;flex-direction:column;align-items:center;text-align:center}
.ppod .pav{margin-bottom:4px}.ppod .pnm{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkno{flex:0 0 44px;height:44px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
/* v3: แลกของ ยกแต้ม เก็บแต้ม */
.quick{margin:10px 0 4px}.quick .btn{gap:8px}.quick svg,.keepcta svg{width:22px;height:22px}
.keepcta{text-decoration:none;color:inherit;border:1.5px dashed var(--sea);background:var(--panel2)}
.center{text-align:center}
.gqr{width:200px;max-width:70%;margin:6px auto}.gqr svg{width:100%;height:auto;display:block}
.voucher{position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:22px;padding:22px 18px 26px;margin:6px 0 12px;
  background:linear-gradient(120deg,#0f6fa8,#14a3a1,#23784a,#0f6fa8);background-size:300% 300%;animation:vbg 6s linear infinite;box-shadow:var(--sh)}
@keyframes vbg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.voucher h1{color:#fff;margin:6px 0 2px}
.vtop{display:flex;gap:10px;align-items:center;justify-content:center;text-align:left}.vtop .av{border:3px solid #fff}
.vok{width:64px;height:64px;margin:14px auto 0;border-radius:50%;background:#fff;color:#23784a;display:grid;place-items:center;animation:vpop .5s ease-out}
.vok svg{width:38px;height:38px;stroke-width:3}
@keyframes vpop{0%{transform:scale(.3)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.vname{font-size:22px;font-weight:800;margin-top:4px}
.vcode{font:800 44px/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;margin:12px 0 2px}
.voucher .vcode{background:rgba(255,255,255,.16);border-radius:14px;padding:6px 0}
.vclock{font:700 26px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;animation:vblink 1s steps(2) infinite}
@keyframes vblink{50%{opacity:.75}}

/* v4: ตรวจยืนยัน */
.flags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.vact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}.vact .btn{flex:0 0 auto}
.vimg{width:100%;max-width:420px;border-radius:12px;margin-top:8px;display:block}
/* v5 */
.seg3,.seg5{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px;margin:6px 0 10px}
.seg3 button,.seg5 button{flex:1;border:0;background:none;border-radius:9px;padding:9px 4px;font-weight:600;color:var(--mute);cursor:pointer;min-height:42px;font-size:14px}
.seg3 button[aria-pressed="true"],.seg5 button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media (max-width:420px){.seg5 button{font-size:12.5px;padding:8px 2px}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer;min-height:36px}
.chip.on{background:var(--sea);border-color:var(--sea);color:#fff;font-weight:600}
.anncard.new{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.anncard .aic{color:var(--accent)}
.annnew{border-left:4px solid var(--accent)}
.memcta{border-color:color-mix(in srgb,var(--sea2) 50%,var(--line))}
.li.btn.on{border-color:var(--sea);box-shadow:0 0 0 2px color-mix(in srgb,var(--sea) 35%,transparent)}
.post h2{font-size:20px}.pbody{font-size:15px;line-height:1.65;margin-top:8px}.figs{margin:10px 0}.figs .kpi .v{font-size:24px}
.fact .fv{flex:0 0 auto;max-width:45%;text-align:right;font-size:15px}.fact .fv small{font-weight:400;color:var(--mute)}
details.card summary{cursor:pointer;list-style-position:outside}details.card[open] summary{margin-bottom:6px}
textarea{resize:vertical;min-height:90px}

.row>.tag{flex:0 0 auto}.row>.btn[data-m]{flex:0 0 auto}
/* v5.1 */
.langbar{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px;flex:0 0 auto;margin:0 0 6px auto}
.langbar button{border:0;background:none;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600;color:var(--mute);cursor:pointer;min-height:32px}
.langbar button[aria-pressed="true"]{background:var(--sea);color:#fff}
#app>.langbar:first-child{display:flex;width:max-content}
.top .langbar{margin:0}
.pickmap{height:260px}
.phwrap{position:relative}.phwrap img{width:100%;border-radius:12px;display:block}.phwrap button{position:absolute;right:8px;top:8px;min-height:34px;padding:4px 10px}
details.langs summary{cursor:pointer;white-space:nowrap}details.langs input{min-width:180px;margin-top:4px;min-height:36px;padding:6px 8px}
.pre{white-space:pre-wrap;word-break:break-all;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12.5px}
/* v5.3 */
.hero.compact{padding:14px 16px}
.hpts{flex:0 0 auto;text-align:right;color:#fff;text-decoration:none;line-height:1.05}.hpts b{display:block;font-size:30px;font-variant-numeric:tabular-nums}.hpts small{font-size:12px;opacity:.9}
.tabbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--bad);vertical-align:top;margin-left:2px}
.notice{position:sticky;top:0;z-index:21;padding:8px 14px;font-size:14px;text-align:center;background:#e8f2fb;color:#0b4a78;border-bottom:1px solid #c6dcef}
.notice.warn{background:#fff4dc;color:#6b4800;border-color:#f0d9a6}.notice.bad{background:#fde8ea;color:#8a1c26;border-color:#f3c2c7}
.timgs{display:grid;gap:6px;justify-items:center;flex:0 0 120px}.tav{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--panel2)}.tcd{width:110px;height:140px;object-fit:cover;border-radius:10px;background:var(--panel2)}
@media (max-width:640px){.tcard>.row{flex-wrap:wrap!important}}
/* v5.3 แถบบน: ชื่อแอป + ข่าวสารมุมขวาบน */
.appbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-16px -16px 8px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.abrand{display:flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;min-width:0}.abrand img{border-radius:8px;flex:none}.abrand b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newsbtn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg);text-decoration:none;font-weight:600;font-size:14px;min-height:40px;flex:none}
.newsbtn svg{width:20px;height:20px}.newsbtn.on{border-color:var(--sea);color:var(--sea)}
.newsbtn .badge{position:absolute;top:-6px;right:-6px}
/* v5.5 สรุปผลของฉัน */
.mycard{border-color:color-mix(in srgb,var(--sea) 40%,var(--line));background:color-mix(in srgb,var(--sea) 6%,var(--panel))}
.cardwrap{margin-top:10px;border-radius:16px;overflow:hidden;background:var(--panel2);min-height:200px}.mycardimg{display:block;width:100%;height:auto}
/* v5.6 ของรางวัล · การ์ดทีมของสมาชิก */
[hidden]{display:none!important}
.rwthumb{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--panel2)}
.rwimg{object-fit:cover;border-radius:14px;background:var(--panel2)}
.rwc .tag{margin-bottom:6px}
.teamchip{align-items:center;flex-wrap:nowrap;text-decoration:none;color:inherit}.teamchip.need{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.rwsum{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.rwsum::-webkit-details-marker{display:none}.rwsum .grow{min-width:0}.rwsum small{display:inline}
details.rwc[open] .rwsum{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}details.rwc[open] .rwsum .btn{display:none}
.rwsum>.grow{flex:1 1 auto}
/* v5.7 เมนูหลังบ้านอยู่กับที่ + ซ่อนได้ · แผนที่หมุด */
.chip[aria-pressed="true"]{background:var(--sea);border-color:var(--sea);color:#fff;font-weight:600}
.nav{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow-y:auto;z-index:5}
body:has(#banner) .nav,body:has(#notice) .nav{top:48px;max-height:calc(100vh - 60px)}
.nav .navtg{font-size:13px;color:var(--mute);border:1px dashed var(--line)!important;margin-bottom:4px}
.side.navoff{grid-template-columns:1fr}.side.navoff>.nav{display:none}
.navopen{display:none;position:fixed;left:14px;bottom:18px;z-index:40;border:1px solid var(--line);background:var(--panel);color:var(--ink,inherit);border-radius:999px;padding:10px 16px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.15);cursor:pointer}
.side.navoff~.navopen{display:block}
@media (max-width:860px){.nav{top:0;max-height:none;background:var(--bg);padding:6px 0;margin:0 -4px}.nav .navtg{display:none}}
.mapwrap{display:grid;grid-template-columns:1fr 340px;gap:12px;align-items:start}@media (max-width:1000px){.mapwrap{grid-template-columns:1fr}}
.pmap{height:64vh;min-height:380px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}.pmap.adding{cursor:crosshair}.pmap.adding .leaflet-container,.pmap.adding.leaflet-container{cursor:crosshair}
.pside{position:sticky;top:12px;margin:0}.pside textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel);color:inherit}
.pinmk{background:none;border:0}.pinmk span{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);margin-left:0}
.pinmk span.user{border-radius:50%;transform:none;width:22px;height:22px;margin:4px 2px}.pinmk span.off{opacity:.45;filter:grayscale(.6)}.pinmk span.on{outline:3px solid var(--sea);outline-offset:2px}
.pdot{width:14px;height:14px;border-radius:50%;background:var(--c);flex:0 0 auto;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.mapcta{border-color:color-mix(in srgb,var(--sea) 45%,var(--line));background:color-mix(in srgb,var(--sea) 7%,var(--panel));margin-top:10px}

/* ===== v6.4 หลังบ้าน: โทนระบบงานสำนักงาน (อ้างอิงแนว Microsoft 365) · ใช้เฉพาะ body.bo ไม่กระทบหน้าผู้ใช้ ===== */
body.bo{--bg:#f5f5f5;--panel:#fff;--panel2:#fafafa;--line:#e0e0e0;--fg:#242424;--mute:#616161;--sea:#0f6cbd;--ok:#107c10;--warn:#bc4b09;--bad:#c50f1f;--r:6px;--sh:0 1px 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.08);
  background:var(--bg);font-size:14px;font-family:'Segoe UI','IBM Plex Sans Thai',system-ui,sans-serif}
html[data-theme="dark"] body.bo{--bg:#1f1f1f;--panel:#292929;--panel2:#2e2e2e;--line:#3d3d3d;--fg:#f0f0f0;--mute:#adadad;--sea:#479ef5;--ok:#54b054;--warn:#f7894a;--bad:#dc626d;--sh:0 1px 2px rgba(0,0,0,.4)}@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.bo{--bg:#1f1f1f;--panel:#292929;--panel2:#2e2e2e;--line:#3d3d3d;--fg:#f0f0f0;--mute:#adadad;--sea:#479ef5;--ok:#54b054;--warn:#f7894a;--bad:#dc626d;--sh:0 1px 2px rgba(0,0,0,.4)}}
body.bo #app.wide{max-width:none;padding:0;margin:0}
body.bo .bo-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;height:48px;padding:0 12px;background:#1b1b1b;color:#fff}
body.bo .bo-top .grow{flex:1}.bo-logo{width:26px;height:26px;border-radius:6px;background:#fff;padding:2px}.bo-app{font-size:15px;font-weight:600;white-space:nowrap}
.bo-sep{width:1px;height:20px;background:#555;margin:0 6px}.bo-area{color:#d6d6d6;white-space:nowrap}
.bo-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:none;color:#fff;border-radius:4px;cursor:pointer}.bo-burger:hover,.bo-tb:hover{background:#333}.bo-burger svg{width:20px;height:20px}
.bo-tb{color:#fff!important;background:none;border:0;padding:0 10px;height:32px;display:inline-flex;align-items:center;border-radius:4px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap}
.bo-top .langbar{background:#2b2b2b;border-color:#444}.bo-top .langbar button{color:#ddd}.bo-top .langbar button[aria-pressed="true"]{background:#0f6cbd;color:#fff}
.bo-user{display:flex;align-items:center;gap:8px;padding:0 6px}.bo-user i{width:28px;height:28px;border-radius:50%;background:#0f6cbd;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600}.bo-user span{display:flex;flex-direction:column;line-height:1.15}.bo-user b{font-size:12px;font-weight:600}.bo-user small{font-size:11px;color:#bdbdbd}
body.bo .bo-body{display:grid;grid-template-columns:248px 1fr;gap:0;min-height:calc(100vh - 48px)}
body.bo .bo-nav{position:sticky;top:48px;height:calc(100vh - 48px);max-height:none;overflow-y:auto;background:var(--panel2);border-right:1px solid var(--line);padding:8px 6px 24px;display:block}
body.bo .bo-nav .navtg{display:none}
.bo-g{margin-bottom:4px}.bo-gh{display:flex;align-items:center;gap:4px;width:100%;border:0;background:none;padding:8px 8px 4px;font:inherit;font-size:12px;font-weight:600;color:var(--mute);cursor:pointer;text-align:left}
.bo-gh svg{width:14px;height:14px;transform:rotate(90deg);transition:transform .15s}.bo-g.shut .bo-gh svg{transform:none}.bo-g.shut .bo-items{display:none}
body.bo .bo-items button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:7px 10px 7px 14px;border-radius:4px;font:inherit;font-size:14px;font-weight:400;color:var(--fg);cursor:pointer;text-align:left;position:relative}
body.bo .bo-items button svg{width:18px;height:18px;flex:0 0 auto;color:var(--mute)}body.bo .bo-items button span{flex:1}
body.bo .bo-items button:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
body.bo .bo-items button[aria-current="page"]{background:var(--panel);font-weight:600;box-shadow:var(--sh)}body.bo .bo-items button[aria-current="page"]::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--sea)}
body.bo .bo-items button[aria-current="page"] svg{color:var(--sea)}
.bo-own{font-style:normal;font-size:10px;color:var(--mute);border:1px solid var(--line);border-radius:3px;padding:0 4px}
body.bo .bo-main{padding:16px 24px 48px;min-width:0}
.bo-crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-bottom:6px}.bo-crumb svg{width:12px;height:12px}.bo-crumb b{color:var(--fg);font-weight:600}
body.bo .bo-main h1{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:0}body.bo .bo-main h1 small{font-size:13px}
body.bo .bo-main h2{font-size:16px;font-weight:600;margin:20px 0 8px}
body.bo .card{border-radius:8px;border:1px solid transparent;box-shadow:var(--sh);padding:16px}
body.bo .btn{border-radius:4px;min-height:32px;padding:4px 12px;font-size:14px;font-weight:600;box-shadow:none;border:1px solid #d1d1d1;background:var(--panel)}
body.bo .btn:hover{background:var(--panel2)}body.bo .btn.pri{background:var(--sea);border-color:var(--sea);color:#fff}body.bo .btn.pri:hover{filter:brightness(.92)}
body.bo .btn.bad{color:var(--bad)}body.bo .btn.big{min-height:36px}
body.bo input:not([type=checkbox]):not([type=radio]):not([type=color]),body.bo select,body.bo textarea{border-radius:4px;border:1px solid #d1d1d1;border-bottom-color:#8a8a8a;min-height:32px;font-size:14px;background:var(--panel)}
body.bo input:focus,body.bo select:focus,body.bo textarea:focus{outline:none;border-bottom:2px solid var(--sea)}
body.bo .t{border-collapse:collapse;width:100%}body.bo .t th{font-weight:600;font-size:12px;color:var(--mute);text-align:left;border-bottom:1px solid var(--line);padding:8px 8px}body.bo .t td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:middle}body.bo .t tr:hover td{background:var(--panel2)}
body.bo .kpi{border-radius:8px;box-shadow:var(--sh);border:0;background:var(--panel)}body.bo .kpi .v{font-size:24px;font-weight:600}
body.bo .tag{border-radius:3px;font-size:11px;padding:1px 6px}
body.bo .chip{border-radius:4px;min-height:30px;padding:3px 10px;font-size:13px}
body.bo .li{border-radius:6px}
.bo-help{margin:-4px 0 12px;font-size:13px;color:var(--mute)}.bo-help summary{cursor:pointer;color:var(--sea);font-size:13px;width:max-content}.bo-help p{margin:6px 0 0}
.bo-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;background:var(--panel);border-radius:8px;box-shadow:var(--sh);margin-bottom:12px}
.bo-toolbar .btn{border-color:transparent;background:none;font-weight:400}.bo-toolbar .btn.pri{background:var(--sea);color:#fff;font-weight:600}.bo-toolbar .sp{flex:1}
.bo-scrim{display:none}
body.bo .navopen{display:none!important}
body.bo .side.navoff{grid-template-columns:1fr}body.bo .side.navoff .bo-nav{display:none}
@media (max-width:900px){body.bo .bo-body{grid-template-columns:1fr}
  body.bo .bo-nav{position:fixed;left:0;top:48px;bottom:0;width:270px;height:auto;z-index:40;transform:translateX(-102%);transition:transform .18s;box-shadow:2px 0 12px rgba(0,0,0,.2)}
  body.bo.bo-open .bo-nav{transform:none}body.bo.bo-open .bo-scrim{display:block;position:fixed;inset:48px 0 0 0;background:rgba(0,0,0,.3);z-index:35}
  body.bo .bo-main{padding:12px 12px 48px}.bo-area,.bo-sep,.bo-user span,.bo-top .bo-tb[href="#/news"],.bo-top .bo-tb[href="#/o"]{display:none}
  body.bo .side.navoff .bo-nav{display:block}}
/* v6.4 จัดการขยะ 4 ส่วน · เลือกตำแหน่งบนแผนที่ */
.wtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 8px;overflow-x:auto}
.wtabs a{padding:9px 14px;color:var(--fg);text-decoration:none;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.wtabs a[aria-selected=true]{color:var(--sea);border-bottom-color:var(--sea)}.wtabs a:hover{background:rgba(0,0,0,.04)}
.wkpi{margin-bottom:10px}.wkpi .kpi{padding:10px 12px}.wkpi .kpi .v{font-size:20px}
.wbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}.wbar .sp{flex:1}
.wo{max-width:1100px;margin:0 auto;padding:14px 14px 96px}
.pinmk span.plan{border-style:dashed}
.ptmk{background:none;border:0}.ptmk span{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--c);color:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.ptmk span svg{width:16px;height:16px}.ptmk span.asm{border-style:dashed}.ptmk span.on{outline:3px solid var(--sea);outline-offset:2px}
.islemk{background:none;border:0}.islemk span{display:inline-block;background:#0f6cbd;color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.mpick{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:12px}
.mpick-in{background:var(--panel);color:var(--fg);width:min(760px,100%);max-height:94vh;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.mpick-h{padding:12px 14px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)}
.mpick-map{height:min(62vh,520px);cursor:crosshair}
.mpick-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}.mpick-f .grow{flex:1}
@media (max-width:560px){.mpick{padding:0}.mpick-in{max-height:100vh;height:100%;border-radius:0}.mpick-map{flex:1;height:auto}}
.tabbar{z-index:1200}.mapwrap{position:relative;z-index:0}.wo .wbar .btn{border:1px solid var(--line)}
/* v6.5.1 แถบเลื่อนแบบเส้นเล็กมินิมอล (ไม่มีปุ่มลูกศรขึ้น/ลง) · เมนูข้าง แท็บ และแถบด้านล่าง ซ่อนแถบเลื่อน (ยังเลื่อนได้) */
*{scrollbar-width:thin;scrollbar-color:rgba(120,130,140,.35) transparent}
::-webkit-scrollbar{width:6px;height:6px;background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,130,140,.35);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,130,140,.6)}
.bo-nav,.side,.wtabs,.tabbar,.tabbar .in,.chips,.langbar{scrollbar-width:none}
.bo-nav::-webkit-scrollbar,.side::-webkit-scrollbar,.wtabs::-webkit-scrollbar,.tabbar::-webkit-scrollbar,.tabbar .in::-webkit-scrollbar,.chips::-webkit-scrollbar,.langbar::-webkit-scrollbar{display:none}
textarea{resize:vertical}
/* v6.8 แถบบนหลังบ้านสีน้ำเงิน · ปุ่มอนุมัติ · หน้าสมาชิก · บัญชีทำงานรออนุมัติ */
body.bo .bo-top{background:#0f6cbd;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
body.bo .bo-burger:hover,body.bo .bo-tb:hover{background:rgba(255,255,255,.16)}
body.bo .bo-top .langbar{background:rgba(255,255,255,.14);border-color:transparent}
body.bo .bo-top .langbar button{color:#fff}
body.bo .bo-top .langbar button[aria-pressed="true"]{background:#fff;color:#0f6cbd}
body.bo .bo-user i{background:#fff;color:#0f6cbd}
body.bo .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
body.bo .btn.ok:hover{filter:brightness(.93)}
body.bo .btn.bad{background:var(--panel);border-color:#e3b3b8}
body.bo .btn.bad:hover{background:#fdf3f4}
.mwho{display:flex;align-items:center;gap:10px;min-width:0}.mwho i{flex:0 0 32px;height:32px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px}
.mwho b{display:block;font-weight:600}.mwho small{color:var(--mute);font-size:12px}
.mchip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);white-space:nowrap}
.mpend{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:6px}
.mreq{display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--warn)!important}
.mmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mnote{font-size:13px;background:var(--panel2);border-radius:6px;padding:6px 10px}
.mact{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}.mreq .mact{justify-content:flex-start;margin-top:2px}.mreq .mact .btn{flex:1}
td.mact{display:table-cell;white-space:nowrap}td.mact .btn{margin-left:6px}
.mtab td{vertical-align:middle;padding-top:10px;padding-bottom:10px}.mtab tr.off td:not(.mact){opacity:.55}
.mfil{display:flex;gap:4px;flex-wrap:wrap}.mfil button{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.mfil button i{font-style:normal;color:var(--mute);margin-left:2px}.mfil button.on{background:#0f6cbd;border-color:#0f6cbd;color:#fff}.mfil button.on i{color:#dbe9f7}
.workpend{display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--warn)}.workpend.bad{border-left-color:var(--bad)}
.kv2{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:14px}.kv2 span{color:var(--mute)}
.mpend{align-items:start}.mreq{margin:0!important}
/* ===== v6.9 บัญชีทำงาน · เมนูฉัน · ติชม · ถังขยะ · หลังบ้าน (แถบบนไล่สี ปุ่ม Twin) · ตอบสนองทุกขนาดจอ ===== */
.avi{display:inline-grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--sea2));color:#fff;font-weight:700;flex:0 0 auto;line-height:1}
.avme{border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--panel)}
.mhero{position:relative;border-radius:18px;padding:16px;margin:0 0 12px;color:#fff;background:linear-gradient(120deg,#0b4f8a 0%,#0f6fa8 45%,#14a3a1 100%);box-shadow:0 6px 18px rgba(15,111,168,.25);overflow:hidden}
.mhero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.mhero small{opacity:.85}.mhero h1{color:#fff;font-size:22px}.mhero .avi{background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5)}.mhero .avme{border-color:rgba(255,255,255,.6)}
.mhpts{flex:0 0 auto;text-align:center;background:rgba(255,255,255,.16);border-radius:12px;padding:6px 12px;position:relative;z-index:1}.mhpts b{display:block;font-size:20px;line-height:1.1}.mhpts small{font-size:11px}
.ptspill{flex:0 0 auto;background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea);font-weight:700;border-radius:999px;padding:4px 12px;font-size:14px}
.bellbtn{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff;z-index:1}.bellbtn svg{width:22px;height:22px}
.bellbtn .badge{position:absolute;top:-2px;right:-2px;background:#e5484d;color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:11px;font-style:normal;display:grid;place-items:center;padding:0 5px;border:2px solid #0f6fa8}
.alerts{display:grid;gap:8px;margin:0 0 12px}.alertrow{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin:0}.alertrow.hot{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--panel))}.acount{font-size:22px;min-width:32px;text-align:right}
.setrows{padding:4px 14px}.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.setrow:last-child{border-bottom:0}.setrow>span{font-weight:600}
.themeseg{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px}.themeseg button{border:0;background:none;border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;color:var(--fg)}.themeseg button[aria-pressed="true"]{background:var(--sea);color:#fff}
.meprof{display:flex;gap:14px;align-items:center}.mename{font-size:20px;display:block}.meprof small{display:block}.mepbtn{cursor:pointer;min-height:34px;padding:4px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px}.mepbtn svg{width:16px;height:16px}
.outbtn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.tile2{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;margin:0}.tile2 .aic{margin-bottom:4px}
.li.rw[data-rw]{cursor:pointer}.li.rw[data-rw]:hover{border-color:var(--sea)}
.rwd{max-width:520px}.rwd-img{height:180px;background:var(--panel2);display:grid;place-items:center;overflow:hidden}.rwd-img img{width:100%;height:100%;object-fit:cover}.rwd-img svg{width:56px;height:56px;opacity:.5}
.rwd-b{padding:14px 16px;overflow:auto}.rwshop{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.rwmap{height:170px;border-radius:10px;overflow:hidden;margin-top:4px}
.chip.on{background:var(--sea);color:#fff;border-color:var(--sea)}
#fbk .chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit}
.fbreply{margin-top:8px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--ok) 9%,var(--panel));border-left:3px solid var(--ok);font-size:14px}
.fbcard .fbans{display:flex;flex-direction:column;gap:6px;margin-top:6px}.fbcard textarea{width:100%}
/* หลังบ้าน */
body.bo .bo-top{background:linear-gradient(100deg,#0a3d6b 0%,#0f6cbd 42%,#0f8fb0 78%,#14a3a1 100%);box-shadow:0 2px 10px rgba(10,61,107,.25)}
.bo-twin{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;margin-right:6px;border-radius:999px;text-decoration:none;color:#fff!important;font-weight:600;font-size:13px;
  background:linear-gradient(rgba(8,40,70,.35),rgba(8,40,70,.35)) padding-box,linear-gradient(120deg,rgba(255,255,255,.75),rgba(120,240,230,.5),rgba(255,255,255,.15)) border-box;border:1px solid transparent;backdrop-filter:blur(4px);transition:transform .15s,background .2s}
.bo-twin:hover{transform:translateY(-1px);background:linear-gradient(rgba(8,40,70,.15),rgba(8,40,70,.15)) padding-box,linear-gradient(120deg,#fff,#7ff0e6,rgba(255,255,255,.3)) border-box}
.bo-twin .tw-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7ff0e6,#3aa0ff);color:#06345c}.bo-twin .tw-ico svg{width:15px;height:15px}
.bo-twin .tw-tag{font-size:10px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.2)}
.bo-user{text-decoration:none;color:#fff!important;border-radius:999px;padding:2px 8px 2px 2px}.bo-user:hover{background:rgba(255,255,255,.14)}.bo-user .avi{background:#fff;color:#0f6cbd;border:0}
body.bo .bo-user>span:last-child{display:flex}
.bo-outnav{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:8px 12px;border:0;border-top:1px solid var(--line);background:none;color:var(--bad);font:inherit;font-size:14px;cursor:pointer;text-align:left}.bo-outnav svg{width:18px;height:18px}
.bo-narrow{max-width:640px}
.ovhero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:18px 20px;margin:0 0 16px;border-radius:12px;color:#fff;background:linear-gradient(115deg,#0a3d6b 0%,#0f6cbd 50%,#14a3a1 100%);box-shadow:0 6px 20px rgba(15,108,189,.22);position:relative;overflow:hidden}
.ovhero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07)}
.ovhero h1{color:#fff;margin:2px 0;font-size:24px}.ovhero p{margin:0;opacity:.85}.ovhero small{opacity:.8}
.ovq{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}.ovq a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px;padding:10px 8px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:12px;font-weight:600}
.ovq a:hover{background:rgba(255,255,255,.24)}.ovq svg{width:22px;height:22px}.ovq i{position:absolute;top:4px;right:6px;background:#e5484d;color:#fff;font-style:normal;font-size:11px;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}
.kpi2{position:relative;border-left:0!important;overflow:hidden}.kpi2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}.kpi2::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--c);opacity:.08}
.kpil{text-decoration:none;color:inherit;display:block}.kpil:hover{box-shadow:0 0 0 2px var(--c)}
/* ตอบสนองทุกขนาดจอ: มือถือ · แท็บเล็ต · คอมพิวเตอร์ */
@media (min-width:768px){#app:not(.wide){max-width:720px}.tabbar .in{max-width:720px}}
@media (min-width:1100px){#app:not(.wide){max-width:780px}}
@media (max-width:420px){.mhero h1{font-size:19px}.ovq a{min-width:70px}.mpick-f{gap:6px}}
@media (max-width:900px){body.bo .bo-twin .tw-t{display:none}body.bo .bo-twin{padding:0 8px 0 4px}body.bo .bo-user>span:last-child{display:none}}
.dbwarn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--panel))}
/* v6.9.2 */
.fbcard .vimg,.vrow .vimg{max-width:320px!important;max-height:260px;object-fit:cover;width:auto!important}
#fbk .chip.on{background:var(--sea);color:#fff;border-color:var(--sea)}
.iconbtn{min-height:30px;width:30px;padding:0;display:inline-grid;place-items:center;flex:0 0 auto}.iconbtn svg{width:16px;height:16px}
.bo-home,.bo-home:link,.bo-home:visited,.bo-home:hover,.bo-home:active{display:inline-flex;align-items:center;gap:9px;color:#fff!important;text-decoration:none!important;border-radius:9px;padding:3px 10px 3px 3px;outline:none;-webkit-tap-highlight-color:transparent;transition:background .15s}
.bo-home:hover{background:rgba(255,255,255,.12)}.bo-home:focus{outline:none}.bo-home:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.bo-home .bo-logo{background:none;padding:0;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}.bo-home .bo-app{color:#fff;text-decoration:none}
.wxcard{padding:12px 14px}.wxgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.wxi{display:flex;flex-direction:column;gap:2px;min-width:0}.wxi small{color:var(--mute)}.wxi b{font-size:20px}.wxi b i{font-size:12px;font-style:normal;color:var(--mute);font-weight:500}.wxi span{font-size:12px;color:var(--mute)}
.wxarr{display:inline-block;color:var(--sea);font-weight:900}
@media (max-width:760px){.wxgrid{grid-template-columns:1fr 1fr}}
.fbcard a svg,.rwd a svg{vertical-align:-4px;flex:none}
/* v6.9.3 ESG Dashboard */
.todo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--warn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line))}
.todo b{margin-right:4px}.todo a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:13px}
.todo a i{font-style:normal;font-weight:700;color:#fff;background:var(--warn);border-radius:999px;padding:0 7px;font-size:12px}.todo a:hover{border-color:var(--warn)}
.esghd{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.esghd h2{margin:0}.esghd select{flex:0 0 130px;width:130px}.esghd .btn{flex:none}
.esgg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
@media (max-width:1100px){.esgg{grid-template-columns:1fr}}
.esgp{padding:0;overflow:hidden;border-top:3px solid var(--c)}
.esgp header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:color-mix(in srgb,var(--c) 7%,var(--panel));border-bottom:1px solid var(--line)}
.esgp header small{display:block;color:var(--mute);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.esgk{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--c);color:#fff;font-size:17px;flex:none}
.esgm{padding:10px 14px;border-bottom:1px solid var(--line)}.esgm:last-child{border-bottom:0}
.esgm .v{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.esgm .v small{font-size:12px;font-weight:500;color:var(--mute);margin-left:3px}
.esgm .l{font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.esgm>small{display:block;font-size:11.5px;margin-top:1px}
.esgm .tag{font-size:10.5px;padding:0 6px}
.dlt{font-style:normal;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--panel2);color:var(--mute)}
.dlt.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}.dlt.dn{color:var(--bad);background:color-mix(in srgb,var(--bad) 11%,transparent)}.dlt.nw{color:var(--sea)}
.esgt .tg{margin-top:10px}.esgt .tg .row{align-items:baseline;gap:6px}.esgt .bar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:4px}.esgt .bar i{display:block;height:100%;border-radius:99px}
.ovrow{gap:12px;margin-bottom:12px}.ovrow>.card{margin:0}
.empty{display:grid;place-items:center;text-align:center;min-height:160px;color:var(--mute);font-size:14px}
.esgdef ul{margin:8px 0 0;padding-left:18px}.esgdef li{margin:4px 0}
@media print{body.bo .bo-top,body.bo .bo-nav,.bo-crumb,.dbwarn{display:none!important}body.bo .bo-body{display:block!important}body.bo .bo-main{padding:0!important;margin:0!important;overflow:visible!important}.ovhero{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}.esgp,.esgk,.dlt{-webkit-print-color-adjust:exact;print-color-adjust:exact}.esgg{grid-template-columns:repeat(3,1fr)}.esgdef{display:block}.esgdef[open] summary,.esgdef summary{display:none}}
body.bo .card.esgp,.card.esgp{padding:0!important}
.esgt .tg .row>*,.ovrow .row>*{flex:none}.esgt .tg .row>.grow,.ovrow .row>.grow{flex:1}
.esghd{align-items:center}.esghd .grow{min-width:240px}
.ovrow .wxgrid{grid-template-columns:1fr 1fr;row-gap:12px}
.ovrow .wxcard{padding:0}
.esghd>.grow{flex:1 1 240px}
@media print{@page{size:A4;margin:10mm}body.bo,body.bo main,body.bo .bo-body,body.bo .bo-main{width:auto!important;min-width:0!important;max-width:none!important}.esgg{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ovrow{grid-template-columns:repeat(2,minmax(0,1fr))!important}.esgm .v{font-size:18px}.card{break-inside:avoid}}
.esgctl{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.seg button{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;font-weight:600;padding:5px 11px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--fg)}.seg button.on{background:var(--panel);color:var(--sea);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.xmenu{position:relative}.xmenu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 12px;font-size:13px}.xmenu summary::-webkit-details-marker{display:none}
.xmenu summary svg{width:16px;height:16px}
.xmenu .xm{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.xmenu .xm button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--fg);font:inherit;font-size:14px;text-align:left;padding:9px 10px;border-radius:7px;cursor:pointer}
.xmenu .xm button:hover{background:var(--panel2)}.xmenu .xm svg{width:18px;height:18px;color:var(--sea);flex:none}
@media (max-width:640px){.esgctl{width:100%;justify-content:space-between}.seg button{padding:5px 8px}}
.seg .rpick summary{display:inline-flex;align-items:center;gap:5px;color:var(--mute);font-size:13px;font-weight:600;padding:5px 10px;border-radius:7px;white-space:nowrap}
.seg .rpick summary:hover{color:var(--fg)}.seg .rpick summary.on{background:var(--panel);color:var(--sea);box-shadow:0 1px 3px rgba(0,0,0,.12)}.seg .rpick summary svg{width:15px;height:15px}
.xm.rp{display:flex;flex-direction:column;gap:8px;min-width:260px;padding:12px}.xm.rp .f{margin:0}.xm.rp .btn{width:100%;justify-content:center}
.rpq{display:flex;flex-wrap:wrap;gap:6px}.rpq button{border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:inherit;font-size:12px;padding:3px 9px;border-radius:999px;cursor:pointer}.rpq button:hover{border-color:var(--sea);color:var(--sea)}
@media (max-width:640px){.esgctl{flex-wrap:wrap}.seg{flex-wrap:wrap}.xm.rp{right:auto;left:0}}
.xmenu .xm.rp .rpq button{display:inline-flex;width:auto;padding:3px 10px;font-size:12px;border:1px solid var(--line);background:var(--panel2);border-radius:999px}.xmenu .xm.rp .rpq button:hover{border-color:var(--sea);color:var(--sea)}.xmenu .xm.rp>.btn{display:flex;width:100%;justify-content:center;padding:8px;color:#fff;background:var(--sea)}
/* v6.9.3 ข่าวสาร: รูป ลิงก์ แนะนำ ปักหมุด */
.card.post{padding:0;overflow:hidden}.post .pin{padding:14px 16px}
.post .pimg{display:block;width:100%;max-height:340px;object-fit:cover;background:var(--panel2)}
.post.pinned{border-color:color-mix(in srgb,var(--sea) 45%,var(--line))}
.tag.tip{color:#b4530a;border-color:color-mix(in srgb,#e07a2e 50%,var(--line));background:color-mix(in srgb,#e07a2e 8%,transparent)}
.pbody a{color:var(--sea);word-break:break-word}
.plinks{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.plink{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--fg);text-decoration:none}
.plink:hover{border-color:var(--sea)}.plink b{display:block;font-size:14px}.plink small{display:block;color:var(--mute);font-size:12px}.plink i{font-style:normal;color:var(--sea);font-size:18px}
.ped{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}.ped>.card{margin:0}
.pprev{position:sticky;top:76px}.pprev #pv .post{margin-top:6px}
@media (max-width:1000px){.ped{grid-template-columns:1fr}.pprev{position:static}}
.pimgup{display:flex;flex-direction:column;gap:6px}.pimgup img{display:block;max-width:100%;max-height:180px;border-radius:8px;object-fit:cover}
.pnoimg{display:grid;place-items:center;height:90px;border:1px dashed var(--line);border-radius:8px;color:var(--mute);font-size:13px}
.lrow{display:grid;grid-template-columns:1fr 1.3fr auto;gap:6px;margin-bottom:6px}.lrow .iconbtn svg{width:18px;height:18px}
@media (max-width:560px){.lrow{grid-template-columns:1fr auto}.lrow [data-lu]{grid-column:1/2;grid-row:2}}
.pmore{margin:4px 0 8px}.pmore summary{cursor:pointer;font-size:14px;color:var(--mute);padding:4px 0}
.pthumb{width:52px;height:40px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.plink .grow{flex:1;min-width:0}
/* ===== v6.9.3 ภาพรวมแบบใหม่: เรียบ หรู อ่านง่าย ===== */
:root{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--sh1:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05);--sh2:0 2px 4px rgba(16,24,40,.05),0 12px 28px rgba(16,24,40,.09)}
html[data-theme="dark"]{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px rgba(0,0,0,.4)}}
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.ct{display:block;font-size:15px;font-weight:600}
/* แถบหัว */
.ovh2{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 24px;margin:0 0 18px;border-radius:16px;color:#fff;background:radial-gradient(110% 150% at 100% 0%,rgba(31,180,180,.55) 0%,rgba(31,180,180,0) 55%),linear-gradient(120deg,#0b4a85 0%,#0f6fa8 55%,#127f97 100%);box-shadow:0 10px 30px rgba(11,74,133,.2)}
.ovh2::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%);pointer-events:none}
.ovart{position:absolute;right:0;top:0;height:100%;width:62%;pointer-events:none}
.ovh-l{position:relative;flex:1 1 320px;min-width:0}.ovd{opacity:.72;font-size:13px}
.ovh2 h1{color:#fff;margin:4px 0 10px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.ovst{display:flex;flex-wrap:wrap;gap:8px}.ovst a,.ovst span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#fff;text-decoration:none;padding:5px 12px 5px 6px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:background .2s}
.ovst a:hover{background:rgba(255,255,255,.2)}.ovst a i{font-style:normal;font-weight:700;font-size:12px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#ffb547;color:#3a2600;padding:0 6px}
.ovst span.ok{padding-left:12px;opacity:.85}
.ovq2{position:relative;display:flex;align-items:flex-start;gap:6px}
.ovqg{display:grid;grid-template-columns:repeat(var(--n,4),84px);gap:8px}
@media (min-width:900px){.ovqg{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84px}}
.ovqg a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:76px;border-radius:12px;color:#fff;text-decoration:none;font-size:12px;font-weight:500;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);transition:transform .2s,background .2s,border-color .2s}
.ovqg a:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}.ovqg a svg{width:22px;height:22px}.ovqg a span{text-align:center;line-height:1.2;padding:0 4px}
.ovqg a i{position:absolute;top:6px;right:6px;font-style:normal;font-size:11px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;background:#ff5a5f;color:#fff;padding:0 5px;box-shadow:0 0 0 2px rgba(8,34,63,.6)}
.ovqe{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;opacity:.7;transition:opacity .2s}.ovqe:hover{opacity:1}.ovqe svg{width:16px;height:16px}
@media (max-width:700px){.ovh2{padding:18px}.ovh2 h1{font-size:21px}.ovq2{width:100%}.ovqg{grid-template-columns:repeat(4,1fr);width:100%}.ovqg a{height:68px}.ovart{width:100%;opacity:.6}}
.qpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px;overflow:auto}
.qpick label{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:12.5px;text-align:center;transition:border-color .15s,background .15s}
.qpick label.on{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--panel));color:var(--sea)}.qpick label svg{width:22px;height:22px}.qpick input{position:absolute;opacity:0;pointer-events:none}
.qpick label:has(input:disabled){opacity:.4;cursor:not-allowed}
/* หัวข้อ ESG */
.esghd h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 2px}
/* การ์ดตัวเลขหลัก 4 ใบ */
.hero4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
@media (max-width:1100px){.hero4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.hero4{grid-template-columns:1fr}}
.card.h4{margin:0;padding:16px 18px 12px;border-radius:14px;box-shadow:var(--sh1);transition:box-shadow .25s,transform .25s;color:var(--fg);min-height:132px;display:flex;flex-direction:column}
.card.h4:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.hv{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:4px 0 6px}.hv b{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}.hv>span{color:var(--mute);font-size:13px}
.spk{position:relative;margin-top:auto;color:var(--sea);height:44px}.spk svg{display:block;overflow:visible}.spk0{margin-top:auto;height:44px}
.spt{position:absolute;top:-18px;font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--fg);color:var(--panel);pointer-events:none}
.h4g{flex-direction:row!important;align-items:center;gap:10px}.h4g .grow{flex:1;min-width:0}
.gauge{width:84px;height:84px;flex:none;transform:rotate(-90deg)}.gtrk{fill:none;stroke:var(--panel2);stroke-width:8}.gval{fill:none;stroke:var(--s3);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)}.gtk{stroke:var(--fg);stroke-width:2;opacity:.55}
/* การ์ด E S G แบบแถว */
.card.esgp{border-radius:14px;box-shadow:var(--sh1);border-top:0;position:relative}
.card.esgp::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent))}
.esgp header{background:none;border-bottom:1px solid var(--line);padding:14px 16px 12px}
.esgk{border-radius:10px;width:32px;height:32px;font-size:15px;background:color-mix(in srgb,var(--c) 12%,var(--panel));color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.er{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.er:last-child{border-bottom:0}
.er .grow{flex:1;min-width:0}.er .grow>span{display:block;font-size:13.5px}.er .grow>small{display:block;font-size:11.5px;color:var(--mute);margin-top:1px}
.ev{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;justify-content:flex-end;text-align:right}.ev b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.ev>small{color:var(--mute);font-size:12px}
.er .dlt{margin-left:4px}
/* การ์ดอื่น */
.ovrow>.card,.esgt,body.bo .bo-main>.card{border-radius:14px}
.ovrow>.card{box-shadow:var(--sh1)}
.esgt .bar i{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
/* กราฟศูนย์ขยะ */
.wch{position:relative;margin-top:8px}.wlg{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--mute);margin-bottom:6px}.wlg span{display:inline-flex;align-items:center;gap:6px}
.wlg i.sq{width:10px;height:10px;border-radius:3px}.wlg i.ln{width:14px;height:3px;border-radius:2px}
.wcv{position:relative}.wcv svg{display:block}.wg{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}.wa{stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:1}.wt{font-size:10.5px;fill:var(--mute);font-variant-numeric:tabular-nums}
.wx{stroke:color-mix(in srgb,var(--fg) 35%,transparent);stroke-width:1;stroke-dasharray:3 3}
.wtip{position:absolute;top:8px;min-width:150px;padding:8px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh2);font-size:12.5px;pointer-events:none;z-index:2}
.wtip>b{display:block;margin-bottom:4px}.wtip div{display:flex;align-items:center;gap:6px;padding:1px 0}.wtip div i{width:8px;height:8px;border-radius:2px;flex:none}.wtip div span{flex:1;color:var(--mute)}.wtip div b{font-variant-numeric:tabular-nums}.wtip small{color:var(--mute)}
.wch.anim .wb{transform-origin:bottom;transform-box:fill-box;animation:wgrow .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d)}
@keyframes wgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* เผยทีละชิ้น */
.rv{animation:rvin .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rvin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rv,.wch.anim .wb{animation:none}.gval,.esgt .bar i{transition:none}.card.h4,.ovqg a{transition:none}}
@media print{.rv{animation:none!important}.ovh2,.ovh2 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}.hero4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.card.h4{box-shadow:none}}
.esghd{position:relative;z-index:20}
.dsl{display:flex;flex-direction:column;gap:6px}.dsl label{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dsl label:has(input:checked){border-color:var(--sea);background:color-mix(in srgb,var(--sea) 7%,var(--panel))}.dsl label span{display:flex;flex-direction:column}.dsl label small{color:var(--mute);font-size:12px}.dsl input{margin-top:2px;accent-color:var(--sea)}
/* v6.9.3 ป้ายตัดขวาง: ต้นทาง · ประเภทพิเศษ · เหตุการณ์ */
.tagpick{margin:8px 0;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--panel)}
.tagpick summary{cursor:pointer;padding:9px 0;font-size:13.5px;font-weight:600;list-style:none}.tagpick summary::-webkit-details-marker{display:none}
.tagpick summary::before{content:"+";display:inline-block;width:16px;color:var(--sea)}.tagpick[open] summary::before{content:"−"}
.tagpick summary small{font-weight:400;color:var(--mute);margin-left:4px}.tagpick summary i{font-style:normal;font-size:11px;font-weight:700;background:var(--sea);color:#fff;border-radius:999px;padding:0 7px;margin-left:4px}
.tgg{padding:2px 0 8px}.tgg>small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}.tgg>div{display:flex;flex-wrap:wrap;gap:6px}
.tgb{border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer;transition:all .15s}
.tgb:hover{border-color:var(--c,var(--sea))}.tgb.on{background:color-mix(in srgb,var(--c,var(--sea)) 14%,var(--panel));border-color:var(--c,var(--sea));color:var(--c,var(--sea));font-weight:600}
.tg-src{--c:#1f5fae}.tg-spc{--c:#b4530a}.tg-ev{--c:#6b4fbb}
.tgl{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.tgc{display:inline-block;font-size:11px;line-height:1.5;padding:0 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));color:var(--c);background:color-mix(in srgb,var(--c) 7%,transparent)}
html[data-theme="dark"] .tg-src{--c:#6aa7ef}html[data-theme="dark"] .tg-spc{--c:#f0a35e}html[data-theme="dark"] .tg-ev{--c:#a995ee}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .tg-src{--c:#6aa7ef}html:not([data-theme="light"]) .tg-spc{--c:#f0a35e}html:not([data-theme="light"]) .tg-ev{--c:#a995ee}}
/* v6.9.3 สิทธิ์: ซ่อนปุ่มแก้ไข/ลบ เมื่อบัญชีไม่มีสิทธิ์ (ฐานข้อมูลตรวจซ้ำทุกคำสั่ง) */
body[data-nop~="data_edit"][data-page="data"] [data-ec],body[data-nop~="data_edit"][data-page="data"] [data-eb],body[data-nop~="data_edit"][data-page="data"] [data-eg],body[data-nop~="data_edit"][data-page="waste"] #pside #dl{display:none!important}
body[data-nop~="data_trash"][data-page="data"] [data-tc],body[data-nop~="data_trash"][data-page="data"] [data-tcl],body[data-nop~="data_trash"][data-page="data"] [data-tb],body[data-nop~="data_trash"][data-page="trash"] [data-tr]{display:none!important}
body[data-nop~="members"][data-page="members"] [data-ap],body[data-nop~="members"][data-page="members"] [data-tm],body[data-nop~="members"][data-page="staff"] #go,body[data-nop~="members"][data-page="staff"] .card:has(#go){display:none!important}
body[data-nop~="content"][data-page="posts"] .ped,body[data-nop~="content"][data-page="posts"] [data-del],body[data-nop~="content"][data-page="posts"] a[href="#/a/posts"].btn,body[data-nop~="content"][data-page="ann"] .card:has(#go),body[data-nop~="content"][data-page="ann"] [data-del]{display:none!important}
body[data-nop~="shop"][data-page="shops"] [data-save],body[data-nop~="shop"][data-page="shops"] [data-rsave],body[data-nop~="shop"][data-page="shops"] [data-mloc],body[data-nop~="shop"][data-page="shops"] [data-del],body[data-nop~="shop"][data-page="shops"] [data-dup],body[data-nop~="shop"][data-page="shops"] [data-up],body[data-nop~="shop"][data-page="shops"] #addrw,body[data-nop~="shop"][data-page="shops"] #newrw,body[data-nop~="shop"][data-page="shops"] [data-noimg],body[data-nop~="shop"][data-page="shops"] [data-cancel],body[data-nop~="shop"][data-page="rewards"] [data-save],body[data-nop~="shop"][data-page="rewards"] [data-rsave],body[data-nop~="shop"][data-page="rewards"] [data-mloc],body[data-nop~="shop"][data-page="rewards"] [data-del],body[data-nop~="shop"][data-page="rewards"] [data-dup],body[data-nop~="shop"][data-page="rewards"] [data-up],body[data-nop~="shop"][data-page="rewards"] #addrw,body[data-nop~="shop"][data-page="rewards"] #newrw,body[data-nop~="shop"][data-page="rewards"] [data-noimg],body[data-nop~="shop"][data-page="rewards"] [data-cancel],body[data-nop~="shop"][data-page="missions"] [data-save],body[data-nop~="shop"][data-page="missions"] [data-rsave],body[data-nop~="shop"][data-page="missions"] [data-mloc],body[data-nop~="shop"][data-page="missions"] [data-del],body[data-nop~="shop"][data-page="missions"] [data-dup],body[data-nop~="shop"][data-page="missions"] [data-up],body[data-nop~="shop"][data-page="missions"] #addrw,body[data-nop~="shop"][data-page="missions"] #newrw,body[data-nop~="shop"][data-page="missions"] [data-noimg],body[data-nop~="shop"][data-page="missions"] [data-cancel]{display:none!important}
body[data-nop~="gm"][data-page="rounds"] [data-aw],body[data-nop~="gm"][data-page="rounds"] .card:has([data-aw]),body[data-nop~="gm"][data-page="rounds"] #gm,body[data-nop~="gm"][data-page="rounds"] #gm ~ *,body[data-nop~="gm"][data-page="rules"] #go{display:none!important}
body[data-nop~="bags"][data-page="bags"] #go,body[data-nop~="bags"][data-page="bags"] .card:has(#go){display:none!important}
body[data-nop~="field"][data-page="data"] [data-k],body[data-nop~="field"][data-page="waste"] #wadd,body[data-nop~="field"][data-page="waste"] #wgps,body[data-nop~="field"][data-page="waste"] #wpt,body[data-nop~="field"][data-page="waste"] #pside #sv,body[data-nop~="field"][data-page="points"] [data-save],body[data-nop~="field"][data-page="points"] [data-loc],body[data-nop~="field"][data-page="inbox"] .fbans,body[data-nop~="field"][data-page^="o-"] #app .btn.ok,body[data-nop~="field"][data-page^="o-"] #app .btn.huge,body[data-nop~="field"][data-page^="o-"] #app .btn.pri,body[data-nop~="field"][data-page^="o-"] #app [data-k*=":"]{display:none!important}
body[data-nop~="own"][data-page="rules"] #bwgo,body[data-nop~="own"][data-page="rules"] #bwt{display:none!important}
.permnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 14px;margin:0 0 12px;border-radius:10px;border-color:color-mix(in srgb,var(--sea) 30%,var(--line));background:color-mix(in srgb,var(--sea) 6%,var(--panel))}
.pchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.pc{font-size:10.5px;padding:0 7px;border-radius:999px;border:1px solid var(--line);color:var(--mute);line-height:1.6}.pc.own{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}.pc.ro{font-style:italic}
.permlist{display:flex;flex-direction:column;gap:6px;padding:12px 14px;overflow:auto}.permlist label{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.permlist label:has(input:checked){border-color:var(--sea);background:color-mix(in srgb,var(--sea) 7%,var(--panel))}.permlist label span{display:flex;flex-direction:column}.permlist label small{color:var(--mute);font-size:12px}.permlist input{margin-top:3px;accent-color:var(--sea)}
.permown{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px dashed var(--line);border-radius:10px;margin-top:4px}.permown small{color:var(--mute);font-size:12px}.permown .btn{align-self:flex-start}
.permlist input[type=checkbox]{width:18px!important;height:18px!important;min-height:0!important;flex:none;padding:0;margin:3px 0 0}.permlist label span{flex:1;min-width:0}
.dsl label{align-items:flex-start}.dsl label span{flex:1;min-width:0}
/* ตารางแก้ไขในหลังบ้าน: ช่องไม่บีบจนอ่านไม่ออก (เลื่อนแนวนอนได้) */
body.bo .bo-main table.t td>input:not([type=checkbox]):not([type=radio]),body.bo .bo-main table.t td>select{min-width:72px}
body.bo .bo-main table.t td>select{min-width:110px}
[data-page="missions"] table.t input[data-k="name"]{min-width:170px!important}[data-page="missions"] table.t input[data-k="detail"]{min-width:220px!important}[data-page="missions"] table.t input[data-k="pts"],[data-page="missions"] table.t input[data-k="daily_limit"]{min-width:64px;width:72px}
[data-page="shops"] table.t td .btn,[data-page="points"] table.t td .btn{white-space:nowrap}
body.bo .bo-main table.t td{vertical-align:middle}
/* v6.9.3 รูปและลิงก์ */
.mthumb{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 10px 4px 4px;min-height:36px}.mthumb img{width:34px;height:28px;object-fit:cover;border-radius:5px}.mthumb svg{width:18px;height:18px;margin-left:4px}
.pphotos{display:flex;flex-direction:column;gap:6px;margin:6px 0}.pph{display:flex;flex-wrap:wrap;gap:8px}
.pph figure{position:relative;margin:0;width:92px}.pph img{width:92px;height:68px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--line)}
.pph figcaption{position:absolute;left:4px;bottom:4px;font-size:10.5px;background:rgba(0,0,0,.62);color:#fff;padding:0 6px;border-radius:4px}
.pph button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--bad);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.rwsp{display:block;width:100%;max-height:170px;object-fit:cover;border-radius:10px;margin:0 0 8px}
.plinks.row2{flex-direction:row;flex-wrap:wrap;gap:6px;margin:8px 0 4px}.plink.sm{padding:6px 10px;border-radius:999px;gap:6px}.plink.sm b{font-size:13px}.plink.sm i{font-size:14px}
.annimg{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:10px;margin:8px 0}
.exph{margin-top:10px}.exph img{display:block;width:100%;max-width:360px;max-height:240px;object-fit:cover;border-radius:10px;margin-top:4px;border:1px solid var(--line)}
.popimg{display:block;width:200px;max-width:100%;height:120px;object-fit:cover;border-radius:6px;margin:0 0 6px}
body[data-nop~="shop"][data-page="shops"] [data-mmedia],body[data-nop~="shop"][data-page="missions"] [data-amedia],body[data-nop~="field"][data-page="points"] [data-pmedia],body[data-nop~="field"][data-page="waste"] [data-php],body[data-nop~="field"][data-page="waste"] [data-phx]{display:none!important}
/* v6.9.3 หน้ารายการแบบการ์ด + ฟอร์มแก้ไข */
.crudbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.crudbar .mfil{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.crudbar .mfil input{width:220px;min-height:34px!important}.crudbar>.btn{flex:none}
.card.crud{padding:0;overflow:hidden}
.crow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);transition:background .15s}.crow:last-child{border-bottom:0}.crow:hover{background:color-mix(in srgb,var(--sea) 4%,var(--panel))}
.crow.off{opacity:.62}.crow .grow{flex:1;min-width:0}.crow small{display:block;margin-top:2px;line-height:1.5}.crow code{font-size:11px;color:var(--mute)}
.ct1{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.ct1 b{font-size:15px}
.cth{width:56px;height:56px;flex:none;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--panel2);color:var(--mute);border:1px solid var(--line)}.cth img{width:100%;height:100%;object-fit:cover}.cth svg{width:22px;height:22px}
.cact{display:flex;gap:6px;flex:none}.cact .btn{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:4px 10px}.cact .btn svg{width:15px;height:15px}
@media (max-width:760px){.crow{flex-wrap:wrap;align-items:flex-start;padding:12px 10px}.cth{width:44px;height:44px}.crudbar{align-items:stretch}.crudbar .mfil{width:100%}.crudbar>.btn{width:100%;justify-content:center}.cact{width:100%;justify-content:flex-end}.crudbar .mfil input{width:100%}}
.fdlg .mpick-in{max-height:92vh}.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.fbody{padding:12px 16px;overflow:auto}
.fgrid .f{margin:4px 0}.fgrid .wide,.fgrid .fsec,.fgrid .fmore{grid-column:1/-1}
.fsec{font-weight:700;font-size:13px;color:var(--sea);border-top:1px solid var(--line);padding-top:12px;margin-top:6px;display:flex;align-items:baseline;gap:8px}.fsec:first-child{border-top:0;padding-top:0;margin-top:0}.fsec small{font-weight:400;color:var(--mute)}
.fchk{margin:8px 0}.fchk span{display:flex;flex-direction:column}.fchk small{color:var(--mute);font-size:12px}
.fmore{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin-top:6px}.fmore summary{cursor:pointer;padding:10px 0;font-size:13.5px;font-weight:600}.fmore[open]{padding-bottom:10px}
.req{color:var(--bad);font-style:normal}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
body[data-nop~="shop"][data-page="missions"] :is([data-ced],[data-chd],[data-cdl],#cadd),body[data-nop~="shop"][data-page="shops"] :is([data-ced],[data-chd],[data-cdl],#cadd),body[data-nop~="shop"][data-page="rewards"] [data-rhide],body[data-nop~="field"][data-page="points"] :is([data-ced],[data-chd],#cadd),body[data-nop~="data_edit"][data-page="points"] [data-cdl]{display:none!important}
/* v6.9.4 แชททีมงาน */
.chat{display:grid;grid-template-columns:290px minmax(0,1fr);height:calc(100dvh - 120px);min-height:440px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.chat-side{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel2);min-height:0}
.chat-sh{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--line)}.chat-sh b{font-size:16px}.chat-sh .btn{min-height:32px;padding:4px 10px;font-size:13px}.chat-sh .btn svg{width:16px;height:16px}
.chat-list{flex:1;overflow:auto;padding:6px}.chat-note{padding:8px 12px 12px;line-height:1.45}
.croom{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:10px;border-radius:10px;cursor:pointer;color:inherit;font:inherit}
.croom:hover{background:color-mix(in srgb,var(--sea) 7%,transparent)}.croom.on{background:color-mix(in srgb,var(--sea) 13%,var(--panel))}.croom.off{opacity:.6}
.croom .grow{min-width:0}.croom b{display:block;font-size:14px}.croom small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.croom .tag{margin-left:6px;font-size:10px}
.croom-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 12%,var(--panel));color:var(--sea)}.croom-ic svg{width:19px;height:19px}
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.chat-h .grow{min-width:0}.chat-h b{display:block;font-size:16px}.chat-h small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-h .btn{min-height:34px;padding:4px 12px;font-size:13px;display:inline-flex;gap:6px;align-items:center}.chat-h .btn svg{width:17px;height:17px}.chat-back{display:none!important}
.chat-log{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--panel2) 60%,var(--panel));overscroll-behavior:contain}
.cday{display:flex;justify-content:center;margin:12px 0 8px}.cday span{font-size:11px;color:var(--mute);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.cmore{display:flex;justify-content:center;margin-bottom:8px}.cmore .btn{min-height:30px;font-size:12px}
.cmsg{display:flex;align-items:flex-end;gap:8px;margin-top:8px;position:relative;max-width:100%}.cmsg.cont{margin-top:2px}.cmsg.mine{flex-direction:row-reverse}
.cav{flex:none;width:32px}.cbub-w{display:flex;flex-direction:column;min-width:0;max-width:min(78%,560px)}.cmsg.mine .cbub-w{align-items:flex-end}
.cwho{display:flex;align-items:center;gap:6px;margin:0 0 3px 4px;font-size:12px}.cwho .tag{font-size:10px;padding:0 6px}
.cbub{background:var(--panel);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:7px 11px 5px;line-height:1.5;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.cmsg.cont .cbub{border-radius:14px 14px 14px 4px}.cmsg.mine .cbub{background:var(--sea);border-color:var(--sea);color:#fff;border-radius:14px 14px 4px 14px}
.cmsg.mine .cbub a{color:#fff;text-decoration:underline}.ctext{white-space:normal}
.ctime{display:block;text-align:right;font-size:10.5px;color:var(--mute);margin-top:2px}.cmsg.mine .ctime{color:rgba(255,255,255,.78)}
.cquote{border-left:3px solid var(--sea2);background:color-mix(in srgb,var(--sea2) 9%,transparent);border-radius:6px;padding:4px 8px;margin:1px 0 5px;font-size:12px;cursor:pointer;max-width:100%}
.cquote b{display:block;font-size:11px}.cquote span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}.cmsg.mine .cquote{border-left-color:#fff;background:rgba(255,255,255,.16)}
.cbub.is-pin{padding:8px;min-width:260px}.cpin{display:flex;align-items:center;gap:10px}.cpin .grow{min-width:0}.cpin b{display:block}.cpin small{display:block}
.cpin-ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--bad) 12%,var(--panel));color:var(--bad)}
.cpin .btn{min-height:32px;padding:4px 10px;font-size:12px;flex:none}.cmsg.mine .cpin small{color:rgba(255,255,255,.8)}.cmsg.mine .cpin .btn{background:#fff;color:var(--sea);border-color:#fff}
.cacts{display:flex;gap:2px;opacity:0;transition:opacity .12s;align-self:center}.cmsg:hover .cacts,.cmsg:focus-within .cacts{opacity:1}
.cact-b{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--mute);display:grid;place-items:center;cursor:pointer;padding:0}.cact-b svg{width:15px;height:15px}
.cact-b:hover{color:var(--fg)}.cact-b.arm{background:var(--bad);border-color:var(--bad);color:#fff}
.cmsg.flash .cbub{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}
.csum{display:block;margin:12px auto 4px;width:min(100%,640px);background:var(--panel);border:1px solid color-mix(in srgb,var(--sea2) 40%,var(--line));border-radius:14px;padding:10px 14px 8px;box-shadow:0 2px 8px rgba(15,111,168,.07)}
.csum-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.csum-h b{font-size:14px}.csum-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sea),var(--sea2));color:#fff}.csum-ic svg{width:16px;height:16px}
.csum-b{margin:8px 0 6px;line-height:1.65;white-space:normal;font-size:14px}.csum-f{display:block;font-size:11px}
.chat-reply{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--line);background:var(--panel2);font-size:13px}.chat-reply .grow{min-width:0}.chat-reply small{display:block}.chat-reply span span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply .btn{min-height:28px;width:28px;padding:0;flex:none}
.chat-in{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel)}
.chat-in textarea{flex:1;resize:none;min-height:40px!important;max-height:140px;padding:9px 12px;border-radius:12px;line-height:1.45;font:inherit}
.chat-in .btn{flex:none;width:42px;height:40px;min-height:40px;padding:0;display:grid;place-items:center}.chat-in .btn svg{width:19px;height:19px}
.chat-hid{padding:12px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--warn) 10%,var(--panel));font-size:13px}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;color:var(--mute)}.chat-empty svg{width:44px;height:44px;color:color-mix(in srgb,var(--sea) 55%,var(--mute))}.chat-empty b{color:var(--fg)}
.chat-empty.sm{padding:40px 12px}
#app.chat-app{padding-bottom:0}.chat-o{height:calc(100dvh - 92px - env(safe-area-inset-bottom));border-radius:0;border-left:0;border-right:0;margin:-12px -16px 0}
@media (max-width:900px){
  .chat{grid-template-columns:1fr;height:calc(100dvh - 96px);border-radius:12px}
  .chat.has-room .chat-side{display:none}.chat:not(.has-room) .chat-main{display:none}.chat-back{display:inline-grid!important;width:36px;padding:0;place-items:center}
  .chat-h .btn span{display:none}.chat-h{padding:8px 10px}.chat-log{padding:10px}.cbub-w{max-width:84%}.cmsg .cacts{display:none;opacity:1}.cmsg.sel .cacts{display:flex}.cmsg.sel .cbub{filter:brightness(.97)}
  .cbub.is-pin{min-width:0}.cpin{flex-wrap:wrap}.cpin .btn{width:100%}
}
.chat .grow,.csum-h .grow,.chat-reply .grow{flex:1;min-width:0}
@media (max-width:900px){.chat-note{display:none}}

/* v6.9.4 เมนูงานในหน้างานวันนี้ (เจ้าหน้าที่): งานหลัก 3 ช่อง + ตรวจ/ตอบ เป็นแถว */
.otiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.otile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.otile:hover,.orow:hover{border-color:color-mix(in srgb,var(--sea) 45%,var(--line));box-shadow:0 4px 14px rgba(15,111,168,.10);transform:translateY(-1px)}
.otile b{font-size:14.5px;line-height:1.3}.otile small{color:var(--mute);font-size:11.5px;line-height:1.35}
.otic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 11%,var(--panel));color:var(--sea)}.otic svg{width:22px;height:22px}
.olist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.orow{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.orow .otic{width:38px;height:38px;border-radius:11px}.orow .otic svg{width:19px;height:19px}.orow .grow{min-width:0}.orow b{display:block;font-size:14.5px}.orow small{display:block;color:var(--mute);font-size:12px}
.orow.hot{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}.orow.hot .otic{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}.ochev{color:var(--mute);font-size:20px;line-height:1}
@media (max-width:420px){.otile small{display:none}.otile{padding:14px 6px}}
.orow .grow{flex:1}
/* v6.9.4 ทีมงาน (บทบาท/ตำแหน่ง) */
.sthero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 28px;border-radius:18px;color:#fff;background:linear-gradient(115deg,#0a3d6b 0%,#0f6cbd 48%,#14a3a1 100%);box-shadow:0 10px 30px rgba(10,61,107,.22);margin-bottom:14px}
.sthero::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.sthero small{opacity:.85;letter-spacing:.08em;font-size:12px}.sthero h1{margin:2px 0 6px;font-size:28px;color:#fff}.sthero p{margin:0;opacity:.9;max-width:520px;font-size:14px;line-height:1.55}
.stkpi{display:flex;gap:10px;position:relative;z-index:1}.stkpi div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);border-radius:14px;padding:10px 16px;min-width:92px;text-align:center}
.stkpi b{display:block;font-size:26px;line-height:1.1}.stkpi span{font-size:12px;opacity:.9}
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.stcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 16px 16px;background:var(--panel);border:1px solid var(--line);border-radius:18px;cursor:pointer;font:inherit;color:inherit;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.stcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,60,100,.13);border-color:color-mix(in srgb,var(--sea) 35%,var(--line))}
.stband{position:absolute;left:0;right:0;top:0;height:64px;opacity:.95}.stband.st-own,.stcover.st-own{background:linear-gradient(120deg,#0a3d6b,#0f6cbd 60%,#e07a2e)}.stband.st-dev,.stcover.st-dev{background:linear-gradient(120deg,#0a3d6b,#0f6cbd 55%,#14a3a1)}.stband.st-off,.stcover.st-off{background:linear-gradient(120deg,#0f6f5c,#14a3a1 60%,#6fd3c7)}
.stav{position:relative;z-index:1;border-radius:50%;object-fit:cover;border:4px solid var(--panel);box-shadow:0 6px 16px rgba(0,0,0,.14);background:var(--panel2);flex:none}
.sti{display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#0f6fa8,#14a3a1)}
.stname{font-size:17px;margin-top:4px}.strole{display:inline-block;font-size:11px;font-weight:600;padding:2px 10px;border-radius:999px}
.strole.st-own{background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:color-mix(in srgb,var(--accent) 80%,#000)}.strole.st-dev{background:color-mix(in srgb,var(--sea) 13%,var(--panel));color:var(--sea)}.strole.st-off{background:color-mix(in srgb,var(--sea2) 15%,var(--panel));color:color-mix(in srgb,var(--sea2) 75%,#000)}
.stpos{font-size:13px;font-weight:600;color:var(--fg)}.stcard .sthl{color:var(--mute);font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stchips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.stchips span{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}.stchips.sm span{font-size:11px;padding:2px 8px}
.stmore{margin-top:auto;padding-top:6px;font-size:12px;color:var(--sea);font-weight:600;opacity:0;transition:opacity .18s}.stcard:hover .stmore,.stcard:focus .stmore{opacity:1}
.stdlg .mpick-in{padding:0;overflow:hidden;max-height:92vh;display:flex;flex-direction:column}.stcover{height:120px;position:relative;flex:none}.stx{position:absolute;right:12px;top:12px;width:34px;height:34px;padding:0;border-radius:50%;background:rgba(255,255,255,.9)}
.sthead{display:flex;align-items:flex-end;gap:16px;padding:0 24px;margin-top:-52px;flex:none}.sthead .grow{min-width:0;padding-bottom:4px}.sthead h2{margin:0 0 4px;font-size:22px}
.strow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--mute)}.sthead .sthl{margin:6px 0 0;font-size:14px;color:var(--fg)}
.stbody{padding:8px 24px 16px;overflow:auto}.sts{margin-top:16px}.sts h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;color:var(--mute);text-transform:uppercase}.sts p{margin:0;line-height:1.6}.stbio{white-space:pre-line}.sts .stchips{justify-content:flex-start}
.sttl{position:relative;padding-left:4px}.stl{display:flex;gap:12px;padding:6px 0;position:relative}.stl i{flex:none;width:12px;height:12px;border-radius:50%;margin-top:5px;background:var(--sea);box-shadow:0 0 0 4px color-mix(in srgb,var(--sea) 15%,transparent)}
.stl:not(:last-child)::before{content:"";position:absolute;left:5px;top:22px;bottom:-6px;width:2px;background:var(--line)}.stl b{display:block}.stl small{display:block}
.stw{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}.stw .grow{min-width:0}.stw b{display:block}.stw small{display:block;color:var(--mute)}.stw .btn{min-height:32px;padding:4px 10px;font-size:12px;flex:none}
.stlinks{display:flex;flex-wrap:wrap;gap:8px}.stlink{padding:6px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--sea);font-weight:600;font-size:13px}.stlink:hover{background:color-mix(in srgb,var(--sea) 8%,var(--panel))}
.stempty{margin-top:16px;padding:16px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--mute);font-size:14px}.stsince{display:block;margin-top:16px}
.pe .pe-row{display:grid;grid-template-columns:1.2fr 1.4fr .7fr auto;gap:8px;margin-bottom:8px}.pe .pe-row.pe-w{grid-template-columns:1.3fr .5fr 1.5fr 1.2fr auto}.pe .pe-row .btn{width:38px;padding:0}.pe>.btn{margin:2px 0 6px}
@media (max-width:700px){.sthero{padding:20px}.sthero h1{font-size:23px}.stkpi{width:100%}.stkpi div{flex:1;min-width:0;padding:8px}.stgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stcard{padding:20px 10px 12px}.stcard .stav{width:68px!important;height:68px!important}.stband{height:52px}
  .pe .pe-row,.pe .pe-row.pe-w{grid-template-columns:1fr auto}.pe .pe-row input:not(:first-child){grid-column:1}.sthead{padding:0 16px}.stbody{padding:8px 16px 16px}}
.sthead{position:relative;z-index:1}.sthead .grow{padding-top:60px;flex:1}.stw .grow,.crudbar>.grow{flex:1}
/* v6.9.4 เลือกโลโก้ */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
.lopt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer;text-align:center;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.lopt:hover{border-color:color-mix(in srgb,var(--sea) 45%,var(--line))}.lopt.on{border-color:var(--sea);box-shadow:0 0 0 3px color-mix(in srgb,var(--sea) 18%,transparent)}
.lopt input{position:absolute;top:10px;left:10px;margin:0}.lopt>b{font-size:13px}
.lprev{width:72px;height:72px;display:grid;place-items:center}.lprev img{width:72px;height:72px;object-fit:contain;border-radius:16px}
.lmini{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:linear-gradient(100deg,#0a3d6b,#0f6cbd 60%,#14a3a1);color:#fff;font-size:11px}.lmini img{width:18px;height:18px;object-fit:contain;border-radius:5px}
.ladd{border-style:dashed;color:var(--mute)}.ladd .lprev{font-size:34px;border-radius:16px;background:var(--panel2)}
.lgdel{min-height:28px!important;padding:2px 8px!important;font-size:12px}.lgdel svg{width:14px;height:14px}

/* v6.9.4 โลโก้ทรงกลม: แถบบนหลังบ้านใช้วงกลมขาว ไม่ต้องมีกรอบ */
.bo-home .bo-logo{border-radius:50%!important;box-shadow:0 1px 4px rgba(0,0,0,.25)}.abrand img{border-radius:50%}

/* v6.9.5 โลโก้กลมรายละเอียดสูง: ขยายจุดที่เล็กเกิน */
.abrand img{width:36px;height:36px}
.abrand b{font-size:17px}
.bo-home .bo-logo{width:36px;height:36px}
.bo-home{padding:2px 10px 2px 2px!important}

.lmini img{width:24px;height:24px;border-radius:50%}
.lprev,.lprev img{width:84px;height:84px}
.lprev img{border-radius:50%}

/* v6.9.6 แท็บของเมนูที่ยุบรวม */
.bo-tabs{display:flex;gap:2px;margin:2px 0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.bo-tabs::-webkit-scrollbar{display:none}
.bo-tabs button{display:inline-flex;align-items:center;gap:7px;padding:9px 14px 10px;border:0;background:none;font:inherit;font-size:14px;color:var(--mute);cursor:pointer;white-space:nowrap;position:relative;border-radius:8px 8px 0 0}
.bo-tabs button svg{width:17px;height:17px}
.bo-tabs button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.bo-tabs button[aria-selected="true"]{color:var(--sea);font-weight:600}
.bo-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--sea)}
.bo-nb{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bo-nb[hidden]{display:none}
.spk,.esgk,.kpi{min-width:0}

/* v6.9.6 ปิดเมนูข้างบนจอคอม = เหลือแถบไอคอน · v6.10.4 เลิกกางเองเมื่อชี้ (ลายตา) ชี้ค้างเห็นชื่อเป็นป้ายเล็ก กด ☰ เพื่อกางเมนูเต็ม */
@media (min-width:901px){
  body.bo .side.navoff{grid-template-columns:64px minmax(0,1fr)}
  body.bo .side.navoff .bo-nav{display:block;width:64px;padding:8px 8px 24px;overflow-x:hidden;z-index:32;}
  body.bo .side.navoff .bo-nav .bo-gh{height:1px;padding:0;margin:8px 8px;background:var(--line);overflow:hidden;pointer-events:none}
  body.bo .side.navoff .bo-nav .bo-gh>*{display:none}
  body.bo .side.navoff .bo-nav .bo-g.shut .bo-items{display:block}
  body.bo .side.navoff .bo-nav .bo-items button{justify-content:center;padding:10px 0;gap:0}
  body.bo .side.navoff .bo-nav .bo-items button span,body.bo .side.navoff .bo-nav .bo-own{display:none}
  body.bo .side.navoff .bo-nav .bo-items button[aria-current="page"]::before{left:0}
  body.bo .side.navoff .bo-nav .bo-nb,body.bo .side.navoff .bo-nav .bo-items button>i:not(.bo-own){position:absolute;top:3px;right:4px;min-width:8px;width:8px;height:8px;padding:0;font-size:0}
  body.bo .side.navoff .bo-nav .bo-outnav{justify-content:center;padding:10px 0}
  body.bo .side.navoff .bo-nav .bo-outnav span{display:none}
}

/* v6.9.9 ล้างข้อมูลและพื้นที่ */
.stuse .card{display:flex;flex-direction:column;gap:6px}
.stv{font-size:26px;font-weight:700;line-height:1.2}.stv small{font-size:13px;font-weight:400;color:var(--mute)}
.stbar{height:8px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.stbar i{display:block;height:100%;background:linear-gradient(90deg,var(--sea2),var(--sea));border-radius:5px}.stbar i.hot{background:linear-gradient(90deg,var(--warn),var(--bad))}
.pglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin:10px 0}
.pgi{display:flex;align-items:center;gap:12px;margin:0;cursor:pointer;border:1.5px solid var(--line);transition:border-color .15s,background .15s}
.pgi input{width:18px;height:18px;flex:none;accent-color:var(--bad)}
.pgi .grow{display:flex;flex-direction:column;gap:2px;min-width:0}.pgi .grow small{font-size:12px}
.pgi .pgn{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}.pgi .pgn small{font-size:11px;white-space:nowrap}
.pgi.on{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
/* v6.9.9 โลโก้ สีชัง Twin บนปุ่มหลังบ้าน */
.bo-twin img.tw-ico{width:26px;height:26px;padding:0;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* v6.9.9 ป้ายสิทธิ์เล็กมุมซ้าย (แทนการ์ด "บัญชีนี้ดูได้อย่างเดียว") */
.permpill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 6px;margin-right:6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--panel));color:color-mix(in srgb,var(--warn) 80%,var(--fg));font-size:11px;font-weight:600;white-space:nowrap;cursor:help;flex:none}
.permpill svg{width:12px;height:12px}
.permpill.some{border-color:color-mix(in srgb,var(--sea) 35%,var(--line));background:color-mix(in srgb,var(--sea) 8%,var(--panel));color:var(--sea)}
.bo-crumb{flex-wrap:wrap}
/* v6.10 บัญชีเครื่องมือ AI + ข้อมูลสำหรับ AI */
.strole.st-ai{background:color-mix(in srgb,#7c4dbb 14%,var(--panel));color:#6a3fb0}
.stband.st-ai,.stcover.st-ai{background:linear-gradient(120deg,#3b2a7a,#7c4dbb 55%,#14a3a1)}
.permlist label.off{opacity:.55}
.aibar{display:flex;flex-direction:column;gap:10px}
.aitab td{white-space:nowrap;font-size:12.5px}.aicell{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.aifl{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:180px}.aifl select{font:inherit;font-size:12.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:inherit}
/* v6.10.1 กำลังโหลดหน้าใหม่ในหลังบ้าน: แถบวิ่งบาง ๆ ใต้แถบบน + เนื้อหาเดิมจางลงเล็กน้อย (แทนการกระพริบทั้งหน้า) */
body.bo .bo-main.bo-loading{position:relative;pointer-events:none}
body.bo .bo-main.bo-loading>*{opacity:.55;transition:opacity .15s .12s}
body.bo .bo-main.bo-loading::before{content:"";position:fixed;left:0;right:0;top:48px;height:3px;z-index:40;background:linear-gradient(90deg,transparent,var(--sea2),var(--sea),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:boLoad 1s linear infinite}
@keyframes boLoad{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){body.bo .bo-main.bo-loading::before{animation:none;background:var(--sea)}}
/* v6.10.2 แกลเลอรีรูปประกาศ/ข่าวสาร: เต็มรูป ไม่ตัดขอบ · หลายรูปเลื่อนซ้าย-ขวา · ดูเต็มจอ */
.gal{position:relative;margin:8px 0;border-radius:12px;overflow:hidden;background:var(--panel2)}
.post .gal{margin:0;border-radius:0}
.gal .gimg{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;cursor:zoom-in;background:var(--panel2)}
.gal .gtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:center}
.gal .gtrack::-webkit-scrollbar{display:none}
.gal .gtrack .gimg{flex:0 0 100%;scroll-snap-align:center}
.gcount{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600}
.gdots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.gdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15)}.gdots i.on{background:#fff;width:18px;border-radius:4px}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#123;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);display:none}
.gnav.prev{left:8px}.gnav.next{right:8px}
@media (hover:hover){.gal:hover .gnav{display:block}}
.glb{position:fixed;inset:0;z-index:300;background:rgba(5,12,20,.94);display:grid;place-items:center;padding:20px}
.glb img{max-width:100%;max-height:calc(100vh - 40px);object-fit:contain;border-radius:6px}
.glx,.gln{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer}
.glx{top:14px;right:14px}.gln{top:50%;transform:translateY(-50%)}.gln.prev{left:12px}.gln.next{right:12px}
.glc{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;opacity:.85}
.imged{display:flex;flex-wrap:wrap;gap:8px}
.imgt{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel2)}
.imgt img{width:100%;height:100%;object-fit:cover;display:block}
.imgc{position:absolute;left:4px;top:4px;padding:1px 6px;border-radius:6px;background:var(--sea);color:#fff;font-size:10px;font-weight:700}
.imgb{position:absolute;right:4px;bottom:4px;display:flex;gap:4px}
.imgb button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.imgadd{width:96px;height:96px;border-radius:10px;border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:var(--mute);font-size:12px}
.imgadd svg{width:22px;height:22px}.imgadd small{font-size:10px}
.gal.annimg,.post .gal.pimg{max-height:none;width:auto;object-fit:initial;display:block}
/* v6.10.3 หัวหน้า (เส้นทาง + แท็บ) ติดอยู่ด้านบน ไม่เลื่อนตาม */
body.bo .bo-head{position:sticky;top:48px;z-index:25;margin:-16px -24px 14px;padding:12px 24px 0;background:var(--bg);box-shadow:0 6px 10px -10px rgba(0,0,0,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.bo .bo-head:not(.has-tabs){padding-bottom:8px;border-bottom:1px solid var(--line)}
body.bo .bo-head .bo-crumb{margin-bottom:4px}
body.bo .bo-head .bo-tabs{margin:2px 0 0}
@media (max-width:900px){body.bo .bo-head{margin:-12px -12px 12px;padding:10px 12px 0}}
@media print{body.bo .bo-head{position:static}}
/* แถวสมาชิก: ปุ่มเท่ากัน ตรงแนว */
.mtab .mact{white-space:nowrap}
.mtab .mact .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-height:32px;padding:0 12px;margin-left:6px;font-size:13px;line-height:1;border-radius:8px;flex:0 0 auto;vertical-align:middle}
.mtab .mact .btn svg{width:15px;height:15px}
.mwav{flex:0 0 32px;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--panel2);box-shadow:0 0 0 1px var(--line)}
/* หัวโปรไฟล์หน้า "ฉัน": ปุ่มกล้องบนรูป ไม่มีปุ่มตัดบรรทัด */
.meprof .mepic{position:relative;flex:none}
.mecam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sea);color:#fff;border:2px solid var(--panel);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.mecam svg{width:15px;height:15px}
.mecam:hover{filter:brightness(1.1)}
.meacts{margin-top:8px}
.melink{border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--bad);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.meprof .mename{font-size:20px}
.bgact{white-space:nowrap}.bgact .btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;margin-left:6px;font-size:13px}.bgact .btn svg{width:15px;height:15px}
.credbox{margin:12px 16px;padding:12px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font:500 14px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;user-select:all}
/* v6.11 หน้าเกี่ยวกับ + ดูแลบัญชี */
.abhero{display:flex;align-items:center;gap:14px;margin:6px 0 14px}.abhero img{border-radius:50%;flex:none}.abhero b{display:block;font-size:20px}.abhero small{color:var(--mute)}
.absec h2{margin:0 0 8px;font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.absec h3{margin:14px 0 8px;font-size:15px}
.absec.aboff{opacity:.6;border-style:dashed}
.abteam{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.abm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.abm img,.abm i{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:4px}.abm i{display:grid;place-items:center;background:var(--sea);color:#fff;font-style:normal;font-size:24px;font-weight:700}
.abm small{color:var(--mute);font-size:12px}.abm span{font-size:12px;color:var(--fg);opacity:.85}
.abneeds{display:flex;flex-direction:column;gap:10px}.abn small{color:var(--mute);white-space:nowrap}.abn .stbar{margin-top:4px}
.abways{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.abw{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}.abw b{display:block}.abw small{color:var(--mute);font-size:12px}
.abform{display:flex;flex-direction:column;gap:8px}
.abe{display:flex;flex-direction:column;gap:8px;border-left:4px solid var(--line)}.abe.on{border-left-color:var(--ok)}
.abe input[data-ti]{font:inherit;font-weight:600;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit}
.abtg{position:relative;width:42px;height:24px;flex:none;cursor:pointer}.abtg input{position:absolute;opacity:0}.abtg span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}.abtg span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.abtg input:checked+span{background:var(--ok)}.abtg input:checked+span::after{transform:translateX(18px)}
.abmems{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}.abmems .check small{margin-left:auto}
.nrow{grid-template-columns:2fr 1fr 1fr 1fr auto!important}
.lrow.nrow{display:grid;gap:6px}
.inactn{display:flex;align-items:center;gap:12px;border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn) 6%,var(--panel))}.inactn .grow small{display:block}.inactn .aic{color:var(--warn)}.inactn .btn{flex:0 0 auto}
.inl{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto;padding:8px 16px}.inl .check{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
/* v6.12 Workflow Agent */
.aghero{border-radius:18px;padding:22px 26px;color:#fff;background:linear-gradient(120deg,#0a2f55,#0f6cbd 55%,#14a3a1);margin-bottom:14px}.aghero small{opacity:.85}.aghero h1{margin:2px 0 6px;color:#fff}.aghero p{margin:0;max-width:820px;opacity:.92}
.agflow{display:flex;align-items:stretch;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.agst{flex:1 1 200px;display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color .3s,box-shadow .3s}
.agst .agn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);font-weight:700;color:var(--sea);border:1px solid var(--line)}
.agst b{display:block;font-size:14px}.agst small{color:var(--mute);font-size:12px}
.agst.done{border-color:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 15%,transparent)}.agst.done .agn{background:var(--ok);color:#fff;border-color:var(--ok)}
.agar{align-self:center;color:var(--mute);font-size:18px}
@media (max-width:900px){.agar{display:none}}
.agp .f{margin:0}.agdays{display:flex;gap:6px;flex-wrap:wrap}.agdays .chip{cursor:pointer}
.agres .li .tag{flex:0 0 auto}.agl{margin:8px 0 0;padding-left:18px}.agl li{margin:2px 0}
.agjson{max-height:320px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;white-space:pre-wrap}
/* v6.13 ผังรับผิดชอบงาน: ผังองค์กร (ต้นไม้) + ตามคน · โทนเดียวกับหน้าทีมงาน */
.obar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.obar h1{margin:0;font-size:22px}.obar .btn{flex:0 0 auto;min-height:40px;padding:7px 12px;font-size:14px}.obar .btn svg{width:18px;height:18px}.obar .mfil.ov{margin:0}
.orl{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap;font-style:normal}.orl.r1{background:color-mix(in srgb,var(--sea) 13%,var(--panel));color:var(--sea)}.orl.r2{background:var(--panel2);color:var(--mute);border:1px solid var(--line)}.orl.r3{background:color-mix(in srgb,#7c4dbb 14%,var(--panel));color:#7c4dbb}
html[data-theme="dark"] .orl.r3{color:#b494e6}
.oico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 13%,var(--panel));color:var(--c)}.oico svg{width:60%;height:60%}
.oroot{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:16px;color:#fff;background:linear-gradient(115deg,#0a3d6b,#0f6cbd 55%,#14a3a1);box-shadow:0 8px 20px rgba(10,61,107,.22)}.oroot b{display:block;font-size:16px;color:#fff}.oroot small{opacity:.88;font-size:12px}.oroot .stav{box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.orgwrap{overflow-x:auto;padding:4px 2px 10px}
.otree,.otree ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}.otree{min-width:max-content;margin:0 auto}
.otree ul{padding-top:22px;position:relative}
.otree li{position:relative;padding:22px 5px 0;display:flex;flex-direction:column;align-items:center}
.otree li::before,.otree li::after{content:"";position:absolute;top:0;width:50%;height:22px;border-top:2px solid color-mix(in srgb,var(--mute) 35%,var(--line))}
.otree li::before{right:50%}.otree li::after{left:50%;border-left:2px solid color-mix(in srgb,var(--mute) 35%,var(--line))}
.otree li:first-child::before,.otree li:last-child::after{border:0}
.otree li:last-child::before{border-right:2px solid color-mix(in srgb,var(--mute) 35%,var(--line));border-radius:0 8px 0 0}.otree li:first-child::after{border-radius:8px 0 0 0}
.otree li:only-child::before{display:none}.otree li:only-child::after{border-top:0;border-radius:0}
.otree ul ul::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:2px solid color-mix(in srgb,var(--mute) 35%,var(--line))}
.otree>li{padding-top:0}.otree>li::before,.otree>li::after{display:none}
.otree .card{margin:0;font:inherit;color:var(--fg);cursor:pointer;text-align:left}
.odept{width:182px;padding:10px 12px;border-top:4px solid var(--c)}.odept .oh{display:flex;gap:8px;align-items:center}.odept .oh b{font-size:14px;line-height:1.3}.odept small{display:block;color:var(--mute);font-size:11.5px;margin-top:4px}.odept:hover,.opc:hover{border-color:var(--sea)}
.opc{width:140px;padding:10px 8px;text-align:center!important;display:flex;flex-direction:column;align-items:center;gap:3px}.opc b{font-size:13px;line-height:1.3;word-break:break-word}.opc small{color:var(--mute);font-size:11px;line-height:1.3}
.opc.tool{border-style:dashed;border-color:color-mix(in srgb,#7c4dbb 45%,var(--line))}
.opc.empty{border:1.5px dashed color-mix(in srgb,var(--warn) 55%,var(--line));color:var(--warn);font-size:12.5px;padding:16px 8px;background:color-mix(in srgb,var(--warn) 4%,var(--panel))}
.omn{display:flex;gap:5px;flex-wrap:wrap}.omn a,.omn span{font-size:11.5px;color:var(--sea);background:color-mix(in srgb,var(--sea) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--sea) 22%,var(--line));border-radius:8px;padding:1px 7px;text-decoration:none;white-space:nowrap}.omn a:hover{border-color:var(--sea)}
.omn-under{margin-top:8px;max-width:182px}.omn-under .omn{justify-content:center}
.olegend{display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:12.5px;color:var(--mute);margin-top:12px}
.oglist .oroot{margin-bottom:6px}.ochips{display:flex;gap:6px;flex-wrap:wrap;flex:1}.ochips.own{margin:2px 0 12px 4px}
.ach{white-space:nowrap;display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:12.5px;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:4px 10px;background:var(--panel2);cursor:pointer}.ach i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}.ach:hover{border-color:var(--sea)}
.ogrow{display:flex;align-items:stretch;padding-top:10px}.ospine{width:28px;flex:none;position:relative;margin-top:-10px}.ospine::before{content:"";position:absolute;left:13px;top:0;height:calc(50% + 5px);width:14px;border-left:2px solid color-mix(in srgb,var(--mute) 35%,var(--line));border-bottom:2px solid color-mix(in srgb,var(--mute) 35%,var(--line));border-radius:0 0 0 8px}
.ogrow:not(:last-child) .ospine::after{content:"";position:absolute;left:13px;top:0;bottom:-10px;border-left:2px solid color-mix(in srgb,var(--mute) 35%,var(--line))}
.oprow{flex:1;margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px}.oprow.tool{border-style:dashed;border-color:color-mix(in srgb,#7c4dbb 45%,var(--line))}
.owho{display:flex;gap:10px;align-items:center;background:none;border:0;padding:0;font:inherit;color:var(--fg);cursor:pointer;text-align:left;min-width:200px}.owho b{display:block}.owho small{color:var(--mute);font-size:12px}
.owarn{flex:1;text-align:left;font:inherit;font-size:13px;color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));border-radius:12px;padding:10px 14px;cursor:pointer}
.oempty{text-align:center;padding:28px 16px}
.oprint-h{display:none}
.odlg .mpick-in{max-height:92vh}.odlg .fbody{padding:12px 16px;overflow:auto}
.osw,.oicp{display:flex;gap:8px;flex-wrap:wrap}.osw label,.oicp label{cursor:pointer}.osw input,.oicp input{position:absolute;opacity:0;pointer-events:none}
.osw i{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--line)}.osw input:checked+i{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--fg)}
.oicp span{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute)}.oicp span svg{width:20px;height:20px}.oicp input:checked+span{border-color:var(--sea);color:var(--sea);background:color-mix(in srgb,var(--sea) 10%,var(--panel))}
.omrow{display:grid;grid-template-columns:1.2fr .8fr 1.4fr auto;gap:6px;margin-bottom:6px;align-items:center}.omrow input,.omrow select{min-height:42px!important;padding:8px 10px!important}
.omcheck{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 12px;padding:8px 2px}
@media (max-width:620px){.omrow{grid-template-columns:1fr 1fr auto}.omrow input{grid-column:1/3}.owho{min-width:0}}
/* หน้าเกี่ยวกับ: สำเนาผังที่เจ้าของเผยแพร่ */
.aborg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0}
.aboa{border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.aboh{display:flex;gap:8px;align-items:center}.aboh b{display:block;font-size:14px}.aboh small{color:var(--mute);font-size:11.5px}
.abop{display:flex;gap:8px;align-items:center}.abop img,.abop i{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--sea2);color:#fff;font-style:normal;font-weight:700;font-size:13px}.abop span{flex:1;min-width:0}.abop b{display:block;font-size:13px}.abop small{color:var(--mute);font-size:11px}.abop.tool i,.abop.tool img{outline:2px dashed color-mix(in srgb,#7c4dbb 55%,transparent);outline-offset:1px}
.omn.ro span{color:var(--mute);background:var(--panel2);border-color:var(--line)}
@media print{body[data-page="org"] .bo-nav,body[data-page="org"] .obar,body[data-page="org"] .olegend{display:none!important}body[data-page="org"] .oprint-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:12px}body[data-page="org"] .bo-main{padding:0!important;margin:0!important}.orgwrap{overflow:visible}.otree .card,.oroot{box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.omn-under{display:none}@page{size:A4 landscape;margin:12mm}}
.odlg .fbody>.f,.odlg .fbody>div.f{margin:12px 0}.odlg div.f>span{display:block;font-size:14px;color:var(--mute);margin-bottom:6px}
.oglist .oroot{margin-bottom:4px}
.oown{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:#c2582a;background:color-mix(in srgb,#e07a2e 12%,var(--panel));border-radius:999px;padding:1px 8px}
/* v6.13 หน้า ฉัน (หลังบ้าน): 2 คอลัมน์บนจอคอม · การ์ดระบบด้านขวา */
.me2{max-width:640px}.meside{display:flex;flex-direction:column;gap:12px;margin-top:14px}.meside>.card{margin:0}
.mesys h3{margin:0 0 6px;font-size:15px}.mesy{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;text-decoration:none;color:var(--fg)}.mesy+.mesy{border-top:1px solid var(--line)}.mesy:hover{background:var(--panel2)}.mesy .grow{flex:1;min-width:0}.mesy b{display:block;font-size:14px}.mesy small{display:block;color:var(--mute);font-size:12px}.mesy .aic{width:34px;height:34px}.mesy .aic svg{width:18px;height:18px}
.mesyn{font-style:normal;font-size:11.5px;font-weight:600;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:999px;padding:1px 8px;white-space:nowrap}
.meswap{margin-top:12px;justify-content:flex-start;text-align:left;width:100%;text-decoration:none}
@media (min-width:1100px){.me2{max-width:1000px;display:grid;grid-template-columns:minmax(0,640px) minmax(260px,320px);column-gap:24px;align-items:start}.me2>*{grid-column:1}.me2>.meside{grid-column:2;grid-row:1 / span 30;margin-top:47px}}
/* v6.13 ทีมงานออนไลน์ */
.onl{padding:12px 14px}.onlh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.onlh b{font-size:15px}.onlc{font-size:12px;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--panel));border-radius:999px;padding:0 8px}
.ondot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);animation:onp 2.4s ease-in-out infinite}@keyframes onp{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.ondot{animation:none}}
.onll{display:flex;flex-direction:column;gap:2px}.onli{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;text-decoration:none;color:var(--fg)}.onli:hover{background:var(--panel2)}
.onav{position:relative;flex:none;display:inline-flex}.onav i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--panel)}.onav .stav{border-radius:50%;object-fit:cover}
.onn{min-width:0}.onn b{display:block;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.onn b small{font-weight:400;color:var(--mute)}.onn>small{display:block;font-size:11.5px;color:var(--mute)}
.onlf{display:block;margin-top:6px;font-size:11.5px}
.onl-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}.onl-strip .onlh{margin:0;flex:none}.onl-strip .onll{flex-direction:row;flex-wrap:wrap;gap:4px 8px;flex:1}.onl-strip .onli{padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:999px}.onl-strip .onn>small{display:none}
.merc h3{margin:0 0 6px;font-size:15px}.merci{display:flex;gap:8px;align-items:baseline;padding:6px 2px;font-size:13.5px}.merci+.merci{border-top:1px solid var(--line)}.merci .grow{flex:1;min-width:0}.merci small{white-space:nowrap;font-size:11.5px}.merc>a{display:inline-block;margin-top:6px}
.onav .stav{border:0!important;box-shadow:none!important}
.onl-strip{padding:8px 12px;margin:12px 0 14px}.onl-strip .onlh b{font-size:14px}.onl-strip .onav .stav{width:26px!important;height:26px!important;font-size:11px!important}.onl-strip .onli{padding:3px 10px 3px 3px}.onl-strip .onn b{font-size:13px}
.mesyg+.mesyg{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}.mesyg>small{display:block;font-size:11.5px;font-weight:600;color:var(--mute);letter-spacing:.02em;margin:2px 6px 2px}.mesy+.mesy{border-top:0}
/* v6.14 แชทรุ่นใหม่ */
.cplus-w{position:relative;flex:none}.cplus-m{position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:6px;min-width:230px;display:flex;flex-direction:column}
.cplus-m button{display:flex;align-items:center;gap:10px;background:none;border:0;padding:9px 10px;border-radius:8px;font:inherit;color:var(--fg);cursor:pointer;text-align:left}.cplus-m button:hover{background:var(--panel2)}.cplus-m svg{width:20px;height:20px;color:var(--sea)}
.cref{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--sea) 25%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--sea) 5%,var(--panel));text-decoration:none;color:var(--fg);min-width:220px;max-width:360px}
.cref:hover{border-color:var(--sea)}.cref-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 14%,var(--panel));color:var(--sea);flex:none}.cref-ic svg{width:18px;height:18px}
.cref .grow{min-width:0;flex:1}.cref small{display:block;font-size:11.5px;color:var(--mute)}.cref b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.cref.sm{margin-top:6px;padding:6px 8px;min-width:0}
.cbub.is-media{padding:6px}.cphoto img{display:block;max-width:min(320px,100%);max-height:320px;border-radius:10px;object-fit:cover}.cphoto .ctext{padding:6px 4px 0}.cphoto-x{padding:14px;font-size:13px;color:var(--mute);border:1px dashed var(--line);border-radius:10px}
.cphoto-loc{display:flex;align-items:center;gap:6px;font-size:12px;margin:6px 4px 0;text-decoration:none}.cphoto-loc svg{width:14px;height:14px}
.cpinned{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--warn);margin-bottom:3px}.cpinned svg{width:12px;height:12px}
.cact-b.on{color:var(--warn)}
.csys{display:flex;gap:10px;align-items:flex-start;margin:10px auto;max-width:560px;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:14px}
.csys.warn{background:color-mix(in srgb,var(--warn) 8%,var(--panel));border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}.csys.ok{background:color-mix(in srgb,var(--ok) 7%,var(--panel));border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.csys-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel);color:var(--sea);flex:none}.csys.warn .csys-ic{color:var(--warn)}.csys.ok .csys-ic{color:var(--ok)}.csys-ic svg{width:16px;height:16px}.csys .grow{flex:1;min-width:0}.csys .btn.sm{min-height:32px;padding:4px 10px;font-size:13px;margin-top:6px}
.cpinbar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--warn) 5%,var(--panel))}.cpinbar summary{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;font-size:13px;list-style:none}.cpinbar summary::-webkit-details-marker{display:none}
.cpinbar summary svg{width:15px;height:15px;color:var(--warn);flex:none}.cpinbar summary .mute{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.cpinrow{display:flex;gap:8px;align-items:baseline;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:8px 14px;font:inherit;font-size:13.5px;color:var(--fg);text-align:left;cursor:pointer}.cpinrow:hover{background:var(--panel2)}.cpinrow .grow{flex:1;min-width:0}
.chat-h #ctasks{position:relative}.chat-h #ctasks .badge{position:absolute;top:-6px;right:-6px}
.crefpick{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:0 0 6px;font:inherit;color:var(--fg);cursor:pointer}.crefpick:hover{border-color:var(--sea)}.crefpick b{display:block;font-size:14px}.crefpick small{display:block;font-size:12px}
.ctask{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--line)}.ctask:last-child{border-bottom:0}.ctask .grow{flex:1;min-width:0}.ctask b{display:block;font-size:14px;line-height:1.35}.ctask small{display:block;font-size:12px}.ctask .late{color:var(--bad);font-weight:600}
.ctask.done b{text-decoration:line-through;color:var(--mute)}.ctask-c{padding-top:2px}.ctask .iconbtn{min-height:34px;width:34px;padding:0}.ctask .iconbtn svg{width:16px;height:16px}
.mytask h3{margin:0 0 4px;font-size:15px;display:flex;gap:6px;align-items:center}.mytask>a{display:inline-block;margin-top:6px}
.csx h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px}.csx h3 svg{width:20px;height:20px;color:var(--sea)}
.csx-st{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}.csx-st .dot{width:10px;height:10px;border-radius:50%;background:var(--mute);flex:none}.csx-st.ok .dot{background:var(--ok)}.csx-st .grow{flex:1}.csx-st b{display:block}.csx-st small{display:block;font-size:12.5px}.csx-st .btn{flex:0 0 auto}
.csx-how{margin:10px 0}.csx-how summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--sea)}.csx-how ol{margin:8px 0;padding-left:20px;font-size:14px;line-height:1.7}.csx-how code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:0 5px;font-size:13px}
.csx-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.csx-row b{display:block;font-size:14px}.csx-row small{display:block;font-size:12.5px}.csx-row.off{opacity:.6}
.cmsg.mine .cbub.is-media{background:var(--panel);color:var(--fg);border:1px solid color-mix(in srgb,var(--sea) 35%,var(--line))}.cmsg.mine .cbub.is-media .ctime{color:var(--mute)}.cmsg.mine .cbub.is-media .cref{background:color-mix(in srgb,var(--sea) 5%,var(--panel))}.cmsg.mine .cpinned{color:#ffd99a}.cmsg.mine .cbub.is-media .cpinned{color:var(--warn)}
.croom .grow{min-width:0}.croom small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:600px){.chat-h #csum span,.chat-h #ctasks span{display:none}.chat-h .btn{padding:8px 10px}}
.fbauto{background:color-mix(in srgb,#7c4dbb 7%,var(--panel));border-left-color:#7c4dbb}.fbauto b{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.fbauto b svg{width:15px;height:15px;color:#7c4dbb}
/* v6.17 AI ช่วยตรวจรูปคำขอแต้ม */
.clai{margin-top:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#7c4dbb 6%,var(--panel));border:1px solid color-mix(in srgb,#7c4dbb 25%,var(--line));font-size:14px}
.clai.wait{display:flex;gap:8px;align-items:center;color:var(--mute)}.clai-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.clai-h svg{width:16px;height:16px;color:#7c4dbb}.clai p{margin:6px 0}
.clai-n{display:flex;gap:14px;margin:4px 0;font-size:13.5px}.clai-w{margin:6px 0;padding-left:18px;color:var(--warn);font-size:13px}.clai .stchips{margin:4px 0}
.clai .stchips{justify-content:flex-start}
/* v6.18 AI ยืนยันการแจ้งซากสัตว์ */
.clai.urg{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad) 5%,var(--panel))}
.clai-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px 12px;margin:6px 0}.clai-g small{display:block;font-size:11.5px}.clai-g b{font-size:13.5px}
.clai-a{margin:8px 0 4px}.clai-a .btn{min-height:38px;padding:6px 12px;font-size:13.5px}.clai-a svg{width:18px;height:18px}
.vrow .clai{max-width:560px}
/* v6.19 AI คัดออก + ขอตรวจซ้ำ */
.clrc{margin-top:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--sea) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--sea) 30%,var(--line));font-size:14px}.clrc p{margin:6px 0}.clrc .vimg{margin-top:6px}
.clai-old{margin-top:6px}.clai-old summary{cursor:pointer;color:var(--mute)}
.clgone{opacity:.75;border-style:dashed}.clgone b{display:block}.clgone small{display:block}
.clrejs summary{cursor:pointer}.clrej-img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none}.clrejs .li small{display:block}
.li.clrej{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.otree li:only-child::after{border:0;border-left:2px solid color-mix(in srgb,var(--mute) 35%,var(--line));border-radius:0;width:0;left:50%}   /* v6.19.2 เส้นต่อหมวด → คนเดียวขาด */
/* ===== v6.20 ใช้งานง่ายขึ้น: แถบบันทึกค้าง · ลากจัดลำดับ · ลบแล้วเลิกทำ · เลือกหลายรายการ · เมนูล่างหลังบ้านมือถือ ===== */
#toast.hasact{display:flex;align-items:center;gap:12px;pointer-events:auto}
#toast .tact{flex:0 0 auto;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:6px 14px;min-height:36px;font:inherit;font-weight:600;cursor:pointer}
#toast .tact:hover{background:rgba(255,255,255,.3)}
.sbbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:45;display:flex;align-items:center;gap:8px;width:min(720px,calc(100vw - 24px));padding:10px 12px 10px 16px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.35)}
.sbbar[hidden]{display:none}.sbbar .btn{flex:0 0 auto;min-height:40px}.sbbar b{font-weight:600;font-size:14px;min-width:0}
.sbdot{flex:0 0 10px;height:10px;border-radius:50%;background:#e8a317;box-shadow:0 0 0 4px color-mix(in srgb,#e8a317 25%,transparent)}
body.sbon #toast,body.bulkon #toast{bottom:96px}
body.sbon .bo-main,body.bulkon .bo-main{padding-bottom:110px}
.sbbar.bulk{border-color:color-mix(in srgb,var(--sea) 45%,var(--line))}.sbbar.bulk .btn{padding:0 12px}
.dh{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;min-width:30px;height:40px;padding:0;margin:0 2px 0 -4px;border:0;border-radius:8px;background:transparent;color:var(--mute);cursor:grab;touch-action:none}
.dh svg{width:18px;height:18px}.dh:hover{background:var(--panel2);color:var(--fg)}.dh:focus-visible{outline:2px solid var(--sea);outline-offset:1px}
.dragging{opacity:.75;box-shadow:0 12px 28px -10px rgba(0,0,0,.4)!important;position:relative;z-index:5;background:var(--panel)}
body.sjdrag,body.sjdrag *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
table.t tr.dragging td{background:var(--panel2)}
.crow{align-items:center}.csel{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:40px;margin:0;cursor:pointer}.csel input{width:18px;height:18px;margin:0}
.crow.picked{background:color-mix(in srgb,var(--sea) 9%,transparent)}
.rwsum .dh,.tsum .dh{margin-left:-6px}.rwsum .tag,.ct1 .tag,.tsum .tag{white-space:nowrap}
.tsum{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:2px 0}.tsum::-webkit-details-marker{display:none}
.tsav{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;background:var(--panel2)}
.tsedit{min-height:34px;padding:0 10px;font-size:13px;flex:0 0 auto}details.tcard[open] .tsedit{display:none}details.tcard[open]>.tsum{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.qpick label .dh{margin:0 0 0 -6px;height:32px}
.bo-mtab{display:none}
@media (max-width:900px){
  body.bo .bo-mtab{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  body.bo .bo-mtab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border:0;background:none;color:var(--mute);font:inherit;font-size:11px;position:relative;cursor:pointer}
  body.bo .bo-mtab button svg{width:22px;height:22px}body.bo .bo-mtab button[aria-current]{color:var(--sea);font-weight:600}
  body.bo .bo-mtab .cbadge{position:absolute;top:6px;left:calc(50% + 6px)}
  body.bo.bo-open .bo-mtab [data-navtg]{color:var(--sea)}
  body.bo .bo-main{padding-bottom:90px}body.bo #toast{bottom:76px}
  body.bo .sbbar{bottom:70px}body.bo.sbon #toast,body.bo.bulkon #toast{bottom:150px}body.bo.sbon .bo-main,body.bo.bulkon .bo-main{padding-bottom:160px}
  body.bo .bo-nav{padding-bottom:70px}
  .sbbar{flex-wrap:wrap;padding:10px 12px}.sbbar b{flex:1 1 100%;font-size:13px}.sbbar .btn{flex:1 1 0}.sbbar.bulk b{flex:1 1 auto}.sbbar.bulk .btn{flex:0 0 auto}
}
/* แถบบันทึก/แถบล่างในหน้าที่มีแท็บล่าง (เจ้าหน้าที่ สมาชิก) */
body:not(.bo) .sbbar{bottom:76px}
/* หัวหน้าค้างบนสุดตอนเลื่อน (หน้าย่อยที่มีปุ่มกลับ) */
#app>.top{position:sticky;top:0;z-index:14;background:var(--bg);margin:-8px -16px 6px;padding:8px 16px}
/* ปุ่มบันทึกหลักของเจ้าหน้าที่ค้างเหนือแถบล่าง */
#app .btn.huge#save{position:sticky;bottom:72px;z-index:12;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
/* โปรไฟล์มุมขวาบนหลังบ้าน: ไม่ให้ถูกบีบ */
body.bo .bo-user{flex:0 0 auto}body.bo .bo-user .avi,body.bo .bo-user img{flex:0 0 auto}
/* ตารางถุง QR และปุ่มในตารางบนมือถือ */
.bgact{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:600px){body.bo .bo-main table.t{font-size:13px}body.bo .bo-main table.t td,body.bo .bo-main table.t th{padding:6px 4px}.bgact .btn{min-height:36px;padding:0 10px;font-size:13px}}
/* ปุ่มกรองและสลับธีม: นิ้วกดง่ายขึ้นบนจอสัมผัส */
@media (pointer:coarse){.mfil button,.mfil .chip,.themeseg button,.seg2 button,.wtabs a{min-height:40px}.bo-help summary{min-height:36px;display:flex;align-items:center}}
/* ฟอร์มบน PC: ไม่ยืดเกินอ่านง่าย */
@media (min-width:1200px){body.bo:is([data-page="settings"],[data-page="rules"],[data-page="chatset"],[data-page="ann"],[data-page="bags"],[data-page="api"],[data-page="about"],[data-page="teams"],[data-page="rewards"],[data-page="agents"],[data-page="export"]) .bo-main>:not(.bo-head){max-width:1000px}}
/* สิทธิ์: ไม่มีสิทธิ์ = ไม่เห็นที่จับลาก/ช่องเลือก */
body[data-nop~="shop"]:is([data-page="missions"],[data-page="shops"],[data-page="rewards"]) :is([data-dh],.csel),body[data-nop~="data_edit"][data-page="points"] .csel{display:none!important}
@media print{.sbbar,.bo-mtab,.dh,.csel{display:none!important}}
@media (max-width:900px){body.bo .bo-top .bo-user>.avi{display:inline-flex!important;align-items:center;justify-content:center}
  body.bo nav.bo-mtab>button[aria-current="page"]{color:var(--sea)!important;font-weight:600}
  body.bo nav.bo-mtab>button[aria-current="page"]::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--sea)}}
#app>.wo>.top{position:sticky;top:0;z-index:14;background:var(--bg);margin:-8px -16px 6px;padding:8px 16px}
@media (max-width:600px){.crud .crow .cth{display:none}}
.tsum>b{flex:1;min-width:0}details.tcard:not([open]){padding-top:10px;padding-bottom:10px}
/* v6.20.1 ปุ่มกับช่องกรอกในแถวเดียวกันสูงเท่ากัน · ที่จับลากอยู่กึ่งกลาง */
body.bo input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),body.bo select{height:40px;min-height:40px;padding-top:0;padding-bottom:0;box-sizing:border-box}
body.bo :is(div,form,span,td,label,p):has(> input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),> select) > :is(.btn,button.btn,a.btn){min-height:40px}
:is(.row,.lrow,.top,div):has(> input,> select) > select{align-self:stretch}
td.ra .dh,td .dh{height:32px;vertical-align:middle}td.ra>.btn,td.ra>button{vertical-align:middle}
.dh{align-self:center}
.rwsum .dh,.tsum .dh{height:32px}
body.bo .bo-main .row>.btn,body.bo .bo-main .row>button{white-space:nowrap}
@media (max-width:700px){.ovrow[style*="grid-template-columns"]{grid-template-columns:1fr!important}.ovmapc #map{min-height:260px!important}}
body[data-nop~="own"][data-page="org"] .odept{cursor:default}
/* v6.20 หน้า ฉัน หลังบ้าน แบบ A */
.me3{max-width:1100px}.me3>h1{margin-bottom:12px}
.mehead{padding:18px 20px}.mehtop{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.mehwho{min-width:180px}.mehwho .mename{font-size:20px}
.mehsub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}.mehsub .melink{font-size:12.5px}
.mehact{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.mehact .btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;text-decoration:none}.mehact .btn svg{width:17px;height:17px}
.mehset{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.mehs{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.megh{font-size:13px!important;font-weight:700!important;color:var(--mute);margin:20px 0 8px!important;letter-spacing:.02em}.megh small{font-weight:500}
.megrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.metile{display:flex;align-items:flex-start;gap:10px;padding:14px;margin:0;text-decoration:none;color:var(--fg);border-top:0!important;transition:box-shadow .15s,transform .15s}
.metile:hover{box-shadow:var(--sh);transform:translateY(-1px)}.metile b{display:block;font-size:14.5px}.metile small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}.metile .aic{flex:0 0 auto}
.me3 .mytask{margin-top:14px}.me3 .merc{margin:0}
@media (max-width:700px){.mehact{margin-left:0;width:100%}.mehact .btn{flex:1 1 auto;justify-content:center}.mehset{gap:12px;flex-direction:column;align-items:stretch}.mehs{justify-content:space-between}.megrid{grid-template-columns:1fr 1fr;gap:8px}.metile{padding:12px;flex-direction:column}.metile small{display:none}}
.mehead .mepic{position:relative;flex:none}.megrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}@media (max-width:700px){.megrid{grid-template-columns:1fr 1fr}}
/* v6.21 ภาพรวม: ส่วน ESG เว้นระยะจากแถบต้อนรับ · การ์ดตัวเลขชิดบนเท่ากันทุกใบ */
.esghd{margin:24px 0 12px!important;align-items:center!important}
.esghd .eyebrow{display:block;margin-bottom:2px}
.hero4{gap:14px!important;margin-bottom:16px!important}
.h4g{align-items:flex-start!important}.h4g>:not(.grow){align-self:center;flex:none}
/* v6.21 ESG รวมเป็นแผงเดียว: หัว + ช่วงเวลา + 4 ตัวเลข อยู่ในการ์ดใบเดียว ไม่โล่ง */
.esgpanel{padding:16px 18px 18px!important;margin:16px 0 14px!important}
.esgpanel .esghd{margin:0 0 12px!important}
.esgpanel .hero4{margin:0!important;gap:12px!important}
.esgpanel .hero4>.card{background:var(--panel2);box-shadow:none!important;border:1px solid var(--line);padding:12px 14px!important;margin:0!important;min-height:0!important}
.esgpanel .gauge{width:56px!important;height:56px!important}
.esgpanel .hv b{font-size:28px}
/* v6.21 หน้า ฉัน: ไม่มีแถบเส้นทางและหัว "ฉัน" (เมนูข้างบอกอยู่แล้ว) · ระยะระหว่างหมวดกระชับขึ้น */
body.bo[data-page="me"] .bo-head{display:none}
.me3>h1{display:none}
.me3 .mehead{margin-top:0}
.me3 .megh{margin:14px 0 8px!important}
.me3 .megrid{gap:10px}
.me3 .metile{padding:12px 14px}
.me3 .mytask:not([hidden]){margin:12px 0 0}
.bo-g.solo{padding-top:4px}
/* v6.21 AI ช่วยแปล */
.trbox{border:1px dashed var(--line,#ccd);border-radius:12px;padding:8px 12px;margin:8px 0}
.trbox>summary{cursor:pointer;font-weight:600}
.trbox .trcol{display:flex;flex-direction:column;gap:6px}
.aibtn{border-color:color-mix(in srgb,var(--pri,#0a7) 45%,transparent)}
.tag.aitag{background:color-mix(in srgb,#7c5cff 14%,transparent);color:#6a4ee0;flex:0 0 auto;font-size:.72rem}
.fbans .trbox{margin:6px 0}
/* v6.23 โหมดดูหลังบ้านอย่างเดียว */
.peekbar{display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,#d08a00 45%,transparent);background:color-mix(in srgb,#ffb020 10%,var(--card,#fff));margin-bottom:12px}
.peekbar small{display:block;opacity:.8}.peekbar .btn{flex:0 0 auto}
body.peek .bo-main .btn.pri,body.peek .bo-main .btn.bad,body.peek .bo-main .btn.ok,body.peek .mpick .btn.pri{opacity:.45}
body.peek [data-dh],body.peek .dh{pointer-events:none;opacity:.35}
body.peek #sbbar,body.peek #bulkbar,body.peek .csel{display:none!important}
body.peek .bo-main input:disabled,body.peek .bo-main textarea:disabled,body.peek .bo-main select:disabled{opacity:.75;cursor:not-allowed}
.pvcard .li{align-items:center;gap:8px}.pvopts{display:grid;gap:8px}.pvopts .check{align-items:flex-start}
/* v6.24 ตั้งค่า สีชัง Twin */
.twset{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:12px}.twset .card{margin:0}.twset h3{margin:0 0 8px}
.twopts{display:grid;gap:6px}.twusers{display:grid;gap:4px;margin:8px 0 0 26px;padding:8px;border-left:2px solid var(--line,#dde)}
.twft td,.twft th{vertical-align:middle}.twft input{width:20px;height:20px}
/* v7.0 สีชัง IoT */
.iottabs{margin:10px 0 12px}.iotkpi{margin-bottom:12px}.iotkpi .kpi.hot .v{color:var(--bad,#c2333f)}
.iotdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:#9aa4ad}.iotdot.on{background:#2e8b57;box-shadow:0 0 0 3px color-mix(in srgb,#2e8b57 22%,transparent)}.iotdot.lost{background:#c2333f}.iotdot.off{background:#9aa4ad}
.iotcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.iotcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;margin:0}
.iotvals{display:flex;flex-wrap:wrap;gap:6px}.iotkv{display:flex;flex-direction:column;padding:6px 10px;border-radius:10px;background:var(--bg2,#f2f4f6);min-width:76px}.iotkv b{font-size:1.15rem;font-variant-numeric:tabular-nums}.iotkv small{font-size:.72rem;opacity:.75}
.iotrl{display:flex;flex-wrap:wrap;gap:4px}.iotack{opacity:.55}
.iotcharts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.iotch{background:var(--card,#fff);border:1px solid var(--line,#e3e6ea);border-radius:14px;padding:10px 12px}
.iotch-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}.iotch .iotv{font-size:1.2rem;font-variant-numeric:tabular-nums}
.iotch svg{width:100%;height:auto;display:block}.iotch .ln{fill:none;stroke:var(--pri,#0f6cbd);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.iotch .pt{fill:var(--pri,#0f6cbd);stroke:var(--card,#fff);stroke-width:2}.iotch .g{stroke:currentColor;opacity:.12;stroke-dasharray:3 3}.iotch .tx{font-size:9px;fill:currentColor;opacity:.55}
.iotctl{margin-bottom:12px}.iotbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.iotsw{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--line,#e3e6ea);transition:background .2s,border-color .2s}.iotsw.on{border-color:#2e8b57;background:color-mix(in srgb,#2e8b57 9%,transparent)}
.iotsw .btn{min-height:44px;flex:1}.iotst{font-size:.78rem;opacity:.8}.btn.holding{box-shadow:inset 0 0 0 2px var(--pri,#0f6cbd);animation:iothold 1.5s linear}@keyframes iothold{from{background-size:0 100%}to{background-size:100% 100%}}
/* v7.1 ผังทีมแบบใหม่ (รายการซ้อน + รายละเอียด) */
.ochs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.osplit{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:14px;align-items:start}.oright{display:flex;flex-direction:column;gap:12px;min-width:0}.oright .card{margin:0}
.oout{padding:6px;position:sticky;top:70px;max-height:calc(100vh - 100px);overflow:auto}
.oit{display:flex;align-items:center;gap:4px;padding:3px 6px 3px calc(6px + var(--dep,0) * 16px);border-radius:9px;min-height:38px}.oit.on{background:color-mix(in srgb,var(--sea,#0f6cbd) 11%,transparent)}.oit:hover{background:color-mix(in srgb,var(--sea,#0f6cbd) 6%,transparent)}
.oit .ocar{all:unset;cursor:pointer;width:22px;height:28px;display:grid;place-items:center;color:var(--mute);flex:0 0 auto;border-radius:6px}.oit .ocar:disabled{cursor:default;opacity:.5}
.oit .onm{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:5px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oit .onm i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.oit .ocn{font-size:11.5px;color:var(--mute);flex:0 0 auto}.oit .oct{font-size:10.5px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--sea,#0f6cbd) 14%,transparent);flex:0 0 auto}.oit .oct.late{background:color-mix(in srgb,var(--bad,#c2333f) 16%,transparent);color:var(--bad,#c2333f)}
.oit .onm:focus-visible,.oit .ocar:focus-visible{outline:2px solid var(--sea,#0f6cbd);outline-offset:1px}
.odet h2{font-size:1.25rem}.okpi{margin-top:12px}.otbl{overflow-x:auto}.owho2{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.lnk{all:unset;cursor:pointer;color:var(--sea,#0f6cbd)}
.oload{display:inline-block;vertical-align:middle;width:90px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--mute) 15%,transparent);overflow:hidden}.oload i{display:block;height:100%;background:var(--sea,#0f6cbd)}.oload.hi i{background:var(--bad,#c2333f)}
.orl.r4{background:color-mix(in srgb,#0f6cbd 12%,var(--panel,#fff));color:#0f5aa0}.orl.r5{background:color-mix(in srgb,#6b7785 14%,var(--panel,#fff))}
.ocases{display:flex;flex-direction:column;gap:6px;margin-top:8px}.ocase{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px}.ocase small{display:block}.ocase.done{opacity:.6}.ocase:hover{border-color:var(--sea,#0f6cbd)}
.okan{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:10px;margin-top:10px;overflow-x:auto}.okcol{background:color-mix(in srgb,var(--mute) 7%,transparent);border-radius:12px;padding:8px;min-height:160px}.okcol h4{margin:2px 4px 8px;font-size:13px;color:var(--mute)}
.okc{background:var(--panel,#fff);border-radius:10px;padding:4px;margin-bottom:8px}.okc .ocase{border:0}.oavs{display:flex;gap:2px;align-items:center;margin:4px 0}
@media (max-width:900px){.osplit{grid-template-columns:1fr}.oout{position:static;max-height:none}}
.odet .row .btn,.oright .card>.row>.btn,.okan .btn,.obar .btn{flex:0 0 auto}

.trwait [data-tr]{opacity:.45;transition:opacity .2s}
.bo-crumb{user-select:none;-webkit-user-select:none}.bo-crumb .crumb-a{border:0;background:none;padding:2px 4px;margin:-2px -4px;border-radius:6px;font:inherit;color:inherit;cursor:pointer}.bo-crumb .crumb-a:hover{color:var(--sea);text-decoration:underline;text-underline-offset:3px}.bo-crumb .crumb-a:focus-visible{outline:2px solid var(--sea);outline-offset:1px}

/* v7.3 ส่งออกรายงาน */
.xsub{margin:-2px 0 10px}.xtabs{margin-bottom:12px}
.xm .xl,.xl{font-size:12px;font-weight:600;color:var(--mute);margin:12px 0 6px;letter-spacing:.02em}.xl:first-child{margin-top:0}.xl2{font-size:12px;font-weight:600;color:var(--mute);margin:14px 0 6px}
.xcode{font:600 11px ui-monospace,Menlo,monospace;color:var(--sea);background:color-mix(in srgb,var(--sea) 11%,transparent);padding:1px 5px;border-radius:4px;margin-right:6px}
.xcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.xcard{padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.xcov{border:0;padding:14px 22px 0;background:var(--panel2);height:150px;overflow:hidden;cursor:pointer;display:block;width:100%}.xcov:hover .xpg{transform:translateY(-3px)}
.xthumb{display:flex;justify-content:center}.xpg{width:150px;height:200px;background:#fff;border:1px solid #d7dde3;box-shadow:0 6px 18px rgba(10,30,50,.12);padding:10px;transition:transform .2s;text-align:left}
.xph{display:flex;gap:5px;align-items:center;border-bottom:1.5px solid #0b3a68;padding-bottom:5px}.xph i{width:14px;height:14px;border-radius:50%;flex:none}.xph b{display:block;font-size:7.5px;color:#0b3a68;line-height:1.2}.xph small{display:block;font-size:5px;color:#5a6773}.xph em{margin-left:auto;font-style:normal;font-size:4.5px;border:.8px solid #0b3a68;color:#0b3a68;padding:1px 2px;font-weight:700;white-space:nowrap}
.xpm{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;margin:6px 0}.xpm span{height:3px;background:#e1e7ed}.xpk{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:6px}.xpk span{height:16px;border:.8px solid #d5dde4}
.xpt span{display:block;height:5px;background:#eef2f6;margin-bottom:2px}.xpt span:first-child{height:6px}
.xcb{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}.xcb b{font-size:14.5px}.xwho{margin-top:auto;padding-top:4px}.xbtns{display:flex;gap:6px;margin-top:8px}.xbtns .btn.pri{flex:1;justify-content:center}
.xlast{display:flex;gap:14px;align-items:center;margin-top:14px}
.xown{display:grid;grid-template-columns:270px minmax(0,1fr) 330px;gap:14px;align-items:start}.xsel{padding:10px 8px!important}.xsel .xl{padding:0 8px}.xn{float:right;color:var(--sea)}
.xgrp{font-size:11.5px;font-weight:700;color:var(--mute);margin:12px 8px 4px;letter-spacing:.04em}.xds{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;cursor:pointer}.xds:hover{background:var(--panel2)}
.xds.on{background:color-mix(in srgb,var(--sea) 9%,transparent)}.xds input{margin-top:3px;width:16px;height:16px;flex:none}.xds b{font-size:13.5px;font-weight:600;display:block}.xds small{font-size:11.5px;color:var(--mute);display:block;line-height:1.4}
.xqs{display:flex;gap:6px;padding:10px 8px 2px}.btn.sm{padding:4px 10px;font-size:12.5px;min-height:0}
.xfmt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.xfmt label{border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;display:block;position:relative}.xfmt input{position:absolute;opacity:0;pointer-events:none}
.xfmt label.on{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea) inset}.xfmt label:focus-within{outline:2px solid var(--sea);outline-offset:2px}.xfmt b{display:block;font-size:13.5px}.xfmt small{font-size:11.5px;color:var(--mute);display:block;line-height:1.4}
.xic{font:700 10.5px ui-monospace,monospace;display:inline-block;padding:2px 6px;border-radius:4px;color:#fff;margin-bottom:6px}
.xrng{flex-wrap:wrap}.xdates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.xdates[hidden]{display:none}.xrtxt{display:block;margin-top:6px}
.check.xo{margin:6px 0;font-size:13.5px}.check.xo input{width:17px;height:17px}.xsets{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.xfoot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:14px}.xfoot .grow{flex:1}
.xpbox{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;height:452px;overflow:hidden;display:flex;justify-content:center}
.xpbox iframe{width:794px;height:1123px;border:0;background:#fff;transform:scale(.385);transform-origin:top center;flex:none;box-shadow:0 8px 30px rgba(10,30,50,.25);pointer-events:none}.xpn{display:block;text-align:center;margin-top:6px}
.xht td{vertical-align:top}.xdoc{font:600 12px ui-monospace,Menlo,monospace;white-space:nowrap}.xok{color:var(--ok);font-weight:600}.xwarn{color:var(--bad);font-weight:600}.xempty{padding:30px;text-align:center;color:var(--mute)}
@media (max-width:1200px){.xown{grid-template-columns:260px minmax(0,1fr)}.xprev{grid-column:1/-1;max-width:420px;justify-self:center;width:100%}}
.xown>*{min-width:0}
@media (max-width:760px){.xown{grid-template-columns:minmax(0,1fr)}.xfmt{grid-template-columns:1fr}.xsets{grid-template-columns:1fr}.xpbox{height:420px}.xpbox iframe{transform:scale(.36)}}

/* v7.4 ส่งออกผังทีมและเคส */
.oxdlg .mpick-in{max-height:94vh}.oxb{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0;overflow:hidden;flex:1}.oxf{overflow:auto;padding:14px 18px}
.oxw{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.oxw label{border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;position:relative;display:block}.oxw label.on{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea) inset}
.oxw input{position:absolute;top:10px;right:10px;width:17px;height:17px}.oxw b{display:block;font-size:13.5px;padding-right:22px}.oxw small{display:block;font-size:11.5px;color:var(--mute);line-height:1.4}
.oxr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.oxr .f select{width:100%}
.oxfm{display:flex;gap:6px;flex-wrap:wrap}.oxfm label{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;position:relative}.oxfm input{position:absolute;opacity:0;pointer-events:none}
.oxfm label.on{border-color:var(--sea);color:var(--sea);font-weight:600;background:color-mix(in srgb,var(--sea) 8%,transparent)}.oxfm label:focus-within{outline:2px solid var(--sea);outline-offset:2px}.oxfm .xic{margin:0}
.oxwarn{font-size:12px;color:#8a5a00;background:#fff4dc;border:1px solid #f0d9a6;border-radius:8px;padding:7px 10px;margin-top:12px}
html[data-theme="dark"] .oxwarn{background:#3a2c0e;color:#f3d79a;border-color:#5a4415}@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .oxwarn{background:#3a2c0e;color:#f3d79a;border-color:#5a4415}}
.oxpv{background:var(--panel2);border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;min-height:0}.oxpb{flex:1;min-height:300px;overflow:hidden;display:flex;justify-content:center}
.oxpb iframe{border:0;background:#fff;transform-origin:top center;flex:none;box-shadow:0 8px 24px rgba(10,30,50,.2);pointer-events:none}
@media (max-width:820px){.oxb{grid-template-columns:1fr;overflow:auto}.oxpv{display:none}.oxw{grid-template-columns:1fr}.oxr{grid-template-columns:1fr}}

/* v7.5 แอปเจ้าหน้าที่: แถบกิจกรรม ป้ายรอนาน ตอบด่วน คิวไม่มีเน็ต */
.otiles.o2{grid-template-columns:repeat(2,minmax(0,1fr))}.ohd{align-items:center;gap:8px;margin-top:6px}.ohd h2{margin:12px 0 8px}.ohd h2 .mute{font-weight:500;font-size:.85em}
.wtag{display:inline-block;flex:0 0 auto;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--mute);border:1px solid var(--line);white-space:nowrap}
.wtag.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}.wtag.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.oscan{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,var(--sea),var(--sea2));color:#fff;text-decoration:none;margin:4px 0 6px;box-shadow:var(--sh);min-height:78px}
.oscan .otic{background:rgba(255,255,255,.18);color:#fff}.oscan b{display:block;font-size:17px}.oscan small{opacity:.9}.oscan .ochev{color:#fff;font-size:22px}
.li.oq{text-decoration:none;color:inherit;align-items:center;gap:10px}.oqtx{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrep{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.qrep .chip{min-height:32px;padding:4px 10px;font-size:13px}
.oqbar{border-left:4px solid var(--warn);padding:10px 12px}.oqbar[hidden]{display:none}
.tag.info{color:var(--sea);border-color:color-mix(in srgb,var(--sea) 45%,var(--line))}
.ohd .btn{flex:0 0 auto;width:auto;padding:6px 12px;min-height:36px;font-size:13.5px}.ohd .btn svg{width:16px;height:16px}.tabbar .abadge,.tabbar .cbadge{margin-left:3px}

/* v7.6 QR เดียวใช้ได้หมด */
.myqr-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;border:1.5px solid color-mix(in srgb,var(--sea) 40%,var(--line));background:color-mix(in srgb,var(--sea) 6%,var(--panel));font:inherit;color:inherit;margin-top:10px}
.myqr-btn b{display:block;font-size:16px}.myqr-btn small{color:var(--mute)}.myqr-ic{width:44px;height:44px;border-radius:12px;background:var(--sea);color:#fff;display:grid;place-items:center;flex:none}.myqr-ic svg{width:24px;height:24px}
.myqr-b{padding:20px 18px 14px;text-align:center}.myqr-q{background:#fff;border-radius:12px;padding:10px;margin:14px auto 8px;width:min(270px,80vw)}.myqr-q svg{width:100%;height:auto;display:block}
.swho{border-left:4px solid var(--sea)}.sacts{display:flex;flex-direction:column;gap:8px}.sact{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--panel)}
.sact input{width:18px;height:18px;flex:none}.sact.on{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea) inset}.sact.off{opacity:.5;cursor:default}.sact b{display:block}.sact small{color:var(--mute)}.sact .sp{color:var(--ok);font-size:17px;flex:none}
.scont{border-left:4px solid var(--ok);padding:10px 12px}.oweigh{display:inline-flex;align-items:center;gap:6px;color:var(--mute);margin:0 0 8px 4px}.oweigh svg{width:16px;height:16px}
.sact .grow{flex:1;min-width:0}
.btn.warn.on{background:var(--warn);color:#fff;border-color:var(--warn)}

/* v7.7 ปุ่มสแกนกลางแถบล่าง (เจ้าหน้าที่) */
.tabbar.otb .tbscan{position:relative;color:var(--sea);font-weight:600}.tabbar.otb .tbsc{display:grid;place-items:center;width:56px;height:56px;margin-top:-26px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--sea2));color:#fff;box-shadow:0 6px 16px rgba(15,111,168,.35),0 0 0 4px var(--panel)}
.tabbar.otb .tbsc svg{width:28px;height:28px}.tabbar.otb .tbscan[aria-current="page"] .tbsc{box-shadow:0 6px 16px rgba(15,111,168,.45),0 0 0 4px var(--panel),0 0 0 6px color-mix(in srgb,var(--sea) 35%,transparent)}

/* v7.7 หน้าแรกนักท่องเที่ยว: สแกน + QR ของฉัน คู่กันแบบแอปจ่ายเงิน */
.tq2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
.tqb{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;color:var(--fg);box-shadow:var(--sh);min-height:132px;justify-content:center}
.tqb i{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea);margin-bottom:4px}.tqb i svg{width:30px;height:30px}
.tqb b{font-size:17px}.tqb small{font-size:12px;color:var(--mute);text-align:center;line-height:1.3}
.tqb.pri{background:linear-gradient(135deg,var(--sea),var(--sea2));border-color:transparent;color:#fff}.tqb.pri i{background:rgba(255,255,255,.2);color:#fff}.tqb.pri small{color:rgba(255,255,255,.88)}
.tqb:active{transform:scale(.98)}button.tile2{font:inherit;color:inherit;cursor:pointer;text-align:left}

/* v7.7 IoT ตั้งค่าบอร์ด + แบบโค้ด */
.iottpl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.iottpl label{border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;position:relative;display:block}.iottpl input{position:absolute;opacity:0;pointer-events:none}
.iottpl label.on{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea) inset}.iottpl label:focus-within{outline:2px solid var(--sea);outline-offset:2px}.iottpl b{display:block;font-size:13.5px}.iottpl small{display:block;font-size:11.5px;color:var(--mute);line-height:1.35}
.iotsteps{margin:0;padding-left:20px}.iotbrs{display:flex;flex-direction:column;gap:6px}
.iotbr{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(130px,1fr) minmax(170px,1.3fr) 90px auto 36px;gap:6px;align-items:center}.iotbr input,.iotbr select{width:100%;min-width:0}
.iotbh{font-size:11.5px;color:var(--mute);font-weight:600}.iotledcta{border-left:4px solid var(--warn);margin-top:12px}
@media (max-width:760px){.iottpl{grid-template-columns:1fr 1fr}.iotbr{grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--line);border-radius:10px}.iotbh{display:none}}

/* v7.8 ติดตั้งแอป */
.instbar{display:flex;align-items:center;gap:10px;border-left:4px solid var(--sea);padding:10px 12px}.instbar b{display:block}.instbar small{color:var(--mute)}.instbar .btn{flex:0 0 auto}
.instic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--sea) 12%,transparent);color:var(--sea);display:grid;place-items:center;flex:none}.instic svg{width:22px;height:22px}
.inst-hero{display:flex;align-items:center;gap:14px}.inst-hero img{border-radius:18px;box-shadow:var(--sh)}.inst-hero b{display:block;font-size:20px}.inst-hero small{color:var(--mute)}
.inst-acts{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}.inst-acts .huge[hidden]{display:none}.inst-apk{text-align:center}
.inst-s h3{margin:0 0 8px}.inst-s.me{border:1.5px solid var(--sea)}.inst-ol{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:10px}
.inst-ol li{display:flex;gap:10px;align-items:flex-start;counter-increment:st}.inst-ol .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;font-size:13px}.inst-ol .n::before{content:counter(st)}
.inst-ol small{display:block;color:var(--mute);font-size:12.5px}.kbd{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:12px}
.inst-qr .gqr{width:min(220px,70vw);margin:8px auto}.inst-qr .gqr svg{width:100%;height:auto}
/* v8.0 แถบหมวดบนขวา: สีชัง Twin · สีชัง IoT · สีชัง AI */
.bo-hub{display:inline-flex;align-items:center;gap:2px;height:34px;padding:2px;margin-right:8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.bo-hub .hb{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 6px;border-radius:999px;border:0;background:none;color:#fff!important;text-decoration:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.bo-hub .hb:hover{background:rgba(255,255,255,.16)}.bo-hub .hb.on{background:#fff;color:#0f6cbd!important;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.bo-hub .hb-i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0f6cbd;flex:0 0 auto}.bo-hub .hb.on .hb-i{background:linear-gradient(135deg,#0f6fa8,#14a3a1);color:#fff}
.hb-i svg{width:13px;height:13px}.hb-i img{width:16px;height:16px;display:block}
.bo-hub .hb-lock{display:inline-grid;margin-left:-2px;opacity:.75}.bo-hub .hb-lock svg{width:11px;height:11px}
.bo-hub .hb-set{padding:0;width:28px;justify-content:center}.bo-hub .hb-set svg{width:15px;height:15px}
.hubrows{display:flex;flex-direction:column;gap:12px}.hubrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px}.hubrow .seg3{margin:8px 0 4px}.hubrow small{display:block}
.hb-i.big{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0f6fa8,#14a3a1);color:#fff;flex:0 0 auto}.hb-i.big svg{width:19px;height:19px}.hb-i.big img{width:30px;height:30px}.hb-i.big:has(img){background:#fff;box-shadow:0 0 0 1px var(--line)}
@media (max-width:900px){.bo-hub .hb-t{display:none}.bo-hub .hb{padding:0 4px}.bo-hub{margin-right:4px}}
/* v8.0 สีชัง AI */
.aihero{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:16px 18px;margin:0 0 12px;border-radius:12px;color:#fff;background:linear-gradient(115deg,#0a3d6b 0%,#0f6fa8 50%,#14a3a1 100%)}
.aihero h1{color:#fff;margin:2px 0;font-size:22px}.aihero p{margin:0;opacity:.9;font-size:14px}.aihero small{opacity:.85}.aihero .tag{background:rgba(255,255,255,.2);color:#fff}
.aiph h3{font-size:16px}.aiprog{height:8px;border-radius:999px;background:var(--panel2);overflow:hidden;margin:10px 0 12px}.aiprog i{display:block;height:100%;background:linear-gradient(90deg,#0f6fa8,#14a3a1);border-radius:999px}
.aisteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.aisteps li{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:10px;border:1px solid var(--line);color:var(--mute)}
.aisteps li>b{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);font-size:12px}
.aisteps li span{display:block;font-weight:600;font-size:13px;color:var(--fg)}.aisteps li small{display:block;font-size:11.5px;line-height:1.4}
.aisteps li.done>b{background:#14a3a1;color:#fff}.aisteps li.now{border-color:#0f6fa8;box-shadow:0 0 0 1px #0f6fa8 inset}.aisteps li.now>b{background:#0f6fa8;color:#fff}
.aikpi{margin:12px 0}.aicav summary{cursor:pointer}.aicav ul{margin:8px 0 0;padding-left:20px;line-height:1.7}.aitbl td{vertical-align:middle}.nowrap{white-space:nowrap}
@media (max-width:760px){.aisteps{grid-template-columns:1fr}.aikpi{grid-template-columns:1fr 1fr}}
/* v8.1 ส่วนที่ยังเป็นค่าสมมุติ */
.asmc h3{margin:0 0 6px}.asmrow{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}.asmrow.ro{cursor:default}.asmc h3+.asmrow{border-top:0}
.asmrow b{display:block;font-size:14.5px}.asmrow small{display:block;color:var(--mute);font-size:12.5px;line-height:1.5}.asmrow .asmsrc{color:#9a5b00}.asmrow .btn,.asmrow .tag{flex:0 0 auto}
.sw{position:relative;flex:0 0 auto;width:46px;height:26px}.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}.sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+i{background:#0f6fa8}.sw input:checked+i::after{transform:translateX(20px)}.sw input:focus-visible+i{outline:2px solid #0f6fa8;outline-offset:2px}
.asmrow>.grow{flex:1 1 auto;min-width:0}.asmrow{justify-content:space-between}
/* v8.6 ไอคอนเส้นในบรรทัด (แทนอีโมจิ) */
.ii{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;flex:0 0 auto;stroke-width:1.8}
.btn .ii,.tag .ii{margin-right:2px}.iconbtn .ii{width:18px;height:18px;margin:0}

/* v8.22 สีชัง AI ตรวจจับขยะ (กล้องมือถือ) */
.vstage{position:relative;width:100%;aspect-ratio:4/3;max-height:62vh;background:#0d1b26;border-radius:14px;overflow:hidden;margin:8px 0}
.vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vstage canvas{position:absolute;left:0;top:0;pointer-events:none}
.vidle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#cfe3ef;font-size:14px;text-align:center;padding:16px}
.vidle svg{width:40px;height:40px;opacity:.8}.vidle[hidden]{display:none}
.vmode button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;line-height:1.25}.vmode button small{font-size:11px;color:var(--mute);font-weight:400}
.vmode button[aria-pressed="true"] small{color:inherit;opacity:.85}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.vchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--panel2,#eef3f6);font-size:13px}
.vchip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.vres img{display:block;width:100%;border-radius:10px;margin-top:8px}
body .camk{max-width:560px}
.camtop{display:flex;flex-direction:column;gap:2px;padding:12px 2px 2px}.camtop small{color:var(--mute);font-size:12px}
.camstat{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 12px;border-radius:10px;background:var(--panel2,#eef3f6);margin-bottom:8px}
.camstat .cdot{width:10px;height:10px;border-radius:50%;background:#9aa5ae;flex:none}
.camstat[data-s="ok"] .cdot{background:#2e9e5b;box-shadow:0 0 0 4px rgba(46,158,91,.18)}.camstat[data-s="busy"] .cdot{background:#1e88e5}.camstat[data-s="bad"] .cdot{background:#c62828}
.camdim{position:fixed;inset:0;z-index:999;background:#000;color:#5f6b73;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:14px}
.camdim[hidden]{display:none}.camdim b{color:#7f8b93;font-weight:500}
.iotsnap{margin:8px 0 4px;border-radius:10px;overflow:hidden;background:var(--panel2,#eef3f6);min-height:40px}
.iotsnap img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.iotsnap small{display:block;padding:5px 8px;font-size:11.5px;color:var(--mute)}
.iotsnap.big img{aspect-ratio:auto;max-height:60vh;object-fit:contain;background:#0d1b26}
.camqr{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}.camqr-c{background:#fff;border-radius:10px;padding:6px}.camqr-c svg{display:block;width:100%;height:auto}
@media (max-width:560px){.camqr{grid-template-columns:1fr}.camqr-c{max-width:200px}}
/* v8.23 Seajai Vision ในหน้า สีชัง IoT */
.sjvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:8px 0}
.sjvcam{display:flex;flex-direction:column;gap:8px}
.sjvlive{position:relative;border-radius:10px;overflow:hidden;background:#0d1b26;aspect-ratio:16/9;display:grid;place-items:center}
.sjvlive img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.sjvlive img[hidden]{display:none}
.sjvlive .btn{position:relative;z-index:1;background:rgba(255,255,255,.92)}.sjvlive img:not([hidden])+.btn{position:absolute;right:8px;bottom:8px;min-height:32px;padding:4px 10px}
.sjvkv{display:flex;flex-wrap:wrap;gap:6px}.sjvkv span{display:flex;flex-direction:column;padding:6px 10px;border-radius:8px;background:var(--panel2,#eef3f6);min-width:64px}
.sjvkv small{font-size:11px;color:var(--mute)}.sjvkv b{font-size:16px;color:var(--fg)}
/* v8.25 ผลนับกล้องแบบย่อ */
.sjvtop .vchips{margin:2px 0 0}.sjvtop .vchip i{background:#2f9e44}
.sjvdev{display:block;margin-top:4px;font-size:11.5px}
.sjvall{margin-top:6px}.sjvall summary{cursor:pointer;font-size:12px;color:var(--mute)}.sjvall .sjvkv{margin-top:6px}
.sjvev details summary{cursor:pointer;color:var(--mute);list-style:none}.sjvev details summary::-webkit-details-marker{display:none}

/* v8.29 ปุ่มควบคุมในการ์ดกล้อง */
.sjvctl{display:grid;gap:6px;margin:8px 0 4px;padding:8px 0 4px;border-top:1px solid var(--line)}.sjvrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sjvrow .btn{flex:0 0 auto;min-height:34px;padding:4px 12px}.sjvrow span:first-child{min-width:0}.sjvadd{justify-self:start;min-height:32px;padding:4px 10px;font-size:13px}

/* v8.29.1 ปุ่มลัดไฟ/รีเลย์บนหัวการ์ดกล้อง */
.sjvhd{flex-wrap:wrap;row-gap:6px}.sjvhd>b.grow{min-width:9em}
.sjvqs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end;max-width:100%}
.sjvq{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:2px 10px;border-radius:99px;border:1px solid var(--line);background:var(--card,#fff);color:inherit;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.sjvq i{width:8px;height:8px;border-radius:50%;background:#aab4bd}
.sjvq.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}.sjvq.on i{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
.sjvq.add,.sjvq.more{color:var(--muted,#5b6b78);border-style:dashed}
.sjvq:disabled{opacity:.6}
[data-ctl].flash{outline:2px solid var(--brand,#0f6fa8);outline-offset:2px;border-radius:8px;transition:outline-color .3s}


/* v8.29.4 สวิตช์และกรอบควบคุมในการ์ดกล้อง (ใช้ .tgl ไม่ชนกับ .sw เดิม) */
.tgl{-webkit-appearance:none;appearance:none;position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-block;width:48px;min-width:48px;height:28px;min-height:0;border-radius:99px;border:0;padding:0;margin:0;background:#c4ccd3;cursor:pointer;transition:background .25s}
.tgl i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.tgl.on{background:var(--ok)}.tgl.on i{transform:translateX(20px)}
.tgl:focus-visible{outline:2px solid var(--brand,#0f6fa8);outline-offset:2px}
.tgl.wait{background:color-mix(in srgb,var(--ok) 45%,#c4ccd3)}.tgl.wait:not(.on){background:#d7dde2}.tgl.wait i{animation:tglp .7s ease-in-out infinite alternate}
@keyframes tglp{to{box-shadow:0 0 0 5px rgba(255,255,255,.55),0 1px 3px rgba(0,0,0,.3)}}
.sjvctl{gap:8px}.sjvgrp{display:grid;gap:6px;padding:8px 10px 10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--line) 18%,transparent)}
.sjvgh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}.sjvgh svg{width:16px;height:16px}.sjvgh small{font-size:12px}
.sjvrow{flex-wrap:nowrap;justify-content:space-between}.sjvrow>span:first-child{flex:1 1 auto}

/* v8.31 ESG Dashboard: การ์ดหลักมีแถบสีตามหมวด · แถบ 4 ส่วน · ข้อมูลประกอบพับได้ */
.esgpanel .esgh>.card.h4{position:relative;overflow:hidden;gap:2px}
.esgpanel .esgh>.card.h4::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--sea))}
.esgpanel .esgh .hv{margin:2px 0 4px}.esgpanel .esgh small.mute{font-size:12px;line-height:1.45}
.bar.sm{height:6px;margin-top:8px;border-radius:99px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}.bar.sm i{display:block;height:100%;width:var(--w);background:#5b4bb0;border-radius:inherit;transition:width .6s}
.esg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.e4{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;color:inherit;text-decoration:none;border-left:1px solid var(--line);background:var(--panel);transition:background .2s}
.e4:first-child{border-left:0}.e4:hover{background:color-mix(in srgb,var(--sea) 6%,var(--panel))}
.e4n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sea);color:#fff;font-size:12.5px;font-weight:700}
.e4:last-child .e4n{background:var(--acc,#d9822b)}
.e4>.grow>b{display:block;font-size:14px}.e4>.grow>b small{font-weight:400;color:var(--mute);font-size:12px}
.e4v{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}.e4v b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.e4v span{font-size:12px;color:var(--mute)}
.e4 small.mute{display:block;font-size:11.5px;margin-top:1px}
@media (max-width:900px){.esg4{grid-template-columns:repeat(2,minmax(0,1fr))}.e4:nth-child(3){border-left:0}.e4:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.esg4{grid-template-columns:1fr}.e4{border-left:0!important;border-top:1px solid var(--line)}.e4:first-child{border-top:0}}
.ovmore{margin-top:4px}.ovmore>summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.ovmore>summary::-webkit-details-marker{display:none}
.ovmore>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(-45deg);margin-right:4px;transition:transform .2s;align-self:center}.ovmore[open]>summary::before{transform:rotate(45deg)}
@media print{.esg4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.e4{border-left:1px solid var(--line)!important;border-top:0!important}}

/* v8.31.1 การ์ดกล้องเท่ากันทุกใบ · สวิตช์ปิดใช้งานสีเทา · กล้องออฟไลน์ */
.sjvgrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:stretch}
.sjvcam{margin:0!important;gap:10px}
.sjvhd{display:grid;gap:6px}
.sjvh1{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:24px}
.sjvh1>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.sjvh1>small{font-family:ui-monospace,monospace;font-size:12px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--line) 45%,transparent)}
.sjvhd .sjvqs{display:flex;flex-wrap:wrap;gap:6px;margin:0;min-height:28px;justify-content:flex-start;align-items:center}
.sjvlive{aspect-ratio:16/9;flex:none}
.sjvlive.off{background:repeating-linear-gradient(135deg,#16242f 0 10px,#132029 10px 20px)}
.sjvoff{display:grid;justify-items:center;gap:4px;color:#c5d0d8;text-align:center;padding:10px}.sjvoff svg{width:26px;height:26px;opacity:.7}.sjvoff b{font-size:14px}.sjvoff small{font-size:12px;opacity:.75}
.sjvctl{margin:0;padding:0;border-top:0}
.tgl:disabled{cursor:not-allowed;background:#d3d9de!important;opacity:.75}.tgl:disabled i{box-shadow:none}
.tgl:disabled.on{background:#b9c2c9!important}
.sjvdev a{white-space:nowrap}
.sjvcnt{margin-top:auto}

/* v8.31.2 กล้องไม่ได้เชื่อมต่อ: สถานะ AI = ไม่ทราบ · ผลนับเป็นข้อมูลเก่า */
.tgl.unk{background:#e3e7ea!important}.tgl.unk i{transform:translateX(10px)!important;background:#f4f6f7}
.sjvstale{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sjvor);margin-bottom:4px}.sjvstale svg{width:14px;height:14px}
.sjvcam:has(.sjvlive.off) .sjvcnt{opacity:.75}

:root{--sjvor:#c8650f}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sjvor:#f29a4a}}:root[data-theme="dark"]{--sjvor:#f29a4a}

/* v8.33 แผงสิทธิ์ทีมงาน */
.pmx{padding:16px 18px}.pmxh{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.pmxh p{margin:4px 0 0}
.pml{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:99px;line-height:1.6}.pml.v{background:color-mix(in srgb,var(--line) 70%,transparent);color:var(--mute)}.pml.u{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.pmseg{flex:none}
.pmsum{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 12px;font-size:13px;color:var(--mute)}.pmsum b{color:var(--fg);font-size:15px}
.pmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.pmc{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;align-content:start;background:var(--panel)}
.pmc>.row{flex-wrap:nowrap}.pmc>.row .btn{flex:none;min-height:32px;padding:4px 12px}
.pmc b{font-size:14px}.pmc .grow>small{display:block;font-size:12px;color:var(--mute);line-height:1.45;margin-top:2px}
.pmw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pmp{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:2px 8px 2px 2px;border-radius:99px;background:color-mix(in srgb,var(--ok) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--ok) 25%,transparent)}
.pmp .stav{flex:none}.pmai{font-style:normal;font-size:11px;color:#7c4dbb;margin-left:2px}
.pmc>.pml.v{justify-self:start}
.pmpl .li small{display:block;font-size:12px;color:var(--mute)}
.pmown{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.pmown summary{cursor:pointer;font-weight:600}.pmown ul{margin:8px 0;padding-left:18px;line-height:1.7}
.pmlist{display:grid;gap:4px}.pmrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.pmrow:last-child{border-bottom:0}
.pmlv{flex:none}.pmlv button.on.u{background:var(--ok);color:#fff}
/* v8.33 ปุ่มข้อความถึงเจ้าหน้าที่ มุมขวาบนการ์ดผู้ใช้ */
.hero.compact>.row{position:relative}
.hmsg{flex:0 0 auto;display:grid;justify-items:center;gap:1px;margin-left:12px;padding:6px 8px;border-radius:12px;color:#fff;text-decoration:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);min-width:52px}
.hmsg svg{width:20px;height:20px}.hmsg span{font-size:11px;opacity:.95}.hmsg:hover{background:rgba(255,255,255,.26)}
/* v8.33 หน้าตรวจ QR สรุปผล */
.pfwrap{max-width:520px;margin:16px auto;padding:0 12px}.pfcard{padding:18px;border-top:4px solid var(--ok)}.pfcard.bad{border-top-color:var(--bad)}
.pfh{display:flex;gap:10px;align-items:center;margin-bottom:12px}.pfh small{display:block}.pflogo{width:40px;height:40px;border-radius:10px}
.pfok,.pfno{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 10%,transparent);margin-bottom:12px}.pfno{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pfok svg,.pfno svg{width:22px;height:22px;flex:none;color:var(--ok)}.pfno svg{color:var(--bad)}.pfok small,.pfno small{display:block;color:var(--mute);font-size:12.5px}
.pfwho{display:flex;gap:12px;align-items:center}.pfwho b{font-size:18px}.pfwho small{display:block;color:var(--mute)}.pfper{margin:8px 0 10px}.pfk .kpi{margin:0}
/* v8.33 โปรไฟล์ทีมงาน: ประสบการณ์ ภาพ ไฟล์ โปรเจกต์ */
.pe .pe-row.pe-x{grid-template-columns:1.1fr 1.1fr .8fr 1.6fr auto}.pe .pe-row.pj-m{grid-template-columns:2fr 1fr 1fr 2fr auto}.pe .pe-row.pj-d{grid-template-columns:2fr 1.2fr .7fr auto}
@media (max-width:640px){.pe .pe-row.pe-x,.pe .pe-row.pj-m,.pe .pe-row.pj-d{grid-template-columns:1fr auto}.pe .pe-row.pj-m>:not(:first-child):not(button),.pe .pe-row.pj-d>input:not(:first-child){grid-column:1}}
.pegal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pegi{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}.pegi img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.pegi input{width:100%;border:0;border-top:1px solid var(--line);border-radius:0;font-size:12.5px;padding:6px 8px;min-height:0}
.pegi .btn{position:absolute;top:4px;right:4px;min-height:26px;width:26px;padding:0;background:rgba(255,255,255,.92)}
.pegadd{display:grid;place-items:center;aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;color:var(--mute);font-weight:600}.pegadd:hover{border-color:var(--sea);color:var(--sea)}
.pefl{display:grid;gap:6px}.pefi{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px}.pefi svg{width:18px;height:18px;flex:none;color:var(--sea)}.pefi .btn{min-height:28px;width:28px;padding:0;flex:none}
.pefadd{justify-self:start;cursor:pointer}
.stgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.stgi{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--panel2)}.stgi img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.stgi span{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font-size:11.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:left}
.stfl{display:grid;gap:6px}.stfi{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer}.stfi:hover{border-color:var(--sea)}.stfi svg{width:18px;height:18px;flex:none;color:var(--sea)}.stfi b{font-size:12.5px;color:var(--sea);flex:none}
.stpg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.stpc{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,transform .2s}.stpc:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.stpc img,.stpc0{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.stpc0{background:linear-gradient(135deg,color-mix(in srgb,var(--sea) 30%,var(--panel)),color-mix(in srgb,var(--sea2,#14a3a1) 25%,var(--panel)))}
.stpb{padding:10px 12px 12px;display:grid;gap:4px;justify-items:start}.stpb b{font-size:14.5px}.stpb small{font-size:12px;color:var(--mute);line-height:1.45}.stpb .bar.sm{width:100%;margin-top:4px}
.stpadd{display:grid;place-items:center;min-height:140px;border:1.5px dashed var(--line);border-radius:12px;background:none;color:var(--mute);font:inherit;font-weight:600;cursor:pointer}.stpadd:hover{border-color:var(--sea);color:var(--sea)}
.pjcover img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:14px 14px 0 0}
.pjtl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}.pjtl li{display:grid;grid-template-columns:22px 1fr;gap:10px;position:relative;padding-bottom:12px}
.pjtl li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}.pjtl li:last-child::before{display:none}
.pjtl i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--panel);box-sizing:border-box}.pjtl li.m-doing i{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 20%,var(--panel))}.pjtl li.m-done i{border-color:var(--ok);background:var(--ok)}
.pjtl b{font-size:14px}.pjtl small{display:block;color:var(--mute);font-size:12px}.pjtl p{margin:4px 0 0;font-size:13px}
.pjcv{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pjcv img{width:64px;height:40px;object-fit:cover;border-radius:6px}.pjcv .btn{cursor:pointer}
.zbar{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:8px;color:#fff}
/* v8.34 สิทธิ์ไม่ตรงกับผังรับผิดชอบ */
.pmmis{margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--sjvor,#c8650f) 40%,var(--line));background:color-mix(in srgb,var(--sjvor,#c8650f) 7%,var(--panel));display:grid;gap:4px}
.pmmis>b{display:flex;align-items:center;gap:6px;color:var(--sjvor,#c8650f)}.pmmis>b svg{width:16px;height:16px}.pmmis .li small{display:block;font-size:12px;color:var(--mute)}
.pmok{margin:10px 0 0;color:var(--ok)}
.me3 .card.meprof,.card.meprof{display:block!important}.meprof>.row{flex-wrap:wrap}.meprof .stpg{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* v8.35 คู่มือ 4 ส่วน: ตัวละครพิกเซล + บอลลูนคำพูด */
.pg{padding:14px 16px;margin:0 0 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--sea) 7%,var(--panel)),var(--panel) 60%)}
.pgh{display:flex;gap:16px;align-items:center}
.pgchar{flex:none;display:grid;justify-items:center;gap:2px}.pgchar small{font-size:11.5px;color:var(--mute);font-weight:600}
.pxc{image-rendering:pixelated;animation:pxbob 1.6s steps(2,end) infinite;filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--fg) 12%,transparent))}
@keyframes pxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.pxc{animation:none}}
.pgbub{position:relative;flex:1;min-width:0;background:var(--panel);border:2px solid var(--fg);border-radius:4px;padding:10px 14px;box-shadow:4px 4px 0 color-mix(in srgb,var(--sea) 35%,transparent)}
.pgbub::before{content:"";position:absolute;left:-12px;top:50%;margin-top:-8px;border:8px solid transparent;border-right:12px solid var(--fg);border-left:0}
.pgbub::after{content:"";position:absolute;left:-8px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:9px solid var(--panel);border-left:0}
.pgbub b{display:block;font-size:14.5px;color:var(--sea);margin-bottom:2px}.pgbub p{margin:0;font-size:14px;line-height:1.6}
.pgd{margin-top:10px}.pgd>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;list-style:none}.pgd>summary::-webkit-details-marker{display:none}
.pgd>summary span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel)}.pgd[open]>summary span{border-color:var(--sea);color:var(--sea)}
.pgd h3{font-size:14px;margin:12px 0 6px}
.pgg{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:760px){.pgg{grid-template-columns:1fr}.pgh{flex-direction:column;align-items:stretch}.pgchar{justify-self:center}.pgbub::before,.pgbub::after{display:none}}
.pgr{display:grid;gap:6px}.pgr>div{padding:8px 10px;border-radius:10px;background:var(--panel2,color-mix(in srgb,var(--line) 25%,transparent))}.pgr b{font-size:13.5px}.pgr small{display:block;font-size:12.5px;color:var(--mute);line-height:1.5}
.pgt{display:grid;gap:6px}.pgtl{position:relative;display:block;padding:8px 26px 8px 10px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none;background:var(--panel)}a.pgtl:hover{border-color:var(--sea)}.pgtl b{font-size:13.5px}.pgtl small{display:block;font-size:12.5px;color:var(--mute)}.pgtl i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--sea);font-weight:700}
.pgcat{display:grid;gap:6px;margin-bottom:10px}.pgcat .eyebrow{margin-top:2px}
.pgo{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.pgo b{font-size:13.5px}.pgo small{display:block;font-size:12.5px;color:var(--mute);line-height:1.5}.pgo .tag{flex:none}
.pgsrc{display:flex!important;flex-wrap:wrap;gap:4px 10px;margin-top:2px}.pgsrc a{font-size:12px}
.pgsel{display:flex;gap:8px;flex-wrap:wrap}.pgsel label{display:grid;justify-items:center;gap:2px;padding:6px 10px;border:2px solid var(--line);border-radius:10px;cursor:pointer}.pgsel label.on{border-color:var(--sea);background:color-mix(in srgb,var(--sea) 8%,var(--panel))}.pgsel small{font-size:11.5px}
.pe .pe-row.pg-r{grid-template-columns:1fr 2.4fr auto}.pe .pe-row.pg-t{grid-template-columns:1fr 1.8fr 1.2fr auto}
@media (max-width:640px){.pe .pe-row.pg-r,.pe .pe-row.pg-t{grid-template-columns:1fr auto}.pe .pe-row.pg-t>input:not(:first-child),.pe .pe-row.pg-r>input:not(:first-child){grid-column:1}}
.pgo>.grow{flex:1 1 auto;min-width:0}.pg .row>.btn{flex:0 0 auto}
/* v8.38 หมวดขยะ 3 ระดับ · ตรวจคุณภาพอัตโนมัติ · เมนูที่ทีมเห็น · โมเดลจำแนกขยะ */
.l1bar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px;margin:6px 0 4px;background:var(--line)}.l1bar.big{height:14px}
.l1bar i{width:var(--w);background:var(--c)}
.l1lg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--mute)}.l1lg span{display:inline-flex;align-items:center;gap:5px}.l1lg i{width:10px;height:10px;border-radius:3px;background:var(--c)}.l1lg b{color:var(--ink)}
.l1t{display:inline-block;font-style:normal;font-size:12px;padding:1px 8px;border-radius:99px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);white-space:nowrap}
.taxl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0}.taxl p{margin:6px 0}
.taxt input,.taxt select{min-width:110px}
.qcc summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.qcc summary::-webkit-details-marker{display:none}
.qcd{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}.qcd.w{background:#e08a1e}
.qcc .list{margin-top:8px}
.tmb .tmg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 16px;margin:10px 0}.tmb .check{margin:4px 0}
.mlsteps{padding-left:20px;margin:8px 0}.mlsteps li{margin:3px 0}
.mlgate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.mlgate span{background:var(--soft,#eef4fb);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}.mlgate small{color:var(--mute);font-size:12px}.mlgate b{font-size:20px}
.mlgate .ok b{color:var(--ok)}.mlgate .warn b{color:#c06b00}
.mlcls{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mlcls span{border:1px solid var(--line);border-radius:8px;padding:3px 8px}
@media (max-width:700px){.taxl,.mlgate{grid-template-columns:1fr}}
#mlyaml,#mlcsv,#mlgate,#mladd,.mlbt,#tadd,#tcsv,#tdef,#tsave,.tmb .btn{flex:0 0 auto}
/* v8.39 ตัวละครพิกเซลตกแต่ง */
.pxc{display:block;image-rendering:pixelated}
.pxparade{display:flex;justify-content:center;gap:10px;margin:18px 0 4px;min-height:46px;align-items:flex-end;border-bottom:3px solid color-mix(in srgb,var(--sea,#14a3a1) 35%,transparent);padding-bottom:2px}
.pxparade span{animation:pxhop 1.6s steps(2,end) infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes pxhop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pxh{display:flex;align-items:flex-end;gap:8px}
.pxpet{display:inline-block;flex:none;animation:pxhop 1.4s steps(2,end) infinite;pointer-events:none}
.nopx .pxparade,.nopx .pxpet{display:none}
@media (prefers-reduced-motion:reduce){.pxparade span,.pxpet,.ovpx .pxc{animation:none}}
.pxduo{display:flex;justify-content:center;gap:14px;margin:6px 0 2px}.pxduo .pxc{animation:pxhop 1.6s steps(2,end) infinite}.pxduo .pxc+.pxc{animation-delay:.4s}
.pxboot{display:flex;justify-content:center;margin-bottom:6px}.pxboot .pxc{animation:pxhop .9s steps(2,end) infinite}
.nopx .pxduo{display:none}
/* v8.42 หลังบ้าน: ตัวละครอยู่เฉพาะกรอบทักทาย */
.ovpx{display:flex;gap:6px;margin-top:12px;align-items:flex-end}
.ovpx .pxc{animation:pxhop 1.6s steps(2,end) infinite;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.ovpx .pxc:nth-child(2n){animation-delay:.3s}.ovpx .pxc:nth-child(3n){animation-delay:.6s}
.nopx .ovpx{display:none}
/* v8.43 สนามเล่นของน้องๆ ในกรอบทักทาย */
.ovpx.pxplay{position:relative;display:block;margin-top:8px;width:100%;max-width:600px;touch-action:pan-y;cursor:default;user-select:none}
.ovpx.pxplay::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.pxk{position:absolute;left:0;bottom:3px;will-change:transform}
.pxk .pxb{will-change:transform}
.pxk .pxc{animation:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2));transform-origin:50% 100%}
.pxk.walk .pxc{animation:pxw .36s steps(2,end) infinite}
.pxk.run .pxc{animation:pxw .2s steps(2,end) infinite}
.pxk.jump .pxc{animation:pxj .7s cubic-bezier(.3,.7,.4,1) 1}
.pxk.sit .pxc{transform:scaleY(.86)}
.pxk.sleep .pxc{animation:pxbr 2.4s ease-in-out infinite}
.pxk.dance .pxc{animation:pxd .5s steps(2,end) infinite}
.pxk.dig .pxc,.pxk.trash .pxc{animation:pxdg .24s steps(2,end) infinite;transform-origin:50% 100%}
.pxk.spout .pxc{animation:pxw .9s steps(2,end) infinite}
.pxk.greet .pxc,.pxk.love .pxc{animation:pxl .42s steps(2,end) infinite}
.pxk.scared .pxc{animation:pxs .12s steps(2,end) infinite}
.pxk.look .pxc{animation:pxbr 3s ease-in-out infinite}
@keyframes pxw{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pxj{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.85)}50%{transform:translateY(-16px) scaleY(1.05)}85%{transform:translateY(0) scaleY(.9)}}
@keyframes pxbr{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
@keyframes pxd{0%{transform:rotate(-8deg) translateY(-1px)}100%{transform:rotate(8deg) translateY(-1px)}}
@keyframes pxdg{0%{transform:translateX(-1px) rotate(-4deg)}100%{transform:translateX(1px) rotate(4deg)}}
@keyframes pxl{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.06)}}
@keyframes pxs{0%{transform:translate(-1px,-3px)}100%{transform:translate(1px,-3px)}}
.pxi{position:absolute;bottom:38px;transform:translateX(-50%);pointer-events:none;animation:pxi 1.3s ease-out forwards;line-height:0;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
@keyframes pxi{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-22px) scale(1)}}
/* v8.44 กิจกรรมเพื่อสิ่งแวดล้อม: ถังแยก 4 สี ขยะ ต้นไม้ */
.pxbins{position:absolute;right:0;bottom:3px;display:flex;gap:1px;align-items:flex-end;line-height:0}
.pxbins span{display:inline-block;transition:transform .15s}.pxbins span.pop{transform:translateY(-2px)}
.pxcnt{position:absolute;right:0;bottom:-15px;white-space:nowrap;font-size:10.5px;line-height:1;color:rgba(255,255,255,.75)}
.pxj,.pxpl{position:absolute;left:0;bottom:3px;line-height:0;pointer-events:none}
.pxpl{transition:opacity .8s}.pxpl.bye{opacity:0}
.pxcar{position:absolute;left:50%;top:-12px;transform:translateX(-50%);line-height:0;pointer-events:none}
/* v8.45 กรอบทักทาย: โทนเดียวกับแถบหัวระบบ (สว่างขึ้น) + พื้นสว่างจางตรงทางเดินน้องๆ */
.ovpx.pxplay{background:linear-gradient(0deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 70%,rgba(255,255,255,0));border-radius:10px}
.ovpx.pxplay::after{background:rgba(255,255,255,.28)}
.pxcnt{color:rgba(255,255,255,.9);text-shadow:0 1px 1px rgba(0,0,0,.25)}