/* ═══════════════════════════════════════════════════════════════════
   ร้านของฉัน (business.html) — ชุดหน้าตาใหม่ SO-165 · 11 ต.ค. 2569
   ต่อยอดจากหน้าเดิม (สำรองไว้ที่ business-v2.html) — ไฟล์นี้โหลดหลังสไตล์ในหน้า
   จึงปรับหน้าตาได้โดยไม่ต้องรื้อโครงเดิม · ทุก id/class ที่สคริปต์ใช้ยังอยู่ครบ
   ระบบสีคอมเมิร์ท: ม่วง #5B3FC4 · ทองใช้กับตัวเลขเงินเท่านั้น · ไอคอน 3 มิติ /app/assets/icons3d/
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --cq-p:#5B3FC4; --cq-p-d:#4A30AE; --cq-gold:#F2B705;
  --cq-ink:#1D1A2B; --cq-t2:#4A4660; --cq-t3:#6B6680;
  --cq-bg:#F7F6FB; --cq-line:#E6E2F0; --cq-soft:#F4F1FD;
  --cq-sh:0 1px 2px rgba(29,26,43,.04), 0 8px 24px rgba(52,34,120,.07);
  --cq-sh-h:0 14px 32px rgba(52,34,120,.14);
}
body[data-page="shop"]{background:var(--cq-bg)}
img.i3d{display:inline-block;object-fit:contain;flex:none;vertical-align:middle;filter:drop-shadow(0 2px 3px rgba(40,20,90,.10))}

/* ----- โครงหน้า: กางเต็มจอบนคอม (เท่าหัวเว็บ) ----- */
.erp{max-width:var(--maxw,1200px);gap:16px}
@media(min-width:1024px){ .erp{grid-template-columns:256px minmax(0,1fr);gap:24px;padding-top:24px} }

