/* เครดิตดี — ตามม็อกอัพที่ผู้ใช้อนุมัติ (credit-mock/mock.html)
   สองชั้น:
   1) สีเว็บของ "คนดู" — <html data-theme="blue|pink"> (ค่าเริ่ม ฟ้าทะเล · design/mock-blue แบบ C) ตัวแปร --v*
      ใช้กับโครงเว็บทุกหน้า (โลโก้ เมนู ☰ กระดิ่ง popup แถบกดใจ ฯลฯ) — ธีมร้านไม่ทับ
   2) ธีมของ "ร้าน" — .t-a / .t-b / .t-c (html class) ตัวแปร --pri --bg ... ใช้กับเนื้อหา
      .t-a (ค่าเริ่ม) = ตามสีของคนดู · .t-b ลาเวนเดอร์ / .t-c มินิมอล = ร้านเลือกเอง ชนะบนหน้าร้านนั้น
   มือถือก่อน (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;
}

*{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}
.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}
.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)}

/* ---------- ปุ่ม ---------- */
.acts{display:flex;gap:10px;margin-top:12px}
.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}
.stack{display:flex;margin-left:auto}
.stack i{width:28px;height:28px;border-radius:50%;border:2px solid var(--card);margin-left:-8px;background:linear-gradient(135deg,#fde68a,var(--vp2))}
.stack i:nth-child(2){background:linear-gradient(135deg,#a5f3fc,#c4b5fd)}
.stack i:nth-child(3){background:linear-gradient(135deg,#bbf7d0,#93c5fd)}
.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}
.plus{margin-left:auto;font:700 12px Prompt;color:var(--ok);background:var(--okbg);padding:5px 10px;border-radius:99px;white-space:nowrap;flex:none}
.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 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}
.qty{display:inline-flex;align-items:center;background:var(--chip);border-radius:12px;overflow:hidden;margin-top:6px}
.qty button{width:32px;height:32px;border:none;background:none;font:700 16px Prompt;color:var(--pri);cursor:pointer}
.t-c .qty button{color:var(--ink)}
.qty span{min-width:26px;text-align:center;font:600 14px Prompt}
.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 .oh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ord .oh b{font:700 15px Prompt}
.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}
.oq{display:flex;gap:12px;align-items:flex-start}
.oq .tx{flex:1;min-width:0}
.oq form.rej{display:flex;gap:6px;margin-top:8px}
.oq form.rej .in{padding:8px 10px;font-size:13px;border-radius:12px}

/* ---------- หน้าแรก ---------- */
.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}
.trust3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.trust3 div{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:10px 8px;text-align:center;font-size:11.5px;color:var(--soft);line-height:1.4}
.trust3 b{display:block;font:700 13.5px Prompt;color:var(--ink);margin-bottom:2px}
.trust3 svg.i{width:22px;height:22px;color:var(--pri);margin:0 auto 4px}
.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)}
.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)}
.menu{display:none}

