/* เครดิตดี — ตามม็อกอัพที่ผู้ใช้อนุมัติ (credit-mock/mock.html)
   สองชั้น:
   1) สีเว็บของ "คนดู" — <html data-theme="blue|pink"> (ค่าเริ่ม ฟ้าทะเล · design/mock-blue แบบ C) ตัวแปร --v*
      ใช้กับโครงเว็บทุกหน้า (โลโก้ เมนู ☰ กระดิ่ง popup แถบกดใจ ฯลฯ) — ธีมร้านไม่ทับ
   2) ธีมของ "ร้าน" — .t-a / .t-b / .t-c / .t-d (html class) ตัวแปร --pri --bg ... ใช้กับเนื้อหา
      .t-a (ค่าเริ่ม) = ตามสีของคนดู · .t-b ลาเวนเดอร์ / .t-c มินิมอล / .t-d แดง = ร้านเลือกเอง ชนะบนหน้าร้านนั้น
   มือถือก่อน (390) · desktop = คอลัมน์กลาง / .wide = 2 คอลัมน์ */
:root, [data-theme=blue] {
  --vp:#0f8bd6; --vp2:#42c6f0; --vdeep:#0b6fae; --vttl:#0b78bd; --vhot:#0f8bd6;
  --vtint:#eaf7fc; --vtint2:#ddf1f9; --vbd:#c6e6f2; --vtx:#4f6577; --vtx2:#7d8c99; --vtx3:#a9bac6;
  --vrgb:15,139,214; --vdk:12,38,58;
  --vbg:#f2fafd; --vbg2:#ddf1f9; --vdot:#d2eef8; --vline:#dff1f8; --vline2:#c6e6f2; --vchip:#eaf7fc;
  --vink:#1f2a3a; --vsoft:#66778a; --vfaint:#a3b3bf; --vacc:#2c6585;
  --vcover:linear-gradient(135deg,#cdf0fb 0%,#7fd3f2 100%);
  --vsh:0 2px 8px #c4e3ee33,0 10px 26px -16px rgba(15,139,214,.3); --vpsh:0 6px 14px #0f8bd655;
  --vbtn:linear-gradient(135deg,#0f8bd6,#42c6f0); --vhead:linear-gradient(135deg,#cdf0fb,#eef9ff); --vdraw:#f5fbfe;
  --vheart:#5cc8f2; --vheart0:#d6f0fa; --vburst:#42c6f0; --vlogo:#e3f5fc;
}
[data-theme=pink] {
  --vp:#e0547e; --vp2:#ff9db8; --vdeep:#c03a6e; --vttl:#d5487b; --vhot:#ff5d8f;
  --vtint:#fff0f5; --vtint2:#fde7ef; --vbd:#f5ccd9; --vtx:#7a5a66; --vtx2:#9a8790; --vtx3:#c9a3b2;
  --vrgb:224,84,126; --vdk:60,20,40;
  --vbg:#fff5f6; --vbg2:#ffe9ee; --vdot:#f6dfe4; --vline:#f6dfe4; --vline2:#f5ccd9; --vchip:#fff0f3;
  --vink:#3b2622; --vsoft:#8c6f69; --vfaint:#c9b3ae; --vacc:#8a5a44;
  --vcover:linear-gradient(135deg,#ffb3c7 0%,#ffd9c2 55%,#fff0d6 100%);
  --vsh:0 10px 30px -14px rgba(224,84,126,.35); --vpsh:0 10px 22px -10px #e0547e;
  --vbtn:linear-gradient(90deg,#e5578a,#f38fb2); --vhead:linear-gradient(135deg,#ffd6e5,#ffe9c9); --vdraw:#fff6f9;
  --vheart:#ff8fb1; --vheart0:#ffd9e4; --vburst:#ff6f9a; --vlogo:#ffe3ee;
}
:root, .t-a {
  --bg:var(--vbg); --bg2:var(--vbg2); --card:#fff; --ink:var(--vink); --soft:var(--vsoft); --faint:var(--vfaint);
  --pri:var(--vp); --pri2:var(--vp2); --acc:var(--vacc); --ok:#1f9d61; --okbg:#e6f6ee; --line:var(--vline); --dot:var(--vdot);
  --line2:var(--vline2); --prish:var(--vpsh);
  --sh:var(--vsh);
  --cover:var(--vcover); --chip:var(--vchip);
  --onpri:#fff; --warn:#b45309; --warnbg:#fff4e0; --bad:#b42318; --badbg:#fde8e8;
}
.t-b {
  --bg:#f6f3ff; --bg2:#ece6ff; --card:#fff; --ink:#251f3d; --soft:#6e668f; --faint:#bdb5d9;
  --pri:#7457f5; --pri2:#c4b4ff; --acc:#ff7eb0; --line:#e7e1fb; --dot:#e7e1fb; --line2:#d9d0f7; --prish:0 10px 22px -10px #7457f5;
  --sh:0 12px 32px -14px rgba(116,87,245,.4);
  --cover:radial-gradient(120% 140% at 0% 0%,#a78bfa 0%,#7457f5 35%,#3b2a8f 100%); --chip:#f1ecff;
}
.t-c {
  --bg:#f4f4f5; --bg2:#e9e9ec; --card:#fff; --ink:#111114; --soft:#62626b; --faint:#b4b4bc;
  --pri:#111114; --pri2:#3a3a40; --acc:#1f9d61; --line:#e7e7ea; --dot:#e7e7ea; --line2:#dcdce0; --prish:0 10px 22px -10px #111114;
  --sh:0 8px 24px -14px rgba(0,0,0,.25);
  --cover:linear-gradient(160deg,#18181b 0%,#3f3f46 100%); --chip:#f1f1f3;
}
/* ===== ธีม D แดงนวล (N2 แดงอิฐนวล) — สลับแบบ = แทนบล็อกนี้ด้วย design/red-theme/red_N1.css / red_N3.css (แดงสด: red_B2.css / red_A2.css) ===== */
/* ธีมร้าน D "แดงอิฐนวล (โคอรัลแดง)" (N2 · แดงนวล) — พื้นหลังแดงหม่น ไม่แสบตา · ตัวหนังสือบนพื้นผ่าน AA (≥4.5) */
html.t-d {
  --vp:#a8443f; --vp2:#c4625c; --vdeep:#8a3330; --vttl:#a8443f; --vhot:#c4625c;
  --vtint:#fcf1ec; --vtint2:#f7e4dc; --vbd:#edd2c8; --vtx:#80605a; --vtx2:#80605a; --vtx3:#c8aca5;
  --vrgb:168,68,63; --vdk:60,18,14;
  --vbg:#fcf6f2; --vbg2:#f5e6df; --vdot:#e9d2c9; --vline:#f2e3dc; --vline2:#e9d2c9; --vchip:#faeee8;
  --vink:#3a1712; --vsoft:#80605a; --vfaint:#c8aca5; --vacc:#d08a4a;
  --vcover:linear-gradient(135deg,#f0b39a 0%,#d0625f 55%,#f1c79a 120%);
  --vsh:0 2px 8px rgba(168,68,63,.08),0 10px 26px -16px rgba(168,68,63,.35); --vpsh:0 8px 18px -8px #a8443faa;
  --vbtn:linear-gradient(135deg,#8a3330,#c4625c); --vhead:linear-gradient(135deg,#f7e4dc,#fff8f0); --vdraw:#fcf6f2;
  --vheart:#c4625c; --vheart0:#f7e4dc; --vburst:#c4625c; --vlogo:#fcf1ec;
  --bg:#fcf6f2; --bg2:#f5e6df; --card:#fffdfa; --ink:#3a1712; --soft:#80605a; --faint:#c8aca5;
  --pri:#a8443f; --pri2:#c4625c; --acc:#d08a4a; --line:#f2e3dc; --dot:#e9d2c9; --line2:#e9d2c9;
  --prish:0 10px 22px -10px #a8443fcc;
  --cover:linear-gradient(135deg,#f0b39a 0%,#d0625f 55%,#f1c79a 120%); --chip:#faeee8;
  --sh:0 2px 6px rgba(40,0,10,.10),0 14px 30px -14px rgba(30,0,8,.45);
}
html.t-d .bdg.g{background:#f7e4dc;color:#8a3330}
html.t-d .ra,html.t-d .dav.rdeco .pic{background:linear-gradient(135deg,#f7e4dc,#c4625c)}
html.t-d .rv-login,html.t-d .rv-own summary{color:var(--pri)}
html.t-d .okcard{box-shadow:0 20px 60px rgba(168,68,63,.25)}
/* พื้นหลังหน้า = แดงนวล (การ์ดยังขาว/ครีม) */
html.t-d body{
  background-color:#b34c49;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.2px),linear-gradient(180deg,#bd5552 0%,#b34c49 45%,#a8443f 100%);
  background-size:18px 18px,100% 100%;
}
/* ตัวหนังสือที่วางบนพื้นตรง ๆ */
html.t-d .name,html.t-d .hl,html.t-d .hl .t,html.t-d .rhead h2{color:#fff}
html.t-d .handle,html.t-d .bio,html.t-d .starnote,html.t-d .foot,html.t-d .foot a{color:#fff}
html.t-d .starnote b{color:#fff;font-weight:700}
html.t-d .logo .logo-tx{background:linear-gradient(90deg,#fff,#ffe4c8);-webkit-background-clip:text;background-clip:text;color:transparent}
html.t-d .logo .logo-sh path{fill:transparent;stroke:#fff}
/* แท็บ: รางโปร่ง · ตัวที่เลือก = การ์ด */
html.t-d .tabs{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
html.t-d .tab{color:#fff}
html.t-d .tab.on{background:var(--card);color:var(--pri)}
html.t-d .tab small{opacity:.85}
html.t-d .hl .ring{background:conic-gradient(from 210deg,#fff,#ffd9b3,#fff)}
html.t-d .hl .ring em{border-color:var(--pri)}
/* ปุ่มหลัก */
html.t-d .b1{background:linear-gradient(135deg,#fff7ec,#ffd9b3);color:#8a2e2b;box-shadow:0 10px 22px -10px rgba(60,0,15,.5)}
html.t-d .b1 svg.i{stroke:#8a2e2b}
/* จอกว้าง (≥600px): กล่องข้อมูลร้าน .pd-side เป็นแดงอีกเฉด (ไวน์อิฐ) — เดิมเป็นการ์ดขาว ตัวหนังสือขาวบนหัวร้านหายไป (9 พ.ย.) */
html.t-d .pd-side{background:linear-gradient(165deg,#9e3d3a,#82302d);box-shadow:0 0 0 1.5px rgba(255,255,255,.16),0 18px 40px -18px rgba(40,0,0,.6)}
/* ===== จบธีม D แดง ===== */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans Thai","Prompt",system-ui,sans-serif;font-size:15px;line-height:1.55;
  background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:18px 18px;
}
a{color:var(--pri);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.pr{font-family:"Prompt","Noto Sans Thai",sans-serif}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- โครง ---------- */
.wrap{max-width:560px;margin:0 auto;padding:0 16px 96px}
.wrap.wide{max-width:1040px}
.top{max-width:560px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px;gap:10px}
.wide-top .top{max-width:1040px}
.logo{font:700 19px Prompt;color:var(--pri);display:flex;align-items:center;gap:6px;white-space:nowrap}
.logo svg.i{width:22px;height:22px}
.nav{display:flex;gap:8px;align-items:center}
.ib{min-width:40px;height:40px;border-radius:13px;background:var(--card);display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh);color:var(--soft);padding:0 10px;font:600 13px Prompt;position:relative;border:none;cursor:pointer}
.ib .dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:99px;background:var(--pri);color:var(--onpri);font:700 11px/18px Prompt;text-align:center;padding:0 5px}
.t-c .ib .dot{background:var(--ok)}
.grid2{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .wrap{padding-bottom:60px}
}

/* ---------- การ์ด ---------- */
.card{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:16px;margin-top:12px}
.card h2{font:700 17px Prompt;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.card h2 .n{font:600 12px Prompt;background:var(--chip);color:var(--pri);padding:2px 9px;border-radius:99px}
.t-c .card h2 .n{color:var(--ink)}
.muted{color:var(--soft);font-size:13px}
.empty{text-align:center;color:var(--soft);font-size:14px;padding:18px 8px}
.empty b{display:block;font:600 15px Prompt;color:var(--ink);margin-bottom:2px}

/* ---------- หัวโปรไฟล์ ---------- */
.cover{height:132px;border-radius:26px;background:var(--cover);background-size:cover;background-position:center;position:relative;overflow:hidden}
.cover:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.55),transparent 40%),radial-gradient(circle at 15% 90%,rgba(255,255,255,.35),transparent 35%)}
.cover.img:after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.12))}
.av{width:96px;height:96px;border-radius:50%;margin:-50px auto 0;position:relative;z-index:2;border:4px solid var(--card);background:linear-gradient(135deg,var(--pri2),var(--pri));background-size:cover;background-position:center;display:grid;place-items:center;font:700 34px Prompt;color:#fff;box-shadow:var(--sh)}
.vb{position:absolute;right:-2px;bottom:4px;width:28px;height:28px;border-radius:50%;background:var(--ok);border:3px solid var(--card);display:grid;place-items:center;color:#fff}
.vb svg.i{width:13px;height:13px;stroke-width:3.5}
.name{text-align:center;font:700 22px Prompt;margin-top:10px;line-height:1.3;padding:0 8px}
h1.name{margin:10px 0 0}
.handle{text-align:center;font-size:13px;color:var(--soft)}
.bio{text-align:center;font-size:13.5px;color:var(--soft);margin:6px 20px 0;line-height:1.55;white-space:pre-line}
.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.bdg{display:inline-flex;align-items:center;gap:4px;font:600 12px Prompt;padding:4px 10px;border-radius:99px;background:var(--okbg);color:var(--ok)}
.bdg svg.i{width:13px;height:13px;stroke-width:3}
.bdg.g{background:#e8f0fe;color:#1a56c4}
.bdg.soft{background:var(--chip);color:var(--soft)}
.bdg.warn{background:var(--warnbg);color:var(--warn)}
.bdg.bad{background:var(--badbg);color:var(--bad)}
.stats{display:flex;margin-top:14px;background:var(--card);border-radius:20px;box-shadow:var(--sh);padding:12px 4px}
.st{flex:1;text-align:center;border-right:1px solid var(--line);padding:0 4px;min-width:0}
.st:last-child{border:none}
.st b{display:block;font:700 18px Prompt;color:var(--pri);white-space:nowrap}
.t-c .st b{color:var(--ink)}
.st b.g{color:var(--ok)}
.st span{font-size:11.5px;color:var(--soft)}

/* ---------- ปุ่ม ---------- */
.btn{flex:1;min-height:48px;border-radius:16px;font:600 15px Prompt;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;padding:0 16px;text-align:center;line-height:1.2}
.b1{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri);box-shadow:var(--prish)}
.t-c .b1{background:var(--pri)}
.b2{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.b2 .line{stroke:#06c755}
.b3{background:var(--chip);color:var(--pri)}
.t-c .b3{color:var(--ink)}
.bad-btn{background:var(--badbg);color:var(--bad)}
.btn.sm{min-height:36px;border-radius:12px;font-size:13px;padding:0 12px;flex:none}
.btn.full{width:100%;display:flex}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:none;color:var(--soft);font:500 12.5px "Noto Sans Thai";cursor:pointer;text-decoration:underline}

/* ---------- แท็บ ---------- */
.tabs{display:flex;margin-top:14px;background:var(--bg2);border-radius:16px;padding:4px;position:sticky;top:8px;z-index:5}
.tab{flex:1;text-align:center;padding:9px 0;border-radius:12px;font:600 13.5px Prompt;color:var(--soft)}
.tab.on{background:var(--card);color:var(--pri);box-shadow:var(--sh)}
.t-c .tab.on{color:var(--ink)}
.tab small{font:500 11px Prompt;opacity:.7}

/* ---------- รีวิว ---------- */
.sum{margin-top:12px;background:var(--card);border-radius:22px;padding:14px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px}
.big{font:700 30px Prompt;color:var(--pri);line-height:1}
.t-c .big{color:var(--ok)}
.sum .l{font-size:12.5px;color:var(--soft);line-height:1.45}
.rv{margin-top:10px;background:var(--card);border-radius:22px;padding:14px 16px;box-shadow:var(--sh)}
.rh{display:flex;align-items:center;gap:10px}
.rh > div{min-width:0}   /* ชื่อผู้ใช้ยาว (ไม่มีช่องว่าง) ห่อบรรทัดแทนล้นกรอบรีวิว */
.ra{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--vbd),#b7c4f5);display:grid;place-items:center;font:700 15px Prompt;color:#fff}
.rn{font:600 14.5px Prompt;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rn > *{min-width:0;overflow-wrap:anywhere}
.rm{font-size:11.5px;color:var(--soft)}
.age{font:500 10.5px Prompt;background:var(--chip);color:var(--soft);padding:2px 8px;border-radius:99px}
.rt{font-size:14px;line-height:1.6;margin:9px 0 8px;overflow-wrap:anywhere}
.pf{display:flex;gap:8px;flex-wrap:wrap}
.pf a,.pf .ph{width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--bg2)}
.pf img{width:100%;height:100%;object-fit:cover;object-position:top}
.hidden-proof{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--soft);background:var(--chip);border-radius:12px;padding:8px 10px}
.okl{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ok);margin-top:8px;flex-wrap:wrap}
.okl svg.i{width:13px;height:13px;stroke-width:3}
.okl .sep{color:var(--faint)}

/* ---------- สินค้า ---------- */
.items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.it{background:var(--card);border-radius:20px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.it .ph{aspect-ratio:1/1;background:linear-gradient(160deg,var(--bg2),var(--line));position:relative}
.it .ph img{width:100%;height:100%;object-fit:cover}
.it .sold{position:absolute;inset:0;background:rgba(255,255,255,.62);display:grid;place-items:center;font:700 16px Prompt;color:var(--ink)}
.it .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.it .tt{font:600 14px Prompt;line-height:1.35}
.it .pr{font:700 16px Prompt;color:var(--pri)}
.t-c .it .pr{color:var(--ink)}
.it .dt{font-size:12px;color:var(--soft);line-height:1.45}
.it form{margin-top:auto;padding-top:6px}
.stock{font:500 11.5px Prompt;color:var(--soft)}

/* ---------- ชำระเงิน ---------- */
.qr{margin-top:14px;background:var(--card);border-radius:24px;padding:18px;box-shadow:var(--sh);text-align:center}
.qr h3{font:600 15px Prompt;margin-bottom:12px}
.qr .qimg{width:220px;height:220px;margin:0 auto;border-radius:18px;padding:12px;background:#fff;border:1px solid var(--line);object-fit:contain}
.qr .pp{font:600 12px Prompt;color:#123f6d;margin-top:10px}
.qr .dl{display:inline-flex;margin-top:10px;font:600 13px Prompt;color:var(--pri);gap:6px;align-items:center}
.acc{margin-top:10px;background:var(--card);border-radius:20px;padding:14px 16px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px}
.bl{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font:700 13px Prompt;color:#fff;flex:none}
.acc .k{font-size:11.5px;color:var(--soft)}
.acc .n{font:700 17px Prompt;letter-spacing:.3px}
.acc .o{font-size:12px;color:var(--soft)}
.acc .tx{min-width:0}
.cp{margin-left:auto;height:36px;padding:0 14px;border-radius:12px;background:var(--chip);color:var(--pri);font:600 13px Prompt;display:flex;align-items:center;gap:6px;border:none;cursor:pointer;flex:none}
.t-c .cp{color:var(--ink)}
.cp svg.i{width:15px;height:15px}
.soc{display:flex;gap:10px;margin-top:12px}
.soc .btn{background:var(--card);box-shadow:var(--sh);color:var(--ink)}
.warn{margin-top:12px;font-size:12px;color:var(--soft);display:flex;gap:6px;line-height:1.5}

/* ---------- ฟอร์ม ---------- */
.sheet{background:var(--card);border-radius:30px;box-shadow:0 -10px 40px -20px rgba(0,0,0,.25);padding:12px 20px 22px;margin-top:14px}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 14px}
.sheet h1{font:700 20px Prompt}
.who{display:flex;align-items:center;gap:10px;margin:12px 0;background:var(--bg);border-radius:16px;padding:10px 12px;font-size:12.5px;color:var(--soft)}
.who b{color:var(--ink);font:600 13.5px Prompt}
.lbl{display:block;font:600 13.5px Prompt;margin:14px 0 6px}
.lbl em{color:var(--pri);font-style:normal}
.in,.ta,select.in{width:100%;font:15px "Noto Sans Thai";color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;outline:none}
.in:focus,.ta:focus{border-color:var(--pri2)}
.ta{min-height:110px;resize:vertical;line-height:1.55}
.in::placeholder,.ta::placeholder{color:var(--faint)}
.drop{display:block;border:2px dashed var(--pri2);border-radius:18px;padding:16px;text-align:center;background:var(--bg);cursor:pointer;color:var(--pri)}
.t-c .drop{border-color:var(--faint);color:var(--ink)}
.drop svg.i{width:28px;height:28px;margin:0 auto}
.drop b{display:block;font:600 14px Prompt;margin-top:4px;color:var(--ink)}
.drop span{font-size:11.5px;color:var(--soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.thumbs .th{width:64px;height:64px;border-radius:12px;background:var(--bg2);position:relative;background-size:cover;background-position:center}
.thumbs .th button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:700 12px/22px Prompt;text-align:center;border:none;cursor:pointer}
.note{margin-top:12px;background:var(--chip);border-radius:14px;padding:10px 12px;font-size:12px;color:var(--soft);line-height:1.6}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{flex:1;min-width:90px;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg .sw{display:block;border:2px solid var(--line);border-radius:16px;padding:8px;text-align:center;font:600 12.5px Prompt}
.seg .sw i{display:block;height:34px;border-radius:10px;margin-bottom:6px}
.seg.seg4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}          /* ธีมร้าน 4 ตัว: 2x2 บนมือถือ · แถวเดียวบนจอกว้าง */
.seg.seg4 label{min-width:0}
.seg.seg4 .sw{height:100%}
@media (min-width:600px){.seg.seg4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seg input:checked+.sw{border-color:var(--pri);box-shadow:0 0 0 3px var(--chip)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--pri)}

/* ---------- ตะกร้า/ออเดอร์ ---------- */
.ln{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ln:first-child{border-top:none;padding-top:2px}
.ln .ph{width:58px;height:58px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,var(--bg2),var(--line));flex:none}
.ln .ph img{width:100%;height:100%;object-fit:cover}
.ln .tx{flex:1;min-width:0}
.ln .tt{font:600 14px Prompt;line-height:1.35;overflow-wrap:anywhere}
.ln .pr{font:600 13px Prompt;color:var(--soft)}
.ln .sub{font:700 15px Prompt;white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1.5px dashed var(--line);margin-top:4px}
.total b{font:700 22px Prompt;color:var(--pri)}
.t-c .total b{color:var(--ink)}
.shopbar{display:flex;align-items:center;gap:12px}
.shopbar .av{width:52px;height:52px;margin:0;font-size:20px;border-width:3px}
.shopbar .av .vb{width:20px;height:20px;right:-4px;bottom:-2px;border-width:2px}
.shopbar .av .vb svg.i{width:9px;height:9px}
.shopbar b{font:700 16px Prompt;display:block;line-height:1.3}
.shopbar span{font-size:12px;color:var(--soft)}
.steps{display:flex;gap:6px;margin-top:12px}
.steps i{flex:1;height:5px;border-radius:9px;background:var(--line)}
.steps i.on{background:var(--pri)}
.ord .oi{font-size:13px;color:var(--soft);margin-top:6px;line-height:1.6}
.ord .reason{margin-top:8px;background:var(--badbg);color:var(--bad);border-radius:12px;padding:8px 10px;font-size:12.5px}
.slip{width:84px;height:110px;border-radius:12px;object-fit:cover;background:var(--bg2);flex:none}

/* ---------- หน้าแรก ---------- */
.hero{margin-top:6px;border-radius:28px;padding:22px 18px 18px;background:var(--cover);position:relative;overflow:hidden;box-shadow:var(--sh)}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.6),transparent 40%);pointer-events:none}
.hero h1{font:700 25px/1.3 Prompt;position:relative;z-index:1}
.hero p{font-size:13.5px;color:var(--acc);margin-top:6px;position:relative;z-index:1}
.search{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1}
.search .in{border:none;box-shadow:var(--sh);border-radius:16px}
.search .btn{flex:none}
.pcard{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink)}
.pcard:first-of-type{border-top:none}
.pcard .av{width:48px;height:48px;margin:0;font-size:18px;border-width:3px;flex:none}
.pcard .av .vb{width:18px;height:18px;right:-4px;bottom:-2px;border-width:2px}
.pcard .av .vb svg.i{width:8px;height:8px}
.pcard .tx{flex:1;min-width:0}
.pcard b{font:600 15px Prompt;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard span{font-size:12px;color:var(--soft)}
.rank{font:700 14px Prompt;color:var(--faint);width:20px;text-align:center;flex:none}
.cta{margin-top:12px;border-radius:22px;padding:16px;background:var(--card);box-shadow:var(--sh);display:flex;gap:12px;align-items:center}
.cta b{font:700 15px Prompt;display:block}

/* ---------- ทั่วไป ---------- */
.flash{padding:11px 14px;border-radius:14px;margin-top:10px;font-size:13.5px;display:flex;gap:8px;align-items:center}
.flash.error{background:var(--badbg);color:var(--bad)}
.flash.success{background:var(--okbg);color:var(--ok)}
.flash.warning{background:var(--warnbg);color:var(--warn)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font:500 13px Prompt;padding:10px 16px;border-radius:99px;display:flex;gap:6px;align-items:center;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg.i{width:15px;height:15px;stroke:#4ade80;stroke-width:3}
.report{margin-top:18px;text-align:center}
.report details{display:inline-block;text-align:left;max-width:100%}
.report summary{cursor:pointer;color:var(--soft);font-size:12.5px;list-style:none;text-align:center}
.report form{display:flex;gap:6px;margin-top:8px}
.foot{text-align:center;color:var(--faint);font-size:12px;margin-top:28px}
.share-box{display:flex;gap:12px;align-items:center}
.share-box img{width:96px;height:96px;border-radius:14px;border:1px solid var(--line);background:#fff;flex:none}
.share-box .url{font:600 13px Prompt;word-break:break-all;color:var(--ink)}

/* ======================================================================
   ลงจริงจากม็อกอัพที่อนุมัติ (mock-like · mock-home-stats · mock-highlights)
   ====================================================================== */
:root{--gold:#f2a516;--goldbg:#fff4d6;--goldink:#9a5b00}

/* ---------- ดาว ---------- */
.bdg.star{background:var(--goldbg);color:var(--goldink)}
.st b.gold{color:var(--gold)}
.st b em{font-style:normal}
.acts3{display:grid;grid-template-columns:1fr 1fr 48px;gap:10px;margin-top:12px}
.acts3 .btn{padding:0 10px}
.btn.icon{padding:0}
.btn.icon svg.i{width:22px;height:22px}
.starbtn{background:var(--card);color:var(--ink);box-shadow:var(--sh);border:2px solid transparent;transition:transform .12s}
.starbtn .s{font-size:21px;line-height:1;color:var(--gold)}
.starbtn.on{background:var(--goldbg);color:var(--goldink);border-color:#f6cf6a;box-shadow:0 10px 22px -12px rgba(242,165,22,.7)}
.starbtn:active{transform:scale(.96)}
.starbtn[aria-busy=true]{opacity:.6}
.starnote{text-align:center;font-size:12px;color:var(--soft);margin-top:8px}
.starnote b{color:var(--goldink);font-family:Prompt}
/* ชีตให้ดาว 1–5 (แบบ B) · ปุ่ม 62px ≥ 44px แตะง่ายบนจอ 390 */
.ratesheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line2);margin:-8px auto 12px}
.ratesheet h3{margin-top:2px}
.stars5{display:flex;justify-content:center;gap:4px;margin-top:12px}
.stars5 .sb{width:62px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:none;border:none;font:500 11px Prompt;color:var(--soft);padding:2px 0;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.stars5 .sb i{font-style:normal;font-size:44px;line-height:1;color:var(--line2);transition:transform .12s}
.stars5 .sb.f i{color:var(--gold);text-shadow:0 4px 10px rgba(242,165,22,.35)}
.stars5 .sb.f{color:var(--goldink);font-weight:600}
.stars5 .sb.cur{background:var(--goldbg)}
.stars5 .sb:active i{transform:scale(.88)}
.stars5 .sb:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.ratesheet .pick{font:700 16px Prompt;color:var(--goldink);margin-top:8px;min-height:44px}
.ratesheet .pick small{display:block;font:500 12px 'Noto Sans Thai',sans-serif;color:var(--soft);margin-top:2px}
.ratesheet .btn.full{margin-top:12px}
.ratesheet .btn.ghost{background:none;color:var(--soft);margin-top:4px;min-height:44px}
.ratesheet .btn.ghost[data-rateoff]{color:var(--goldink)}
.ratesheet .btn[aria-busy=true]{opacity:.6;pointer-events:none}
.stchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.stchips span{font:600 11px Prompt;background:var(--goldbg);color:var(--goldink);padding:2px 8px;border-radius:99px}
.sum .avg{color:var(--goldink)}
.nth{font:600 10.5px Prompt;background:#eef2ff;color:#4152b3;padding:2px 8px;border-radius:99px}
.big.gold{color:var(--gold)!important}
.starpill{margin-left:auto;font:700 12px Prompt;color:var(--goldink);background:var(--goldbg);padding:5px 10px;border-radius:99px;white-space:nowrap;flex:none}
.warnline{margin-top:10px;display:flex;gap:8px;align-items:center;background:#fffaeb;border:1.5px solid #f5b968;color:#8a4b00;border-radius:14px;padding:9px 12px;font:600 12.5px Prompt}

/* ---------- หน้าแรก: สถิติ ---------- */
.kpi-head{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:0 4px}
.kpi-head b{font:600 13.5px Prompt;color:var(--soft)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}   /* 11 พ.ย. 4 การ์ด: มือถือ 2×2 · จอกว้าง 4 ช่อง */
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border-radius:22px;box-shadow:var(--sh);padding:14px 12px 13px;position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;right:-22px;top:-22px;width:84px;height:84px;border-radius:50%;background:var(--chip)}
.kpi .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;position:relative;z-index:1}
.kpi .ic svg.i{width:19px;height:19px}
.kpi .num{font:700 30px/1.05 Prompt;letter-spacing:-.5px;margin-top:10px;color:var(--ink);white-space:nowrap;position:relative;z-index:1}
.kpi .num small{font:600 14px Prompt;color:var(--soft);margin-left:3px;letter-spacing:0}
.kpi .lb{font:500 13px "Noto Sans Thai";color:var(--soft);margin-top:3px}
.kpi .delta{display:inline-flex;align-items:center;gap:3px;margin-top:8px;font:700 11.5px Prompt;color:var(--ok);background:var(--okbg);padding:3px 8px;border-radius:99px;white-space:nowrap}
.kpi .live{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font:600 11.5px Prompt;color:var(--soft);white-space:nowrap}
.kpi .live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #dcfce7}
.k1 .ic{background:var(--vtint2);color:var(--pri)}
.k2 .ic{background:#e8f0fe;color:#1a56c4}
.k3 .ic{background:var(--goldbg);color:var(--goldink)}
.k4 .ic{background:#fdecef;color:#d6336c}
.k1 .num{color:var(--pri)}
@media (max-width:520px){
  .kpis{gap:8px}
  .kpi{padding:12px 10px 11px;border-radius:20px}
  .kpi .ic{width:30px;height:30px;border-radius:10px}
  .kpi .ic svg.i{width:16px;height:16px}
  .kpi .num{font-size:22px;margin-top:8px}
  .kpi .num small{font-size:11.5px;margin-left:2px}
  .kpi .lb{font-size:11.5px}
  .kpi .delta,.kpi .live{font-size:10.5px;padding:2px 6px;margin-top:6px}
  .kpi .live{padding:0}
}
@media (min-width:900px){
  .kpi{padding:18px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .kpi .ic{width:52px;height:52px;border-radius:16px;grid-row:span 3}
  .kpi .ic svg.i{width:26px;height:26px}
  .kpi .num{font-size:36px;margin-top:0}
  .kpi .delta,.kpi .live{justify-self:start}
}

/* ---------- หน้าแรก: อธิบายเว็บ + คำเตือน ---------- */
.about{padding:20px 18px;display:grid;gap:18px}
.eyebrow{display:inline-block;font:700 12px Prompt;color:var(--pri);background:var(--chip);padding:3px 10px;border-radius:99px}
.about-h{font:700 21px/1.35 Prompt;margin:10px 0 0;display:block}
.about-p{font-size:14px;color:var(--soft);margin-top:8px;line-height:1.65}
.forshop{margin-top:14px;display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:18px;padding:12px}
.fs-ic{width:42px;height:42px;border-radius:14px;background:#e8f0fe;color:#1a56c4;display:grid;place-items:center;flex:none}
.fs-tx{flex:1;min-width:0}
.fs-tx b{font:700 14.5px Prompt;display:block}
.fs-tx span{font-size:12.5px;color:var(--soft);line-height:1.5;display:block}
.steps4{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0}
.steps4 li{position:relative;background:var(--bg);border-radius:18px;padding:14px 12px 12px}
.steps4 li i{position:absolute;top:10px;right:12px;font:700 12px Prompt;font-style:normal;color:var(--faint)}
.steps4 .s-ic{width:36px;height:36px;border-radius:12px;background:var(--card);color:var(--pri);display:grid;place-items:center;box-shadow:var(--sh)}
.steps4 li:nth-child(2) .s-ic{color:var(--gold)}
.steps4 li:nth-child(3) .s-ic{color:#138f2d}
.steps4 b{display:block;font:700 14px Prompt;margin-top:10px;line-height:1.35}
.steps4 li>span:last-child{display:block;font-size:12px;color:var(--soft);margin-top:3px;line-height:1.5}
@media (max-width:520px){.forshop{flex-wrap:wrap}.forshop .btn{width:100%}}
@media (min-width:900px){.about{grid-template-columns:1fr 1.15fr;gap:26px;align-items:center;padding:26px 28px}.about-h{font-size:26px}.steps4{gap:12px}}
.caution{margin-top:12px;display:flex;gap:12px;background:#fffaeb;border:1.5px solid #f5b968;border-radius:20px;padding:14px 16px}
.caution .c-ic{width:38px;height:38px;border-radius:12px;background:#ffedc7;display:grid;place-items:center;font-size:19px;flex:none}
.caution b{font:700 14.5px Prompt;color:#8a4b00}
.caution ul{margin:6px 0 0;padding-left:18px}
.caution li{font-size:13px;color:#6b4a2a;line-height:1.6;margin-top:3px}
.caution li::marker{color:#e0913a}
.caution .gchip{font:600 11.5px Prompt;background:#e8f0fe;color:#1a56c4;padding:1px 7px;border-radius:99px;white-space:nowrap}
.caution code{font:600 12px Prompt;background:#fff;border:1px solid #f1d7a8;padding:0 6px;border-radius:6px;color:#8a4b00;white-space:nowrap}
.caution .rp{font:700 13px Prompt;color:var(--pri)}
@media (min-width:900px){.caution ul{columns:2;column-gap:28px}.caution li{break-inside:avoid}}

/* ---------- วงไฮไลต์ ---------- */
.hls{display:flex;gap:16px;padding:14px 4px 2px;overflow-x:auto;scrollbar-width:none}
.hls::-webkit-scrollbar{display:none}
.hl{width:72px;flex:none;text-align:center;font:500 12px "Noto Sans Thai";color:var(--ink);background:none;border:none;padding:0;cursor:pointer}
.hl .ring{display:block;width:72px;height:72px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--pri),var(--pri2),#ffc59e,var(--pri))}
.hl .ring em{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--bg);background:var(--bg2) center/cover}
.hl span.t{display:block;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl.add .ring{background:none;border:2px dashed var(--pri2);padding:0;display:grid;place-items:center;color:var(--pri);font:300 30px Prompt}
.hl.add span.t{color:var(--pri);font-weight:600}

/* ---------- ตัวดูสตอรี่เต็มจอ ---------- */
.sv{position:fixed;inset:0;z-index:100;background:#0d0b0c;display:none;justify-content:center;touch-action:none}
.sv.open{display:flex}
.sv .stage{position:relative;width:100%;max-width:480px;height:100%;overflow:hidden;background:#000}
.sv .img{position:absolute;inset:0;background:#000 center/contain no-repeat}
.sv .shade{position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);pointer-events:none;z-index:1}
.sv .shade.b{inset:auto 0 0 0;height:170px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.sv .bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:5px;z-index:3}
.sv .bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.sv .bars i b{display:block;height:100%;width:0;background:#fff}
.sv .shead{position:absolute;top:26px;left:12px;right:12px;display:flex;align-items:center;gap:10px;color:#fff;z-index:3}
.sv .mini{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;border:2px solid #fff;flex:none;display:grid;place-items:center;font:700 14px Prompt;color:#fff}
.sv .shead b{font:700 15px Prompt;display:block;line-height:1.2}
.sv .shead small{font:400 12px "Noto Sans Thai";opacity:.85}
.sv .x{margin-left:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:300 32px/1 Prompt;color:#fff;background:none;border:none;cursor:pointer}
.sv .tap{position:absolute;top:80px;bottom:110px;width:40%;z-index:2;background:none;border:none;cursor:pointer}
.sv .tap.l{left:0}
.sv .tap.r{right:0}
.sv .sfoot{position:absolute;left:16px;right:16px;bottom:24px;color:#fff;z-index:3}
.sv .cnt{font:700 13px Prompt;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:99px}
.sv .sfoot p{font-size:12.5px;opacity:.9;margin-top:10px;line-height:1.5}
body.noscroll{overflow:hidden}

/* ---------- หลังบ้าน: จัดการไฮไลต์ ---------- */
.quota{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:16px;padding:10px 12px}
.quota .t{font:700 13px Prompt;white-space:nowrap}
.quota .cc{font:500 11px Prompt;color:var(--soft);white-space:nowrap}
.imgs{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.imgs .im{width:58px;height:92px;border-radius:12px;background:var(--bg2) center/cover;position:relative}
.imgs .im form{position:absolute;top:-6px;right:-6px}
.imgs .im button{width:22px;height:22px;border-radius:50%;border:none;background:var(--ink);color:#fff;font:700 12px/22px Prompt;cursor:pointer}
.imgs .addimg{width:58px;height:92px;border-radius:12px;border:2px dashed var(--line);display:grid;place-items:center;color:var(--faint);font:300 24px Prompt;text-align:center;line-height:1.1;cursor:pointer;position:relative}
.imgs .addimg small{display:block;font:500 10px Prompt}
.imgs .addimg input{position:absolute;width:1px;height:1px;opacity:0}
.imgs .addimg.on{border-color:var(--pri2);color:var(--pri)}


.upsell{margin-top:12px;border-radius:20px;padding:14px;background:linear-gradient(135deg,var(--vtint),#fff7e8);border:1.5px solid var(--pri2);display:flex;gap:12px;align-items:center}
.upsell b{font:700 14.5px Prompt;display:block}
.upsell span{font-size:12px;color:var(--soft)}
@media (max-width:520px){.upsell{flex-wrap:wrap}.upsell .btn{width:100%}}

/* ---------- หน้าอัปเกรด ---------- */
.pk{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:18px;padding:13px 14px;margin-top:10px;background:var(--card);cursor:pointer;position:relative}
.pk input{position:absolute;opacity:0}
.pk .rd{width:22px;height:22px;border-radius:50%;border:2px solid var(--faint);flex:none;display:grid;place-items:center}
.pk:has(input:checked){border-color:var(--pri);box-shadow:0 0 0 4px var(--chip)}
.pk:has(input:checked) .rd{border-color:var(--pri)}
.pk:has(input:checked) .rd:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--pri)}
.pk b{font:700 15px Prompt;display:block}
.pk span.d{font-size:12px;color:var(--soft)}
.pk .pr{margin-left:auto;font:700 19px Prompt;color:var(--pri);white-space:nowrap}
.nowq{display:flex;gap:8px;margin-top:8px}
.nowq div{flex:1;background:var(--bg);border-radius:14px;padding:9px 10px;text-align:center;font-size:11.5px;color:var(--soft)}
.nowq b{display:block;font:700 15px Prompt;color:var(--ink)}
.nowq .to{color:var(--ok)}

/* ---------- แอดมิน: คิวอัปเกรด ---------- */
.rq{border-top:1px solid var(--line);padding:14px 0}
.rq:first-of-type{border-top:none;padding-top:4px}
.rq .rh{display:flex;gap:10px;align-items:flex-start}
.rq .rh .av{width:40px;height:40px;margin:0;font-size:16px;border-width:2px;flex:none}
.rq .tx{flex:1;min-width:0}
.rq .tx b{font:700 14.5px Prompt;display:block}
.rq .tx span{font-size:12px;color:var(--soft);display:block;line-height:1.5}
.rq .tx span .amt{display:inline;font:700 15px Prompt;color:var(--ink)}
.rq .sl{width:62px;height:92px;border-radius:10px;border:1px solid var(--line);flex:none;position:relative;overflow:hidden;background:var(--bg2);display:block}
.rq .sl img{width:100%;height:100%;object-fit:cover}
.rq .sl small{position:absolute;left:4px;right:4px;bottom:4px;background:rgba(0,0,0,.6);color:#fff;font:600 9.5px Prompt;text-align:center;border-radius:6px;padding:1px 0}
.rq .act{display:flex;gap:6px;margin-top:10px}
.rq .act .in{padding:8px 10px;font-size:13px;border-radius:12px}
.rq form.rej{display:flex;gap:6px;flex:1}

/* ---------- popup ชวนอัปเกรด (เด้งเมื่อเต็มโควตา) ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(var(--vdk),.45)}
.modal-card{position:relative;width:100%;max-width:480px;background:var(--card);border-radius:28px 28px 0 0;padding:22px 20px 24px;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);text-align:center;animation:mup .18s ease-out}
@keyframes mup{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:600px){.modal{align-items:center}.modal-card{border-radius:28px}}
.modal-card .m-ic{width:56px;height:56px;margin:0 auto;border-radius:18px;background:linear-gradient(135deg,var(--vtint),#fff4d6);display:grid;place-items:center;font-size:26px}
.modal-card h3{font:700 19px Prompt;margin-top:12px}
.modal-card .m-p{font-size:13.5px;color:var(--soft);margin-top:6px;line-height:1.6}
.modal-card [hidden]{display:none}
.m-pk{list-style:none;margin:14px 0 0;padding:0;text-align:left;display:grid;gap:8px}
.m-pk li{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:16px;padding:11px 14px}
.m-pk b{font:700 14.5px Prompt;display:block}
.m-pk span{font-size:12px;color:var(--soft)}
.m-pk em{margin-left:auto;font:700 17px Prompt;font-style:normal;color:var(--pri);white-space:nowrap}
.m-acts{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:16px}

button.addimg{background:none;font-family:Prompt}

/* ---------- ช่องเลือกไฟล์: เอา input จริงออกจากการแสดงผลทั้งเว็บ (ไม่ให้ "No file chosen" โผล่/ติดตอนก๊อป)
   คลิกที่ label ยังเปิดตัวเลือกไฟล์ได้ · ช่องบังคับใช้ data-required + เช็กใน base.html แทน required ---------- */
input[type=file]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;
  overflow:hidden;clip-path:inset(50%);opacity:0;visibility:hidden;pointer-events:none}
label.drop,label.cv,label.addimg,label.coverpick{position:relative}
label.need{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--badbg)}

/* ---------- แถวไฮไลต์ฝั่งเจ้าของ: ปุ่มดินสอแยกจากวง (กดวง = ดูสตอรี่) ---------- */
.hlw{position:relative;flex:none}
.hl-edit{position:absolute;top:50px;right:-2px;width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);
  background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;z-index:1}
.hl-edit svg.i{width:12px;height:12px}

/* ---------- ชีตเพิ่ม/แก้ไขไฮไลต์บนหน้าร้าน ---------- */
.sheetcard{text-align:left;max-height:92vh;overflow:auto;padding-top:12px}
.sheetcard h3{font:700 19px Prompt;margin-top:4px}
.sheetcard .m-p{margin-top:2px}
.sheetcard .cc{font:500 11px Prompt;color:var(--soft);text-align:right;margin-top:3px}
.m-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:var(--chip);color:var(--soft);font:400 24px/1 Prompt;cursor:pointer}
.pickrow{display:flex;gap:14px;align-items:flex-start;margin-top:4px}
.coverpick{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;width:84px}
.coverpick em{display:block;width:76px;height:76px;border-radius:50%;border:2px dashed var(--pri2);background:var(--bg) center/cover}
.coverpick b{font:600 11.5px Prompt;color:var(--pri);white-space:nowrap}
.coverpick.small{width:64px}
.coverpick.small em{width:56px;height:56px;border-style:solid;border-color:var(--pri2)}
.sheetcard .imgs .im .rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:var(--ink);color:#fff;font:700 12px/22px Prompt;cursor:pointer}
.edhead{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px}
.edtools{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.sheetcard .imgs [hidden]{display:none}

.nowq span{display:block;font-size:11px;margin-top:2px}
.ownerbar{margin-top:12px;display:flex;align-items:center;gap:8px;justify-content:space-between;background:var(--card);border-radius:16px;padding:8px 8px 8px 14px;box-shadow:var(--sh)}

/* ปุ่มลบรูปเล็ก: ไอคอน SVG (ฟอนต์ Prompt วาด × เป็นก้อนสี่เหลี่ยม) */
.imgs .im button,.thumbs .th button,.sheetcard .imgs .im .rm{display:grid;place-items:center;padding:0}
.imgs .im button svg.i,.thumbs .th button svg.i,.sheetcard .imgs .im .rm svg.i{width:12px;height:12px;stroke-width:3;color:#fff}
.nw{white-space:nowrap}

/* ---------- การ์ดสินค้า: ปุ่มสั่งจอง LINE/FB (เว็บไม่รับสั่งซื้อ) ---------- */
.rsv{display:grid;gap:6px;margin-top:auto;padding-top:6px}
.rsv .btn{font-size:12.5px}
.rsv .b1 .line{stroke:#fff}
.btn.off{background:var(--bg2);color:var(--faint);cursor:not-allowed;box-shadow:none}
.steps4 li:nth-child(3) .s-ic .line{stroke:#06c755}

/* ---------- หัวใจกดใจให้เว็บ (แบนเนอร์หน้าแรก · แบบ B ที่ผู้ใช้เลือก: หัวใจแบนนุ่ม + ดาวลอย) ---------- */
.hero{position:relative}
.heartbtn{position:absolute;z-index:2;right:34px;top:2px;width:132px;display:flex;flex-direction:column;align-items:center;
  gap:2px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.heartbtn svg.art{width:120px;height:94px;overflow:visible;display:block}
.heartbtn:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:16px}
.heartbtn[aria-busy=true]{opacity:.75}
.hcount{display:inline-flex;align-items:center;gap:5px;font:600 12.5px Prompt;color:var(--vtx);background:rgba(255,255,255,.75);
  padding:3px 10px;border-radius:99px;box-shadow:0 4px 12px -6px rgba(var(--vrgb),.6);white-space:nowrap}
.hcount svg{width:13px;height:13px}
.hcount b{font-weight:700;color:var(--vp)}
.hcount .ic-on{display:none}
.heartbtn.on .hcount .ic-on{display:inline}
.heartbtn.on .hcount .ic-off{display:none}
.heartbtn.on .hcount{background:#fff;color:var(--vdeep)}
.heartbtn:not(.on) .b-inner{opacity:0}
.heartbtn:not(.on) .b-outer{fill:var(--vheart0);stroke:var(--vp2);stroke-width:3}
.heartbtn .b-outer{fill:var(--vheart)}.heartbtn .b-inner,.heartbtn .shadow,.hcount svg path{fill:var(--vp)}.hcount .ic-off path{fill:none;stroke:var(--vp)}.heartbtn .burst{fill:var(--vburst)}
.heartbtn:not(.on) .stars{opacity:.35}
.heartbtn .burst{opacity:0}
.heartbtn.on .burst{opacity:1}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hshadow{0%,100%{transform:scaleX(1);opacity:.22}50%{transform:scaleX(.82);opacity:.14}}
@keyframes htwinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.55}}
@keyframes hpop{0%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes hrise{0%{transform:translateY(4px);opacity:0}30%{opacity:1}100%{transform:translateY(-10px);opacity:1}}
.heartbtn .float{animation:hfloat 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.heartbtn .shadow{animation:hshadow 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.heartbtn .tw{animation:htwinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.heartbtn .tw.d1{animation-delay:.6s}.heartbtn .tw.d2{animation-delay:1.2s}.heartbtn .tw.d3{animation-delay:1.8s}
.heartbtn.pop svg.art{animation:hpop .45s ease-out}
.heartbtn.pop .burst{animation:hrise .6s ease-out}
@media (prefers-reduced-motion:reduce){.heartbtn .float,.heartbtn .shadow,.heartbtn .tw,.heartbtn.pop svg.art,.heartbtn.pop .burst{animation:none}}
@media (max-width:600px){
  .heartbtn{right:8px;top:8px;width:92px}
  .heartbtn svg.art{width:78px;height:62px}
  .hcount{font-size:10.5px;padding:2px 7px;gap:3px}
  .hcount svg{width:10px;height:10px}
  .hero h1,.hero p{padding-right:84px}
}

/* ================================================================ ก่อนขึ้นเว็บจริง (design/mock-prelaunch อนุมัติแล้ว)
   นโยบาย/ข้อตกลง · ยอมรับข้อตกลง + คุกกี้ · ลบบัญชี · ผลค้นเลขบัญชี 4 แบบ · รายงานเลข · ร้านตอบรีวิว · แบล็กลิสต์ */
.doc h1{font:700 22px Prompt;margin-top:6px}
.doc .upd{font-size:12px;color:var(--soft);margin-top:2px}
.doc h2{font:700 16px Prompt;margin:18px 0 6px;color:var(--ink)}
.doc p,.doc li{font-size:13.5px;line-height:1.7;color:#4a3a36}
.doc ul{padding-left:20px;margin:4px 0}
.doc .ph{background:#fff4d6;color:#8a5a00;border:1px dashed #e9b949;border-radius:6px;padding:0 6px;font-weight:600}
.doc .toc{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.doc .toc a{font:600 12px Prompt;background:var(--chip);color:var(--pri);padding:4px 10px;border-radius:99px}
.draft{margin-top:18px;background:#fffaeb;border:1.5px solid #f5b968;border-radius:14px;padding:10px 12px;font:600 12.5px Prompt;color:#8a4b00}
.foot a{color:var(--soft);text-decoration:underline}
/* แบนเนอร์คุกกี้ */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--ink);color:#fff;border-radius:18px;padding:12px 14px;max-width:536px;margin:0 auto;
  display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);font-size:12.5px;line-height:1.5}
.cookie[hidden]{display:none}
.cookie a{color:var(--vbd);text-decoration:underline}
.cookie .btn{flex:none;background:#fff;color:var(--ink)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:1.55;cursor:pointer}
.consent input{width:20px;height:20px;accent-color:var(--pri);flex:none;margin-top:1px}
.consent a{color:var(--pri);text-decoration:underline}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
/* ผลค้นหาเลข */
.res{border-radius:22px;padding:16px;margin-top:12px;box-shadow:var(--sh)}
.res .hd{display:flex;gap:10px;align-items:center;font:700 16px Prompt}
.res .hd .ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:20px;flex:none}
.res .num{font:700 20px Prompt;letter-spacing:.5px;margin-top:10px}
.res .num small{font:500 12px "Noto Sans Thai";color:var(--soft);margin-left:6px;letter-spacing:0}
.res p{font-size:13px;line-height:1.6;margin-top:6px}
.res.rs-ok{background:#ecfbf3;border:1.5px solid #8fdcb4} .res.rs-ok .ic{background:#d2f5e2}
.res.rs-warn{background:#fffaeb;border:1.5px solid #f5b968} .res.rs-warn .ic{background:#ffedc7}
.res.rs-flag{background:#fff1ee;border:1.5px solid #f3a08f} .res.rs-flag .ic{background:#ffd9d1}
.res.rs-bl{background:#fde8e8;border:2px solid #e04b4b} .res.rs-bl .ic{background:#e04b4b;color:#fff}
.res .shoprow{display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:10px;margin-top:10px;color:var(--ink)}
.res .shoprow .av{width:44px;height:44px;margin:0;font-size:16px;border-width:2px;flex:none}
.res .shoprow .av .vb{width:16px;height:16px;right:-3px;bottom:-2px;border-width:2px}
.res .shoprow .av .vb svg.i{width:8px;height:8px}
.res .shoprow b{font:700 14.5px Prompt;display:block} .res .shoprow span{font-size:12px;color:var(--soft)}
.res .acts2{display:flex;gap:8px;margin-top:12px}
.redtxt{color:#b42318}
.res .shoprow span.redtxt{color:#b42318}
.btn.red{background:#e04b4b;color:#fff;box-shadow:0 10px 22px -12px #e04b4b}
/* แอดมิน: คิวรายงานเลข */
.q{border-top:1px solid var(--line);padding:12px 0}
.q:first-of-type{border-top:none;padding-top:2px}
.q .row{display:flex;gap:10px}
.q .ev{width:60px;height:86px;border-radius:10px;background:#f3f4f6 center/cover;border:1px solid var(--line);flex:none;position:relative;display:block}
.q .ev small{position:absolute;left:3px;right:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;font:600 9px Prompt;text-align:center;border-radius:5px}
.q b{font:700 14px Prompt;display:block} .q .row span{font-size:12px;color:var(--soft);display:block;line-height:1.55}
.q .row span.tagred{display:inline-block;color:#b42318;font:700 11px Prompt;margin:2px 4px 2px 0}
.q .row span.tagred.ok{color:#1f9d61}
.q .act{display:flex;gap:6px;margin-top:8px}
.q .act form{display:flex;gap:6px;flex:1}
.q .act .in{padding:8px 10px;font-size:13px;border-radius:12px}
.q .done{font-size:12px;margin-top:6px}
.tagred{font:700 11px Prompt;background:#fde8e8;color:#b42318;padding:2px 8px;border-radius:99px;white-space:nowrap;display:inline-block}
.tagred.ok{background:#ecfbf3;color:#1f9d61}
/* ร้านตอบรีวิว */
.reply{margin-top:10px;margin-left:14px;background:var(--chip);border-left:3px solid var(--pri2);border-radius:4px 14px 14px 4px;padding:9px 12px}
.reply .rh2{display:flex;gap:6px;align-items:center;font:700 12.5px Prompt;color:var(--pri)}
.reply .rh2 .av{width:22px;height:22px;margin:0;font-size:10px;border-width:1.5px}
.reply p{font-size:13px;line-height:1.55;margin-top:4px;color:#4a3a36;white-space:pre-line}
.reply .rm2{font-size:11px;color:var(--soft);margin-top:3px}
/* แบล็กลิสต์ */
.blbar{background:#e04b4b;color:#fff;border-radius:18px;padding:12px 14px;margin-top:8px;display:flex;gap:10px;align-items:flex-start;box-shadow:0 10px 24px -12px #e04b4b}
.blbar b{font:800 15px Prompt;display:block} .blbar span{font-size:12.5px;line-height:1.5;opacity:.95;display:block}
.blbar .ic{font-size:22px;line-height:1}
.blbar + .gray{margin-top:12px}
.gray{filter:grayscale(.85);opacity:.55}
.btn.off2{background:#eceaea;color:#9a9090;box-shadow:none;cursor:not-allowed}
.bl-hero{background:linear-gradient(135deg,#ffd9d1,#fff1ee)}
.bl-hero p{color:#8a3a2a}
.bltable .r{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.bltable .r:first-of-type{border-top:none}
.bltable .av{width:46px;height:46px;margin:0;font-size:17px;border-width:2px;flex:none;filter:grayscale(.6)}
.bltable b{font:700 14.5px Prompt} .bltable .why{font-size:12.5px;color:#b42318;line-height:1.5}
.bltable .meta{font-size:11.5px;color:var(--soft)}
@media (min-width:900px){.bltable .r{padding:14px 6px}.bltable .why{max-width:520px}}
/* ชีตยืนยันลบบัญชี */
.sheetx{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center}
.sheetx.open{display:flex}
.sheetx .bg{position:absolute;inset:0;background:rgba(var(--vdk),.45)}
.sheetx .cd{position:relative;width:100%;max-width:480px;background:var(--card);border-radius:28px 28px 0 0;padding:20px 18px 22px;max-height:92vh;overflow:auto}
.sheetx h3{font:700 19px Prompt;color:#b42318}
.sheetx ul{padding-left:18px;margin:8px 0} .sheetx li{font-size:13px;line-height:1.7}
.sheetx .two{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}

/* ================================================================ ของตกแต่งร้าน (ร้านซื้อ) + กรอบรีวิว (คนรีวิวซื้อ) */
/* ปก: ลายขอบ PNG โปร่งใสซ้อนทับรูปปก ยื่นออกนอกขอบ · พื้นไล่สีแทนรูปปก (จากชุด) · เอฟเฟกต์ CSS เบา ๆ */
.coverx{position:relative}
.coverx.has-art{margin:12px 10px 0}
.coverx.has-art .cover{height:120px}
.cover-art{position:absolute;left:-10px;right:-10px;top:-12px;bottom:-12px;background:center/100% 100% no-repeat;pointer-events:none;z-index:2}
.cover-fx{position:absolute;inset:0;border-radius:26px;overflow:hidden;pointer-events:none;z-index:1}
.cover-fx span{position:absolute}
@keyframes cfx-rise{from{transform:translateY(40px);opacity:0}20%{opacity:.85}to{transform:translateY(-60px);opacity:0}}
@keyframes cfx-blink{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@keyframes cfx-fall{from{transform:translateY(-60px) rotate(0)}to{transform:translateY(80px) rotate(200deg)}}
.fx-bubbles span{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(160,215,255,.7) 55%,rgba(70,160,230,.55));
  animation:cfx-rise 6s linear infinite;animation-delay:calc(var(--i) * -0.55s)}
.fx-fireflies span,.fx-embers span{width:6px;height:6px;border-radius:50%;background:#fff6a8;box-shadow:0 0 8px 3px rgba(255,236,120,.75);
  animation:cfx-blink 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -0.4s)}
.fx-embers span{background:#ffb04a;box-shadow:0 0 6px 2px #ff5a1f}
.fx-stars span{width:8px;height:8px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:cfx-blink 2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.3s)}
.fx-sakura span,.fx-snow span{top:0;width:10px;height:7px;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#ffd1e1,#ff8fb5);
  animation:cfx-fall 7s linear infinite;animation-delay:calc(var(--i) * -0.6s)}
.fx-snow span{width:5px;height:5px;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:reduce){.cover-fx span{animation:none;opacity:.6}}
/* รูปโปรไฟล์ในกรอบที่ซื้อ: ช่องกลางตาม manifest (frames.hole_geom) */
.avf{position:relative;margin:-64px auto -4px;z-index:3}
.avf .pic{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;display:grid;place-items:center;font:700 40px Prompt;color:#fff}
.avf img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.avf .vb{right:auto;bottom:auto;z-index:2}
/* กรอบรีวิว · ข้อความ/รูป/ป้ายยืนยันอยู่บนแผ่นขาว (.rv-in) เสมอ → อ่านง่าย */
.rv .rv-in{position:relative;z-index:1;background:rgba(255,255,255,var(--ia,.9));border-radius:14px;padding:10px 12px}
.rv.sk-corner{position:relative;margin:34px 10px 0;border:2px solid #e8e8ee;border-radius:22px;padding:22px 18px;box-shadow:none}
.rv.sk-corner .k{position:absolute;width:var(--ks);height:var(--ks);background:var(--k) 0 0/contain no-repeat;pointer-events:none;z-index:2}
.rv.sk-corner .k.tl{left:var(--ko);top:var(--ko)}
.rv.sk-corner .k.tr{right:var(--ko);top:var(--ko);transform:scaleX(-1)}
.rv.sk-corner .k.bl{left:var(--ko);bottom:var(--ko);transform:scaleY(-1)}
.rv.sk-corner .k.br{right:var(--ko);bottom:var(--ko);transform:scale(-1,-1)}
.rv.sk-border{border-style:solid;border-color:transparent;background:none;box-shadow:none;padding:0;border-radius:0;margin:14px 0 0}
/* การ์ดที่มีลายยื่นออกนอกกล่อง: เว้นระยะให้ลายมุมใบบน/ใบล่างไม่ชนกัน (ลายยื่นบน-ล่างข้างละ ~18px) */
.rv.sk-border{margin-top:24px}
.rv.sk-corner:first-child,.rv.sk-border:first-child{margin-top:22px}
.rv.sk-corner+.rv:not(.sk-corner):not(.sk-border),.rv.sk-border+.rv:not(.sk-corner):not(.sk-border){margin-top:30px}
.rv.sk-border .rv-in{margin:var(--im)}
.nmfx{-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
/* ร้านตกแต่ง (/dashboard/decor) + กรอบรีวิวของฉัน (/me/shop) */
.dk-prev{margin-top:12px;padding-bottom:6px}
.avf.mini{margin:0 auto}
.avf.mini .pic{font-size:22px}
.dtile{border:2px solid var(--line);border-radius:18px;padding:6px 4px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.dtile.on,.dart.on{border-color:var(--pri);box-shadow:0 0 0 3px var(--chip)}
.dtile b{font:600 12.5px Prompt;line-height:1.2}
.dtile small{font-size:11px;color:var(--soft)}
.dpr{display:inline-block;font:700 11.5px Prompt;padding:2px 9px;border-radius:99px;background:#fff4d6;color:#9a5b00;white-space:nowrap}
.dpr.own{background:var(--okbg);color:var(--ok)} .dpr.wear{background:var(--ink);color:#fff} .dpr.wait{background:var(--warnbg);color:var(--warn)}
.dart{border:2px solid var(--line);border-radius:18px;padding:14px 12px 10px;margin-top:10px}
.coverx.mini{margin:6px 6px 0}
.coverx.mini .cover{height:72px;border-radius:14px}
.coverx.mini .cover-art{left:-6px;right:-6px;top:-7px;bottom:-7px}
.dart .row,.dorn .row{display:flex;align-items:center;gap:8px;margin-top:12px}
.dart .row b,.dorn .row b{flex:1;font:600 14px Prompt}
.dorn{padding:4px 0 12px;border-bottom:1px solid var(--line)}
.dorn:last-child{border-bottom:none}
.dorn .rv{margin-top:18px}
.decorlinks{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.decorlinks .btn{min-width:150px;font-size:14px}

/* ---------- กดใจรายวัน + กรอบหัวใจ + หูสัตว์ + popup ได้รับของ (ม็อกอัพ design/mock-heart-ears ที่อนุมัติ) ---------- */
/* แถบสะสม 15 วันใต้หัวใจ */
.hprog{position:relative;z-index:1;margin-top:12px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 6px 16px -10px rgba(var(--vrgb),.45)}
.hprog .hl1{font-size:12px;color:var(--vtx);margin-bottom:6px}
.hprog .hl1 b{color:var(--vdeep)}
.hprog .t{display:flex;justify-content:space-between;align-items:baseline;font:600 13px Prompt;color:var(--vdeep)}
.hprog .dots{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin-top:8px}
.hprog .dots i{height:16px;border-radius:5px;background:var(--vtint2);font-style:normal;font-size:10px;line-height:1;display:grid;place-items:center;color:var(--vtx3)}
.hprog .dots i.on{background:linear-gradient(135deg,var(--vp2),var(--vhot));color:#fff}
.hprog .dots i.today{outline:2px solid var(--vhot);outline-offset:1px}
.hprog .s{font-size:11.5px;color:var(--vtx2);margin-top:6px;line-height:1.5}
.hprog .s a{font-weight:600}
/* กระดิ่ง + แผงแจ้งเตือน */
.ib.bell{font-size:17px;padding:0}
.ib .dot.red{background:#ff3b6b;color:#fff}
.ntpanel{position:absolute;z-index:90;right:max(12px,calc(50% - 268px));top:62px;width:min(340px,calc(100% - 24px));background:var(--card);border-radius:20px;padding:12px;box-shadow:0 18px 40px -16px rgba(var(--vdk),.45)}
.wide-top .ntpanel{right:max(12px,calc(50% - 508px))}
.ntpanel .ptl{font:600 15px Prompt;margin:2px 4px 6px}
.ntpanel .nt{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px;font-size:13px;line-height:1.45}
.ntpanel .nt.on{background:var(--vtint)}
.ntpanel .nt b{font:600 13px Prompt}
.ntpanel .nt small{color:var(--vtx2)}
.ntpanel .nt .btn{margin-top:6px}
.ntpanel .ni{flex:none;width:20px;text-align:center}
.nt-more{display:block;text-align:right;font:600 12.5px Prompt;margin:4px 6px 0}
/* แถบเตือนกดใจรายวัน (บนสุด · ปิดได้ วันละครั้ง) */
.hbar{position:relative;margin-top:6px;background:#fff;border:2px solid var(--vp2);border-radius:20px;padding:12px 14px;box-shadow:0 10px 24px rgba(var(--vrgb),.2);animation:hbdrop .35s ease-out}
.hbar[hidden]{display:none}
.hbar .tt{font:600 16px Prompt;color:var(--vttl)}
.hbar .ts{font-size:12.5px;color:var(--vtx);margin:1px 0 8px}
.hbar .btn{min-height:40px;border-radius:14px;background:var(--vbtn)}
.hbar .x{position:absolute;right:8px;top:6px;width:30px;height:30px;border:none;background:none;font:400 22px/1 Prompt;color:var(--vtx3);cursor:pointer}
@keyframes hbdrop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
/* รูปกลม + ของตกแต่ง (deco_avatar) */
.dav{position:relative;display:inline-block;flex:none;vertical-align:middle}
.dav .pic{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--vp2),var(--vp)) center/cover;display:grid;place-items:center;color:#fff;font-family:Prompt;font-weight:700;overflow:hidden}
.dav.k-none .pic{inset:0}
.dav.k-ears .pic{left:14%;top:26%;width:72%;height:72%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.dav img.fr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dav img.ear{position:absolute;left:4%;width:92%;top:-6%;height:47%;object-fit:contain;object-position:center bottom;pointer-events:none}
.dav .tb{position:absolute;inset:6% 0;border-radius:12px;background:#f2f9ff center/cover no-repeat;display:grid;place-items:center}
.dav .tb i{font-style:normal;font-size:24px}
/* รูปร้านใส่หู (หน้าร้าน) */
.ave{position:relative;margin:-70px auto 0;z-index:3}
.ave .pic{position:absolute;left:14%;top:26%;width:72%;height:72%;border-radius:50%;border:4px solid var(--card);background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;display:grid;place-items:center;font:700 40px Prompt;color:#fff;box-shadow:var(--sh)}
.ave img.ear{position:absolute;left:4%;width:92%;top:-6%;height:47%;object-fit:contain;object-position:center bottom;pointer-events:none}
.ave .vb{right:14%;bottom:0;z-index:2}
/* รูปคนรีวิวที่ใส่กรอบ/หู */
.rh .dav{margin:-6px -4px -6px -6px}
/* ร้านกรอบ: กรอบหัวใจ (กดใจ 15 วัน) + หูสัตว์ */
.dtile{position:relative}
.dbar{width:84%;height:6px;border-radius:9px;background:var(--vtint2);overflow:hidden;margin-top:2px}
.dbar b{display:block;height:100%;background:var(--vhot)}
.dlock{font-size:11px;color:var(--vtx2)}
/* popup ครบ 15 วัน / ได้รับของ */
.gpop{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:18px}
.gpop[hidden]{display:none}
.gp-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(var(--vrgb),.25),rgba(var(--vdk),.62) 70%)}
#heartpop .gp-bg{background:rgba(var(--vdk),.45)}
.gp-burst{position:absolute;left:50%;top:42%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.28) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:gpspin 18s linear infinite}
.gp-conf{position:absolute;width:8px;height:14px;border-radius:2px;pointer-events:none;
  left:calc(8% + var(--i) * 16%);top:-20px;animation:gpfall 2.6s ease-in calc(var(--i) * -.45s) infinite}
.gp-card{position:relative;width:100%;max-width:346px;background:#fff;border-radius:26px;padding:20px 18px 18px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.2);animation:gpin .32s cubic-bezier(.2,1.4,.4,1)}
.gp-card.gift{padding-top:24px;border-radius:28px}
.gp-rib{position:absolute;left:50%;top:-18px;transform:translateX(-50%);background:var(--vbtn);color:#fff;font:600 14px Prompt;padding:7px 22px;border-radius:99px;box-shadow:0 6px 14px rgba(var(--vrgb),.35);white-space:nowrap}
.gp-h{font:600 20px Prompt;color:var(--vttl);margin-top:4px}
.gp-card.gift .gp-h{font-size:22px;margin-top:8px}
.gp-p{font-size:13px;color:var(--vtx);margin:4px 0 6px;line-height:1.55}
.gp-av{display:flex;justify-content:center;margin:6px auto 4px;position:relative}
.gp-av.glow:before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,#fff6b0,transparent 70%)}
.gp-chip{display:inline-block;font:600 12px Prompt;padding:4px 10px;border-radius:99px;background:#e9f8ef;color:#2b8a57;margin-top:4px}
.gp-b1,.gp-b2{min-height:46px;border-radius:16px;font:600 15px Prompt;margin-top:8px}
.gp-b1{background:var(--vbtn);color:#fff}
.gp-b2{background:var(--vtint2);color:var(--vtx)}
.gp-set{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 6px}
.gp-set .si{background:#f2f9ff;border-radius:16px;padding:8px 4px 6px;position:relative}
.gp-set .th{height:70px;display:grid;place-items:center}
.gp-set .nm{font:600 12px Prompt;margin-top:4px}
.gp-set .ok{position:absolute;top:-6px;right:-6px;background:#2bb673;color:#fff;border-radius:50%;width:22px;height:22px;font-size:12px;display:grid;place-items:center;z-index:2}
@keyframes gpin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes gpspin{to{transform:rotate(360deg)}}
@keyframes gpfall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(105vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.gp-burst,.gp-conf,.gp-card,.hbar{animation:none}.gp-conf{top:auto;bottom:12%}}
/* ของของฉัน (/me/items) */
.mi-sub{font-size:12.5px;color:var(--vtx2);margin:0 4px 10px}
.mi-tabs{display:flex;background:var(--vtint2);border-radius:16px;padding:4px;margin-bottom:10px}
.mi-tabs button{flex:1;border:none;background:none;padding:8px 4px;font:600 13px Prompt;color:var(--vtx);border-radius:12px;cursor:pointer}
.mi-tabs button.on{background:#fff;color:var(--vttl)}
.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mi-grid[hidden]{display:none}
.mi-it{background:#fff;border-radius:20px;padding:10px;text-align:center;position:relative;box-shadow:var(--sh)}
.mi-it.use{outline:3px solid var(--vhot)}
.mi-it .th{height:96px;display:grid;place-items:center}
.mi-it .nm{font:600 13.5px Prompt;margin-top:2px}
.mi-it .mst{font-size:11.5px;color:var(--vtx2)}
.mi-it .tg{position:absolute;top:8px;left:8px;font:600 10.5px Prompt;padding:3px 8px;border-radius:99px;z-index:2}
.mi-it .tg.u{background:var(--vhot);color:#fff}.mi-it .tg.n{background:var(--vtint2);color:var(--vdeep)}
.mi-it .sb{display:inline-block;margin-top:6px;font:600 12px Prompt;padding:6px 14px;border-radius:99px;background:var(--vtint2);color:var(--vdeep);border:none;cursor:pointer}
.mi-it .sb.on{background:var(--vhot);color:#fff}
.mi-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:min(362px,calc(100% - 28px));background:var(--vink);color:#fff;border-radius:16px;padding:11px 14px;font-size:13px;display:flex;gap:10px;align-items:center;z-index:60;animation:hbdrop .35s ease-out}
.dav.rdeco .pic{background:linear-gradient(135deg,var(--vbd),#b7c4f5) center/cover no-repeat;font-size:14px}   /* รูปจริงต้องย่อพอดีวง (เดิมไม่มี cover = รูปคนรีวิวขึ้นมุมมืด) */
.dav.rdeco.k-ears .pic{border-width:2px}

/* ===== สมาชิก VIP (vip.py · ม็อกอัพ design/mock-vip) — class ขึ้นต้น vip- ทั้งหมด กันชนของเดิม ===== */
.vip-on{overflow:visible}
.ra.vip-on{position:relative}
.vip-spk{position:absolute;inset:0;pointer-events:none;z-index:4;display:block}
.vip-spk .vip-tw{position:absolute;display:block;width:max(10px,var(--vs,11%));aspect-ratio:1;animation:vip-tw 1.6s ease-in-out infinite;animation-delay:var(--vd,0s)}
.vip-spk .vip-tw::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 16%,#ffe680 46%,#f7c843 82%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 1.5px #d9a000) drop-shadow(0 0 6px #ffd24d)}
@keyframes vip-tw{0%,100%{transform:scale(.6) rotate(0);opacity:.65}50%{transform:scale(1.1) rotate(40deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.vip-spk .vip-tw{animation:none;transform:scale(.85);opacity:.95}}
.vip-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f6c453,#ffe08a);color:#7a4a10;font:600 12.5px Prompt;padding:3px 12px;border-radius:999px;box-shadow:0 3px 10px #e8b84040}
/* หน้า /vip */
.vip-top{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.vip-back{width:36px;height:36px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--soft);box-shadow:var(--sh);flex:none}
.vip-back svg.i{width:18px;height:18px}
.vip-hero{border-radius:24px;padding:22px 18px;text-align:center;color:#5a3d12;position:relative;overflow:hidden;background:linear-gradient(135deg,#fff3c8,#ffe08a 45%,#f6c453 100%);box-shadow:0 10px 26px #e8b84055}
.vip-hero .vip-crown{font-size:40px;filter:drop-shadow(0 3px 6px #0002);line-height:1.1}
.vip-hero h2{font:700 26px Prompt;letter-spacing:1px;margin:2px 0 0;color:#7a5410;justify-content:center}
.vip-hero .vip-price{font:600 16px Prompt;margin-top:4px}.vip-hero .vip-price b{font-size:30px;color:#b8372a}
.vip-hero .vip-per{font-size:13px;opacity:.8}
.vip-hero .vip-sp{position:absolute;color:#fff;filter:drop-shadow(0 0 4px #fff)}
.vip-state{margin-top:12px;background:var(--card);border-radius:18px;padding:12px 14px;box-shadow:var(--sh);font-size:13.5px;display:flex;gap:10px;align-items:center}
.vip-state b{font-family:Prompt}.vip-state .vip-ic{font-size:22px;flex:none}
.vip-state.vip-act{background:linear-gradient(135deg,#fffaf0,#fff3d1);border:1px solid #f6dc95}
.vip-feat{background:var(--card);border-radius:20px;padding:6px 16px;margin-top:14px;box-shadow:var(--sh)}
.vip-feat .vip-f{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.vip-feat .vip-f:last-child{border:0}.vip-feat .vip-f .vip-ic{font-size:19px;flex:none;width:24px;text-align:center}
.vip-feat .vip-f b{font-family:Prompt;font-weight:600}.vip-feat .vip-f span{display:block;color:var(--soft);font-size:13px}
.vip-pay{margin-top:14px;background:var(--card);border-radius:18px;padding:12px 14px;font-size:12.5px;color:var(--soft);box-shadow:var(--sh)}
.vip-go{display:block;width:100%;text-align:center;padding:14px;border-radius:16px;font:600 16px Prompt;margin-top:14px;border:none;cursor:pointer;background:linear-gradient(90deg,#f6c453,#ffd77a);color:#7a4a10;box-shadow:0 8px 20px #e8b84055}
.vip-go:disabled{opacity:.6;cursor:default}
.vip-small{text-align:center;font-size:11.5px;color:var(--faint);margin-top:8px}
/* VIP กดสมัครก่อน (design/mock-vip-flow · class vipf-) — ส่วนจ่ายซ่อนเฉพาะเมื่อมี JS (html.vipf-js) */
.vipf-cta{font-family:Mitr,Prompt,sans-serif;font-size:17px;padding:15px;border-radius:18px}
.vipf-pay{scroll-margin-top:12px}
.vipf-js .vipf-pay{max-height:0;opacity:0;overflow:hidden;visibility:hidden;transform:translateY(-8px);
  transition:max-height .45s ease,opacity .3s ease,transform .3s ease,visibility 0s linear .45s}
.vipf-js .vipf-pay.vipf-on{max-height:2400px;opacity:1;visibility:visible;transform:none;transition:max-height .5s ease,opacity .35s ease .05s,transform .35s ease .05s}
.vipf-js .vipf-cta.vipf-gone{display:none}
.vipf-sum{display:flex;justify-content:space-between;align-items:center;margin-top:14px;background:#fff7dc;border-radius:14px;padding:11px 14px;font:600 14px Mitr,Prompt,sans-serif;color:#7a5410}
.vipf-sum b{font-size:15px}
.vipf-step{display:flex;gap:8px;align-items:center;font:600 13.5px Mitr,Prompt,sans-serif;color:var(--pri);margin:16px 2px 8px}
.vipf-step i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.vipf-slip{margin-top:0}
.vipf-send{margin-top:12px;padding:14px;font-size:15.5px}
.vipf-x{display:none;margin:8px auto 0;background:none;border:0;font:13px Prompt,sans-serif;color:var(--faint);text-decoration:underline;cursor:pointer;padding:6px 10px}
.vipf-js .vipf-x{display:block}
@media (prefers-reduced-motion:reduce){.vipf-js .vipf-pay{transition:none}}
/* สวิตช์ประกาย (หน้าแก้ไขรูป) */
.vip-sw-card .vip-sw-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vip-sw-card .vip-sw-hd b{font:600 15px Prompt}
.vip-sw-card p{font-size:12.5px;color:var(--soft);margin:6px 0 0}
.vip-sw{position:relative;width:52px;height:30px;border-radius:99px;border:none;background:#e5dde2;cursor:pointer;flex:none;transition:background .2s}
.vip-sw::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transition:left .2s}
.vip-sw.vip-sw-on{background:linear-gradient(90deg,#f6c453,#ffd77a)}.vip-sw.vip-sw-on::after{left:25px}
.vip-sw-st{font:600 13px Prompt;color:#c89312}.vip-sw-st.vip-off{color:var(--faint)}
.vip-lock{display:inline-flex;align-items:center;gap:4px;font:600 12.5px Prompt;padding:6px 12px;border-radius:99px;background:linear-gradient(135deg,#f6c453,#ffe08a);color:#7a4a10}
.vip-lk{position:absolute;right:2px;top:2px;background:linear-gradient(135deg,#f6c453,#ffe08a);color:#7a4a10;font:600 9px Prompt;border-radius:7px;padding:1px 5px;z-index:5}
.vip-cap{color:#c89312!important;font-weight:600}

/* ===== หัวเว็บ CreditDee + เมนู ☰ (ม็อกอัพ design/mock-menu) — class ขึ้นต้น logo-/mn- ===== */
.logo .logo-sh{width:26px;height:26px;flex:none}
.logo .logo-sh path{fill:var(--vlogo);stroke:var(--vp);stroke-width:1.7;stroke-linejoin:round}
.logo .logo-tx{font:700 23px Mitr,Prompt,sans-serif;letter-spacing:.3px;background:linear-gradient(90deg,var(--vp),var(--vp2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.mn-x:focus-visible{outline:2px solid var(--vhot);outline-offset:2px}
.mn-dim{position:fixed;inset:0;background:rgba(var(--vdk),.42);z-index:80;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;cursor:pointer}
.mn-draw{position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);background:var(--vdraw);box-shadow:-12px 0 30px #0003;z-index:81;display:flex;flex-direction:column;
  transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility .25s;overflow:auto}
.mn-chk:checked ~ .mn-dim{opacity:1;visibility:visible}
.mn-chk:checked ~ .mn-draw{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.mn-draw,.mn-dim{transition:none}}
.mn-x{position:absolute;right:12px;top:12px;width:34px;height:34px;display:grid;place-items:center;color:var(--vtx2);font-size:19px;cursor:pointer;border-radius:10px;z-index:2}
.mn-head{background:var(--vhead);padding:18px 16px 16px;position:relative}
.mn-prof{display:flex;align-items:center;gap:12px;padding-right:30px}
.mn-pt{min-width:0}
.mn-nm{display:block;font:600 17px Mitr,Prompt,sans-serif;color:var(--vink);overflow-wrap:anywhere;line-height:1.3}
.mn-pt .vip-badge{font-size:11px;padding:2px 9px;margin-top:3px}
.mn-sub{font-size:12.5px;color:var(--vtx);margin:4px 0 0}
.mn-view{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;background:rgba(255,255,255,.75);border-radius:12px;font:600 13px Prompt;color:var(--vdeep);padding:9px}
.mn-view svg.i{width:15px;height:15px}
.dav.mn-av{flex:none}
.mn-list{flex:1;padding:8px 10px}
.mn-i{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:14px;font-size:14.5px;color:var(--vink)}
.mn-i:hover,.mn-i:focus-visible{background:#fff}
.mn-ar{margin-left:auto;color:var(--vtx3)}
.mn-adm{color:#2457b8}
.mn-out{color:#d8485a}
/* หน้าตั้งค่าบัญชี: เพศ + วันเกิด + ตัวอย่างกรอบอันดับ (class ac-) */
.ac-me{display:flex;align-items:center;gap:14px}
.ac-me b{display:block;font:600 18px Prompt}.ac-me span{font-size:13px;color:var(--soft)}
.ac-seg{display:flex;gap:8px}
.ac-sg{flex:1;position:relative;cursor:pointer}
.ac-sg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.ac-sg span{display:block;text-align:center;border:1.5px solid var(--vbd);border-radius:14px;padding:12px 6px;font:600 14px Prompt;color:var(--vtx);background:#fff}
.ac-sg input:checked + span{border-color:var(--vhot);background:var(--vtint);color:var(--vttl);box-shadow:0 0 0 2px var(--vbd)}
.ac-sg input:focus-visible + span{outline:2px solid var(--vhot);outline-offset:2px}
.ac-dob{display:flex;gap:8px}.ac-dob select{flex:1;min-width:0;text-align:center}
.ac-note{font-size:12px;color:var(--faint);margin-top:8px;line-height:1.55}
.ac-prev{display:flex;gap:10px;margin-top:4px}
.ac-pv{flex:1;text-align:center;border-radius:14px;padding:10px 4px;background:var(--vtint);opacity:.38;transition:opacity .2s}
.ac-pv.ac-on{opacity:1}
.ac-pv img{width:84px;height:84px;display:block;margin:0 auto}
.ac-t{font:600 12px Prompt;color:var(--vdeep)}
/* สวิตช์สีเว็บของคนดู (ในเมนู ☰ + หน้าตั้งค่าบัญชี) — class mn-theme/mn-sw */
.mn-theme{display:flex;align-items:center;gap:10px;margin:0 10px 16px;padding:10px 12px;border-radius:14px;background:#fff;font-size:14.5px;color:var(--vink)}
.mn-tl{flex:1}
.mn-seg{display:flex;background:var(--vtint2);border-radius:12px;padding:3px;gap:2px}
.mn-sw{border:none;background:none;border-radius:10px;padding:6px 12px;font:600 13px Prompt;color:var(--vtx);cursor:pointer;display:flex;align-items:center;gap:5px}
.mn-sw:before{content:"";width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#ff9db8,#e0547e)}
.mn-sw-blue:before{background:linear-gradient(135deg,#42c6f0,#0f8bd6)}
.mn-sw.mn-on{background:#fff;color:var(--vttl);box-shadow:0 2px 6px rgba(var(--vrgb),.2)}
.mn-sw:focus-visible{outline:2px solid var(--vhot);outline-offset:1px}
.ac-theme{display:flex;gap:8px}
.ac-theme .ac-sg span:before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:linear-gradient(135deg,#ff9db8,#e0547e)}
.ac-theme .ac-sg.ac-blue span:before{background:linear-gradient(135deg,#42c6f0,#0f8bd6)}
/* แถวปุ่มหน้าร้าน (design/mock-blue index · แบบ C): [รอง][หลัก][💬 48] สูง 48 เท่ากัน · ไม่มีแชท = 2 คอลัมน์ */
.acts3{gap:8px}
.acts3.acts3-2{grid-template-columns:1fr 1fr}
.acts3 .btn{height:48px;min-height:48px;border-radius:15px;font:600 14.5px Prompt;white-space:nowrap}
.acts3 .act-sec,.acts3 .starbtn{background:var(--card);color:var(--pri);box-shadow:inset 0 0 0 1.5px var(--line2)}
.acts3 .starbtn{border:none}
.acts3 .starbtn.on{background:var(--goldbg);color:var(--goldink);box-shadow:inset 0 0 0 1.5px #f6cf6a}
.acts3 .act-chat{width:48px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line2);font-size:19px;border-radius:15px}
.acts3 .b1{box-shadow:var(--prish)}
/* ===== ร้านตกแต่งแยกแท็บ + ลองก่อนซื้อ (design/mock-blue/decor · class dk-) ===== */
.dk-tabs{display:flex;background:var(--bg2);border-radius:16px;padding:4px;margin-top:12px;gap:2px}
.dk-tab{flex:1;text-align:center;padding:9px 2px;border-radius:12px;font:600 13.5px Prompt;color:var(--soft);white-space:nowrap}
.dk-tab.dk-on{background:var(--card);color:var(--pri);box-shadow:var(--sh)}
.dk-tabs4 .dk-tab{font-size:12.5px;gap:4px;padding:9px 1px}.dk-tabs4 .dk-tab svg.i{width:15px;height:15px}   /* 4 แท็บ (มีร้าน · รวมแท็บฉายา) ให้พอดีจอ 390 */
.dk-admin{margin-top:10px;font:600 12.5px Prompt;background:#e8f0fe;color:#1a56c4;border-radius:12px;padding:8px 12px}
.dk-prev{padding:12px 12px 14px}
.dk-ph{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--soft);margin-bottom:6px}
.dk-trying-lb{font:600 12.5px Prompt;color:var(--pri);text-align:right}
.dk-stage .coverx.dk-cov{margin:12px 6px 0}
.dk-stage .avf.dk-av{margin:-62px auto -2px}
.dk-stage .avf.dk-av .pic{font-size:34px;border-radius:50%}
#dkprev .avf img[src=""]{display:none}
#dkprev .avf .pic{transition:all .15s}
.dk-rv{margin:16px 6px 4px}
.dk-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.dk-bar[hidden]{display:none}
.dk-bar .btn{min-height:46px;border-radius:14px;font-size:14.5px;padding:0 8px}
.dk-reset{background:var(--card);color:var(--pri);box-shadow:inset 0 0 0 1.5px var(--line2)}
.dk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dk-tile{position:relative;background:var(--card);border-radius:18px;padding:12px 10px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:var(--sh);border:2px solid transparent}
.dk-tile.dk-s-wear{border-color:var(--line2)}
.dk-tile.dk-trying{border-color:var(--pri);box-shadow:0 0 0 3px var(--chip),var(--sh)}
.dk-th{height:92px;width:100%;display:grid;place-items:center}
.dk-th .coverx.dk-cv{width:calc(100% - 12px);margin:6px}
.dk-th .coverx.dk-cv .cover{height:68px;border-radius:12px}
/* ลายปกในช่องสินค้า = ปกจริงย่อส่วน (เจ้าของสั่ง 10 พ.ย.) · สัดส่วนเท่าปกหน้าร้านตามจอ · ลายยื่นเป็น % ให้ย่อตาม
   มือถือ ปกจริง ~326x163 (2:1) ลายยื่น 10/12px = 3.1% / 7.4% · ไอแพด/คอม ดู responsive.css */
.dk-th:has(.dk-cv){height:auto;min-height:92px}
.dk-th .coverx.dk-cv .cover{height:auto;aspect-ratio:2/1}
.dk-th .coverx.dk-cv .cover-art{left:-3.1%;right:-3.1%;top:-7.4%;bottom:-7.4%}
.dk-nm{font:600 14px Prompt;line-height:1.25}
.dpr.dk-plain{background:var(--chip);color:var(--soft)}
.dk-tag{position:absolute;top:-8px;left:8px;font:600 10.5px Prompt;padding:2px 9px;border-radius:99px;background:var(--chip);color:var(--pri);z-index:3}
.dk-tag.dk-tag-use{background:var(--ok);color:#fff}
.dk-tag.dk-tag-try{display:none;background:var(--pri);color:#fff}
.dk-tile.dk-trying .dk-tag{display:none}
.dk-tile.dk-trying .dk-tag.dk-tag-try{display:block}
.dk-acts{display:flex;gap:6px;width:100%;margin-top:4px}
.dk-acts form{flex:1;display:flex;margin:0}
.dk-try,.dk-act{flex:1;min-height:36px;border:none;border-radius:11px;font:600 13px Prompt;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;text-decoration:none}
.dk-try{background:var(--chip);color:var(--pri)}
.dk-tile.dk-trying .dk-try{background:var(--pri);color:#fff}
.dk-act{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri);width:100%}
.t-c .dk-act{background:var(--pri)}
.dk-act.dk-off{background:var(--card);color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line2)}
.dk-try:focus-visible,.dk-act:focus-visible,.dk-tab:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.dk-rv:not(.sk-corner) .k{display:none}
.dk-rv:not(.sk-corner):not(.sk-border){box-shadow:0 0 0 1.5px var(--line2)}
.dk-act,.dk-try{white-space:nowrap;font-size:12.5px}
.dk-acts .dk-try{flex:0 0 40%}

/* ===== ฉายา (titles.py · ม็อกอัพ design/mock-title) — class ขึ้นต้น ttl- ทั้งหมด · สีตายตัว อ่านได้ทั้งธีมฟ้า/ชมพู ===== */
.ttl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%}
.ttl-row-lg{justify-content:center;gap:8px}
.ttl-row.ttl-head{margin-top:7px;padding:0 12px}
.ttl-row.ttl-inl{display:inline-flex;flex-wrap:wrap;margin-left:2px;row-gap:4px}
.rh > div:has(> .rn){flex:1;min-width:0}
.ttl-row.ttl-mn,.ttl-row.ttl-ac{margin-top:4px}
.ttl-row .vip-badge{margin:0}
.ttl-row > *{flex:none;white-space:nowrap}
.ttl-row .vip-badge.ttl-vsm,.vip-badge.ttl-vsm{font-size:11px;padding:2px 8px;gap:3px;line-height:1.35}
.ttl-row .ttl,.ttl{display:inline-flex;align-items:center;gap:4px;font:600 12px Mitr,Prompt,sans-serif;line-height:1.35;padding:2px 10px;border-radius:999px;border:1.5px solid;white-space:nowrap;position:relative;max-width:100%}
.ttl-row .ttl .ttl-ic,.ttl .ttl-ic{font-size:12px;color:inherit}
.ttl-row .ttl.ttl-lg,.ttl.ttl-lg{font-size:15px;padding:4px 14px 4px 11px}
.ttl-row .ttl.ttl-lg .ttl-ic,.ttl.ttl-lg .ttl-ic{font-size:15px}
/* GM: ม่วงสว่าง ขอบทอง + ขอบนอกครีม + เรืองม่วง */
.ttl-row .ttl.ttl-gm,.ttl.ttl-gm{color:#fff;font-weight:700;letter-spacing:.6px;padding:2px 11px 2px 8px;border:2px solid transparent;
  background:linear-gradient(135deg,#b44dff,#8b3dff 55%,#d27bff) padding-box;
  box-shadow:0 0 0 2px #f6c453,0 0 0 3.5px #fff3c4,0 4px 14px #a855f799,inset 0 1px 0 #ffffff66;text-shadow:0 1px 2px #5b21b699;margin:3px 4px}
.ttl-row .ttl.ttl-gm.ttl-lg,.ttl.ttl-gm.ttl-lg{padding:4px 15px 4px 11px}
.ttl.ttl-gm .ttl-ic{filter:drop-shadow(0 0 3px #ffe680)}
.ttl.ttl-gm::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#ffffff55 45%,transparent 60%);pointer-events:none}
/* ฉายาจากภารกิจ: สีอ่อนเรียบ */
.ttl-row .ttl.ttl-rev,.ttl.ttl-rev{background:#e9f7ff;color:#0f6fb0;border-color:#9fd4f2}
.ttl-row .ttl.ttl-star,.ttl.ttl-star{background:#fff6d8;color:#8a6a10;border-color:#f2d27a}
.ttl-row .ttl.ttl-heart,.ttl.ttl-heart{background:#ffeef4;color:#c43a6e;border-color:#f5b3c8}
.ttl-row .ttl.ttl-old,.ttl.ttl-old{background:#eef8ee;color:#2b7a3c;border-color:#a8dbb1}
/* ฉายาประจำชุด (kind set · แบบ 2 ขอบทองหรู ที่เจ้าของเลือก 9 พ.ย.): พื้นขาว→สีชุด · ขอบทองไล่เงา · ไอคอนในวงกลมสีชุด
   สีชุด --ta/--tb (วงไอคอน) --tc (พื้น) --td (ตัวอักษร) · sm = ข้างชื่อรีวิว/เมนู/หน้าเลือก · lg = หัวร้าน */
.ttl-p-sak{--ta:#f472b6;--tb:#fb7185;--tc:#fde2ec;--td:#9d174d}
.ttl-p-sea{--ta:#0ea5e9;--tb:#2dd4bf;--tc:#dff7fb;--td:#0e5f78}
.ttl-p-fai{--ta:#4ade80;--tb:#a78bfa;--tc:#efe9ff;--td:#5b3aa8}
.ttl-p-gal{--ta:#4338ca;--tb:#7c3aed;--tc:#e8e6ff;--td:#312e81}
.ttl-p-clo{--ta:#16a34a;--tb:#eab308;--tc:#e7f8e9;--td:#166534}
.ttl-row .ttl.ttl-gd,.ttl.ttl-gd{gap:5px;font:700 11.5px Prompt,sans-serif;line-height:1.3;padding:2px 10px 2px 3px;color:var(--td);
  border:1.5px solid transparent;background:linear-gradient(#fff,var(--tc)) padding-box,linear-gradient(120deg,#f5d77a,#c8962e,#fff1b8,#c8962e) border-box;
  box-shadow:0 2px 7px #c8962e44}
.ttl-row .ttl.ttl-gd .ttl-ic,.ttl.ttl-gd .ttl-ic{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;
  background:linear-gradient(135deg,var(--ta),var(--tb));box-shadow:inset 0 0 0 2px #fff8}
.ttl-row .ttl.ttl-gd.ttl-lg,.ttl.ttl-gd.ttl-lg{gap:7px;font-size:15px;padding:4px 16px 4px 5px;border-width:2.5px;box-shadow:0 3px 10px #c8962e44}
.ttl-row .ttl.ttl-gd.ttl-lg .ttl-ic,.ttl.ttl-gd.ttl-lg .ttl-ic{width:26px;height:26px;font-size:15px}
.ttl-li.ttl-s-lock .ttl.ttl-gd{filter:grayscale(1)}
/* ฉายาชุดใหม่แบบกรอบรูป (10 พ.ย. · ฟีนิกซ์): กรอบ 9-slice ปลายคงรูป กลางยืด · ภาษาอังกฤษ Cormorant SC ไล่ทอง */
.ttl-row .ttl.ttl-img,.ttl.ttl-img{height:30px;box-sizing:border-box;padding:0 4px;border-radius:0;border-style:solid;border-width:0 23px;background:none;box-shadow:none;
  border-image-slice:0 130 fill;border-image-width:0 23px;border-image-repeat:stretch;font:700 11.5px/1 "Cormorant SC",serif;letter-spacing:.3px}
.ttl-row .ttl.ttl-img.ttl-lg,.ttl.ttl-img.ttl-lg{height:42px;border-width:0 32px;border-image-width:0 32px;padding:0 6px;font-size:16px}
.ttl.ttl-img .ttl-tx{background:linear-gradient(180deg,#fff6c8,#ffd27a 55%,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 1px #5a1500)}
.ttl.ttl-i-phoenix{border-image-source:url("../img/titles/phoenix.webp")}
.ttl-li.ttl-s-lock .ttl.ttl-img{filter:grayscale(1)}
.ttl-st-set{font-size:11.5px;color:var(--vtx2)}
/* ฉายาสะสมดาว (kind stars · แบบ B ไล่ระดับท้องฟ้า เจ้าของเลือก 11 พ.ย. · ม็อกอัพ star-titles):
   ทรงแคปซูล + ไอคอน SVG ในวงกลมซ้าย · sk1 100 ดาว เงินเรียบ · sk2 500 ดาว ทองเรือง · sk3 1000 ดาว ขอบทอง พื้นม่วง→น้ำเงิน + ประกายวิบวับ
   แอนิเมชันใช้ transform/opacity เท่านั้น · ลดการเคลื่อนไหว = ประกายนิ่ง */
.ttl-row .ttl.ttl-sk,.ttl.ttl-sk{gap:5px;font:700 11.5px Prompt,sans-serif;line-height:1.3;padding:2px 11px 2px 3px;border:1.5px solid transparent}
.ttl-row .ttl.ttl-sk .ttl-ic,.ttl.ttl-sk .ttl-ic{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;line-height:0}
.ttl.ttl-sk .ttl-sv{width:11px;height:11px;fill:#fff;display:block}
.ttl.ttl-sk .ttl-sv-w{width:13px;height:10px}
.ttl-row .ttl.ttl-sk.ttl-lg,.ttl.ttl-sk.ttl-lg{gap:7px;font-size:15px;padding:4px 15px 4px 4px;border-width:2.5px}
.ttl-row .ttl.ttl-sk.ttl-lg .ttl-ic,.ttl.ttl-sk.ttl-lg .ttl-ic{width:26px;height:26px}
.ttl.ttl-sk.ttl-lg .ttl-sv{width:16px;height:16px}
.ttl.ttl-sk.ttl-lg .ttl-sv-w{width:19px;height:14px}
.ttl-row .ttl.ttl-sk1,.ttl.ttl-sk1{color:#5b4636;background:linear-gradient(#fbf7f3,#efe3d8) padding-box,linear-gradient(120deg,#d9dde3,#a8a29e,#f3f4f6,#b08d6e) border-box}
.ttl.ttl-sk1 .ttl-ic{background:linear-gradient(135deg,#cbd2da,#9aa3ad);box-shadow:inset 0 0 0 2px #fff9}
.ttl-row .ttl.ttl-sk2,.ttl.ttl-sk2{color:#6b4a00;background:linear-gradient(#fff8dc,#ffe9a3) padding-box,linear-gradient(120deg,#f5d77a,#c8962e,#fff1b8,#c8962e) border-box;
  box-shadow:0 0 12px #f5c54688,0 0 3px #ffe08a}
.ttl.ttl-sk2 .ttl-ic{background:linear-gradient(135deg,#ffd54a,#e09b12);box-shadow:inset 0 0 0 2px #fff8,0 0 7px #ffcf4d}
.ttl-row .ttl.ttl-sk3,.ttl.ttl-sk3{color:#fff;letter-spacing:.3px;text-shadow:0 1px 2px #1e1060;margin:3px 6px 3px 3px;
  background:linear-gradient(135deg,#2b1b6e,#5b2bd6 50%,#2563eb) padding-box,linear-gradient(120deg,#ffe9a0,#c8962e,#fff6cf,#d4a038) border-box;
  box-shadow:0 0 0 1.5px #ffffffcc,0 0 0 3px #f6c453,0 0 14px #8b5cf6bb,0 0 26px #3b82f644}
.ttl.ttl-sk3 .ttl-ic{background:radial-gradient(circle at 40% 35%,#fff7cf,#f6c453 55%,#b7791f);box-shadow:0 0 8px #ffe08a,inset 0 0 0 2px #fff9}
.ttl.ttl-sk3 .ttl-sv{fill:#5b2bd6}
.ttl.ttl-sk3::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#ffffff40 45%,transparent 60%);pointer-events:none}
.ttl.ttl-sk3 .ttl-spk{position:absolute;inset:0;pointer-events:none}
.ttl.ttl-sk3 .ttl-spk i{position:absolute;width:10px;height:10px;background:#fff6cf;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #fff);
  animation:ttl-tw 2.4s ease-in-out infinite}
.ttl.ttl-sk3 .ttl-spk i:nth-child(1){right:-7px;top:-8px}
.ttl.ttl-sk3 .ttl-spk i:nth-child(2){left:-5px;bottom:-5px;width:7px;height:7px;background:#c4b5fd;animation-delay:0.8s}
.ttl.ttl-sk3 .ttl-spk i:nth-child(3){right:14px;bottom:-7px;width:6px;height:6px;background:#fff;animation-delay:1.6s}
.ttl.ttl-sk3.ttl-lg .ttl-spk i:nth-child(1){width:14px;height:14px;right:-9px;top:-10px}
.ttl.ttl-sk3.ttl-lg .ttl-spk i:nth-child(2){width:9px;height:9px;left:-6px;bottom:-7px}
.ttl.ttl-sk3.ttl-lg .ttl-spk i:nth-child(3){width:7px;height:7px;right:18px;bottom:-9px}
@keyframes ttl-tw{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(0.45) rotate(45deg);opacity:0.35}}
@media (prefers-reduced-motion:reduce){.ttl.ttl-sk3 .ttl-spk i{animation:none}}
.ttl-st-sk{font-size:11.5px;color:var(--vtx2)}
.ttl-pgt{display:block;margin-top:3px;font:600 11.5px Prompt,sans-serif;color:var(--vtx)}
/* การ์ดชุดคู่ในร้านตกแต่ง (ม็อกอัพ settitle.html ①) — ซื้อครบชุดได้ฉายาพิเศษ */
.bdl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.bdl{border:1.5px solid var(--line2);border-radius:18px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:6px;min-width:0}
.bdl-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bdl-hd b{font:600 16px Mitr,Prompt,sans-serif;color:var(--ink)}
.bdl-pr{font:700 17px Prompt,sans-serif;color:var(--pri);white-space:nowrap}
.bdl-it{font-size:12px;color:var(--soft);line-height:1.5}
.bdl-gift{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1.5px dashed #e7c46a;border-radius:12px;padding:8px 10px;
  background:#fffdf5;font:600 12.5px Prompt,sans-serif;color:#8a6a10}
.bdl-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.bdl-ft small{font-size:12px;color:var(--soft)}
/* หน้า ฉายาของฉัน */
.ttl-me{display:flex;align-items:center;gap:12px;background:var(--vhead);border-radius:20px;padding:14px;margin-top:12px}
.ttl-me b{display:block;font:600 17px Mitr,Prompt,sans-serif;color:var(--vink)}
.ttl-me small{font-size:12px;color:var(--vtx2)}
.ttl-av{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 20px Mitr,Prompt,sans-serif;color:#fff;background:linear-gradient(135deg,var(--vp2),var(--vp))}
.ttl-card h2{margin-bottom:4px}
.ttl-sub{font-size:12px;color:var(--soft);margin:0 0 10px}
.ttl-li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;margin-bottom:6px;background:var(--vtint)}
.ttl-li.ttl-s-on{background:#f1e6ff;box-shadow:inset 0 0 0 2px #b44dff}
.ttl-li.ttl-s-lock{opacity:.6}
.ttl-li > .ttl{flex:none}
.ttl-how{flex:1;min-width:0;font-size:11.5px;color:var(--vtx2)}
.ttl-li.ttl-s-on .ttl-how{color:#6b5a86}
.ttl-pg{height:5px;border-radius:9px;background:var(--vline2);margin-top:4px;overflow:hidden}
.ttl-pg b{display:block;height:100%;background:var(--vp)}
.ttl-st{font:600 12px Mitr,Prompt,sans-serif;color:var(--vtx);white-space:nowrap}
.ttl-st-on{color:#8b3dff}
.ttl-use{font:600 12px Mitr,Prompt,sans-serif;padding:7px 13px;border-radius:10px;border:none;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--vp),var(--vp2));box-shadow:var(--vpsh)}
.ttl-use:focus-visible{outline:2px solid var(--vdeep);outline-offset:2px}
.ttl-none{margin-top:10px;display:flex;justify-content:flex-end}
.ttl-li.ttl-s-on{flex-wrap:wrap}
.ttl-li.ttl-s-on .ttl-how{flex:1 1 140px}
.ttl-act{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.ttl-act form{margin:0}
.ttl-pos{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-left:2px;border-radius:999px;background:#b44dff;color:#fff;font-size:11px;line-height:1}
.ttl-mv,.ttl-off{font:600 12px Mitr,Prompt,sans-serif;padding:7px 10px;border-radius:10px;cursor:pointer;background:#fff;color:var(--vtx);border:1.5px solid #d9c6f5;min-height:32px}
.ttl-mv{padding:7px 9px}
.ttl-mv:focus-visible,.ttl-off:focus-visible{outline:2px solid var(--vdeep);outline-offset:2px}
.ttl-link{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 15px Prompt;color:var(--ink)}
.ttl-link small{font:500 12.5px Prompt;color:var(--soft);text-align:right}
@media (prefers-reduced-motion:reduce){.ttl.ttl-gm::after{display:none}}

/* ---------------------------------------------------------------- แท็บรีวิว + ชีตเขียนรีวิว (ม็อกอัพทางเลือก A · 7 พ.ย.) */
.rsum2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rsum2 .sc{background:var(--card);border-radius:22px;padding:14px 16px;box-shadow:var(--sh);border:1.5px solid var(--line2);display:flex;flex-direction:column;gap:3px;min-width:0}
.rsum2 .k{font:500 12.5px Prompt;color:var(--soft)}
.rsum2 b{font:700 30px Prompt;color:var(--pri);line-height:1.15}
.rsum2 b.g2{color:var(--goldink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.st5{font-size:16px;letter-spacing:-1px;line-height:1}
.st5 i,.rstars i{font-style:normal;color:var(--line2)}
.st5 i.on,.rstars i.on{color:var(--gold)}
.rsum2 small{font-size:11.5px;color:var(--soft);line-height:1.4}
.rsum2 + .stchips{margin-top:8px}
.rhead{margin-top:20px}
.rhead h2{font:700 23px Mitr,Prompt,sans-serif;color:var(--ink);margin-top:6px;line-height:1.3;overflow-wrap:anywhere}
.rvbig{margin-top:10px;padding:0 28px;min-height:52px;font-size:16px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center}
.rstars{font-size:14px;letter-spacing:-1px;margin-right:4px}
.svtag{display:inline-flex;margin-top:10px;font:600 11.5px Prompt;color:var(--vdeep);background:var(--vtint);border:1px solid var(--vbd);padding:3px 10px;border-radius:99px;max-width:100%;overflow-wrap:anywhere}
.svtag + .rt{margin-top:6px}
.rv.new{box-shadow:0 0 0 2px var(--pri2),var(--sh)}
.rvsheet{text-align:left;max-height:94vh;overflow:auto;padding:22px 20px 20px}
.rvsheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line2);margin:-8px auto 10px}
.rvsheet .mx{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:var(--chip);border:none;font:600 20px/36px Prompt;color:var(--soft);cursor:pointer}
.rvsheet h3{font:700 21px Mitr,Prompt,sans-serif;margin-top:8px;padding-right:30px}
.who2{display:flex;gap:10px;align-items:center;margin-top:10px;background:var(--bg);border-radius:14px;padding:8px 10px;font-size:12px;color:var(--soft)}
.who2 .ra{width:36px;height:36px;font-size:14px;flex:none}
.who2 b{display:block;color:var(--ink);font:600 13.5px Prompt}
.rvsheet .lbl{margin-top:14px}
.rvsheet .lbl small{font:500 11.5px 'Noto Sans Thai',sans-serif;color:var(--soft);margin-left:4px}
.stars5.left{justify-content:space-between;margin-top:0}
.stars5.left .sb{width:auto;flex:1}
.sthint{font-size:12px;color:var(--goldink);background:var(--goldbg);border-radius:12px;padding:7px 10px;margin-top:6px;line-height:1.5}
.sthint:empty{display:none}
.rvsheet .ta{min-height:92px}
.rvsheet .note{margin-top:14px}
.rvsheet .note b{color:var(--ok)}
.rvsheet .btn.full{margin-top:12px}
.rvsheet .btn[aria-busy=true]{opacity:.6;pointer-events:none}
.toast.show{z-index:200}
/* หน้าร้าน: ปุ่มดูรีวิวเพิ่มเติม */
.rv-more{margin-top:22px;justify-content:center;gap:6px}
.rv-more small{opacity:.75;font-weight:500}
.rv-more.busy{opacity:.6;pointer-events:none}

/* ================================================================ หน้าแรก แถวรูปจริง (design/mock-home-img แบบ B) · class hm- ทั้งหมด
   ใต้กล่องค้นหา/แบนเนอร์โปร ก่อนสถิติ · สีจากตัวแปรธีม (ฟ้า/ชมพู) · เลื่อนแนวนอน */
.hm-pics{min-width:0}
.hm-sec{margin-top:16px}
.hm-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 8px}
.hm-hd h2{font:700 16px Prompt;color:var(--ink);margin:0}
.hm-hd a{font:600 12.5px Prompt;color:var(--pri);white-space:nowrap;text-decoration:none}
.hm-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 -16px;padding:4px 16px 12px;scroll-padding:0 16px;-webkit-overflow-scrolling:touch}
.hm-scroll::-webkit-scrollbar{display:none}
.hm-shop{flex:0 0 150px;scroll-snap-align:start;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--sh);
  display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);padding-bottom:10px}
.hm-cv{display:block;position:relative;overflow:hidden;width:100%;height:70px;flex:none;
  background:linear-gradient(135deg,var(--vtint2),var(--vp2) 70%,var(--vp))}
.hm-cv img{display:block}
.hm-shop .hm-av{margin:-34px auto 0;z-index:2;flex:none}
.hm-shop .av.hm-av{width:62px;height:62px;border-width:3px;font-size:24px}
.hm-shop .avf.hm-av .pic,.hm-shop .ave.hm-av .pic{font-size:22px}
.hm-shop .ave.hm-av .pic{border-width:3px}
.hm-shop .hm-av .vb{width:18px;height:18px;border-width:2px}
.hm-shop .hm-av .vb svg.i{width:10px;height:10px}
.hm-shop .av.hm-av .vb{right:-4px;bottom:-2px}
.hm-nm{display:block;max-width:100%;padding:0 8px;margin-top:4px;font:600 13px Prompt;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-st{font:500 11.5px Prompt;color:#8a6a10;margin-top:2px}
/* การ์ดร้าน VIP3: รูปพื้นหลังการ์ด (ตั้งในหน้ารูปภาพ) ใต้ปก · ชื่อ/ดาวบนป้ายขาว (แบบ B · 10 พ.ย.) */
.hm-shop.has-cbg{position:relative;isolation:isolate}
.hm-shop .tcbg{position:absolute;left:0;right:0;top:70px;bottom:0;z-index:-1;background:center/cover no-repeat;pointer-events:none}
.hm-shop .tcbg::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15)}
.hm-shop.has-cbg .hm-nm,.hm-shop.has-cbg .hm-st{background:rgba(255,255,255,.88);border-radius:99px;padding:1px 10px;max-width:calc(100% - 12px)}
.hm-shop.has-cbg .hm-st{margin-top:4px}
.hm-rv{flex:0 0 232px;scroll-snap-align:start;background:var(--card);border-radius:16px;padding:10px;box-shadow:var(--sh);
  display:flex;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.hm-im{flex:none;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--vtint)}
.hm-im img{display:block;width:100%;height:100%;object-fit:cover}
.hm-tx{display:flex;flex-direction:column;min-width:0;gap:2px}
.hm-tx b{font:600 13px Prompt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-q{font-size:12px;line-height:1.4;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-rs{font-size:12px;letter-spacing:1px;color:#f2a516}.hm-rs i{font-style:normal;color:var(--vtx3)}
/* แบบ A: มาสคอตขวาของ hero (design/mock-home-img/mascot.png · แสดงเฉพาะเมื่อมี static/img/mascot/hero.webp → .hero[data-mascot])
   มือถือ/ไอแพด: มาสคอตยึดมุมขวาแทนรูปหัวใจ → ปุ่มกดใจเหลือแคปซูล "♡ N คนกดใจ" ใต้คำโปรย (ยังกดได้เหมือนเดิม)
   คอม (responsive.css): หัวใจเต็มอยู่ที่เดิม มาสคอตยืนข้างซ้ายของหัวใจ */
.hm-mascot{position:absolute;z-index:1;right:-10px;top:26px;width:150px;height:auto;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(var(--vdk),.18));animation:hm-bob 3s ease-in-out infinite}
@keyframes hm-bob{50%{transform:translateY(-5px)}}
.hm-bub{position:absolute;z-index:3;right:16px;top:8px;background:#fff;color:var(--vdeep);font:600 11px Prompt;
  padding:5px 9px;border-radius:12px 12px 12px 2px;box-shadow:0 4px 10px rgba(var(--vdk),.08);white-space:nowrap}
.hero[data-mascot]{min-height:214px}
.hero[data-mascot] h1{max-width:178px;padding-right:0}
.hero[data-mascot] p{max-width:178px;padding-right:0}
.hero[data-mascot] .search,.hero[data-mascot] .promo-bar,.hero[data-mascot] .hprog{z-index:2}
.hero[data-mascot] .heartbtn{position:relative;z-index:2;right:auto;top:auto;width:auto;align-items:flex-start;margin-top:8px}
.hero[data-mascot] .heartbtn svg.art{display:none}
@media (min-width:600px){
  .hero[data-mascot] h1,.hero[data-mascot] p{max-width:calc(100% - 200px)}
  .hm-mascot{width:190px;right:4px;top:18px}
  .hm-bub{right:40px}
}
@media (prefers-reduced-motion:reduce){.hm-mascot{animation:none}}

/* หลังบ้าน: ลิงก์ไปหน้าแก้ไขรูปแทนช่องอัปโหลดเดิม */
.pic-link{display:block;margin:12px 0 4px;padding:11px 13px;border-radius:14px;background:var(--chip);color:var(--pri);font-size:13px;text-decoration:none}
.pic-link b{font-weight:600}

/* ---------- กรอบมีปีก (กรอบ GM · _decor.framed_avatar .winged) — ต้นแบบ gmframe/gm.html ที่เจ้าของอนุมัติ 7 พ.ย.
   จังหวะ 2.2 วิ: 0% ปีกยกพับเข้า (rotateY มิติลึก) → 38% ตีลงเร็วกางสุด + แสงวาบ + กรอบลอยขึ้น → 100% ยกกลับช้า ---------- */
.winged{isolation:isolate;animation:fw-bob 2.2s infinite}
.winged .pic{z-index:1}
.winged>img{z-index:2}   /* ห้ามใส่ filter/animation ที่ตัวกรอบ: Safari วาดกรอบเยื้องจากรูป (ไอแพด 7 พ.ย.) → แสงเรืองแยกชั้น .fw-glow */
.fw-glow{position:absolute;left:14%;top:20%;width:72%;height:72%;border-radius:50%;z-index:0;pointer-events:none;box-shadow:0 0 26px 10px rgba(192,132,252,.85),0 0 10px 3px rgba(250,204,21,.45);opacity:.35;animation:fw-glow 2.2s infinite}
.winged .vb{z-index:3}
.fw-box{position:absolute;width:83%;height:83%;top:2.7%;left:74%;z-index:-1;perspective:700px;pointer-events:none}
.fw-box.l{left:-57%;transform:scaleX(-1)}
.fw{position:absolute;inset:0;background:center/contain no-repeat;transform-origin:3% 43%;animation:fw-flap 2.2s infinite;will-change:transform,filter}
.fw-spk{position:absolute;inset:-10%;z-index:3;pointer-events:none;animation:fw-spin 6s linear infinite}
.fw-spk i{position:absolute;width:5px;height:5px;border-radius:50%;background:#f5d0fe;box-shadow:0 0 8px 2px rgba(216,180,254,.9)}
@keyframes fw-bob{0%{transform:translateY(3px)}38%{transform:translateY(-6px);animation-timing-function:cubic-bezier(.3,0,.6,1)}100%{transform:translateY(3px)}}
@keyframes fw-flap{
  0%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(168,85,247,.35)) brightness(.9);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  38%{transform:rotateY(0deg) rotateZ(16deg) scale(1.04);filter:drop-shadow(0 0 16px rgba(196,140,255,1)) brightness(1.22);animation-timing-function:cubic-bezier(.4,0,.5,1)}
  70%{transform:rotateY(18deg) rotateZ(2deg) scale(1.01);filter:drop-shadow(0 0 10px rgba(180,110,250,.7)) brightness(1.05)}
  100%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(168,85,247,.35)) brightness(.9)}}
@keyframes fw-glow{0%,100%{opacity:.35}38%{opacity:1}}
@keyframes fw-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.winged,.fw-glow,.fw,.fw-spk{animation:none}.fw{transform:rotateZ(8deg)}}

/* ---------- กรอบวิ้ง (กรอบนีออน · _decor.framed_avatar .twinkly) — แสงเรืองชั้นหลัง + ดาว 4 แฉกกะพริบ + จุดแสงวน (8 พ.ย.) ---------- */
.twinkly{isolation:isolate}
.twinkly .pic{z-index:1}
.twinkly>img{z-index:2}
.tk-glow{position:absolute;left:10%;top:12%;width:78%;height:78%;border-radius:50%;z-index:0;pointer-events:none;
  box-shadow:0 0 34px 12px rgba(var(--c1),.7),0 0 18px 6px rgba(var(--c2),.55);animation:tk-gl 2.6s ease-in-out infinite}
@keyframes tk-gl{0%,100%{opacity:.35}50%{opacity:1}}
.tk-orb{position:absolute;inset:-4%;z-index:3;pointer-events:none;animation:fw-spin 7s linear infinite}
.tk-orb i{position:absolute;width:6px;height:6px;border-radius:50%;background:#e0f2fe;box-shadow:0 0 10px 3px rgba(103,232,249,.95)}
.tk-orb i:nth-child(2){background:#fce7f3;box-shadow:0 0 10px 3px rgba(244,114,182,.95)}
.tk-tw{position:absolute;z-index:3;width:18px;height:18px;pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:tk-tw 2.4s ease-in-out infinite}
.tk-tw::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 5px #a5f3fc) drop-shadow(0 0 9px #f0abfc)}
@keyframes tk-tw{0%,100%{transform:translate(-50%,-50%) scale(0) rotate(0)}45%{transform:translate(-50%,-50%) scale(1) rotate(45deg)}60%{transform:translate(-50%,-50%) scale(.7) rotate(60deg)}}
@keyframes fw-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tk-glow,.tk-orb,.tk-tw{animation:none}.tk-tw{transform:translate(-50%,-50%) scale(.8)}}

/* ปุ่มสลับกรอบอันดับ (หน้าตกแต่ง · rank_frame_off) */
.rk-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin:0 0 14px;border:1.5px solid var(--line2);border-radius:16px;background:var(--card)}
.rk-toggle b{display:block;font:700 14.5px Prompt;margin-bottom:2px}
.rk-toggle .muted{font-size:12.5px}
.rk-toggle .btn{flex:none;white-space:nowrap}
@media (max-width:599px){.rk-toggle{flex-direction:column;align-items:stretch}}

.drop .fp-prev{display:block;max-width:100%;max-height:160px;margin:0 auto 8px;border-radius:12px;object-fit:contain}

/* ---------- แจ้ง "เสร็จสิ้น" กลางจอ (แบบ A · base.html #okpop) — เด้ง .2 วิ ค้าง ~.8 วิ แล้วจาง · แตะปิดได้ ---------- */
.okpop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;animation:okpop-out .25s ease-in 1.05s forwards}
.okcard{pointer-events:auto;cursor:pointer;min-width:180px;max-width:min(320px,86vw);text-align:center;padding:24px 30px 18px;border-radius:26px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(15,139,214,.25);
  animation:okpop-in .2s cubic-bezier(.2,1.4,.4,1) both}
.okc{width:70px;height:70px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:grid;place-items:center;box-shadow:0 8px 24px rgba(34,197,94,.45)}
.okc svg{width:38px;height:38px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:okpop-chk .28s ease-out .12s forwards}
.okcard b{display:block;font:700 18px Prompt;color:#0d1b34}
.okcard span{display:block;margin-top:2px;font-size:13px;color:#5b6b82;line-height:1.45}
@keyframes okpop-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes okpop-chk{to{stroke-dashoffset:0}}
@keyframes okpop-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.okcard{animation:none}.okc svg{animation:none;stroke-dashoffset:0}}

/* โบนัสเติมครั้งแรก (การ์ดบนหน้าตกแต่ง · 8 พ.ย.) */
.fpk{background:linear-gradient(135deg,#fff5fb,#f1ecff);border:1.5px solid #ead9ff}
.fpk-hd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px}
.fpk-hd b{font:700 17px Prompt}.fpk-hd .muted{flex-basis:100%;font-size:12.5px}
.fpk-tag{font:700 11.5px Prompt;color:#fff;background:linear-gradient(135deg,#f472b6,#a78bfa);padding:3px 10px;border-radius:999px}
.fpk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fpk-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:18px;padding:14px 12px;text-align:center;box-shadow:0 3px 12px #8b5cf614}
.fpk-opt b{font:700 15px Prompt}.fpk-opt small{font-size:12px;color:var(--soft)}
.fpk-min{font:700 12px Prompt;color:#7c3aed;background:#f3e8ff;border-radius:999px;padding:3px 10px}
.fpk-pair{display:flex;gap:10px;justify-content:center;align-items:center;min-height:96px}
.fpk-pair-c{flex-direction:column;gap:12px;width:100%;padding:6px 8px}
.fpk-orn{position:relative;width:88%;padding:10px;border-radius:14px;font-size:12px;border:1.5px solid #f7bcd3;background:linear-gradient(135deg,#fff4f8,#ffdbe8);color:#8a4a6a}
.fpk-orn.fpk-dark{border-color:#2f6fd6;background:linear-gradient(135deg,#1c2436,#0f1522);color:#cfe0ff}
.fpk-orn .k{position:absolute;width:32px;height:32px;background:var(--k) 0 0/contain no-repeat;pointer-events:none}
.fpk-orn .tl{left:-8px;top:-8px}.fpk-orn .tr{right:-8px;top:-8px;transform:scaleX(-1)}
.fpk-orn .bl{left:-8px;bottom:-8px;transform:scaleY(-1)}.fpk-orn .br{right:-8px;bottom:-8px;transform:scale(-1,-1)}
/* ฉายา "ผู้สนับสนุนคนแรก" (แบบ A โฮโลแกรม) */
.ttl-row .ttl.ttl-first,.ttl.ttl-first{color:#fff;font-weight:700;letter-spacing:.3px;padding:2px 11px 2px 8px;border:2px solid transparent;
  background:linear-gradient(110deg,#ff8ad8,#a78bfa 35%,#60c8ff 65%,#7cf2c8) padding-box;
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px #e9d5ff,0 4px 14px #a78bfa88;text-shadow:0 1px 2px #6d28d999;margin:3px 4px}
.ttl-row .ttl.ttl-first.ttl-lg,.ttl.ttl-first.ttl-lg{padding:4px 15px 4px 11px}
.ttl.ttl-first::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,#ffffff66 45%,transparent 60%);pointer-events:none}

/* ช่องลิงก์หน้าร้าน (_slug.html · 8 พ.ย.) */
.lbl .lbl-sub{font-weight:400;color:var(--soft);font-size:12px}
.slg-url{display:flex;align-items:stretch;border:1.5px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff}
.slg-url:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f622}
.slg-host{background:#eef3fb;color:#64748b;padding:11px 4px 11px 12px;font:14px Prompt;white-space:nowrap;display:flex;align-items:center}
.slg-in{flex:1;min-width:0;border:0;outline:0;padding:11px 12px 11px 2px;font:600 15px Prompt;color:#1d4ed8;background:transparent}
.slg-msg{font:600 12.5px Prompt;margin-top:6px;min-height:0}.slg-msg:empty{display:none}
.slg-ok{color:#16a34a}.slg-bad{color:#dc2626}
.slg-th{margin-top:6px;font:600 12.5px Prompt;color:#dc2626;background:#fef2f2;border-radius:10px;padding:7px 10px}
.slg-hint{margin:6px 0 0;font-size:12px}
.slg-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.slg-chip{font:500 12.5px Prompt;background:#eef3fb;color:#1d4ed8;border:0;border-radius:999px;padding:5px 11px;cursor:pointer}
.slg-prev{margin-top:10px;background:linear-gradient(135deg,#f0f6ff,#f5f0ff);border-radius:14px;padding:10px 12px;font-size:12.5px;color:#475569}
.slg-ln{display:flex;align-items:center;gap:8px;margin-top:6px;background:#fff;border-radius:10px;padding:8px 10px;min-width:0}
.slg-ln i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#bfdbfe,#ddd6fe);display:grid;place-items:center;flex:none;color:#2563eb}
.slg-ln i svg{width:16px;height:16px}
.slg-ln b{font:600 13px Prompt;color:#2e2840}.slg-cr{font-size:12px;color:#94a3b8}
.slg-ln small{display:block;color:#2563eb;font-size:11.5px;word-break:break-all}
@media (max-width:380px){.slg-host{font-size:12px;padding-left:8px}}

/* ส่องคนรีวิว (แบบ A · 8 พ.ย.) */
.pk-hit{display:block;flex:none;border-radius:50%;cursor:pointer}
.rn .pk-name{color:inherit;font:inherit;text-decoration:underline dotted 1.5px;text-underline-offset:3px;cursor:pointer}
.rn .pk-name:hover{color:var(--blue,#2563eb)}
.rn .pk-name.nmfx,.rn .pk-name.nmfx:hover{color:transparent;text-decoration-color:rgba(120,120,140,.45)}   /* ชื่อไล่สีตามกรอบรีวิว (เดิมโดน color:inherit ทับ = ดำ) */
.pk-sheet{max-width:440px;width:100%}
.pk-grab{width:42px;height:5px;border-radius:9px;background:#d6d9e3;margin:0 auto 12px}
.pk-load{text-align:center;color:var(--soft);padding:30px 0}
.pk-top{display:flex;gap:14px;align-items:center}
.pk-av{flex:none}.pk-ra{width:88px;height:88px;font-size:32px}
.pk-id{min-width:0}.pk-nm{display:block;font:700 19px Mitr,Prompt,sans-serif;word-break:break-all}
.pk-id .ttl-row{margin-top:5px}.pk-since{display:block;font-size:12px;color:var(--soft);margin-top:5px}
.pk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.pk-stats div{background:#f3f6fc;border-radius:14px;padding:9px 6px;text-align:center}
.pk-stats b{display:block;font:700 17px Mitr,Prompt,sans-serif;color:#2563eb}.pk-stats span{font-size:11px;color:var(--soft)}
.pk-lh{font:600 13px Prompt;margin:4px 0 6px;color:var(--soft)}
.pk-sh{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:9px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.pk-snm{font:600 13.5px Prompt;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-st{color:#f5b301;font-size:12px;letter-spacing:1px}
.pk-sh small{grid-column:1/-1;font-size:12px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-empty{text-align:center;margin:10px 0}.pk-go{margin-top:12px}
.pk-page{max-width:480px;margin:16px auto}

/* ชวนเพื่อน (invite.html · ฟอร์มเปิดร้าน .refbox · 8 พ.ย.) */
.ivt{max-width:560px;margin:0 auto}
.ivt-hero{background:linear-gradient(135deg,#a78bfa,#60a5fa);color:#fff;border-radius:22px;padding:18px;margin:6px 0 14px}
.ivt-hero b{font:700 20px Mitr,Prompt,sans-serif;display:block}.ivt-hero>span{font-size:13px;opacity:.92}
.ivt-lnk{display:flex;gap:8px;margin-top:12px}
.ivt-lnk input{flex:1;min-width:0;background:#ffffff26;border:1.5px dashed #ffffffb3;border-radius:12px;padding:9px 10px;font:600 13px Prompt;color:#fff}
.ivt-lnk button{background:#fff;color:#4f46e5;font:700 13px Prompt;border:0;border-radius:12px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.ivt-sh{display:flex;gap:8px;margin-top:8px}
.ivt-sh a,.ivt-sh button{flex:1;text-align:center;background:#ffffff26;color:#fff;border:0;border-radius:10px;padding:8px;font:600 12.5px Prompt;text-decoration:none;cursor:pointer}
.ivt-code{display:block;margin-top:10px;font-size:12px;opacity:.92}
.ivt-big{font:700 30px Mitr,Prompt,sans-serif;color:#4f46e5}.ivt-big small{font:500 13px Prompt;color:var(--soft)}
.ivt-bar{position:relative;height:12px;background:#eef0f7;border-radius:9px;margin:18px 14px 36px}
.ivt-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#a78bfa,#60a5fa)}
.ivt-ms{position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #d6d9e8;display:grid;place-items:center;font:700 11px Mitr,Prompt,sans-serif;color:#8a8aa0}
.ivt-ms.on{border-color:#7c3aed;color:#7c3aed;background:#f3e8ff}
.ivt-ms em{position:absolute;top:30px;font:600 11px Prompt;color:var(--soft);font-style:normal;white-space:nowrap}
.ivt-rw{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.ivt-rw:last-child{border:0}
.ivt-th{width:58px;height:58px;flex:none;border-radius:14px;background:#f5f3ff;display:grid;place-items:center;font-size:26px}
.ivt-rw b{font:600 14px Prompt;display:block}.ivt-rw small{font-size:12px;color:var(--soft)}
.ivt-st{margin-left:auto;font:700 11.5px Prompt;border-radius:999px;padding:4px 10px;white-space:nowrap}
.ivt-st.ok{background:#dcfce7;color:#15803d}.ivt-st.lk{background:#f1f5f9;color:#64748b}.ivt-st.nx{background:#ede9fe;color:#6d28d9}.ivt-st.bad{background:#fee2e2;color:#b91c1c}
.ivt-orn{position:relative;width:46px;height:34px;border:1.5px solid #ddd6fe;border-radius:8px;background:#fff}
.ivt-orn .k{position:absolute;width:18px;height:18px;background:var(--k) 0 0/contain no-repeat}.ivt-orn .tl{left:-5px;top:-5px}.ivt-orn .br{right:-5px;bottom:-5px;transform:scale(-1,-1)}
.ivt-fr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ivt-fr>i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#fbcfe8,#c4b5fd);flex:none;display:grid;place-items:center;font:600 13px Mitr,Prompt,sans-serif;color:#fff;font-style:normal}
.ivt-rule{font-size:12px;margin:4px 4px 20px}
.refbox{display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,#f5f3ff,#eff6ff);border:1.5px solid #ddd6fe;border-radius:14px;padding:12px;margin-bottom:6px}
.refbox>i{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,#c4b5fd,#93c5fd) center/cover;display:grid;place-items:center;color:#fff;font:600 15px Mitr,Prompt,sans-serif;font-style:normal}
.refbox b{font:600 14px Prompt}.refbox small{display:block;font-size:12px;color:var(--soft)}
.ivt-hero .ivt-code b{display:inline;font:700 13px Prompt}
.ivt-cv{width:54px;height:18px;border-radius:4px;background:linear-gradient(120deg,#ffd6e8,#c9e7ff) ;background-size:100% 100%,auto;position:relative}.ivt-cv{background-repeat:no-repeat;background-position:center;background-color:#e8f3ff}

/* รีวิวผู้เยี่ยมชม (8 พ.ย.) */
.ra.rv-guest{background:#e2e8f0;color:#94a3b8;display:grid;place-items:center}.ra.rv-guest svg{width:24px;height:24px}
.rv-gname{font-weight:600}
.rv-login{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--pri,#2563eb)}

/* ร้านจัดการรีวิวที่หน้าร้าน: ตอบ / ลบ (8 พ.ย.) */
.rv-own{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.rv-own .rv-rp{flex:1;min-width:0}.rv-own summary{cursor:pointer;font:600 13px Prompt;color:var(--pri,#2563eb)}
.rv-own .ta{min-height:64px;margin-top:6px}.rv-own-b{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:6px}
.rv-del{color:#dc2626;font-size:13px;white-space:nowrap}
.dash-rvlink{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;color:inherit}
.rv-own .rv-proof{white-space:nowrap;font-size:12.5px}

/* VIP หมุนรอบรูปหน้าร้าน (_ui.vip_orbit · 8 พ.ย.) — ระดับ 1 ดาวทองโคจร · ระดับ 2 ฟองสบู่ */
.vfx-wrap{display:flex;justify-content:center}
.vfx{position:relative;display:inline-block;max-width:100%}
.vfx-ring{position:absolute;inset:-6%;z-index:6;pointer-events:none;animation:vfx-sp 8s linear infinite}
.vfx-ring i{position:absolute;width:var(--s,9%);aspect-ratio:1;transform:translate(-50%,-50%)}
.vfx-st i{--s:7%;background:radial-gradient(circle,#fff 0 25%,#ffc61a 45%,#ffb300 70%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 5px #ffb300);
  animation:vfx-tw 1.2s ease-in-out infinite;animation-delay:var(--dl)}
.vfx-st i:nth-child(even){--s:5%}
.vfx-bb{animation-duration:14s}
.vfx-bb i b{display:block;width:100%;height:100%;border-radius:50%;animation:vfx-bob 1.8s ease-in-out infinite;animation-delay:var(--dl);
  background:radial-gradient(circle at 32% 28%,#fff 0 12%,transparent 20%),radial-gradient(circle at 50% 50%,#e0f7ff22 40%,#67e8f9aa 66%,#e879f9bb 82%,#fbbf24bb 93%,#fff 100%);
  box-shadow:inset 0 0 6px #fff,0 0 8px #67e8f9aa}
@keyframes vfx-sp{to{transform:rotate(360deg)}}
@keyframes vfx-tw{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes vfx-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.vfx-ring,.vfx-ring i,.vfx-ring b{animation:none}}
/* ย้าย margin ติดลบ (ซ้อนปก) ของรูปหน้าร้านไปที่ตัวห่อ → วงหมุนอยู่ตรงกลางรูปพอดี */
.vfx-wrap{position:relative;z-index:3}
.vfx>.av,.vfx>.avf,.vfx>.ave,.vfx>.rk-shophead{margin:0!important}
.vfx-wrap:has(>.vfx>.av){margin-top:-50px}
.vfx-wrap:has(>.vfx>.avf){margin:-64px 0 -4px}
.vfx-wrap:has(>.vfx>.ave){margin-top:-70px}
.vfx-wrap:has(>.vfx>.rk-shophead){margin-top:-70px}
.vfx-ring{inset:-9%}
.vfx-st i{--s:14%;width:max(16px,var(--s))}
.vfx-st i:nth-child(even){--s:10%;width:max(11px,var(--s))}

/* แท็บเอฟเฟกต์ (VIP) */
.dk-tabs5 .dk-tab{font-size:11.5px;gap:3px;padding:9px 0}.dk-tabs5 .dk-tab svg.i{width:14px;height:14px}
/* 6 แท็บ (มีร้าน · 11 พ.ย. เพิ่มเซต+ฉายา): 3 คอลัมน์ 2 แถว ตัวไม่เล็กจนอ่านยาก */
.dk-tabs6{display:grid;grid-template-columns:repeat(3,1fr)}.dk-tabs6 .dk-tab{font-size:12.5px;gap:4px;padding:9px 2px}.dk-tabs6 .dk-tab svg.i{width:15px;height:15px}
.dk-tabs6 .dk-tab:first-child:not(.dk-on){color:#c2410c;font-weight:700}
.bdl-top{margin-top:12px}
.bdl-jump{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--ink)}.bdl-jump span{flex:1;display:flex;flex-direction:column}.bdl-jump small{color:var(--soft);font-size:12px}
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fx-opt{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line2);border-radius:18px;padding:16px 6px 12px;text-align:center;background:var(--card)}
.fx-opt.on{border-color:var(--pri,#2563eb);background:#f0f6ff}.fx-opt.lock{opacity:.75}
.fx-opt b{font:600 14px Prompt}.fx-opt small{font-size:11.5px;color:var(--soft);min-height:2.4em}
.fx-av{padding:12px 0 6px}.fx-av .vfx .av.fx-pic{margin:0;width:64px;height:64px;font-size:24px}
@media (max-width:420px){.fx-grid{gap:6px}.fx-av .vfx .av.fx-pic{width:54px;height:54px}}

/* แอดมินแยกหน้า (?tab= · 8 พ.ย.) */
.adm-tabs{display:flex;gap:6px;overflow-x:auto;margin:10px 0 14px;padding-bottom:4px;scrollbar-width:none}
.adm-tabs a{flex:none;font:600 13.5px Prompt;padding:9px 14px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:var(--sh);text-decoration:none;white-space:nowrap}
.adm-tabs a.on{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.adm-tabs a b{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;margin-left:4px;padding:0 4px}
.adm-pane{max-width:760px}

/* ประกาศรีวิวได้ไม่ต้องสมัคร (8 พ.ย.) */

.ann-guest b{font:700 15px Prompt;display:block;color:#14532d}

.rv-guesthint{margin-top:8px;font-size:12.5px;color:#15803d;background:#f0fdf4;border-radius:10px;padding:7px 10px;text-align:center}

/* ร้านตัวอย่างจากทีมงาน (8 พ.ย.) */
.sc-pill-row{text-align:center;margin-top:6px}
.sc-pill{display:inline-block;font:600 11.5px Prompt;color:#6d28d9;background:#f3e8ff;border:1px solid #e9d5ff;border-radius:999px;padding:3px 11px}

.sc-card b{font:700 15px Prompt;display:block;color:#4c1d95}


/* ช่องข้างดาวบนหน้าร้าน (แทนอายุบัญชี · 8 พ.ย.) */
.st-rk3{display:flex;align-items:center;justify-content:center;overflow:visible}
.st-rk3 .rk-badge{margin:-18px -10px -22px;max-width:100%}
.sb-rank{color:#2563eb}.sb-hot{color:#ea580c}.sb-new{color:#16a34a}.sb-rv{color:#0f766e}

/* แอดมินตั้งรหัสใหม่ให้ลูกค้า (8 พ.ย.) */
.pwrs{margin:-2px 0 10px 48px;font-size:13px}.pwrs summary{cursor:pointer;color:#2563eb;font-weight:600}
.pwrs-f{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}.pwrs-f .in{flex:1;min-width:160px;margin:0}

/* ปักรีวิว (9 พ.ย. · แบบ B) */
article.rv.pinned{position:relative}
.pintag{position:absolute;top:-8px;right:12px;z-index:5;font:700 11px Prompt,sans-serif;color:#fff;background:linear-gradient(90deg,#38bdf8,#2563eb);border-radius:999px;padding:3px 10px;box-shadow:0 3px 8px #2563eb44}
.pinsep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 4px 14px;color:#64748b;font:600 13px Prompt,sans-serif}
.pinsep::before,.pinsep::after{content:"";flex:1;height:1px;background:#cbd5e1}
.rv-pinf{display:inline}
.pinbtn{display:inline-flex;align-items:center;gap:4px;font:600 12.5px Prompt,sans-serif;border:1.5px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:4px 12px;margin:6px 6px 0 0;cursor:pointer}
.pinbtn.on{background:#2563eb;color:#fff;border-color:#2563eb}.pinbtn[disabled]{opacity:.55;cursor:not-allowed}

/* แอดมิน: คำขอที่ตัดสินแล้วซ่อนใน details (9 พ.ย.) */
.rq-hist{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}.rq-hist>summary{cursor:pointer;font-weight:600;color:var(--soft);padding:6px 2px}
/* ปุ่มรูปตาดู/ซ่อนรหัสผ่าน (static/js/pweye.js) */
.pwwrap{position:relative;display:block}
.pwwrap .in{padding-right:52px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--vtx2,#7a8ca0);cursor:pointer;border-radius:12px;padding:0}
.pweye:hover{background:#0000000a}.pweye:focus-visible{outline:2px solid var(--vp,#0f8bd6);outline-offset:1px}
.pweye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pweye.on{color:var(--vp,#0f8bd6)}
/* กลุ่ม Facebook: ไทล์ในเมนู ☰ + การ์ดหน้าแรก (design/mock-fb-group) */
.mn-tile.fbg-t{background:#1877f2;color:#fff;font:700 19px Arial,sans-serif}


.fbg-tx b{display:block;font:600 14.5px Prompt,sans-serif}

.mn-draw:has(.mn-comm) .mn-list{flex:none}.mn-draw .mn-list.mn-comm{flex:1;padding-top:0}
/* ---------- โฮเวอร์รูปขยาย (static/js/hoverzoom.js · เฉพาะเครื่องที่มีเมาส์ · มือถือไม่เปลี่ยน) ---------- */
.hz-pop{display:none}
@media (hover:hover) and (pointer:fine){
  [data-hz]{cursor:zoom-in}
  .hz-pop{display:block;position:fixed;left:0;top:0;z-index:9999;pointer-events:none;padding:6px;border-radius:16px;
    background:var(--card,#fff);box-shadow:0 18px 48px rgba(20,24,40,.28),0 2px 8px rgba(20,24,40,.14);
    opacity:0;transform:scale(.92);transition:opacity .15s ease,transform .15s ease;visibility:hidden}
  .hz-pop.on{opacity:1;transform:none;visibility:visible}
  .hz-pop img{display:block;max-width:none;border-radius:11px;object-fit:contain;background:var(--bg2,#f3f4f6)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.hz-pop{transform:none;transition:opacity .15s}}

/* กรอบ GM แดง (สายผู้ชาย · 9 พ.ย.) — แสงเรือง/แสงวาบปีกเป็นแดงแทนม่วง */
.winged-red .fw-glow{box-shadow:0 0 26px 10px rgba(239,68,68,.85),0 0 10px 3px rgba(250,204,21,.5)}
.winged-red .fw{animation-name:fw-flap-red}
.winged-red .fw-spk i{background:#fecaca;box-shadow:0 0 8px 2px rgba(248,113,113,.9)}
@keyframes fw-flap-red{
  0%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(220,38,38,.35)) brightness(.9);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  38%{transform:rotateY(0deg) rotateZ(16deg) scale(1.04);filter:drop-shadow(0 0 16px rgba(248,90,90,1)) brightness(1.22);animation-timing-function:cubic-bezier(.4,0,.5,1)}
  70%{transform:rotateY(18deg) rotateZ(2deg) scale(1.01);filter:drop-shadow(0 0 10px rgba(239,68,68,.7)) brightness(1.05)}
  100%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(220,38,38,.35)) brightness(.9)}}

/* กรอบฟีนิกซ์ (10 พ.ย.) — ปีกขนนกไฟ (ภาพแนวตั้ง โคนปีกซ้ายกลางค่อนล่าง 62%) · แสงเรือง/แสงวาบ/ประกายเป็นไฟส้มทอง
   กรอบฟีนิกซ์กว้างเกือบเต็มภาพ → ขยับกล่องปีกให้โคนมุดหลังขนไฟข้างกรอบ · ซ้าย = 100 - left - width */
.winged-fire .fw-box{width:80%;height:80%;top:0;left:84%}
.winged-fire .fw-box.l{left:-64%}
.winged-fire .fw{transform-origin:1% 62%;animation-name:fw-flap-fire}
.winged-fire .fw-glow{left:16%;top:20%;width:66%;height:66%;box-shadow:0 0 28px 10px rgba(249,115,22,.85),0 0 10px 3px rgba(253,186,116,.6)}
.winged-fire .fw-spk i{background:#fdba74;box-shadow:0 0 8px 2px rgba(249,115,22,.9)}
@keyframes fw-flap-fire{
  0%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(234,88,12,.4)) brightness(.9);animation-timing-function:cubic-bezier(.55,0,.25,1)}
  38%{transform:rotateY(0deg) rotateZ(16deg) scale(1.04);filter:drop-shadow(0 0 16px rgba(251,146,60,1)) brightness(1.2);animation-timing-function:cubic-bezier(.4,0,.5,1)}
  70%{transform:rotateY(18deg) rotateZ(2deg) scale(1.01);filter:drop-shadow(0 0 10px rgba(249,115,22,.7)) brightness(1.05)}
  100%{transform:rotateY(52deg) rotateZ(-24deg) scale(.97);filter:drop-shadow(0 0 5px rgba(234,88,12,.4)) brightness(.9)}}

/* ป้ายฉายา GM แดง — ใส่คู่กรอบ GM แดง (9 พ.ย.) */
.ttl-row .ttl.ttl-gm.ttl-gm-red,.ttl.ttl-gm.ttl-gm-red{background:linear-gradient(135deg,#ef4444,#b91c1c 55%,#f87171) padding-box;box-shadow:0 0 0 2px #f6c453,0 0 0 3.5px #fff3c4,0 4px 14px #dc262699,inset 0 1px 0 #ffffff66;text-shadow:0 1px 2px #7f1d1d99}

/* ปุ่ม action (9 พ.ย.) — ลิงก์ตัวหนังสือเปล่า (ลบ/ตอบ/ยกเลิก/summary) → ปุ่มชุดเดียวกับ .btn .sm · ลบ = .bad-btn + ไอคอนถังขยะ */
summary.btn{list-style:none;width:fit-content;user-select:none}
summary.btn::-webkit-details-marker{display:none}
summary.btn::marker{content:""}
.btn.bad-btn svg.i,.btn.b3 svg.i{width:16px;height:16px}
.bad-btn:hover{filter:brightness(.97)}
.btn.sm:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.bad-btn:focus-visible{outline-color:var(--bad)}
/* เครื่องมือใต้รีวิว (หน้าร้าน · มุมมองเจ้าของ) */
.rv-own{flex-wrap:wrap;align-items:center;gap:8px}
.rv-own .rv-rp{flex:0 0 auto}                 /* ปิดอยู่ = กว้างเท่าปุ่ม · ปุ่มปัก/ลบเรียงแถวเดียวกัน (เดิม 1 1 auto ดันลบตกบรรทัด) */
.rv-own .pinbtn{margin:0}
.rv-own .btn.sm,.rv-own .rv-pinf .pinbtn{padding:6px 9px;font-size:12px;gap:3px;white-space:nowrap}   /* 3 ปุ่ม (ตอบ·ปัก·ลบ) แถวเดียวถึงจอ 320 */
.rv-own .btn.sm svg.i{width:14px;height:14px}
.rv-own .rv-rp[open]{flex-basis:100%}
.rv-own .rv-rp>summary{color:var(--pri)}
.t-c .rv-own .rv-rp>summary{color:var(--ink)}
.rv-own .ta{margin-top:8px}
.rv-own-b{gap:8px;margin-top:8px}
.rv-own .rv-pinf{display:flex;margin-left:auto}
.rv-own .pinbtn{margin:0;min-height:36px;border-radius:12px;padding:0 12px;font-size:13px}
.rv-own .rv-del{color:var(--bad);font-size:13px}
.rv-own .rv-proof{display:flex;align-items:center;min-height:36px}
/* หลังบ้าน: ลบรูปโปรไฟล์/ปก · แอดมิน: summary ตั้งรหัส/ประวัติ */
.pwrs>summary.btn{color:var(--pri);font-weight:600}
.rq-hist>summary.btn{padding:0 12px;color:var(--pri);font-weight:600}
details.q>summary.btn{margin:10px 0 4px}
/* รายงานร้าน (ผู้ชม) — ปุ่มเรียบโทนจาง ไม่แย่งสายตา */
.report summary.rp-sum{background:var(--bg2);color:var(--soft);font-size:12.5px;margin:0 auto}
/* VIP: ยกเลิก / ปิด */
.vipf-js .vipf-x{display:flex}
.vipf-x{align-items:center;justify-content:center;width:100%;min-height:44px;margin:10px 0 0;border-radius:14px;
  background:var(--card);color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line2);font:600 14px Prompt,sans-serif;text-decoration:none}
@media (max-width:520px){
  .rv-own .btn.sm,.rv-own .pinbtn,.pwrs>summary.btn{min-height:40px}
}

/* หน้าแรก แบบ A (9 พ.ย.): ทางลัด 3 ปุ่มแถวเดียว + แถบหัวใจพับได้ */
.qchips{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:12px 0}
.qc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;padding:8px 4px;border-radius:14px;background:#fff;color:var(--vdeep,#1e3a5f);text-decoration:none;font:600 12.5px Prompt,sans-serif;text-align:center;line-height:1.25;box-shadow:0 6px 16px -10px rgba(var(--vrgb),.45)}
.qc>i{font-style:normal;font-size:20px;line-height:1}
.qc .qc-f{width:24px;height:24px;border-radius:7px;background:#1877f2;color:#fff;display:grid;place-items:center;font:700 16px Arial,sans-serif}
.qc-tag{position:absolute;top:-7px;right:6px;font:700 10px Prompt;background:#16a34a;color:#fff;border-radius:999px;padding:1px 7px}
.qc:active{transform:scale(.97)}
details.hprog>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
details.hprog>summary::-webkit-details-marker{display:none}
.hp-sum{flex:1;min-width:0}.hprog .hp-sum .t{font-size:13px}
.hp-bar{display:block;height:7px;border-radius:9px;background:var(--vtint2);margin-top:6px;overflow:hidden}
.hp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--vp2),var(--vhot));border-radius:9px}
.hp-more{font:600 12px Prompt;color:var(--vdeep);white-space:nowrap}.hp-more:after{content:" ▾"}
details.hprog[open] .hp-more:after{content:" ▴"}details.hprog[open] .hp-bar{display:none}
details.hprog[open] .hl1{margin-top:8px}

/* ป๊อปอัปรีวิวเว็บ (9 พ.ย. แบบ A + คำสำเร็จรูป) · กลางจอทุกขนาด */
.modal.srv{align-items:center;padding:0 14px}
.srv-card{border-radius:26px;padding:20px 18px 12px;max-width:400px;overflow:visible}
.srv-masc{display:block;width:96px;height:96px;object-fit:contain;margin:-66px auto 0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.srv-card h3{margin:4px 0 2px;font:700 20px Prompt;color:var(--vttl,#10243d)}
.srv-sub{margin:0 0 8px;font-size:13.5px;color:var(--vtx2,#567)}
.srv-stars{display:flex;justify-content:center;gap:4px}
.srv-s{border:0;background:none;font-size:38px;line-height:1;color:#d7dee8;cursor:pointer;padding:2px 4px;min-width:44px;min-height:44px}
.srv-s.on{color:#f5b301}
.srv-lbl{font:600 13px Prompt;color:#b07a00;margin:0 0 8px;min-height:18px}
.srv-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px}
.srv-t{border:1.5px solid #cfe0ef;background:#fff;border-radius:99px;padding:6px 12px;font:500 13px Prompt;color:#456;cursor:pointer;min-height:34px}
.srv-t.on{background:#e6f3ff;border-color:#4aa3e8;color:#1f6fc0;font-weight:600}
.srv-tx{width:100%;box-sizing:border-box;resize:none;margin-bottom:10px}
.srv-later{display:block;width:100%;border:0;background:none;color:var(--vtx2,#678);font:14px Prompt;padding:10px;cursor:pointer}

/* พื้นหลังการ์ดหน้าร้าน (VIP ระดับ 3 · 9 พ.ย.): ฝ้าขาว = รูปเต็ม + ขาว 60% · เบลอ = blur 28px + ขาว 35%
   .cbg-layer อยู่หลังเนื้อหา (z-index:-1 ใน isolation) · ปก/รูปโปรไฟล์/ปุ่ม อยู่บนเดิม · มือถือ = กลายเป็นการ์ดมีขอบ */
.pd-side.has-cbg{position:relative;isolation:isolate;overflow:hidden;display:block;border-radius:28px;padding:12px 16px 18px;margin-bottom:14px;background:var(--card);box-shadow:var(--sh)}
.cbg-layer{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.cbg-layer i{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(var(--cz,1));transform-origin:var(--cx,50%) var(--cy,50%)}
.cbg-layer::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6)}
.cbg-blur .cbg-layer i{filter:blur(28px) saturate(1.1);transform:scale(calc(var(--cz,1) * 1.15))}
.cbg-blur .cbg-layer::after{background:rgba(255,255,255,.35)}
html.t-d .cbg-layer::after{background:rgba(130,48,45,.55)}
html.t-d .cbg-blur .cbg-layer::after{background:rgba(130,48,45,.35)}
/* ของขาวในการ์ดไม่จมไปกับรูป: ปุ่มรอง · กล่องสถิติ ทึบ */
.pd-side.has-cbg .stats{background:rgba(255,255,255,.94)}
.pd-side.has-cbg .btn.act-sec,.pd-side.has-cbg .btn.starbtn,.pd-side.has-cbg .btn.icon{background-color:#fff}
html.t-d .pd-side.has-cbg .stats{background:rgba(110,38,36,.9)}
/* หลังร้าน: กล่องเลือกแบบ */
.cbg-box h2 .n{font-size:12px;font-weight:600;background:#fff4d6;color:#9a5b00;border-radius:99px;padding:2px 9px;margin-left:4px}
.cbg-styles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.cbg-opt{position:relative;display:flex;flex-direction:column;gap:4px;border:2px solid #e3ebf3;border-radius:16px;padding:8px;cursor:pointer;text-align:center}
.cbg-opt:has(input:checked){border-color:var(--vp2,#4aa3e8);background:var(--vtint1,#f2f8fe)}
.cbg-opt input{position:absolute;opacity:0;pointer-events:none}
.cbg-sw{position:relative;display:block;height:64px;border-radius:12px;overflow:hidden;background:#dfe9f3}
.cbg-sw::before{content:"";position:absolute;inset:0;background:var(--cbg,linear-gradient(135deg,#9ad0f5,#f6b8d6)) center/cover no-repeat}
.cbg-sw.cbg-blur::before{filter:blur(8px);transform:scale(1.2)}
.cbg-sw::after{content:"Aa ร้านของคุณ";position:absolute;inset:0;display:grid;place-items:center;font:700 13px Prompt;color:#1e3a5f;background:rgba(255,255,255,.6)}
.cbg-sw.cbg-blur::after{background:rgba(255,255,255,.35)}
.cbg-opt b{font:700 14px Prompt}
.cbg-opt small{font-size:11.5px;color:var(--vtx2,#678)}

/* ปรับพื้นหลังการ์ดในหน้าร้าน (เจ้าของ · 9 พ.ย.) */
.cbg-adj{position:absolute;z-index:6;right:24px;top:24px;border:0;border-radius:99px;padding:8px 14px;font:600 12.5px Prompt;color:#1e3a5f;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;min-height:36px}
.pd-side.cbg-edit .cbg-adj{display:none}
.pd-side.cbg-edit{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pd-side.cbg-edit.drag{cursor:grabbing}
.pd-side.cbg-edit > :not(.cbg-layer):not(.cbg-bar){pointer-events:none;opacity:.6;transition:opacity .2s}
.pd-side.cbg-edit .cbg-layer::after{background:rgba(255,255,255,.18)}
.pd-side.cbg-edit.cbg-blur .cbg-layer i{filter:none;transform:scale(var(--cz,1))}
.cbg-bar{position:absolute;z-index:7;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cbg-bar[hidden]{display:none}
.cbg-hint{font:600 12.5px Prompt;color:#1e3a5f}
.cbg-bar input[type=range]{flex:1;min-width:120px;accent-color:var(--vp2,#4aa3e8)}
.cbg-btns{display:flex;gap:6px;margin-left:auto}
.cbg-files{display:flex;gap:6px;width:100%}
.cbg-files form{margin:0}
.cbg-files label{cursor:pointer}
.cbg-del{color:#dc2626!important}

.otp-in{font:700 26px/1.2 Prompt,monospace;letter-spacing:10px;text-align:center}.em-ok{color:#15803d;font-weight:600;white-space:nowrap}
.em-del summary::-webkit-details-marker{display:none}
/* ลายปกฟีนิกซ์ (10 พ.ย.): เส้นกรอบอยู่ลึกจากขอบภาพ (บน 10.6% ล่าง 96% ซ้าย/ขวา 1.3%) → ยืดภาพให้เส้นกรอบทับขอบปกพอดี
   คิดเป็น % ของปก จึงตรงทุกขนาดจอ (หน้าร้าน + ช่องตัวอย่างในร้านตกแต่ง) */
.cover-art[style*="/covers/phoenix."],.dk-th .coverx.dk-cv .cover-art[style*="/covers/phoenix."],.coverx.mini .cover-art[style*="/covers/phoenix."]{
  top:-11.5%;bottom:-4.2%;left:-1.2%;right:-1.2%}

/* ฟีนิกซ์ (10 พ.ย.): ละอองฝุ่นไฟ + ขนปีกร่วงจากปีก · ประกายดาวผุดรอบกรอบ · แสงเรืองหลังกรอบ — ทุกอันจังหวะ 2.2 วิเท่าปีก */
.winged-fire .fw{filter:drop-shadow(0 0 10px rgba(249,115,22,.9))}
.winged-fire .fw-spk{display:none}
.fx-fea{position:absolute;inset:0;z-index:3;pointer-events:none}
.fx-fea i{position:absolute;width:var(--h);height:var(--h);border-radius:50%;opacity:0;background:#ffe9b0;
 box-shadow:0 0 3px 1px rgba(255,170,60,.9),0 0 7px 2px rgba(249,115,22,.45);animation:dust var(--t) linear infinite;animation-delay:var(--d)}
@keyframes dust{0%{transform:translate(0,0);opacity:0}4%{opacity:.95}22%{opacity:.4}34%{opacity:1}
 50%{transform:translate(var(--sx),40px);opacity:.5}66%{opacity:.9}82%{opacity:.35}100%{transform:translate(calc(var(--sx)*-.5),88px);opacity:0}}
.fx-fe2{position:absolute;inset:0;z-index:3;pointer-events:none}
.fx-fe2 i{position:absolute;width:calc(var(--h)*.36);height:var(--h);opacity:0;animation:fe2 4.4s linear infinite;animation-delay:var(--d)}
.fx-fe2 i::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:linear-gradient(180deg,#fff3b0 0,#ffb347 35%,#f97316 70%,#b91c1c 100%);box-shadow:0 0 5px rgba(249,115,22,.8)}
.fx-fe2 i::after{content:"";position:absolute;left:48%;top:8%;width:1px;height:92%;background:#7c2d12aa}
@keyframes fe2{0%{transform:translate(0,0) rotate(var(--r0));opacity:0}4%{opacity:1}30%{transform:translate(var(--sx),30px) rotate(calc(var(--r0) + 35deg))}
 60%{transform:translate(calc(var(--sx)*-1),70px) rotate(calc(var(--r0) - 20deg));opacity:.95}100%{transform:translate(0,120px) rotate(var(--r1));opacity:0}}
.fx-spk2{position:absolute;inset:0;z-index:4;pointer-events:none}
.fx-spk2 i{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);opacity:0;animation:spk2 2.2s ease-out infinite;animation-delay:var(--d)}
.fx-spk2 i::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0,#fff6d6 25%,rgba(255,200,90,0) 70%);
 clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 4px #ffd27a) drop-shadow(0 0 8px rgba(249,115,22,.8))}
@keyframes spk2{0%{transform:translate(0,0) scale(0) rotate(0);opacity:0}15%{opacity:1;transform:translate(calc(var(--ox)*.3),calc(var(--oy)*.3)) scale(1.1) rotate(20deg)}
 45%{opacity:.9;transform:translate(calc(var(--ox)*.7),calc(var(--oy)*.7)) scale(.8) rotate(45deg)}70%,100%{opacity:0;transform:translate(var(--ox),var(--oy)) scale(0) rotate(70deg)}}
.fx-halo{position:absolute;left:4%;top:6.5%;width:91%;height:91%;border-radius:50%;z-index:-2;pointer-events:none;background:radial-gradient(circle,rgba(255,214,120,.0) 52%,rgba(255,190,90,.55) 64%,rgba(249,115,22,0) 74%);animation:halo 2.2s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.35;transform:scale(.97)}38%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.fx-fea,.fx-fe2,.fx-spk2,.fx-halo{display:none}}

/* ป๊อปอัปยินดีด้วยได้ฉายาชุด (10 พ.ย.) */
.ttlpop-chip{display:flex;justify-content:center;margin:18px 0 16px;transform:scale(1.25)}
.gp-p.ttlpop-sub{font-size:12px;margin-top:-4px}

/* รีวิวเว็บบนหน้าแรก (แบบ B · 10 พ.ย. · เห็นเฉพาะแอดมิน) */
.srvb{position:relative;background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--sh);margin:12px 0}
.srvb-adm{position:absolute;top:-9px;right:14px;font:600 10.5px Prompt;background:var(--chip);color:var(--pri);border-radius:99px;padding:2px 9px}
.srvb-top{display:flex;align-items:center;gap:14px}
.srvb-sc{text-align:center;flex:none}.srvb-sc b{display:block;font:800 38px/1 Prompt;color:var(--ink)}
.srvb-st{display:block;color:#f5a524;letter-spacing:2px;font-size:14px}.srvb-sc small{font:500 11px Prompt;color:var(--soft)}
.srvb-r{min-width:0}.srvb-r h2{font:700 15px Prompt;margin:0}
.srvb-avs{display:flex;padding-left:10px;margin-top:8px}
.srvb-av{width:32px;height:32px;margin-left:-10px;border-radius:50%;border:2px solid var(--card);background:linear-gradient(135deg,var(--pri2),var(--pri)) center/cover;display:grid;place-items:center;color:#fff;font:700 13px Prompt;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.srvb-bar{display:flex;align-items:center;gap:8px;font:500 12px Prompt;margin-top:8px}
.srvb-bar span{width:84px;flex:none}.srvb-bar i{flex:1;height:8px;border-radius:9px;background:var(--chip);overflow:hidden}
.srvb-bar b{display:block;height:100%;background:linear-gradient(90deg,var(--pri2),var(--pri));border-radius:9px}
.srvb-bar em{font-style:normal;width:22px;text-align:right;color:var(--soft)}
.srvb-q{margin:10px 0 0;font-size:12.5px;color:var(--ink)}.srvb-q small{color:var(--soft)}

/* หมวดหมู่สินค้า (แบบ C การ์ดปกหมวด · 10 พ.ย.) — หน้าร้าน ?tab=listings&cat= + แดชบอร์ด #cats */
.lc-cov{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.lc-cov a{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1/1.08;box-shadow:var(--sh);background:var(--card);display:block;color:#fff}
.lc-cov a.wide{grid-column:1/-1;aspect-ratio:2.1/1}
.lc-cov .m{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.lc-cov .m.one{grid-template-columns:1fr;grid-template-rows:1fr}
.lc-cov .m > *{width:100%;height:100%;object-fit:cover;min-height:0}
.lc-cov .m.three > :first-child{grid-row:1/3}
.lc-cov .sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.72))}
.lc-cov .tx{position:absolute;left:12px;right:12px;bottom:10px;color:#fff}
.lc-cov .tx b{display:block;font:700 16px Prompt;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,0.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-cov .tx span{font:500 11.5px Prompt;opacity:0.92}
.lc-cov .go{position:absolute;right:10px;top:10px;background:rgba(255,255,255,0.92);color:var(--pri);font:700 11px Prompt;padding:4px 9px;border-radius:99px}
.lc-ph{width:100%;height:100%;background:var(--cover)}
.lc-allbtn{margin-top:12px}
.lc-crumb{margin-top:12px;font:500 12.5px Prompt;color:var(--soft)}
.lc-crumb a{color:inherit}
.lc-back{display:flex;align-items:center;gap:10px;margin-top:8px;background:var(--card);border-radius:16px;padding:10px 12px;box-shadow:var(--sh);color:var(--ink)}
.lc-back .bk{width:36px;height:36px;border-radius:12px;background:var(--chip);color:var(--pri);display:grid;place-items:center;font:700 20px Prompt;flex:none}
.lc-back b{font:700 16px Prompt;display:block;line-height:1.2}
.lc-back span{font:500 12px Prompt;color:var(--soft)}
.lc-chips{display:flex;gap:8px;overflow-x:auto;margin:10px -16px 0;padding:2px 16px 8px;scrollbar-width:none}
.lc-chips::-webkit-scrollbar{display:none}
.lc-chips a{flex:none;padding:8px 12px;border-radius:99px;background:var(--card);box-shadow:var(--sh);font:600 13px Prompt;color:var(--soft);white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
.lc-chips a small{font:500 11px Prompt;opacity:0.7;margin-left:4px}
.lc-chips a.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri);box-shadow:var(--prish)}
.lc-chips + .items{margin-top:4px}
html.t-d .lc-chips a.on{background:linear-gradient(135deg,#fff7ec,#ffd9b3);color:#8a2e2b}
html.t-d .lc-crumb{color:#fff}
/* แดชบอร์ด */











     /* ปุ่มอยู่แถวเดียวกับชื่อ · ฟอร์มแก้ชื่อ/ยืนยันลบ ขึ้นบรรทัดใหม่เต็มกว้าง */




   /* เฉพาะตอนเปิด (ปิดอยู่ต้องซ่อนตามปกติ) */




.lc-conf{background:var(--badbg);border-radius:14px;padding:10px 12px;font:500 12.5px Prompt;color:var(--bad);line-height:1.5}
.lc-conf .r{display:flex;gap:6px;margin-top:8px}











select.in{appearance:auto}
/* โหมดเจ้าของบนหน้าร้าน: ลงสินค้า/เพิ่มหมวด/แก้หมวด (templates/_listing_sheet.html · 10 พ.ย.) */
.lo-bar{display:flex;gap:8px;margin-top:12px}
.lo-bar .btn{flex:1;min-height:44px}
.lo-note{font:500 11.5px Prompt;color:var(--soft);margin:6px 2px 0}
html.t-d .lo-note{color:#fff}
.lc-cov .lc-ow{position:relative;min-width:0}
.lc-cov .lc-ow.wide{grid-column:1/-1}
.lc-cov .lc-ow > a:first-child{height:100%}
.lc-cov a.lc-ed{position:absolute;left:8px;top:8px;z-index:2;aspect-ratio:auto;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 11px;border-radius:99px;overflow:visible;background:var(--card);color:var(--ink);font:600 12px Prompt;box-shadow:0 2px 8px rgba(0,0,0,0.18)}
.lc-ed svg.i,.lo-mv svg.i{width:13px;height:13px}
.lo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:240px;border:2px dashed var(--line2);background:transparent;box-shadow:none;color:var(--pri);font:600 14px Prompt;text-align:center;cursor:pointer;padding:12px}
.lo-tile b{font:400 36px/1 Prompt}
.lo-tile small{font:500 12px Prompt;color:var(--soft)}
button.lo-tile{width:100%}
html.t-d .lo-tile{color:#fff;border-color:rgba(255,255,255,0.55)}
html.t-d .lo-tile small{color:#fff;opacity:0.85}
.lo-mv{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border-radius:99px;background:var(--card);color:var(--ink);font:600 11.5px Prompt;box-shadow:0 2px 8px rgba(0,0,0,0.18)}
.lo-sheet .lbl{margin-top:12px}
.lo-top{display:flex;gap:12px;margin-top:12px}
.lo-pick{position:relative;flex:none;width:96px;height:96px;border-radius:16px;border:2px dashed var(--line2);background:var(--bg);display:grid;place-items:center;cursor:pointer;overflow:hidden}
.lo-pick em{position:absolute;inset:0;background:center/cover no-repeat}
.lo-pick span{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 12px Prompt;color:var(--soft)}
.lo-pick span svg.i{width:22px;height:22px}
.lo-pick.on{border-style:solid;border-color:var(--pri2)}
.lo-pick.on span{display:none}
.lo-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.lo-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.lo-sheet .ta{min-height:72px}
.lo-btns{display:flex;gap:8px;margin-top:16px}
.lo-btns .btn{flex:1;min-height:48px}
.lo-btns .btn.b1{flex:2}
.lo-del{display:flex;align-items:center;gap:10px;margin-top:18px}
.lo-del span{flex:1}
/* ซื้อช่องหมวดเพิ่ม (แผง buy ใน _listing_sheet.html · 10 พ.ย.) — ฟรี 2 · ฿/หมวด × จำนวน · รวมสูงสุด 10 */
.lo-cnt{font:600 12px Prompt;color:var(--pri);background:var(--chip);padding:2px 8px;border-radius:99px;vertical-align:middle;margin-left:4px}
.lo-bar .lo-wait{color:var(--warn);background:var(--warnbg)}
.cb-qty{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;background:var(--bg);border-radius:16px;padding:10px 12px}
.cb-qty b{display:block;font:600 14px Prompt}
.cb-qty span{font:500 11.5px Prompt;color:var(--soft)}
.cb-step{display:flex;align-items:center;gap:6px;flex:none}
.cb-step button{width:44px;height:44px;border-radius:14px;border:none;background:var(--card);color:var(--pri);font:700 22px/1 Prompt;box-shadow:var(--sh);cursor:pointer}
.cb-step button:disabled{opacity:0.35;cursor:not-allowed}
.cb-step input{width:52px;height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);text-align:center;font:700 18px Mitr,Prompt;-moz-appearance:textfield}
.cb-step input::-webkit-outer-spin-button,.cb-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cb-sum{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:0 4px}
.cb-sum span{font:500 12.5px Prompt;color:var(--soft)}
.cb-sum span b{color:var(--ink)}
.cb-tot{font:700 24px Mitr,Prompt;color:var(--pri)}
.cb-slip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:6px;border:2px dashed var(--line2);border-radius:16px;padding:10px;cursor:pointer;font:600 13.5px Prompt;color:var(--pri)}
.cb-slip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cb-slip img{display:block;max-width:100%;max-height:220px;border-radius:12px}
.cb-slip.on{border-style:solid;border-color:var(--pri2)}
.cb-wait{text-align:center;background:var(--warnbg);border-radius:18px;padding:16px 14px;margin-top:12px}
.cb-wait .m-ic{margin-bottom:8px}
.cb-wait b{display:block;font:700 16px Prompt;color:var(--warn)}
.cb-wait span{display:block;font:500 12.5px Prompt;color:var(--soft);margin-top:4px;line-height:1.5}

/* กดแท็บ/หมวดสินค้าแล้วอยู่ที่เดิม (10 พ.ย.) — ลิงก์ต่อท้าย #tabs · เว้นหัวเว็บ */
#tabs{scroll-margin-top:72px}
/* ช่องทางติดต่อร้าน (แบบ C · templates/_links.html · shoplinks.py) — แถบไอคอนท้ายกล่องดาว/อันดับ */
.sl-ic{display:inline-grid;place-items:center;border-radius:50%;flex:none;background:var(--pri);transition:transform .15s}
.sl-ic svg{width:62%;height:62%;display:block}
.sl-facebook{background:#1877F2}.sl-line{background:#06C755}.sl-whatsapp{background:#25D366}
.sl-instagram{background:linear-gradient(45deg,#f9a825 0%,#e1306c 50%,#833ab4 100%)}
.sl-tiktok,.sl-x{background:#111}.sl-youtube{background:#ff0000}.sl-telegram{background:#229ed9}.sl-website{background:var(--pri)}
.stats.slc-on{flex-wrap:wrap;padding-bottom:8px}
.stats.slc-on > .st:nth-last-child(2){border:none}
.slc{flex-basis:100%;min-width:0;margin:10px 10px 0;border-top:1px dashed var(--line);padding-top:8px}
.slc-hd{text-align:center;font:600 11px Prompt;color:var(--soft);letter-spacing:.3px;margin-bottom:6px}
.slc-row{display:flex;justify-content:space-evenly;gap:2px}
.slc-i{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 1 auto;min-width:44px;max-width:74px;text-decoration:none;color:var(--soft);font:500 10.5px Prompt}
.slc-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slc-i:active .sl-ic{transform:scale(.92)}
.slc-i:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:10px}
.sl-dash .sl-r{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.sl-dash .sl-r > .sl-ic{margin-top:1px}
.sl-f{flex:1;min-width:0}
.sl-top{display:flex;gap:6px;margin-bottom:6px}
.sl-top select{flex:1;min-width:0;font:500 13px Prompt;padding:6px 8px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:36px}
.sl-top .btn.sm{min-height:36px;font-size:12px}
.sl-f .in{padding:10px 12px;font-size:14px}
.sl-pv{font-size:11.5px;color:var(--soft);margin-top:4px;word-break:break-all}
.sl-pv.bad{color:var(--bad)}
.sl-pv a{color:var(--pri)}
.sl-add{display:block;width:100%;margin-top:10px;padding:10px;border:1.5px dashed var(--line);border-radius:14px;background:none;color:var(--pri);font:600 13px Prompt;cursor:pointer;min-height:44px}
.sl-add[hidden]{display:none}
.sl-tip{font-size:12px;background:var(--chip);border-radius:12px;padding:8px 10px;margin:8px 0}

/* ติ๊กทองยืนยันร้าน (10 พ.ย. แบบ C) */
.vtk{display:inline-block;vertical-align:-0.12em;margin-left:6px;flex:none;filter:drop-shadow(0 0 4px rgba(255,200,60,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.hm-nm .vtk{margin-left:3px;vertical-align:-2px}
/* แดชบอร์ด: การ์ด "สินค้าและหมวดหมู่" — ตัวเลขสินค้า/หมวดที่ใช้ (10 พ.ย.) */
.dc-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.dc-stat > div{background:var(--bg);border-radius:14px;padding:10px 12px}
.dc-stat span{display:block;font:500 11.5px Prompt;color:var(--soft)}
.dc-stat b{font:700 20px Mitr,Prompt;color:var(--ink)}
.dc-stat small{display:block;font:500 11px Prompt;color:var(--soft);margin-top:2px;line-height:1.4}

/* ---------- ผลค้นหาร้าน (11 พ.ย. · shopsearch.py) ---------- */
.srch .pcard{align-items:flex-start}
.srch .pcard .starpill{margin-top:4px}
.sr-why{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.sr-why .sw{font:500 11.5px/1.35 Prompt;font-style:normal;padding:3px 8px;border-radius:8px;background:var(--bg2);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-why .sw-sell,.sr-why .sw-cat{background:var(--okbg);color:var(--ok)}
.sr-why .sw-more{background:none;color:var(--soft);padding-left:2px}
.sr-why .sw-bl{background:var(--badbg);color:var(--bad);font-weight:600}
.srch .sr-bl b{color:var(--bad)}
.sr-sug{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sr-sl{font:600 12px Prompt;color:var(--soft);margin-right:2px;width:100%}
.sr-chip{font:500 13px Prompt;padding:8px 13px;border-radius:99px;background:var(--bg2);color:var(--ink);min-height:36px;display:inline-flex;align-items:center}
.sr-chip:hover{background:var(--pri2);color:#fff}
.sr-empty{padding:22px 8px 8px;line-height:1.6}

/* ---------- ช่องค้นหา: ร้านแนะนำ + แท็กร้าน (11 พ.ย. · เฉพาะคนทดสอบค้นหาแบบใหม่) ---------- */
#search{scroll-margin-top:12px}
.srec{position:relative;z-index:2;margin-top:10px;padding:12px 12px 10px;border-radius:16px;background:var(--card);box-shadow:var(--sh)}
.srec[hidden]{display:none}
.hero .srec{grid-column:1}
.srec-hd{display:flex;align-items:center;gap:6px;font:600 13px Prompt;color:var(--ink);margin:0 2px 8px}
.srec-hd .ict{width:22px;height:22px}
.srec-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 2px 8px;margin:0 -2px 4px;scrollbar-width:none}
.srec-row::-webkit-scrollbar{display:none}
.srec-shop{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:8px;min-height:52px;max-width:200px;padding:7px 12px 7px 7px;border-radius:14px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.srec-shop:hover{border-color:var(--pri2)}
.srec-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--bg2) center/cover;display:grid;place-items:center;font:600 15px Prompt;color:var(--pri)}
.srec-tx{min-width:0;display:flex;flex-direction:column}
.srec-tx b{font:600 13px/1.3 Prompt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px}
.srec-tx b .vtk{flex:none}
.srec-tx small{font:500 11.5px/1.35 Prompt;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srec-tags{display:flex;flex-wrap:wrap;gap:6px}
.srec-tags .sr-chip{min-height:34px;padding:6px 12px;font-size:12.5px}
.srec-tags .sr-mid{background:#e8f8ee;color:#15803d;font-weight:600}
.srec-tags .sr-mid:hover{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.sr-why .sw-tag{background:var(--bg2);color:var(--pri);font-weight:600}
/* แท็กร้านบนหน้าร้าน (ใต้คำแนะนำร้าน) */
.ptags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 20px 0}
.ptag{font:500 12px/1.3 Prompt;padding:5px 11px;border-radius:99px;background:var(--bg2);color:var(--ink)}
.ptag:hover{background:var(--pri2);color:#fff}
/* แก้แท็กในหลังบ้าน */
.tg-ins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg-ins .in{min-height:44px}
.tg-help{font:400 12px/1.5 Prompt;color:var(--soft);margin:6px 0 8px}
.tg-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.tg-idea{font:500 12.5px Prompt;min-height:36px;padding:6px 12px;border-radius:99px;border:1px dashed var(--line2);background:var(--card);color:var(--ink);cursor:pointer}
.tg-idea:hover{border-color:var(--pri);color:var(--pri)}
.tg-idea[aria-disabled=true]{opacity:.45;cursor:default}
@media (min-width:1024px){#search{scroll-margin-top:84px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero .search .in:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--vrgb),.35),var(--sh)}

/* ร้านล็อกค้างชำระ (paylock · บัญชีติดเหลือง · 12 พ.ย.) — _paylock.html */
.pl-chip{display:inline-flex;align-items:center;font:700 12px Prompt;background:#fff3c4;color:#8a5a00;padding:4px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px #f3d36b;white-space:nowrap}
.plbar{background:#fff6d1;color:#6b4700;border:1.5px solid #f3cf4f;border-radius:18px;padding:12px 14px;margin-top:8px;display:flex;gap:10px;align-items:flex-start;text-align:left;box-shadow:0 10px 24px -16px #d9a400}
.plbar .ic{color:#b37a00;line-height:1}
.plbar .ic .ict{width:34px;height:34px;border-radius:11px}
.plbar b{font:800 15px Prompt;display:block;color:#5c3d00}
.plbar span{font-size:12.5px;line-height:1.5;display:block}
.plbar .pl-tx{flex:1;min-width:0}
.pl-due{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 12px;background:#fff;border-radius:12px}
.pl-due small{font-size:12px;color:#8a5a00}.pl-due em{font:700 20px Mitr;font-style:normal;color:#b45309}
.pl-ev{display:flex;gap:10px;align-items:center;margin-top:8px;padding:8px;background:rgba(255,255,255,.7);border-radius:12px}
.pl-ev .pl-slip{flex:0 0 56px}
.pl-ev .pl-slip img{display:block;width:56px;height:76px;object-fit:cover;border-radius:8px;border:1px solid #f0d27a;background:#fff}
.pl-ev small{display:block;font-size:11px;color:#8a5a00}
.pl-ev b{font:600 13px Prompt}
.pl-ev a{font:600 12px Prompt;color:#b45309}
.plbar .pl-pay{margin-top:10px;background:#f5b400;color:#3d2800;font-weight:700}
.pl-wait{margin-top:10px;font:600 13px Prompt;color:#8a5a00}
.plbar .pl-note{margin-top:8px;font-size:11.5px;opacity:.85}
.sr-why .sw-pl{background:#fff3c4;color:#8a5a00;font-weight:600}
.plsheet .pl-mic{background:linear-gradient(135deg,#fff3c4,#fff8e6);color:#b37a00}
.plsheet .pl-mic .ict{background:none;box-shadow:none;width:auto;height:auto}
.pl-adm{margin-top:8px;padding:10px 12px;border-radius:14px;background:#fff6d1;color:#6b4700;font:600 12.5px Prompt;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.pl-adm-bad{margin-top:6px;font:600 12px Prompt;color:#8a5a00}
.pl-adm-f{margin-top:8px}
.pl-adm-f>summary{list-style:none;cursor:pointer;background:#fff3c4;color:#8a5a00;box-shadow:inset 0 0 0 1px #f3d36b}
.pl-adm-f>summary::-webkit-details-marker{display:none}
.pl-adm-f[open]>summary{margin-bottom:6px}
.pl-adm-go{background:#f5b400;color:#3d2800;font-weight:700}

/* ปุ่มยืนยันแตะครั้งที่ 2 (data-confirm · 12 พ.ย.) */
.btn.arm2{background:var(--bad);color:#fff;box-shadow:0 0 0 3px var(--badbg)}

/* ===== ฉายาสะสมดาว แบบ C กลุ่มดาวกลางคืน (12 พ.ย. ผู้ใช้เลือก) — ทับ ttl-sk1/2/3 เดิมด้านบน ===== */
.ttl-row .ttl.ttl-sk,.ttl.ttl-sk{gap:6px;color:#fff;font:600 12px Mitr,Prompt,sans-serif;padding:2px 11px 2px 8px;border:0;overflow:hidden;text-shadow:0 1px 2px #0005;margin:0}
.ttl-row .ttl.ttl-sk .ttl-ic,.ttl.ttl-sk .ttl-ic{width:auto;height:auto;border-radius:0;background:none!important;box-shadow:none!important;display:inline-flex}
.ttl.ttl-sk .ttl-cn{width:27px;height:15px;display:block}
.ttl.ttl-sk .ttl-n{font:800 10.5px Prompt,sans-serif;opacity:.85;margin-left:1px}
.ttl-row .ttl.ttl-sk.ttl-lg,.ttl.ttl-sk.ttl-lg{gap:8px;font-size:15px;padding:5px 16px 5px 11px}
.ttl.ttl-sk.ttl-lg .ttl-cn{width:38px;height:21px}
.ttl.ttl-sk.ttl-lg .ttl-n{font-size:12.5px}
.ttl-row .ttl.ttl-sk1,.ttl.ttl-sk1{background:linear-gradient(135deg,#1e3a8a,#3b82f6);box-shadow:0 2px 8px #3b82f655}
.ttl-row .ttl.ttl-sk2,.ttl.ttl-sk2{background:linear-gradient(135deg,#0f766e,#22c55e 45%,#a3e635);box-shadow:0 0 12px #22c55e77}
.ttl-row .ttl.ttl-sk3,.ttl.ttl-sk3{letter-spacing:0;margin:2px;
  background:radial-gradient(circle at 20% 30%,#ffffff22 0 2px,transparent 3px),radial-gradient(circle at 70% 70%,#ffffff33 0 1.5px,transparent 2.5px),linear-gradient(135deg,#0b1026,#3b0764 45%,#1d4ed8);
  box-shadow:0 0 0 1.5px #fde68a,0 0 16px #8b5cf6aa}
.ttl.ttl-sk3::after{background:linear-gradient(110deg,transparent 35%,#ffffff40 48%,transparent 60%)}
.ttl.ttl-sk .ttl-sv{display:none}