/* posset.css — หน้า pos-set-16900.html "ชุดคอมพิวเตอร์ POS พร้อมใช้งาน 16,900 บาท" (2026-10-13)
   HTML สร้างจาก notes/pos-set-page/make_pos_set_page.py · คลาส pc1- ใช้เฉพาะหน้านี้
   เคลื่อนไหวด้วย transform/opacity · ลอยเฉพาะตอนส่วนนั้นอยู่ในจอ (.is-live) · ปิดทั้งหมดเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว */
.pc1{--pc-blue:#1d55e0;--pc-blue2:#2f7bf5;--pc-navy:#0b1f4d;--pc-ink:#1b2a4a;--pc-mut:#53627e;--pc-line:#dce6f5;--pc-or:#f26419;--pc-tint:#eef5ff;
  color:var(--pc-ink);overflow:hidden}
.pc1-nw,#pc1 .pc1-nw{white-space:nowrap;display:inline}   /* คำที่ห้ามตัดกลาง: คงอยู่ในบรรทัดเดียวกับข้อความรอบข้าง แม้อยู่ใน span ที่ถูกตั้งเป็น block */
.pc1-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.pc1 svg{flex:0 0 auto}
.pc1 .st-out{display:none}

/* ---------- ปุ่ม ---------- */
.pc1-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 24px;border:0;border-radius:16px;font:inherit;
  font-size:19px;font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.pc1-btn svg{width:22px;height:22px}
