/* สีเว็บแบบใหม่ (14 พ.ย. 2569 · ผู้ใช้เลือกจากภาพเทียบทุกหน้า CreditDee-design/clay-real)
   ชมพู = ดินน้ำมัน (Claymorphism) · ฟ้า = นูมอร์ฟิซึม (Neumorphism)
   ทำงานเฉพาะเมื่อ <html> มีคลาส sty-new (app.style_new_on · ช่วงทดสอบ = STYLE_NEW_TESTERS) — คนอื่นเห็นสีเดิม
   ทับตัวแปร --v* / --card / --sh ของ style.css + เสริมปุ่ม ช่องกรอก แถบล่าง · ธีมร้าน B/C/D/E ยังใช้สีของร้านเอง */

/* ===== ชมพู = ดินน้ำมัน ===== */
html.sty-new[data-theme=pink]{--vp:#c9706a; --vp2:#e8a59f; --vdeep:#a8524d; --vttl:#b65f59; --vhot:#d77b74;
  --vtint:#f6ebe1; --vtint2:#efe2d5; --vbd:#ead8c8; --vtx:#7d6a60; --vtx2:#9a887d; --vtx3:#c2b0a3;
  --vrgb:201,112,106; --vdk:74,58,53;
  --vbg:#f6efe4; --vbg2:#efe5d8; --vdot:transparent; --vline:#eadfd2; --vline2:#e2d3c3; --vchip:#f3e6da;
  --vink:#4a3a35; --vsoft:#8b7a70; --vfaint:#bba99c; --vacc:#7f9a63;
  --vcover:linear-gradient(135deg,#f3c9c2 0%,#f4dcc0 55%,#d9e4c6 100%);
  --clay-sh:10px 14px 26px rgba(150,110,90,.20),inset -6px -8px 14px rgba(190,150,130,.18),inset 6px 8px 14px rgba(255,255,255,.92);
  --clay-sh-s:6px 8px 14px rgba(150,110,90,.20),inset -4px -5px 9px rgba(190,150,130,.18),inset 4px 5px 9px rgba(255,255,255,.92);
  --clay-in:inset 5px 6px 11px rgba(160,120,100,.20),inset -5px -5px 10px rgba(255,255,255,.85);
  --clay-btn:6px 9px 16px rgba(205,115,105,.38),inset -5px -6px 10px rgba(150,60,55,.28),inset 5px 6px 10px rgba(255,255,255,.45);
  --vsh:var(--clay-sh); --vpsh:var(--clay-btn);
  --vbtn:linear-gradient(160deg,#f0a39b,#d77b74);
  --vhead:linear-gradient(135deg,#f6e3da,#f8efe4); --vdraw:#fbf6ef;
  --vheart:#e58f8a; --vheart0:#f3dcd6; --vburst:#e58f8a; --vlogo:#f6e3da;}
html.sty-new[data-theme=pink]:not(.t-b):not(.t-c):not(.t-d):not(.t-e){--card:#fbf6ef;--sh:var(--clay-sh);--prish:var(--clay-btn);--onpri:#fff}
html.sty-new[data-theme=pink] body{background:radial-gradient(700px 500px at 90% 0%,#f3dcd2 0,transparent 60%),radial-gradient(600px 500px at 0% 45%,#e3ead5 0,transparent 60%),#f6efe4!important;background-image:none}
html.sty-new[data-theme=pink] body{background-attachment:fixed!important}
html.sty-new[data-theme=pink] .card,
html.sty-new[data-theme=pink] .kpi,
html.sty-new[data-theme=pink] .rv,
html.sty-new[data-theme=pink] .it,
html.sty-new[data-theme=pink] .stats,
html.sty-new[data-theme=pink] .hm-shop,
html.sty-new[data-theme=pink] .pd-side,
html.sty-new[data-theme=pink] .bio,
html.sty-new[data-theme=pink] .pcard,
html.sty-new[data-theme=pink] .sheetcard,
html.sty-new[data-theme=pink] .modal-card,
html.sty-new[data-theme=pink] .rsum2 .sc,
html.sty-new[data-theme=pink] .spi{border-radius:28px!important}
html.sty-new[data-theme=pink] .hm-shop,
html.sty-new[data-theme=pink] .it{border-radius:24px!important}
html.sty-new[data-theme=pink] .btn{border-radius:20px!important;box-shadow:var(--clay-sh-s)}
html.sty-new[data-theme=pink] .b1,
html.sty-new[data-theme=pink] .hbar .btn,
html.sty-new[data-theme=pink] .gp-b1,
html.sty-new[data-theme=pink] .dnav a.dn-cta,
html.sty-new[data-theme=pink] .dnav .dn-cta{background:linear-gradient(160deg,#f0a39b,#d77b74)!important;color:#fff!important;box-shadow:var(--clay-btn)!important}
html.sty-new[data-theme=pink] .b1 svg.i{stroke:#fff}
html.sty-new[data-theme=pink] .btn.ghost{box-shadow:none}
html.sty-new[data-theme=pink] .btn.off,
html.sty-new[data-theme=pink] .btn.off2{box-shadow:var(--clay-in)!important}
html.sty-new[data-theme=pink] .ib{border-radius:50%!important;min-width:42px;height:42px;box-shadow:var(--clay-sh-s)!important}
html.sty-new[data-theme=pink] .ib .dot{box-shadow:0 0 0 2px #fbf6ef}
html.sty-new[data-theme=pink] .in,
html.sty-new[data-theme=pink] .ta,
html.sty-new[data-theme=pink] select.in,
html.sty-new[data-theme=pink] textarea{background:#efe5d8!important;border:0!important;box-shadow:var(--clay-in)!important;border-radius:18px!important}
html.sty-new[data-theme=pink] .in:focus,
html.sty-new[data-theme=pink] .ta:focus{box-shadow:var(--clay-in),0 0 0 2px #e8a59f!important}
html.sty-new[data-theme=pink] .card h2 .n,
html.sty-new[data-theme=pink] .chip,
html.sty-new[data-theme=pink] .sr-chip,
html.sty-new[data-theme=pink] .stchips span,
html.sty-new[data-theme=pink] .starpill{box-shadow:var(--clay-sh-s);border:0!important}
html.sty-new[data-theme=pink] .kpi .ic{border-radius:16px!important;box-shadow:var(--clay-sh-s)}
html.sty-new[data-theme=pink] .kpi:after{background:#f3e6da!important}
html.sty-new[data-theme=pink] .dnav a.on{background:#efe5d8!important;box-shadow:var(--clay-in)}
html.sty-new[data-theme=pink] .dnav-me{box-shadow:var(--clay-sh-s)!important;background:#fbf6ef!important;border:0!important}
html.sty-new[data-theme=pink] .pn{filter:drop-shadow(8px 12px 16px rgba(150,110,90,.22))!important}
html.sty-new[data-theme=pink] .pn::before{background:#fbf6ef!important;box-shadow:inset -6px -8px 14px rgba(190,150,130,.18),inset 6px 8px 14px rgba(255,255,255,.95)}
html.sty-new[data-theme=pink] .pn-i.on .pn-ic{background:#efe5d8;border-radius:14px;width:40px;height:32px;box-shadow:var(--clay-in)}
html.sty-new[data-theme=pink] .pn-i.on svg{fill:none}
html.sty-new[data-theme=pink] .pn-cb{background:linear-gradient(150deg,#f4b0a9,#d77b74)!important;box-shadow:var(--clay-btn),0 0 0 5px #fbf6ef!important}
html.sty-new[data-theme=pink] .mn-draw{background:#fbf6ef!important}
html.sty-new[data-theme=pink] .mn-list a,
html.sty-new[data-theme=pink] .mn-list label{border-radius:16px}
html.sty-new[data-theme=pink] .qc,
html.sty-new[data-theme=pink] .hm-rv,
html.sty-new[data-theme=pink] details.hprog,
html.sty-new[data-theme=pink] .hbar,
html.sty-new[data-theme=pink] .hm-bub,
html.sty-new[data-theme=pink] .pc-cta{background:#fbf6ef!important;border:0!important;box-shadow:var(--clay-sh-s)!important}
html.sty-new[data-theme=pink] .hbar{box-shadow:var(--clay-sh)!important;border-radius:26px!important}
html.sty-new[data-theme=pink] .qc{border-radius:20px!important}

/* ===== ฟ้า = นูมอร์ฟิซึม ===== */
html.sty-new[data-theme=blue]{--vp:#3b7bff; --vp2:#6a9cff; --vdeep:#2557c9; --vttl:#2f6ae6; --vhot:#3b7bff;
  --vtint:#e3e9f3; --vtint2:#dde4ef; --vbd:#d3dbe8; --vtx:#5d6a82; --vtx2:#7d889c; --vtx3:#a7b1c2;
  --vrgb:59,123,255; --vdk:31,42,68;
  --vbg:#e9eef6; --vbg2:#e1e7f0; --vdot:transparent; --vline:#d8dfea; --vline2:#cfd8e5; --vchip:#e3e9f3;
  --vink:#1f2a44; --vsoft:#6b7891; --vfaint:#9aa6bb; --vacc:#2c6585;
  --vcover:linear-gradient(135deg,#d9e4f5 0%,#c3d4f0 100%);
  --neu-up:9px 9px 18px #c5cfdf,-9px -9px 18px #ffffff;
  --neu-up-s:5px 5px 10px #c5cfdf,-5px -5px 10px #ffffff;
  --neu-in:inset 4px 4px 9px #c5cfdf,inset -4px -4px 9px #ffffff;
  --neu-btn:6px 6px 14px #b6c3da,-6px -6px 14px #ffffff,inset 2px 2px 4px rgba(255,255,255,.3);
  --vsh:var(--neu-up); --vpsh:var(--neu-btn);
  --vbtn:linear-gradient(145deg,#5b95ff,#2f6ef0);
  --vhead:#e9eef6; --vdraw:#e9eef6;
  --vheart:#ff6fa8; --vheart0:#dfe6f1; --vburst:#3b7bff; --vlogo:#e3e9f3;}
html.sty-new[data-theme=blue]:not(.t-b):not(.t-c):not(.t-d):not(.t-e){--card:#e9eef6;--sh:var(--neu-up);--prish:var(--neu-btn);--onpri:#fff}
html.sty-new[data-theme=blue] body{background:#e9eef6!important;background-image:none!important}
html.sty-new[data-theme=blue] .card,
html.sty-new[data-theme=blue] .kpi,
html.sty-new[data-theme=blue] .rv,
html.sty-new[data-theme=blue] .it,
html.sty-new[data-theme=blue] .stats,
html.sty-new[data-theme=blue] .hm-shop,
html.sty-new[data-theme=blue] .pd-side,
html.sty-new[data-theme=blue] .bio,
html.sty-new[data-theme=blue] .pcard,
html.sty-new[data-theme=blue] .sheetcard,
html.sty-new[data-theme=blue] .modal-card,
html.sty-new[data-theme=blue] .rsum2 .sc,
html.sty-new[data-theme=blue] .spi{border-radius:24px!important;border:0!important}
html.sty-new[data-theme=blue] .hm-shop,
html.sty-new[data-theme=blue] .it{border-radius:20px!important}
html.sty-new[data-theme=blue] .btn{border-radius:16px!important;box-shadow:var(--neu-up-s);background:#e9eef6}
html.sty-new[data-theme=blue] .btn:active{box-shadow:var(--neu-in)!important}
html.sty-new[data-theme=blue] .b1,
html.sty-new[data-theme=blue] .hbar .btn,
html.sty-new[data-theme=blue] .gp-b1,
html.sty-new[data-theme=blue] .dnav a.dn-cta,
html.sty-new[data-theme=blue] .dnav .dn-cta{background:linear-gradient(145deg,#5b95ff,#2f6ef0)!important;color:#fff!important;box-shadow:var(--neu-btn)!important}
html.sty-new[data-theme=blue] .b1 svg.i{stroke:#fff}
html.sty-new[data-theme=blue] .btn.ghost{box-shadow:none;background:none}
html.sty-new[data-theme=blue] .btn.off,
html.sty-new[data-theme=blue] .btn.off2{box-shadow:var(--neu-in)!important;background:#e9eef6!important}
html.sty-new[data-theme=blue] .ib{border-radius:50%!important;min-width:42px;height:42px;background:#e9eef6!important;box-shadow:var(--neu-up-s)!important}
html.sty-new[data-theme=blue] .ib .dot{box-shadow:0 0 0 2px #e9eef6}
html.sty-new[data-theme=blue] .in,
html.sty-new[data-theme=blue] .ta,
html.sty-new[data-theme=blue] select.in,
html.sty-new[data-theme=blue] textarea{background:#e9eef6!important;border:0!important;box-shadow:var(--neu-in)!important;border-radius:16px!important}
html.sty-new[data-theme=blue] .in:focus,
html.sty-new[data-theme=blue] .ta:focus{box-shadow:var(--neu-in),0 0 0 2px #9fbcff!important}
html.sty-new[data-theme=blue] .card h2 .n,
html.sty-new[data-theme=blue] .chip,
html.sty-new[data-theme=blue] .sr-chip,
html.sty-new[data-theme=blue] .stchips span,
html.sty-new[data-theme=blue] .starpill{box-shadow:var(--neu-up-s);border:0!important;background:#e9eef6!important}
html.sty-new[data-theme=blue] .kpi .ic{border-radius:50%!important;background:#e9eef6!important;box-shadow:var(--neu-up-s)}
html.sty-new[data-theme=blue] .kpi:after{display:none}
html.sty-new[data-theme=blue] .dnav a.on{background:#e9eef6!important;box-shadow:var(--neu-in)}
html.sty-new[data-theme=blue] .dnav-me{box-shadow:var(--neu-up-s)!important;background:#e9eef6!important;border:0!important}
html.sty-new[data-theme=blue] .pn{filter:none!important}
html.sty-new[data-theme=blue] .pn::before{background:#e9eef6!important;box-shadow:var(--neu-up)}
html.sty-new[data-theme=blue] .pn-i.on .pn-ic{background:#e9eef6;border-radius:14px;width:40px;height:32px;box-shadow:var(--neu-in)}
html.sty-new[data-theme=blue] .pn-i.on svg{fill:none}
html.sty-new[data-theme=blue] .pn-cb{background:linear-gradient(145deg,#5b95ff,#2f6ef0)!important;box-shadow:var(--neu-btn),0 0 0 5px #e9eef6!important}
html.sty-new[data-theme=blue] .mn-draw{background:#e9eef6!important}
html.sty-new[data-theme=blue] .mn-list a,
html.sty-new[data-theme=blue] .mn-list label{border-radius:14px}
html.sty-new[data-theme=blue] .qc,
html.sty-new[data-theme=blue] .hm-rv,
html.sty-new[data-theme=blue] details.hprog,
html.sty-new[data-theme=blue] .hbar,
html.sty-new[data-theme=blue] .hm-bub,
html.sty-new[data-theme=blue] .pc-cta{background:#e9eef6!important;border:0!important;box-shadow:var(--neu-up-s)!important}
html.sty-new[data-theme=blue] .hbar{box-shadow:var(--neu-up)!important;border-radius:22px!important}
html.sty-new[data-theme=blue] .qc{border-radius:18px!important}

/* ===== หน้าแรกแบบใหม่ (.hn · templates/_home_new_hero.html · 14 พ.ย. "จัดหน้าแรกใหม่ตามแบบ") =====
   ตัวแปรต่อสี: ชมพู = ก้อนดินน้ำมันสีพาสเทล 4 สี · ฟ้า = นูนสีเดียวกับพื้น ไอคอนสี */
html.sty-new[data-theme=pink]{--hn-up:var(--clay-sh);--hn-up-s:var(--clay-sh-s);--hn-in:var(--clay-in);--hn-inbg:#efe5d8;
  --hn-c1:#f0c3bd;--hn-c2:#c8d6b2;--hn-c3:#bcd3dd;--hn-c4:#f4d6b8;--hn-i1:#c4625b;--hn-i2:#5f7d45;--hn-i3:#3f7390;--hn-i4:#b5763a;
  --hn-ball:linear-gradient(150deg,#f4b0a9,#e07f78);
  --hn-ballsh:14px 18px 30px rgba(200,110,100,.35),inset -10px -12px 20px rgba(160,60,55,.3),inset 10px 12px 20px rgba(255,255,255,.55)}
html.sty-new[data-theme=blue]{--hn-up:var(--neu-up);--hn-up-s:var(--neu-up-s);--hn-in:var(--neu-in);--hn-inbg:#e9eef6;
  --hn-c1:#e9eef6;--hn-c2:#e9eef6;--hn-c3:#e9eef6;--hn-c4:#e9eef6;--hn-i1:#3b7bff;--hn-i2:#e0a020;--hn-i3:#5b6cff;--hn-i4:#ff5fa8;
  --hn-ball:linear-gradient(145deg,#ff8cc4,#ff4f9a);
  --hn-ballsh:12px 12px 24px #c5cfdf,-12px -12px 24px #fff,inset 4px 4px 10px rgba(255,255,255,.4)}

html.sty-new[data-theme] .hm-grid.hn-on .hn{order:1;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin:6px 0 10px}
html.sty-new[data-theme] .hm-grid.hn-on .kpi-head,html.sty-new[data-theme] .hm-grid.hn-on .kpis,html.sty-new[data-theme] .hm-grid.hn-on .about .steps4{display:none}
html.sty-new[data-theme] .hm-grid.hn-on .pcar{order:3}
html.sty-new[data-theme] .hn-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:600 11px Prompt;letter-spacing:.14em;color:var(--vp);background:var(--card);box-shadow:var(--hn-up-s)}
html.sty-new[data-theme] .hn-chip i{width:7px;height:7px;border-radius:50%;background:var(--vp)}
html.sty-new[data-theme] .hn h1{font:800 38px/1.14 Prompt;color:var(--vink);margin:16px 0 10px;letter-spacing:-.01em}
html.sty-new[data-theme] .hn h1 b{color:var(--vp)}
html.sty-new[data-theme] .hn-sub{font-size:14px;color:var(--vsoft);line-height:1.6;max-width:520px;margin:0}
html.sty-new[data-theme] .hn-search{display:flex;gap:8px;align-items:center;margin-top:18px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--hn-inbg);box-shadow:var(--hn-in)}
html.sty-new[data-theme] .hn-search .in{flex:1;min-width:0;background:none!important;box-shadow:none!important;border:0!important;padding:10px 0;font-size:14px}
html.sty-new[data-theme] .hn-search .btn{flex:none;width:auto;min-height:44px;border-radius:999px!important;padding:0 18px;gap:6px;font-size:14px}
html.sty-new[data-theme] .hn-search .btn svg.i{stroke:#fff}
html.sty-new[data-theme] .hn-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
html.sty-new[data-theme] .hn-btns .btn{width:100%;min-height:50px;border-radius:999px!important;gap:8px;font-size:14.5px;text-decoration:none}
html.sty-new[data-theme] .hn-rv{background:var(--card)!important;color:var(--vink)!important;box-shadow:var(--hn-up-s)!important}
html.sty-new[data-theme] .hn-rv svg.i{color:#e0a020}
html.sty-new[data-theme] .hn-promo{font-size:12px;color:var(--vsoft);margin:10px 0 0}
html.sty-new[data-theme] .hn-promo b{color:var(--vp)}
html.sty-new[data-theme] .hn-sc{color:var(--vp);font-weight:600;text-decoration:none}
html.sty-new[data-theme] .hn-nums{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0 0}
html.sty-new[data-theme] .hn-nums div{padding:0 10px;border-left:1px solid var(--vline2);min-width:0}
html.sty-new[data-theme] .hn-nums div:first-child{border:0;padding-left:2px}
html.sty-new[data-theme] .hn-nums dt{font:700 21px Prompt;color:var(--vink);white-space:nowrap}
html.sty-new[data-theme] .hn-nums dd{font-size:12px;color:var(--vsoft);margin:0}
html.sty-new[data-theme] .hn-heart:not(.on) .hn-ball{filter:saturate(.75)}
html.sty-new[data-theme] .hn-heart.pop .hn-ball{animation:hnpop .5s ease}
@keyframes hnpop{40%{transform:scale(1.14)}}
html.sty-new[data-theme] .hn .f1{--hn-qb:var(--hn-c1);--hn-qi:var(--hn-i1)}
html.sty-new[data-theme] .hn .f2{--hn-qb:var(--hn-c2);--hn-qi:var(--hn-i2)}
html.sty-new[data-theme] .hn .f3{--hn-qb:var(--hn-c3);--hn-qi:var(--hn-i3)}
html.sty-new[data-theme] .hn .f4{--hn-qb:var(--hn-c4);--hn-qi:var(--hn-i4)}
html.sty-new[data-theme] .hn-feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0;margin:0}
html.sty-new[data-theme] .hn-feat>a:active{transform:scale(.97);box-shadow:var(--hn-in)}
html.sty-new[data-theme] .hn-feat>a,html.sty-new[data-theme] .hn-feat>div{text-decoration:none;color:inherit;transition:transform .15s;background:var(--card);border-radius:26px;box-shadow:var(--hn-up);padding:20px 12px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
html.sty-new[data-theme] .hn-feat .ict{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;background:var(--hn-qb);color:var(--hn-qi);box-shadow:var(--hn-up-s)}
html.sty-new[data-theme] .hn-feat .ict svg.i{width:26px;height:26px}
html.sty-new[data-theme] .hn-feat b{font:600 15px Prompt;color:var(--vink)}
html.sty-new[data-theme] .hn-feat .hn-vis b{font:700 17px Prompt;color:var(--vp)}
html.sty-new[data-theme] .hn-feat span{font-size:11.5px;color:var(--vsoft);line-height:1.5}
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop{border-radius:24px!important;padding:8px 8px 12px}
html.sty-new[data-theme] .hm-grid.hn-on .hm-cv{border-radius:18px;height:78px;box-shadow:var(--hn-in)}
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop:nth-child(4n+1) .hm-cv{background:var(--hn-c1)}
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop:nth-child(4n+2) .hm-cv{background:var(--hn-c2)}
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop:nth-child(4n+3) .hm-cv{background:var(--hn-c3)}
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop:nth-child(4n+4) .hm-cv{background:var(--hn-c4)}
@media (min-width:600px){
html.sty-new[data-theme] .hn h1{font-size:46px}
html.sty-new[data-theme] .hn-feat{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
html.sty-new[data-theme] .hm-grid.hn-on .hn{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:36px;align-items:start;margin-top:14px}
html.sty-new[data-theme] .hn h1{font-size:56px;margin-top:22px}
html.sty-new[data-theme] .hn-sub{font-size:16px}
html.sty-new[data-theme] .hn-feat{grid-column:1/-1;gap:24px;margin-top:10px}
}
/* แถบบน: แคปซูลนูน + โลโก้ในลูกกลม (ทุกหน้า ชมพู/ฟ้า) */
html.sty-new[data-theme] header.top{background:var(--card);border-radius:999px;box-shadow:var(--hn-up);margin:12px 14px 14px;padding:8px 8px 8px 10px}
html.sty-new[data-theme] .logo .logo-sh{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--vbtn);box-shadow:var(--vpsh);box-sizing:border-box}
html.sty-new[data-theme] .logo .logo-sh path{fill:#fff;stroke:#fff}
html.sty-new[data-theme] .logo .logo-tx{background:linear-gradient(90deg,var(--vink) 0 57%,var(--vp) 57%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){
html.sty-new[data-theme] header.top{margin:14px auto 18px;max-width:1200px;border-radius:999px;padding:10px 14px 10px 14px;background:var(--card);backdrop-filter:none}
}
/* การ์ดร้านล่าสุดกว้างแบบในแบบ */
html.sty-new[data-theme] .hm-grid.hn-on .hm-shop{flex-basis:220px}
html.sty-new[data-theme] .hm-grid.hn-on .hm-cv{height:96px}

/* แถวกดใจ + สะสมหัวใจ (14 พ.ย. ค่ำ แทนการ์ดหัวใจใหญ่) */
html.sty-new[data-theme] .hn-hrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:26px;box-shadow:var(--hn-up);padding:10px 14px 10px 10px;min-width:0}
html.sty-new[data-theme] .hn .hn-heart{position:static;flex:none;width:auto;margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px 6px;border:0;border-radius:20px;background:var(--card);box-shadow:var(--hn-up-s);cursor:pointer;font:inherit}
html.sty-new[data-theme] .hn-ball{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--hn-ball);box-shadow:var(--hn-ballsh);transition:transform .2s}
html.sty-new[data-theme] .hn-ball svg{width:26px;height:26px;fill:#fff}
html.sty-new[data-theme] .hn .hn-heart .hcount{display:flex;flex-direction:column;align-items:center;gap:0;background:none;color:var(--vink);padding:0;box-shadow:none;border:0;line-height:1.15}
html.sty-new[data-theme] .hn .hn-heart .hcount b{font:800 16px Prompt;color:var(--vink)}
html.sty-new[data-theme] .hn .hn-heart .hcount small{font-size:10px;color:var(--vsoft);white-space:nowrap}
html.sty-new[data-theme] .hn-hrow .hprog{flex:1;min-width:0;margin:0;background:none!important;box-shadow:none!important;border:0!important;padding:0}
@media (min-width:1024px){
html.sty-new[data-theme] .hm-grid.hn-on .hn-hrow{align-self:end}
}