/* ซีรีส์ชุดอุปกรณ์ POS (2026-11-04) — คลิปแนวตั้ง · หน้าชุดใหม่ · ภาพสตูดิโอ · คลาส sc- · สร้างโดย notes/pos-set-series */
:root{--sc-n:#06112b;--sc-n2:#0b2463;--sc-b:#2f7bff;--sc-c:#6fd3ff;--sc-g:#ffcf3a;--sc-ink:#0d1b3d;--sc-mut:#55627d;--sc-line:#dfe6f3}
.sc-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* คลิปแนวตั้ง */
.sc-clip{background:radial-gradient(80% 120% at 30% 40%,#123480 0%,#0a1c48 45%,#050c1e 100%);color:#fff;padding:56px 0}
.sc-clip-in{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:48px;align-items:center}
.sc-play{position:relative;display:block;width:100%;aspect-ratio:9/16;border:0;padding:0;border-radius:26px;overflow:hidden;cursor:pointer;background:#02060f;
  box-shadow:0 0 0 2px rgba(111,211,255,.45),0 30px 70px -20px rgba(0,0,0,.8),0 0 60px rgba(47,123,255,.35)}
.sc-play img{display:block;width:100%;height:100%;object-fit:cover}
.sc-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sc-play .sc-pb{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .2s}
.sc-play:hover .sc-pb,.sc-play:focus-visible .sc-pb{transform:scale(1.08)}
.sc-play .sc-pb svg{width:38px;height:38px;margin-left:6px;fill:#0b2463}
.sc-play .sc-dur{position:absolute;right:14px;bottom:14px;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.65);font-size:14px;font-weight:700}
.sc-kick{color:var(--sc-c);font-weight:700;font-size:16px;letter-spacing:.5px;margin:0 0 8px}
.sc-clip h2{font-size:clamp(28px,3.4vw,42px);line-height:1.2;margin:0 0 14px;color:#fff}
.sc-clip h2 em{font-style:normal;color:var(--sc-c)}
.sc-clip p.sc-lead{font-size:18px;line-height:1.7;color:#d6e3ff;margin:0 0 18px}
.sc-pts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.sc-pts li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5}
.sc-pts li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--sc-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304122e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.sc-yt{display:flex;flex-wrap:wrap;gap:12px}
.sc-yt a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;font-weight:700;font-size:15px;text-decoration:none;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(111,190,255,.8)}
.sc-yt a:hover{background:rgba(47,123,255,.25)}
/* ภาพสตูดิโอในกรอบเดิมของหน้า 16,900 */
.ps2-pic.sc-st{background:#050c1e;overflow:hidden;padding:0;min-height:0}
.ps2-pic.sc-st img{display:block;width:100%;height:auto;max-width:100%;max-height:none;border-radius:inherit;filter:none}
/* หน้าชุดใหม่ */
.sc-page{color:var(--sc-ink)}
.sc-hero{background:radial-gradient(90% 120% at 75% 45%,#163c8f 0%,#0a1c48 45%,#050c1e 100%);color:#fff;padding:44px 0 40px;overflow:hidden}
.sc-hero-in{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.sc-hero h1{font-size:clamp(32px,4.4vw,54px);line-height:1.15;margin:4px 0 12px;color:#fff}
.sc-hero h1 em{font-style:normal;background:linear-gradient(90deg,#9fe6ff,#2f7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-price{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.sc-price b{font-size:clamp(52px,7vw,84px);line-height:1;font-weight:800;letter-spacing:-1px}
.sc-price span{font-size:22px;font-weight:700}
.sc-hero .sc-lead{font-size:18px;line-height:1.7;color:#d6e3ff;margin:0 0 16px}
.sc-chips{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sc-chips li{padding:7px 14px;border-radius:99px;font-size:14px;font-weight:700;background:rgba(18,58,150,.85);box-shadow:inset 0 0 0 2px rgba(111,190,255,.75)}
.sc-chips li.g{color:var(--sc-g);box-shadow:inset 0 0 0 2px rgba(255,207,90,.9)}
.sc-hero-img img{display:block;width:100%;height:auto;border-radius:24px}
.sc-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:0;font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none}
.sc-btn svg{width:20px;height:20px}
.sc-btn-buy{background:linear-gradient(135deg,#ff8a1f,#f06008);color:#fff}
.sc-btn-quote{background:#fff;color:#0b2463;box-shadow:inset 0 0 0 2px #c9d6ee}
.sc-btn-line{background:#06c755;color:#fff}
.sc-btn-tel{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.sc-sec{padding:56px 0}
.sc-sec:nth-of-type(even){background:#f5f8fd}
.sc-sec h2{font-size:clamp(26px,3vw,36px);line-height:1.25;margin:0 0 8px;color:var(--sc-ink)}
.sc-sec h2 em{font-style:normal;color:var(--sc-b)}
.sc-sub{color:var(--sc-mut);font-size:17px;line-height:1.7;margin:0 0 26px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.sc-item{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--sc-line),0 14px 30px -20px rgba(13,27,61,.35);display:flex;flex-direction:column}
.sc-item img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:#050c1e}
.sc-item div{padding:14px 16px 18px}
.sc-item b{display:block;font-size:17px;line-height:1.4}
.sc-item small{display:block;color:var(--sc-mut);font-size:14px;line-height:1.5;margin-top:4px}
.sc-item .q{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:99px;background:#eaf1ff;color:#0b2463;font-size:13px;font-weight:800}
.sc-item.gift .q{background:#fff4cc;color:#8a5a00}
.sc-feat{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.sc-feat.r .sc-fpic{order:2}
.sc-fpic img{display:block;width:100%;height:auto;border-radius:26px;box-shadow:0 24px 50px -24px rgba(5,12,30,.6)}
.sc-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-ticks li{display:flex;gap:12px;font-size:17px;line-height:1.55}
.sc-ticks li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e6efff;color:#1d5fe0;font-weight:900;font-size:15px}
.sc-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.sc-steps li{counter-increment:s;background:#fff;border-radius:20px;padding:18px 18px 20px;box-shadow:0 0 0 1px var(--sc-line)}
.sc-steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:10px;background:linear-gradient(135deg,#ffe08a,#ffb21e);color:#2a1700;font-weight:900;font-size:20px}
.sc-steps b{display:block;font-size:17px}.sc-steps small{color:var(--sc-mut);font-size:15px;line-height:1.5}
.sc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.sc-card{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#123a96,#071642);
  box-shadow:inset 0 0 0 2px rgba(111,190,255,.75),0 14px 30px -18px rgba(5,12,30,.7)}
.sc-card svg{flex:none;width:46px;height:46px}
.sc-card b{display:block;color:var(--sc-g);font-size:19px;line-height:1.3}.sc-card span{font-size:15px;line-height:1.45;color:#e3ecff}
.sc-remote{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.sc-remote span{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:16px;background:#fff;font-weight:800;font-size:17px;box-shadow:0 0 0 1px var(--sc-line)}
.sc-remote img{width:36px;height:36px;border-radius:8px}
.sc-sum{background:#06112b;color:#fff;border-radius:28px;padding:30px;display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center}
.sc-sum ol{margin:0;padding-left:22px;display:grid;gap:6px;font-size:16px;line-height:1.5}
.sc-sum .sc-price b{color:#fff}
.sc-note{font-size:14px;color:var(--sc-mut);line-height:1.6;margin-top:14px}
.sc-sum .sc-note{color:#aebbd9}
.sc-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sc-set{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--sc-line)}
.sc-set img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sc-set div{padding:10px 14px 14px}.sc-set b{display:block;font-size:15px;line-height:1.4}.sc-set span{color:#1d5fe0;font-weight:800;font-size:15px}
.sc-set[aria-current]{box-shadow:0 0 0 3px #2f7bff}
.sc-faq details{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--sc-line);padding:14px 18px;margin-bottom:10px}
.sc-faq summary{font-weight:800;font-size:17px;cursor:pointer}
.sc-faq p{margin:10px 0 0;color:#3a4766;line-height:1.7}
@media (max-width:900px){
  .sc-clip-in,.sc-hero-in,.sc-feat,.sc-sum{grid-template-columns:1fr}
  .sc-clip-in{gap:26px}.sc-play{max-width:340px;margin:0 auto}
  .sc-feat.r .sc-fpic{order:0}
  .sc-hero-img{order:-1}
}
@media (max-width:480px){
  .sc-wrap{padding:0 16px}.sc-sec{padding:40px 0}.sc-clip{padding:40px 0}
  .sc-btn{flex:1 1 100%}
  .sc-sum{padding:22px 18px}
}
.sc-play.is-on img,.sc-play.is-on .sc-pb,.sc-play.is-on .sc-dur{display:none}
.ps2-get-pic img[src*="pos-set-series"]{border-radius:8px;max-height:52px}
.sc-hero .sc-note{color:#c9d6f2}