.pc1-btn:hover{text-decoration:none}
.pc1-btn-buy{color:#fff;background:linear-gradient(135deg,#f26419 0%,#e4560f 55%,#cc4a0c 100%);box-shadow:0 16px 28px -16px rgba(204,74,12,.9)}
.pc1-btn-quote{color:var(--pc-blue);background:#fff;box-shadow:inset 0 0 0 2px #bcd3fb,0 12px 22px -18px rgba(29,85,224,.6)}
.pc1-btn-line{color:#fff;background:#057a38;box-shadow:0 14px 24px -16px #057a38}
.pc1-btn-line svg{width:24px;height:24px}
.pc1-btn-tel{color:#fff;background:linear-gradient(135deg,#2f7bf5,#1742c4)}
@media (hover:hover){
  .pc1-btn:hover{transform:translateY(-2px);filter:brightness(.94)}
  .pc1-btn-buy:hover{box-shadow:0 22px 34px -16px rgba(204,74,12,.95)}
  .pc1-btn-quote:hover{filter:none;background:#f3f8ff}
}
.pc1-btn:active{transform:translateY(0) scale(.99)}
.pc1-btn:focus-visible,.pc1 a:focus-visible,.pc1 summary:focus-visible,.pc1 button:focus-visible,.pc1-chat-body:focus-visible{outline:3px solid #0b1f4d;outline-offset:3px}
.pc1-end .pc1-btn:focus-visible,.pc1-end a:focus-visible{outline-color:#fff}
.pc1-out{flex-basis:100%;margin:6px 0 0;font-size:14.5px;color:var(--pc-mut)}

/* ---------- หัวข้อส่วน ---------- */
.pc1-sec{padding:86px 0}
.pc1-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-size:14.5px;font-weight:800;letter-spacing:.05em;color:var(--pc-blue)}
.pc1-kicker::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--pc-or)}
.pc1-h2{margin:0 0 10px;font-size:clamp(28px,3vw,46px);line-height:1.2;font-weight:800;color:var(--pc-navy);letter-spacing:-.01em}
.pc1-h2>span{display:block;color:var(--pc-blue)}
.pc1-h2sub{margin:0 0 30px;font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--pc-mut);max-width:720px}
.pc1-h2sub a{font-weight:700}
.pc1-fine{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--pc-mut)}

/* ---------- HERO ---------- */
.pc1-hero{position:relative;padding:40px 0 64px;background:
  radial-gradient(800px 460px at 85% 20%,rgba(147,197,253,.38),rgba(147,197,253,0) 70%),
  radial-gradient(560px 380px at 0% 100%,rgba(254,215,170,.35),rgba(254,215,170,0) 70%),
  linear-gradient(180deg,#f6f9ff 0%,#eaf2ff 100%)}
.pc1-hero-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px;align-items:center}
.pc1-badge-top{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 18px 8px 14px;border-radius:999px;color:#fff;font-size:15px;font-weight:800;
  background:linear-gradient(135deg,#cf2a2f,#b91c1c);box-shadow:0 12px 22px -12px rgba(185,28,28,.8)}
.pc1-badge-top svg{width:18px;height:18px;color:#fde68a}
.pc1-hero h1{margin:0 0 14px;font-size:clamp(34px,3.8vw,58px);line-height:1.12;font-weight:800;color:var(--pc-navy);letter-spacing:-.015em}
.pc1-hero h1>span{display:block;background:linear-gradient(100deg,#1747d6,#2563eb 60%,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc1-price{position:relative;overflow:hidden;display:inline-grid;margin:0 0 16px;padding:10px 26px 12px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,#f26419 0%,#e4560f 55%,#cc4a0c 100%);box-shadow:0 20px 34px -18px rgba(204,74,12,.9)}
.pc1-price small{font-size:19px;font-weight:800;line-height:1.2}
.pc1-price-n{font-size:clamp(24px,2.2vw,34px);font-weight:800;line-height:1;white-space:nowrap}
.pc1-price-n b{font-size:clamp(52px,5.4vw,84px);letter-spacing:-.01em}
.pc1-price::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-160%) skewX(-16deg)}
.pc1-lead{margin:0 0 6px;font-size:clamp(19px,1.7vw,26px);line-height:1.4;font-weight:800;color:#0f1d3a}
.pc1-sub{margin:0 0 18px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.65;color:var(--pc-mut);max-width:600px}
.pc1-hl{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 12px}
.pc1-hl li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border-radius:14px;background:#fff;font-size:15.5px;font-weight:700;color:var(--pc-navy);
  box-shadow:0 10px 22px -18px rgba(16,48,120,.7),inset 0 0 0 1px #dbe6f8}
.pc1-hl svg{width:22px;height:22px;padding:4px;box-sizing:content-box;border-radius:9px;background:var(--pc-tint);color:var(--pc-blue)}
.pc1-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pc1-cta .pc1-btn-buy{min-width:0}
.pc1-howto{margin:14px 0 0;font-size:14.5px;color:var(--pc-mut)}
.pc1-howto a{font-weight:700}
.pc1-hero-art{position:relative;min-width:0}

/* ภาพชุดสินค้า (รูปจริงตัดพื้นหลัง จัดวางแบบโปสเตอร์) */
.pc1-stage{position:relative;aspect-ratio:600/530;margin:0 -8px 0 0}
.pc1-it{position:absolute;left:var(--l);top:var(--t);width:var(--w);z-index:var(--z,2)}
.pc1-f{position:relative}
.pc1-f>img{display:block;width:100%;height:auto}
.pc1-it-drawer{--l:47%;--t:41%;--w:40%;--z:1}
.pc1-it-wired{--l:75%;--t:27%;--w:13.5%;--z:1}
.pc1-it-core{--l:1%;--t:0%;--w:72%;--z:2}
.pc1-it-printer{--l:0%;--t:54%;--w:26%;--z:3}
.pc1-it-wireless{--l:85.5%;--t:39%;--w:13.5%;--z:4}
.pc1-it-wireless img{transform:scaleX(-1)}
.pc1-it-box{--l:22%;--t:72%;--w:13%;--z:5}
.pc1-it-rolls{--l:56%;--t:66%;--w:18%;--z:5}
.pc1-glow{position:absolute;left:6%;right:2%;bottom:3%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(37,99,235,.22),rgba(37,99,235,0));filter:blur(4px)}
.pc1-badge{position:absolute;z-index:7;display:grid;place-items:center;align-content:center;text-align:center;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 35% 30%,#f26419,#dd4f0e 58%,#c2410c);border:4px solid #fff;box-shadow:0 16px 26px -14px rgba(194,65,12,.85)}
.pc1-badge b{font-size:clamp(24px,2.3vw,36px);line-height:1;font-weight:800}
.pc1-badge sup{font-size:.6em;vertical-align:.35em}
.pc1-badge small{font-size:clamp(11px,.8vw,12.5px);line-height:1.15;font-weight:700}
.pc1-b19{left:63%;top:-1%;width:clamp(84px,7.6vw,118px);aspect-ratio:1}
.pc1-tag{position:absolute;z-index:7;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;white-space:nowrap;font-size:13.5px;font-weight:800;
  background:#fff;box-shadow:0 12px 22px -14px rgba(16,48,120,.6),0 0 0 1px rgba(16,48,120,.06)}
.pc1-tag svg{width:16px;height:16px;padding:2px;border-radius:50%;color:#fff}
.pc1-tag-ready{left:0;top:40%;color:#15803d}.pc1-tag-ready svg{background:#16a34a}
.pc1-tag-gift{left:62%;top:88%;color:#d61f2b}.pc1-tag-gift svg{background:#e3262e}
.pc1-cap{position:absolute;z-index:7;left:0;bottom:-8px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:#53627e;font-size:12px;font-weight:600;
  line-height:1.35;white-space:nowrap;box-shadow:0 0 0 1px rgba(16,48,120,.08)}
/* หน้าจอขายตัวอย่างบนจอ 19 นิ้ว (posset.js บิดให้พอดีกรอบจอ · ไม่มี JS = เห็นภาพเดิมของจอ) */
.pc1-scr{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden}
.pc1-scr.is-ok{visibility:visible}
.pc1-ps{position:absolute;left:0;top:0;width:480px;height:320px;transform-origin:0 0;overflow:hidden;display:grid;grid-template-columns:50px minmax(0,1fr) 124px;
  grid-template-rows:30px minmax(0,1fr);background:#eef3fb;backface-visibility:hidden}
.pc1-ps-bar{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:0 12px;background:linear-gradient(90deg,#1546c9,#2563eb)}
.pc1-ps-bar b{flex:1 1 auto;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em}
.pc1-ps-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.pc1-ps-side{display:grid;align-content:start;gap:9px;padding:11px 0;justify-items:center;background:#fff;border-right:1px solid #dbe5f5}
.pc1-ps-side u{display:block;width:24px;height:22px;border-radius:7px;background:#dce7f8}
.pc1-ps-side u:first-child{background:#2563eb}
.pc1-ps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;padding:10px}
.pc1-ps-t{display:grid;justify-items:center;align-content:center;gap:4px;border-radius:9px;background:#fff;box-shadow:0 2px 6px -3px rgba(30,60,120,.35)}
.pc1-ps-t b{width:26px;height:26px;border-radius:50%;background:var(--c);opacity:.88;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.pc1-ps-t u{display:block;width:62%;height:5px;border-radius:3px;background:#dfe6f2}
.pc1-ps-t u:last-child{width:38%;background:#bcd0f4}
.pc1-ps-cart{display:grid;align-content:start;gap:8px;padding:10px;background:#fff;border-left:1px solid #dbe5f5}
.pc1-ps-ch{display:block;height:9px;width:62%;border-radius:4px;background:#1d4ed8;opacity:.85}
.pc1-ps-l{display:flex;justify-content:space-between;gap:8px}
.pc1-ps-l u{display:block;height:6px;width:58%;border-radius:3px;background:#dfe6f2}
.pc1-ps-l u:last-child{width:24%;background:#c7d6f2}
.pc1-ps-sum{display:block;height:34px;margin-top:6px;border-radius:8px;background:linear-gradient(90deg,#e8f0ff,#d8e6ff)}
.pc1-ps-pay{display:block;height:28px;border-radius:8px;background:linear-gradient(90deg,#22c55e,#16a34a)}
/* กล่องโปรแกรม + USB · กระดาษม้วน (วาดด้วย CSS) */
.pc1-box{position:relative;display:block;width:100%;aspect-ratio:.8;transform:perspective(500px) rotateY(18deg)}
.pc1-box-f{position:absolute;inset:0;display:grid;align-content:end;gap:1px;padding:12% 10%;border-radius:5px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#1e293b 0%,#0f172a 60%,#111827 100%);box-shadow:0 18px 22px -16px rgba(5,10,30,.8)}
.pc1-box-f::before{content:"";position:absolute;left:-30%;right:-30%;top:34%;height:28%;background:linear-gradient(100deg,#1d4ed8,#3b82f6);transform:skewY(-12deg)}
.pc1-box-f b,.pc1-box-f small{position:relative}
.pc1-box-f b{font-size:clamp(7px,.72vw,11px);font-weight:800;line-height:1.1}
.pc1-box-f small{font-size:clamp(6px,.6vw,9px);opacity:.8}
.pc1-box-f i{position:absolute;right:9%;top:10%;width:26%;color:#fff;opacity:.92}
.pc1-box-f i svg{display:block;width:100%;height:auto}
.pc1-box-s{position:absolute;top:3%;bottom:-3%;left:100%;width:14%;transform-origin:left;transform:skewY(-30deg);background:linear-gradient(180deg,#334155,#0b1220);border-radius:0 3px 3px 0}
.pc1-usb{position:absolute;left:62%;bottom:-6%;display:grid;place-items:center;width:78%;height:20%;border-radius:6px 9px 9px 6px;
  background:linear-gradient(180deg,#2b2f38,#0e1116);color:#cbd5e1;transform:rotate(-14deg);box-shadow:0 10px 14px -10px rgba(0,0,0,.8)}
.pc1-usb::before{content:"";position:absolute;left:-16%;top:22%;width:18%;height:56%;border-radius:2px;background:linear-gradient(180deg,#e5e7eb,#9ca3af)}
.pc1-usb b{font-size:clamp(5px,.42vw,7px);letter-spacing:.06em;font-weight:700;white-space:nowrap}
.pc1-it-rolls .pc1-f,.pc1-css-rolls{display:flex;align-items:flex-end;gap:2%}
.pc1-roll{position:relative;display:block;width:49%;aspect-ratio:.86;border-radius:50%/14%;
  background:linear-gradient(90deg,#e7edf5 0%,#ffffff 30%,#f6f9fc 60%,#dfe6ef 100%);box-shadow:0 14px 16px -12px rgba(15,30,60,.55)}
.pc1-roll::before{content:"";position:absolute;left:0;right:0;top:0;height:28%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#c49a63 0 15%,#e9d3ad 16% 22%,#f4f7fb 24%);box-shadow:inset 0 -2px 3px rgba(15,30,60,.12)}
.pc1-roll2{width:43%;transform:translateY(8%)}

/* ---------- ในกล่อง ---------- */
.pc1-box-sec{background:#fff}
.pc1-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pc1-card{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#fff;overflow:hidden;
  box-shadow:0 22px 40px -34px rgba(16,48,120,.6),inset 0 0 0 1px #dfe8f7;transition:transform .22s ease,box-shadow .22s ease}
.pc1-card-wide{grid-column:span 2}
@media (hover:hover){.pc1-card:hover{transform:translateY(-4px);box-shadow:0 28px 46px -32px rgba(29,85,224,.55),inset 0 0 0 1px #c3d6f6}}
.pc1-num{position:absolute;z-index:2;left:14px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-weight:800;font-size:15px;
  background:linear-gradient(160deg,#3b82f6,#1d4ed8);box-shadow:0 8px 14px -8px #1d4ed8}
.pc1-card-pic{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(180deg,#f6f9ff,#edf3fd)}
.pc1-card-wide .pc1-card-pic{aspect-ratio:8/3}
.pc1-card-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9% 10%;box-sizing:border-box}
.pc1-card:nth-child(3) .pc1-card-pic img{transform:scaleX(-1)}   /* สแกนเนอร์ไร้สายหันอีกทาง ไม่ให้ดูเป็นรูปซ้ำ */
.pc1-card-wide .pc1-card-pic img{padding:4% 14%}
.pc1-card-css{display:flex;align-items:flex-end;justify-content:center;width:44%;margin:0 auto}
.pc1-card-css.pc1-css-box{position:relative;width:28%;margin:0 auto;transform:translateX(-18%)}
.pc1-css-box .pc1-box-f b{font-size:clamp(9px,.9vw,13px)}.pc1-css-box .pc1-box-f small{font-size:clamp(7px,.7vw,10px)}.pc1-css-box .pc1-usb b{font-size:8px}
.pc1-card-tx{display:grid;gap:6px;padding:16px 18px 20px}
.pc1-card-tx b{font-size:clamp(17px,1.3vw,20px);line-height:1.3;color:var(--pc-navy)}
.pc1-card-tx>span{font-size:15px;line-height:1.55;color:var(--pc-mut)}
.pc1-card-tx .pc1-free{color:#d61f2b}
.pc1-note{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--pc-mut)}

/* ---------- ขั้นตอน (พร้อมขาย / จัดส่ง / หลังรับของ) ---------- */
.pc1-ready{background:linear-gradient(180deg,#f4f8ff,#eef4ff)}
.pc1-ready-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.pc1-flow{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px}
.pc1-flow::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:4px;border-radius:2px;background:#dbe6f8}
.pc1-flow::after{content:"";position:absolute;left:8%;right:8%;top:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,#2f7bf5,#1d55e0);
  transform-origin:left;transform:scaleX(var(--fill,1))}
.pc1-st{position:relative;z-index:1;display:grid;justify-items:center;gap:10px;text-align:center}
.pc1-ic{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;color:var(--pc-blue);background:#fff;
  box-shadow:0 14px 26px -18px rgba(16,48,120,.7),inset 0 0 0 1.5px #c9dbf7;transition:background-color .4s ease,color .4s ease,transform .4s ease}
.pc1-ic svg{width:32px;height:32px}
.pc1-st b{font-size:15.5px;line-height:1.35;color:var(--pc-navy)}
.pc1-flow-ship{--n:6}

/* ---------- ความสามารถโปรแกรม ---------- */
.pc1-soft{background:#fff}
.pc1-soft-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:30px;align-items:start;margin-top:28px}
.pc1-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pc1-feat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:start;align-content:start;padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,#fff,#f7faff);
  box-shadow:inset 0 0 0 1px #dfe8f7}
.pc1-feat-ic{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:linear-gradient(160deg,#4f8ff7,#1d4ed8);
  box-shadow:0 10px 18px -10px #1d4ed8}
.pc1-feat-ic svg{width:24px;height:24px}
.pc1-feat b{font-size:17px;line-height:1.35;color:var(--pc-navy)}
.pc1-feat>span:last-child{font-size:15px;line-height:1.55;color:var(--pc-mut)}
.pc1-clip{display:grid;gap:10px;position:sticky;top:130px}
.pc1-clip-a{position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:0 24px 44px -30px rgba(16,48,120,.7)}
.pc1-clip-a img{display:block;width:100%;height:auto}
.pc1-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:46px;border-radius:14px;background:#ff0033;color:#fff;
  transform:translate(-50%,-50%);box-shadow:0 10px 20px rgba(0,0,0,.35);transition:transform .2s ease}
.pc1-play svg{width:28px;height:28px}
@media (hover:hover){.pc1-clip-a:hover .pc1-play{transform:translate(-50%,-50%) scale(1.08)}}
.pc1-clip p{margin:0;font-size:15px;line-height:1.55;color:var(--pc-mut)}
.pc1-clip p b{display:block;font-size:17px;color:var(--pc-navy)}
.pc1-clip-more a{font-weight:700}

/* ---------- เหมาะกับร้าน ---------- */
.pc1-shops{background:linear-gradient(180deg,#f7faff,#eef4ff)}
.pc1-shop{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.pc1-shop li{display:grid;justify-items:center;align-content:start;gap:12px;padding:20px 12px;border-radius:20px;background:#fff;text-align:center;
  box-shadow:0 18px 32px -28px rgba(16,48,120,.6),inset 0 0 0 1px #dfe8f7}
.pc1-shop-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:var(--pc-blue);background:var(--pc-tint)}
.pc1-shop-ic svg{width:30px;height:30px}
.pc1-shop b{font-size:15.5px;line-height:1.4;color:var(--pc-navy)}

/* ---------- แชต ---------- */
.pc1-chat-sec{background:linear-gradient(180deg,#f6f9ff 0%,#eef4ff 100%)}
.pc1-chat-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.pc1-chat-pts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.pc1-chat-pts li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--pc-navy)}
.pc1-chat-pts svg{width:22px;height:22px;padding:3px;border-radius:50%;color:#fff;background:#16a34a}
.pc1-chat-card{justify-self:center;width:100%;max-width:480px;margin:0;border-radius:30px;overflow:hidden;background:#fff;border:1px solid #d9e4f5;box-shadow:0 44px 80px -44px rgba(11,31,68,.75)}
.pc1-chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(90deg,#0b1f44,#1d4ed8);color:#fff}
.pc1-chat-head>div{flex:1 1 auto}.pc1-chat-head b{display:block;font-size:16px}
.pc1-chat-skip{flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.pc1-chat-skip:hover{background:rgba(255,255,255,.22)}.pc1-chat-head small{display:flex;align-items:center;gap:6px;font-size:12.5px;opacity:.9}
.pc1-chat-head i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.pc1-av{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pc-blue);color:#fff;font-size:11px;font-weight:800}
.pc1-av-lg{width:42px;height:42px;font-size:14px;background:#fff;color:var(--pc-blue)}
.pc1-chat-body{display:flex;flex-direction:column;gap:10px;height:560px;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px;background:linear-gradient(180deg,#f3f7fd,#eef3fb);scrollbar-width:thin}
.pc1-msg{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.pc1-msg p{margin:0;padding:10px 14px;font-size:15px;line-height:1.55;border-radius:18px}
.pc1-msg-c{align-self:flex-end;flex-direction:column;align-items:flex-end;gap:3px}.pc1-msg-c p{background:#057a38;color:#fff;border-bottom-right-radius:6px}
.pc1-msg-b{align-self:flex-start}.pc1-msg-b p{background:#fff;color:var(--pc-ink);border:1px solid var(--pc-line);border-bottom-left-radius:6px}
.pc1-msg-b+.pc1-msg-b .pc1-av{visibility:hidden}
.pc1-read{font-size:11px;color:#56657f;padding-right:4px}
.pc1-chat-foot{padding:10px 16px;text-align:center;border-top:1px solid var(--pc-line);background:#fff;font-size:12.5px;color:var(--pc-mut)}
.pc1-chat-anim .pc1-chat-body .pc1-msg{display:none;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.pc1-chat-anim .pc1-chat-body .pc1-msg.is-show{display:flex}
.pc1-chat-anim .pc1-chat-body .pc1-msg.is-in{opacity:1;transform:none}
.pc1-typing p{display:flex;gap:5px;align-items:center;padding:13px 16px!important}
.pc1-typing i{width:7px;height:7px;border-radius:50%;background:#94a3b8;animation:pc1Dot 1.2s infinite ease-in-out}
.pc1-typing i:nth-child(2){animation-delay:.15s}.pc1-typing i:nth-child(3){animation-delay:.3s}
@keyframes pc1Dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- จัดส่ง ---------- */
.pc1-ship{background:#fff}
.pc1-ship-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center}
.pc1-ship-rule{display:grid;gap:4px;margin:0 0 26px;padding:16px 20px;border-radius:18px;background:linear-gradient(90deg,#eef5ff,#fff);box-shadow:inset 4px 0 0 var(--pc-blue)}
.pc1-ship-rule b{font-size:17px;line-height:1.5;color:var(--pc-navy)}
.pc1-ship-rule>span{font-size:15px;color:var(--pc-mut)}
.pc1-ship-pic{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 34px 60px -40px rgba(11,31,68,.7)}
.pc1-ship-pic{aspect-ratio:780/415}.pc1-ship-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.pc1-flow-ship .pc1-ic{width:56px;height:56px;border-radius:17px}.pc1-flow-ship .pc1-ic svg{width:26px;height:26px}
.pc1-flow-ship::before,.pc1-flow-ship::after{top:28px}
.pc1-flow-ship b{font-size:14px}

/* ---------- หลังรับของ ---------- */
.pc1-after{background:linear-gradient(180deg,#f4f8ff,#eef4ff)}
.pc1-after-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:46px;align-items:center}
.pc1-after-pic{margin:0;border-radius:26px;overflow:hidden;box-shadow:0 34px 60px -40px rgba(11,31,68,.7)}
.pc1-after-pic img{display:block;width:100%;height:auto}

/* ---------- คำถาม ---------- */
.pc1-faq{background:#fff}
.pc1-faq-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:44px;align-items:start}
.pc1-qs{display:grid;gap:12px}
.pc1-q{border-radius:18px;background:#f7faff;box-shadow:inset 0 0 0 1px #dfe8f7;transition:background-color .2s ease}
.pc1-q[open]{background:#fff;box-shadow:0 20px 40px -34px rgba(16,48,120,.6),inset 0 0 0 1.5px #bcd3fb}
.pc1-q summary{position:relative;display:block;padding:18px 56px 18px 20px;list-style:none;cursor:pointer;font-size:17px;font-weight:800;line-height:1.45;color:var(--pc-navy)}
.pc1-q summary::-webkit-details-marker{display:none}
.pc1-q summary i{position:absolute;right:18px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--pc-tint)}
.pc1-q summary i::before,.pc1-q summary i::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;border-radius:1px;background:var(--pc-blue);transition:transform .25s ease}
.pc1-q summary i::after{transform:rotate(90deg)}
.pc1-q[open] summary i::after{transform:rotate(0)}
.pc1-a{padding:0 20px 18px}
.pc1-a p{margin:0;font-size:16px;line-height:1.7;color:var(--pc-ink)}
.pc1-a-btn{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px!important}
.pc1-a-btn .pc1-btn{min-height:48px;font-size:15.5px}

/* ---------- ปิดท้าย ---------- */
.pc1-end{position:relative;padding:78px 0 82px;color:#fff;text-align:center;background:
  radial-gradient(700px 360px at 50% 0%,rgba(96,165,250,.35),rgba(96,165,250,0) 70%),linear-gradient(135deg,#0b1f4d 0%,#123a8f 55%,#1d55e0 100%)}
.pc1-end-k{margin:0 0 8px;font-size:clamp(17px,1.4vw,21px);font-weight:700;color:#cfe0ff}
.pc1-end h2{margin:0 0 26px;font-size:clamp(28px,3.2vw,48px);line-height:1.2;font-weight:800}
.pc1-end h2>span:last-child{display:block;margin-top:6px;font-size:1.15em;color:#ffd7b3}
.pc1-end .pc1-cta{justify-content:center}
.pc1-cta-big .pc1-btn{min-height:62px;font-size:19px;padding:0 30px}
.pc1-end .pc1-btn-quote{background:#fff}
.pc1-end .pc1-out{color:#cfe0ff}
.pc1-end-tel{margin:20px 0 0;font-size:15.5px;color:#cfe0ff}
.pc1-end-tel a{color:#fff;font-weight:700}

/* ---------- เคลื่อนไหว: Hero (ตอนโหลด) ---------- */
@keyframes pc1Up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes pc1Pop{from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes pc1Badge{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes pc1Float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes pc1Glow{0%{box-shadow:0 20px 34px -18px rgba(204,74,12,.9),0 0 0 0 rgba(255,145,36,.6)}70%{box-shadow:0 20px 34px -18px rgba(204,74,12,.9),0 0 0 18px rgba(255,145,36,0)}
  100%{box-shadow:0 20px 34px -18px rgba(204,74,12,.9),0 0 0 0 rgba(255,145,36,0)}}
@keyframes pc1Shine{0%{transform:translateX(-160%) skewX(-16deg)}22%,100%{transform:translateX(360%) skewX(-16deg)}}
.pc1-hero-tx>*{animation:pc1Up .8s cubic-bezier(.2,.75,.2,1) both}
.pc1-hero-tx>:nth-child(2){animation-delay:.08s}.pc1-hero-tx>:nth-child(3){animation-delay:.16s}.pc1-hero-tx>:nth-child(4){animation-delay:.24s}
.pc1-hero-tx>:nth-child(5){animation-delay:.3s}.pc1-hero-tx>:nth-child(6){animation-delay:.36s}.pc1-hero-tx>:nth-child(n+7){animation-delay:.42s}
.pc1-price{animation:pc1Up .8s cubic-bezier(.2,.75,.2,1) .16s both,pc1Glow 1.6s ease-out 1s 1 both}
.pc1-hero .pc1-it{animation:pc1Pop .85s cubic-bezier(.2,.75,.2,1) both}
.pc1-it-core{animation-delay:.2s!important}.pc1-it-drawer{animation-delay:.32s!important}.pc1-it-wired{animation-delay:.42s!important}.pc1-it-printer{animation-delay:.52s!important}
.pc1-it-wireless{animation-delay:.62s!important}.pc1-it-box{animation-delay:.72s!important}.pc1-it-rolls{animation-delay:.82s!important}
.pc1-badge,.pc1-tag{animation:pc1Badge .6s cubic-bezier(.34,1.56,.64,1) both}
.pc1-b19{animation-delay:1.05s}.pc1-tag-ready{animation-delay:1.18s}.pc1-tag-gift{animation-delay:1.3s}
.pc1-hero.is-live .pc1-b19{animation:pc1Badge .6s cubic-bezier(.34,1.56,.64,1) 1.05s both,pc1Float 6s ease-in-out 1.8s 4}
.pc1-hero.is-live .pc1-price::after{animation:pc1Shine 7s ease-in-out 2.4s 3}

/* ---------- เคลื่อนไหว: ส่วนอื่น (posset.js ใส่ .is-in เมื่อเลื่อนถึง · ไม่มี JS = เห็นครบ) ---------- */
.pc1-js .pc1-sec .pc1-kicker,.pc1-js .pc1-sec .pc1-h2,.pc1-js .pc1-sec .pc1-h2sub,.pc1-js .pc1-ship-pic,.pc1-js .pc1-after-pic,.pc1-js .pc1-chat-card,.pc1-js .pc1-clip,.pc1-js .pc1-vpanel,.pc1-js .pc1-vlead,
.pc1-js .pc1-end-in>*{opacity:0;transform:translate3d(0,24px,0)}
.pc1-js .is-in .pc1-kicker,.pc1-js .is-in .pc1-h2,.pc1-js .is-in .pc1-h2sub,.pc1-js .is-in .pc1-ship-pic,.pc1-js .is-in .pc1-after-pic,.pc1-js .is-in .pc1-chat-card,.pc1-js .is-in .pc1-clip,.pc1-js .is-in .pc1-vpanel,.pc1-js .is-in .pc1-vlead,
.pc1-js .pc1-end.is-in .pc1-end-in>*{opacity:1;transform:none;transition:opacity .8s ease,transform .95s cubic-bezier(.2,.75,.2,1)}
.pc1-js .is-in .pc1-h2{transition-delay:.08s}.pc1-js .is-in .pc1-h2sub{transition-delay:.16s}.pc1-js .is-in .pc1-ship-pic,.pc1-js .is-in .pc1-after-pic,.pc1-js .is-in .pc1-chat-card,.pc1-js .is-in .pc1-clip{transition-delay:.22s}
.pc1-js .pc1-end.is-in .pc1-end-in>:nth-child(2){transition-delay:.1s}.pc1-js .pc1-end.is-in .pc1-end-in>:nth-child(n+3){transition-delay:.2s}
.pc1-js .pc1-cards>li,.pc1-js .pc1-feats>li,.pc1-js .pc1-shop>li{opacity:0;transform:translate3d(0,20px,0)}
.pc1-js .is-in .pc1-cards>li,.pc1-js .is-in .pc1-feats>li,.pc1-js .is-in .pc1-shop>li{opacity:1;transform:none;
  transition:opacity .6s ease,transform .75s cubic-bezier(.2,.75,.2,1),box-shadow .22s ease;transition-delay:calc(var(--i) * 80ms + 120ms)}
.pc1-js .pc1-flow{--fill:0}
.pc1-js .pc1-flow::after{transition:transform 2.2s cubic-bezier(.45,.05,.3,1) .3s}
.pc1-js .is-in .pc1-flow{--fill:1}
.pc1-js .pc1-st{opacity:.35}
.pc1-js .is-in .pc1-st{opacity:1;transition:opacity .5s ease;transition-delay:calc(var(--i) * 380ms + 300ms)}
.pc1-js .is-in .pc1-st .pc1-ic{background:var(--pc-blue);color:#fff;transform:translateY(-3px);transition-delay:calc(var(--i) * 380ms + 300ms)}

/* ---------- จอกลาง ---------- */
@media (max-width:1279px){
  .pc1-shop{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pc1-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pc1-card-wide{grid-column:span 3}
  .pc1-card-wide .pc1-card-pic{aspect-ratio:3/1}
  .pc1-ready-in{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (min-width:1024px) and (max-width:1279px){
  .pc1-hero .pc1-cta{display:grid;grid-template-columns:1fr 1fr}
  .pc1-hero .pc1-btn-line,.pc1-hero .pc1-btn-tel,.pc1-hero .pc1-out{grid-column:1/-1}
  .pc1-ship-in{grid-template-columns:minmax(0,1fr);gap:32px}.pc1-ship-pic{max-width:760px}
}
@media (max-width:1023px){
  .pc1-hero-in{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .pc1-hero-tx{display:contents}
  .pc1-badge-top{order:1;align-self:flex-start}
  .pc1-hero h1{order:2;font-size:clamp(30px,5.4vw,48px)}
  .pc1-price{order:3;align-self:flex-start}
  .pc1-price-n b{font-size:clamp(50px,9vw,76px)}
  .pc1-hero-art{order:4;max-width:640px;width:100%;margin:6px auto 26px}
  .pc1-lead,.pc1-sub,.pc1-hl,.pc1-cta,.pc1-howto{order:5}
  .pc1-stage{margin:0}
  .pc1-soft-in,.pc1-chat-in,.pc1-ship-in,.pc1-after-in,.pc1-faq-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .pc1-clip{position:static;max-width:560px}
  .pc1-after-pic{max-width:420px}
  .pc1-sec{padding:64px 0}
}
@media (max-width:767px){
  .pc1-hero{padding:22px 0 46px}
  .pc1-badge-top{font-size:14px;padding:7px 14px 7px 11px;margin-bottom:10px}
  .pc1-hero h1{font-size:clamp(30px,8.6vw,40px)}
  .pc1-price{padding:8px 20px 10px;border-radius:18px}
  .pc1-price-n b{font-size:clamp(48px,14vw,62px)}
  .pc1-hl{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px}
  .pc1-hl li{white-space:nowrap;font-size:13.5px;gap:6px;padding:8px 8px 8px 6px}
  .pc1-hl svg{width:17px;height:17px;padding:3px}
  .pc1-cta .pc1-btn{flex:1 1 100%}
  .pc1-cta-big .pc1-btn{min-height:58px;font-size:19px}
  .pc1-b19{width:78px;border-width:3px}.pc1-badge b{font-size:22px}.pc1-badge small{font-size:11px}
  .pc1-tag{font-size:11.5px;padding:5px 10px 5px 7px}
  .pc1-cap{font-size:11.5px;bottom:-10px}
  .pc1-box-f b{font-size:7.5px}.pc1-box-f small{font-size:6px}.pc1-usb b{font-size:5px}
  .pc1-sec{padding:52px 0}
  .pc1-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pc1-card-wide{grid-column:span 2}
  .pc1-card-wide .pc1-card-pic{aspect-ratio:2/1}
  .pc1-card-tx{padding:12px 13px 14px}
  .pc1-card-tx b{font-size:15.5px}.pc1-card-tx>span{font-size:13.5px}
  .pc1-num{width:28px;height:28px;font-size:13.5px;left:10px;top:10px}
  .pc1-css-box .pc1-box-f b{font-size:9px}.pc1-css-box .pc1-box-f small{font-size:7px}
  .pc1-flow{grid-template-columns:minmax(0,1fr);gap:0}
  .pc1-flow::before,.pc1-flow::after{left:33px;right:auto;top:20px;bottom:20px;width:4px;height:auto;transform-origin:top;transform:scaleY(var(--fill,1))}
  .pc1-flow-ship::before,.pc1-flow-ship::after{left:27px}
  .pc1-st{grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:14px;text-align:left;padding:7px 0}
  .pc1-st b{font-size:15.5px}
  .pc1-feats{grid-template-columns:minmax(0,1fr)}
  .pc1-shop{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc1-shop li{padding:16px 10px}
  .pc1-shop li:last-child{grid-column:1/-1}
  .pc1-chat-card{border-radius:22px}
  .pc1-chat-body{height:500px}
  .pc1-msg{max-width:92%}.pc1-msg p{font-size:14.5px}
  .pc1-chat-tx .pc1-btn{width:100%}
  .pc1-q summary{font-size:16px;padding:16px 50px 16px 16px}
  .pc1-a{padding:0 16px 16px}.pc1-a p{font-size:15.5px}
  .pc1-a-btn .pc1-btn{flex:1 1 100%}
  .pc1-end{padding:56px 0 60px}
}
/* ── วิดีโอ 2 ส่วน: ดูการใช้งานจริง (10) + รีวิวลูกค้า (5) · แนวเดียวกับวิดีโอหน้า Reviews (reviewhub.css .rh-vpanel/.rh-yt/.rh-play)
   แถวเลื่อนแนวนอน scroll-snap: จอใหญ่ 3 ใบ + ปุ่ม ‹ › · แท็บเล็ต 2 ใบกว่า · มือถือ 1 ใบเห็นขอบใบถัดไป · กดภาพแล้วค่อยโหลดคลิป (posset.js) ── */
.pc1-vid-use{padding:86px 0 72px;background:linear-gradient(180deg,#f4f9ff 0%,#fff 100%)}
.pc1-vid-rev{padding:8px 0 86px;background:#fff}
.pc1-vpanel{position:relative;overflow:hidden;border-radius:30px;padding:30px 30px 22px;color:#fff;
  background:radial-gradient(520px 280px at 6% 0%,rgba(125,211,252,.22),transparent 70%),
  radial-gradient(rgba(255,255,255,.09) 1.4px,transparent 1.6px) 0 0/24px 24px,
  linear-gradient(135deg,#0c3a9e 0%,#1449b8 55%,#1a54c6 100%);box-shadow:0 30px 60px -34px rgba(8,36,110,.8)}
.pc1-vpanel-lt{color:var(--pc-ink);background:radial-gradient(520px 260px at 92% 0%,rgba(147,197,253,.28),transparent 70%),linear-gradient(135deg,#fff 0%,#f1f6ff 100%);
  box-shadow:0 30px 60px -42px rgba(8,36,110,.5),inset 0 0 0 1px var(--pc-line)}
.pc1-vhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 20px;align-items:center;margin-bottom:20px}
.pc1-vicon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:#1d4ed8;box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}
.pc1-vicon svg{width:30px;height:30px}
.pc1-vid-use .pc1-vicon svg{margin-left:3px}
.pc1-vpanel-lt .pc1-vicon{background:var(--pc-blue);color:#fff;box-shadow:0 10px 24px -12px rgba(29,85,224,.8)}
.pc1-vpanel .pc1-h2{margin:0 0 4px;font-size:clamp(26px,2.4vw,38px);color:#fff}
.pc1-vpanel .pc1-h2>span{color:#cfe3ff}
.pc1-vpanel .pc1-h2sub{margin:0;max-width:640px;color:rgba(255,255,255,.92)}
.pc1-vpanel-lt .pc1-h2{color:var(--pc-navy)}
.pc1-vpanel-lt .pc1-h2>span{color:var(--pc-blue)}
.pc1-vpanel-lt .pc1-h2sub{color:var(--pc-mut)}
.pc1-vnav{display:flex;align-items:center;gap:10px}
.pc1-vcount{font-size:14.5px;font-weight:800;white-space:nowrap;color:#fff}
.pc1-vpanel-lt .pc1-vcount{color:var(--pc-mut)}
.pc1-vswipe{display:none}
.pc1-vbtn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#fff;color:#1d4ed8;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.5);transition:transform .2s ease,opacity .2s ease}
.pc1-vbtn[hidden]{display:none}
.pc1-vbtn svg{width:22px;height:22px}
.pc1-vbtn[data-dir="-1"] svg{transform:rotate(180deg)}
.pc1-vbtn[aria-disabled="true"]{background:rgba(255,255,255,.4);color:rgba(12,58,158,.55);box-shadow:none;cursor:default}
.pc1-vpanel-lt .pc1-vbtn{background:var(--pc-blue);color:#fff}
.pc1-vpanel-lt .pc1-vbtn[aria-disabled="true"]{background:#b3c6f2;color:#fff}
@media (hover:hover){.pc1-vbtn:not([aria-disabled="true"]):hover{transform:translateY(-2px)}}
.pc1 .pc1-yt:focus-visible,.pc1 .pc1-vbtn:focus-visible,.pc1 .pc1-ytframe:focus{outline:3px solid #fde047;outline-offset:3px}
.pc1 .pc1-vpanel-lt .pc1-yt:focus-visible,.pc1 .pc1-vpanel-lt .pc1-vbtn:focus-visible,.pc1 .pc1-vpanel-lt .pc1-ytframe:focus{outline-color:var(--pc-navy)}
.pc1-yt,.pc1-vbtn{scroll-margin:130px 0 14px}   /* Tab แล้วไม่จมใต้แถบบน+เมนูที่ค้าง (110px) และกรอบโฟกัสไม่ตกขอบล่าง */
#pc1 .pc1-h2>.pc1-nw{color:inherit}         /* คำที่ห้ามตัดในบรรทัดแรกของหัวข้อ ไม่ใช่สีเน้นของบรรทัดสอง */
.pc1-vrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px) / 3);gap:18px;margin:0 -8px;padding:10px 8px 22px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:8px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.55) transparent}
.pc1-vpanel-lt .pc1-vrail{scrollbar-color:#b9cdf3 transparent}
.pc1-v{min-width:0;scroll-snap-align:start}
.pc1-yt,.pc1-ytframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b1f44;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 14px 22px -16px rgba(0,0,0,.55)}
.pc1-ytframe{height:auto}
.pc1-yt,.pc1-ytframe{transition:transform .25s ease,box-shadow .25s ease}
.pc1-vpanel-lt .pc1-yt,.pc1-vpanel-lt .pc1-ytframe{border-color:#fff;box-shadow:0 14px 22px -16px rgba(16,48,120,.55),0 0 0 1px var(--pc-line)}
.pc1-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.pc1-yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:62px;height:44px;border-radius:13px;
  background:#ff0033;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.35);transition:transform .2s ease}
.pc1-yt-play svg{width:26px;height:26px}
@media (hover:hover){
  .pc1-v:hover .pc1-yt,.pc1-v:hover .pc1-ytframe{transform:translateY(-4px);box-shadow:0 20px 26px -18px rgba(0,0,0,.6)}   /* ยกที่การ์ด: กดเล่นแล้วภาพไม่ตก */
  .pc1-yt:hover img{transform:scale(1.04)}
  .pc1-yt:hover .pc1-yt-play{transform:translate(-50%,-50%) scale(1.08)}
}
.pc1-vt{position:relative;padding:12px 2px 0}
.pc1-vtag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12.5px;font-weight:800;line-height:1.5;
  background:rgba(4,20,70,.34);color:#fff}
.pc1-vtag svg{width:14px;height:14px}
.pc1-vtag-rev{background:#fff1e8;color:#b4380a}
.pc1-vt h3{margin:8px 0 0;font-size:16px;line-height:1.5;font-weight:700;color:#fff;overflow-wrap:anywhere}
.pc1-vpanel-lt .pc1-vt h3{color:var(--pc-navy)}
.pc1-vbridge{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:12px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);
  font-size:15.5px;color:#fff}
.pc1-vbridge b{font-size:18px;color:#fff}
.pc1-vlead{display:grid;justify-items:center;gap:2px;margin:0 auto 22px;text-align:center}
.pc1-vlead b{font-size:clamp(19px,1.6vw,24px);line-height:1.35;color:var(--pc-navy)}
.pc1-vlead span{font-size:16px;color:var(--pc-mut)}
.pc1-vnote{margin:14px 2px 0;font-size:13px;color:var(--pc-mut)}
@media (max-width:1023px){
  .pc1-vid-use{padding:64px 0 56px}.pc1-vid-rev{padding:4px 0 64px}
  .pc1-vhead{grid-template-columns:auto minmax(0,1fr)}
  .pc1-vnav{grid-column:1/-1}
  .pc1-vrail{grid-auto-columns:calc((100% - 18px) / 2.2);gap:18px;margin:0 -30px;padding:10px 30px 14px;scroll-padding-inline:30px}   /* ใบที่โผล่ชิดขอบแผง */
  .pc1-yt,.pc1-vbtn{scroll-margin-top:172px}
}
@media (max-width:767px){
  .pc1-vid-use{padding:52px 0 44px}.pc1-vid-rev{padding:4px 0 52px}
  .pc1-yt,.pc1-vbtn{scroll-margin-top:300px}   /* มือถือ: แถบบน+เมนู 263px (จอ 320–355 เมนูสูงถึง 280px) */
  .pc1-vpanel{border-radius:22px;padding:22px 0 16px}
  .pc1-vhead{grid-template-columns:auto minmax(0,1fr);gap:10px 14px;padding:0 16px;margin-bottom:14px;align-items:start}
  .pc1-vicon{width:44px;height:44px;margin-top:4px}.pc1-vicon svg{width:22px;height:22px}
  .pc1-vbtn{display:none!important}
  .pc1-vswipe{display:inline}
  .pc1-vrail{grid-auto-columns:86%;gap:12px;margin:0;padding:10px 14px 12px;scroll-padding-inline:14px;scrollbar-width:none}
  .pc1-vrail::-webkit-scrollbar{display:none}
  .pc1-vt h3{font-size:15.5px}
  .pc1-vbridge{margin:10px 16px 0;font-size:15px}.pc1-vbridge b{font-size:17px}
  .pc1-vlead{margin-bottom:18px}
}
/* ---------- การ์ดชวนดูอีกชุด (16,900 ↔ 23,900 · ใช้ร่วมสองหน้า) ---------- */
.pc1-alt{padding:40px 0;background:#fff}
.pc1-alt-card{display:grid;grid-template-columns:200px minmax(0,1fr) auto;align-items:center;gap:22px;padding:18px 24px 18px 18px;border-radius:24px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,#f4f8ff,#fff);box-shadow:0 22px 40px -34px rgba(29,85,224,.6),inset 0 0 0 1px #dbe6f8;transition:transform .25s ease,box-shadow .25s ease}
.pc1-alt-pic img{display:block;width:100%;height:auto}
.pc1-alt-tx small{display:block;font-size:14.5px;font-weight:800;color:#c2410c}
.pc1-alt-tx b{display:block;margin:2px 0 4px;font-size:clamp(20px,1.7vw,26px);color:var(--pc-navy)}
.pc1-alt-tx>span{font-size:15px;line-height:1.55;color:var(--pc-mut)}
.pc1-alt-go{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--pc-blue);color:#fff;font-weight:800;white-space:nowrap}
.pc1-alt-go svg{width:18px;height:18px}
@media (hover:hover){.pc1-alt-card:hover{transform:translateY(-3px);box-shadow:0 28px 44px -32px rgba(29,85,224,.65),inset 0 0 0 1px #c3d6f6}}
.pc1-alt-card:focus-visible{outline:3px solid var(--pc-navy);outline-offset:3px}

@media (max-width:767px){.pc1-alt-card{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}.pc1-alt-pic{max-width:220px}.pc1-alt-go{justify-self:start}}
@media (max-width:380px){
  .pc1-hl li{font-size:13px}
  .pc1-tag-gift{left:54%}
}
@media (prefers-reduced-motion:reduce){
  .pc1 *,.pc1 *::before,.pc1 *::after{animation:none!important;transition:none!important}
  .pc1-js .pc1-sec .pc1-kicker,.pc1-js .pc1-sec .pc1-h2,.pc1-js .pc1-sec .pc1-h2sub,.pc1-js .pc1-ship-pic,.pc1-js .pc1-after-pic,.pc1-js .pc1-chat-card,.pc1-js .pc1-clip,.pc1-js .pc1-vpanel,.pc1-js .pc1-vlead,.pc1-js .pc1-end-in>*,
  .pc1-js .pc1-cards>li,.pc1-js .pc1-feats>li,.pc1-js .pc1-shop>li,.pc1-js .pc1-st{opacity:1!important;transform:none!important}
  .pc1-js .pc1-flow{--fill:1}
}
@media print{
  .pc1-js .pc1-sec *,.pc1-js .pc1-end-in>*,.pc1-js .pc1-cards>li,.pc1-js .pc1-feats>li,.pc1-js .pc1-shop>li,.pc1-js .pc1-st{opacity:1!important;transform:none!important;transition:none!important}
  .pc1-js .pc1-flow{--fill:1}
  .pc1-chat-anim .pc1-chat-body .pc1-msg{display:flex!important;opacity:1!important;transform:none!important}.pc1-typing,.pc1-chat-skip{display:none!important}
  .pc1-chat-body{height:auto!important;overflow:visible!important}
  .pc1 *{animation:none!important}
}