/* ═════════════════════════════════════════════════════════════════════
   counter.css — หน้าหมวดเครื่องนับสต็อก (equip-count.html) · ทุกคลาสขึ้นต้นด้วย cn-
   โหลดต่อจาก style.css · cart.css · shop.css · equip.css · orderflow.css
   🔴 ไม่แก้ stock.css (หลังบ้านเขียน) · ไม่แก้ equip.css/shop.css · ไม่ใช้ JavaScript
   ═════════════════════════════════════════════════════════════════════ */

/* สีประจำรุ่น: 1D น้ำเงิน · 2D ม่วง · PREMIUM ส้มเข้ม · เซต เขียวน้ำทะเล */
.cn-m1{--ma:#1d4ed8;--mb:#eaf0ff;--mc:#b9ccf3}
.cn-m2{--ma:#6d28d9;--mb:#f1ebfe;--mc:#d3c1f7}
.cn-mp{--ma:#b45309;--mb:#fdf1e3;--mc:#f1d3a8}
.cn-ms{--ma:#0f766e;--mb:#e6f4f2;--mc:#b5dcd7}

.cn-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:118px}
.cn-hide-sm{display:none !important}
@media (min-width:700px){ .cn-hide-sm{display:inline-flex !important} }

/* ── หัวหน้า ─────────────────────────────────────────────────────── */
.cn-hero{background:linear-gradient(160deg,#0c1a30,#16294a 58%,#1b3a6b);color:#fff;padding:30px 0 34px}
.cn-hero-in{display:grid;gap:26px;align-items:center}
.cn-hero .sh-eyebrow{
  display:inline-block;margin-bottom:12px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.93);
}
.cn-hero h1{margin:0 0 12px;font-size:clamp(26px,6.4vw,40px);line-height:1.25;letter-spacing:-.3px}
.cn-h1-sub{display:block;color:#8fb4ff}
.cn-lead{margin:0 0 18px;font-size:clamp(15px,3.6vw,17.5px);line-height:1.76;color:rgba(255,255,255,.86);max-width:60ch}
.cn-opts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cn-opt a{
  display:flex;flex-direction:column;gap:2px;height:100%;padding:10px 12px 11px;border-radius:13px;
  background:#fff;color:var(--ink);border-bottom:4px solid var(--ma);text-decoration:none;
}
.cn-opt a:hover{text-decoration:none;transform:translateY(-1px)}
.cn-opt b{font-size:clamp(15px,3.8vw,19px);color:var(--ma);line-height:1.2}
.cn-opt span{font-size:clamp(11.5px,2.9vw,13px);line-height:1.45;color:#44526b}
.cn-cta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.cn-cta .sh-btn{padding:12px 17px;font-size:15px}
.cn-cta .sh-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.cn-cta .sh-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:#fff}
.cn-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.cn-trust li{display:flex;align-items:center;gap:7px;font-size:13.6px;color:rgba(255,255,255,.88)}
.cn-trust svg{width:17px;height:17px;color:#7fe0a6;flex:0 0 auto}
.cn-hero-pic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cn-ph{margin:0;background:#fff;border-radius:18px;overflow:hidden;color:var(--ink);box-shadow:0 18px 40px -22px rgba(0,0,0,.65)}
.cn-ph picture,.cn-ph img{display:block;width:100%;height:auto}
.cn-ph figcaption{padding:9px 12px 12px;font-size:12.6px;line-height:1.5;color:#44526b;text-align:center;border-top:1px solid var(--sh-ring,#dbe4f2)}
@media (min-width:940px){
  .cn-hero{padding:46px 0 50px}
  .cn-hero-in{grid-template-columns:1.12fr .88fr;gap:44px}
  .cn-ph figcaption{font-size:13px}
}

/* ── เลือกให้เร็ว ───────────────────────────────────────────────── */
.cn-picks{display:grid;gap:14px}
@media (min-width:820px){ .cn-picks{grid-template-columns:repeat(3,1fr)} }
.cn-pk{
  position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);text-decoration:none;
  border:1px solid var(--sh-ring,#dbe4f2);border-top:5px solid var(--ma);border-radius:16px;padding:18px 18px 16px;
}
.cn-pk:hover{text-decoration:none;border-color:var(--ma);box-shadow:0 12px 28px -20px var(--ma)}
.cn-pk-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--mb);color:var(--ma);margin-bottom:10px}
.cn-pk-ic svg{width:24px;height:24px}
.cn-pk h3{margin:0;font-size:19px;color:var(--ma)}
.cn-pk-sub{margin:2px 0 10px;font-size:14px;color:var(--sh-mut,#5d6b81)}
.cn-pk ul{margin:0 0 12px;padding:0 0 0 18px;display:grid;gap:5px;font-size:14.4px;line-height:1.65;color:var(--ink-2,#2c3a52)}
.cn-pk-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ma)}
.cn-pk-go svg{width:16px;height:16px}

/* ── ภาพประกอบอ่านรหัสได้อะไร ───────────────────────────────────── */
.cn-reader{display:grid;gap:12px;margin:0 0 22px}
@media (min-width:760px){ .cn-reader{grid-template-columns:repeat(3,1fr)} }
.cn-rd{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-top:4px solid var(--ma);border-radius:14px;padding:14px 16px 16px}
.cn-rd-h{margin:0 0 10px;display:flex;flex-direction:column;gap:1px}
.cn-rd-h b{font-size:20px;color:var(--ma);line-height:1.2}
.cn-rd-h span{font-size:13px;color:var(--sh-mut,#5d6b81)}
.cn-rd-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px dashed var(--sh-ring,#dbe4f2)}
.cn-rd-row:first-of-type{border-top:0}
.cn-bc{width:96px;height:auto;flex:0 0 auto;border:1px solid var(--sh-ring,#dbe4f2);border-radius:6px;padding:5px;background:#fff;box-sizing:content-box}
.cn-qr{width:56px;height:56px;flex:0 0 auto;border:1px solid var(--sh-ring,#dbe4f2);border-radius:6px;padding:4px;background:#fff;box-sizing:content-box}
.cn-ck{display:inline-flex;align-items:flex-start;gap:6px;font-size:13.4px;line-height:1.5;font-weight:600}
.cn-ck svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;stroke-width:2.6}
.cn-ck-y{color:#15803d}.cn-ck-n{color:#b42318}.cn-ck-q{color:#8a5a00}
.cn-figcap{margin:8px 0 0;font-size:12.8px;line-height:1.6;color:var(--sh-mut,#5d6b81)}
.cn-figcap code{background:#eef3fb;border-radius:5px;padding:1px 6px;font-size:12.6px;color:#0f1e35}

/* ── ตารางเทียบ ───────────────────────────────────────────────────── */
.cn-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;margin:0 0 14px}
.cn-tbl-wrap:focus-visible{outline:3px solid var(--sh-blue,#1d4ed8);outline-offset:2px}
.cn-tbl{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.6}
.cn-tbl th,.cn-tbl td{padding:11px 13px;border-bottom:1px solid var(--sh-ring,#dbe4f2);text-align:left;vertical-align:top}
.cn-tbl thead th{position:sticky;top:0;z-index:2;background:#fff;border-bottom:3px solid var(--ma,#101a2c);text-align:center;vertical-align:bottom}
.cn-tbl thead th b{display:block;font-size:19px;color:var(--ma);line-height:1.2}
.cn-tbl thead th small{display:block;font-size:12.4px;font-weight:600;color:var(--sh-mut,#5d6b81)}
.cn-tbl thead .cn-th0{border-bottom-color:#101a2c;text-align:left;vertical-align:bottom}
.cn-tbl tbody th[scope=row]{width:25%;font-weight:700;color:var(--ink);background:#fbfcfe;left:0}
.cn-tbl tbody th[scope=row] span{display:block}
.cn-tbl td:nth-child(2){background:linear-gradient(180deg,rgba(29,78,216,.045),rgba(29,78,216,.045))}
.cn-tbl td:nth-child(3){background:linear-gradient(180deg,rgba(109,40,217,.045),rgba(109,40,217,.045))}
.cn-tbl td:nth-child(4){background:linear-gradient(180deg,rgba(180,83,9,.05),rgba(180,83,9,.05))}
.cn-tbl .cn-grp th{background:#0f1e35;color:#fff;font-size:13px;letter-spacing:.3px;padding:8px 13px}
.cn-tbl tr:last-child th,.cn-tbl tr:last-child td{border-bottom:0}
.cn-c-y,.cn-c-n,.cn-c-q{position:relative}
.cn-c-y svg,.cn-c-n svg,.cn-c-q svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px;stroke-width:2.6}
.cn-c-y svg{color:#15803d}.cn-c-n svg{color:#b42318}.cn-c-q svg{color:#8a5a00}
.cn-ct{color:var(--ink-2,#2c3a52)}
.cn-pr{font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap}
.cn-pr-1d{color:#1d4ed8}.cn-pr-2d{color:#6d28d9}.cn-pr-prem{color:#b45309}
.cn-ev{display:inline-block;margin:3px 5px 0 0;padding:1px 8px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;line-height:1.7;border:1px solid transparent;white-space:nowrap}
.cn-ev-S{background:#eef3fb;color:#27407a;border-color:#cfdcf2}
.cn-ev-V{background:#e9f7ee;color:#136b34;border-color:#c3e6cf}
.cn-ev-P{background:#f1ebfe;color:#5b21b6;border-color:#d9c9f7}
.cn-ev-C{background:#fdf1e3;color:#8a4a06;border-color:#f1d3a8}
.cn-ev-Q{background:#fff4e0;color:#8a5a00;border-color:#f3ddb4}
.cn-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;font-size:12.8px;color:var(--sh-mut,#5d6b81);align-items:center}
.cn-legend span{display:inline-flex;align-items:center;gap:2px}
.cn-unknown{display:flex;gap:10px;align-items:flex-start;margin:0;padding:13px 15px;border-radius:12px;background:#fff4e0;border:1px solid #f3ddb4;color:#6b4300;font-size:14px;line-height:1.7}
.cn-unknown svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
@media (max-width:759px){
  /* มือถือ: แต่ละแถวของตารางเป็นการ์ดเรียงลง 1D / 2D / PREMIUM ไม่ต้องเลื่อนซ้ายขวา */
  .cn-tbl-wrap{overflow:visible;border:0;background:transparent;border-radius:0}
  .cn-tbl{min-width:0;display:block}
  .cn-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cn-tbl tbody,.cn-tbl tr{display:block}
  .cn-tbl .cn-grp{margin-top:16px}
  .cn-tbl .cn-grp:first-child{margin-top:0}
  .cn-tbl .cn-grp th{display:block;border-radius:12px 12px 0 0;border-bottom:0}
  .cn-tbl tbody tr:not(.cn-grp){background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-top:0}
  .cn-tbl tbody tr:not(.cn-grp):last-child{border-radius:0 0 12px 12px}
  .cn-tbl tbody th[scope=row]{display:block;width:auto;background:#fbfcfe;border-bottom:1px solid var(--sh-ring,#dbe4f2);padding:10px 13px 9px}
  .cn-tbl td{display:block;position:relative;padding:9px 13px 9px 92px;border-bottom:1px dashed var(--sh-ring,#dbe4f2)}
  .cn-tbl td:last-child{border-bottom:0}
  .cn-tbl td::before{position:absolute;left:13px;top:9px;width:70px;font-weight:800;font-size:13.5px;line-height:1.7}
  .cn-tbl td:nth-child(2)::before{content:"1D";color:#1d4ed8}
  .cn-tbl td:nth-child(3)::before{content:"2D";color:#6d28d9}
  .cn-tbl td:nth-child(4)::before{content:"PREMIUM";color:#b45309}
  .cn-pr{white-space:normal}
}

/* ── หัวข้อสั่งซื้อ + ส่วนรายรุ่น ─────────────────────────────────── */
.cn-buy-intro{padding-bottom:6px}
.cn-model{padding:30px 0 34px;border-top:1px solid var(--sh-ring,#dbe4f2)}
.cn-model.cn-m2,.cn-label{background:var(--sh-ice-2,#f6f9fd)}
.cn-model-head{margin-bottom:14px}
.cn-model-tag{display:inline-block;margin-bottom:8px;padding:4px 13px;border-radius:999px;background:var(--mb);color:var(--ma);border:1px solid var(--mc);font-size:12.8px;font-weight:800}
.cn-model-head .sh-h2{margin:0;color:var(--ink)}
.cn-model-head .sh-h2 small{display:block;margin-top:2px;font-size:.62em;font-weight:600;color:var(--ma)}
.cn-model-grid{display:grid;gap:22px;align-items:start}
@media (min-width:900px){ .cn-model-grid{grid-template-columns:1fr minmax(320px,400px);gap:36px} }
.cn-model-lead{margin:0 0 14px;font-size:16px;line-height:1.8;color:var(--ink-2,#2c3a52);max-width:62ch}
.cn-model-tx h3{margin:16px 0 7px;font-size:15px;font-weight:800;color:var(--ma);letter-spacing:.2px}
.cn-model-tx p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-2,#2c3a52)}
.cn-hl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cn-hl li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7;color:var(--ink-2,#2c3a52)}
.cn-hl svg{width:17px;height:17px;flex:0 0 auto;margin-top:5px;color:var(--ma)}
.cn-hl a{font-weight:700}
.cn-warn{padding:11px 14px;border-radius:11px;background:#fff;border:1px dashed var(--mc,#dbe4f2);color:#44526b}
.cn-model-more{margin-top:14px !important;font-weight:700}
.cn-model-more svg{width:16px;height:16px;vertical-align:-3px}
.cn-vid{margin:18px 0 0}
.cn-vid-btn{display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;min-height:56px;padding:12px 20px 12px 16px;border-radius:14px;background:linear-gradient(180deg,#f01a14 0%,#d10000 100%);color:#fff;font-weight:800;font-size:18px;line-height:1.35;text-decoration:none;box-shadow:0 14px 26px -14px rgba(209,0,0,.7)}
.cn-vid-btn:hover{background:linear-gradient(180deg,#d9130e 0%,#b50000 100%);color:#fff}
.cn-vid-btn:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px;color:#fff}
.cn-vid-yt{width:46px;height:32px;flex:0 0 auto;display:block}
.cn-vid-tx{flex:1 1 auto;min-width:0}
.cn-nb{white-space:nowrap}
.cn-vid-chev{width:22px;height:22px;flex:0 0 auto;margin-left:auto}
.cn-model-tx .cn-vid-note{margin-top:8px;font-size:14px;line-height:1.5;color:#5b6a82}
@media (max-width:520px){.cn-vid-btn{gap:12px;padding:12px 14px;font-size:16.5px}.cn-vid-yt{width:42px;height:29px}}
.cn-model-buy .eq-card,.cn-label-buy .eq-card{border:2px solid var(--mc,#dbe4f2);box-shadow:0 18px 38px -28px rgba(15,30,53,.5)}
.cn-model-buy .eq-pic{padding:8px 12px 0;background:var(--mb,#eef3fb)}
.cn-model-buy .eq-price b{color:var(--ma)}
.cn-tag2{background:var(--ma)}
.cn-eq2d .eq-foot{flex-wrap:wrap;gap:10px 12px;align-items:center}
.cn-sm{padding:10px 14px !important;font-size:14px !important}
.cn-eq2d .eq-ask{display:inline-flex}
.eq-card .eq-key{margin-bottom:12px}

/* ── ตัดสินใจ 3 ข้อ ───────────────────────────────────────────────── */
.cn-qs{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:cnq}
.cn-q{display:flex;gap:14px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:16px 18px}
.cn-q-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:#0f1e35;color:#fff;font-weight:800}
.cn-q-t{margin:0 0 8px;font-size:16.5px;font-weight:700;line-height:1.55}
.cn-q-a{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px}
.cn-q-a svg{width:18px;height:18px;color:var(--sh-mut,#5d6b81)}
.cn-q-yes{display:inline-block;padding:2px 12px;border-radius:999px;background:#e9f7ee;color:#136b34;font-weight:800;font-size:13px}
.cn-q-res{display:inline-block;padding:5px 15px;border-radius:999px;background:var(--ma);color:#fff;font-weight:800;font-size:14.5px}
.cn-q-res:hover{text-decoration:none;filter:brightness(1.1)}
.cn-q-note{margin:0;font-size:14px;line-height:1.7;color:var(--sh-mut,#5d6b81)}
.cn-decide-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:13px 15px;border-radius:12px;background:#fff;border:1px dashed #c3d3ea;color:#2c3a52;font-size:14.4px;line-height:1.75}
.cn-decide-note svg{width:20px;height:20px;flex:0 0 auto;margin-top:3px;color:var(--sh-blue,#1d4ed8)}

/* ── ขั้นตอนใช้งาน ────────────────────────────────────────────────── */
.cn-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:860px){ .cn-steps{grid-template-columns:1fr 1fr} }
.cn-st{display:flex;gap:14px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:16px 18px}
.cn-st-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--sh-blue,#1d4ed8);color:#fff;font-weight:800;font-size:17px}
.cn-st h3{margin:0 0 5px;font-size:16.5px;line-height:1.5}
.cn-st p{margin:0;font-size:14.6px;line-height:1.78;color:var(--ink-2,#2c3a52)}
.cn-st .cn-st-ev{margin-top:6px}
.cn-premium-flow{margin-top:30px;padding:20px 18px 22px;border-radius:18px;background:var(--mb,#fdf1e3);border:1px solid var(--mc,#f1d3a8);--ma:#b45309;--mb:#fdf1e3;--mc:#f1d3a8}
.cn-pf-h{margin:0 0 6px;font-size:19px;color:#8a4a06}
.cn-premium-flow .sh-sub{margin-bottom:14px}
.cn-pfs{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){ .cn-pfs{grid-template-columns:repeat(5,1fr)} }
.cn-pf{position:relative;background:#fff;border-radius:14px;padding:14px 14px 15px;border-top:4px solid #b45309}
@media (min-width:640px){ .cn-pf:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:3px solid #b45309;border-right:3px solid #b45309;transform:translateY(-50%) rotate(45deg)} }
.cn-pf-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:#b45309;color:#fff;font-weight:800;font-size:14px;margin-bottom:6px}
.cn-pf h4{margin:0 0 4px;font-size:16px}
.cn-pf p{margin:0;font-size:13.8px;line-height:1.7;color:var(--ink-2,#2c3a52)}

/* ── เดินจด vs เดินยิง ────────────────────────────────────────────── */
.cn-ba{display:grid;gap:12px;align-items:stretch}
@media (min-width:900px){ .cn-ba{grid-template-columns:1fr 54px 1fr} }
.cn-ba-c{background:#fff;border-radius:16px;padding:18px 20px 18px;border:2px solid var(--sh-ring,#dbe4f2)}
.cn-ba-c h3{margin:0 0 10px;font-size:20px}
.cn-ba-c h3 small{font-size:13px;font-weight:600;color:var(--sh-mut,#5d6b81);margin-left:6px}
.cn-ba-c ol{margin:0 0 12px;padding:0 0 0 22px;display:grid;gap:7px;font-size:15px;line-height:1.7}
.cn-ba-no{border-color:#f2c9c5}.cn-ba-no h3{color:#b42318}
.cn-ba-yes{border-color:#b7e1c5}.cn-ba-yes h3{color:#136b34}
.cn-ba-risk,.cn-ba-gain{margin:0;padding:10px 13px;border-radius:10px;font-size:14px;line-height:1.65}
.cn-ba-risk{background:#fdecea;color:#8a1c12}
.cn-ba-gain{background:#e9f7ee;color:#0f5a2b;font-weight:700}
.cn-ba-arrow{display:none;align-items:center;justify-content:center}
.cn-ba-arrow svg{width:38px;height:38px;color:var(--sh-blue,#1d4ed8)}
@media (min-width:900px){ .cn-ba-arrow{display:flex} }
.cn-sub-h{margin:28px 0 10px;font-size:18px}
.cn-save{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:760px){ .cn-save{grid-template-columns:1fr 1fr} }
.cn-save li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:13px;padding:13px 15px}
.cn-save svg{width:18px;height:18px;flex:0 0 auto;margin-top:4px;color:#15803d}
.cn-save b{display:block;font-size:15.4px;line-height:1.5}
.cn-save span{display:block;font-size:14.2px;line-height:1.72;color:var(--ink-2,#2c3a52)}
.cn-honest{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border-radius:11px;background:#fff4e0;border:1px solid #f3ddb4;color:#6b4300;font-size:14px;line-height:1.7}
.cn-honest svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px}
.cn-flow-grid{display:grid;gap:16px;align-items:start}
@media (min-width:900px){ .cn-flow-grid{grid-template-columns:minmax(300px,.8fr) 1.2fr} }
.cn-fig{margin:0;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:14px}
.cn-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.cn-svg-range{max-width:680px}
.cn-svg text{font-family:inherit}
@media (prefers-reduced-motion:no-preference){
  .cn-opt a,.cn-pk{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .cn-hero .cn-ph{animation:cnrise .55s ease both}
  .cn-hero .cn-ph2{animation-delay:.12s}
  @keyframes cnrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ── โปรแกรมที่ใช้ได้ ─────────────────────────────────────────────── */
.cn-progs{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:820px){ .cn-progs{grid-template-columns:1fr 1fr} }
.cn-prog{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-left:5px solid #15803d;border-radius:14px;padding:16px 18px}
.cn-prog-ask{border-left-color:#d4a017}
.cn-prog-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:6px}
.cn-prog h3{margin:0;font-size:17.5px}
.cn-prog-b{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12.4px;font-weight:800;background:#e9f7ee;color:#136b34}
.cn-prog-ask .cn-prog-b{background:#fff4e0;color:#8a5a00}
.cn-prog p{margin:0 0 7px;font-size:14.6px;line-height:1.76;color:var(--ink-2,#2c3a52)}
.cn-prog-src{font-size:13px !important;color:var(--sh-mut,#5d6b81) !important}
.cn-prog-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.4px}
.cn-prog-link svg{width:16px;height:16px}
.cn-excel{margin-top:16px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:16px 20px}
.cn-excel h3{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:17.5px}
.cn-excel h3 svg{width:22px;height:22px;color:#15803d}
.cn-excel ol{margin:0;padding:0 0 0 22px;display:grid;gap:6px;font-size:14.8px;line-height:1.75;color:var(--ink-2,#2c3a52)}

/* ── ใช้กับร้านแบบไหน ────────────────────────────────────────────── */
.cn-ucs{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){ .cn-ucs{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .cn-ucs{grid-template-columns:repeat(3,1fr)} }
.cn-uc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;padding:15px 16px}
.cn-uc h3{margin:0 0 5px;font-size:16.2px;line-height:1.5}
.cn-uc p{margin:0 0 10px;font-size:14px;line-height:1.72;color:var(--ink-2,#2c3a52)}
.cn-uc-r{margin-top:auto;align-self:flex-start;display:inline-block;padding:4px 13px;border-radius:999px;background:var(--mb);color:var(--ma);border:1px solid var(--mc);font-size:13px;font-weight:800}
.cn-uc-r:hover{text-decoration:none;background:var(--ma);color:#fff}

/* ── ฉลากบาร์โค้ด (ตัวเลือกเสริม) ─────────────────────────────────── */
.cn-label{padding:34px 0;border-top:1px solid var(--sh-ring,#dbe4f2)}
.cn-label-head{margin-bottom:14px}
.cn-label-head .cn-model-tag{background:var(--mb,#e6f4f2);color:var(--ma,#0f766e);border-color:var(--mc,#b5dcd7)}
.cn-label-head .sh-h2{margin:0}
.cn-label{--ma:#0f766e;--mb:#e6f4f2;--mc:#b5dcd7}
.cn-label-grid{display:grid;gap:22px;align-items:start}
@media (min-width:900px){ .cn-label-grid{grid-template-columns:1fr minmax(320px,400px);gap:36px} }

/* ── คำถามที่พบบ่อย ─────────────────────────────────────────────── */
.cn-faqs{display:grid;gap:10px;max-width:920px}
.cn-faq{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:13px;overflow:hidden}
.cn-faq summary{display:flex;gap:12px;align-items:center;list-style:none;cursor:pointer;padding:14px 16px}
.cn-faq summary::-webkit-details-marker{display:none}
.cn-faq summary::marker{content:""}
.cn-faq summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:2.5px solid var(--sh-mut,#5d6b81);border-bottom:2.5px solid var(--sh-mut,#5d6b81);transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease}
.cn-faq[open] summary::after{transform:rotate(225deg);margin-top:3px}
.cn-faq summary:focus-visible{outline:3px solid var(--sh-blue,#1d4ed8);outline-offset:-3px;border-radius:13px}
.cn-faq-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:9px;background:var(--sh-ice,#eef3fb);color:var(--sh-blue,#1d4ed8);font-size:13.5px;font-weight:800}
.cn-faq h3{margin:0;font-size:15.8px;font-weight:700;line-height:1.55;color:var(--ink)}
.cn-faq p{margin:0;padding:0 18px 17px 56px;font-size:14.8px;line-height:1.82;color:var(--ink-2,#2c3a52)}
@media (max-width:520px){ .cn-faq p{padding-left:18px} }

/* ── แหล่งข้อมูล + ลิงก์ ──────────────────────────────────────────── */
.cn-src{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;padding:0}
.cn-src summary{cursor:pointer;list-style:none;padding:14px 18px}
.cn-src summary::-webkit-details-marker{display:none}
.cn-src summary h2{display:inline;margin:0;font-size:17px}
.cn-src summary::after{content:" +";font-weight:800;color:var(--sh-blue,#1d4ed8)}
.cn-src[open] summary::after{content:" −"}
.cn-src ul{margin:0;padding:0 20px 18px 38px;display:grid;gap:8px;font-size:14.2px;line-height:1.75;color:var(--ink-2,#2c3a52)}
.cn-links{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cn-links a{display:inline-block;padding:7px 13px;border-radius:999px;background:var(--sh-ice,#eef3fb);border:1px solid var(--sh-ring,#dbe4f2);font-size:13.6px;font-weight:600;color:#27407a}
.cn-links a:hover{text-decoration:none;background:#fff;border-color:var(--sh-blue,#1d4ed8)}

/* ── กันล้นแนวนอนทุกขนาด ──────────────────────────────────────────── */
.cn-hero,.cn-model,.cn-label,.sh-sec{overflow-x:clip}
.cn-tbl-wrap{max-width:100%}
img,svg{max-width:100%}

/* ── ภาพประกอบระยะส่งสัญญาณ (HTML/CSS) ─────────────────────────────── */
.cn-range{display:flex;align-items:center;gap:10px;padding:8px 2px 4px}
.cn-rg-end{flex:0 0 auto;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cn-rg-end span{font-size:12.8px;line-height:1.4;color:var(--sh-mut,#5d6b81)}
.cn-rg-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding-bottom:16px}
.cn-rg-mid b{font-size:clamp(16px,4.4vw,21px);color:#101a2c;line-height:1.35}
.cn-rg-mid span{font-size:13px;color:var(--sh-mut,#5d6b81);line-height:1.5}
.cn-rg-line{position:relative;display:block;width:100%;height:2px;margin-top:12px;background:#1d4ed8;border-radius:2px}
.cn-rg-line::before,.cn-rg-line::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-top:3px solid #1d4ed8;border-right:3px solid #1d4ed8}
.cn-rg-line::before{left:0;transform:translateY(-50%) rotate(-135deg)}
.cn-rg-line::after{right:0;transform:translateY(-50%) rotate(45deg)}
.cn-rg-note{margin:6px 0 0;padding:9px 12px;border-radius:10px;background:#fff4e0;border:1px solid #f3ddb4;color:#6b4300;font-size:13.6px;line-height:1.65}

/* แท็บเล็ต: การ์ดอ่านรหัสได้เรียงข้อความใต้ภาพ ไม่ให้แคบ */
@media (min-width:760px) and (max-width:1099px){
  .cn-rd-row{flex-direction:column;align-items:flex-start;gap:7px}
}