/* ══════════════════════════════════════════════════════════════════════
   pos.css — ศูนย์รวมอุปกรณ์ POS (pos-equipment.html · pos-dual-screen.html) · แคตตาล็อก/เทียบเครื่องสแกน
   ใช้คู่กับ shop.css / equip.css / printer.css / monitor.css (ตัวกรองและตารางเทียบใช้โครงเดียวกับแคตตาล็อกจอ)
   ══════════════════════════════════════════════════════════════════════ */

/* ── หัวหน้า Hub ───────────────────────────────────────────────── */
.ph-hero{background:linear-gradient(180deg,var(--sh-ice,#eef3fb) 0%,#fff 100%);padding:34px 0 26px;overflow:hidden}
.ph-hero-in{display:grid;gap:18px;align-items:center}
.ph-hero h1{margin:6px 0 8px;font-size:clamp(28px,6.4vw,44px);line-height:1.18;letter-spacing:.2px;color:var(--sh-navy,#0f1e35)}
.ph-sub{margin:0 0 10px;font-size:clamp(15.5px,3.6vw,19px);font-weight:700;color:var(--sh-blue,#1d4ed8);line-height:1.6}
.ph-sub i{font-style:normal;color:#9fb3d1;margin:0 3px}
.ph-lede{margin:0 0 16px;max-width:620px;font-size:16px;line-height:1.75;color:var(--ink-2,#2c3a52)}
.ph-hero .sh-btns{display:flex;flex-wrap:wrap;gap:10px}
.sh-btn.ph-main{background:var(--sh-blue,#1d4ed8);color:#fff;border-color:var(--sh-blue,#1d4ed8)}
.sh-btn.ph-main:hover{background:#1a45c0;color:#fff;text-decoration:none}
.ph-hero-pic{display:flex;justify-content:center}
.ph-hero-pic img{width:min(78vw,420px);height:auto;display:block;filter:drop-shadow(0 18px 24px rgba(15,30,53,.14))}
.ph-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.ph-trust li{display:flex;align-items:flex-start;gap:6px;font-size:14px;color:var(--ink-2,#2c3a52);line-height:1.5}
.ph-trust svg{flex:0 0 17px;width:17px;height:17px;color:#15803d;margin-top:2px}
@media (min-width:900px){
  .ph-hero{padding:48px 0 34px}
  .ph-hero-in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}

/* ── การ์ดหมวด ─────────────────────────────────────────────────── */
.ph-grid{display:grid;gap:14px;margin-top:20px;grid-template-columns:1fr}
@media (min-width:560px){ .ph-grid{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .ph-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .ph-grid{grid-template-columns:repeat(4,1fr)} }
.ph-card{position:relative;display:flex;flex-direction:row;gap:14px;align-items:center;background:#fff;
  border:1px solid var(--sh-ring,#dbe4f2);border-radius:16px;padding:12px;color:var(--ink,#101a2c);
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.ph-card:hover{text-decoration:none;border-color:#9fbbe6;box-shadow:0 10px 26px -18px rgba(16,26,44,.45);transform:translateY(-1px)}
.ph-card:focus-visible{outline:3px solid #93b4f5;outline-offset:2px}
.ph-pic{position:relative;flex:0 0 108px;width:108px;height:108px;border-radius:12px;background:#f7f9fc;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ph-pic img{width:100%;height:100%;object-fit:contain;display:block}
.ph-badge{position:absolute;left:6px;bottom:6px;background:#1d4ed8;color:#fff;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:2px 8px;line-height:1.5}
.ph-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ph-h{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--sh-navy,#0f1e35)}
.ph-d{font-size:13.6px;line-height:1.55;color:var(--sh-mut,#5d6b81)}
.ph-meta{font-size:13.6px;font-weight:700;color:var(--ink-2,#2c3a52);margin-top:2px}
.ph-go{display:inline-flex;align-items:center;gap:5px;font-size:13.6px;font-weight:700;color:var(--sh-blue,#1d4ed8);margin-top:2px}
.ph-go svg{width:15px;height:15px}
@media (min-width:900px){
  .ph-card{flex-direction:column;align-items:stretch;padding:14px}
  .ph-pic{flex:none;width:100%;height:auto;aspect-ratio:4/3}
  .ph-pic img{width:78%;height:auto;max-height:92%}
}

/* ── ลิงก์หมวดใกล้เคียง ────────────────────────────────────────── */
.ph-more{display:grid;gap:10px;margin-top:16px;grid-template-columns:1fr}
@media (min-width:760px){ .ph-more{grid-template-columns:repeat(3,1fr)} }
.ph-more a{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);
  border-radius:14px;padding:14px 16px;color:var(--ink,#101a2c);text-decoration:none}
.ph-more a:hover{border-color:#9fbbe6;text-decoration:none}
.ph-more b{font-size:15.5px;color:var(--sh-blue,#1d4ed8)}
.ph-more span{font-size:13.6px;color:var(--sh-mut,#5d6b81);line-height:1.55}

/* ── แคตตาล็อกเครื่องสแกน ──────────────────────────────────────── */
#prGrid .eq-card[hidden]{display:none}
.ps-wrap .sh-h2{margin-top:0}
.ps-wrap .sh-sub a{font-weight:700}
.ps-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.ps-chips span{font-size:12.4px;font-weight:700;line-height:1.5;padding:2px 9px;border-radius:999px;
  background:var(--sh-ice,#eef3fb);color:#1e3a6e}
.ps-cmp-tog{display:none;align-items:center;gap:8px;margin:10px 0 0;padding:8px 11px;border:1px dashed #b9cbe6;
  border-radius:10px;font-size:14px;font-weight:700;color:#1e3a6e;cursor:pointer;min-height:40px;box-sizing:border-box}
.ps-js .ps-cmp-tog{display:flex}
.ps-cmp-tog input{width:18px;height:18px;margin:0;accent-color:#1d4ed8}
.ps-cmp-tog.is-on{border-style:solid;border-color:#1d4ed8;background:#eef3ff}

.ps-tray{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--sh-ring,#dbe4f2);box-shadow:0 -8px 24px -18px rgba(16,26,44,.5)}
.ps-tray[hidden]{display:none}
.ps-tray-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:10px;justify-content:space-between}
.ps-tray-t{margin:0;display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.45}
.ps-tray-t span{color:var(--sh-mut,#5d6b81);font-size:12.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-tray-t em{font-style:normal;color:#b45309;font-size:12.8px;font-weight:700}
.ps-tray-act{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ps-tray-x{border:1px solid var(--sh-ring,#dbe4f2);background:#fff;border-radius:10px;padding:9px 12px;font:inherit;
  font-size:14px;cursor:pointer;min-height:42px}
.ps-tray-go{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:10px;background:#1d4ed8;
  color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.ps-tray-go:hover{background:#1a45c0;color:#fff;text-decoration:none}
.ps-tray-need{font-size:13.6px;color:var(--sh-mut,#5d6b81);font-weight:700}

/* ── หน้าเทียบเครื่องสแกน ──────────────────────────────────────── */
.ps-pick-h{margin:0 0 10px;font-size:18px}
.ps-pick-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media (min-width:760px){ .ps-pick-list{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1100px){ .ps-pick-list{grid-template-columns:repeat(7,1fr)} }
.ps-pick-b{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  background:#fff;border:1.5px solid var(--sh-ring,#dbe4f2);border-radius:12px;padding:10px 8px;font:inherit;
  color:var(--ink,#101a2c);cursor:pointer;min-height:44px}
.ps-pick-b:hover{border-color:#9fbbe6}
.ps-pick-b img{width:64px;height:64px;object-fit:contain}
.ps-pick-b span{display:flex;flex-direction:column;line-height:1.35}
.ps-pick-b small{font-size:12px;color:var(--sh-mut,#5d6b81)}
.ps-pick-b b{font-size:14.4px}
.ps-pick-b i{font-style:normal;font-size:13.2px;font-weight:700;color:var(--sh-blue,#1d4ed8)}
.ps-pick-b em{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:6px;border:1.5px solid #b9cbe6;background:#fff}
.ps-pick-b.is-on{border-color:#1d4ed8;background:#eef3ff;box-shadow:0 0 0 2px rgba(29,78,216,.18)}
.ps-pick-b.is-on em{background:#1d4ed8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat;border-color:#1d4ed8}
.ps-nojs{margin:0;padding-left:20px;line-height:1.9}
.ps-cmp .ps-cmp-brand{display:block;font-size:12px;color:var(--sh-mut,#5d6b81);font-weight:600}
.ps-cmp .ps-cmp-name{display:block;font-size:12.4px;font-weight:500;color:var(--sh-mut,#5d6b81);line-height:1.45;margin:2px 0}
.ps-cmp td.ps-buy{vertical-align:top}
.ps-cmp td.ps-buy form{margin:0}
.ps-cmp td.ps-buy .ck-add,.ps-cmp td.ps-buy .eq-ask{width:100%;justify-content:center;box-sizing:border-box}
.ps-buy-more{display:block;margin-top:8px;font-size:13.4px;font-weight:600}
.ps-cmp .pr-cmp-x{min-height:36px;padding-top:6px;padding-bottom:6px}
/* pos-enrich: ส่วน "ทำไมเลือกซื้อกับ BK Rent Group" + แหล่งข้อมูลสเปก ในหน้าสินค้า */
.pe-sec .pe-why{margin:14px 0 18px}
.pe-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.pe-btns .sh-btn{min-height:44px}
.pe-src{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.7;color:var(--sh-mut,#5d6b81)}
.pe-src summary{cursor:pointer;font-weight:600;color:var(--ink,#101a2c);min-height:32px;display:list-item}
.pe-src p{margin:8px 0}
.pe-src ul{margin:0;padding-left:20px}
.pe-src a{overflow-wrap:anywhere}
/* DELI Brand Hub + ลิงก์ไขว้ ยี่ห้อ/หมวด/เทียบรุ่น */
.pe-dhero{padding-bottom:22px}
.pe-dh1{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:6px 0 10px}
.pe-dh1 img{display:block;max-width:60vw}
.pe-dh1 span{font-size:inherit}
.pe-dcats{display:grid;gap:12px;margin-top:16px;grid-template-columns:1fr}
@media (min-width:640px){ .pe-dcats{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .pe-dcats{grid-template-columns:repeat(4,1fr)} }
.pe-dcat{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.pe-dcat-main{display:flex;flex-direction:column;gap:4px;color:var(--ink,#101a2c);min-height:44px}
.pe-dcat-main:hover{text-decoration:none}
.pe-dcat-main b{font-size:16.5px;line-height:1.4}
.pe-dcat-main span{font-size:14px;color:var(--sh-mut,#5d6b81)}
.pe-dcat-links{margin:0;font-size:14px;line-height:1.9}
.pe-dcat-links a{display:inline-block;min-height:32px;font-weight:600}
.pe-dnote{margin:16px 0 0;font-size:14.5px;color:var(--sh-mut,#5d6b81)}
.pe-brands{display:grid;gap:12px;margin:14px 0 6px;grid-template-columns:1fr}
@media (min-width:700px){ .pe-brands{grid-template-columns:1fr 1fr} }
.pe-brand-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;
  padding:16px 18px;color:var(--ink,#101a2c);min-height:64px}
.pe-brand-card:hover{text-decoration:none;border-color:#9fbbe6;box-shadow:0 10px 26px -18px rgba(16,26,44,.45)}
.pe-brand-card img{flex:0 0 auto}
.pe-brand-card span{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.pe-brand-card em{font-style:normal;font-size:13.6px;color:var(--sh-mut,#5d6b81)}
.pe-h2-gap{margin-top:28px}
.pe-xls{padding-top:18px;padding-bottom:18px}
.pe-xls-top{padding-top:14px;padding-bottom:4px}
.pe-xl-row{display:grid;gap:10px;grid-template-columns:1fr;margin-top:10px}
@media (min-width:700px){ .pe-xl-row{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} }
.pe-xl{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:12px;
  padding:12px 14px;color:var(--ink,#101a2c);min-height:56px}
.pe-xl:hover{text-decoration:none;border-color:#9fbbe6}
.pe-xl span{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.4;min-width:0}
.pe-xl small{font-size:12px;color:var(--sh-mut,#5d6b81);font-weight:600}
.pe-xl b{font-size:15px}
.pe-xl em{font-style:normal;font-size:13px;color:var(--sh-mut,#5d6b81)}
.pe-xl svg{flex:0 0 18px;width:18px;height:18px;color:var(--sh-blue,#1d4ed8)}
.pe-xl img{flex:0 0 auto}
.pe-brand-a{font-weight:700}
.pe-cmp-more{margin:18px 0 0;font-size:14.5px;line-height:1.9}
.pe-cmp-more a{font-weight:600}
/* แคตตาล็อก DELI: Service Pack · การ์ด DELI เพิ่มในหน้าหมวดเดิม */
.pe-svps{display:grid;gap:12px;margin-top:14px;grid-template-columns:1fr}
@media (min-width:700px){ .pe-svps{grid-template-columns:1fr 1fr} }
.pe-svp{background:#fff;border:1px solid var(--sh-ring,#dbe4f2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.pe-svp-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pe-svp-t b{font-size:16px}
.pe-svp-t small{color:var(--sh-mut,#5d6b81);font-size:13px}
.pe-svp-m{margin:0;font-size:14.5px;line-height:1.6}
.pe-svp-p{margin:2px 0 4px;font-size:15px}
.pe-svp-p b{font-size:20px}
.pe-svp-p small{color:var(--sh-mut,#5d6b81);font-size:12.5px}
.pe-svp .sp-pricebox{margin:0}
.pe-svp .ck-add,.pe-svp .eq-ask{min-height:44px}
.pe-dx .eq-grid{margin-top:14px}