/* ══════════════════════════════════════════════════════════════════════
   scrap.css — เฉพาะหน้าโปรแกรมรับซื้อของเก่า (scrap.html) เท่านั้น
   โหลดต่อจาก style.css · ไม่มีการแก้ style.css แม้แต่บรรทัดเดียว
   ทุกคลาสในไฟล์นี้ขึ้นต้นด้วย s- เพื่อไม่ให้ชนกับหน้าอื่น
   ══════════════════════════════════════════════════════════════════════ */

/* ── โทนสีเขียวรีไซเคิล ─────────────────────────────────────────────── */
body.t-scrap{
  --s-green:#0f766e;          /* เขียวหลัก */
  --s-green-d:#0b544e;        /* เขียวเข้ม */
  --s-leaf:#3f9142;           /* เขียวใบไม้ ใช้กับลายเส้น */
  --s-soft:#e6f4f2;           /* พื้นอ่อน */
  --s-soft-2:#f1f8f4;         /* พื้นอ่อนกว่า */
  --s-ring:#cbe6e1;           /* เส้นขอบโทนเขียว */
}

/* ── ลายเส้นวาดมือ ใช้ซ้ำได้ทุกที่ ───────────────────────────────────── */
.s-ink{display:block;width:100%;height:auto}
.s-ink .ln{fill:none;stroke:var(--s-green);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.s-ink .ln-2{fill:none;stroke:var(--s-leaf);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.s-ink .ln-thin{fill:none;stroke:var(--s-green);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.s-ink .fillsoft{fill:var(--s-soft);stroke:none}
.s-ink .ln-dash{fill:none;stroke:var(--s-leaf);stroke-width:2.1;
  stroke-linecap:round;stroke-dasharray:3 11;opacity:.8}

/* ── 1 · หัวเรื่อง ───────────────────────────────────────────────────── */
.s-hero{padding:30px 0 8px}
.s-hero .s-kicker{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--s-soft);color:var(--s-green-d);
  border:1px solid var(--s-ring);border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:600;margin-bottom:14px;
}
.s-hero .s-kicker svg{width:15px;height:15px;flex:0 0 auto}
.s-hero h1{font-size:clamp(25px,6.6vw,40px);line-height:1.3;margin:0 0 12px}
.s-hero h1 em{font-style:normal;color:var(--s-green)}
.s-lead{font-size:clamp(16px,3.6vw,18px);color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.s-hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.s-hero-facts li{
  display:flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:14px;color:var(--ink-2);
}
.s-hero-facts svg{width:15px;height:15px;color:var(--s-leaf);flex:0 0 auto}

/* ── กรอบภาพหน้าจอ ──────────────────────────────────────────────────── */
.s-shot{
  display:block;position:relative;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);
}
.s-shot:hover{border-color:var(--s-green);text-decoration:none}
.s-shot img{display:block;width:100%;height:auto}
.s-shot figcaption,.s-cap{
  display:block;                 /* เป็น span จึงต้องบังคับ ไม่งั้นข้อความล้นออกนอกกรอบ */
  padding:9px 14px;font-size:13.5px;color:var(--mut);line-height:1.6;
  border-top:1px solid var(--line-2);background:#fff;
}
.s-shot .s-zoomtag{
  position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(15,23,42,.72);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:12px;
}
.s-shot .s-zoomtag svg{width:13px;height:13px}
.s-hero-shot{margin:0 0 6px}

/* ── 2 · ปัญหา → ทางออก ─────────────────────────────────────────────── */
.s-prob{display:grid;gap:12px}
.s-prob-row{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 16px 18px;box-shadow:var(--shadow);
  border-left:4px solid var(--s-leaf);
}
.s-prob-row h3{margin:0 0 6px;font-size:16.5px;color:var(--ink)}
.s-prob-row .s-was{margin:0 0 9px;color:var(--mut);font-size:14.5px}
.s-prob-row .s-now{margin:0;font-size:15px;color:var(--ink-2)}
.s-prob-row .s-now b{color:var(--s-green-d)}

/* ── 3 · ความสามารถ ─────────────────────────────────────────────────── */
.s-feat{display:grid;gap:14px;align-items:start}
.s-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.s-card .s-icon{
  width:46px;height:46px;border-radius:12px;background:var(--s-soft);
  border:1px solid var(--s-ring);display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.s-card .s-icon svg{width:26px;height:26px}
.s-card h3{margin:0 0 8px;font-size:17px}
.s-card p{margin:0 0 10px;color:var(--ink-2);font-size:15px}
.s-list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.s-list li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-2)}
.s-list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border:2px solid var(--s-leaf);border-top:0;border-right:0;
  transform:rotate(-45deg);border-radius:1px;
}

