/* ===================== Theme tokens =====================
   ค่าสีจริงถูก inject จาก DB ที่ <style>:root{} ใน head (ดู theme_style())
   ที่เหลือคำนวณจาก 6 สี → เปลี่ยนสีที่หลังบ้านแล้วมีผลทั้งเว็บ */
:root{
  --primary:#ef4444;--bg:#0b0b0f;--surface:#ffffff;--pv-surface:#ffffff;--text:#f3f4f6;--muted:#9ca3af;
  --card:color-mix(in srgb,var(--surface) 6%,transparent);
  --card-hi:color-mix(in srgb,var(--surface) 10%,transparent);
  --line:color-mix(in srgb,var(--text) 12%,transparent);
  --panel:color-mix(in srgb,var(--bg) 90%,var(--text));
  --field:color-mix(in srgb,var(--bg) 55%,#000);
  --soft:color-mix(in srgb,var(--primary) 16%,transparent);
  --glow:color-mix(in srgb,var(--primary) 18%,transparent);
  --r:10px;--font:'LINE Seed Sans TH','Prompt',system-ui,sans-serif
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:var(--font);line-height:1.55;
  background:var(--bg)}
/* พื้นหลังลายเส้นตารางจางๆ (เฉพาะหน้าร้าน: <body class="bg-grid">) — ไม่มีแสงสีตามมุม มีแค่สีพื้นของโหมดมืด/สว่าง + เส้น
   ปรับความเข้มที่ --grid-line · ปรับขนาดช่องที่ background-size */
:root{--grid-line:color-mix(in srgb,var(--primary) 14%,transparent)}
html[data-theme="light"]{--grid-line:color-mix(in srgb,var(--primary) 10%,transparent)}
body.bg-grid::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3{margin:.2em 0;font-weight:700}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 14px}main.wrap{padding-top:16px;padding-bottom:36px;min-height:70vh}
.muted{color:var(--muted)}.right{text-align:right}.mt{margin-top:14px}
svg.ic{width:1em;height:1em;max-width:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===================== nav ===================== */
.nav{position:sticky;top:0;z-index:50;width:100%;margin:0 auto;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid transparent;border-bottom-color:var(--line);
  transition:width .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),border-radius .45s,box-shadow .45s,background .45s,border-color .45s}
/* เลื่อนลง → Navbar หดเป็นแท็บลอย (pill) */
.nav.scrolled{top:9px;width:min(1080px,calc(100% - 18px));border-radius:12px;border-color:var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent)}
.nav-in{display:flex;align-items:center;gap:16px;height:56px;transition:padding .45s}
.nav.scrolled .nav-in{padding:0 14px;gap:12px}
/* ชื่อร้าน: ซ่อนตอนอยู่บนสุด (เหลือแต่โลโก้) แล้วค่อยเลื่อนออกมาตอน scroll; ถ้าไม่มีโลโก้จะแสดงชื่อเสมอ */
.brand .bname{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .35s .08s}
.nav.scrolled .brand .bname,.brand.nologo .bname{max-width:216px;opacity:1}
@media(max-width:560px){.nav.scrolled .brand .bname,.brand.nologo .bname{max-width:99px}}
.nav-r{display:flex;align-items:center;gap:9px;margin-left:auto}
.pointpill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:0.828rem;white-space:nowrap;transition:border-color .2s}
.pointpill:hover{border-color:var(--primary)}.pointpill .ic{color:var(--primary)}.pointpill b{font-weight:700}.pointpill span{color:var(--primary);font-weight:700}
.avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--soft);color:var(--primary);font-weight:800;flex:none}.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.ring{width:34px;height:34px;border:2px solid var(--primary);box-shadow:0 0 14px var(--glow)}
.avatar.lg{width:50px;height:50px;font-size:1.17rem;border:2px solid var(--primary);box-shadow:0 0 20px var(--glow)}
.dd{position:relative}.dd summary{list-style:none;cursor:pointer;display:block;border-radius:50%}.dd summary::-webkit-details-marker{display:none}
.dd-menu{position:absolute;right:0;top:calc(100% + 13px);z-index:60;width:min(230px,calc(100vw - 22px));padding:7px;display:grid;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(-5px) scale(.98)}}
.pm-head{display:flex;align-items:center;gap:11px;padding:4px 4px 9px}.pm-head b{display:block;font-size:0.99rem;line-height:1.2}
.role{display:inline-block;margin-top:3px;padding:1px 9px;font-size:0.594rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;color:var(--muted);background:var(--card)}
.pm-bal{display:flex;align-items:center;gap:11px;padding:11px;margin-bottom:5px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.pm-bal>div{flex:1;min-width:0}.pm-bal small{display:block;color:var(--muted);font-size:0.648rem}.pm-bal b{font-size:1.08rem}
.ibox{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--card-hi);border:1px solid var(--line);color:var(--muted);font-size:0.945rem}.pm-bal .ibox{color:var(--primary);background:var(--soft)}
.pm-item{display:flex;align-items:center;gap:11px;width:100%;padding:7px;border-radius:12px;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.pm-item:hover{background:var(--card-hi)}.pm-item:hover .ibox{color:var(--primary)}.pm-item .tx{flex:1;min-width:0}.pm-item .tx b{display:block;font-weight:600;line-height:1.25}.pm-item .tx small{color:var(--muted);font-size:0.702rem}.pm-item>.ic{color:var(--muted)}
.pm-item.out:hover .ibox{color:#f87171}
/* โหมดกะทัดรัด: เมนูโปรไฟล์ไม่ต้องเลื่อน */
.dd-menu .pm-head{gap:9px;padding:2px 4px 7px}.dd-menu .pm-head b{font-size:0.882rem}
.dd-menu .avatar.lg{width:40px;height:40px;font-size:0.99rem}
.dd-menu .ibox{width:29px;height:29px;border-radius:9px;font-size:0.81rem}
.dd-menu .pm-bal{gap:7px;padding:4px 5px 4px 7px;margin-bottom:4px;border-radius:10px}
.dd-menu .pm-bal .ibox{width:22px;height:22px;border-radius:7px;font-size:0.675rem}
.dd-menu .pm-bal>div{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.dd-menu .pm-bal small{display:inline;font-size:0.648rem}.dd-menu .pm-bal b{font-size:0.792rem}
.dd-menu .pm-bal .btn.sm{padding:4px 8px;font-size:0.666rem;gap:4px}.dd-menu .pm-bal .btn .ic{width:11px;height:11px}
.dd-menu .pm-item{gap:9px;padding:4px 5px;border-radius:10px}.dd-menu .pm-item .tx b{font-size:0.81rem}.dd-menu .pm-item .tx small{display:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:0.99rem}.brand img{height:31px;width:auto;border-radius:var(--r)}
.links{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.links a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r);color:var(--muted);white-space:nowrap;transition:color .15s,background .15s}
.links a .ic{width:15px;height:15px;transition:color .15s}
.links a:hover{color:var(--text);background:var(--card)}.links a:hover .ic{color:var(--primary)}
.links a.active{color:var(--text);background:color-mix(in srgb,var(--primary) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)}.links a.active .ic{color:var(--primary)}
/* มือถือ: เมนูหลักย้ายเป็นแถบไอคอนล่างจอ (เดิม .links ถูกซ่อน → เข้าเมนูไม่ได้) */
@media(max-width:760px){
  .links{position:fixed;left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom,0px));z-index:55;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:5px;flex:none;
    background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.55)}
  .links a{flex-direction:column;gap:3px;padding:6px 2px;font-size:0.594rem;line-height:1.15;text-align:center;white-space:normal}
  .links a .ic{width:19px;height:19px}
  /* backdrop-filter บน .nav ทำให้ลูกที่ position:fixed อิงกรอบ .nav แทน viewport → ปิดบนมือถือ */
  .nav,.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 94%,transparent)}
  body{padding-bottom:76px}
}

