/* ===== พื้นฐาน (แพลตฟอร์ม + หลังร้าน) ===== */
:root{
  --primary:#0f766e; --primary-600:#0d9488; --primary-50:#f0fdfa;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --card:#fff;
  --danger:#dc2626; --warn:#d97706; --ok:#16a34a;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Noto Sans Thai','Sarabun',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.stack>*+*{margin-top:16px}
.hide-sm{} @media(max-width:720px){.hide-sm{display:none!important}}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none!important;background:var(--primary);color:#fff;transition:.15s;min-height:44px;white-space:nowrap}
.btn:hover{background:var(--primary-600)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:#f1f5f9}
.btn-ghost{background:transparent;color:var(--muted)} .btn-ghost:hover{background:#f1f5f9}
.btn-danger{background:#fff;color:var(--danger);border-color:#fecaca} .btn-danger:hover{background:#fef2f2}
.btn-ai{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}
.btn-ai:hover{filter:brightness(1.08);background:linear-gradient(135deg,#7c3aed,#db2777)}
.btn-line{background:#06c755;color:#fff} .btn-line:hover{background:#05b04b}
.btn-lg{padding:14px 26px;font-size:1.05rem}
.btn-sm{padding:6px 12px;min-height:34px;font-size:.875rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:wait}

/* ฟอร์ม */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.field .hint{font-size:.82rem;color:var(--muted);margin-top:4px}
.input,select.input,textarea.input{width:100%;padding:11px 14px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:44px}
.input:focus{outline:2px solid var(--primary-50);border-color:var(--primary)}
textarea.input{min-height:120px;resize:vertical}
.input-group{display:flex;align-items:stretch}
.input-group .addon{display:flex;align-items:center;padding:0 12px;background:#f1f5f9;border:1px solid #cbd5e1;color:var(--muted);font-size:.9rem;white-space:nowrap}
.input-group .addon:first-child{border-radius:10px 0 0 10px;border-right:0}
.input-group .addon:last-child{border-radius:0 10px 10px 0;border-left:0}
.input-group .input{border-radius:0}
.input-group .input:first-child{border-radius:10px 0 0 10px}
.input-group .input:last-child{border-radius:0 10px 10px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400!important}
.check input{margin-top:5px;width:18px;height:18px;accent-color:var(--primary)}
.error-text{color:var(--danger);font-size:.85rem;margin-top:4px}

/* การ์ด / แจ้งเตือน */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h2{font-size:1.15rem}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:600;background:#f1f5f9;color:#475569;white-space:nowrap}
.badge-blue{background:#dbeafe;color:#1d4ed8}.badge-amber{background:#fef3c7;color:#b45309}
.badge-violet{background:#ede9fe;color:#6d28d9}.badge-green{background:#dcfce7;color:#15803d}
.badge-gray{background:#f1f5f9;color:#64748b}.badge-red{background:#fee2e2;color:#b91c1c}

/* ===== ส่วนหัวแพลตฟอร์ม ===== */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .container{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--ink)!important;text-decoration:none!important}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0f766e,#14b8a6);color:#fff;display:grid;place-items:center;font-size:1rem}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:500}
.nav a:hover{background:#f1f5f9;color:var(--ink);text-decoration:none}
.footer{border-top:1px solid var(--line);padding:32px 0;margin-top:64px;color:var(--muted);font-size:.9rem;background:#fff}
.footer a{color:var(--muted)}

/* หน้าแรก */
.hero{padding:64px 0 48px;background:radial-gradient(1200px 400px at 80% -10%,#ccfbf1 0,transparent 60%),radial-gradient(900px 400px at 0% 0%,#fef3c7 0,transparent 55%)}
.hero h1{font-size:clamp(1.9rem,4.5vw,3rem);letter-spacing:-.01em}
.hero p.lead{font-size:1.15rem;color:#334155;max-width:620px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
.phone-mock{background:#0f172a;border-radius:34px;padding:12px;max-width:300px;margin:auto;box-shadow:0 30px 60px rgba(15,23,42,.25)}
.phone-mock .screen{background:#fff;border-radius:24px;overflow:hidden}
.pill{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:.85rem;color:#334155}
.section{padding:56px 0}
.section h2{font-size:1.7rem;text-align:center}
.section .sub{text-align:center;color:var(--muted);margin-bottom:32px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.step h3{font-size:1.05rem;margin-top:8px}
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.pricing{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pricing{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--primary);box-shadow:0 12px 30px rgba(15,118,110,.15)}
.plan .price{font-size:2rem;font-weight:700}
.plan .price small{font-size:.9rem;color:var(--muted);font-weight:400}
.plan ul{padding-left:18px;margin:12px 0 20px;flex:1}
.plan li{margin:6px 0}

/* หน้ารวมร้าน */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.shop-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink)!important;text-decoration:none!important;transition:.15s}
.shop-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.shop-card .cover{height:100px;background:var(--c,#0f766e) center/cover}
.shop-card .body{padding:0 16px 16px;margin-top:-28px}
.shop-card .logo{width:56px;height:56px;border-radius:14px;border:3px solid #fff;background:#fff center/cover;display:grid;place-items:center;font-weight:700;font-size:1.3rem;color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:6px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:#334155;font-size:.9rem}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip:hover{text-decoration:none}

/* ===== หน้าล็อกอิน / สมัคร ===== */
.auth-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:32px 16px}
.auth-card{width:100%;max-width:440px}
.auth-card h1{font-size:1.5rem}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:20px 0}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}

/* ===== หลังร้าน ===== */
.dash{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:#0f172a;color:#cbd5e1;padding:20px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .brand{color:#fff!important;padding:0 8px 20px}
.side a.nav-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:#cbd5e1;font-weight:500;margin-bottom:2px}
.side a.nav-item:hover{background:#1e293b;text-decoration:none;color:#fff}
.side a.nav-item.active{background:#134e4a;color:#fff}
.side .ico{width:20px;text-align:center}
.side .shop-box{margin-top:auto;padding:12px;border-radius:12px;background:#1e293b;font-size:.85rem}
.side .shop-box a{color:#5eead4}
.main{padding:24px 28px 100px;min-width:0}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:1.5rem;margin:0}
.mobile-head{display:none}
.bottom-nav{display:none}
@media(max-width:860px){
  .dash{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:16px 16px 96px}
  .mobile-head{display:flex;align-items:center;gap:10px;background:#0f172a;color:#fff;padding:12px 16px;position:sticky;top:0;z-index:20}
  .mobile-head .brand{color:#fff!important;font-size:1rem}
  .bottom-nav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;font-size:.72rem;color:var(--muted)}
  .bottom-nav a .ico{font-size:1.25rem;line-height:1.2}
  .bottom-nav a.active{color:var(--primary);font-weight:600}
  .bottom-nav a:hover{text-decoration:none}
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:960px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat .label{font-size:.85rem;color:var(--muted)}
.stat .value{font-size:1.6rem;font-weight:700}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
table.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:.82rem;padding:12px 14px;background:#f8fafc;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#f1f5f9}
.thumb-ph{width:52px;height:52px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;color:#94a3b8;font-size:1.3rem}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}
.empty .big{font-size:3rem}

/* จัดการรูป */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.img-item{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--line);aspect-ratio:1;background:#f8fafc}
.img-item img{width:100%;height:100%;object-fit:cover}
.img-item.cover{border-color:var(--primary)}
.img-item .tag{position:absolute;top:6px;left:6px;background:var(--primary);color:#fff;font-size:.7rem;padding:1px 8px;border-radius:99px}
.img-item .acts{position:absolute;bottom:0;left:0;right:0;display:flex;gap:4px;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.img-item .acts button{flex:1;font-size:.72rem;padding:4px;border:0;border-radius:6px;background:rgba(255,255,255,.9);cursor:pointer;font-family:inherit}
.dropzone{border:2px dashed #cbd5e1;border-radius:14px;padding:24px;text-align:center;cursor:pointer;background:#f8fafc;transition:.15s;display:block}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-50)}
.dropzone input{display:none}
.ai-box{border:1px solid #e9d5ff;background:linear-gradient(135deg,#faf5ff,#fdf2f8);border-radius:14px;padding:16px;margin-bottom:16px}

/* wizard */
.wizard{max-width:640px;margin:0 auto}
.wsteps{display:flex;gap:8px;margin-bottom:24px}
.wsteps div{flex:1;height:6px;border-radius:99px;background:var(--line)}
.wsteps div.on{background:var(--primary)}
.slug-status{font-size:.85rem;margin-top:4px;min-height:1.3em}
.color-options{display:flex;gap:10px;flex-wrap:wrap}
.color-options label{cursor:pointer}
.color-options input{display:none}
.color-options span{display:block;width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.color-options input:checked+span{box-shadow:0 0 0 3px var(--ink)}
.preview-logo{width:80px;height:80px;border-radius:18px;object-fit:cover;background:#f1f5f9}

.qr-box{display:inline-block;padding:10px;background:#fff;border-radius:12px;border:1px solid var(--line)}
.copy-field{display:flex;gap:8px}
.copy-field .input{font-size:.9rem}
.list-plain{list-style:none;padding:0;margin:0}
.list-plain li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.list-plain li:last-child{border-bottom:0}
.powered{display:inline-flex;gap:6px;align-items:center}

/* ตัวเลือกสินค้า */
button.chip{font:inherit;cursor:pointer}
button.chip:hover{border-color:var(--primary);color:var(--primary)}
.opt-block{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:#f8fafc}
.opt-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.opt-head .input[data-k=name]{flex:2;min-width:180px;font-weight:600}
.opt-head select.input{flex:1;min-width:175px;width:auto}
.opt-head .check{margin:0;white-space:nowrap}
.opt-row{display:grid;grid-template-columns:1fr 120px auto auto;gap:8px;align-items:center;margin-bottom:6px}
.opt-row .input{min-height:38px;padding:7px 10px}
.opt-row .addon{padding:0 8px}
.opt-row.off .input[data-v=label]{text-decoration:line-through;color:var(--muted)}
.opt-row .check{margin:0;white-space:nowrap}
@media(max-width:560px){.opt-row{grid-template-columns:1fr 100px}.opt-row .check{grid-column:1}}

/* ป๊อปอัปยืนยัน + toast */
.ui-modal-wrap{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,0);backdrop-filter:blur(0);transition:.16s}
.ui-modal-wrap.show{background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.ui-modal{width:100%;max-width:400px;background:#fff;border-radius:18px;padding:26px 24px 20px;text-align:center;box-shadow:0 24px 60px rgba(15,23,42,.25);
  transform:translateY(10px) scale(.96);opacity:0;transition:.16s}
.ui-modal-wrap.show .ui-modal{transform:none;opacity:1}
.ui-modal-ico{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:1.6rem;font-weight:700;background:var(--primary-50);color:var(--primary)}
.ui-modal-ico.danger{background:#fee2e2;color:#dc2626}
.ui-modal h3{font-size:1.15rem;margin:0 0 6px}
.ui-modal p{color:#475569;margin:0 0 20px;white-space:pre-line;word-break:break-word}
.ui-modal-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-danger-solid{background:#dc2626;color:#fff}.btn-danger-solid:hover{background:#b91c1c}
.ui-toasts{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:1001;display:grid;gap:8px;width:min(92vw,420px)}
.ui-toast{background:#0f172a;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:.95rem;opacity:0;transform:translateY(8px);transition:.2s}
.ui-toast.show{opacity:1;transform:none}
.ui-toast.success{background:#166534}.ui-toast.error{background:#b91c1c}
@media(min-width:861px){.ui-toasts{bottom:24px}}

/* สำรองข้อมูล */
.backup-choice{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:.15s}
.backup-choice:hover:not([disabled]){border-color:var(--primary);background:var(--primary-50)}
.backup-choice[disabled]{opacity:.6;cursor:not-allowed}
.backup-choice .ico{font-size:1.8rem}
.restore-pop{display:inline-block;position:relative}
.restore-pop summary{list-style:none;display:inline-flex}.restore-pop summary::-webkit-details-marker{display:none}
.restore-pop[open] form{position:absolute;right:0;top:100%;z-index:20;width:260px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow);white-space:normal}
code{background:#f1f5f9;padding:1px 6px;border-radius:4px;font-size:.88em}

/* กล่องชำระเงิน */
.pay-box{border:1px solid #bfdbfe;background:#eff6ff;border-radius:14px;padding:16px;margin-bottom:16px}
.pay-amount{font-size:1.05rem;margin-bottom:12px}.pay-amount b{font-size:1.5rem;color:#1d4ed8}
.pay-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pay-qr{display:inline-block;background:#fff;padding:10px;border-radius:12px;min-width:220px;min-height:220px}
.pay-info{flex:1;min-width:200px}

/* หมวดหมู่ (หลังร้าน) */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.cat-move{display:flex;flex-direction:column}.cat-move .btn{min-height:22px;padding:0 8px;font-size:.7rem}
.cat-name{display:flex;gap:6px;flex:1;min-width:200px}.cat-name .input{min-height:38px;padding:6px 10px}
.cat-count{white-space:nowrap}
.chip-check{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;cursor:pointer;background:#fff;font-size:.9rem}
.chip-check:has(input:checked){border-color:var(--primary);background:var(--primary-50)}
.chip-check input{accent-color:var(--primary)}

/* แอดมิน: จัดการแพ็กเกจ */
.plans-edit{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1200px){.plans-edit{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.plans-edit{grid-template-columns:1fr}}
.plan-edit .field{margin-bottom:12px}
.plan-edit.is-off{opacity:.6;background:#f8fafc}
.plan-flags{display:grid;gap:6px;padding:10px 12px;background:#f8fafc;border-radius:10px}
.plan-flags .check{margin:0}

/* แพ็กเกจปัจจุบัน */
.current-plan{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;border-radius:14px;padding:16px 18px;margin-bottom:16px;box-shadow:0 8px 20px rgba(234,88,12,.25)}
.current-plan .cp-label{font-size:.85rem;font-weight:600;opacity:.95}
.current-plan .cp-name{font-size:1.7rem;font-weight:700;line-height:1.3}
.current-plan .cp-meta{font-size:.92rem;opacity:.95}
.plan-pick .radio-card.is-current{border:2px solid #f59e0b;background:#fffbeb}
.plan-pick .radio-card.is-current:has(input:checked){border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25);background:#fef3c7}
.badge-current{display:inline-block;background:#f59e0b;color:#fff;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px;margin-left:4px;vertical-align:middle}

/* มิเตอร์การใช้งาน */
.usage-list{display:grid;gap:14px;margin:12px 0}
.meter{height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin-top:6px}
.meter span{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .3s}
.meter .meter-warn{background:#f59e0b}.meter .meter-full{background:#dc2626}
.text-danger{color:var(--danger);font-weight:600}.text-warn{color:#b45309;font-weight:600}
.plan-pick .radio-card{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;margin-bottom:8px}
.plan-pick .radio-card:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--primary-50)}
.plan-pick input{accent-color:var(--primary);width:18px;height:18px}

/* สถานะร้าน เปิด/ปิด */
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;margin-right:6px;vertical-align:middle}
.status-dot.closed{background:#ef4444}
.hours-row{display:grid;grid-template-columns:110px 1fr 1fr;gap:10px;align-items:center;margin-bottom:8px}
.hours-row .input{min-height:38px;padding:6px 10px}
.hours-row.off .input{opacity:.35;pointer-events:none}
.list-plain li>.badge,.list-plain li>span>.badge{align-self:center}
/* ปักหมุด / ไรเดอร์ */
.rider-box{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.rider-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pin-ok{color:#15803d;font-weight:600}
/* แจ้งลูกค้า */
.notify-card.hot{border:2px solid #06c755;box-shadow:0 0 0 4px rgba(6,199,85,.12)}
.notify-hint{background:#f0fdf4;color:#166534;font-weight:600;padding:8px 12px;border-radius:10px;margin:0 0 10px}
.notify-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.notify-card textarea{font-size:.88rem;line-height:1.5}
/* ฟอร์มสินค้า 2 คอลัมน์: ซ้าย รูป+รายละเอียด · ขวา ราคา+ตัวเลือก */
.pf-grid{align-items:start;grid-template-columns:1fr 1fr}
@media(max-width:900px){.pf-grid{grid-template-columns:1fr}}

/* ===== หน้าแรก: ภาพ hero + 4 ขั้นตอน (โทนน้ำเงิน) ===== */
.hero{background:radial-gradient(1100px 420px at 85% -10%,#dbeafe 0,transparent 60%),radial-gradient(800px 380px at 60% 110%,#ccfbf1 0,transparent 60%),radial-gradient(900px 400px at 0% 0%,#fef3c7 0,transparent 55%)}
.hero-visual{position:relative;max-width:440px;margin:auto;width:100%}
.hero-blob{position:absolute;inset:6% -6% -4% 6%;border-radius:36px;background:linear-gradient(135deg,#2563eb,#0ea5e9 55%,#14b8a6);transform:rotate(4deg);opacity:.9}
.hero-img{position:relative;display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px rgba(30,64,175,.28);border:6px solid #fff}
.hero-badge{position:absolute;background:#fff;border-radius:99px;padding:8px 14px;font-weight:600;font-size:.88rem;box-shadow:0 10px 24px rgba(15,23,42,.15);white-space:nowrap;display:flex;align-items:center;gap:6px}
.hero-badge.b1{left:-22px;top:58%;color:#6d28d9}
.hero-badge.b2{right:-14px;bottom:7%;color:#047857}
.hero-badge .dot-line{width:10px;height:10px;border-radius:50%;background:#06c755;box-shadow:0 0 0 4px rgba(6,199,85,.2)}
@media(max-width:860px){.hero-visual{max-width:380px}.hero-badge.b1{left:-6px}.hero-badge.b2{right:-6px}}

.steps-section{background:linear-gradient(180deg,#eff6ff 0,#f8fafc 100%);border-top:1px solid #dbeafe;border-bottom:1px solid #dbeafe;position:relative;overflow:hidden}
.steps-section:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-220px;border-radius:50%;background:radial-gradient(circle,#bfdbfe 0,transparent 65%);opacity:.7}
.steps-section .container{position:relative}
.eyebrow{display:table;margin:0 auto 10px;background:#dbeafe;color:#1d4ed8;font-weight:600;font-size:.85rem;padding:5px 14px;border-radius:99px}
.grad-text{background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps2{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:960px){.steps2{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps2{grid-template-columns:1fr}}
.step2{position:relative;background:#fff;border-radius:20px;padding:26px 20px 20px;text-align:center;border:1px solid #e2e8f0;box-shadow:0 6px 18px rgba(30,64,175,.06);transition:transform .18s,box-shadow .18s}
.step2:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(30,64,175,.14)}
.step2:before{content:"";position:absolute;left:20px;right:20px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--c)}
.step2-no{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:#1e3a8a;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;border:3px solid #eff6ff}
.step2-ico{width:82px;height:82px;margin:6px auto 14px;border-radius:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c)}
.step2-ico svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.step2-ico svg .fill{fill:currentColor;stroke:none}
.step2-ico svg .w{stroke:#fff}
.step2 h3{font-size:1.1rem;margin:0 0 6px;color:#0f172a}
.step2 p{color:#64748b;font-size:.92rem;margin:0 0 14px;min-height:2.9em}
.step2-tag{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 12px;border-radius:99px;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff)}
/* ลูกศรเชื่อมขั้นตอน (จอใหญ่) */
@media(min-width:961px){.step2:not(:last-child):after{content:"";position:absolute;right:-19px;top:66px;width:16px;height:16px;border-top:3px solid #93c5fd;border-right:3px solid #93c5fd;transform:rotate(45deg);z-index:1}}
.btn-blue{background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#fff;border:0;box-shadow:0 10px 22px rgba(37,99,235,.3)}
.btn-blue:hover{filter:brightness(1.08);color:#fff}
.hero{overflow:hidden}
@media(max-width:860px){.hero-blob{inset:5% -2% -3% 4%}}
.step2-ico{width:88px;height:88px}.step2-ico svg{width:58px;height:58px}
@media(max-width:520px){
  .steps2{gap:18px}
  .step2{display:grid;grid-template-columns:72px 1fr;column-gap:14px;text-align:left;padding:20px 16px 16px;align-items:center}
  .step2-ico{grid-row:1/4;width:72px;height:72px;margin:0;border-radius:18px}
  .step2-ico svg{width:46px;height:46px}
  .step2 h3{margin:0 0 2px}.step2 p{min-height:0;margin:0 0 8px}
  .step2-tag{justify-self:start}
  .step2-no{left:20px;transform:none}
}
.hero-admin{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.hero-admin-preview{position:relative;width:160px;flex:none}
.hero-admin-preview img{width:100%;border-radius:14px;border:1px solid var(--line);display:block;aspect-ratio:3/4;object-fit:cover;background:#f1f5f9}
.hero-admin-preview .badge{position:absolute;left:8px;top:8px}

/* ทำไมต้องเรา */
.why-section{background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}
.why-card{position:relative;border-radius:22px;padding:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,#fff),#fff 55%);border:1px solid color-mix(in srgb,var(--c) 22%,#e2e8f0);box-shadow:0 8px 22px rgba(30,64,175,.06);transition:transform .18s,box-shadow .18s}
.why-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(30,64,175,.13)}
.why-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.why-ico{margin:0!important;width:72px!important;height:72px!important;border-radius:20px}
.why-ico svg{width:46px!important;height:46px!important}
.why-stat{text-align:right;line-height:1.1}
.why-stat b{display:block;font-size:2rem;color:var(--c);letter-spacing:-.02em}
.why-stat span{font-size:.8rem;color:#64748b;font-weight:600}
.why-card h3{font-size:1.2rem;margin:0 0 6px;color:#0f172a}
.why-card p{color:#475569;margin:0 0 12px}
.why-card ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px dashed color-mix(in srgb,var(--c) 30%,#e2e8f0);display:grid;gap:6px}
.why-card li{position:relative;padding-left:26px;font-size:.92rem;color:#334155}
.why-card li:before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center}

/* แถบปิดท้าย */
.cta-band{background:linear-gradient(120deg,#1e3a8a,#2563eb 50%,#0ea5e9);color:#fff;padding:44px 0;position:relative;overflow:hidden}
.cta-band:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-200px;background:rgba(255,255,255,.08)}
.cta-band:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:-80px;bottom:-160px;background:rgba(255,255,255,.06)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band h2{color:#fff;margin:0 0 4px;text-align:left}
.cta-band p{margin:0;color:#dbeafe}
.cta-white{background:#fff;color:#1d4ed8;border:0;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.cta-white:hover{color:#1e3a8a;filter:brightness(.97)}
.cta-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.cta-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* หน้าราคา: รายเดือน / รายปี */
.bill-toggle{display:flex;width:max-content;max-width:100%;margin:-12px auto 28px;background:#e0e7ff;border-radius:99px;padding:5px;gap:4px}
.bill-toggle button{border:0;background:transparent;font:inherit;font-weight:600;padding:9px 20px;border-radius:99px;cursor:pointer;color:#1e3a8a;display:flex;align-items:center;gap:8px}
.bill-toggle button.on{background:#fff;box-shadow:0 2px 8px rgba(30,64,175,.18);color:#1d4ed8}
.save-chip{display:inline-block;background:#dcfce7;color:#15803d;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
#pricing .show-year{display:none}
#pricing[data-bill=year] .show-year{display:block}
#pricing[data-bill=year] .show-month{display:none}
.price-note{font-size:.88rem;color:var(--muted);margin-top:2px;min-height:1.5em}
.price-note b{color:#1d4ed8}
.plan-extras{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:14px;padding:12px 14px;margin:-6px 0 18px}
.plan-extras-head{font-weight:700;color:#3730a3;font-size:.92rem;margin-bottom:4px}
.plan-extras ul{margin:0;padding:0;list-style:none;flex:none}
.plan-extras li{position:relative;padding-left:22px;margin:5px 0;font-size:.92rem}
.plan-extras li:before{content:"✓";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#4f46e5;color:#fff;font-size:.65rem;font-weight:700;display:grid;place-items:center}

/* แถบลิมิตสินค้า */
.limit-bar{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.limit-bar.limit-warn{border-color:#fcd34d;background:#fffbeb}
.limit-bar.limit-full{border-color:#fca5a5;background:#fef2f2}
.limit-bar .meter{margin-top:6px}

/* ปุ่ม Google / LINE */
.social-btns{display:grid;gap:10px;margin-top:16px}
.btn-google{background:#fff;color:#1f2937;border:1px solid #d1d5db;font-weight:600;gap:10px}
.btn-google:hover{background:#f8fafc;border-color:#9ca3af;color:#111827}
.btn-line-login{gap:10px}
.social-hello{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:14px}
.social-hello img,.social-hello span{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.social-hello span{display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700}
.linked-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.oauth-box{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fafafa}
.oauth-box .field{margin:10px 0}

/* ===== หน้ารวมร้าน ===== */
.dir-hero{background:linear-gradient(120deg,#1e3a8a,#2563eb 55%,#0ea5e9);color:#fff;padding:44px 0 56px;position:relative;overflow:hidden}
.dir-hero:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-140px;top:-220px;background:rgba(255,255,255,.08)}
.dir-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;left:-90px;bottom:-170px;background:rgba(255,255,255,.06)}
.dir-hero .container{position:relative;z-index:1}
.dir-hero h1{color:#fff;font-size:clamp(1.7rem,4vw,2.4rem);margin:6px 0 4px}
.dir-hero p{color:#dbeafe;margin:0 0 18px}
.eyebrow-light{display:inline-block;margin:0;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}
.dir-search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:6px 6px 6px 14px;max-width:680px;box-shadow:0 14px 30px rgba(15,23,42,.25)}
.dir-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1rem;padding:10px 4px;color:#0f172a;background:transparent}
.dir-search-ico{font-size:1.1rem}
.dir-search .btn{min-height:44px;padding:8px 22px}
.dir-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.dir-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:#fff!important;font:inherit;font-weight:600;font-size:.9rem;padding:7px 14px;border-radius:99px;cursor:pointer;text-decoration:none!important}
.dir-pill:hover{background:rgba(255,255,255,.22)}
.dir-pill.on{background:#fff;color:#1d4ed8!important;border-color:#fff}
.dir-body{margin-top:-26px;position:relative;z-index:2;padding-bottom:48px}
.cat-chips{display:flex;gap:10px;overflow-x:auto;padding:12px;margin-bottom:22px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(30,64,175,.08);scrollbar-width:thin}
.cat-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-weight:600;font-size:.9rem;white-space:nowrap;color:var(--c)!important;background:color-mix(in srgb,var(--c) 9%,#fff);border:1px solid color-mix(in srgb,var(--c) 22%,#fff);text-decoration:none!important;transition:.15s}
.cat-chip:hover{background:color-mix(in srgb,var(--c) 16%,#fff)}
.cat-chip.on{background:var(--c);border-color:var(--c);color:#fff!important;box-shadow:0 6px 14px color-mix(in srgb,var(--c) 35%,transparent)}
.cat-chip span{font-size:1.05rem}
.dir-empty{text-align:center;background:#fff;border:1px dashed #bfdbfe;border-radius:20px;padding:44px 16px}
.dir-empty h3{margin:8px 0 4px}

/* การ์ดร้าน (ใช้ทั้งหน้าแรกและหน้ารวมร้าน) */
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.shop-card{border-radius:18px;box-shadow:0 4px 14px rgba(15,23,42,.05);transition:transform .18s,box-shadow .18s,border-color .18s}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(30,64,175,.14);border-color:#bfdbfe}
.shop-card .cover{height:110px;background-image:linear-gradient(135deg,var(--c,#0f766e),color-mix(in srgb,var(--c,#0f766e) 55%,#60a5fa))}
.shop-card .logo{box-shadow:0 6px 14px rgba(15,23,42,.18)}
.shop-card .badge{background:#eff6ff;color:#1d4ed8;font-weight:600}
.shop-card .enter{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-weight:600;font-size:.9rem;color:#2563eb}
.shop-card:hover .enter span:last-child{transform:translateX(4px)}
.shop-card .enter span:last-child{transition:transform .18s}
.shop-card{display:flex;flex-direction:column}
.shop-card .body{flex:1;display:flex;flex-direction:column}
.shop-card .enter{margin-top:auto}
.shop-card .body > .row{margin-bottom:12px}
.hero-link{display:block;position:relative;border-radius:28px;transition:transform .2s}
.hero-link:hover{transform:translateY(-4px) rotate(-.5deg)}
.hero-link:focus-visible{outline:3px solid #2563eb;outline-offset:4px}

/* ===== รายงานยอดขาย ===== */
.sales-tabs{display:flex;gap:6px;background:#e0e7ff;padding:5px;border-radius:14px;width:max-content;max-width:100%;overflow-x:auto;margin-bottom:16px}
.sales-tab{padding:8px 18px;border-radius:10px;font-weight:600;color:#1e3a8a;white-space:nowrap;text-decoration:none!important}
.sales-tab.on{background:#fff;color:#1d4ed8;box-shadow:0 2px 8px rgba(30,64,175,.15)}
.sales-tab.locked{color:#94a3b8}
.sales-upsell{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sales-search{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:16px}
.sales-search .field{flex:1;min-width:150px;margin:0}
.quick-ranges{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.quick-ranges .chip{font-size:.85rem;padding:4px 12px}
.stat-tiles{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:900px){.stat-tiles{grid-template-columns:1fr 1fr}.stat-tile.hero{grid-column:1/-1}}
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.stat-tile.hero{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border:0}
.st-label{font-size:.85rem;color:#64748b;font-weight:600}
.stat-tile.hero .st-label,.stat-tile.hero .st-sub{color:#dbeafe}
.st-value{font-size:1.7rem;font-weight:700;letter-spacing:-.01em;margin:2px 0;color:#0f172a}
.stat-tile.hero .st-value{color:#fff;font-size:2.1rem}
.st-sub{font-size:.82rem;color:#94a3b8}
.trend{display:inline-block;font-weight:700;padding:1px 8px;border-radius:99px;font-size:.8rem}
.trend.up{background:#dcfce7;color:#15803d}.trend.down{background:#fee2e2;color:#b91c1c}
.chart-card{padding-bottom:12px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chart-head h2{margin:0;font-size:1.1rem}
.period-nav{display:flex;align-items:center;gap:6px}
.period-nav form{margin:0}.period-nav .input{min-height:36px;padding:4px 10px;width:auto}
.period-cur{font-weight:700;min-width:80px;text-align:center}
.sales-chart{position:relative;width:100%;min-height:230px}
.sales-chart svg{display:block;overflow:visible}
.sales-chart .grid{stroke:#eef2f7;stroke-width:1}
.sales-chart .base{stroke:#cbd5e1;stroke-width:1}
.sales-chart .ylab,.sales-chart .xlab{fill:#94a3b8;font-size:11px;font-family:inherit}
.sales-chart .xlab.now{fill:#1d4ed8;font-weight:700}
.sales-chart .bar path{fill:#2563eb;transition:fill .12s}
.sales-chart .bar.is-today path{fill:#1e40af}
.sales-chart .bar.hover path{fill:#1e3a8a}
.sales-chart .bar.hover .hit{fill:rgba(37,99,235,.06)}
.sales-chart .hit{fill:transparent;cursor:pointer}
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:#0f172a;color:#fff;border-radius:10px;padding:8px 12px;font-size:.82rem;white-space:nowrap;box-shadow:0 8px 20px rgba(15,23,42,.25)}
.chart-tip .tt-h{color:#cbd5e1}.chart-tip .tt-v{font-size:1.05rem;font-weight:700}.chart-tip .tt-s{color:#cbd5e1}
.chart-empty{position:absolute;inset:0 0 28px 52px;display:grid;place-items:center;color:#94a3b8;font-weight:600}
.chart-table{margin-top:6px}.chart-table summary{cursor:pointer;color:#2563eb;font-weight:600;font-size:.9rem}
.top-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.top-list li{display:flex;gap:12px;align-items:flex-start}
.top-rank{width:28px;height:28px;border-radius:50%;background:#eff6ff;color:#1d4ed8;font-weight:700;display:grid;place-items:center;flex:none;font-size:.85rem}
.top-list li:first-child .top-rank{background:#fbbf24;color:#fff}
.top-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-bar{height:6px;background:#eef2f7;border-radius:99px;overflow:hidden;margin:4px 0 2px}
.top-bar span{display:block;height:100%;background:#60a5fa;border-radius:99px}
.sales-tips ul{margin:0;padding-left:18px;color:#475569}.sales-tips li{margin:6px 0}
@media(max-width:860px){.bottom-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}.bottom-nav a{font-size:.66rem}}
.sales-st{min-width:0;max-width:100%}
.sales-st select{max-width:100%}
@media(max-width:600px){.sales-st{flex:1 1 100%}.sales-st select{width:100%}}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:16px}
.pager .btn{min-width:38px}
.pager-gap{color:#94a3b8;padding:0 2px}
.grid-2>*,.grid-3>*{min-width:0}
.top-list .row{flex-wrap:nowrap}
.top-name{flex:1;min-width:0}
/* คอลัมน์หลักของหลังร้านไม่ขยายเกินจอ (ตารางกว้างจะเลื่อนในกล่องของมันเอง) */
.dash{grid-template-columns:240px minmax(0,1fr)}
@media(max-width:860px){.dash{grid-template-columns:minmax(0,1fr)}.bottom-nav{grid-auto-columns:minmax(0,1fr)}}
.top-list{grid-template-columns:minmax(0,1fr)}
.cat-name{min-width:0}.cat-name .input{min-width:0}
/* grid ที่กำหนดสัดส่วนคอลัมน์ไว้ในหน้า → มือถือเหลือคอลัมน์เดียว */
@media(max-width:720px){.grid-2[style*="grid-template-columns"],.grid-3[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}}
.addr-fields select:disabled{background:#f8fafc;color:#94a3b8}
.addr-hint{margin-top:-4px}

/* ===== ออเดอร์ตามแพ็กเกจ ===== */
.locked-btn{color:#94a3b8!important;border-style:dashed}
.order-search .input{width:230px;min-height:40px}
@media(max-width:600px){.order-search{flex:1 1 100%}.order-search .input{width:100%}}
.order-upsell{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:linear-gradient(90deg,#eff6ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:.9rem;color:#3730a3}
.order-upsell a{font-weight:700;white-space:nowrap}
.order-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;padding:14px;margin-bottom:14px}
.order-filters .field{margin:0;flex:1;min-width:130px}
.order-filters .input{min-height:40px;padding:6px 10px}
.bulk-bar{position:sticky;top:8px;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#1e3a8a;color:#fff;border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:0 10px 24px rgba(30,58,138,.25)}
.bulk-bar[hidden]{display:none}
.bulk-bar .input{width:auto;min-height:38px;padding:6px 10px;color:#0f172a}
.bulk-bar .btn{background:#fff;color:#1e3a8a}
.bulk-bar .muted{color:#c7d2fe!important}
.th-sort{color:inherit!important;text-decoration:none!important;white-space:nowrap}
.th-sort.on{color:#1d4ed8!important}
.orders-table input[type=checkbox]{width:18px;height:18px;accent-color:#2563eb}
.row-link{color:inherit!important}
.print-only{display:none}
@media print{
  .side,.mobile-head,.bottom-nav,.no-print,.alert,.order-upsell{display:none!important}
  .dash{display:block!important}.main{padding:0!important}
  .print-only{display:block!important}.print-head{margin-bottom:10px}
  .table-wrap{border:0}.table th,.table td{padding:6px 8px;font-size:12px}
  .card{box-shadow:none;border:0}
}

/* =====================================================================
   ธีมหลังร้านตามแพ็กเกจ  🌱 ฟรี · ⭐ ร้านค้า · 💎 มืออาชีพ · 👑 ดูแลให้
   ===================================================================== */
body.dash-body{--side:#0f172a;--side-hover:#1e293b;--side-active:#134e4a;--side-text:#cbd5e1;--tier:#5eead4;
  --hero:linear-gradient(120deg,#0f766e,#14b8a6 60%,#5eead4);--hero-ink:#fff;--hero-sub:#ccfbf1;--tier-bg:rgba(255,255,255,.07)}
body.plan-free{--side:linear-gradient(180deg,#0f172a 0%,#0f2b2b 100%);--side-active:linear-gradient(90deg,#0f766e,#14b8a6)}
body.plan-shop{--primary:#1d4ed8;--primary-600:#2563eb;--primary-50:#eff6ff;
  --side:linear-gradient(180deg,#0a1633 0%,#13286b 100%);--side-hover:rgba(255,255,255,.08);--side-active:linear-gradient(90deg,#1d4ed8,#3b82f6);--side-text:#c7d2fe;--tier:#93c5fd;
  --hero:linear-gradient(120deg,#0b1d4f,#1d4ed8 50%,#38bdf8);--hero-sub:#dbeafe}
body.plan-pro{--primary:#6d28d9;--primary-600:#7c3aed;--primary-50:#f5f3ff;
  --side:linear-gradient(180deg,#130726 0%,#2e1065 60%,#4c1d95 100%);--side-hover:rgba(255,255,255,.08);--side-active:linear-gradient(90deg,#7c3aed,#c026d3);--side-text:#ddd6fe;--tier:#e9d5ff;
  --hero:linear-gradient(120deg,#1e0a3c,#5b21b6 45%,#a21caf);--hero-sub:#f3e8ff}
body.plan-managed{--primary:#a16207;--primary-600:#ca8a04;--primary-50:#fefce8;
  --side:linear-gradient(180deg,#0a0908 0%,#1c1917 55%,#292524 100%);--side-hover:rgba(250,204,21,.08);--side-active:linear-gradient(90deg,#a16207,#eab308);--side-text:#e7e5e4;--tier:#fde047;
  --hero:linear-gradient(120deg,#0a0908,#1c1917 40%,#422006 75%,#713f12);--hero-sub:#fef3c7;--tier-bg:rgba(250,204,21,.08)}

/* แถบเมนูซ้าย */
body.dash-body .side{background:var(--side);color:var(--side-text)}
body.dash-body .side a.nav-item{color:var(--side-text)}
body.dash-body .side a.nav-item:hover{background:var(--side-hover)}
body.dash-body .side a.nav-item.active{background:var(--side-active);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
body.dash-body .side .shop-box{background:var(--tier-bg);border:1px solid rgba(255,255,255,.08)}
body.dash-body .side .shop-box a{color:var(--tier)}
body.dash-body .brand-mark{background:var(--hero)}
body.plan-managed .brand-mark{background:linear-gradient(135deg,#a16207,#fde047);color:#1c1917}
body.dash-body .mobile-head{background:var(--side)}
body.dash-body .m-shop{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.m-tier{font-size:1.15rem}

/* การ์ดแพ็กเกจในเมนูซ้าย */
.tier-card{position:relative;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid color-mix(in srgb,var(--tier) 35%,transparent);overflow:hidden}
.tier-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--tier) 18%,transparent),transparent 60%);pointer-events:none}
.tier-top{display:flex;gap:10px;align-items:center;position:relative}
.tier-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;background:rgba(255,255,255,.1)}
.tier-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tier);font-weight:700}
.tier-card b{color:#fff;font-size:.92rem}
.tier-exp{font-size:.75rem;color:var(--side-text);opacity:.8;margin-top:4px;position:relative}
.tier-up{position:relative;display:inline-block;margin-top:6px;font-weight:700;font-size:.8rem;color:var(--tier)!important}
body.plan-managed .tier-card{border-color:rgba(253,224,71,.45);box-shadow:inset 0 0 0 1px rgba(253,224,71,.08),0 0 24px rgba(234,179,8,.12)}
body.plan-pro .tier-card{box-shadow:0 0 24px rgba(168,85,247,.18)}

/* แถบต้อนรับหน้าแรกหลังร้าน */
.dash-hero{position:relative;overflow:hidden;border-radius:20px;padding:24px 26px;margin-bottom:20px;background:var(--hero);color:var(--hero-ink);
  display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;box-shadow:0 14px 34px rgba(15,23,42,.18)}
.dash-hero h1{color:#fff;margin:10px 0 4px;font-size:clamp(1.4rem,3vw,1.9rem)}
.dash-hero p{margin:0;color:var(--hero-sub);max-width:640px;font-size:.95rem}
.dh-main,.dh-actions{position:relative;z-index:1}
.dh-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tier-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.82rem;padding:4px 12px;border-radius:99px;backdrop-filter:blur(4px)}
.dh-btn{background:#fff!important;color:var(--primary)!important;border:0;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.dh-btn-ghost{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}
.dh-up{color:#fff!important;font-weight:700;font-size:.9rem;opacity:.9}
.dh-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.dh-deco span{position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.dh-deco span:nth-child(1){width:320px;height:320px;right:-90px;top:-160px}
.dh-deco span:nth-child(2){width:180px;height:180px;right:180px;bottom:-110px;background:rgba(255,255,255,.05)}
.dh-deco span:nth-child(3){width:90px;height:90px;left:45%;top:-40px;background:rgba(255,255,255,.06)}
/* 💎 มืออาชีพ: แสงเรือง */
body.plan-pro .dash-hero{box-shadow:0 14px 40px rgba(124,58,237,.35)}
body.plan-pro .dh-deco span:nth-child(1){background:radial-gradient(circle,rgba(232,121,249,.35),transparent 65%)}
/* 👑 ดูแลให้: ทอง */
body.plan-managed .dash-hero{border:1px solid rgba(253,224,71,.35);box-shadow:0 14px 40px rgba(120,53,15,.35)}
body.plan-managed .dh-name{background:linear-gradient(90deg,#fde68a,#facc15,#fef3c7);-webkit-background-clip:text;background-clip:text;color:transparent}
body.plan-managed .tier-pill{background:linear-gradient(90deg,rgba(234,179,8,.3),rgba(253,224,71,.15));border-color:rgba(253,224,71,.5);color:#fef9c3}
body.plan-managed .dh-deco span:nth-child(1){background:radial-gradient(circle,rgba(250,204,21,.22),transparent 65%)}
body.plan-managed .dh-btn{color:#713f12!important;background:linear-gradient(90deg,#fef3c7,#fde047)!important}

/* การ์ดตัวเลข + ปุ่ม ตามสีแพ็กเกจ */
body.dash-body .stat{border-top:3px solid var(--primary-600)}
body.dash-body .bottom-nav a.active{color:var(--primary-600)}
@media(max-width:600px){.dash-hero{padding:20px;border-radius:16px}.dh-actions{width:100%}.dh-actions .btn{flex:1}}

/* เงื่อนไขการลบออเดอร์ (฿199): บรรทัดล่างตาราง + ป๊อปอัป */
.del-note{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin:10px 2px 0;font-size:.85rem;color:var(--muted,#64748b)}
.link-btn{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.kk-dialog{border:0;border-radius:18px;padding:0;width:min(440px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(15,23,42,.35)}
.kk-dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.kk-dialog[open]{animation:kkPop .18s ease-out}
@keyframes kkPop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.kk-dialog-body{padding:22px 22px 18px}
.kk-dialog-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:var(--tier-bg,#eff6ff);margin-bottom:8px}
.kk-dialog h3{margin:0 0 10px;font-size:1.1rem}
.del-steps{margin:0 0 12px 20px;padding:0;font-size:.93rem;line-height:1.6}
.del-steps li{margin:4px 0}
.del-up{background:#f5f3ff;border:1px solid #ddd6fe;color:#5b21b6;border-radius:10px;padding:9px 12px;font-size:.88rem;margin-bottom:14px}
.kk-dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ===== เมนูร้าน (หลังร้าน) ===== */
.pm-grid{align-items:start;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.pm-bar{height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin:4px 0 12px}
.pm-bar span{display:block;height:100%;background:var(--primary);border-radius:99px}
.pm-list{list-style:none;margin:0;padding:0}
.pm-list li{display:flex;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #f1f5f9}
.pm-list li.pm-child{padding-left:26px;background:linear-gradient(90deg,#f8fafc,transparent)}
.pm-list li.pm-off .pm-title b{color:#94a3b8;text-decoration:line-through}
.pm-title{flex:1;min-width:0;color:inherit!important;display:flex;flex-direction:column;gap:3px}
.pm-title:hover b{color:var(--primary)}
.pm-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pm-up{background:linear-gradient(135deg,#faf5ff,#fff7ed);border-color:#e9d5ff}
.pm-lock{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;border-radius:20px;padding:30px;
  background:linear-gradient(135deg,#1e1b4b,#4c1d95 60%,#7e22ce);color:#e9d5ff;box-shadow:0 18px 40px rgba(76,29,149,.3)}
.pm-lock h2{color:#fff;font-size:1.6rem;margin:12px 0 8px}
.pm-lock p{margin:0 0 16px;color:#ddd6fe}
.pm-lock .btn{background:#fff;color:#4c1d95}
.pm-tiers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.pm-tier{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 14px;font-size:.88rem}
.pm-tier b{color:#fff}.pm-tier ul{margin:6px 0 0;padding-left:18px}
.pm-tier.gold{border-color:rgba(253,224,71,.5);background:rgba(250,204,21,.1)}.pm-tier.gold b{color:#fde68a}
.pm-mock{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotate(1.5deg)}
.pm-mock-cover{height:110px;background:linear-gradient(120deg,#0f766e,#14b8a6 50%,#fbbf24)}
.pm-mock-nav{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid #eee;font-size:.78rem;color:#334155;font-weight:600}
.pm-mock-nav .on{color:#0f766e;border-bottom:2px solid #0f766e}
.pm-mock-body{padding:14px}.pm-mock-body i{display:block;height:8px;border-radius:9px;background:#e2e8f0;margin-bottom:8px}.pm-mock-body i.s{width:60%}
.pm-mock-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.pm-mock-gal b{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#fde68a,#f472b6)}
.pm-mock-gal b:nth-child(2){background:linear-gradient(135deg,#a5f3fc,#6366f1)}.pm-mock-gal b:nth-child(3){background:linear-gradient(135deg,#bbf7d0,#0d9488)}
@media(max-width:860px){.pm-grid,.pe-grid{grid-template-columns:minmax(0,1fr)!important}.pm-lock{grid-template-columns:minmax(0,1fr);padding:22px}.pm-mock{display:none}}
@media(max-width:520px){.pm-tiers{grid-template-columns:1fr}}

/* แก้ไขเนื้อหาเมนู */
.pe-grid{align-items:start;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.pe-tools{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:#f8fafc}
.pe-tools button{font:inherit;font-size:.82rem;border:1px solid transparent;background:none;border-radius:8px;padding:5px 9px;cursor:pointer;color:#334155}
.pe-tools button:hover{background:#fff;border-color:var(--line);color:var(--primary)}
.pe-tools .pe-imgbtn{margin-left:auto;color:var(--primary);font-weight:600}
.pe-body{border-radius:0 0 10px 10px!important;font-family:inherit;line-height:1.7;min-height:360px;resize:vertical}
.pe-help{margin-top:10px}.pe-help summary{cursor:pointer;color:var(--primary);font-weight:600}
.pe-help table{margin-top:8px;border-collapse:collapse}.pe-help td{padding:3px 14px 3px 0;vertical-align:top}
.pe-help code{background:#f1f5f9;padding:1px 6px;border-radius:6px;font-size:.85em}
.pe-drop{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;border:2px dashed #cbd5e1;border-radius:14px;padding:18px;cursor:pointer;margin-bottom:12px;transition:border-color .15s,background .15s}
.pe-drop:hover{border-color:var(--primary);background:#f8fafc}
.pe-drop input{max-width:100%;font-size:.85rem}
.pe-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.pe-img{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.pe-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pe-img .input{border:0;border-top:1px solid var(--line);border-radius:0;font-size:.82rem;padding:7px 9px}
.pe-tag{position:absolute;top:6px;left:6px;background:rgba(15,23,42,.7);color:#fff;font-size:.7rem;padding:2px 8px;border-radius:99px}
.pe-tag.in{background:var(--primary)}
.pe-img-act{display:flex;gap:2px;padding:4px;border-top:1px solid var(--line);flex-wrap:wrap}
.pe-img-act .btn{padding:0 7px;min-height:30px;font-size:.78rem}
.pe-img-act .btn:first-child{flex:1}
.pe-save{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;margin-top:16px;padding:12px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;box-shadow:0 -6px 20px -12px rgba(0,0,0,.25)}
@media(max-width:860px){.pe-save{bottom:64px}}

/* ===== เมนูร้าน v2: ไอคอน + Rich editor ===== */
.pm-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.pm-sugg-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.86rem;padding:6px 12px 6px 6px;border-radius:99px;border:1px solid var(--line);background:#fff;color:#334155;cursor:pointer;transition:all .15s}
.pm-sugg-btn span{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:#f1f5f9;font-size:.95rem}
.pm-sugg-btn:hover{border-color:var(--primary);color:var(--primary)}
.pm-sugg-btn.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary);font-weight:600}
.pm-name{display:flex;align-items:center;gap:8px}
.pm-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#f1f5f9;font-size:1rem;flex:none}
.pe-h-ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);margin-right:10px;font-size:1.25rem;vertical-align:middle}
.pe-top{display:flex;gap:12px;flex-wrap:wrap}
.pe-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;max-height:156px;overflow:auto;padding:2px}
.pe-icon{cursor:pointer}
.pe-icon input{position:absolute;opacity:0;pointer-events:none}
.pe-icon span{display:grid;place-items:center;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:1.2rem;transition:all .12s}
.pe-icon.auto{grid-column:span 2}.pe-icon.auto span{font-size:.95rem;grid-auto-flow:column;gap:4px}.pe-icon.auto small{font-size:.75rem;color:#64748b}
.pe-icon:hover span{border-color:var(--primary)}
.pe-icon input:checked + span{border:2px solid var(--primary);background:color-mix(in srgb,var(--primary) 10%,#fff);box-shadow:0 4px 10px -4px var(--primary)}
.pe-icon input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.pe-icon-auto{display:flex;align-items:center;gap:12px}
.pe-icon-big{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#f1f5f9;font-size:1.4rem;flex:none}

/* Quill */
.pe-editor-card .ql-toolbar.ql-snow{border:1px solid var(--line);border-radius:12px 12px 0 0;background:#f8fafc;padding:8px;font-family:inherit;position:sticky;top:0;z-index:3}
.pe-editor-card .ql-container.ql-snow{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;font-family:inherit;font-size:1rem}
.pe-editor .ql-editor{min-height:420px;line-height:1.8;padding:18px 20px}
.pe-editor .ql-editor.ql-blank::before{font-style:normal;color:#94a3b8;left:20px}
.pe-editor .ql-editor h2{font-size:1.4rem;margin:.6em 0 .3em}
.pe-editor .ql-editor h3{font-size:1.15rem;margin:.5em 0 .3em}
.pe-editor .ql-editor img{max-width:100%;border-radius:10px;margin:6px 0}
.pe-editor .ql-editor blockquote{border-left:4px solid var(--primary);background:#f8fafc;padding:8px 14px;border-radius:8px}
.pe-editor-card .ql-snow .ql-picker.ql-header{width:118px}
.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-label::before,.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'ข้อความปกติ'}
.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'หัวข้อ'}
.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.pe-editor-card .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'หัวข้อย่อย'}
.pe-editor-card .ql-snow .ql-tooltip{border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.18);font-family:inherit;z-index:10}
.pe-editor-card .ql-snow .ql-tooltip::before{content:'ลิงก์:'}
.pe-editor-card .ql-snow .ql-tooltip[data-mode=link]::before{content:'ใส่ลิงก์:'}
.pe-editor-card .ql-snow .ql-tooltip a.ql-action::after{content:'แก้ไข'}
.pe-editor-card .ql-snow .ql-tooltip a.ql-remove::before{content:'ลบลิงก์'}
.pe-editor-card .ql-snow .ql-tooltip.ql-editing a.ql-action::after{content:'บันทึก'}
.pe-editor-card .ql-snow .ql-tooltip input[type=text]{width:220px;font-family:inherit}
.pe-upload-status{color:var(--primary);font-weight:600;min-height:1.4em;margin-top:6px}
#peDirty.on{color:#b45309;font-weight:600}
@media(max-width:600px){.pe-editor .ql-editor{min-height:300px;padding:14px}.pe-editor-card .ql-toolbar.ql-snow{padding:6px}}
@media(max-width:600px){#peDirty:not(.on){display:none}.pe-save{padding:10px 12px}}
.pe-editor-card .ql-snow .ql-tooltip{max-width:calc(100% - 16px)}

/* ===== แจ้งเตือนออเดอร์ใหม่ ===== */
.oa-bell{display:inline-flex;align-items:center;gap:6px;font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:#334155;border-radius:99px;padding:5px 12px 5px 8px;font-size:.82rem;font-weight:600}
.oa-bell-ico{font-size:1rem;display:inline-block;transform-origin:50% 0}
.oa-bell.off{color:#94a3b8}
.oa-bell.locked{border-color:#f59e0b;background:#fffbeb;color:#92400e;animation:oaPulse 1.6s infinite}
.oa-bell.locked .oa-bell-ico{animation:oaRing 1.6s infinite}
.side-bell{margin:-6px 0 10px;width:100%;justify-content:flex-start;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--side-text,#cbd5e1)}
.side-bell.locked{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.5);color:#fde68a}
.m-bell{padding:5px 8px;margin-right:6px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.m-bell.locked{background:#fef3c7}
.page-bell{margin-left:4px}
@keyframes oaPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.45)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
@keyframes oaRing{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(18deg)}20%{transform:rotate(-16deg)}30%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}}
.badge.oa-pop{animation:oaBadge .6s ease}
@keyframes oaBadge{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

.oa-pop-box{position:fixed;right:20px;bottom:20px;z-index:200;width:min(380px,calc(100vw - 24px));background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.35),0 0 0 3px var(--primary);overflow:hidden;transform:translateY(30px) scale(.96);opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.2,.9,.3,1.2)}
.oa-pop-box.show{transform:none;opacity:1;pointer-events:auto}
.oa-head{display:flex;gap:12px;align-items:center;padding:14px 16px;background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 60%,#000));color:#fff}
.oa-head b{font-size:1.05rem}
.oa-sub{font-size:.8rem;opacity:.85}
.oa-bellani{font-size:1.7rem;display:inline-block;transform-origin:50% 0;animation:oaRing 1.2s infinite}
.oa-x{margin-left:auto;background:rgba(255,255,255,.15);border:0;color:#fff;width:30px;height:30px;border-radius:99px;cursor:pointer;flex:none}
.oa-list{max-height:min(46vh,340px);overflow:auto;padding:6px}
.oa-item{display:block;padding:10px 12px;border-radius:12px;color:inherit!important;border:1px solid transparent}
.oa-item:hover{background:#f8fafc;border-color:var(--line);text-decoration:none}
.oa-item + .oa-item{border-top-color:#f1f5f9}
.oa-row{display:flex;justify-content:space-between;gap:8px}
.oa-total{font-weight:700;color:var(--primary)}
.oa-meta{font-size:.8rem;color:#64748b;margin-top:2px}
.oa-items{font-size:.85rem;margin-top:6px;background:#f8fafc;border-radius:8px;padding:6px 10px;line-height:1.55}
.oa-more,.oa-more-orders{color:#64748b;font-size:.8rem}
.oa-more-orders{text-align:center;padding:6px}
.oa-unlock{display:block;width:calc(100% - 24px);margin:4px 12px 0;font:inherit;font-size:.82rem;font-weight:600;border:1px dashed #f59e0b;background:#fffbeb;color:#92400e;border-radius:10px;padding:8px;cursor:pointer}
.oa-actions{display:flex;gap:8px;padding:12px}
.oa-actions .btn{flex:1}
.oa-newbar{display:block;width:100%;font:inherit;font-weight:600;cursor:pointer;margin:0 0 12px;padding:12px;border-radius:12px;border:2px solid var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary);animation:oaPulse 1.6s infinite}
.oa-dlg .oa-opt{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f1f5f9;cursor:pointer}
.oa-dlg .oa-opt input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary);flex:none}
.oa-dlg .oa-opt small{display:block;color:#64748b;font-size:.8rem}
.oa-tip{background:#f8fafc;border-radius:10px;padding:8px 10px;margin:12px 0 14px;color:#475569}
@media(max-width:860px){.oa-pop-box{right:12px;left:12px;width:auto;bottom:76px}.oa-bell.page-bell .oa-bell-lbl{display:none}}
@media print{.oa-pop-box,.oa-bell,.oa-newbar{display:none!important}}

/* ===== สไลด์ภาพปก (หลังร้าน) ===== */
.sl-cta{display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--primary) 50%,#fff);background:color-mix(in srgb,var(--primary) 5%,#fff);color:var(--primary)!important;font-size:.88rem}
.sl-cta span{margin-left:auto;font-weight:700;white-space:nowrap}
.sl-cta:hover{text-decoration:none;background:color-mix(in srgb,var(--primary) 10%,#fff)}
.sl-grid{align-items:start;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.sl-list{display:flex;flex-direction:column;gap:16px}
.sl-item{border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.sl-item.sl-over{opacity:.6}
.sl-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/1;background:#f1f5f9}
.sl-thumb img{width:100%;height:100%;object-fit:cover}
.sl-no{position:absolute;top:8px;left:8px;background:rgba(15,23,42,.75);color:#fff;font-weight:700;font-size:.8rem;width:26px;height:26px;border-radius:99px;display:grid;place-items:center}
.sl-haslink{position:absolute;top:8px;right:8px;background:#fff;color:var(--primary);font-weight:700;font-size:.75rem;padding:3px 9px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sl-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sl-link{display:flex;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.sl-link > *{flex:1;min-width:150px}
.sl-act{display:flex;gap:4px;align-items:center;margin-top:8px;border-top:1px solid #f1f5f9;padding-top:8px;flex-wrap:wrap}
.sl-crop-dlg{width:min(880px,calc(100vw - 24px))}
.sl-crop-wrap{height:min(52vh,420px);background:#0f172a;border-radius:12px;overflow:hidden}
.sl-crop-wrap img{display:block;max-width:100%}
.sl-crop-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sl-crop-err{color:#b91c1c;min-height:1.2em;margin-top:6px}
.sl-mock{display:flex;gap:0;position:relative}
.sl-mock span{flex:1}.sl-mock span:nth-child(1){background:linear-gradient(120deg,#f97316,#facc15)}.sl-mock span:nth-child(2){background:linear-gradient(120deg,#0ea5e9,#6366f1)}.sl-mock span:nth-child(3){background:linear-gradient(120deg,#10b981,#14b8a6)}
@media(max-width:860px){.sl-grid{grid-template-columns:minmax(0,1fr)}}

/* ===== เมนูเว็บไซต์หลัก (หน้าบ้าน) ===== */
.tm-nav{gap:2px}
.tm-item{position:relative;display:flex;align-items:center}
.tm-nav a,.tm-top{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:500;white-space:nowrap}
.tm-nav a:hover{background:#f1f5f9;color:var(--ink);text-decoration:none}
.tm-nav a.on{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,#fff)}
.tm-ico{font-size:1rem;line-height:1}
.tm-caret{border:0;background:none;color:var(--muted);cursor:pointer;padding:6px 4px;margin-left:-8px;font-size:.75rem}
.tm-drop{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(15,23,42,.14);z-index:40}
.tm-drop a{display:flex;width:100%;color:#334155}
.tm-item.open .tm-drop{display:block}
@media (hover:hover) and (min-width:861px){.tm-item.has-sub:hover .tm-drop,.tm-item.has-sub:focus-within .tm-drop{display:block}}
.tm-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;padding:0 10px;flex:none}
.tm-burger span{display:block;height:2px;background:#334155;border-radius:2px;transition:transform .2s,opacity .2s}
@media (max-width:860px){
  .tm-burger{display:flex;order:5}
  .topbar .container{gap:8px}
  .tm-nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 12px 14px;box-shadow:0 18px 30px -18px rgba(15,23,42,.35);max-height:calc(100vh - 64px);overflow:auto}
  body.tm-open .tm-nav{display:flex}
  body.tm-open .tm-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.tm-open .tm-burger span:nth-child(2){opacity:0}
  body.tm-open .tm-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .tm-item{flex-wrap:wrap}
  .tm-item > a,.tm-item > .tm-top{flex:1;padding:12px}
  .tm-caret{margin:0;padding:12px;font-size:.9rem}
  .tm-drop{position:static;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 14px;padding:0 0 0 6px;min-width:0;width:100%}
}
.footer .container a{margin-left:4px}

/* หน้าเพจ (เว็บหลัก) */
.sp-hero{background:linear-gradient(135deg,#1e3a8a,#2563eb 55%,#0ea5e9);color:#fff;padding:40px 0 34px}
.sp-hero h1{color:#fff;font-size:clamp(1.6rem,4vw,2.4rem);margin:6px 0 0}
.sp-crumb{opacity:.85}.sp-crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sp-draft{display:inline-block;background:#fef3c7;color:#92400e;padding:5px 12px;border-radius:99px;font-size:.85rem;font-weight:600;margin-bottom:10px}
.sp-wrap{max-width:860px;padding-top:24px;padding-bottom:44px}
.sp-body{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,4vw,36px);font-size:1.03rem;line-height:1.85;overflow-wrap:anywhere}
.sp-body h2{font-size:1.4rem;margin:1.3em 0 .5em;padding-left:12px;border-left:4px solid #2563eb}
.sp-body h3{font-size:1.15rem;margin:1.2em 0 .4em;color:#1d4ed8}
.sp-body > :first-child{margin-top:0}
.sp-body p{margin:0 0 1em}
.sp-body img{max-width:100%;height:auto;border-radius:14px;margin:.6em 0;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.sp-body blockquote{margin:1.2em 0;padding:14px 18px;border-radius:12px;background:#eff6ff;border-left:4px solid #2563eb;font-weight:600}
.sp-body a{text-decoration:underline;text-underline-offset:3px}
.sp-body .ql-align-center{text-align:center}.sp-body .ql-align-right{text-align:right}.sp-body .ql-align-justify{text-align:justify}
.sp-body .ql-indent-1{padding-left:2em}.sp-body .ql-indent-2{padding-left:4em}
.sp-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ===== แอดมิน: จัดการเมนู / หน้าเพจ ===== */
.mn-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start}
.mn-form{position:sticky;top:16px}
.mn-card{padding:0;overflow:hidden}
.mn-cap{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#f8fafc}
.mn-table{margin:0}
.mn-table th{font-size:.82rem;color:#64748b;font-weight:600;background:#fff}
.mn-table td{vertical-align:middle}
.mn-act-h{text-align:right}
.mn-name{min-width:150px}
.mn-name b{margin-right:6px}
.mn-child .mn-name{padding-left:34px}
.mn-arrow{color:#94a3b8;margin-right:6px}
.mn-ico{margin-right:6px}
.mn-off .mn-name b{color:#94a3b8}
.mn-editing{background:#fffbeb}
.mn-target{white-space:nowrap}
.mn-type{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:99px;background:#f1f5f9;color:#475569;margin-right:6px}
.mn-type-page{background:#eff6ff;color:#1d4ed8}.mn-type-category{background:#f0fdf4;color:#15803d}.mn-type-url{background:#faf5ff;color:#7e22ce}
.mn-val{color:#64748b;font-size:.88rem;display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.mn-broken{color:#b45309}
.mn-act{display:flex;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
.mn-act form{margin:0}
.mn-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#334155;cursor:pointer;font:inherit;font-size:.95rem;text-decoration:none!important}
.mn-btn:hover:not([disabled]){border-color:#94a3b8;background:#f8fafc}
.mn-btn[disabled]{opacity:.35;cursor:default}
.mn-add{color:#2563eb;border-color:#93c5fd}
.mn-edit{background:#fbbf24;border-color:#f59e0b;color:#1f2937}
.mn-edit:hover{background:#f59e0b!important}
.mn-del{background:#ef4444;border-color:#dc2626;color:#fff}
.mn-del:hover:not([disabled]){background:#dc2626!important;border-color:#b91c1c}
.mn-ph{visibility:hidden}
.mn-seg{display:flex;border:1px solid #93c5fd;border-radius:10px;overflow:hidden;margin-bottom:10px}
.mn-seg label{flex:1;cursor:pointer}
.mn-seg input{position:absolute;opacity:0;pointer-events:none}
.mn-seg span{display:block;text-align:center;padding:9px 4px;font-weight:600;font-size:.88rem;color:#2563eb;border-left:1px solid #93c5fd}
.mn-seg label:first-child span{border-left:0}
.mn-seg input:checked + span{background:#2563eb;color:#fff}
.mn-seg input:focus-visible + span{outline:2px solid #1d4ed8;outline-offset:-3px}
.mn-nopage{padding:10px;background:#f8fafc;border-radius:10px}
.mn-iconpick summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.mn-iconpick summary::-webkit-details-marker{display:none}
.mn-iconpick .pe-icons{margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff}
.mn-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;margin-top:4px}
.mn-switch input{position:absolute;opacity:0;pointer-events:none}
.mn-sw{width:44px;height:24px;border-radius:99px;background:#cbd5e1;position:relative;transition:background .2s;flex:none}
.mn-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.mn-switch input:checked + .mn-sw{background:#2563eb}
.mn-switch input:checked + .mn-sw::after{transform:translateX(20px)}
.mn-switch input:focus-visible + .mn-sw{outline:2px solid #1d4ed8;outline-offset:2px}
@media(max-width:1100px){.mn-grid{grid-template-columns:minmax(0,1fr)}.mn-form{position:static}}
@media(max-width:640px){.mn-table thead{display:none}.mn-table tr{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line);padding:8px 0}.mn-table td{border:0;padding:4px 14px}.mn-child .mn-name{padding-left:30px}.mn-act{justify-content:flex-start}.mn-val{max-width:60vw}}
.mn-table td.mn-act{padding-right:14px}
body.tm-open .tm-burger span{display:none}
body.tm-open .tm-burger::after{content:"✕";font-size:1.1rem;color:#334155;text-align:center}
@media(max-width:420px){.topbar .brand{font-size:.95rem}.topbar .btn-ghost.btn-sm{padding:6px 8px}}

/* ===== หน้าแรก: แท็บร้านค้า ===== */
.sc-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 26px}
.sc-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;padding:9px 16px 9px 9px;border-radius:99px;
  border:1.5px solid var(--line);background:#fff;color:#334155;transition:all .18s;text-decoration:none!important}
.sc-tab b{font-size:.78rem;background:#f1f5f9;color:#475569;padding:1px 8px;border-radius:99px}
.sc-ico{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;font-size:1.05rem;background:#f1f5f9;transition:transform .2s}
.sc-tab:hover{border-color:#94a3b8;transform:translateY(-1px)}
.sc-tab:hover .sc-ico{transform:scale(1.12) rotate(-6deg)}
.sc-all .sc-ico{background:#dbeafe}.sc-free .sc-ico{background:#ccfbf1}.sc-shop .sc-ico{background:#fef3c7}.sc-pro .sc-ico{background:#ede9fe}.sc-managed .sc-ico{background:linear-gradient(135deg,#2b1d00,#5c4300)}
.sc-tab.on{color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(15,23,42,.45)}
.sc-tab.on .sc-ico{background:rgba(255,255,255,.22)}
.sc-tab.on b{background:rgba(255,255,255,.25);color:#fff}
.sc-all.on{background:linear-gradient(135deg,#1d4ed8,#2563eb)}
.sc-free.on{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.sc-shop.on{background:linear-gradient(135deg,#d97706,#f59e0b)}
.sc-pro.on{background:linear-gradient(135deg,#6d28d9,#a855f7)}
.sc-managed.on{background:linear-gradient(135deg,#1c1400,#5c4300 60%,#8a6500);color:#f5d77a;border:1px solid #d4a017}
.sc-managed.on b{color:#f5d77a}
.sc-panel{animation:scIn .3s ease}
@keyframes scIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sc-tabs-sm{justify-content:flex-start;margin:0 0 16px}
.sc-tabs-sm .sc-tab{font-size:.86rem;padding:6px 14px 6px 6px}
.sc-tabs-sm .sc-ico{width:26px;height:26px;font-size:.9rem}
@media(max-width:640px){.sc-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scrollbar-width:none}.sc-tab{flex:none}}

/* การ์ดร้าน: ป้ายแพ็กเกจ / ร้านแนะนำ */
.shop-card .cover{position:relative}
.sc-badge{position:absolute;top:8px;right:8px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.92);color:#6d28d9;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sc-badge.gold{background:linear-gradient(135deg,#2b1d00,#5c4300);color:#f5d77a;border:1px solid #d4a017}
.sc-ribbon{position:absolute;top:8px;left:8px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;background:#f59e0b;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.shop-card.sc-plan-managed{border-color:#d4a017;box-shadow:0 0 0 1px #f5d77a inset}
.shop-card.sc-plan-managed .cover{box-shadow:inset 0 -3px 0 #d4a017}
.shop-card.sc-feat{box-shadow:0 0 0 2px #f59e0b}

/* ===== แบนเนอร์โฆษณา ===== */
.ad-wrap{margin-top:22px;margin-bottom:6px}
.ad-slot{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/1;background:#f1f5f9;box-shadow:0 10px 30px -18px rgba(15,23,42,.5)}
.ad-item{position:absolute;inset:0;opacity:0;transition:opacity .7s;display:block}
.ad-item.on{opacity:1;z-index:1}
.ad-item img{width:100%;height:100%;object-fit:cover}
.ad-tag{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;padding:2px 8px;border-radius:99px}
.ad-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:5px}
.ad-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.6);transition:width .25s}.ad-dots i.on{background:#fff;width:18px}

/* ===== แอดมิน: โฆษณา ===== */
.ads-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.ads-stats .card{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.ads-stats span{font-size:.85rem;color:#64748b}.ads-stats b{font-size:1.5rem}.ads-stats small{color:#94a3b8;font-size:.78rem}
.ads-h{margin:26px 0 10px}
.ads-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ads-slot{display:flex;gap:12px;align-items:center;background:#fff;border:1px dashed #cbd5e1;border-radius:14px;padding:12px 14px}
.ads-slot.has{border-style:solid;border-color:#86efac;background:#f0fdf4}
.ads-slot-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:#f1f5f9;flex:none}
.ads-table td{vertical-align:middle}
.ads-thumb{width:200px;max-width:100%;aspect-ratio:4/1;border-radius:8px;overflow:hidden;background:#f1f5f9;margin-bottom:6px}
.ads-thumb img{width:100%;height:100%;object-fit:cover}
.ads-editrow td{background:#fffbeb}
.ads-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
.ads-form .field{margin-bottom:6px}
.ads-wide{grid-column:1/-1}
.ad-link{display:flex;gap:8px;flex-wrap:wrap}.ad-link > *{flex:1;min-width:160px}
@media(max-width:900px){.ads-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ads-form{grid-template-columns:minmax(0,1fr)}.ads-slots{grid-template-columns:minmax(0,1fr)}}
td.mn-act{display:table-cell;text-align:right;white-space:nowrap}
td.mn-act > form,td.mn-act > a,td.mn-act > button,td.mn-act > span{display:inline-grid;vertical-align:middle;margin-left:2px}
td.mn-act > form{display:inline-block}
@media(max-width:640px){td.mn-act{text-align:left}}

/* ===== หน้าร้านค้าทั้งหมด: หมวดอยู่ในแถบหัวขวา · แท็บแพ็กเกจอยู่ในการ์ดขาว ===== */
.dir-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center}
.dir-hero-side{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:14px;backdrop-filter:blur(6px)}
.dir-cats-title{font-size:.82rem;font-weight:700;color:#dbeafe;margin:0 0 8px 2px;letter-spacing:.2px}
.cat-chips.dir-cats{display:flex;flex-wrap:wrap;gap:6px;overflow:visible;padding:0;margin:0;background:none;border:0;box-shadow:none}
.dir-cats .cat-chip{padding:5px 11px;font-size:.8rem;gap:5px;background:#fff;border-color:transparent;box-shadow:0 2px 6px rgba(15,23,42,.12)}
.dir-cats .cat-chip span{font-size:.9rem}
.dir-cats .cat-chip:hover{transform:translateY(-1px);background:#fff}
.dir-cats .cat-chip.on{background:var(--c);color:#fff!important;box-shadow:0 0 0 2px #fff,0 6px 14px rgba(15,23,42,.25)}
.sc-tabs.dir-plan-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:12px;margin:0 0 22px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px rgba(30,64,175,.08);scrollbar-width:thin}
.dir-plan-tabs .sc-tab{flex:none}
@media(max-width:900px){
  .dir-hero-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .dir-hero-side{padding:10px}
  .cat-chips.dir-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .dir-cats .cat-chip{flex:none}
}

/* ===== แอดมิน: แชตบอท ===== */
.hp-grid{align-items:start;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin-bottom:8px}
.hp-q{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.hp-q form{margin:0}
.hp-top{margin:0;padding-left:20px}
.hp-top li{padding:5px 0;border-bottom:1px dashed #f1f5f9}
.hp-top li span{margin-right:6px}.hp-top li b{color:#2563eb}.hp-top li em{font-style:normal;font-size:.75rem;color:#b45309;background:#fef3c7;border-radius:99px;padding:1px 7px;margin-left:6px}
.hp-filter{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line);background:#f8fafc;flex-wrap:wrap}
.hp-filter .input{flex:1;min-width:150px}
.hp-set .mn-switch{display:flex;margin-bottom:10px}
@media(max-width:900px){.hp-grid{grid-template-columns:minmax(0,1fr)}}

/* เมนูซ้าย: จอเตี้ย/เมนูเยอะ → เลื่อนดูได้ ไม่ตกขอบ */
.side{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:9px}
.side > *{flex-shrink:0}
@media (min-width:861px) and (max-height:860px){
  .side{padding-top:14px;padding-bottom:12px}
  .side .brand{padding-bottom:12px}
  .side a.nav-item{padding:7px 12px;margin-bottom:1px}
  .side .shop-box{padding:10px;margin-top:12px}
  .side .tier-card{padding:10px}
}

/* ===== POS: หน้าแนะนำ (แพ็กเกจยังไม่รองรับ) ===== */
.pos-lock-hero{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.pos-lock-ico{width:56px;height:56px;border-radius:16px;background:#fef3c7;display:grid;place-items:center;font-size:1.6rem;flex:none}
.pos-lock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pos-lock-grid div{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pos-lock-grid span{color:var(--muted);font-size:.88rem}

/* ===== ป้าย QR สินค้า ===== */
.lb-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.lb-list{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer}
.lb-row:last-child{border-bottom:0}
.lb-row:hover{background:#f8fafc}
.lb-row.on{background:var(--primary-50)}
.lb-row img,.lb-ph{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:#f1f5f9;display:grid;place-items:center}
.lb-n{flex:1;min-width:0;font-weight:600;font-size:.92rem;line-height:1.3}
.lb-n small{display:block;font-weight:400;color:var(--muted)}
.lb-q{width:64px;border:1px solid var(--line);border-radius:8px;padding:4px 6px;font:inherit;text-align:center}
.lb-q:disabled{opacity:.35}
.lb-checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.lb-adv{margin-top:6px;border-top:1px dashed var(--line);padding-top:10px}
.lb-adv summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--primary)}
.lb-preview{background:#cbd5e1;border-radius:14px;padding:12px;margin-top:12px;overflow:auto;max-height:80vh}
#lbSheets{display:flex;flex-direction:column;align-items:center;gap:12px}
#lbSheets.is-roll{flex-direction:row;flex-wrap:wrap;justify-content:center}
#lbSheets .lb-sheet{box-shadow:0 4px 16px rgba(15,23,42,.18)}
@media(max-width:900px){.lb-wrap{grid-template-columns:1fr}.lb-checks{grid-template-columns:1fr}}

/* ป้าย POS ในรายการออเดอร์ */
.badge-pos{background:#0f172a;color:#fff}
.nav-item .nav-lock{margin-left:auto;font-size:.75rem;opacity:.7}
.chip-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.pos-pay-info{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:8px 0;font-size:.92rem}
/* ยอดขาย: แยกช่องทาง */
.ch-split{margin-bottom:16px}
.ch-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.ch-row>div:not(.ch-bar){display:flex;flex-direction:column;line-height:1.3}
.ch-row small{color:var(--muted);font-size:.8rem}
.ch-row b{font-size:1.25rem}
.ch-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:#f1f5f9}
.ch-bar .on{background:linear-gradient(90deg,#2563eb,#3b82f6)}
.ch-bar .pos{background:linear-gradient(90deg,#0f766e,#14b8a6)}
.ch-pay{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.9rem;border-top:1px dashed var(--line);padding-top:10px}
@media(max-width:560px){.ch-row{grid-template-columns:1fr 1fr}.ch-bar{grid-column:1/-1;order:3}}

/* ===== หน้าราคา: ตารางเปรียบเทียบ ===== */
.plan-more{display:block;text-align:center;font-size:.88rem;font-weight:600;margin:4px 0 10px}
.cmp{margin-top:56px}
.cmp h2{text-align:center}
.cmp .sub{text-align:center;color:var(--muted);margin:-4px 0 20px}
.cmp-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.cmp-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.93rem}
.cmp-table th,.cmp-table td{padding:11px 14px;border-bottom:1px solid #f1f5f9;text-align:center;vertical-align:middle}
.cmp-table tbody th[scope=row]{text-align:left;font-weight:500;color:#334155;position:sticky;left:0;background:#fff;z-index:1;min-width:230px}
.cmp-table thead th{position:sticky;top:0;background:#fff;z-index:2;font-size:1rem;padding-top:16px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.cmp-table thead th small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.cmp-ico{display:block;font-size:1.3rem;line-height:1.2}
.cmp-table .hot{background:#f0fdfa}
.cmp-table thead th.hot{background:#ccfbf1;color:var(--primary)}
.cmp-g th{text-align:left!important;background:#f8fafc!important;font-size:.82rem;font-weight:700;color:var(--primary);letter-spacing:.02em;padding:8px 14px;position:sticky;left:0}
.cmp-y{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:99px;background:#dcfce7;color:#15803d;font-weight:800;font-size:.85rem}
.cmp-n{color:#cbd5e1;font-weight:700}
.cmp-t{font-weight:600;color:var(--ink);font-size:.88rem}
.cmp-table tfoot td{padding:16px 10px;border-bottom:0}
.cmp-table tbody tr:not(.cmp-g):hover th,.cmp-table tbody tr:not(.cmp-g):hover td{background:#f8fafc}
@media(max-width:720px){.cmp-table tbody th[scope=row]{min-width:170px;font-size:.85rem;box-shadow:2px 0 6px -3px rgba(15,23,42,.15)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:720px){
  .cmp-table{min-width:540px;font-size:.84rem}
  .cmp-table tbody th[scope=row]{min-width:0;width:150px;max-width:150px;font-size:.8rem;padding:9px 10px}
  .cmp-table th,.cmp-table td{padding:9px 6px}
  .cmp-t{font-size:.78rem}
  .cmp .sub::after{content:"👉 เลื่อนตารางไปทางขวาเพื่อดูทุกแพ็กเกจ →";display:block;font-size:.8rem;margin-top:4px}
}

/* ===== หน้า "วิธีเปิดร้าน" (how-to) ===== */
.sp-wrap.sp-wide{max-width:1080px}
.sp-more{margin-top:28px}
.ht{display:flex;flex-direction:column;gap:28px}
.ht section{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,4vw,40px)}
.ht h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:0 0 10px}
.ht-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--primary);background:var(--primary-50);padding:3px 12px;border-radius:99px;margin-bottom:8px}
.ht-over{text-align:center;background:linear-gradient(180deg,#f0fdfa,#fff 70%)!important}
.ht-over h2 span{display:block;font-size:.95rem;font-weight:500;color:var(--muted);margin-top:4px}
.ht-flow{list-style:none;padding:0;margin:26px 0 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative}
.ht-flow::before{content:"";position:absolute;top:40px;left:12.5%;right:12.5%;border-top:3px dashed #99f6e4;z-index:0}
.ht-flow li{position:relative;z-index:1}
.ht-flow a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);text-decoration:none!important;padding:4px;border-radius:16px;transition:transform .15s}
.ht-flow a:hover{transform:translateY(-3px)}
.ht-dot{position:relative;width:80px;height:80px;border-radius:24px;background:#fff;border:2px solid #5eead4;display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(15,118,110,.5)}
.ht-dot .ico{font-size:2.1rem;line-height:1}
.ht-dot b{position:absolute;top:-9px;right:-9px;width:28px;height:28px;border-radius:99px;background:var(--primary);color:#fff;font-size:.85rem;display:grid;place-items:center;border:3px solid #fff}
.ht-flow strong{font-size:1rem;margin-top:4px}
.ht-flow small{color:var(--muted);font-size:.8rem;background:#f1f5f9;padding:1px 10px;border-radius:99px}
.ht-prep{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;text-align:left}
.ht-prep>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.ht-prep ul{margin:6px 0 0;padding-left:20px;color:#334155;font-size:.94rem;line-height:1.8}
.ht-step{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,4vw,44px);align-items:center}
.ht-step.rev .ht-text{order:2}
.ht-num{display:inline-block;font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#0f766e,#14b8a6);padding:4px 12px;border-radius:99px;margin-bottom:10px}
.ht-text p{margin:0 0 10px;color:#334155}
.ht-tips,.ht-sub{margin:0 0 14px;padding-left:22px;line-height:1.85;color:#334155}
.ht-sub li::marker{color:var(--primary);font-weight:800}
.ht-tips li::marker{color:var(--primary)}
.ht-note{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:10px 14px;font-size:.92rem}
.ht-text code{background:#f1f5f9;padding:1px 6px;border-radius:6px;font-size:.88em}
.ht-mock{background:linear-gradient(135deg,#e0f2fe,#f0fdfa);border-radius:20px;padding:clamp(16px,3vw,28px);display:grid;place-items:center}
.mk-card{width:min(100%,330px);background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 40px -18px rgba(15,23,42,.35);font-size:.85rem}
.mk-center{text-align:center}
.mk-title{font-weight:700;font-size:1rem;margin-bottom:10px}
.mk-btn{border-radius:10px;padding:9px;text-align:center;font-weight:700;margin-bottom:8px;border:1px solid var(--line)}
.mk-google span{color:#4285f4;font-weight:800}
.mk-line{background:#06c755;color:#fff;border-color:#06c755}
.mk-main{background:var(--primary);color:#fff;border-color:var(--primary);margin:10px 0 0}
.mk-or{text-align:center;color:var(--muted);font-size:.75rem;margin:6px 0 8px}
.mk-field{border:1px solid #cbd5e1;border-radius:9px;padding:7px 10px;margin-bottom:8px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-link{font-size:.78rem;color:var(--primary);border-color:#5eead4;background:#f0fdfa}
.mk-label{font-weight:700;font-size:.75rem;margin-bottom:3px}
.mk-small{color:var(--muted);font-size:.75rem;margin:6px 0 10px}
.mk-ok{color:#16a34a;font-size:.75rem;margin:-4px 0 8px}
.mk-prog{display:flex;gap:6px}.mk-prog i{flex:1;height:6px;border-radius:9px;background:#e2e8f0}.mk-prog i.on{background:var(--primary)}
.mk-colors{display:flex;gap:6px;margin-bottom:4px}.mk-colors i{width:22px;height:22px;border-radius:99px}.mk-colors i.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #0f766e}
.mk-photo{height:110px;border-radius:12px;background:linear-gradient(135deg,#fef3c7,#fde68a);display:grid;place-items:center;font-size:3rem;position:relative;margin-bottom:8px}
.mk-photo span{position:absolute;left:8px;bottom:6px;font-size:.68rem;background:rgba(15,23,42,.7);color:#fff;padding:1px 8px;border-radius:99px}
.mk-ai{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;border-radius:10px;padding:8px;text-align:center;font-weight:700;margin-bottom:10px}
.mk-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk-chips{display:flex;gap:6px;flex-wrap:wrap}.mk-chips span{border:1.5px solid #cbd5e1;border-radius:9px;padding:4px 10px;font-size:.78rem}.mk-chips .on{border-color:#0d9488;background:#f0fdfa;color:#0f766e;font-weight:700}
.mk-row2{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.mk-pill{border-radius:9px;padding:6px 12px;font-weight:700;font-size:.78rem;color:#fff}.mk-fb{background:#1877f2}
.mk-qr{display:flex;justify-content:center}.mk-qr img,.mk-qr canvas{border:6px solid #fff;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.ht-daily{text-align:center}
.ht-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;text-align:left}
.ht-cards>div{border:1px solid var(--line);border-radius:16px;padding:18px;background:#f8fafc}
.ht-cards .ico{font-size:1.8rem;display:block;margin-bottom:6px}
.ht-cards p{margin:6px 0 0;color:var(--muted);font-size:.92rem;line-height:1.7}
.ht-up{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:18px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:14px 18px;text-align:left;font-size:.94rem}
.ht-faq details{border-bottom:1px solid var(--line);padding:4px 0}
.ht-faq summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:10px}
.ht-faq summary::-webkit-details-marker{display:none}
.ht-faq summary::after{content:"+";color:var(--primary);font-weight:800;font-size:1.2rem;line-height:1}
.ht-faq details[open] summary::after{content:"−"}
.ht-faq details p{margin:0 0 12px;color:#334155;line-height:1.8}
@media(max-width:860px){
  .ht-step{grid-template-columns:1fr}
  .ht-step.rev .ht-text{order:0}
  .ht-cards{grid-template-columns:1fr}
  .ht-up{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .ht-flow{grid-template-columns:1fr 1fr;row-gap:20px}
  .ht-flow::before{display:none}
  .ht-prep{grid-template-columns:1fr}
}
.ht-step>*{min-width:0}.ht-text{overflow-wrap:anywhere}

/* ===== หน้า "คำถามที่พบบ่อย" (faq) ===== */
.ht-faqlink{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#eff6ff,#f0fdfa)!important}
.ht-faqlink h2{margin:0 0 4px}.ht-faqlink p{margin:0;color:#334155}
.ht-faqlink-ico{font-size:2.4rem;width:64px;height:64px;border-radius:18px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 20px -12px rgba(15,23,42,.4)}
.ht-faqlink .btn{margin-left:auto;flex:none}
.fq{display:flex;flex-direction:column;gap:22px}
.fq section,.fq-none{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3.5vw,34px)}
.fq h2{font-size:clamp(1.15rem,2.4vw,1.4rem);margin:0 0 12px}
.fq-top{text-align:center;background:linear-gradient(180deg,#f0fdfa,#fff 75%)!important}
.fq-search{display:flex;align-items:center;gap:10px;max-width:620px;margin:14px auto 16px;background:#fff;border:2px solid #cbd5e1;border-radius:16px;padding:4px 16px;transition:.15s}
.fq-search:focus-within{border-color:#0d9488;box-shadow:0 0 0 4px rgba(13,148,136,.12)}
.fq-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1.05rem;padding:11px 0;background:transparent}
.fq-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fq-cats button{border:1px solid #cbd5e1;background:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-size:.9rem;cursor:pointer;color:#334155}
.fq-cats button small{color:#94a3b8}
.fq-cats button.on{background:var(--primary);border-color:var(--primary);color:#fff}.fq-cats button.on small{color:#ccfbf1}
.fq-pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fq-pop-grid a{display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;color:var(--ink);font-weight:600;font-size:.94rem;line-height:1.45;text-decoration:none!important;transition:.15s}
.fq-pop-grid a:hover{border-color:#5eead4;background:#f0fdfa;transform:translateY(-2px)}
.fq-pop-grid a span{font-size:1.4rem;flex:none}
.fq-groups{display:flex;flex-direction:column;gap:18px}
.fq-group h2{display:flex;align-items:center;gap:10px}
.fq-group h2 small{font-size:.8rem;font-weight:500;color:var(--muted)}
.fq-ico{width:40px;height:40px;border-radius:12px;background:var(--primary-50);display:grid;place-items:center;font-size:1.3rem}
.fq-item{border-bottom:1px solid #f1f5f9;border-radius:12px;transition:background .3s}
.fq-item:last-child{border-bottom:0}
.fq-item.hl{background:#fef9c3}
.fq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:14px 6px;font-weight:600}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:99px;background:#f1f5f9;color:var(--primary);display:grid;place-items:center;font-weight:800;transition:.2s}
.fq-item[open] summary::after{content:"−";background:var(--primary);color:#fff}
.fq-item[open] summary{color:var(--primary)}
.fq-ans{padding:0 6px 16px;color:#334155;line-height:1.85;overflow-wrap:anywhere}
.fq-link{display:table;margin-top:12px;padding:6px 14px;border-radius:99px;background:var(--primary-50);font-weight:700;font-size:.88rem;text-decoration:none!important}
.fq-link:hover{background:#ccfbf1}
.fq-none{text-align:center}.fq-none-ico{font-size:2.6rem}
.fq-help{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#1d4ed8,#0ea5e9)!important;color:#fff;border:0!important}
.fq-help h2{color:#fff;margin:0 0 4px}.fq-help p{margin:0;opacity:.95}
.fq-help-ico{font-size:2.6rem;width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.fq-help-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;flex:none}
.fq-help .btn{background:#fff;color:#1d4ed8}.fq-help .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
@media(max-width:860px){.fq-pop-grid{grid-template-columns:1fr 1fr}.fq-help,.ht-faqlink{flex-direction:column;text-align:center}.fq-help-acts,.ht-faqlink .btn{margin:0 auto}}
@media(max-width:560px){.fq-pop-grid{grid-template-columns:1fr}.fq-cats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.fq-cats button{flex:none}}

/* ===== หน้า "ติดต่อเรา" (contact) ===== */
.ct{display:flex;flex-direction:column;gap:22px}
.ct section{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3.5vw,32px)}
.ct h2{font-size:clamp(1.12rem,2.3vw,1.35rem);margin:0 0 12px}
.ct-intro{text-align:center;background:linear-gradient(180deg,#f0fdfa,#fff 75%)!important}
.ct-intro p{color:#334155;margin:0 0 12px}
.ct-hours{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 14px;font-weight:600;font-size:.9rem}
.ct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px}
.ct-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;cursor:pointer;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;text-decoration:none!important;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.ct-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(15,23,42,.45)}
.ct-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c,#0f766e)}
.ct-ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;background:var(--cb,#f0fdfa);margin-bottom:8px}
.ct-card b{font-size:1.05rem}
.ct-val{font-weight:700;color:var(--c,#0f766e);font-size:1.02rem;overflow-wrap:anywhere}
.ct-card small{color:var(--muted)}
.ct-go{margin-top:10px;font-weight:700;font-size:.88rem;color:var(--c,#0f766e)}
.ct-line{--c:#06c755;--cb:#dcfce7}.ct-phone{--c:#2563eb;--cb:#dbeafe}.ct-bot{--c:#7c3aed;--cb:#ede9fe}.ct-mail{--c:#ea580c;--cb:#ffedd5}.ct-fb{--c:#1877f2;--cb:#dbeafe}
.ct-main{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.ct-main>*{min-width:0}
.ct-side{display:flex;flex-direction:column;gap:18px}
.ct-side p{color:#334155;font-size:.94rem;line-height:1.75}
.ct-topics{display:flex;flex-wrap:wrap;gap:6px}
.ct-topics label{cursor:pointer;margin:0;font-weight:500}
.ct-topics input{position:absolute;opacity:0;pointer-events:none}
.ct-topics span{display:inline-block;border:1.5px solid #cbd5e1;border-radius:99px;padding:6px 13px;font-size:.88rem;background:#fff}
.ct-topics input:checked+span{border-color:#0d9488;background:#f0fdfa;color:#0f766e;font-weight:700}
.ct-topics input:focus-visible+span{outline:2px solid #0d9488;outline-offset:2px}
.ct .req{color:#dc2626}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-quick{display:flex;flex-direction:column;gap:8px}
.ct-quick a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;color:var(--ink);font-weight:600;text-decoration:none!important;transition:.15s}
.ct-quick a:hover{background:#f0fdfa;border-color:#5eead4}
.ct-quick span{font-size:1.25rem}.ct-quick i{margin-left:auto;font-style:normal;color:var(--primary)}
.ct-shopowner{background:#fffbeb!important;border-color:#fde68a!important}
.ct-sent{text-align:center;padding:20px 0}
.ct-sent-ico{font-size:3rem}
.ct-sent p{color:#334155}
@media(max-width:860px){.ct-main{grid-template-columns:1fr}}

/* ===== หลังร้าน: เมนูอัตโนมัติ / รีวิว & ข้อความ ===== */
.pm-auto{background:linear-gradient(135deg,#faf5ff,#fff)}
.pm-auto-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.pm-auto-row:last-of-type{border-bottom:0;margin-bottom:8px}
.pm-auto-row>div{flex:1;min-width:0;line-height:1.35}
.pm-auto-row small{display:block;color:var(--muted);font-size:.8rem}
.pm-auto-ico{width:42px;height:42px;border-radius:12px;background:#ede9fe;display:grid;place-items:center;font-size:1.3rem;flex:none}
.pe-kinds{display:grid;gap:8px}
.pe-kind{display:block;cursor:pointer;margin:0}
.pe-kind input{position:absolute;opacity:0}
.pe-kind span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:400}
.pe-kind small{display:block;color:var(--muted);font-size:.8rem}
.pe-kind input:checked+span{border-color:#7c3aed;background:#faf5ff;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.pe-kind.off{opacity:.5;cursor:not-allowed}
.stars{display:inline-flex;gap:1px;color:#e2e8f0;line-height:1}.stars i{font-style:normal}.stars i.on{color:#f59e0b}
.ib-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ib-tabs a{padding:10px 16px;border-bottom:3px solid transparent;color:var(--muted);font-weight:600;text-decoration:none!important;display:flex;gap:6px;align-items:center}
.ib-tabs a.on{color:var(--primary);border-bottom-color:var(--primary)}
.ib-sum{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.ib-score{display:flex;align-items:center;gap:10px}
.ib-score b{font-size:2rem}.ib-score small{color:var(--muted)}
.ib-auto{margin-left:auto}
.ib-new{border-left:4px solid #dc2626}
.ib-msg{background:#f8fafc;border-radius:12px;padding:12px 14px;margin:10px 0;line-height:1.75;overflow-wrap:anywhere}
.ib-contact{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ib-act{gap:8px;margin-top:10px}
.form-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:.93rem}
.form-err ul{margin:6px 0 0;padding-left:20px}

/* ===== ไทม์ไลน์สถานะออเดอร์ ===== */
.otl{margin-bottom:18px;padding:22px 22px 18px}
.otl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));position:relative}
.otl-steps::before,.otl-steps::after{content:"";position:absolute;top:22px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:4px;border-radius:9px;background:#e2e8f0}
.otl-steps::after{right:auto;width:calc((100% - 100% / var(--n)) * var(--p));background:linear-gradient(90deg,#16a34a,#22c55e);transition:width .6s ease}
.otl-steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:0 4px}
.otl-dot{width:48px;height:48px;border-radius:99px;display:grid;place-items:center;font-size:1.25rem;font-weight:800;background:#fff;border:3px solid #e2e8f0;color:#94a3b8;margin-bottom:6px}
.otl-steps b{font-size:.92rem}
.otl-steps small{font-size:.76rem;color:var(--muted)}
.otl-done .otl-dot{background:#16a34a;border-color:#16a34a;color:#fff}
.otl-now .otl-dot{background:#fff;border-color:#2563eb;box-shadow:0 0 0 6px rgba(37,99,235,.15);animation:otlPulse 1.6s infinite}
.otl-now b{color:#1d4ed8}
.otl-todo b{color:#94a3b8;font-weight:600}
.otl-cancel .otl-dot{background:#dc2626;border-color:#dc2626;color:#fff}
.otl-cancel b{color:#dc2626}
.is-done .otl-steps li:last-child .otl-dot{background:linear-gradient(135deg,#16a34a,#22c55e);transform:scale(1.08)}
@keyframes otlPulse{50%{box-shadow:0 0 0 11px rgba(37,99,235,0)}}
.otl-next{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);flex-wrap:wrap}
.otl-next span{color:var(--muted);font-size:.9rem}
.otl-next.done span{color:#15803d;font-weight:700;font-size:1rem}
.os-hl{box-shadow:0 0 0 4px rgba(37,99,235,.3)!important;transition:box-shadow .3s}
.os-hint{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:10px;padding:8px 12px;font-weight:600;font-size:.9rem;margin-bottom:12px}
/* ป๊อปอัปผลการเปลี่ยนสถานะ */
.os-toast{position:fixed;left:50%;top:18px;z-index:1200;transform:translate(-50%,-140%);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);display:flex;align-items:center;gap:14px;
  width:min(560px,calc(100vw - 24px));background:#fff;border-radius:18px;padding:14px 14px 14px 16px;box-shadow:0 24px 50px -14px rgba(15,23,42,.45);border-left:6px solid var(--osc,#2563eb)}
.os-toast.show{transform:translate(-50%,0)}
.os-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--osb,#eff6ff);flex:none;font-weight:800;color:var(--osc)}
.os-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.os-txt b{font-size:1.05rem}
.os-txt small{color:var(--muted)}
.os-go{flex:none;background:#06c755;color:#fff!important;font-weight:700;border-radius:10px;padding:8px 12px;text-decoration:none!important;font-size:.88rem}
.os-x{flex:none;border:0;background:#f1f5f9;border-radius:99px;width:30px;height:30px;cursor:pointer;color:#64748b}
.os-blue{--osc:#2563eb;--osb:#eff6ff}.os-amber{--osc:#d97706;--osb:#fef3c7}.os-violet{--osc:#7c3aed;--osb:#ede9fe}.os-green{--osc:#16a34a;--osb:#dcfce7}.os-red{--osc:#dc2626;--osb:#fee2e2}
@media(max-width:640px){
  .otl{padding:16px 10px 14px}
  .otl-dot{width:38px;height:38px;font-size:1rem}
  .otl-steps::before,.otl-steps::after{top:17px}
  .otl-steps b{font-size:.78rem}.otl-steps small{font-size:.66rem}
  .os-go{padding:6px 8px;font-size:.8rem}
}
@media print{.os-toast{display:none}}

/* ===== ลบสินค้า / ถังขยะ ===== */
.pd-zone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px dashed var(--line)}
.pd-dlg{width:min(480px,calc(100vw - 32px))}
.pd-sold{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:10px 14px;font-size:.93rem;margin-bottom:10px;line-height:1.6}
.pd-facts{margin:0 0 16px;padding-left:20px;color:#334155;font-size:.92rem;line-height:1.75}
.tr-list{padding:6px 18px}
.tr-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #f1f5f9}
.tr-row:last-child{border-bottom:0}
.tr-row img,.tr-ph{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:#f1f5f9;display:grid;place-items:center;font-size:1.4rem;filter:grayscale(.5)}
.tr-main{flex:1;min-width:0}
.tr-left{display:inline-block;margin-top:4px;font-size:.78rem;font-weight:700;background:#f1f5f9;color:#475569;border-radius:99px;padding:1px 10px}
.tr-left.urgent{background:#fee2e2;color:#b91c1c}
.tr-acts{display:flex;gap:6px;flex:none}
@media(max-width:560px){.tr-row{flex-wrap:wrap}.tr-acts{width:100%;justify-content:flex-end}}

/* ===== หน้าแรก: ข้อความ & พื้นหลังที่แอดมินตั้งเอง ===== */
.hero[style*="--hero-bg"]{background:var(--hero-bg)}
.hero h1.hero-title{margin-top:16px}
.hero .hero-t1{color:var(--hero-t1,inherit)}
.hero .hero-t2{color:var(--hero-t2,var(--primary))}
.hero .hero-btns{margin-top:24px}
.hero .hero-note{margin-top:12px}
.hero-mark{background:linear-gradient(transparent 55%,#fde68a 55%);color:inherit;padding:0 .1em;border-radius:2px}
.hero.hero-size-s h1{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.hero.hero-size-l h1{font-size:clamp(2.2rem,5.6vw,3.8rem);line-height:1.15}
.hero.hero-center .hero-copy{text-align:center}
.hero.hero-center .hero-copy .lead{margin-left:auto;margin-right:auto}
.hero.hero-center .hero-btns{justify-content:center}
.hero.is-dark{color:#e2e8f0}
.hero.is-dark h1{color:#fff}
.hero.is-dark .hero-t2{color:var(--hero-t2,#fde047)}
.hero.is-dark p.lead{color:#e2e8f0}
.hero.is-dark .muted{color:#cbd5e1}
.hero.is-dark .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.hero.is-dark .btn:not(.btn-outline){background:#fff;color:#0f172a;border-color:#fff}
.hero.is-dark .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero.is-dark .btn-outline:hover{background:rgba(255,255,255,.12)}
.hero.is-dark .hero-mark{background:linear-gradient(transparent 55%,rgba(253,224,71,.45) 55%)}
.hero.is-dark .hero-blob{background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.08))}

/* แอดมิน: ตั้งค่าหน้าแรก */
.hx-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:1100px){.hx-wrap{grid-template-columns:1fr}}
.hx-prev-box{position:sticky;top:12px}
.hx-prev{border-radius:16px;border:1px solid var(--line);padding:22px 20px;overflow:hidden;display:grid;grid-template-columns:1fr 110px;gap:16px;align-items:center;background:var(--hero-bg)}
.hx-prev .pill{font-size:.72rem;padding:2px 10px}
.hx-prev h1{font-size:1.45rem;margin:10px 0 8px;line-height:1.25}
.hx-prev.hero-size-s h1{font-size:1.2rem}.hx-prev.hero-size-l h1{font-size:1.8rem}
.hx-prev .lead{font-size:.82rem;color:#334155;margin:0 0 10px}
.hx-prev .btn{padding:6px 12px;font-size:.78rem}
.hx-prev .row{gap:6px}
.hx-prev .hero-note{font-size:.7rem;margin:8px 0 0}
.hx-prev img{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 8px 20px rgba(15,23,42,.18)}
.hx-prev.hero-center .hero-copy{text-align:center}.hx-prev.hero-center .row{justify-content:center}
@media(max-width:520px){.hx-prev{grid-template-columns:1fr}.hx-prev img{display:none}}
.hx-swatches{display:flex;flex-wrap:wrap;gap:8px}
.hx-sw{position:relative;width:46px;height:46px;border-radius:12px;border:2px solid var(--line);cursor:pointer;padding:0;background-clip:padding-box}
.hx-sw input{position:absolute;opacity:0;pointer-events:none}
.hx-sw:has(input:checked){border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.3)}
.hx-sw:has(input:checked)::after{content:"✓";position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:#2563eb;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.hx-sw.custom{display:grid;place-items:center;font-size:1.1rem;background:conic-gradient(#f43f5e,#f59e0b,#22c55e,#3b82f6,#a855f7,#f43f5e)}
.hx-custom{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.hx-custom input[type=color],.hx-colors input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.hx-colors{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hx-dot{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.hx-dot.auto{background:linear-gradient(135deg,#fff 45%,#94a3b8 45% 55%,#fff 55%);font-size:0}
.hx-dot.on{box-shadow:0 0 0 2px #2563eb}
.hx-tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.hx-tools button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:2px 10px;font-size:.8rem;cursor:pointer}
.hx-tools button:hover{background:#f1f5f9}
.hx-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.hx-seg label{padding:6px 12px;cursor:pointer;font-size:.88rem;border-left:1px solid var(--line)}
.hx-seg label:first-child{border-left:0}
.hx-seg input{display:none}
.hx-seg label:has(input:checked){background:#2563eb;color:#fff}
.hero.hx-prev{padding:22px 20px}
.hx-prev [hidden],.hx-custom[hidden]{display:none!important}
/* มาสคอตน้องขอนแก่น */
.bot-ico{width:78%;height:78%;display:block}
.fq-help-ico:has(.bot-ico){background:radial-gradient(circle at 30% 25%,#e0f2fe,#bae6fd);border:3px solid rgba(255,255,255,.8);border-radius:50%}
.ct-ico:has(.bot-ico){border-radius:50%;background:radial-gradient(circle at 30% 25%,#e0f2fe,#bae6fd)}
.pm-auto-sub{margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--line);font-weight:700;font-size:.92rem}.pm-auto-sub .muted{font-weight:400;font-size:.8rem}
/* เข้าสู่ระบบจากหน้าร้าน */
.login-shop{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:-4px 0 18px;border-radius:14px;background:color-mix(in srgb,var(--ls) 9%,#fff);border:1px solid color-mix(in srgb,var(--ls) 25%,#fff)}
.login-shop img,.login-shop .ls-ini{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:var(--ls);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.3rem}
.login-shop small{display:block;color:var(--muted);font-size:.78rem}
.login-shop b{display:block;font-size:1.05rem;line-height:1.3}
.owner-entry{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f8fafc;border:1px dashed var(--line)}
/* หลังร้าน: แบนเนอร์ร้าน */
.bn-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.bn-add{cursor:pointer}
.bn-where{width:64px;height:52px;flex:none;border:1.5px solid var(--line);border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:3px;background:#fff}
.bn-where i{height:6px;border-radius:2px;background:#e2e8f0}
.bn-where b{height:9px;border-radius:2px;background:linear-gradient(90deg,#d4a017,#f5d77a)}
.bn-where-foot{flex-direction:column}
.bn-where-foot b{order:9;width:50%;margin-left:auto}
.bn-empty{aspect-ratio:var(--ratio)/1;max-height:180px;width:100%;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:12px;background:#f8fafc}
.bn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.bn-item{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bn-thumb{position:relative;aspect-ratio:var(--ratio)/1;border-radius:10px;overflow:hidden;background:#f1f5f9}
.bn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bn-mock-mid{margin:6px 10px;padding:8px;border-radius:6px;background:linear-gradient(90deg,#fde68a,#fbcfe8);font-size:.7rem;font-weight:700;text-align:center;color:#7c2d12}
.bn-mock-foot{display:flex;gap:6px;margin:6px 10px 10px;align-items:center}
.bn-mock-foot span{flex:1;height:22px;border-radius:4px;background:#e2e8f0}
.bn-mock-foot b{flex:1;padding:4px;border-radius:6px;background:linear-gradient(90deg,#d4a017,#f5d77a);font-size:.65rem;text-align:center;color:#2b1d00}
.bn-item .sl-form{display:flex;flex-direction:column;gap:8px;align-items:stretch}.bn-item .sl-form>.btn{align-self:flex-start}.bn-item .sl-link>*{min-width:0}.bn-item .sl-act{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;margin-top:auto;border-top:1px dashed var(--line);padding-top:8px}