/* ======================================================================
   ลงจริงจากม็อกอัพที่อนุมัติ (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}
.gave{margin-left:auto;font:700 12px Prompt;color:var(--goldink);background:var(--goldbg);padding:5px 10px;border-radius:99px;white-space:nowrap;flex:none}
.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(3,1fr);gap:10px;margin-top:8px}
.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)}
.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 .meter{flex:1;height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.quota .meter b{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.quota .t{font:700 13px Prompt;white-space:nowrap}
.quota .cc{font:500 11px Prompt;color:var(--soft);white-space:nowrap}
.hlrow{border-top:1px solid var(--line);padding:14px 0}
.hlrow .hd{display:flex;align-items:flex-start;gap:10px}
.hlrow .cv{width:56px;height:56px;border-radius:50%;padding:2px;background:conic-gradient(var(--pri),var(--pri2),#ffc59e,var(--pri));flex:none;position:relative;cursor:pointer;display:block}
.hlrow .cv em{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #fff;background:var(--bg2) center/cover}
.hlrow .cv small{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:var(--sh);display:grid;place-items:center;font-size:11px}
.hlrow .cv input{position:absolute;width:1px;height:1px;opacity:0}
.hlrow .in{padding:9px 12px;font-size:14px}
.hlrow .cc{font:500 11px Prompt;color:var(--soft)}
.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)}
.tools{margin-left:auto;display:flex;gap:4px}
.tools button{width:32px;height:32px;border-radius:10px;border:none;background:var(--chip);color:var(--soft);font:600 14px Prompt;cursor:pointer}
.tools button.del{color:var(--bad);background:var(--badbg);width:auto;padding:0 10px}
.addhl{margin-top:4px;border:2px dashed var(--line);border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;color:var(--faint);font:600 13px Prompt}
.addhl .lk{margin-left:auto;font:600 11px Prompt;background:var(--chip);color:var(--soft);padding:3px 9px;border-radius:99px}
.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 .u-ic{width:42px;height:42px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-size:20px;box-shadow:var(--sh);flex:none}
.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.addhl{width:100%;background:none;cursor:pointer;color:var(--pri);border-color:var(--pri2);font-family:Prompt}
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}
.mul{font-family:"Noto Sans Thai",system-ui,sans-serif;font-weight:500}
.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}
.replybox{margin-top:10px;background:var(--bg);border-radius:14px;padding:10px}
.replybox .bar{display:flex;gap:8px;margin-top:8px;align-items:center}
/* แบล็กลิสต์ */
.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)}
.rv.sk-border .gave,.rv.sk-corner .gave{font-size:11px;padding:3px 8px;white-space:nowrap}
.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}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.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}
.dtag{position:absolute;top:6px;left:6px;font:600 10.5px Prompt;padding:2px 8px;border-radius:99px;background:var(--vtint2);color:var(--vdeep);z-index:2}
.dtag.new{background:#e2f6ff;color:#1f7fb0}
.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-bwrap{text-align:center;margin-top:4px}
.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-btn{color:var(--vttl);padding:0;width:40px}
.mn-btn:focus-visible,.mn-x:focus-visible{outline:2px solid var(--vhot);outline-offset:2px}
.mn-burg{width:19px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
.mn-burg i{height:2.6px;border-radius:2px;background:currentColor;display:block}
.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-e{width:26px;text-align:center;font-size:18px;flex:none}
.mn-ar{margin-left:auto;color:var(--vtx3)}
.mn-sep{height:1px;background:var(--vbd);margin:6px 14px}
.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}
.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:nowrap;margin-left:2px}
.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}
/* หน้า ฉายาของฉัน */
.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-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}
.ttl-give{display:flex;gap:8px;margin-bottom:8px}
.ttl-give .in{flex:1;min-width:0}
@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:30px;height:30px;font-size:13px}
.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}
.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)}
.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}
.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{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#dcfce7,#e0f2fe);border:1.5px solid #bbf7d0;border-radius:18px;padding:12px 14px;margin:12px 0}
.ann-guest>i{font-style:normal;font-size:26px;flex:none}.ann-guest b{font:700 15px Prompt;display:block;color:#14532d}.ann-guest div>span:last-child{font-size:12.5px;color:#475569}
.ann-tag{display:inline-block;font:700 10.5px Prompt;background:#16a34a;color:#fff;border-radius:999px;padding:1px 8px;margin-bottom:2px}
.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{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#ede9fe,#e0f2fe);border:1.5px solid #c4b5fd;border-radius:18px;padding:12px 14px;margin:12px 0;color:inherit;text-decoration:none}
.sc-ic{font-size:26px;flex:none}.sc-card b{font:700 15px Prompt;display:block;color:#4c1d95}.sc-card small{display:block;font-size:12.5px;color:#475569}
.sc-card em{font-style:normal;font:700 12.5px Prompt;color:#6d28d9;display:block;margin-top:2px}

/* ช่องข้างดาวบนหน้าร้าน (แทนอายุบัญชี · 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}