/* ===================== ui พื้นฐาน (Glassmorphism) ===================== */
.card,.glass{background:var(--card);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent)}
.card{padding:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 16px;border:0;border-radius:var(--r);background:var(--primary);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-align:center;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}.btn.sm{padding:5px 13px;font-size:0.81rem}.btn.block{display:flex;width:100%;margin:7px 0}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--text);font-weight:500}.btn.ghost:hover{background:var(--card-hi)}
.btn.danger{background:#b91c1c}.btn.gray{background:#374151}
input,select,textarea{width:100%;padding:9px 11px;background:var(--field);border:1px solid var(--line);border-radius:var(--r);color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--soft);border-color:var(--primary)}
input[type=checkbox],input[type=radio]{width:auto}
label{display:block;font-size:0.81rem;color:var(--muted);margin:9px 0 4px}label.inline{display:inline-flex;gap:5px;align-items:center;margin:5px 13px 5px 0;color:var(--text)}
.alert{padding:9px 13px;border-radius:var(--r);margin-bottom:11px;border:1px solid}.alert.ok{background:rgba(34,197,94,.12);border-color:#22c55e}.alert.err{background:rgba(239,68,68,.12);border-color:#ef4444}
.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(144px,1fr))}.grid.c2{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(189px,1fr))}.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
table{width:100%;border-collapse:collapse;font-size:0.828rem}th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-weight:500}
.tbl{overflow-x:auto}.pager{display:flex;gap:5px;margin:14px 0;flex-wrap:wrap}.pager a{padding:4px 11px;border:1px solid var(--line);border-radius:var(--r)}.pager a.on{background:var(--primary);color:#fff}
.tag{padding:2px 8px;border-radius:99px;font-size:0.702rem;background:var(--card);border:1px solid var(--line)}.tag.ok{border-color:#22c55e;color:#4ade80}.tag.err{border-color:#ef4444;color:#f87171}.tag.wait{border-color:#eab308;color:#facc15}
.modal{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:18px;max-width:378px;width:92%}.modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}.tabs a{padding:6px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}.tabs a.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ===================== หัวข้อ section ===================== */
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:25px 0 11px}
.sec-head h2{font-size:1.035rem;margin:0}.sec-head small{display:block;font-size:0.612rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.sec-head .btn{white-space:nowrap}

/* ===================== หน้าแรก ===================== */
/* แถบประกาศ: ป้าย "ประกาศ" + ข้อความวิ่ง */
.notice{--nc:var(--primary);display:flex;align-items:center;gap:9px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
/* ป้าย "ประกาศ": กล่องมืดโทนเขียว + ขอบ/ตัวอักษร/ไอคอนสีเขียวเรืองแสง (ปรับสีที่ --nc จุดเดียว) */
.notice .nlabel{display:inline-flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 16px 0 13px;border-radius:12px;color:color-mix(in srgb,var(--nc) 75%,#fff);font-size:0.882rem;white-space:nowrap;
  background:color-mix(in srgb,var(--nc) 14%,#050807);border:1.5px solid var(--nc);box-shadow:0 0 14px color-mix(in srgb,var(--nc) 35%,transparent),inset 0 0 12px color-mix(in srgb,var(--nc) 12%,transparent)}
.notice .nlabel .ic{width:18px;height:18px;fill:none;transform-origin:30% 70%;animation:nwiggle 3.2s ease-in-out infinite}
.notice .nlabel .ic path:first-child{fill:currentColor}
.notice .nlabel b{font-weight:800;letter-spacing:.02em;text-shadow:0 0 10px color-mix(in srgb,var(--nc) 60%,transparent)}
@keyframes nwiggle{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-14deg)}90%{transform:rotate(10deg)}94%{transform:rotate(-6deg)}}
@media(max-width:420px){.notice .nlabel{padding:0 11px 0 9px;gap:5px;font-size:0.792rem}}
/* พื้นที่ข้อความวิ่ง: จางที่ขอบด้วยระยะคงที่ (เดิมใช้ % → บนจอคอมกว้างจนตัวหนังสือหายก่อนถึงขอบ/ดูกินขอบกล่อง) */
/* padding บน/ล่าง 3px + margin ลบชดเชย: ความสูงแถบเท่าเดิม แต่ขอบบน/ล่างของชิปไม่ชิดขอบที่ overflow/mask ตัด (เดิมสูง 44px เท่าชิปพอดี ขอบ 1px แถวบนโดนตัดหาย) */
.notice .nrun{flex:1;min-width:0;overflow:hidden;border-radius:10px;padding:3px 2px 3px 0;margin:-3px 0;mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.notice .track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden}
.notice .track.run{animation:mq-loop var(--mq-t,20s) linear infinite}
/* ข้อความประกาศแต่ละอัน = ชิปมีกรอบ/พื้นสีของธีม */
.nchip{flex:none;display:inline-flex;align-items:center;height:40px;margin-right:11px;padding:0 16px;border-radius:12px;white-space:nowrap;font-size:0.855rem;font-weight:700;line-height:1.3;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);border:1px solid color-mix(in srgb,var(--primary) 28%,transparent)}
/* สไลด์หลัก */
.slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r);border:1px solid var(--line)}.slider::-webkit-scrollbar{display:none}
.slider a,.slider div{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1200/500;background:var(--field)}.slider img{width:100%;height:100%;object-fit:cover}
/* สถิติ: มือถือ 2 คอลัมน์ / จอ ≥640px 4 คอลัมน์ */
/* ปุ่มทางลัด: รูป 4 ช่อง */
.shortcuts{display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:11px}
.shortcuts a{position:relative;aspect-ratio:2/1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--field);transition:transform .2s,border-color .2s}
.shortcuts a:hover{transform:translateY(-2px);border-color:var(--primary)}.shortcuts img{width:100%;height:100%;object-fit:cover}
@media(min-width:640px){.shortcuts{gap:13px;grid-template-columns:repeat(4,minmax(0,1fr))}}
/* รายการสั่งซื้อล่าสุด */
.recent-box{padding:11px;overflow:hidden;min-height:83px;display:flex;align-items:center;backdrop-filter:none;-webkit-backdrop-filter:none}.recent-box .empty{width:100%;text-align:center;color:var(--muted);font-size:0.765rem}
.recent-run{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.recent-box .track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden}
.recent-box .track.run{animation:mq-loop var(--mq-t,40s) linear infinite}
/* .recent-box:hover .track.run{animation-play-state:paused} */
@keyframes mq-loop{to{transform:translate3d(calc(-1 * var(--mq-w)),0,0)}}
@media(max-width:640px){.recent-run{mask-image:none;-webkit-mask-image:none}}
@media(prefers-reduced-motion:reduce){.track.run,.notice .nlabel .ic{animation:none}}
.ritem{display:flex;flex:none;margin-right:11px;gap:9px;align-items:center;min-width:225px;padding:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}.ritem img{width:40px;height:40px;object-fit:cover;border-radius:8px}.ritem .muted{font-size:0.72rem}
/* ป๊อปอัป: แสดงทีละภาพ — รูปอยู่บน (การ์ดกระจก) / แถบปุ่ม (ช่องติ๊ก "ไม่ต้องแสดงอีก" + ปิด) แยกอยู่ด้านนอกภาพ */
.popup{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.popup.on{display:flex;animation:popup-bg .25s ease-out}
.popup-box{width:min(414px,100%);max-height:100%;display:flex;flex-direction:column;gap:9px}
.popup-imgs{min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 60px var(--glow)}
.popup-imgs a{display:block;aspect-ratio:1/1;cursor:default}.popup-imgs a[hidden]{display:none}   /* display:block ข้าง ๆ ทับ [hidden] จึงต้องกำหนดซ้ำ ไม่งั้นภาพอื่นโผล่ซ้อนด้านล่าง */
.popup-imgs a[href]{cursor:pointer}.popup-imgs a:not([hidden]){animation:popup-in .32s cubic-bezier(.2,.9,.3,1.1)}
.popup-imgs img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.popup-foot{display:flex;align-items:center;justify-content:space-between;gap:7px}
.popup-skip{position:relative;display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:8px 13px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);font-size:0.81rem;line-height:1.25;cursor:pointer;user-select:none;transition:border-color .2s}
.popup-skip:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line))}
.popup-skip input{position:absolute;opacity:0;width:0;height:0}
.popup-chk{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);transition:background .2s,border-color .2s}
.popup-chk::after{content:"";width:4px;height:9px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s}
.popup-skip input:checked+.popup-chk{background:var(--primary);border-color:var(--primary)}.popup-skip input:checked+.popup-chk::after{transform:rotate(45deg) scale(1)}
.popup-skip input:focus-visible+.popup-chk{outline:2px solid var(--primary);outline-offset:2px}
.popup-close{appearance:none;-webkit-appearance:none;flex:none;width:72px;min-width:72px;height:38px;min-height:38px;padding:0 11px;border:1px solid var(--line)!important;border-radius:7px;background:rgba(0,0,0,.18)!important;color:var(--text)!important;font:inherit;font-size:0.765rem;font-weight:600;line-height:1;cursor:pointer;outline:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent;transition:none!important}
.popup .popup-foot .popup-close:hover,.popup .popup-foot .popup-close:active,.popup .popup-foot .popup-close:focus,.popup .popup-foot .popup-close:focus-visible{border:1px solid var(--line)!important;outline:0!important;box-shadow:none!important;background:rgba(0,0,0,.18)!important;color:var(--text)!important;filter:none!important;transform:none!important}
@keyframes popup-bg{from{opacity:0}}@keyframes popup-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@media(max-width:420px){.popup-foot{flex-direction:column}.popup-close{min-height:38px}}
@media(prefers-reduced-motion:reduce){.popup.on,.popup-imgs a{animation:none!important}}