/* ----- หัวร้าน: แถบสว่าง ไม่ซ้อนสีม่วงเข้มกับแดชบอร์ด ----- */
.erp .e-hero{background:linear-gradient(120deg,#FFFFFF 0%,#F7F4FE 55%,#EEE8FD 100%);color:var(--cq-ink);
  border:1px solid var(--cq-line);box-shadow:var(--cq-sh);border-radius:24px;padding:20px 24px}
.erp .e-hero:after{background:radial-gradient(circle,rgba(91,63,196,.10),transparent 65%)}
.erp .e-hero .eyebrow{color:var(--cq-p);opacity:1;font-size:13px;letter-spacing:.12em;font-weight:600}
.erp .e-hero h1{color:var(--cq-ink);font-size:clamp(22px,2.4vw,28px);margin:4px 0}
.erp .e-hero p{color:var(--cq-t2);font-size:14px;opacity:1}
.erp .e-hero .row{margin-top:16px}
.erp .e-hero input{border:1px solid var(--cq-line);background:#fff;min-height:44px;box-sizing:border-box}
.erp .e-hero input:focus{outline:none;border-color:var(--cq-p);box-shadow:0 0 0 3px rgba(91,63,196,.15)}
.erp .e-hero .hbtn{min-height:44px;box-sizing:border-box;background:#fff;color:var(--cq-p);border:1.5px solid var(--cq-p)}
.erp .e-hero .hbtn:hover{background:var(--cq-soft)}
.erp .e-hero .hbtn.ghost{background:#fff;color:var(--cq-t2);border:1px solid var(--cq-line)}
.erp .e-hero .sync{background:#fff;border:1px solid var(--cq-line);color:var(--cq-t2);min-height:32px;box-sizing:border-box}
.erp .e-hero .eh-ic{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:112px;height:112px;pointer-events:none;z-index:0}
@media(min-width:760px){ .erp .e-hero{padding-right:168px} }
@media(max-width:759px){ .erp .e-hero .eh-ic{display:none} }

/* ----- เมนูโมดูล: ไอคอน 3 มิติ · จัดกลุ่ม · รายการที่เปิดอยู่เป็นแคปซูลม่วง ----- */
.e-nav{background:var(--cq-bg)}
.e-nav button{min-height:44px;box-sizing:border-box;gap:8px;font:600 14px var(--font-b);color:var(--cq-t2);border-color:var(--cq-line)}
.e-nav button .i3d{width:22px;height:22px}
.e-nav button.on{background:var(--cq-p);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(91,63,196,.28)}
.e-nav .sep span{display:none}
@media(min-width:1024px){
  .e-nav{padding:12px;gap:2px;background:#fff;border:1px solid var(--cq-line);border-radius:16px;box-shadow:var(--cq-sh)}
  .e-nav button{padding:8px 12px;border-radius:12px;font-size:14px;color:var(--cq-t2);text-align:left;line-height:1.3}
  .e-nav button .i3d{width:24px;height:24px}
  .e-nav button:hover{background:var(--cq-soft);color:var(--cq-p)}
  .e-nav button.on,.e-nav button.on:hover{background:var(--cq-p);color:#fff}
  .e-nav button.on .i3d{filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
  .e-nav .sep{height:auto;background:none;margin:8px 4px 4px;padding-top:12px;border-top:1px solid var(--cq-line)}
  .e-nav .sep span{display:block;font:600 13px var(--font-d);color:var(--cq-t3);padding:0 8px 4px}
}

/* ----- หัวข้อของทุกหน้า: ไอคอน 3 มิติในกรอบนุ่ม ----- */
.sec-h .sec-t{display:flex;align-items:center;gap:12px;min-width:0}
.sec-h .sec-t > .i3d{width:48px;height:48px;padding:6px;box-sizing:border-box;background:#fff;border:1px solid var(--cq-line);border-radius:14px;box-shadow:var(--cq-sh)}
.sec-h .eb{font-size:13px;letter-spacing:.08em;color:var(--cq-p)}
.sec-h h2{font-size:clamp(22px,2.2vw,28px);color:var(--cq-ink)}
.sec-h .acts .b{min-height:44px}

/* ----- การ์ด · ตัวเลข ----- */
.erp .card{border-radius:16px;border-color:var(--cq-line);box-shadow:var(--cq-sh);padding:20px}
.erp .card h3{font-size:18px;color:var(--cq-ink)}
.erp .card h3.h3i{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.erp .card h3.h3i .i3d{width:32px;height:32px}
.erp .card .sub{font-size:13px;color:var(--cq-t3);margin:-4px 0 12px;line-height:1.55}
.erp .kpi{border-radius:16px;border-color:var(--cq-line);box-shadow:var(--cq-sh);padding:16px}
.erp .kpi .lb{font-size:13px;color:var(--cq-t2);gap:8px;font-weight:600}
.erp .kpi .lb .i3d{width:32px;height:32px;padding:4px;box-sizing:border-box;background:var(--cq-soft);border-radius:10px}
.erp .kpi .v{font-size:clamp(22px,2vw,24px);color:var(--cq-ink);margin-top:8px}
.erp .kpi .d{font-size:13px;color:var(--cq-t3);margin-top:2px}
.erp .kpi.warn{background:#FFF9E8;border-color:#F3DE9C}
.erp .kpi.hl .lb .i3d{background:rgba(255,255,255,.2)}
.erp .kpi[data-go]:hover{box-shadow:var(--cq-sh-h)}
.empty .i3d{display:block;width:56px;height:56px;margin:0 auto 8px}

/* ----- แดชบอร์ดร้าน (หน้าภาพรวม) ----- */
.dash{position:relative;overflow:hidden;border-radius:24px;padding:24px;margin-bottom:16px;color:#fff;
  background:radial-gradient(110% 140% at 100% 0%,rgba(140,110,240,.55) 0%,rgba(140,110,240,0) 55%),linear-gradient(135deg,#5B3FC4 0%,#3D2894 100%);
  box-shadow:0 16px 40px rgba(61,40,148,.26)}
.dash-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.dash-eb{font:500 13px var(--font-b);color:rgba(255,255,255,.82)}
.dash-name{font:600 clamp(22px,2.4vw,28px)/1.2 var(--font-d);margin:4px 0 0;color:#fff;overflow-wrap:anywhere}
.dash-acts{display:flex;gap:8px;flex-wrap:wrap}
.dash .b{min-height:44px;box-sizing:border-box}
.dash .dash-sell{background:#fff;color:var(--cq-p);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.dash .dash-sell:hover{transform:translateY(-2px)}
.dash .dash-ghost,.dash [data-ถาม]{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.34)}
.dash .dash-ghost:hover,.dash [data-ถาม]:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.5)}
.dash-stats{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:20px}
.dash-money,.dash-mini{border-radius:16px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.dash-money{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);padding:16px 20px}
.dash-money .lb{font-size:14px;color:rgba(255,255,255,.88);font-weight:600}
.dash-money .big{font:600 40px/1.15 var(--font-d);color:var(--cq-gold);margin-top:4px;overflow-wrap:anywhere}
.dash-money .d{font-size:13px;color:rgba(255,255,255,.78);margin-top:2px}
.dash-mini{display:flex;align-items:center;gap:12px;background:#fff;color:var(--cq-ink);padding:16px;min-width:0}
.dash-mini .i3d{width:44px;height:44px}
.dash-mini .n{font:600 24px/1.1 var(--font-d);color:var(--cq-ink)}
.dash-mini .t{font-size:13px;color:var(--cq-t2);margin-top:2px}
.dash-mini.hot .n{color:#C2410C}
.dash-money:hover,.dash-mini:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
@media(max-width:719px){
  .dash{padding:20px 16px}
  .dash-stats{grid-template-columns:1fr 1fr}
  .dash-money{grid-column:1/-1}
  .dash-mini{padding:12px}
  .dash-mini .i3d{width:36px;height:36px}
}

/* ----- ปุ่มทางลัดใหญ่ (แบบหน้าหลักร้านค้าของแอปส่งอาหาร) ----- */
.atiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.atile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 8px;
  background:#fff;border:1px solid var(--cq-line);border-radius:16px;box-shadow:var(--cq-sh);cursor:pointer;
  text-decoration:none;color:var(--cq-ink);font:inherit;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.atile:hover{transform:translateY(-3px);box-shadow:var(--cq-sh-h);border-color:#D6CCF5}
.atile:focus-visible,.bk:focus-visible,.qnav button:focus-visible{outline:3px solid rgba(91,63,196,.35);outline-offset:2px}
.atile .ac{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none}
.atile .ac .i3d{width:40px;height:40px}
.atile .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.atile b{font:600 14px/1.3 var(--font-d);color:var(--cq-ink)}
.atile small{font-size:13px;line-height:1.4;color:var(--cq-t3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.atile .cnt{position:absolute;top:8px;right:8px;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:12px;
  background:#E5484D;color:#fff;font:600 13px/24px var(--font-b);font-style:normal;text-align:center}
@media(max-width:419px){ .atile small{display:none} .atile{padding:16px 4px} }
@media(min-width:720px){
  .atiles{gap:16px}
  .atile{flex-direction:row;text-align:left;align-items:center;padding:16px;gap:16px}
  .atile .ac{width:64px;height:64px}
  .atile .ac .i3d{width:44px;height:44px}
  .atile b{font-size:16px}
}

/* ตัวเลขรอง (ใต้ทางลัด) — เรียงพอดีทุกจอ ไม่มีช่องโหว่ */
.kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kgrid > .kpi:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:720px){
  .kgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .kgrid > .kpi{grid-column:span 2}
  .kgrid > .kpi:nth-child(n+4){grid-column:span 3}
}
@media(min-width:1180px){
  .kgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kgrid > .kpi,.kgrid > .kpi:nth-child(n+4),.kgrid > .kpi:last-child:nth-child(odd){grid-column:auto}
}

/* ----- เลือกประเภทกิจการ: การ์ดไอคอน 3 มิติ ----- */
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media(min-width:720px){ .bk-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bk{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px;min-width:0;
  border:1.5px solid var(--cq-line);border-radius:16px;background:#fff;cursor:pointer;font:inherit;color:var(--cq-ink);
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.bk:hover{border-color:#CFC3F3;transform:translateY(-2px);box-shadow:var(--cq-sh)}
.bk-ic{width:56px;height:56px;border-radius:16px;background:var(--cq-soft);display:grid;place-items:center;margin-bottom:6px}
.bk-ic .i3d{width:40px;height:40px}
.bk-t{font:600 16px/1.3 var(--font-d);color:var(--cq-ink)}
.bk-d{font-size:13px;line-height:1.45;color:var(--cq-t2)}
.bk-m{font-size:13px;line-height:1.45;color:var(--cq-t3);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk.on{border-color:var(--cq-p);background:linear-gradient(180deg,#F4F1FD 0%,#FFFFFF 100%);box-shadow:0 0 0 3px rgba(91,63,196,.14)}
.bk.on .bk-ic{background:#fff}
.bk-ck{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--cq-p);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(91,63,196,.35)}
.bk-ck svg{width:16px;height:16px}
@media(max-width:419px){ .bk{padding:12px} .bk-m{display:none} }

/* ----- ไปหน้าไหนก็ได้ กดเดียวถึง ----- */
.qnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
@media(min-width:720px){ .qnav{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1180px){ .qnav{grid-template-columns:repeat(4,minmax(0,1fr))} }
.qnav button{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;min-width:0;border:1px solid var(--cq-line);background:#fff;
  border-radius:12px;font:600 14px/1.3 var(--font-b);color:var(--cq-ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.qnav button:hover{border-color:var(--cq-p);background:var(--cq-soft);color:var(--cq-p)}
.qnav button .i3d{width:28px;height:28px}
.qnav button span{overflow:hidden;text-overflow:ellipsis}