/* ── แถบคำสำคัญ ─────────────────────────────────────────────────────── */
.s-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.s-pills li{
  background:var(--s-soft);color:var(--s-green-d);border:1px solid var(--s-ring);
  border-radius:999px;padding:6px 13px;font-size:14px;
}

/* ── 4 · มือถือในลาน ────────────────────────────────────────────────── */
.s-phone-wrap{display:grid;gap:14px}
.s-phone{
  display:block;max-width:290px;margin:0 auto;
  border:1px solid var(--line);border-radius:22px;
  overflow:hidden;background:#fff;box-shadow:var(--shadow);
}
.s-phone:hover{border-color:var(--s-green)}
.s-phone img{display:block;width:100%;height:auto}

/* ── 5 · รายงาน ─────────────────────────────────────────────────────── */
.s-rep-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 14px}
.s-rep-nums div{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;text-align:center;
}
.s-rep-nums b{display:block;font-size:24px;color:var(--s-green);line-height:1.25}
.s-rep-nums span{font-size:13.5px;color:var(--mut)}

/* ── 6 · ดูแลข้อมูล ─────────────────────────────────────────────────── */
.s-safe{display:grid;gap:12px}
.s-safe-row{display:flex;gap:13px;align-items:flex-start;
  background:var(--s-soft-2);border:1px solid var(--s-ring);
  border-radius:var(--radius);padding:15px}
.s-safe-row .s-icon-sm{width:34px;height:34px;flex:0 0 auto}
.s-safe-row h3{margin:0 0 5px;font-size:16px}
.s-safe-row p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ── 7 · กล่องราคา ───────────────────────────────────────────────────
   ตอนนี้ยังไม่มีราคา จึงปิดไว้ก่อน วิธีเปิดอยู่ในคอมเมนต์ของ scrap.html
   ─────────────────────────────────────────────────────────────────── */
.s-price{display:none}
.s-price.is-on{display:block}
.s-price-box{
  background:linear-gradient(150deg,var(--s-green),var(--s-green-d));
  color:#fff;border-radius:var(--radius);padding:26px 20px;text-align:center;
  box-shadow:0 18px 34px -22px rgba(11,84,78,.8);
}
.s-price-box .s-price-kicker{
  margin:0;font-size:15px;letter-spacing:.02em;opacity:.88;
}
.s-price-box .s-amt{
  font-size:clamp(46px,13vw,72px);font-weight:700;line-height:1.05;margin:2px 0 4px;
}
.s-price-box .s-amt small{font-size:.34em;font-weight:400;opacity:.88;margin-left:8px}

.s-price-lines{
  margin:16px auto 0;padding:0;list-style:none;max-width:44ch;
  display:grid;gap:9px;text-align:left;
}
.s-price-lines li{
  position:relative;padding-left:26px;font-size:15.5px;line-height:1.65;
}
.s-price-lines li::before{
  content:"";position:absolute;left:3px;top:.6em;width:10px;height:10px;
  border:2.2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg);border-radius:1px;opacity:.9;
}
.s-price-lines li:nth-child(2){font-weight:600}