/* การ์ดหมวดหมู่ (รูปแบนเนอร์ + ปุ่มดูเพิ่มเติมมุมขวาล่าง) */
.ccard{padding:7px;display:block;position:relative;overflow:hidden;transition:border-color .2s}.ccard:hover{border-color:var(--primary)}
.cthumb{aspect-ratio:1640/450;background:var(--field);border-radius:8px;overflow:hidden}.cthumb img{width:100%;height:100%;object-fit:cover}
.ccard .cbody{padding:9px 4px 2px;min-height:43px}.ccard h3{font-size:0.855rem;margin:0}.ccard .muted{font-size:0.675rem;margin:0}
.ccard .btn{position:absolute;right:11px;bottom:11px}
/* ===================== หน้า "หมวดหมู่ทั้งหมด" — มือถือ 1 คอลัมน์ / ≥640px 2 คอลัมน์ ===================== */
.crumbs svg.ic{vertical-align:-2px}.crumbs a,.crumbs b{display:inline-flex;align-items:center;gap:5px}.crumbs a .ic,.crumbs b .ic{width:14px;height:14px;opacity:1}
.cat-head{margin:7px 0 16px}.cat-head small{display:block;font-size:0.855rem;font-weight:600;color:var(--primary);opacity:.85}
.cat-head h1{margin:2px 0 0;font-size:clamp(1.17rem,3.6vw,1.575rem);line-height:1.35}
.cat-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.cat-grid{gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}}
.cat-tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:11px;background:color-mix(in srgb,var(--bg) 86%,var(--surface));transition:border-color .2s,transform .2s}
.cat-tile:hover{border-color:color-mix(in srgb,var(--primary) 55%,transparent);transform:translateY(-2px)}
.cat-banner{display:block;aspect-ratio:1640/450;overflow:hidden;border-radius:10px;background:var(--field)}
.cat-banner img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.cat-tile:hover .cat-banner img{transform:scale(1.03)}
.cat-info{padding:0 4px;min-height:47px;padding-right:99px}.cat-info h3{margin:0;font-size:1.035rem;line-height:1.35;overflow-wrap:anywhere}.cat-info .muted{margin:2px 0 0;font-size:0.81rem}
.cat-btn{position:absolute;right:11px;bottom:11px}
@media(prefers-reduced-motion:reduce){.cat-tile,.cat-banner img{transition:none}.cat-tile:hover{transform:none}}
/* การ์ดสินค้า (รูปอยู่ในกรอบ) */
.pcard{padding:9px;overflow:hidden;display:flex;flex-direction:column;gap:9px;transition:transform .2s,border-color .2s}.pcard:hover{transform:translateY(-3px);border-color:var(--primary)}
.pframe{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:var(--field);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.pframe::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pframe img,.big img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.pcard:hover .pframe img{transform:scale(1.04)}
.pbody{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding:0 2px}
.pbody h3{font-size:0.855rem;margin:0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{color:var(--primary);font-weight:700}.price s{color:var(--muted);font-weight:400;margin-left:5px;font-size:.85em}
.pfoot .btn{width:100%;margin:0 0 7px;padding:10px 16px}
.stock{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:8px;font-size:0.702rem;color:var(--muted)}.stock .ic{width:14px;height:14px}.stock.out{color:#f87171}
.btn.off{filter:grayscale(1) brightness(.75);pointer-events:none;cursor:not-allowed}
.pcard.soldout .pframe img{filter:grayscale(.85) brightness(.6)}
.thumb{position:relative;aspect-ratio:1/1;background:var(--field);display:block}.thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:7px;left:7px;padding:2px 9px;font-size:0.666rem;border-radius:99px;background:rgba(0,0,0,.6);border:1px solid var(--line);color:#fff}.badge.out{background:#7f1d1d}
/* สินค้าโปรโมชั่น */
/* โปรโมชั่น: ไม่ไฮไลต์ตอนปกติ (ใช้ป้าย .sale-badge บอกแทน) — ขึ้นขอบ/เรืองแสงเฉพาะตอน hover/focus */
.pcard.promo:hover,.pcard.promo:focus-within{border-color:color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--primary) 16%,transparent)}
/* ป้ายสินค้าลดราคา: ทรงเฉียง (parallelogram) ตามภาพตัวอย่าง — เอียงที่กล่อง แล้วดึงเนื้อหาข้างในกลับให้ตรง · ไล่สีจากสีหลัก + ไอคอนไฟ + ชิป % + แสงวิ่งผ่าน + ประกายมุมล่าง (ปิดแอนิเมชันเมื่อ reduced-motion) */
.pcard.promo{position:relative;overflow:visible}  /* ให้ป้ายคร่อมขอบการ์ดได้ (รูปสินค้ายังถูกตัดโดย .pframe เอง) — ห้ามลบ ไม่งั้นป้ายโดนตัดครึ่ง */
.sale-badge{--sk:-12deg;position:absolute;top:-10px;right:13px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 13px;border-radius:8px;font-size:0.666rem;line-height:1.2;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);transform:skewX(var(--sk));
  border:1px solid color-mix(in srgb,#fff 38%,transparent);
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) 200% 0/250% 100% no-repeat,
             linear-gradient(135deg,color-mix(in srgb,var(--primary) 72%,#fff),var(--primary) 48%,color-mix(in srgb,var(--primary) 68%,#000));
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.45);animation:sale-shine 3.6s ease-in-out infinite}
.sale-badge>*{transform:skewX(calc(var(--sk) * -1))}
.sale-badge b{font-weight:800;letter-spacing:.2px}
.sale-badge .ic{width:13px;height:13px;fill:currentColor;filter:drop-shadow(0 0 4px rgba(255,255,255,.7))}
.sale-badge i{font-style:normal;font-weight:900;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.96);color:var(--primary);text-shadow:none}
.sale-badge::after{content:"";position:absolute;right:22%;bottom:-7px;width:12px;height:12px;background:linear-gradient(135deg,#ffd6ea,#ff8fc2);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:sale-twinkle 2.2s ease-in-out infinite}
@keyframes sale-shine{0%,55%{background-position:200% 0,0 0}100%{background-position:-100% 0,0 0}}
@keyframes sale-twinkle{0%,100%{transform:skewX(12deg) scale(.6) rotate(0);opacity:.7}50%{transform:skewX(12deg) scale(1.1) rotate(25deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.sale-badge,.sale-badge::after{animation:none}}
.promo-head h2{display:flex;align-items:center;gap:7px}.promo-head h2 .ic{color:var(--primary)}

/* ===================== product detail ===================== */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:2px 0 13px;font-size:0.72rem;color:var(--muted)}
.crumbs a:hover{color:var(--text)}.crumbs b{font-weight:500;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumbs .ic{width:11px;height:11px;opacity:.6}
.pd{display:grid;gap:25px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}@media(max-width:820px){.pd{grid-template-columns:1fr;gap:16px}}
.pd-img{position:sticky;top:76px;aspect-ratio:1/1;overflow:hidden;border-radius:14px;background:var(--field);border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--primary) 22%,transparent),0 10px 30px rgba(0,0,0,.4)}
@media(max-width:820px){.pd-img{position:static}}
.pd-img img{width:100%;height:100%;object-fit:cover}
.pd-info h1{margin:0 0 9px;font-size:clamp(1.125rem,3.4vw,1.53rem);line-height:1.35;overflow-wrap:anywhere}
.pd-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.ptag{padding:3px 9px;border-radius:6px;font-size:0.666rem;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.ptag.red{color:#f87171;border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.1)}.ptag.ok{color:#4ade80;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.1)}.ptag.out{color:#f87171;border-color:rgba(239,68,68,.4)}
.pd-label{display:flex;align-items:center;gap:6px;margin:13px 0 7px;font-size:0.756rem;font-weight:600;color:var(--text)}
.pd-label i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary)}.pd-label.muted-l{color:var(--muted);font-weight:400;font-size:0.702rem;margin:14px 0 2px}
.pd-opt{display:flex;align-items:center;justify-content:space-between;gap:11px;padding:11px 13px;border-radius:12px;border:1.5px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--primary) 18%,transparent)}
.pd-opt .o-main{min-width:0}.pd-opt b{display:block;font-size:0.828rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-opt small{color:var(--muted);font-size:0.666rem}
.pd-opt .o-price{flex:none;font-weight:800;color:var(--primary)}
/* ตัวเลือกสินค้าแบบเลือกได้ (radio ซ่อน — ใช้ทั้งเมาส์/คีย์บอร์ด) */
.pd-opts{display:grid;gap:7px}
.pd-opt.sel{position:relative;cursor:pointer;border-color:var(--line);background:var(--card);box-shadow:none;transition:border-color .15s,background .15s,box-shadow .15s}
.pd-opt.sel:hover{border-color:color-mix(in srgb,var(--primary) 55%,var(--line))}
.pd-opt.sel input{position:absolute;opacity:0;pointer-events:none}
.pd-opt.sel:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--primary) 18%,transparent)}
.pd-opt.sel:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.pd-opt.sel.out{opacity:.5;cursor:not-allowed}
.price .from,.pcard .price small.from{font-size:.72em;font-weight:500;color:var(--muted)}
.pd-price{font-size:clamp(1.53rem,5vw,1.98rem);font-weight:800;color:var(--primary);line-height:1.15}.pd-price small{font-size:0.81rem;font-weight:600}.pd-price s{margin-left:9px;font-size:0.81rem;font-weight:400;color:var(--muted)}
.pd-row{display:flex;align-items:center;gap:11px;margin-top:13px;flex-wrap:wrap}.pd-row.col{flex-direction:column;align-items:stretch;gap:5px}
.pd-row label{margin:0;font-size:0.756rem;min-width:47px}.pd-row.col label{min-width:0}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--field)}
.stepper button{display:grid;place-items:center;width:34px;height:36px;border:0;background:var(--card);color:var(--text);cursor:pointer;font-size:0.9rem;transition:background .15s}.stepper button:hover{background:var(--card-hi);color:var(--primary)}
.stepper input{width:50px;height:36px;padding:0;border:0;border-radius:0;text-align:center;font-weight:700;background:transparent;-moz-appearance:textfield}.stepper input:focus{outline:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.code-row{display:flex;gap:7px}.code-row input{flex:1;min-width:0}.code-row .btn{flex:none;padding:9px 16px;color:var(--primary);border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.code-msg{min-height:1.2em;font-size:0.72rem}.code-msg.ok{color:#4ade80}.code-msg.err{color:#f87171}
.pd-buy{display:flex;width:100%;margin-top:14px;padding:13px 16px;font-size:0.945rem;border-radius:12px;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 30%,transparent)}.pd-buy .ic{width:16px;height:16px}
.pd-buy.gray{box-shadow:none}.pd-bal{margin:7px 0 0;font-size:0.738rem;text-align:center}.pd-bal b{color:var(--text)}
/* กล่องรายละเอียด: ย่อได้ + ปุ่ม "ดูเพิ่มเติม" */
.pd-desc{position:relative;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.d-head{display:flex;align-items:center;gap:7px;padding:11px 14px;font-weight:700;font-size:0.828rem;border-bottom:1px solid var(--line)}.d-head .ic{width:16px;height:16px;color:#4ade80}
.d-body{max-height:126px;overflow:hidden;padding:13px 14px;font-size:0.774rem;line-height:1.8;color:var(--muted);overflow-wrap:anywhere;transition:max-height .3s ease}
.pd-desc.open .d-body{max-height:1800px}
.d-more{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:9px;border:0;border-top:1px solid var(--line);background:linear-gradient(transparent,var(--card));color:var(--muted);font:inherit;font-size:0.72rem;cursor:pointer}.d-more:hover{color:var(--text)}.d-more .ic{transition:transform .2s}.pd-desc.open .d-more .ic{transform:rotate(180deg)}
.delivery{white-space:pre-wrap;word-break:break-all;background:var(--field);padding:7px 9px;border-radius:var(--r);margin:4px 0;font-family:ui-monospace,Consolas,monospace}
/* ===================== footer ===================== */
.footer{border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,#000);padding:25px 0 16px;margin-top:36px}
.foot-top{display:grid;grid-template-columns:1fr auto auto;gap:22px 50px;align-items:start}
.foot-name{display:flex;align-items:center;gap:11px;font-size:0.99rem;font-weight:700}.foot-name img{width:31px;height:31px;border-radius:50%;object-fit:cover}
.foot-desc{margin:13px 0 0;color:var(--muted);font-size:0.765rem;line-height:1.7;max-width:468px}
.foot-ct{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.foot-ct .btn{font-weight:500;font-size:0.765rem}.foot-ct .btn .ic{width:14px;height:14px}
.foot-col{display:flex;flex-direction:column;gap:11px;min-width:117px}.foot-col h4{margin:0 0 2px;font-size:0.81rem;font-weight:700}
.foot-col a{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:0.765rem}.foot-col a:hover{color:var(--text)}.foot-col .ic{width:14px;height:14px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px 18px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:0.738rem}
.foot-bot i{font-style:normal;margin:0 5px;opacity:.6}.foot-bot b{color:var(--primary);font-weight:500}
.foot-r{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.foot-report{color:var(--primary)}.foot-report:hover{text-decoration:underline}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}.foot-bot{flex-direction:column;align-items:flex-start}}

/* ===================== admin ===================== */
.stats{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));margin-top:14px}.stat{text-align:center}.stat b{display:block;font-size:1.44rem;color:var(--primary)}
/* ----- Admin layout: topbar + เมนูบน (.anav ใน admin-ui.css) ----- */
.adm-wrap{max-width:1296px}
.adm{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.adm-main{min-width:0}

/* Topbar: โลโก้ซ้าย — ผู้ใช้/ปุ่มขวา */
.abar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.abar-in{display:flex;align-items:center;gap:11px;max-width:1296px;height:58px;margin:0 auto;padding:0 14px}
.abar-logo{display:flex;align-items:center;height:36px;border-radius:var(--r)}
.abar-logo img{height:34px;width:auto;border-radius:var(--r)}
.abar-fallback{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;font-size:0.99rem;color:var(--primary);background:var(--soft);border:1px solid var(--line)}
.abar-r{display:flex;align-items:center;gap:9px;margin-left:auto}.abar-r form{margin:0}
.abar-user{display:flex;align-items:center;gap:9px;padding-right:5px}
.abar-user .who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.abar-user .who b{max-width:144px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.855rem}
.abar-user .role{margin-top:2px;padding:0 8px;font-size:0.558rem}
.abar .btn.sm{height:34px;padding:0 13px;white-space:nowrap}.abar .btn .ic{width:14px;height:14px}


@media(max-width:900px){
  .abar-user .who{display:none}.abar .btn .lb{display:none}.abar .btn.sm{width:34px;padding:0}
}
.form-grid{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(198px,1fr))}.row-actions{display:flex;gap:5px;flex-wrap:wrap}.row-actions form{display:inline}
.bars{display:flex;align-items:flex-end;gap:5px;height:135px}.bars div{flex:1;background:var(--primary);min-height:2px;border-radius:3px 3px 0 0;position:relative}.bars small{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:0.585rem;color:var(--muted)}
.thumb-sm{width:81px;height:40px;object-fit:cover;border-radius:4px;background:var(--field)}

/* ===================== Color picker (หลังบ้าน > ตั้งค่าธีม) ===================== */
.cp-grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}
.cp{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cp .swatch{position:relative;flex:none;width:49px;height:49px;border-radius:12px;border:2px solid var(--line);overflow:hidden;cursor:pointer;background:var(--cp,#000);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cp .swatch input{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);padding:0;border:0;opacity:0;cursor:pointer}
.cp .meta{flex:1;min-width:0}.cp .meta b{display:block;font-size:0.81rem}.cp .meta input{margin-top:4px;padding:4px 7px;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
.cp .meta input.bad{border-color:#ef4444}
.theme-preview{margin-top:14px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--pv-bg)}
.theme-preview .pv-card{padding:13px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--pv-text) 12%,transparent);background:color-mix(in srgb,var(--pv-surface) 6%,transparent)}
.theme-preview h4{margin:0 0 4px;color:var(--pv-text)}.theme-preview p{margin:0 0 9px;color:var(--pv-muted)}
.theme-preview .pv-btn{display:inline-block;padding:7px 14px;border-radius:var(--r);color:#fff;font-weight:700;background:var(--pv-primary)}
.theme-preview .pv-price{margin-left:11px;font-weight:700;color:var(--pv-primary)}
input[type=color]{padding:2px;height:36px;min-width:43px;cursor:pointer;background:var(--field)}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}input[type=color]::-moz-color-swatch{border:0;border-radius:6px}
/* ===================== 404 ===================== */
.nf{display:flex;flex-direction:column;align-items:center;text-align:center;padding:58px 0 43px}
.nf-code{font-size:clamp(4.5rem,22vw,8.1rem);font-weight:800;line-height:1;color:var(--primary);filter:drop-shadow(0 0 28px var(--glow))}
.nf h1{margin:13px 0 0;font-size:clamp(1.035rem,3.2vw,1.35rem)}.nf p{margin:7px 0 0;color:var(--muted)}
.nf-btns{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:23px}.nf-btns .btn{padding:9px 18px}
.d-more[hidden]{display:none}
/* ===================== ประวัติทั้งหมด (purchases/) — ใช้สีจากธีมทั้งหมด ===================== */
.ph{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.ph h1{margin:0;font-size:clamp(1.17rem,3.4vw,1.44rem)}.ph p{margin:2px 0 0;font-size:0.792rem}
.ph-ico{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;font-size:1.17rem;color:var(--primary);background:var(--soft);border:1px solid color-mix(in srgb,var(--primary) 60%,transparent);box-shadow:0 0 18px var(--glow)}
.hsearch{position:relative;margin-bottom:14px}.hsearch .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;width:16px;height:16px}
.hsearch input{padding:11px 13px 11px 40px;border-radius:12px;background:var(--card)}
.hrow{display:flex;align-items:center;gap:14px;margin-bottom:11px;padding:13px 14px;transition:border-color .2s}.hrow:hover{border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.hthumb{display:grid;place-items:center;flex:none;width:61px;height:61px;overflow:hidden;border-radius:12px;font-size:1.44rem;color:var(--primary);background:var(--soft);border:1px solid var(--line)}
.hthumb img{width:100%;height:100%;object-fit:cover}.hthumb.sm{width:50px;height:50px;font-size:1.17rem}
.hbody{flex:1;min-width:0}.hbody h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin:0;font-size:0.9rem;line-height:1.4;overflow-wrap:anywhere}
.hbody h3 .muted{font-size:0.72rem;font-weight:400}
.hmeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin:4px 0 0;font-size:0.756rem;color:var(--muted)}.hmeta i{font-style:normal;opacity:.6}.hmeta .ic{color:var(--primary);width:13px;height:13px}
.ref{font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.hright{display:flex;align-items:center;gap:18px;flex:none}
.hprice{text-align:right}.hprice small{display:block;font-size:0.648rem;color:var(--muted)}.hprice b{font-size:1.035rem;color:var(--primary);white-space:nowrap}
.hright .btn.ghost{font-weight:700;white-space:nowrap}.hright .btn .ic{width:13px;height:13px}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font-size:0.648rem;font-weight:600;color:var(--primary);background:var(--soft);border:1px solid color-mix(in srgb,var(--primary) 55%,transparent)}
.st{font-size:0.72rem;font-weight:700;color:var(--primary)}.st.wait{color:#facc15}.st.err{color:#f87171}
.hempty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:40px 14px;text-align:center;color:var(--muted)}.hempty .ic{width:31px;height:31px;color:var(--primary);opacity:.7}.hempty p{margin:0}
@media(max-width:640px){
  .hrow{flex-wrap:wrap;gap:11px}.hthumb{width:50px;height:50px}
  .hright{width:100%;justify-content:space-between;padding-top:11px;border-top:1px solid var(--line)}
  .hprice{text-align:left}
}
/* ป๊อปอัปดูคีย์ */
.ord-modal{max-width:396px;width:calc(100% - 25px);padding:0;overflow:visible;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--primary) 18%,transparent)}
.ord-modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.om-in{padding:14px 15px 15px}
.om-head{display:flex;align-items:center;justify-content:space-between;gap:9px;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid color-mix(in srgb,var(--primary) 35%,transparent)}
.om-head b{display:flex;align-items:center;gap:9px;min-width:0;font-size:0.9rem;overflow-wrap:anywhere}.om-logo{height:25px;width:auto;flex:none;border-radius:6px}
.om-x{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:50%;border:1px solid var(--line);background:var(--card-hi);color:var(--text);cursor:pointer;transition:border-color .15s,color .15s}.om-x:hover{border-color:var(--primary);color:var(--primary)}.om-x .ic{width:13px;height:13px}
.om-prod{display:flex;align-items:center;gap:9px;padding:9px;margin-bottom:11px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.om-prod>div{min-width:0}.om-prod b{display:block;line-height:1.35;overflow-wrap:anywhere}.om-prod small{display:block;color:var(--muted);font-size:0.72rem}
.om-label{margin:13px 0 7px;font-size:0.756rem;font-weight:600;color:var(--muted)}
.om-keys{display:grid;gap:7px}
.keybox{position:relative;display:flex;align-items:flex-start;gap:7px;margin:0;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--text);cursor:pointer;transition:border-color .15s}
.keybox:has(input:checked){border-color:var(--primary);background:var(--soft)}
.keybox input,.selall input{flex:none;width:16px;height:16px;margin:2px 0 0;padding:0;accent-color:var(--primary);cursor:pointer}
.selall{display:flex;align-items:center;gap:7px;margin:11px 0 0;font-size:0.792rem;color:var(--text);cursor:pointer}
.selall input{margin:0}
.om-all:disabled{opacity:.5;cursor:not-allowed}
.ktxt{flex:1;min-width:0;margin:0;font:inherit;font-family:ui-monospace,Consolas,monospace;font-size:0.792rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.kcopy{flex:none;display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}.kcopy:hover,.kcopy.done{color:var(--primary);background:var(--soft)}.kcopy .ic{width:14px;height:14px}
.om-all{margin:11px 0 4px;padding:11px 16px;border-radius:12px;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 28%,transparent)}.om-all .ic{width:14px;height:14px}
.om-sum{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.om-sum div{display:flex;justify-content:space-between;gap:9px;padding:9px 11px;font-size:0.792rem}.om-sum div+div{border-top:1px solid var(--line)}.om-sum span{color:var(--muted)}
.om-total{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:7px;padding:7px 9px;border-radius:10px;font-size:0.81rem;font-weight:700;color:var(--primary);background:var(--soft);border:1px solid color-mix(in srgb,var(--primary) 55%,transparent)}.om-total b{font-size:0.99rem}
/* ===================== Readability patch (แก้พื้นใสจนมองไม่เห็น) =====================
   สาเหตุเดิม: --card = surface(ขาว) 6% โปร่งใส → รูปพื้นหลังทะลุ ตัวหนังสือจม
   วิธีแก้: ใช้ "สีพื้นธีม (--bg)" เป็นฐานกระจกเข้ม + เบลอ/เพิ่มความอิ่มสี + ขอบชัดขึ้น
   ปรับความทึบได้ที่ตัวแปร --glass-a (สูง = ทึบ/อ่านง่าย, ต่ำ = ใสขึ้น) */
:root{
  --glass-a:82%;                       /* ความทึบของกระจก ปรับจุดเดียว */
  --glass-base:color-mix(in srgb,var(--bg) 90%,var(--surface));
  --card:color-mix(in srgb,var(--glass-base) var(--glass-a),transparent);
  --card-hi:color-mix(in srgb,color-mix(in srgb,var(--bg) 78%,var(--surface)) 88%,transparent);
  --line:color-mix(in srgb,var(--text) 18%,transparent);
  --muted-hi:color-mix(in srgb,var(--text) 72%,var(--bg));   /* muted ที่อ่านง่ายบนรูป */
}

/* กระจกทุกชิ้น: เบลอ + saturate ให้ลายรูปหลังไม่รบกวนตัวอักษร */
.card,.glass,.notice,.ritem,.pointpill,.pm-bal,.tabs a,.btn.ghost,.tag,.role{
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
.card,.glass{box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)}

/* Navbar */
.nav{background:color-mix(in srgb,var(--bg) 86%,transparent)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent)}

/* ตัวหนังสือรอง/ป้ายกำกับ: ไม่จางเกินไป + เงาบางๆ แยกจากรูปหลัง */
.card .muted,.card label,.hmeta,.ritem .muted,.recent-box .empty{color:var(--muted-hi)}
.ritem,.cat-head,h1,h2,h3{text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* แถบประกาศ: ชิปทึบขึ้น ตัวอักษรสว่างขึ้น */
.nchip{color:color-mix(in srgb,var(--primary) 65%,#fff);
  background:color-mix(in srgb,var(--primary) 20%,var(--bg));
  border-color:color-mix(in srgb,var(--primary) 45%,transparent)}

/* รายการสั่งซื้อล่าสุด: เอา mask ที่ทำให้ขอบจาง/หายออก + กล่อง/การ์ดทึบขึ้น */
.recent-run{-webkit-mask-image:none;mask-image:none}
.recent-box{background:color-mix(in srgb,var(--bg) 80%,transparent)}   /* กล่องนี้ปิด backdrop-filter ไว้เพื่อ perf เลยใช้พื้นทึบแทน */
.ritem{background:color-mix(in srgb,var(--bg) 88%,var(--surface));border-color:var(--line);text-shadow:none}
.ritem b,.ritem .nm{color:var(--text)}

/* สไลด์/ช็อตคัต: ขอบชัด */
.slider,.shortcuts a{border-color:color-mix(in srgb,var(--text) 22%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ผู้ใช้ที่ปิด/ไม่รองรับ backdrop-filter → ทึบขึ้นอัตโนมัติ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-a:94%}}

/* ===================== Hero ต้อนรับ (หน้าแรก เหนือสไลด์) · ไม่มีพื้นหลัง ===================== */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:clamp(7px,2vw,18px) 0 4px}
.hero h1{margin:0;font-size:clamp(1.395rem,4.6vw,2.34rem);font-weight:800;line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.hero .hl{color:var(--primary);filter:drop-shadow(0 0 18px var(--glow))}
.hero-desc{max-width:558px;margin:13px 0 0;color:var(--text);opacity:.85;font-size:0.855rem;line-height:1.85;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero-btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:23px}
.hero-btns .btn{padding:11px 22px;border-radius:12px;font-size:0.855rem;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 30%,transparent)}
.hero-btns .btn.ghost{box-shadow:none}.hero-btns .btn .ic{width:16px;height:16px}
.hero-logo{width:clamp(99px,18vw,180px);height:auto;max-height:180px;object-fit:contain;filter:drop-shadow(0 0 28px var(--glow))}
@media(max-width:640px){.hero{grid-template-columns:1fr;gap:13px}.hero-logo{order:-1;width:65px;max-height:65px}.hero-btns{gap:7px;margin-top:16px}.hero-btns .btn{flex:0 0 auto;padding:7px 14px;border-radius:10px;font-size:0.738rem;gap:5px}.hero-btns .btn .ic{width:14px;height:14px}}

/* หน้าต่าง "ติดต่อร้านค้า": โลโก้ → ชื่อร้าน → คำบรรยาย → ปุ่มช่องทาง (ขนาดปุ่มเดิม .btn.block) */
.cdlg{position:relative;text-align:center;padding:25px 18px 16px}
.cdlg-x{position:absolute;top:9px;right:9px;display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer}
.cdlg-x:hover{background:var(--card-hi)}.cdlg-x .ic{width:14px;height:14px}
.cdlg-logo{display:block;width:76px;height:76px;margin:0 auto 11px;object-fit:contain;filter:drop-shadow(0 0 18px var(--glow))}
.cdlg-name{margin:0;font-size:1.215rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.cdlg-sub{margin:4px 0 16px;color:var(--muted);font-size:0.81rem}
.cdlg-btn{justify-content:flex-start;gap:9px}.cdlg-btn span{flex:1;text-align:left}.cdlg-btn .ic:last-child{margin-left:auto;opacity:.85}
.cdlg-btn[data-app=discord]{background:#5865f2}

/* หน้าต่างลอยกลางจอ + อนิเมชั่นตอนเปิด/ปิด (ไม่ตั้ง display บน .cdlg เพื่อไม่ให้ทับสถานะปิดของ <dialog>) */
.cdlg{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 29px);overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent)}
.cdlg[open]{animation:cdlg-in .32s cubic-bezier(.2,.9,.3,1.15) both}
.cdlg[open]::backdrop{animation:cdlg-fade .25s ease both}
.cdlg.closing{animation:cdlg-out .18s ease-in both}.cdlg.closing::backdrop{animation:cdlg-fade .18s ease reverse both}
.cdlg[open] .cdlg-logo,.cdlg[open] .cdlg-name,.cdlg[open] .cdlg-sub,.cdlg[open] .cdlg-btn{animation:cdlg-rise .4s ease both}
.cdlg[open] .cdlg-name{animation-delay:.06s}.cdlg[open] .cdlg-sub{animation-delay:.1s}
.cdlg[open] .cdlg-btn:nth-of-type(1){animation-delay:.14s}.cdlg[open] .cdlg-btn:nth-of-type(2){animation-delay:.19s}.cdlg[open] .cdlg-btn:nth-of-type(3){animation-delay:.24s}.cdlg[open] .cdlg-btn:nth-of-type(n+4){animation-delay:.28s}
@keyframes cdlg-in{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes cdlg-out{to{opacity:0;transform:translateY(9px) scale(.95)}}
@keyframes cdlg-fade{from{opacity:0}to{opacity:1}}
@keyframes cdlg-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cdlg,.cdlg[open],.cdlg.closing,.cdlg[open] *,.cdlg[open]::backdrop{animation:none!important}}

/* การ์ดยอดคงเหลือในเมนูโปรไฟล์: แถวบน = ไอคอน + ป้าย + ปุ่มเติมเงิน (ขนาดปุ่มเดิม) · แถวล่าง = ตัวเลขยอดเงิน */
.dd-menu .pm-bal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:5px 7px}
.dd-menu .pm-bal .pm-bal-l{display:block;color:var(--muted);font-size:0.666rem;white-space:nowrap}
.dd-menu .pm-bal .btn.sm{justify-self:end}
.dd-menu .pm-bal .pm-bal-v{grid-column:1/-1;display:flex;align-items:baseline;gap:5px;padding:2px 2px 0;font-size:1.305rem;font-weight:800;line-height:1.15;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.dd-menu .pm-bal .pm-bal-v span{font-size:0.72rem;font-weight:700;color:var(--muted)}

/* กันลากคลุมดำโดยไม่ตั้งใจ: เมนู/ปุ่ม/แถบนำทาง เลือกข้อความไม่ได้ · ระหว่าง skeleton โหลดอยู่ทั้งหน้าเลือกไม่ได้
   (ช่องกรอก/ข้อความเนื้อหา/โค้ดที่ต้องคัดลอก ไม่โดนกระทบ) */
.sk-screen ~ *,.nav,.dd-menu,.pointpill,.btn,button,summary{-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}

/* ===================== สไลด์ + สถิติ (หน้าแรก) · คลาสขึ้นต้น hs- ไม่ชนของเดิม ===================== */
.hs-wrap{display:grid;gap:11px}
.hs-wrap .slider{margin:0;min-width:0}
.hs-stats-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.hs-st{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:5px;padding:11px 13px;border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--bg) 84%,#fff);background:color-mix(in srgb,var(--bg) 93%,#fff);box-shadow:none}
.hs-st-top{position:relative;z-index:1;display:flex;align-items:center;gap:7px;min-width:0}
.hs-st-ico{flex:none;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;font-size:0.72rem;color:var(--primary);
  background:color-mix(in srgb,var(--primary) 18%,var(--bg));border:1px solid color-mix(in srgb,var(--primary) 40%,transparent)}
.hs-st-lb{font-size:0.702rem;color:var(--muted-hi,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-st-vl{position:relative;z-index:1;display:flex;align-items:baseline;gap:4px;font-size:1.215rem;font-weight:800;line-height:1;color:var(--text);min-width:0;overflow-wrap:anywhere}
.hs-st-vl small{font-size:0.648rem;font-weight:400;color:var(--muted-hi,var(--muted));white-space:nowrap}
.hs-st-bg{position:absolute;right:-5px;bottom:-7px;width:58px;height:58px;color:color-mix(in srgb,var(--bg) 80%,#fff);pointer-events:none;transform:rotate(-8deg)}
.hs-st-bg .ic{width:100%;height:100%;stroke-width:1.2}
/* จอกว้าง: สไลด์ซ้าย · สถิติ 4 ใบเรียงขวา สูงเท่าสไลด์พอดี (ให้สไลด์เป็นตัวกำหนดความสูง) */
@media(min-width:1000px){
  .hs-wrap.has-stats{grid-template-columns:minmax(0,1fr) clamp(153px,19%,198px);gap:13px;align-items:start}
  .hs-wrap.has-stats .hs-stats{position:relative;align-self:stretch}
  .hs-wrap.has-stats .hs-stats-in{position:absolute;inset:0;grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:7px}
  .hs-st{padding:7px 11px;gap:2px}.hs-st-vl{font-size:1.08rem}.hs-st-bg{width:50px;height:50px}
}
@media(min-width:640px) and (max-width:999px){.hs-stats-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ไม่มีสไลด์ (.hs-solo): สถิติเป็นแถวเต็มความกว้าง การ์ดใหญ่ขึ้น · ไอคอนจางเต็มดวงอยู่กลางด้านขวา ไม่โดนตัด
   (ต้องใช้ .hs-wrap.hs-solo นำหน้า เพื่อชนะกฎ .hs-st ของโหมดข้างสไลด์ในจอ ≥1000px) */
.hs-wrap.hs-solo .hs-stats-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.hs-wrap.hs-solo .hs-st{gap:14px;min-height:101px;padding:14px 16px;border-radius:calc(var(--r) + 4px);
  background:color-mix(in srgb,var(--bg) 78%,#fff 6%);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  transition:border-color .2s,transform .2s}
.hs-wrap.hs-solo .hs-st:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.hs-wrap.hs-solo .hs-st-top{gap:9px}
.hs-wrap.hs-solo .hs-st-ico{width:31px;height:31px;border-radius:10px;font-size:0.9rem}
.hs-wrap.hs-solo .hs-st-lb{font-size:0.828rem}
.hs-wrap.hs-solo .hs-st-vl{gap:5px;font-size:1.8rem;font-variant-numeric:tabular-nums}
.hs-wrap.hs-solo .hs-st-vl small{font-size:0.765rem}
.hs-wrap.hs-solo .hs-st-bg{right:13px;bottom:auto;top:50%;width:65px;height:65px;transform:translateY(-50%) rotate(-8deg);
  color:color-mix(in srgb,var(--primary) 14%,transparent)}
@media(min-width:640px){.hs-wrap.hs-solo .hs-stats-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:420px){.hs-wrap.hs-solo .hs-st{min-height:86px;padding:13px}.hs-wrap.hs-solo .hs-st-vl{font-size:1.485rem}.hs-wrap.hs-solo .hs-st-bg{width:50px;height:50px;right:9px}}
@media(prefers-reduced-motion:reduce){.hs-wrap.hs-solo .hs-st{transition:none}.hs-wrap.hs-solo .hs-st:hover{transform:none}}

.cat-head .btn{margin-top:9px}

/* ===================== Navbar: ชื่อเว็บยาว / พื้นที่แคบ → เมนูไม่ตกบรรทัด ย่อปุ่มตามพื้นที่จริง =====================
   เดิม .links เป็น flex-wrap:wrap ในแถบสูง 62px → พื้นที่เหลือน้อย (ชื่อยาว) ปุ่มตกลงบรรทัดสองล้นแท็บ
   ตอนนี้: เมนูไม่ตกบรรทัด + วัดความกว้างที่เหลือจริงด้วย container query แล้วย่อเป็นขั้น
   ปกติ → เล็ก → เล็กมาก → ไอคอนล้วน (ชื่อเมนูยังอ่านได้ด้วย screen reader/ tooltip) */
.brand{flex:0 1 auto;min-width:0}                          /* ชื่อเว็บยอมหดก่อนเสมอ (ตัดด้วย … ) ไม่ดันปุ่มจนล้น */
.brand img{flex:none}
.brand .bname{min-width:0}
.nav-r{flex:none}
.nav.scrolled .brand .bname,.brand.nologo .bname{max-width:clamp(86px,12vw,120px)}   /* จอกลางๆ ให้ชื่อกินที่น้อยลง เหลือที่ให้เมนู */
@media(max-width:560px){.nav.scrolled .brand .bname,.brand.nologo .bname{max-width:99px}}

@media(min-width:761px){                                   /* ≤760px เมนูเป็นแท็บล่างจอ (ไม่เกี่ยวกับแถบบน) */
  .links{flex:1 1 0;min-width:0;flex-wrap:nowrap;container:navlinks/inline-size}
  .links a{flex:none}
}
@container navlinks (max-width:620px){                      /* ขั้น 2: ปุ่มเล็กลง */
  .links{gap:2px}
  .links a{gap:4px;padding:6px 8px;font-size:0.828rem}
  .links a .ic{width:14px;height:14px}
}
@container navlinks (max-width:520px){                      /* ขั้น 3: เล็กมาก */
  .links a{gap:4px;padding:5px 6px;font-size:0.756rem}
  .links a .ic{width:14px;height:14px}
}
@container navlinks (max-width:440px){                      /* ขั้น 4: ไอคอนล้วน */
  .links a{position:relative;padding:8px 11px}
  .links a .ic{width:18px;height:18px}
  .links a>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* เบราว์เซอร์เก่าที่ไม่รู้จัก container query → ใช้ไอคอนล้วนช่วงจอแคบ/กลาง กันล้นไว้ก่อน */
@supports not (container-type:inline-size){
  @media(min-width:761px) and (max-width:1100px){
    .links{flex-wrap:nowrap;gap:2px}
    .links a{position:relative;padding:8px 11px}
    .links a .ic{width:18px;height:18px}
    .links a>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }
}


/* ===================== ปุ่มสลับโหมด มืด/สว่าง (Navbar ข้างยอดเงิน) ===================== */
.theme-btn{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:0.99rem;cursor:pointer;
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);transition:border-color .2s,color .2s,transform .2s}
.theme-btn:hover{border-color:var(--primary);color:var(--primary)}.theme-btn:active{transform:scale(.92)}
.theme-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.theme-btn span{display:none;line-height:0}
html:not([data-theme="light"]) .theme-btn .ti-sun,html[data-theme="light"] .theme-btn .ti-moon{display:inline-flex}   /* มืด → แสดงไอคอนดวงอาทิตย์ (กดเพื่อไปสว่าง) · สว่าง → แสดงดวงจันทร์ */

/* ===================== โหมดสว่าง (html[data-theme="light"]) =====================
   --bg/--text/--muted มาจาก theme_style() · ที่นี่ปรับเฉพาะจุดที่ผูกกับความมืดตายตัว (เงา/ขอบดำ/ผสมขาว) */
html[data-theme="light"]{
  --glass-a:88%;
  --field:color-mix(in srgb,var(--bg) 93%,var(--text));
  --panel:color-mix(in srgb,var(--bg) 40%,#fff);
  --line:color-mix(in srgb,var(--text) 16%,transparent);
  --muted-hi:var(--muted);
}
html[data-theme="light"] .card,html[data-theme="light"] .glass{box-shadow:0 6px 20px rgba(20,22,28,.08),inset 0 1px 0 rgba(255,255,255,.8)}
html[data-theme="light"] .nav.scrolled{box-shadow:0 10px 28px rgba(20,22,28,.14),0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent)}
html[data-theme="light"] .dd-menu,html[data-theme="light"] .cdlg,html[data-theme="light"] .ord-modal{box-shadow:0 18px 50px rgba(20,22,28,.2)}
html[data-theme="light"] .ritem,html[data-theme="light"] .cat-head,html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] .hero h1,html[data-theme="light"] .hero-desc,html[data-theme="light"] .ritem .nm{text-shadow:none}
html[data-theme="light"] .hero .hl{filter:none}
html[data-theme="light"] .slider,html[data-theme="light"] .shortcuts a{box-shadow:0 6px 18px rgba(20,22,28,.12)}
html[data-theme="light"] .footer{background:color-mix(in srgb,var(--bg) 92%,var(--text))}
html[data-theme="light"] .notice .nlabel{color:color-mix(in srgb,var(--nc) 70%,#000);background:color-mix(in srgb,var(--nc) 12%,#fff)}
html[data-theme="light"] .nchip{color:color-mix(in srgb,var(--primary) 75%,#000);background:color-mix(in srgb,var(--primary) 12%,#fff)}
html[data-theme="light"] .hs-st{border-color:color-mix(in srgb,var(--bg) 88%,#000);background:color-mix(in srgb,var(--bg) 60%,#fff)}
html[data-theme="light"] .hs-st-bg{color:color-mix(in srgb,var(--bg) 88%,#000)}
html[data-theme="light"] .hs-wrap.hs-solo .hs-st{background:color-mix(in srgb,var(--bg) 60%,#fff)}
html[data-theme="light"] .hs-wrap.hs-solo .hs-st-bg{color:color-mix(in srgb,var(--primary) 12%,transparent)}
html[data-theme="light"] .tag.ok,html[data-theme="light"] .ptag.ok,html[data-theme="light"] .code-msg.ok{color:#15803d}
html[data-theme="light"] .tag.err,html[data-theme="light"] .ptag.red,html[data-theme="light"] .ptag.out,html[data-theme="light"] .stock.out,
html[data-theme="light"] .st.err,html[data-theme="light"] .code-msg.err{color:#b91c1c}
html[data-theme="light"] .st.wait{color:#a16207}
html[data-theme="light"] .btn.gray{background:#64748b}
html[data-theme="light"] .btn.ghost{color:var(--text)}
html[data-theme="light"] .tp-bal{text-shadow:none}
html[data-theme="light"] .adlg-err{color:#b91c1c}
html[data-theme="light"] .btn.btn.ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ===================== อนิเมชันสลับโหมด มืด/สว่าง ===================== */
/* วงกลมขยายจากปุ่ม: ภาพเก่าอยู่ใต้ ภาพใหม่ถูก clip-path วงกลม (ตั้งใน JS: themeSwitch) — ปิดแอนิเมชันเริ่มต้นของเบราว์เซอร์ที่เป็น cross-fade */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
/* เบราว์เซอร์ที่ไม่รองรับ View Transitions: ไล่เฟดสี (เปิดเฉพาะช่วงสลับ จึงไม่กระทบ transition อื่นของเว็บ) */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}
/* ไอคอนดวงอาทิตย์/ดวงจันทร์หมุนเด้งเข้ามา — เล่นเฉพาะตอนกดสลับ (.theme-anim) ไม่เล่นตอนโหลดหน้า */
@keyframes themeIcon{from{transform:rotate(-120deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
html.theme-anim .theme-btn span{animation:themeIcon .55s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.theme-anim .theme-btn span{animation:none}}


/* ===== เมนูโปรไฟล์ (dropdown) แบบการ์ดสะอาด: การ์ดหัว(รูป+ชื่อ+ยอดเงิน) · รายการไอคอน+ชื่อ แบ่งกลุ่มด้วยเส้น · ออกจากระบบสีแดง ===== */
.dd-menu {
    width: min(272px, calc(100vw - 22px));
    padding: 5px;
    gap: 0;
    border-radius: 14px;
}

.dd-menu .pm-card {
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
}

.dd-menu .pm-head {
    gap: 8px;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--line);
}

.dd-menu .pm-head > div {
    min-width: 0;
}

.dd-menu .pm-head b {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dd-menu .avatar.lg {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
}

.dd-menu .pm-head .role {
    display: block;
    margin-top: 1px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--muted);
    font-size: 0.7rem;
}

.dd-menu .pm-bal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin: 6px 0 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    box-shadow: none;
}

.dd-menu .pm-bal > .pm-bal-t {
    display: grid;
    gap: 1px;
    min-width: 0;
    white-space: normal;
}

.dd-menu .pm-bal .pm-bal-l {
    font-size: 0.65rem;
    color: var(--muted);
    white-space: nowrap;
}

.dd-menu .pm-bal .pm-bal-v {
    display: block;
    grid-column: auto;
    padding: 0;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.dd-menu .pm-bal .pm-bal-v span {
    font-size: 0.62rem;
    color: var(--primary);
    opacity: 0.8;
}

.dd-menu .pm-bal .btn.sm {
    flex: none;
    justify-self: auto;
    padding: 4px 8px;
    font-size: 0.65rem;
    gap: 3px;
}

.dd-menu .pm-bal .btn .ic {
    width: 10px;
    height: 10px;
}

.dd-menu .pm-grp {
    display: grid;
    gap: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
}

.dd-menu .pm-grp:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.dd-menu .pm-card + .pm-grp {
    margin-top: 3px;
}

.dd-menu .pm-item {
    gap: 9px;
    padding: 6px 10px;
    border-radius: 8px;
}

.dd-menu .pm-item .tx b {
    font-size: 0.82rem;
    font-weight: 500;
}

.dd-menu .pm-item .ibox {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    color: var(--muted);
}

.dd-menu .pm-item .ibox .ic {
    width: 16px;
    height: 16px;
}

.dd-menu .pm-item > .ic {
    display: none;
}

.dd-menu .pm-item.out,
.dd-menu .pm-item.out .ibox {
    color: #ef4444;
}

.dd-menu .pm-item.out:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dd-menu .pm-item.out:hover .ibox {
    color: #ef4444;
}