/* ═══════════════════════════════════════════════════════════════════════════
   checkshopee.css — หน้า /checkshopee (โหลดต่อจาก home.css)
   โครงเดียวกับหน้าแรก DEKTHAI DIGITAL (hero ดำ + dot field + glass) แต่ "สีส้ม Shopee" — เฉพาะหน้านี้ (body.cs)
   ⚠️ home.css ฝังสี lime เป็น rgba(212,255,62,…) หลายจุด → override เฉพาะที่หน้านี้ใช้ · ห้ามแก้ home.css (หน้าอื่นต้องเป็น lime)
   ⚠️ grid ทุกอันใช้ minmax(0,1fr) · ตัวเลขใช้ tabular-nums · แอนิเมชันเคารพ prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */
body.cs{
  --accent:#EE4D2D; --accent-dark:#D73211; --accent-soft:#FFF1EC; --accent-glow:rgba(238,77,45,.4);
  --sp:#EE4D2D; --sp-2:#FF6A3D; --sp-3:#FF9A62; --sp-dk:#D73211; --sp-soft:#FFF1EC;
  --sp-a08:rgba(238,77,45,.08); --sp-a15:rgba(238,77,45,.15); --sp-a25:rgba(238,77,45,.25); --sp-a40:rgba(238,77,45,.4);
}
.cs [hidden]{display:none!important}   /* .hm-btn ฯลฯ ตั้ง display เอง → attribute hidden ต้องชนะเสมอ */
.cs-anchor{display:block;height:0;scroll-margin-top:120px}
/* ── override lime → ส้ม (เฉพาะหน้านี้) ── */
.cs .hm-dot{box-shadow:0 0 0 3px var(--sp-a25),0 0 12px rgba(238,77,45,.8)}
.cs .hm-hero .hm-thin{color:var(--sp-2);text-shadow:0 0 44px rgba(238,77,45,.45)}
.cs .hm-svc--dark .hm-thin{background-image:linear-gradient(92deg,var(--sp) 5%,var(--sp-3) 50%,#fff 95%)}
.cs .hm-btn-accent{color:#fff;box-shadow:0 0 0 1px var(--sp-a40),0 10px 30px -8px rgba(238,77,45,.55)}
.cs .hm-btn-accent:hover{background:var(--sp-2);box-shadow:0 0 0 1px rgba(238,77,45,.6),0 14px 38px -8px rgba(238,77,45,.75)}
.cs .hm-header.is-dark .hm-logo-mark{color:#fff}
.cs .hm-logo-mark{color:#fff;background:var(--sp)}
.cs .hm-hero-glow{background:radial-gradient(700px 380px at 50% 46%,rgba(238,77,45,.22),transparent 70%),radial-gradient(900px 420px at 50% 0%,rgba(255,255,255,.06),transparent 70%)}
.cs .hm-chip:hover{border-color:rgba(238,77,45,.6)}
.cs .hm-figures>div::before{background:linear-gradient(90deg,transparent,rgba(238,77,45,.9),transparent)}
.cs .hm-figures>div::after{background:radial-gradient(closest-side,rgba(238,77,45,.14),transparent)}
.cs .hm-figures>div:hover{border-color:rgba(238,77,45,.4)}
.cs .hm-fig-ic{background:linear-gradient(145deg,rgba(238,77,45,.2),rgba(238,77,45,.04));border-color:rgba(238,77,45,.32);box-shadow:0 0 24px -6px rgba(238,77,45,.5),0 1px 0 rgba(255,255,255,.12) inset}
.cs .hm-svc--dark .hm-ghost b{background-image:linear-gradient(180deg,rgba(238,77,45,.2),rgba(238,77,45,0) 92%)}
.cs .hm-tag,.cs .hm-svc--dark .hm-tag{background:var(--sp);color:#fff}
.cs .hm-svc::after{background:radial-gradient(closest-side,rgba(238,77,45,.12),transparent)}
.cs .hm-svc--dark::after{background:radial-gradient(closest-side,rgba(238,77,45,.16),transparent)}
.cs .hm-faq-item[open] summary>i{color:#fff}
.cs .hm-feat-ic{color:#fff;background:linear-gradient(145deg,var(--sp-2),var(--sp-dk));box-shadow:0 8px 20px -8px rgba(215,50,17,.75),0 1px 0 rgba(255,255,255,.35) inset}
.cs .hm-steps.is-dark .hm-step-no{-webkit-text-stroke-color:rgba(238,77,45,.35)}
.cs .hm-fcta{background:radial-gradient(60% 45% at 50% 0%,rgba(238,77,45,.2),rgba(238,77,45,0) 70%),radial-gradient(40% 35% at 100% 100%,rgba(238,77,45,.08),rgba(238,77,45,0) 70%),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/22px 22px,var(--ink)}
.cs .hm-feyebrow{background:var(--sp-a08);border-color:rgba(238,77,45,.25)}
.cs .hm-fbtn--light{color:#fff;box-shadow:0 10px 30px -8px rgba(238,77,45,.55)}
.cs .hm-fsocial a:hover{color:#fff}
.cs .hm-hero{background:radial-gradient(120% 80% at 50% 120%,#1a0a06 0%,var(--ink) 60%)}

/* ═════════ HERO: ช่องวางลิงก์ ═════════ */
.cs-hero-in{padding-bottom:8px}
.cs .hm-h1{max-width:13ch}
.cs-search{position:relative;width:100%;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 6px rgba(238,77,45,.08),0 30px 70px -30px rgba(238,77,45,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow .35s,border-color .35s}
.cs-search:focus-within{border-color:rgba(238,77,45,.75);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 6px rgba(238,77,45,.2),0 30px 80px -30px rgba(238,77,45,.75)}
.cs-search>i{font-size:24px;color:var(--sp-2);margin-left:12px;flex-shrink:0}
#csForm .cs-input{flex:1;min-width:0;height:54px;border:0;background:transparent;color:#fff;font:500 16.5px 'Prompt',sans-serif;outline:none;padding:0 4px}
#csForm .cs-input::placeholder{color:rgba(255,255,255,.55)}
.cs-paste{flex-shrink:0;height:46px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:500 14px 'Prompt',sans-serif;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .25s,border-color .25s}
.cs-paste:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.cs-paste i{font-size:18px}
.cs-go{flex-shrink:0;height:54px;padding:0 26px;border-radius:16px;font-size:16px}
.cs-hint{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:13px;color:rgba(255,255,255,.7)}
.cs-hint span{display:inline-flex;align-items:center;gap:6px}
.cs-hint i{color:var(--sp-2);font-size:16px}
.cs-recent{margin:22px auto 0;max-width:760px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cs-recent:empty{display:none}
.cs-recent button{display:inline-flex;align-items:center;gap:8px;max-width:240px;height:36px;padding:0 12px 0 4px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font:400 13px 'Prompt',sans-serif;cursor:pointer;transition:border-color .25s,background .25s}
.cs-recent button:hover{border-color:rgba(238,77,45,.6);background:rgba(238,77,45,.1)}
.cs-recent img,.cs-recent .cs-ph{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.1)}
.cs-recent b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-announce{max-width:760px;margin:0 auto 22px;padding:10px 16px;border-radius:14px;background:rgba(238,77,45,.12);border:1px solid rgba(238,77,45,.3);font-size:13.5px;color:#fff;display:flex;gap:8px;align-items:center}
.cs-announce i{color:var(--sp-2);font-size:18px}

/* ═════════ ผลการเช็ค (การ์ดแก้วบนพื้นดำ) ═════════ */
.cs-result{position:relative;max-width:1080px;margin:46px auto 0;text-align:left;scroll-margin-top:96px}
.cs-result[hidden]{display:none}
.cs-card{position:relative;overflow:hidden;border-radius:26px;padding:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 50px 100px -50px rgba(0,0,0,.9)}
.cs-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(238,77,45,.95),transparent)}
.cs-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;align-items:stretch}
.cs-prod{display:flex;gap:18px;min-width:0}
.cs-img{position:relative;width:132px;height:132px;flex-shrink:0;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06);display:grid;place-items:center;border:1px solid rgba(255,255,255,.08)}
.cs-img img{width:100%;height:100%;object-fit:cover}
.cs-img>i{font-size:40px;color:rgba(255,255,255,.25)}
.cs-pinfo{min-width:0;display:flex;flex-direction:column;gap:8px}
.cs-title{font-size:18px;font-weight:600;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px}
.cs-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;color:rgba(255,255,255,.85);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.cs-pill i{font-size:14px}
.cs-pill.is-ok i{color:var(--good)}
.cs-pill.is-bad{color:#fecaca;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.12)}
.cs-pill.is-star i{color:#FBBF24}
.cs-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:auto}
.cs-price b{font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cs-price s{font-size:16px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.cs-price em{font-style:normal;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--sp);color:#fff}
.cs-price small{width:100%;font-size:12px;color:rgba(255,255,255,.6)}
.cs-noprice{font-size:15px;color:rgba(255,255,255,.75)}

/* เกจครึ่งวงกลม */
.cs-verdict{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;border-radius:20px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07)}
.cs-gauge{position:relative;width:220px;max-width:100%}
.cs-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.cs-gauge-n{margin-top:2px;text-align:center}
.cs-gauge-n b{display:block;font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cs-gauge-n small{font-size:11.5px;color:rgba(255,255,255,.6)}
.cs-needle{transform-origin:110px 110px;transition:transform 1.4s cubic-bezier(.22,1.2,.36,1)}
.cs-vtext{margin-top:12px;font-size:16px;font-weight:700;line-height:1.4}
.cs-vtext.is-great,.cs-vtext.is-good{color:#6EE7B7}
.cs-vtext.is-fair{color:#FCD34D}
.cs-vtext.is-high{color:#FCA5A5}
.cs-vtext.is-stable{color:#93C5FD}
.cs-vtext.is-new,.cs-vtext.is-unknown{color:#fff}
.cs-vsub{margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.62)}

/* ธง: ส่วนลดปลอม / ขึ้นราคาก่อนแคมเปญ / ต่ำสุดเป็นประวัติการณ์ */
.cs-flags{display:grid;gap:10px;margin-top:20px}
.cs-flags:empty{display:none}
.cs-flag{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid;font-size:14px;line-height:1.5}
.cs-flag>i{font-size:22px;flex-shrink:0;margin-top:1px}
.cs-flag b{display:block;font-size:15px;color:#fff}
.cs-flag span{color:rgba(255,255,255,.78)}
.cs-flag.is-fake_discount,.cs-flag.is-pre_hike{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4)}
.cs-flag.is-fake_discount>i,.cs-flag.is-pre_hike>i{color:#F87171}
.cs-flag.is-new_low{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4)}
.cs-flag.is-new_low>i{color:#34D399}

/* กราฟราคา */
.cs-chartbox{margin-top:22px;padding:18px 18px 12px;border-radius:20px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07)}
.cs-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cs-chart-head h3{font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
.cs-chart-head h3 i{color:var(--sp-2);font-size:19px}
.cs-range{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.cs-range button{height:30px;padding:0 13px;border-radius:var(--r-pill);border:0;background:transparent;color:rgba(255,255,255,.75);font:500 12.5px 'Prompt',sans-serif;cursor:pointer;transition:background .25s,color .25s}
.cs-range button.is-on{background:var(--sp);color:#fff}
.cs-chart{position:relative;height:250px;touch-action:pan-y}
.cs-chart svg{display:block;width:100%;height:100%;overflow:visible}
.cs-chart .cs-line{fill:none;stroke:var(--sp-2);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 6px 14px rgba(238,77,45,.45))}
.cs-chart .cs-grid line{stroke:rgba(255,255,255,.07)}
.cs-chart .cs-grid text,.cs-chart .cs-xl text{fill:rgba(255,255,255,.5);font:400 10.5px 'Prompt',sans-serif}
.cs-chart .cs-ref{stroke-dasharray:4 5;stroke-width:1.2}
.cs-chart .cs-ref.lo{stroke:#34D399}
.cs-chart .cs-ref.avg{stroke:rgba(255,255,255,.35)}
.cs-chart .cs-dot{fill:#fff;stroke:var(--sp);stroke-width:3}
.cs-chart .cs-cur{stroke:rgba(255,255,255,.35);stroke-width:1}
.cs-tip{position:absolute;top:0;pointer-events:none;transform:translate(-50%,-112%);padding:6px 10px;border-radius:10px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.cs-tip small{display:block;font-weight:400;color:var(--text-2);font-size:11px}
.cs-chart-empty{display:grid;place-items:center;height:100%;text-align:center;color:rgba(255,255,255,.65);font-size:14px;line-height:1.6;padding:0 20px}
.cs-chart-empty i{display:block;font-size:34px;color:var(--sp-2);margin-bottom:6px}
.cs-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:11.5px;color:rgba(255,255,255,.6)}
.cs-legend span{display:inline-flex;align-items:center;gap:6px}
.cs-legend i{width:14px;height:0;border-top:2px dashed}

/* สถิติ 4 ช่อง */
.cs-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.cs-stats>div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.cs-stats small{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.62)}
.cs-stats small i{font-size:15px}
.cs-stats b{display:block;margin-top:4px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.cs-stats .lo i{color:#34D399}
.cs-stats .hi i{color:#F87171}
.cs-stats .avg i{color:#93C5FD}
.cs-stats .chk i{color:var(--sp-2)}

/* ปุ่มล่าง */
.cs-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
.cs-actions .hm-btn{height:50px}
.cs-buy{flex:1 1 220px}
.cs-disclose{width:100%;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}
.cs-btn-watch.is-on{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.5)}
.cs-btn-watch.is-on i{color:#34D399}

/* แจ้งราคาเอง */
.cs-ask{margin-top:18px;padding:16px 18px;border-radius:18px;border:1px dashed rgba(238,77,45,.55);background:rgba(238,77,45,.07)}
.cs-ask[hidden]{display:none}
.cs-ask.is-top{margin-top:20px;border-style:solid;border-color:rgba(238,77,45,.65);background:linear-gradient(135deg,rgba(238,77,45,.16),rgba(238,77,45,.05));box-shadow:0 20px 50px -30px rgba(238,77,45,.8)}
.cs-ask.is-top h4{font-size:16.5px}
.cs-ask p a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cs-ask h4{font-size:15px;font-weight:600;color:#fff;display:flex;gap:8px;align-items:center}
.cs-ask h4 i{color:var(--sp-2);font-size:19px}
.cs-ask p{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
.cs-ask-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin-top:12px}
.cs-field{position:relative}
.cs-field span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6);font-weight:600;pointer-events:none}
#csAsk .cs-field input,#csSheet .cs-field input{width:100%;height:46px;padding:0 14px 0 32px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:#fff;font:500 16px 'Prompt',sans-serif;outline:none;font-variant-numeric:tabular-nums}
#csAsk .cs-field input:focus,#csSheet .cs-field input:focus{border-color:var(--sp-2)}
.cs-ask .hm-btn{height:46px}

/* โหลด: ขั้นตอนเดิน */
.cs-loading{padding:34px 26px;text-align:center}
.cs-loading[hidden]{display:none}
.cs-spin{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--sp);animation:csSpin .9s linear infinite}
.cs-steps{display:inline-flex;flex-direction:column;gap:10px;text-align:left}
.cs-steps li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.45);transition:color .3s}
.cs-steps li i{font-size:18px}
.cs-steps li.is-on{color:#fff}
.cs-steps li.is-on i{color:var(--sp-2)}
.cs-steps li.is-done{color:rgba(255,255,255,.8)}
.cs-steps li.is-done i{color:#34D399}
.cs-err{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#fff;font-size:14.5px;line-height:1.55}
.cs-err i{font-size:24px;color:#F87171;flex-shrink:0}
@keyframes csSpin{to{transform:rotate(360deg)}}

/* ═════════ ดีล / ติดตาม (การ์ดสินค้า) ═════════ */
.cs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cs-pcard{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--border);cursor:pointer;font:inherit;color:inherit;padding:0;transition:transform .45s var(--ease),box-shadow .45s,border-color .4s}
.cs-pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(238,77,45,.35)}
.cs-pcard-img{position:relative;aspect-ratio:1/1;background:var(--bg-mute);display:grid;place-items:center;overflow:hidden}
.cs-pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cs-pcard:hover .cs-pcard-img img{transform:scale(1.04)}
.cs-pcard-img>i{font-size:40px;color:var(--text-4)}
.cs-pcard-badge{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--sp);color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 20px -8px rgba(238,77,45,.8)}
.cs-pcard-badge.is-dark{background:var(--ink)}
.cs-pcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cs-pcard-body h3{font-size:13.5px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.cs-pcard-pr{display:flex;align-items:baseline;gap:8px;margin-top:auto;flex-wrap:wrap}
.cs-pcard-pr b{font-size:19px;font-weight:700;color:var(--sp);font-variant-numeric:tabular-nums}
.cs-pcard-pr s{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cs-pcard-pr small{font-size:12px;color:var(--text-2)}
.cs-sub-h{display:flex;align-items:center;gap:10px;margin:48px 0 18px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.cs-sub-h:first-child{margin-top:0}
.cs-sub-h i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--sp-soft);color:var(--sp);font-size:20px}
.cs-sub-h small{font-size:13px;font-weight:400;color:var(--text-2);margin-left:auto}
.cs-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 20px;border-radius:20px;border:1px dashed var(--border-strong);background:var(--bg-soft);color:var(--text-2);font-size:14.5px;line-height:1.6}
.cs-empty i{font-size:40px;color:var(--sp)}
.cs-empty b{font-size:16px;color:var(--ink)}
.cs-skel{border-radius:18px;background:linear-gradient(100deg,var(--bg-mute) 30%,#fff 50%,var(--bg-mute) 70%) 0 0/300% 100%;animation:csShine 1.4s linear infinite;aspect-ratio:3/4}
@keyframes csShine{to{background-position:-150% 0}}

/* ติดตามราคา (พื้นดำ) */
.cs-watch-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;margin-bottom:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cs-watch-bar>i{font-size:26px;color:var(--sp-2)}
.cs-watch-bar div{flex:1;min-width:200px}
.cs-watch-bar b{display:block;font-size:15px;color:#fff}
.cs-watch-bar span{font-size:13px;color:rgba(255,255,255,.7)}
.cs-wlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-witem{display:flex;gap:14px;align-items:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:border-color .3s,background .3s}
.cs-witem:hover{border-color:rgba(238,77,45,.45);background:rgba(255,255,255,.07)}
.cs-witem-img{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.06);display:grid;place-items:center}
.cs-witem-img img{width:100%;height:100%;object-fit:cover}
.cs-witem-img i{font-size:26px;color:rgba(255,255,255,.3)}
.cs-witem-b{flex:1;min-width:0;cursor:pointer;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit}
.cs-witem-b h3{font-size:14px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-witem-b p{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.65)}
.cs-witem-b p b{font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.cs-witem-b .is-down{color:#34D399}
.cs-witem-b .is-up{color:#F87171}
.cs-witem-x{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;display:grid;place-items:center;transition:border-color .25s,color .25s}
.cs-witem-x:hover{border-color:#F87171;color:#F87171}
.cs-svc-dark-empty{grid-column:1/-1;text-align:center;padding:40px 20px;border-radius:20px;border:1px dashed rgba(255,255,255,.16);color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.6}
.cs-svc-dark-empty i{display:block;font-size:40px;color:var(--sp-2);margin-bottom:8px}

/* สิ่งที่ตรวจจับได้ */
.cs-detect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* ═════════ แผ่นตั้งเป้าราคา (bottom sheet) ═════════ */
.cs-sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;pointer-events:none}
.cs-sheet[hidden]{display:none}
.cs-sheet-bg{position:absolute;inset:0;background:rgba(10,10,11,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;pointer-events:auto}
.cs-sheet-box{position:relative;width:100%;max-width:480px;margin:0 12px 12px;padding:24px 22px 22px;border-radius:24px;background:#141417;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 -20px 60px -20px rgba(0,0,0,.8);transform:translateY(30px);opacity:0;transition:transform .4s var(--ease),opacity .3s;pointer-events:auto}
.cs-sheet.is-on .cs-sheet-bg{opacity:1}
.cs-sheet.is-on .cs-sheet-box{transform:none;opacity:1}
.cs-sheet-box h3{font-size:19px;font-weight:700;display:flex;gap:8px;align-items:center}
.cs-sheet-box h3 i{color:var(--sp-2)}
.cs-sheet-box p{font-size:13.5px;color:rgba(255,255,255,.7);margin:6px 0 16px;line-height:1.55}
.cs-quick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}
.cs-quick button{height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font:500 12.5px 'Prompt',sans-serif;cursor:pointer}
.cs-quick button:hover{border-color:var(--sp-2)}
.cs-sheet-act{display:flex;gap:8px}
.cs-sheet-act .hm-btn{flex:1;height:48px}
.cs-sheet-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}

/* toast */
.cs-toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,20px);max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;display:flex;gap:8px;align-items:center;box-shadow:0 20px 50px -16px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.cs-toast.is-on{opacity:1;transform:translate(-50%,0)}
.cs-toast i{font-size:19px;color:var(--sp-2)}
.cs-toast.is-ok i{color:#34D399}
.cs-toast.is-err i{color:#F87171}

/* ═════════ หน้าสินค้า SEO (checkshopee-p.php) ═════════ */
.csp-hero{padding-bottom:70px}
.csp-crumb{display:flex;align-items:center;gap:6px;margin:0 0 18px;font-size:13px;color:rgba(255,255,255,.7)}
.csp-crumb a{color:#fff;text-decoration:none}.csp-crumb a:hover{color:var(--sp-2)}.csp-crumb i{font-size:16px}
.csp-card{max-width:1080px;margin:0 auto}
.csp-h1{font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.3;-webkit-line-clamp:3}
.csp-sub{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.csp-score{display:flex;flex-direction:column;align-items:center;gap:2px}
.csp-score small{font-size:12px;color:rgba(255,255,255,.6)}
.csp-body{padding-top:70px}
.csp-wrap{max-width:1000px}
.csp-chart{padding:18px 18px 8px;border-radius:20px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-soft)}
.csp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.csp-stats>div{padding:14px 16px;border-radius:16px;background:var(--bg-soft);border:1px solid var(--border)}
.csp-stats small{display:block;font-size:12px;color:var(--text-2)}
.csp-stats b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.csp-faq{display:grid;gap:10px}
a.cs-pcard{text-decoration:none;color:inherit}
.cs-ext-note{margin-top:16px;text-align:center;font-size:13px;color:rgba(255,255,255,.65)}
.cs-ext-note b{color:#fff;font-weight:600}
.cs-poplist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.cs-poplist a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:14px;text-decoration:none;color:var(--ink);transition:border-color .25s,transform .25s}
.cs-poplist a:hover{border-color:rgba(238,77,45,.45);transform:translateY(-2px)}
.cs-poplist i{color:var(--sp);font-size:18px;flex-shrink:0}
@media (max-width:640px){.cs-poplist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.csp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.csp-hero{padding-top:130px}}

/* ═════════ มือถือ ═════════ */
@media (max-width:1024px){
  .cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-detect{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .cs-top{grid-template-columns:minmax(0,1fr)}
  .cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-wlist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .cs-search{flex-wrap:wrap;padding:8px;border-radius:20px}
  .cs-search>i{display:none}
  #csForm .cs-input{flex:1 1 100%;height:50px;padding:0 10px}
  .cs-paste{flex:0 0 auto}
  .cs-go{flex:1;height:48px}
  .cs-card{padding:18px;border-radius:22px}
  .cs-img{width:96px;height:96px;border-radius:14px}
  .cs-title{font-size:15.5px}
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cs-detect{grid-template-columns:minmax(0,1fr)}
  .cs-chart{height:210px}
  .cs-ask-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cs-ask-row .hm-btn{grid-column:1/-1}
  .cs-actions .hm-btn{flex:1 1 calc(50% - 5px)}
  .cs-actions .cs-buy{flex-basis:100%}
  .cs-sub-h small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cs-spin,.cs-skel{animation:none}
  .cs-needle,.cs-pcard,.cs-pcard-img img,.cs-sheet-box,.cs-toast{transition:none}
}