.s-price-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.s-price-btns a{
  background:#fff;color:var(--s-green-d);border-radius:10px;
  padding:12px 22px;font-weight:600;font-size:15.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.s-price-btns a:hover{text-decoration:none;background:#f3fbf8}
.s-price-btns svg{width:17px;height:17px}

.s-price-note{
  margin:16px auto 0;max-width:52ch;font-size:13.5px;line-height:1.7;opacity:.82;
}

/* ── 7 · ใช้ได้ทั้งร้าน ──────────────────────────────────────────────── */
.s-lan{background:var(--s-soft-2);border-top:1px solid var(--s-ring);border-bottom:1px solid var(--s-ring)}
.s-lan-art{
  background:#fff;border:1px solid var(--s-ring);border-radius:var(--radius);
  padding:14px 12px;box-shadow:var(--shadow);
}
.s-lan-art svg{display:block;width:100%;height:auto}

.s-lan-legend{display:grid;gap:10px;margin-top:12px}
.s-lan-legend div{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;font-size:14.5px;line-height:1.7;color:var(--ink-2);
}
.s-lan-legend b{display:block;color:var(--s-green-d);font-size:15.5px;margin-bottom:2px}

.s-lan-grid{display:grid;gap:18px;margin-top:18px}
.s-lan-grid .s-list{gap:10px}
/* ภาพมือถือสูงมาก ตัดให้เห็นเฉพาะส่วนบน จะได้ไม่เหลือที่ว่างข้างรายการ */
.s-lan-grid .s-phone img{height:215px;object-fit:cover;object-position:top}

/* ── เอกสารที่พิมพ์ได้ ───────────────────────────────────────────────── */
.s-docs{display:grid;gap:16px;grid-template-columns:1fr;margin-top:6px}
.s-doc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);display:block;
}
.s-doc:hover{border-color:var(--s-green);text-decoration:none}
.s-doc img{
  display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--line-2);background:#fff;
}
.s-doc-name{
  display:block;margin:10px 2px 2px;font-size:15px;font-weight:600;color:var(--ink);
}
.s-doc-cap{display:block;margin:0 2px;font-size:12.5px;color:var(--mut)}
.s-doc-slip img{max-width:300px;margin:0 auto}
@media (min-width:760px){
  .s-docs{grid-template-columns:1fr 1fr}
  .s-docs .s-doc-wide{grid-column:1 / -1}
}

/* ── 8 · คำถามที่พบบ่อย ─────────────────────────────────────────────── */
.s-faq{display:grid;gap:9px}
.s-faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:0 15px;box-shadow:var(--shadow);
}
.s-faq summary{
  cursor:pointer;list-style:none;padding:14px 26px 14px 0;position:relative;
  font-weight:600;font-size:15.5px;color:var(--ink);
}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--s-green);border-bottom:2px solid var(--s-green);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.s-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.s-faq details p{margin:0 0 15px;font-size:15px;color:var(--ink-2)}
.s-faq details p:first-of-type{margin-top:-2px}

/* ── หมายเหตุตัวเล็ก ────────────────────────────────────────────────── */
.s-fine{font-size:13.5px;color:var(--mut);margin:14px 0 0}

/* ── กล่องขยายภาพ — CSS ล้วน ไม่มี JavaScript ──────────────────────── */
.s-zoom{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(8,20,18,.86);padding:20px;
  align-items:center;justify-content:center;
}
.s-zoom:target{display:flex}
.s-zoom img{max-width:100%;max-height:92vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.s-zoom .s-close{position:absolute;inset:0;display:block}
.s-zoom .s-x{
  position:absolute;top:14px;right:16px;z-index:2;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;text-decoration:none;
}
.s-zoom .s-x:hover{background:rgba(255,255,255,.3);text-decoration:none}

/* ── จอกว้างขึ้น ────────────────────────────────────────────────────── */
@media (min-width:640px){
  .s-rep-nums{grid-template-columns:repeat(4,1fr)}
  .s-prob{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .s-hero{padding:44px 0 10px}
  .s-feat{grid-template-columns:repeat(2,1fr)}
  .s-safe{grid-template-columns:repeat(3,1fr)}
  .s-safe-row{flex-direction:column}
  .s-phone-wrap{grid-template-columns:290px 1fr;align-items:center;gap:26px}
  .s-lan-legend{grid-template-columns:1fr 1fr}
  .s-lan-grid{grid-template-columns:1fr 290px;align-items:center;gap:28px}
  .s-lan-art{padding:20px 24px}
  .s-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
}

/* ── พิมพ์ออกกระดาษ ─────────────────────────────────────────────────── */
@media print{
  .s-zoom{display:none !important}
  .s-shot{break-inside:avoid}
}