/* ── ชุดสีของเว็บ ──────────────────────────────────────────────── สีทุกอย่างอ้างจากตัวแปรชุดนี้ที่เดียว โหมดมืดจึงแค่เปลี่ยนค่าตัวแปร ไม่ต้องเขียนกฎซ้ำอีกชุด สามสถานะ: ไม่ได้เลือก = ตามเครื่อง · เลือกสว่าง · เลือกมืด */ :root{ color-scheme:light; --bg:#fff;--soft:#f7f7f8; --surface:#ffffff;--surface-2:#f5f5f7;--surface-3:#ececf0; --ink:#111114;--txt:#222222;--ink-2:#3c3c43;--ink-3:#5f5f66;--ink-4:#8a8a92;--sub:#666666; --line:#ececec; --solid:#111114;--glass:rgba(255,255,255,.94);--brand:#FF6A2A;--blue:#F45A17;--green:#27AE60;--star:#f5a623;--red:#EB5757;--orange:#c05600; --grad:linear-gradient(135deg,#FF6A2A,#F45A17); --shadow:0 10px 40px rgba(0,0,0,.06);--shadow-h:0 16px 48px rgba(0,0,0,.1); } /* โหมดมืด: พื้นเอนไปทางน้ำตาลอุ่นนิดหน่อยให้เข้ากับสีส้มของแบรนด์ ไม่ใช้ดำสนิทเพราะจะตัดกับรูปสินค้าพื้นขาวจนแสบตา */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#1b1815;--soft:#141210; --surface:#1e1a17;--surface-2:#262119;--surface-3:#2f2822; --ink:#f4f0ec;--txt:#ece7e2;--ink-2:#d6cfc8;--ink-3:#ada49b;--ink-4:#8d847b;--sub:#ada49b; --line:#332c26; --solid:#3d352e;--glass:rgba(24,21,18,.94);--brand:#ff7f45;--blue:#ff6a2a;--orange:#ffa06a; --grad:linear-gradient(135deg,#FF6A2A,#F45A17); --shadow:0 10px 40px rgba(0,0,0,.5);--shadow-h:0 16px 48px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#1b1815;--soft:#141210; --surface:#1e1a17;--surface-2:#262119;--surface-3:#2f2822; --ink:#f4f0ec;--txt:#ece7e2;--ink-2:#d6cfc8;--ink-3:#ada49b;--ink-4:#8d847b;--sub:#ada49b; --line:#332c26; --solid:#3d352e;--glass:rgba(24,21,18,.94);--brand:#ff7f45;--blue:#ff6a2a;--orange:#ffa06a; --grad:linear-gradient(135deg,#FF6A2A,#F45A17); --shadow:0 10px 40px rgba(0,0,0,.5);--shadow-h:0 16px 48px rgba(0,0,0,.7); } /* รูปสินค้าเกือบทั้งหมดพื้นขาว โหมดมืดจึงหรี่ลงนิดหนึ่งไม่ให้แสบตา */ :root[data-theme="dark"] .card .ph img, :root[data-theme="dark"] .pd-main img{filter:brightness(.94);} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card .ph img, :root:not([data-theme="light"]) .pd-main img{filter:brightness(.94);} } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} body{font-family:'Noto Sans Thai','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--soft);color:var(--txt);} h1,h2,h3,h4,b,.price,.logo{color:var(--ink);} .trade h2,.trade b,.cta-blk h2,.cta-blk b,.ft-band h3,.ft-band b,.ft-band .logo{color:#fff;} img{display:block;} a{text-decoration:none;color:inherit;} svg{display:block;} .container{width:100%;max-width:1440px;margin:0 auto;padding:0 48px;} @media(max-width:900px){.container{padding:0 24px;}} @media(max-width:640px){.container{padding:0 16px;}} /* ═══ HEADER ═══ */ .hd{position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);} .hd-in{display:flex;align-items:center;gap:20px;padding:15px 0;} .logo{font-size:19px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:10px;} .logo .dot{width:28px;height:28px;border-radius:8px;background:var(--grad);} /* ── ชื่อร้านบนหัวเว็บ ให้ใหญ่และเด่นกว่าที่อื่น (ท้ายเว็บใช้ขนาดเดิม) ── */ .hd .logo{font-size:26px;letter-spacing:-.7px;gap:12px;} .hd .logo .dot{width:40px;height:40px;border-radius:11px;} @media(max-width:900px){ /* ชื่อร้านต้องอยู่บรรทัดเดียว ห้ามตัดเป็น "Mac / Cafe" สองบรรทัด */ .hd-in{gap:10px;} .hd .logo{font-size:27px;letter-spacing:-.9px;gap:10px;white-space:nowrap;flex:0 1 auto;min-width:0;} .hd .logo .dot{width:42px;height:42px;border-radius:12px;flex:0 0 auto;} /* ปุ่ม LINE ก้อนใหญ่บนหัวเว็บเบียดชื่อร้านจนตก ซ่อนบนจอเล็ก ลูกค้ายังทัก LINE ได้จากปุ่มลอยมุมจอ และจากในเมนูขีดสามขีด */ .hd .hd-line{display:none!important;} } @media(max-width:380px){ .hd .logo{font-size:23px;} .hd .logo .dot{width:36px;height:36px;} } .nav{display:flex;gap:clamp(12px,1.25vw,20px);font-size:13.5px;font-weight:600;color:var(--sub);margin-left:auto;white-space:nowrap;} .nav a:hover{color:var(--ink);} .nav .nav-on{color:#c2410c;} /* เมนูรองยังอยู่ครบในลิ้นชักมือถือและ Footer แต่ยุบออกจาก Header เดสก์ท็อป เพื่อให้ลูกค้าเห็นเฉพาะทางเข้าหลักและไม่เกิดเมนูยาวล้นจอ */ .nav .nav-secondary{display:none;} .hd-icons{display:flex;gap:6px;align-items:center;} .hd-icons button,.hd-icons a{width:38px;height:38px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background .2s;} .hd-icons button:hover,.hd-icons a:hover{background:var(--soft);} .hd-icons svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .hd-line{padding:10px 20px;border-radius:999px;background:var(--solid);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;} .hd-line::after{content:'';width:18px;height:18px;border-radius:50%;background:var(--green);display:inline-block;} /* เมื่อเมนูมีทั้ง "ผ่อนเครื่องใหม่" และ "เช็กราคาเทิร์น" ให้เข้าลิ้นชักก่อนเริ่มเบียดโลโก้ */ @media(max-width:1120px){.nav{display:none;}.hd-icons{display:none;}} /* ═══ เมนูมือถือ — ปุ่มขีดสามขีด + ลิ้นชักเลื่อนออกมาจากขวา ═══ จอเล็กเดิมไม่มีเมนูเลย ลูกค้าเข้าถึงหน้าบริการ/ติดต่อไม่ได้ */ .burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent; cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;color:var(--ink);} .burger span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s,opacity .18s;} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:1120px){.burger{display:flex;}} .mdrawer{position:fixed;inset:0;z-index:1200;display:none;} .mdrawer.show{display:block;} .mdrawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .22s;} .mdrawer.show .mdrawer-bg{opacity:1;} .mdrawer-p{position:absolute;top:0;right:0;bottom:0;width:min(84vw,330px);background:var(--surface); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease; box-shadow:-8px 0 34px rgba(0,0,0,.14);} .mdrawer.show .mdrawer-p{transform:none;} .mdrawer-h{display:flex;align-items:center;justify-content:space-between; padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;} .mdrawer-h b{font-size:16px;font-weight:800;letter-spacing:-.2px;} .mdrawer-x{width:36px;height:36px;border:0;border-radius:50%;background:var(--soft); font-size:16px;line-height:1;cursor:pointer;color:var(--ink);} .mdrawer-l{flex:1 1 auto;overflow-y:auto;padding:6px 0;} .mdrawer-l a{display:flex;align-items:center;justify-content:space-between; padding:15px 18px;font-size:15.5px;font-weight:600;color:var(--txt);border-bottom:1px solid var(--line);} .mdrawer-l a::after{content:'›';color:var(--ink-4);font-size:19px;} .mdrawer-l a.on{color:var(--brand);} .mdrawer-f{flex:0 0 auto;padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;} .mdrawer-f .mline{display:flex;align-items:center;justify-content:center;gap:9px; padding:13px;border-radius:12px;background:var(--green);color:#fff;font-size:14.5px;font-weight:700;} .mdrawer-f .mtel{display:flex;align-items:center;justify-content:center;gap:9px; padding:13px;border-radius:12px;border:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:700;} /* ═══ HERO แบนเนอร์เต็มจอ + ข้อความด้านล่าง ═══ */ .hero{padding-top:0;} .hero-stage{position:relative;width:100%;} /* สัดส่วนแบนเนอร์ 16/5 (= 3.2:1) เลือกค่านี้เพราะจอคอมพิวเตอร์ส่วนใหญ่ (1280 / 1440 / 1680 / 1920 px) จะได้สัดส่วนนี้เป๊ะ ไม่โดนเพดานความสูงตัด ทีมกราฟิกจึงออกแบบขนาดเดียวแล้วตรงกับที่เห็นจริงเกือบทุกจอ */ .hero-media{position:relative;width:100%;aspect-ratio:var(--hero-ar,16/5); max-height:clamp(300px,58vh,640px);background:var(--surface-3);overflow:hidden;} /* มือถือใช้ 16/9 เป็นค่าเริ่มต้น เพราะถ้าใช้แนวตั้ง (4/5) รูป 21:9 จะถูกตัดข้างทิ้งเกินครึ่ง */ @media(max-width:760px){.hero-media{aspect-ratio:var(--hero-ar-m,16/9);max-height:clamp(220px,42vh,420px);}} .hero-card{position:relative;background:var(--surface);border-bottom:1px solid var(--line);} /* ข้อความชิดซ้าย ปุ่มตามมาใต้ข้อความเลย — เดิมปุ่มถูกดันไปขวาสุด เหลือช่องว่างกลางจอกว้างมากบนจอใหญ่ ดูเหมือนหน้าเว็บโหลดไม่ครบ */ .hero-grid{display:flex;flex-direction:column;align-items:flex-start;gap:22px; padding:clamp(24px,3vw,38px) 0 clamp(10px,1.4vw,18px);max-width:760px;} /* ── ข้อความซ้าย · บริการขวา อยู่แถวเดียวกัน ── เดิมบริการอยู่เหนือข้อความ ทำให้ต้องเลื่อนผ่านไอคอน 10 อันก่อนถึงจะเจอปุ่มซื้อ จอแคบกว่า 1080px ค่อยเรียงลงมาเป็นบนล่าง ข้อความอยู่บนก่อนเสมอ */ .hero-split{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:clamp(20px,3vw,46px);align-items:center;} .hero-split .hero-grid{max-width:none;} .hero-split .svc-wrap{margin-top:0;} @media(max-width:1080px){ .hero-split{grid-template-columns:1fr;gap:16px;} .hero-split .hero-grid{padding-bottom:4px;} } .hero-btns{display:flex;gap:10px;flex-wrap:wrap;} .hero-badge{display:inline-block;background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5));color:var(--brand,#ea580c);font-size:12.5px;font-weight:800;padding:8px 18px;border-radius:999px;margin-bottom:14px;} .hero-txt .kick{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--txt);display:block;margin-bottom:-4px;} .hero-txt .hero-title{font-size:clamp(48px,7vw,92px);font-weight:800;letter-spacing:-3px;line-height:1.02;margin-bottom:10px;background:linear-gradient(115deg,#111,var(--surface-3));-webkit-background-clip:text;background-clip:text;color:transparent;} .hero-txt p{font-size:clamp(16px,1.9vw,23px);color:var(--ink);font-weight:700;line-height:1.45;margin-bottom:20px;max-width:480px;} .hero-txt p .hl{color:var(--brand);} .hero-cta{background:var(--solid);color:#fff;border:none;padding:18px 44px;border-radius:999px;font-size:16.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .3s ease;box-shadow:0 10px 26px rgba(17,17,17,.22);} .hero-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);} .hero-cta2{display:inline-block;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);padding:18px 36px;border-radius:999px;font-size:15.5px;font-weight:700;transition:all .3s ease;} .hero-cta2:hover{border-color:var(--solid);} .hero-media .slide{position:absolute;inset:0;opacity:0;z-index:0; transition:opacity .9s cubic-bezier(.22,.61,.36,1);will-change:opacity;} .hero-media .slide.on{opacity:1;z-index:1;} /* รูปค่อย ๆ ซูมเข้าเบา ๆ ตลอดเวลาที่โชว์ — ทำให้ภาพนิ่งดูมีมิติ ไม่เหมือนรูปติดผนัง (ขยายแค่ 5% ช้ามาก จนแทบไม่รู้สึกว่ากำลังเคลื่อน แต่ภาพรวมดูมีชีวิต) */ .hero-media .slide .fg{transform:scale(1.05);transition:transform 1.1s cubic-bezier(.22,.61,.36,1);} .hero-media .slide.on .fg{animation:heroKen var(--hero-dur,6s) linear forwards;transform:none;} @keyframes heroKen{from{transform:scale(1.045);}to{transform:scale(1);}} /* เงาไล่ระดับขอบล่าง ให้จุดกับปุ่มลอยอ่านออกทุกรูป และเพิ่มความลึกให้ขอบภาพ */ .hero-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2; pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.32),rgba(0,0,0,0));} .hero-media.dragging .slide{transition:none;} @media(prefers-reduced-motion:reduce){ .hero-media .slide,.hero-media .slide .fg{transition:none;} .hero-media .slide.on .fg{animation:none;} } .hero-media .slide .bgblur{position:absolute;left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;filter:blur(26px) saturate(1.15);opacity:.9;} /* ค่าเริ่มต้น = เต็มกรอบ ไม่มีขอบเบลอ (ตัดขอบบน-ล่างบ้างตามสัดส่วนจอ) ถ้าอยากเห็นรูปเต็มใบไม่โดนตัด ตั้งค่าในแอดมินเป็น "เห็นเต็มรูป" -> .hero-fit-contain */ .hero-media .slide .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,center);} .hero-fit-contain .slide .fg{object-fit:contain;} .hero-fit-cover .slide .bgblur{display:none;} /* เต็มกรอบแล้วไม่ต้องมีพื้นหลังเบลอ */ /* ── ข้อความ + ปุ่มของแบนเนอร์ ── ค่าเริ่มต้นอยู่ใต้รูปตามตัวเลือกในแอดมิน จึงไม่ชนข้อความที่ฝังอยู่ในภาพ เฉพาะเมื่อเลือก "ทับบนรูป" เท่านั้นจึงใช้คลาส .on-img */ .hero-ov{position:relative;z-index:5;display:flex;align-items:center;background:var(--surface); border-bottom:1px solid var(--line);pointer-events:none;} .hero-ov .inner{width:100%;max-width:1440px;margin:0 auto;padding:24px 48px;} @media(max-width:900px){.hero-ov .inner{padding:22px 24px;}} @media(max-width:640px){.hero-ov .inner{padding:18px 16px;}} .hero-ov .box{max-width:820px;pointer-events:auto;} .hero-ov.on-img{position:absolute;inset:0;background:transparent;border:0;} .hero-ov.on-img .inner{padding-top:0;padding-bottom:0;} .hero-ov.on-img .box{max-width:min(640px,58%);} @media(max-width:760px){ .hero-ov.on-img{align-items:flex-end;} .hero-ov.on-img .box{max-width:100%;padding-bottom:56px;} } .hero-ov.right .inner{display:flex;justify-content:flex-end;} .hero-ov.center .inner{display:flex;justify-content:center;text-align:center;} .hero-ov.center .box{max-width:min(680px,86%);} .hero-ov .ttl{font-size:clamp(24px,3vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.18; color:var(--hero-ink,var(--ink));margin-bottom:10px;} .hero-ov.on-img .ttl{font-size:clamp(24px,3.4vw,44px);letter-spacing:-1px;text-wrap:balance; text-shadow:0 2px 18px rgba(255,255,255,.5);} .hero-ov.on-img.dark .ttl{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);} .hero-ov .ttl em{font-style:normal;color:var(--brand);} .hero-ov .sub{font-size:clamp(14px,1.45vw,17px);font-weight:600;line-height:1.55;margin-bottom:18px; color:var(--hero-sub,var(--ink));} .hero-ov.on-img .sub{text-shadow:0 1px 12px rgba(255,255,255,.5);} .hero-ov.on-img.dark .sub{color:var(--ink-4);text-shadow:0 1px 16px rgba(0,0,0,.5);} .hero-ov .btns{display:flex;gap:10px;flex-wrap:wrap;} @keyframes heroRise{from{opacity:0;transform:translate3d(0,16px,0);}to{opacity:1;transform:none;}} .hero-ov.rise .ttl{animation:heroRise .62s cubic-bezier(.22,.61,.36,1) both;} .hero-ov.rise .sub{animation:heroRise .62s cubic-bezier(.22,.61,.36,1) .10s both;} .hero-ov.rise .btns{animation:heroRise .62s cubic-bezier(.22,.61,.36,1) .20s both;} @media(prefers-reduced-motion:reduce){ .hero-ov.rise .ttl,.hero-ov.rise .sub,.hero-ov.rise .btns{animation:none;} } .hero-ov .b1,.hero-ov .b2{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:800; padding:14px 28px;border-radius:999px;white-space:nowrap;transition:transform .18s,box-shadow .18s;} .hero-ov .b1{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(255,106,42,.4);} .hero-ov .b2{background:rgba(255,255,255,.94);color:#111114;border:1.5px solid rgba(0,0,0,.1);box-shadow:0 6px 18px rgba(0,0,0,.12);} .hero-ov .b1:hover,.hero-ov .b2:hover{transform:translateY(-2px);} @media(max-width:760px){.hero-ov .b1,.hero-ov .b2{font-size:13.5px;padding:12px 20px;}} /* ── แถบตัวเลขจริงใต้ปุ่มหลัก ── สร้างจากข้อมูลในสต็อกเอง ไม่ต้องพิมพ์ วางไว้ใต้แบนเนอร์ ไม่ทับบนรูป เพราะแบนเนอร์บางใบมีตัวหนังสือฝังมาในรูปอยู่แล้ว แสดงเฉพาะเงินดาวน์เริ่มต้น ระยะเวลาผ่อนสูงสุด จำนวนสาขา และสต็อก */ .hero-trust{display:flex;flex-wrap:wrap;gap:9px 10px;} .hero-trust:empty{display:none;} .hero-trust i{font-style:normal;display:inline-flex;align-items:center;gap:7px; background:var(--surface);border:0; padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 22px -10px rgba(120,70,40,.30);white-space:nowrap; transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;} .hero-trust i:hover{transform:translateY(-2px);box-shadow:0 2px 5px rgba(0,0,0,.05),0 14px 30px -12px rgba(120,70,40,.38);} .hero-trust i b{color:var(--brand);font-size:15.5px;font-weight:800;} @media(max-width:760px){ .hero-trust{gap:6px;} .hero-trust i{font-size:12px;padding:7px 12px;gap:5px;} .hero-trust i b{font-size:13.5px;} } .h-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;border:none;font-size:18px;cursor:pointer;z-index:4;display:none;transition:background .12s;} .h-nav:hover{background:rgba(0,0,0,.55);} .h-prev{left:18px;}.h-next{right:18px;} .h-nav{width:46px;height:46px;font-size:22px;background:rgba(255,255,255,.85);color:#111114;box-shadow:0 4px 14px rgba(0,0,0,.18);} .h-nav:hover{background:var(--surface);} .h-dots{position:absolute;bottom:9px;left:0;right:0;justify-content:center;display:flex;gap:2px;z-index:4;} .h-dots button{position:relative;width:24px;height:24px;border:0;background:transparent;cursor:pointer;padding:0;transition:width .3s ease;} .h-dots button::before{content:'';position:absolute;width:9px;height:9px;left:50%;top:50%;transform:translate(-50%,-50%); border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 1px 4px rgba(0,0,0,.25);} .h-dots button.on{width:38px;} .h-dots button.on::before{width:34px;border-radius:5px;background:rgba(255,255,255,.55);} /* จุดที่กำลังแสดงจะมีแถบสีวิ่งเต็มพอดีกับเวลาที่เปลี่ยนรูป — บอกจังหวะล่วงหน้า */ .h-dots button.on::after{content:'';position:absolute;left:2px;right:2px;top:8px;height:9px;border-radius:5px;transform-origin:left center; background:var(--brand);animation:heroBar var(--hero-dur,6s) linear forwards;} .h-dots.paused button.on::after{animation-play-state:paused;} @keyframes heroBar{from{transform:scaleX(0);}to{transform:scaleX(1);}} @media(prefers-reduced-motion:reduce){.h-dots button.on::after{animation:none;transform:scaleX(1);}} /* ═══ แถบจุดแข็ง 4 ข้อ ใต้แบนเนอร์ ═══ ไอคอน + หัวข้อ + คำอธิบายสั้น มีเส้นคั่นระหว่างช่อง ตอบคำถามที่ลูกค้าสงสัยที่สุดตั้งแต่ยังไม่ทันเลื่อน: ของแท้ไหม มีหน้าร้านไหม ผ่อนยังไง ส่งไหม */ /* แถบจุดแข็ง: ไม่มีเส้นคั่นแนวตั้ง ใช้ระยะห่างแทน ดูโปร่งกว่า */ .tbar-wrap{background:linear-gradient(180deg,var(--surface),var(--surface));border-bottom:1px solid rgba(0,0,0,.045);} .tbar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 26px;padding:26px 0 28px;} .tbar:empty{display:none;} .tbar .ti{display:flex;align-items:center;gap:14px;padding:2px 0;} .tbar .ti i{flex:0 0 44px;width:44px;height:44px;border-radius:15px;display:flex;align-items:center; justify-content:center;background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5));color:var(--brand,#ea580c); transition:transform .3s cubic-bezier(.22,.9,.3,1);} .tbar .ti:hover i{transform:translateY(-2px) scale(1.06);} .tbar .ti svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .tbar .ti b{display:block;font-size:14.5px;font-weight:800;line-height:1.3;} .tbar .ti span{display:block;font-size:12.5px;color:var(--sub);line-height:1.4;margin-top:2px;} @media(max-width:900px){ .tbar{grid-template-columns:repeat(2,1fr);gap:18px 18px;padding:20px 0 22px;} .tbar .ti{padding:0;} } @media(max-width:420px){ .tbar .ti{gap:10px;} .tbar .ti i{flex:0 0 36px;width:36px;height:36px;border-radius:10px;} .tbar .ti svg{width:19px;height:19px;} .tbar .ti b{font-size:13px;} .tbar .ti span{font-size:11.5px;} } /* ═══ รุ่นขายดี — การ์ดแนวนอน รูปซ้าย ข้อความขวา ═══ */ .best{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;} .best:empty{display:none;} .best .bc{display:flex;align-items:center;gap:14px;background:var(--soft,var(--surface)); border:1px solid transparent;border-radius:18px;padding:14px;cursor:pointer; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;} .best .bc:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line);background:var(--surface);} .best .bi{position:relative;flex:0 0 116px;width:116px;aspect-ratio:1/1;border-radius:14px; background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center;} .best .bi img{width:100%;height:100%;object-fit:contain;padding:8px;} .best .bi .ph{font-size:11px;color:var(--ink-4);text-align:center;padding:6px;line-height:1.4;} .best .bd{min-width:0;flex:1;} .best .bdg{display:inline-block;background:#fde68a;color:#7c4a03;font-size:10.5px;font-weight:800; padding:3px 9px;border-radius:999px;margin-bottom:7px;} .best h3{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.2px; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .best .bp{font-size:17px;font-weight:800;color:var(--ink);margin-top:5px;} .best .bs{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.45; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .best .bbtn{margin-top:10px;display:inline-flex;align-items:center;gap:7px;background:var(--solid);color:#fff; border:none;font-family:inherit;font-size:12.5px;font-weight:800;padding:9px 17px;border-radius:999px;cursor:pointer; transition:background .18s;} .best .bbtn:hover{background:var(--brand);} @media(max-width:1000px){.best{grid-template-columns:repeat(2,1fr);}} @media(max-width:660px){ .best{grid-template-columns:1fr;gap:10px;} .best .bi{flex:0 0 96px;width:96px;} .best h3{font-size:14px;} } /* ═══ ตารางราคารับซื้อ ═══ */ .bb-sec{margin-top:22px;} .bb-sub{font-size:14px;color:var(--sub);margin-top:5px;} .bb-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 14px;} .bb-pick{flex:1 1 320px;display:flex;align-items:center;gap:12px;background:var(--surface); border-radius:16px;padding:11px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 10px 26px -14px rgba(120,70,40,.32);} .bb-pick label{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;} .bb-pick select{flex:1;min-width:0;border:0;outline:0;font-family:inherit;font-size:15px; background:transparent;color:var(--ink);cursor:pointer;padding:4px 0;} .bb-count{font-size:13px;color:var(--sub);white-space:nowrap;} .bb-list{display:grid;gap:9px;} .bb-grp{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.3px; margin:14px 0 2px;text-transform:uppercase;} .bb-grp:first-child{margin-top:0;} .bb-row{display:flex;align-items:center;justify-content:space-between;gap:16px; background:var(--surface);border-radius:16px;padding:15px 20px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 10px 24px -16px rgba(120,70,40,.28); transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;} .bb-row:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(0,0,0,.05),0 16px 34px -18px rgba(120,70,40,.4);} .bb-row .bn{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;min-width:0;} .bb-row .bv{font-size:16.5px;font-weight:800;color:var(--brand);white-space:nowrap;} .bb-row .bv small{font-size:12px;font-weight:700;color:var(--sub);display:block;text-align:right;margin-bottom:-2px;} .bb-empty{text-align:center;color:var(--sub);font-size:14px;padding:28px 0;} .bb-foot{margin-top:20px;background:var(--surface);border-radius:18px;padding:18px 22px;} .bb-foot p{font-size:12.5px;color:#8a5a3c;line-height:1.6;} .bb-cta{display:inline-flex;align-items:center;gap:8px;margin-top:13px;background:var(--green);color:#fff; font-size:14px;font-weight:800;padding:12px 22px;border-radius:999px; transition:transform .25s cubic-bezier(.22,.9,.3,1);} .bb-cta:hover{transform:translateY(-2px);} @media(max-width:520px){ .bb-row{padding:13px 16px;gap:10px;} .bb-row .bn{font-size:13.5px;} .bb-row .bv{font-size:15px;} } /* ═══ ทางเข้าหน้าความรู้ (หน้าแรก) ═══ */ .helps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px;} .helps:empty{display:none;} .helps a{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:16px;padding:17px 20px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 10px 24px -16px rgba(120,70,40,.26); transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;} .helps a:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(0,0,0,.05),0 18px 36px -18px rgba(120,70,40,.4);} .helps i{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5));color:var(--brand,#ea580c);} .helps svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .helps b{display:block;font-size:14.5px;font-weight:800;line-height:1.3;} .helps span{display:block;font-size:12px;color:var(--sub);line-height:1.45;margin-top:3px;} .helps em{margin-left:auto;font-style:normal;color:var(--ink-4);font-size:17px;transition:transform .3s cubic-bezier(.22,.9,.3,1);} .helps a:hover em{transform:translateX(4px);color:var(--brand);} @media(max-width:900px){.helps{grid-template-columns:1fr;gap:9px;}} /* ═══ ประเมินราคาอัตโนมัติ ═══ */ .qt-sec{margin-top:22px;} .qt-tabs{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px;margin:18px 0 20px;} .qt-tabs button{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700; color:var(--sub);padding:11px 24px;border-radius:999px;cursor:pointer;transition:all .28s cubic-bezier(.22,.9,.3,1);} .qt-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08);} .qt-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;} @media(max-width:900px){.qt-wrap{grid-template-columns:1fr;}} .qt-form{background:var(--surface);border-radius:20px;padding:26px 28px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 14px 32px -20px rgba(120,70,40,.3);} .qt-fld{margin-bottom:20px;} .qt-fld>label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;} .qt-fld>label i{color:#e24b4a;font-style:normal;} .qt-fld select,.qt-fld input{width:100%;font-family:inherit;font-size:15px;color:var(--ink); border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--surface);outline:0; transition:border-color .2s,box-shadow .2s;} .qt-fld select:focus,.qt-fld input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,106,42,.13);} .qt-fld small{display:block;font-size:12px;color:var(--sub);margin-top:6px;} .qt-pref-intro{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(135deg,var(--surface),var(--surface)); border:1px solid #ffe1d2;border-radius:16px;padding:16px 18px;margin-bottom:22px;} .qt-pref-intro i{flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:var(--grad); color:#fff;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center;} .qt-pref-intro b{display:block;font-size:15px;margin-bottom:3px;} .qt-pref-intro span{display:block;font-size:12.5px;color:var(--sub);line-height:1.55;} .qt-grp{margin-bottom:22px;} .qt-grp h4{font-size:14px;font-weight:700;margin-bottom:10px;} .qt-opts{display:flex;flex-wrap:wrap;gap:8px;} .qt-opts label{display:inline-flex;align-items:center;gap:8px;cursor:pointer; border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600; color:var(--txt);transition:all .22s cubic-bezier(.22,.9,.3,1);background:var(--surface);} .qt-opts label:hover{border-color:var(--line);} .qt-opts input{position:absolute;opacity:0;pointer-events:none;} .qt-opts label.on{border-color:var(--brand);background:var(--surface);color:var(--brand);} .qt-opts label .d{font-size:12px;font-weight:700;opacity:.75;} .qt-terms{display:flex;flex-wrap:wrap;gap:9px;} .qt-terms button{border:1.5px solid var(--line);background:var(--surface);border-radius:14px; padding:12px 18px;font-family:inherit;cursor:pointer;text-align:center;min-width:104px; transition:all .22s cubic-bezier(.22,.9,.3,1);} .qt-terms button.on{border-color:var(--brand);background:var(--surface);} .qt-terms button b{display:block;font-size:15px;font-weight:800;color:var(--ink);} .qt-terms button.on b{color:var(--brand);} .qt-terms button span{display:block;font-size:11.5px;color:var(--sub);margin-top:2px;} /* งบต่อเดือนต้องเป็นคนละตัวเลือกเสมอ ป้องกันข้อความหลายยอดดูเหมือนถูกต่อเป็นก้อนเดียว */ #qi-perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,max-content));gap:9px;} #qi-perms button{width:104px;min-width:104px;white-space:nowrap;} @media(max-width:480px){ #qi-perms{grid-template-columns:repeat(2,minmax(0,1fr));} #qi-perms button{width:100%;min-width:0;} } .qt-sum{position:sticky;top:88px;} @media(max-width:900px){.qt-sum{position:static;}} .qt-card{background:var(--surface);border-radius:20px;padding:24px 24px 22px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 16px 36px -20px rgba(120,70,40,.34);} .qt-card h3{font-size:17px;font-weight:800;margin-bottom:14px;} .qt-card.pref .qt-pic{aspect-ratio:4/3;} .qt-card.pref .qt-lines{border-top:0;padding-top:2px;} .qt-card.pref .qt-lines .l{background:var(--surface);border-radius:11px;padding:10px 12px;margin-bottom:8px;} .qt-card.pref .qt-lines .l span:first-child{color:var(--sub);} .qt-pic{aspect-ratio:1/1;border-radius:16px;background:var(--surface);margin-bottom:16px; display:flex;align-items:center;justify-content:center;overflow:hidden;} .qt-pic:empty{display:none;} .qt-pic img{width:100%;height:100%;object-fit:contain;padding:14px;} .qt-pic .ph{font-size:12.5px;color:var(--ink-4);text-align:center;padding:12px;line-height:1.5;} .qt-head{font-size:15px;font-weight:800;color:var(--brand);line-height:1.45;margin-bottom:14px;} .qt-head:empty{display:none;} .qt-lines{border-top:1px solid var(--line);padding-top:12px;} .qt-lines .l{display:flex;justify-content:space-between;gap:12px;font-size:13.5px; color:var(--txt);padding:6px 0;line-height:1.5;} .qt-lines .l span:last-child{font-weight:700;white-space:nowrap;} .qt-lines .l.minus span:last-child{color:#e24b4a;} .qt-lines .l.plus span:last-child{color:#1d9e75;} .qt-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px; border-top:1.5px solid var(--line);margin-top:10px;padding-top:14px;font-size:14px;font-weight:700;} .qt-total b{font-size:24px;font-weight:800;color:var(--brand);letter-spacing:-.5px;} .qt-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px; background:var(--green);color:#fff;font-size:14.5px;font-weight:800;padding:14px;border-radius:999px; transition:transform .25s cubic-bezier(.22,.9,.3,1);} .qt-cta:hover{transform:translateY(-2px);} .qt-copy{width:100%;margin-top:9px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px; padding:12px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--txt);cursor:pointer;transition:border-color .2s;} .qt-copy:hover{border-color:var(--solid);} .qt-copy.done{border-color:#1d9e75;color:#1d9e75;} .qt-note{font-size:11.5px;color:var(--sub);line-height:1.6;margin-top:13px;} @media(max-width:560px){ .qt-form{padding:20px 18px;} .qt-card{padding:20px 18px;} .qt-tabs button{padding:10px 16px;font-size:13px;} } /* ═══ บทความ ═══ */ /* บรรทัดยาวเกิน 80 ตัวอักษรอ่านยากมาก จำกัดความกว้างไว้แล้วจัดกึ่งกลาง */ .bg-sec{margin-top:22px;} .bg-sec .sec-h,.bg-card{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:18px 20px;margin:0 0 12px;} .bg-card h3{margin:0 0 6px;font-size:18px;line-height:1.35;} .bg-card h3 a{color:var(--ink);text-decoration:none;} .bg-card h3 a:hover{color:var(--brand);text-decoration:underline;} .bg-lead-sm{margin:6px 0 10px;color:var(--sub);font-size:14.5px;line-height:1.65;} .bg-more a{color:var(--brand);font-weight:700;font-size:14px;text-decoration:none;} .bg-more a:hover{text-decoration:underline;} .bg-one{max-width:760px;margin:0 auto;} .bg-one h1{font-size:clamp(23px,4.4vw,33px);line-height:1.25;margin:0 0 10px;} .bg-back{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);} .bg-back a{color:var(--brand);font-weight:700;text-decoration:none;} .bg-back a:hover{text-decoration:underline;} .bg-list{max-width:820px;margin-left:auto;margin-right:auto;} .bg-date{font-size:12.5px;color:var(--sub);margin:-4px 0 10px;font-weight:600;} .bg-list{display:grid;gap:16px;margin-top:18px;} .bg-art{background:var(--surface);border-radius:18px;padding:30px 34px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 12px 28px -18px rgba(120,70,40,.28);} .bg-art h3{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.45;margin-bottom:12px;} .bg-art p{font-size:15px;line-height:1.9;color:var(--txt);margin-bottom:13px;} .bg-art p:last-child{margin-bottom:0;} /* บทสรุปย่อหน้าแรก — ท่อนที่คนอ่านจริงและ AI หยิบไปตอบ */ .bg-art .bg-img{display:block;width:100%;height:auto;aspect-ratio:1200/630; object-fit:cover;border-radius:14px;margin:0 0 16px;background:var(--surface-2);} .bg-art .bg-lead{font-size:16px;font-weight:600;line-height:1.85;color:var(--ink); border-left:3px solid var(--brand);padding-left:14px;margin-bottom:18px;} .bg-art h4{font-size:16px;font-weight:800;letter-spacing:-.2px;line-height:1.5; margin:20px 0 10px;color:var(--ink);} .bg-art ul{margin:0 0 13px;padding-left:20px;} .bg-art li{font-size:15px;line-height:1.85;color:var(--txt);margin-bottom:7px;} .bg-art li:last-child{margin-bottom:0;} /* ตารางกว้างกว่าจอมือถือได้ ให้เลื่อนในกล่องตัวเอง ไม่ดันทั้งหน้าให้เลื่อนข้าง */ .bg-tw{overflow-x:auto;margin:0 0 15px;-webkit-overflow-scrolling:touch;} .bg-art table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px;} .bg-art th,.bg-art td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line); line-height:1.7;vertical-align:top;} .bg-art th{font-size:13px;font-weight:800;color:var(--ink);background:var(--surface-2); white-space:nowrap;} .bg-art td{color:var(--txt);} /* ลิงก์ในเนื้อบทความ ต้องเห็นชัดว่ากดได้ ไม่งั้นคนอ่านกดไม่ถูก */ .bg-art p a,.bg-art li a,.bg-art td a,.bg-art th a,.bg-art h4 a{ color:var(--brand);font-weight:700;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1.5px;} .bg-art p a:hover,.bg-art li a:hover,.bg-art td a:hover{opacity:.72;} .bg-art tbody tr:last-child td{border-bottom:0;} .bg-art td:first-child{font-weight:700;color:var(--ink);} @media(max-width:520px){ .bg-art{padding:20px 18px;border-radius:16px;} .bg-art h3{font-size:16.5px;} .bg-art p{font-size:14px;line-height:1.85;} .bg-art .bg-lead{font-size:15px;padding-left:12px;} .bg-art h4{font-size:15px;} .bg-art li{font-size:14px;line-height:1.8;} .bg-art table{font-size:13.5px;min-width:360px;} .bg-art th,.bg-art td{padding:9px 11px;} } /* ═══ คำถามที่พบบ่อย ═══ */ /* คำถาม-คำตอบ: กล่องเดียวต่อเนื่อง มีเส้นคั่นบางๆ อ่านไล่ลงมาได้ลื่นกว่าการ์ดแยกใบ */ .faq-sec{margin-top:22px;} .faq-sec .sec-h,.faq-list{max-width:820px;margin-left:auto;margin-right:auto;} .faq-list{background:var(--surface);border-radius:20px;margin-top:18px;overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.035),0 14px 32px -20px rgba(120,70,40,.3);} .ans-wrap{margin:18px auto;} .ansblk{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;} .ansblk{text-align:center;} .ansblk h2{font-size:20px;font-weight:800;margin:0 0 10px;letter-spacing:-.2px;} .ansblk .ans-lead{margin:0 auto 4px;font-size:15px;line-height:1.75;color:var(--ink);max-width:62ch;} /* คำถามยังชิดซ้าย เพราะมีเลขลำดับนำหน้า จัดกลางแล้วอ่านยาก */ .ansblk .ans-faq{margin:16px auto 0;max-width:62ch;text-align:left;} .ansblk .ans-faq .fq summary{padding-top:12px;padding-bottom:12px;font-size:14.5px;} .ansblk .ans-more{margin:12px 0 0;font-size:14px;} .ansblk .ans-more a{color:var(--brand);font-weight:700;text-decoration:none;} .ansblk .ans-more a:hover{text-decoration:underline;} @media(min-width:900px){ .ansblk{padding:26px 28px;} } @media(max-width:560px){.ansblk{padding:17px 15px;border-radius:13px;}.ansblk h2{font-size:17.5px;}.ansblk .ans-lead{font-size:14.5px;}} /* หน้านโยบายคืนสินค้า /return-policy */ .rp-top{display:grid;gap:12px;margin:0 0 18px;} @media(min-width:700px){.rp-top{grid-template-columns:repeat(3,1fr);}} .rp-top div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;} .rp-top b{display:block;font-size:21px;font-weight:800;color:var(--brand);letter-spacing:-.4px;line-height:1.3;} .rp-top span{display:block;font-size:13.5px;color:var(--sub);line-height:1.65;margin-top:4px;} .rp-grid{display:grid;gap:14px;} @media(min-width:760px){.rp-grid{grid-template-columns:1fr 1fr;}} .rp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;} .rp-wide{margin-top:14px;} .rp-card h3{font-size:17px;font-weight:800;margin:0 0 13px;} .rp-card ul,.rp-card ol{margin:0;padding:0;list-style:none;} .rp-yes li,.rp-cond li{position:relative;padding-left:26px;margin-bottom:10px; font-size:14.5px;line-height:1.75;color:var(--ink);} .rp-yes li:last-child,.rp-cond li:last-child{margin-bottom:0;} .rp-yes li::before{content:"✓";position:absolute;left:0;top:0;color:#1e7e34;font-weight:800;} .rp-cond li::before{content:"•";position:absolute;left:7px;top:0;color:var(--brand);font-weight:800;} .rp-steps{counter-reset:rp;} .rp-steps li{counter-increment:rp;position:relative;padding-left:34px;margin-bottom:13px; font-size:14.5px;line-height:1.75;color:var(--ink);} .rp-steps li:last-child{margin-bottom:0;} .rp-steps li::before{content:counter(rp);position:absolute;left:0;top:2px;width:22px;height:22px; border-radius:50%;background:var(--brand);color:#fff;font-size:12.5px;font-weight:800; display:grid;place-content:center;} .rp-steps b{color:var(--ink);font-weight:700;} .rp-fee{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line); font-size:14.5px;line-height:1.7;color:var(--ink);} .rp-fee:first-child{padding-top:0;} .rp-fee:last-child{border-bottom:none;padding-bottom:0;} .rp-fee b{flex:none;min-width:140px;color:var(--ink);font-weight:700;} .rp-p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink);} .rp-note{margin-top:18px;background:var(--surface-2);border-radius:14px;padding:17px 20px; font-size:13.5px;line-height:1.8;color:var(--ink-2);} .rp-note b{color:var(--ink);} .rp-note a{color:var(--brand);font-weight:700;text-decoration:none;} .rp-note a:hover{text-decoration:underline;} @media(max-width:560px){ .rp-card{padding:16px 15px;border-radius:13px;} .rp-fee{flex-direction:column;gap:2px;}.rp-fee b{min-width:0;}} /* หน้าจองล่วงหน้า — แถบเปิดหน้าโทนเข้ม ให้รู้สึกว่าเป็นหน้าแคมเปญพิเศษ */ .pre-hero{background:linear-gradient(150deg,#2a211c,#16110e);color:#f5efe6; border-radius:20px;padding:38px 30px 32px;margin:0 0 30px;position:relative;overflow:hidden;} .pre-hero::after{content:"";position:absolute;inset:auto -12% -55% 38%;height:360px;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(244,90,23,.28),transparent 62%);} .pre-hero>*{position:relative;z-index:1;} .ph-badge{display:none;align-items:center;gap:8px;background:rgba(245,239,230,.1); border:1px solid rgba(245,239,230,.2);border-radius:999px;padding:6px 15px; font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:15px;} .ph-badge.on{display:inline-flex;} .ph-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;} .pre-hero h2,.pre-hero h1{font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.2; margin:0;letter-spacing:-.4px;max-width:15ch;color:#f8f3ec;} .pre-hero em{font-style:normal;color:#ffa274;display:block;} .ph-sub{margin:14px 0 0;color:#b7a896;font-size:16px;line-height:1.75;max-width:48ch;} .ph-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;} .ph-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--brand); color:#fff;font-weight:800;font-size:15px;border-radius:999px;padding:13px 26px;text-decoration:none;} .ph-btn:hover{filter:brightness(1.06);} .ph-btn.ghost{background:transparent;color:#f5efe6;border:1px solid rgba(245,239,230,.3);} .ph-btn.ghost:hover{border-color:rgba(245,239,230,.65);filter:none;} .ph-trust{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:22px;padding-top:18px; border-top:1px solid rgba(245,239,230,.14);font-size:13.5px;color:#b7a896;} .ph-trust b{color:#f8f3ec;font-weight:700;} .pre-hero b,.ph-badge b{color:#f8f3ec;} /* แถบแคมเปญใต้หัวเว็บ — ใช้สีแบรนด์เต็มความกว้างให้สะดุดตา มีแสงกวาดผ่านช้าๆ เพื่อดึงสายตาโดยไม่กะพริบจนรำคาญ */ /* แถบแคมเปญใต้หัวเว็บ — ต้องแย่งสายตากับแบนเนอร์ใหญ่ที่อยู่ถัดลงไปให้ได้ จึงใช้ทั้งลายทางเฉียง จุดกะพริบ และปุ่มขาวเม็ดโต แทนการใส่อีโมจิ */ .pre-strip{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center; gap:8px 16px;flex-wrap:wrap;background:linear-gradient(100deg,#ff8a3d,#f4500f 52%,#c93b06); color:#fff;text-decoration:none;padding:15px 18px;font-size:16px;line-height:1.45; text-align:center;border-bottom:3px solid #a8300a;} /* ลายทางเฉียงจางๆ ให้ดูเป็นแถบประกาศ ไม่ใช่พื้นสีเรียบ */ .pre-strip::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 12px,transparent 12px 30px);} .pre-strip::before{content:"";position:absolute;top:0;bottom:0;left:-45%;width:32%;z-index:1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-18deg);animation:preShine 4.5s ease-in-out infinite;pointer-events:none;} @keyframes preShine{0%{left:-45%}50%{left:118%}100%{left:118%}} .pre-strip>*{position:relative;z-index:2;} .pre-strip b{color:#fff;font-weight:800;letter-spacing:-.2px;display:inline-flex;align-items:center;gap:9px;} /* จุดขาวเต้น = สัญญาณว่ากำลังเปิดรับอยู่ตอนนี้ */ .pre-strip b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--surface);flex:none; box-shadow:0 0 0 0 rgba(255,255,255,.85);animation:preDot 1.8s ease-out infinite;} @keyframes preDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)} 70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} .pre-strip span{color:rgba(255,255,255,.92);font-size:14.5px;} .pre-strip i{font-style:normal;background:var(--surface);color:#c93b06;font-weight:800;white-space:nowrap; border-radius:999px;padding:8px 20px;font-size:15px; box-shadow:0 3px 12px rgba(0,0,0,.22),0 0 0 3px rgba(255,255,255,.22);} .pre-strip:hover i{background:#fff4ee;transform:translateY(-1px);} .pre-strip i{transition:background .15s,transform .15s;} .pre-strip.pg-hide{display:none;} @media(max-width:560px){.pre-strip{padding:12px 14px;font-size:14px;gap:6px 10px;border-bottom-width:2px;} .pre-strip span{display:none;} .pre-strip b::before{width:8px;height:8px;} .pre-strip i{padding:6px 15px;font-size:13px;}} @media(prefers-reduced-motion:reduce){ .pre-strip::before{animation:none;display:none;} .pre-strip b::before{animation:none;}} .pre-lead{margin:0 0 20px;} .pre-lead-2{margin-top:38px;} .pre-eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--brand);margin-bottom:7px;} .pre-lead h3{font-size:clamp(19px,3vw,25px);font-weight:800;margin:0;letter-spacing:-.3px;} .pre-note{margin:9px 0 0;color:var(--sub);font-size:14.5px;line-height:1.75;max-width:58ch;} .pre-wrap{display:grid;gap:18px;align-items:start;} @media(min-width:960px){.pre-wrap{grid-template-columns:1.05fr .95fr;gap:22px;}} .pre-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 20px 22px; box-shadow:0 1px 3px rgba(0,0,0,.035),0 14px 32px -22px rgba(120,70,40,.28);} .pre-step{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;margin:18px 0 10px;} .pre-step:first-child{margin-top:0;} .pre-step b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%; background:var(--brand);color:#fff;font-size:12.5px;flex:none;} .pre-models{display:grid;gap:9px;} .pre-mod{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:13px; padding:13px 15px;cursor:pointer;font:inherit;transition:border-color .15s,background .15s;} .pre-mod:hover{border-color:var(--line);} .pre-mod.on{border-color:var(--brand);background:var(--surface);} .pre-mod .pm-n{font-weight:800;font-size:15px;} .pre-mod .pm-d{display:block;font-weight:500;font-size:12.5px;color:var(--sub);margin-top:2px;} .pre-mod .pm-p{font-weight:800;font-size:14.5px;color:var(--brand);white-space:nowrap;text-align:right;} .pm-p small{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-top:2px;} .pre-mod .pm-p.soon{color:var(--ink-3);font-weight:600;font-size:13px;} .pre-mod .pm-flag{position:absolute;top:-8px;left:14px;background:#fff2ec;color:#a03f12; border:1px solid #ffd0b8;border-radius:5px;padding:2px 8px;font-size:10.5px;font-weight:800;letter-spacing:.03em;} .pre-chips{display:flex;flex-wrap:wrap;gap:8px;} .pre-chip{background:var(--surface-2);border:1.5px solid transparent;border-radius:999px;padding:8px 15px; font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;} .pre-chip:hover{background:var(--surface-2);} .pre-chip.on{background:#fff2ec;border-color:var(--brand);color:#a03f12;} .pre-chip.none{opacity:.6;cursor:default;background:transparent;font-weight:500;} /* แคมเปญ iPhone 18 บนหน้าแรก สีขาวเขียนตายตัว ไม่ใช้โทเคน --ink เพราะพื้นเป็นสีแบรนด์เหมือนกันทั้งสองธีม */ .ip18{margin:0 0 6px;} .ip18-in{background:var(--grad);border-radius:22px;padding:30px 32px; display:grid;gap:26px;align-items:center;grid-template-columns:1fr; box-shadow:0 12px 34px rgba(196,74,18,.22);} @media(min-width:940px){.ip18-in{grid-template-columns:1.05fr 1fr;padding:34px 38px;}} .ip18-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.32);color:#fff;font-size:12.5px;font-weight:800; padding:5px 13px;border-radius:999px;letter-spacing:.2px;} .ip18-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none; animation:ip18blink 1.9s ease-in-out infinite;} @keyframes ip18blink{0%,100%{opacity:1;}50%{opacity:.32;}} .ip18 h2{color:#fff;font-size:27px;line-height:1.25;letter-spacing:-.7px; margin:13px 0 9px;text-wrap:balance;} @media(min-width:940px){.ip18 h2{font-size:31px;}} .ip18 p{color:rgba(255,255,255,.93);font-size:14.5px;line-height:1.75;margin:0 0 15px;max-width:46ch;} .ip18-when{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:19px;} .ip18-when span{background:rgba(0,0,0,.17);color:#fff;font-size:12.5px;font-weight:700; padding:6px 12px;border-radius:9px;} .ip18-go{display:inline-block;background:#fff;color:#c2400a;font-weight:850;font-size:15px; padding:13px 26px;border-radius:12px;text-decoration:none; box-shadow:0 5px 16px rgba(0,0,0,.17);transition:transform .15s,box-shadow .15s;} .ip18-go:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(0,0,0,.22);} .ip18-r{display:grid;gap:10px;} .ip18-c{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.96); border-radius:15px;padding:13px 16px;text-decoration:none;} .ip18-c:hover{background:#fff;} .ip18-c .nm{flex:1;min-width:0;} .ip18-c .nm b{display:block;font-size:14.5px;color:#1d1d1f;letter-spacing:-.2px;} .ip18-c .dots{display:flex;gap:4px;margin-top:6px;} .ip18-c .dots i{width:12px;height:12px;border-radius:50%;display:block; border:1px solid rgba(0,0,0,.17);box-shadow:inset 0 -2px 4px rgba(0,0,0,.14);} .ip18-c .pz{text-align:right;flex:none;} .ip18-c .pz b{display:block;font-size:15.5px;color:#c2400a;} .ip18-c .pz small{display:block;font-size:11.5px;font-weight:700;color:#6e6e73;margin-top:2px;} @media(max-width:560px){.ip18-in{padding:24px 20px;border-radius:18px;} .ip18 h2{font-size:23px;}.ip18-c{padding:11px 13px;gap:9px;} .ip18-c .nm b{font-size:13.5px;}.ip18-c .pz b{font-size:14.5px;}} @media(prefers-reduced-motion:reduce){.ip18-tag::before{animation:none;} .ip18-go:hover{transform:none;}} .bg-demo{background:#3f3f46;color:#fff;} .bg-fresh{background:#0a7d3f;color:#fff;} .bg-wait{background:#6e6e73;color:#fff;} /* เครื่องที่ขายไปแล้ว หรี่รูปลงให้เห็นว่ายังไม่ใช่ของพร้อมขาย แต่ยังกดดูรายละเอียดได้ */ .card:has(.c-sold) .ph{filter:grayscale(.6);opacity:.72;} .card:has(.c-sold) .price{color:var(--ink-3);} .pre-cchip{display:inline-flex;align-items:center;gap:8px;padding-left:9px;} .pre-dot{width:19px;height:19px;border-radius:50%;flex:none;display:block; border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 -3px 6px rgba(0,0,0,.13);} .pre-sum{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:12px 14px; font-size:14px;line-height:1.7;margin:0 0 15px;} .pre-sum b{color:var(--ink);} .pre-f{display:block;margin:0 0 12px;font-size:13.5px;font-weight:700;color:var(--ink);} .pf-opt{font-weight:400;color:var(--ink-3);font-size:12.5px;} .pf-hint{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.6;} .pre-f input,.pre-f select,.pre-f textarea{display:block;width:100%;margin-top:6px; border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font:inherit; font-weight:500;background:var(--surface);color:var(--ink);} .pre-f input:focus,.pre-f select:focus,.pre-f textarea:focus{outline:none;border-color:var(--brand);} .pre-f textarea{resize:vertical;min-height:64px;} .pre-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;} .pre-pay label{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line); border-radius:999px;padding:8px 15px;font-size:14px;font-weight:600;cursor:pointer;background:var(--surface);} .pre-pay input{accent-color:var(--brand);margin:0;width:auto;} .pre-pay label:has(input:checked){border-color:var(--brand);background:#fff2ec;color:#a03f12;} .pre-go{width:100%;border:0;border-radius:13px;background:var(--brand);color:#fff; font:inherit;font-weight:800;font-size:15.5px;padding:15px;cursor:pointer;margin-top:6px;} .pre-go:hover{filter:brightness(1.05);} .pre-go[disabled]{opacity:.6;cursor:default;filter:none;} .pre-msg{margin:11px 0 0;font-size:13.5px;font-weight:700;text-align:center;min-height:1px;} .pre-msg.bad{color:#c0392b;} .pre-micro{margin:10px 0 0;font-size:12.5px;color:#78788a;text-align:center;line-height:1.6;} .pre-fine{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line); font-size:12.5px;line-height:1.65;color:var(--ink-3);} .pre-reasons{display:grid;gap:22px;} @media(min-width:760px){.pre-reasons{grid-template-columns:repeat(3,1fr);}} .pre-reasons .pr-n{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em; color:var(--brand);margin-bottom:6px;} .pre-reasons b{display:block;font-size:16.5px;line-height:1.45;margin-bottom:6px;} .pre-reasons p{margin:0;color:var(--sub);font-size:14.5px;line-height:1.75;} .pre-cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-top:26px;} .pre-cmp{width:100%;border-collapse:collapse;min-width:500px;font-size:14.5px;} .pre-cmp th,.pre-cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);} .pre-cmp tr:last-child td{border-bottom:none;} .pre-cmp thead th{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3);background:var(--surface);} .pre-cmp thead th:first-child{width:40%;} .pre-cmp td:first-child{color:var(--sub);} .pre-cmp .c-yes{color:#1e7e34;font-weight:700;} .pre-cmp .c-no{color:var(--ink-3);} .pre-faq{margin-top:0;} .pre-how{margin-top:34px;display:grid;gap:12px;} @media(min-width:760px){.pre-how{grid-template-columns:repeat(3,1fr);}} .pre-how div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px;} .pre-how b{display:block;font-size:14.5px;margin-bottom:5px;} .pre-how p{margin:0;font-size:13.5px;line-height:1.7;color:var(--sub);} .pre-disc{margin-top:22px;background:var(--surface-2);border-radius:14px;padding:18px 20px; font-size:13.5px;line-height:1.8;color:var(--ink-2);max-width:74ch;} .pre-disc b{color:var(--ink);} .pre-done .pd-t{font-size:20px;font-weight:800;margin:0 0 8px;color:#1e7e34;} .pre-done{text-align:center;padding:8px 0 4px;} .pre-done .pd-s{font-size:14px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;} .pre-done .pd-line{display:inline-block;background:#06c755;color:#fff;font-weight:800; border-radius:12px;padding:13px 26px;text-decoration:none;font-size:15px;} .pd-copy{margin:0 0 16px;text-align:left;} .pd-copy textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px; font:inherit;font-size:13.5px;line-height:1.75;background:var(--surface);color:var(--ink);resize:vertical;} .pd-copy textarea:focus{outline:none;border-color:var(--brand);} .pd-btn{width:100%;margin-top:8px;border:1.5px solid var(--brand);background:var(--surface);color:var(--brand); font:inherit;font-weight:800;font-size:14.5px;border-radius:11px;padding:11px;cursor:pointer; transition:background .15s,color .15s,border-color .15s;} .pd-btn:hover{background:#fff4ef;} .pd-btn.done{background:#e8f7ec;border-color:#28a745;color:#1e7e34;} .pd-hint{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#78788a;text-align:center;} @media(max-width:560px){ .pre-hero{padding:28px 19px 26px;border-radius:15px;} .pre-card{padding:16px 14px 18px;border-radius:14px;} .ph-btn{flex:1 1 100%;} } .fq{border-top:1px solid var(--line);counter-increment:fqn;} .fq:first-child{border-top:0;} .fq summary{cursor:pointer;list-style:none;padding:19px 54px 19px 62px;position:relative; font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.55;transition:background .2s;} .fq summary::-webkit-details-marker{display:none;} /* เลขข้อ ช่วยให้กวาดตาหาได้เร็ว */ .fq summary::before{content:counter(fqn);position:absolute;left:22px;top:18px; width:26px;height:26px;border-radius:9px;background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5)); color:var(--brand);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;} .fq summary::after{content:'';position:absolute;right:24px;top:27px;width:8px;height:8px; border-right:2px solid var(--brand);border-bottom:2px solid var(--brand); transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,.9,.3,1);} .fq[open] summary::after{transform:rotate(-135deg);} .fq summary:hover{background:var(--surface);color:var(--brand);} .fq[open] summary{color:var(--brand);padding-bottom:6px;} .fq p{padding:0 30px 22px 62px;font-size:14.5px;line-height:1.85;color:var(--txt);} .faq-list{counter-reset:fqn;} @media(max-width:560px){ .fq summary{font-size:14px;padding:16px 42px 16px 50px;} .fq summary::before{left:16px;top:15px;width:23px;height:23px;font-size:11.5px;} .fq summary::after{right:18px;top:23px;} .fq p{font-size:13.5px;padding:0 20px 18px 50px;} } /* ═══ QUICK CARDS ═══ */ .quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px;} .quick button{width:100%;font:inherit;color:inherit;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;transition:all .3s ease;} .quick button:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);} .quick .qi{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--band,linear-gradient(135deg,#fff7ed,#fff1e6));display:flex;align-items:center;justify-content:center;color:var(--brand,#ea580c);} .quick .qi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .quick b{font-size:14.5px;display:block;} .quick span{font-size:12px;color:var(--sub);} /* hero trust chips */ .hchips{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 26px;} .hchips span{display:inline-flex;gap:9px;align-items:center;font-size:12.5px;font-weight:600;color:var(--txt);} .hchips i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;} .hchips svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} /* category tiles */ /* ── แถบรุ่นสินค้าแบบ Apple: รูปลอยบนพื้นขาว ชื่ออยู่ใต้รูป เลื่อนซ้าย-ขวาได้ ── */ /* หัวข้อแถว + ลิงก์ดูทั้งหมดด้านขวา */ .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:34px;} .sec-head h2{font-size:clamp(20px,2.3vw,25px);font-weight:800;letter-spacing:-.5px;} .sec-head a{font-size:13.5px;font-weight:700;color:var(--sub);display:flex;align-items:center;gap:6px;white-space:nowrap;} .sec-head a:hover{color:var(--brand);} .sec-head a em{font-style:normal;transition:transform .2s ease;display:inline-block;} .sec-head a:hover em{transform:translateX(4px);} .sec-head + .cats{margin-top:14px;} /* ── หมวดหมู่แบบไอคอนวงกลม ── รูปสินค้าอยู่ในวงกลม ชื่ออยู่ด้านล่าง */ .cats{display:flex;flex-wrap:nowrap;gap:20px;margin-top:22px;align-items:flex-start; overflow-x:auto;overflow-y:hidden; /* เผื่อที่ให้เงาและจังหวะยกตอนชี้เมาส์ ไม่ให้โดนขอบ overflow ตัด */ padding:8px 2px 12px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;} .cats::-webkit-scrollbar{display:none;} .cats a{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px; flex:0 0 auto;width:96px;scroll-snap-align:start; min-width:0;background:transparent;cursor:pointer;border:none;padding:0; transition:transform .22s ease;} .cats a:hover{transform:translateY(-4px);} .cats a.on .ci{box-shadow:0 0 0 3px var(--brand,#FF6A2A),0 8px 18px rgba(234,88,12,.14);} .cats .ci{position:relative;width:96px;height:96px;border-radius:50%;display:flex; align-items:center;justify-content:center;overflow:hidden;background:var(--surface-2); color:var(--ink-4);box-shadow:0 2px 8px rgba(0,0,0,.04); transition:box-shadow .22s ease,transform .22s ease;} .cats .ci img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease;} .cats a:hover .ci img{transform:scale(1.06);} .cats .ci-all{background:var(--surface-2);} .cats .cat-mosaic{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;gap:1px;} .cats .cat-mosaic img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;} .cats .ci svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.3;} .cats b{display:block;max-width:96px;font-size:13.5px;font-weight:700;color:var(--ink); line-height:1.25;letter-spacing:-.2px;text-align:center;white-space:normal;} .cats a .go{display:none;} .cats a > span:not(.go),.cats .cprice{display:none;} @media(max-width:1080px){.cats{gap:16px;}} @media(max-width:760px){ .cats{gap:14px;} .cats a{width:78px;} .cats .ci{width:78px;height:78px;} .cats b{font-size:12.5px;max-width:78px;} } @media(max-width:430px){ .cats{gap:12px;} .cats a{width:68px;} .cats .ci{width:68px;height:68px;} .cats b{font-size:12px;max-width:68px;} .cats .ci svg{width:32px;height:32px;} } /* installment line on card */ .inst{font-size:12px;font-weight:700;color:#6d28d9;background:#f3edff;border-radius:8px;padding:5px 10px;margin-top:8px;display:inline-block;align-self:flex-start;} /* floating search card */ /* กล่องค้นหา: เดิมดึงขึ้น -52px ไปทับปุ่ม "เลือกซื้อสินค้า" ปุ่มย้ายมาอยู่ล่างสุดของกล่องข้อความแล้ว จึงไม่ดึงขึ้นอีก และต้องเว้นระยะให้มากพอ ไม่งั้นขอบการ์ดจะไปชนก้นปุ่ม ดูเหมือนซ้อนกัน */ .float{position:relative;margin:36px 0 4px;background:var(--surface);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.12);padding:22px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;z-index:5;} @media(max-width:640px){.float{margin-top:24px;padding:18px 18px;}} .float h2{font-size:24px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;} .sbox{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;background:var(--soft);border:1.5px solid var(--line);border-radius:999px;padding:5px 6px 5px 18px;} .sbox input{flex:1;border:none;outline:none;background:transparent;font-size:14.5px;font-family:inherit;color:var(--ink);} .sbox button{border:none;background:var(--grad);color:#fff;font-size:13.5px;font-weight:700;padding:11px 24px;border-radius:999px;cursor:pointer;font-family:inherit;} .announce{margin-top:18px;background:var(--grad);color:#fff;font-size:clamp(15px,2vw,19px);font-weight:800;letter-spacing:.2px;padding:18px 28px;border-radius:16px;text-align:center;box-shadow:0 8px 22px rgba(244,81,30,.28);} /* ═══ STATS ═══ */ .stats{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:6px 4px;margin:16px 0 0;box-shadow:var(--shadow);} .stat{flex:1;min-width:180px;display:flex;gap:13px;align-items:center;padding:18px;} .stat i{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand);} .stat i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .stat b{font-size:19px;font-weight:800;display:block;letter-spacing:-.3px;} .stat span{font-size:12.5px;color:var(--sub);} /* quick search chips */ .qchips{display:flex;gap:8px;flex-wrap:wrap;width:100%;padding-top:2px;} .qchips span{font-size:12px;color:var(--sub);align-self:center;} .qchips button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--sub);cursor:pointer;font-family:inherit;transition:all .12s;} .qchips button:hover{border-color:var(--brand,#ea580c);color:var(--brand,#ea580c);} /* ═══ SERVICES ═══ */ /* กล่องบริการ: ไม่มีเส้นขอบ ใช้พื้นอ่อนกับเงาฟุ้งแทน มุมมนกว้าง ดูนุ่มไม่แข็งทื่อ */ .svc-wrap{background:linear-gradient(180deg,var(--surface),var(--surface));border:0;border-radius:34px; padding:30px 26px 26px;margin-top:16px;text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.03),0 18px 50px -18px rgba(120,70,40,.16);} .svc-wrap h2{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:2px;} .svc-wrap h2::after{content:'';display:block;width:34px;height:3px;background:var(--grad); border-radius:3px;margin:10px 0 20px;opacity:.85;} /* จัดกึ่งกลางเสมอ แถวสุดท้ายไม่เหลือช่องโบ๋ + มีคำอธิบายสั้นใต้ชื่อ */ /* ── ไอคอนบริการแบบแผ่นใหญ่ ชื่ออยู่ใต้แผ่น กดได้ทั้งแผ่น ── */ /* กระจายเป็นตาราง แถวละ 5 ช่องบนจอคอม แทนที่จะเรียงยาว 10 ช่องรวดจนไอคอนเล็กจิ๋ว แต่ละช่องเป็นแผ่นกดได้จริง มีขอบจางๆ ตอนชี้ ลูกค้าจะรู้ว่ากดได้ */ .svc{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;max-width:720px;margin:0 auto;} .svc a{position:relative;display:flex;flex-direction:column;align-items:center;gap:11px; flex:0 0 calc((100% - 16px)/5);width:auto;padding:14px 6px 15px;border-radius:20px;background:none; border:1px solid transparent;transition:transform .35s cubic-bezier(.22,.9,.3,1);} .svc a:hover{transform:translateY(-5px);border-color:transparent;background:transparent;} /* แผ่นไอคอน */ .svc .ic{position:relative;width:86px;height:86px;border-radius:28px;display:flex; align-items:center;justify-content:center; transition:box-shadow .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1);} .svc a:hover .ic{box-shadow:0 14px 30px -8px rgba(0,0,0,.16);transform:scale(1.05);} .svc .ic svg{width:40px;height:40px;stroke:currentColor;fill:none; stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;} /* ชื่อบริการอยู่ใต้แผ่น */ .svc .lb{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;text-align:center;} .svc a:hover .lb{color:var(--brand);} .svc .sd{display:none;} /* คำอธิบายย้ายไปอยู่ในป๊อปอัปแทน หน้าแรกจะได้สะอาด */ /* ป้ายมุมขวาบนของแผ่น */ .svc .bdg2{position:absolute;top:-5px;right:-4px;background:currentColor;color:#fff; font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.16);white-space:nowrap;} .svc .bdg2 span{color:#fff;} @media(max-width:760px){ .svc{gap:4px 2px;} .svc a{flex:0 0 calc((100% - 6px)/4);} .svc a{padding:10px 3px 11px;gap:8px;} .svc .ic{width:68px;height:68px;border-radius:19px;} .svc .ic svg{width:32px;height:32px;} .svc .lb{font-size:11.5px;} } @media(max-width:440px){ .svc a{flex:0 0 calc((100% - 4px)/3);} .svc .ic{width:100%;max-width:82px;aspect-ratio:1/1;height:auto;} } /* สีประจำแต่ละบริการ — วนใช้ 10 สี เรียงตามลำดับที่กรอกในแอดมิน พื้นแผ่นใช้สีอ่อน ไอคอนใช้สีเข้ม อ่านง่ายและดูสดใสแบบเดียวกัน */ .sv-0{color:#ea580c;} .sv-0 .ic{background:linear-gradient(160deg,#fff4ec,#ffe3d0);} .sv-1{color:#d97706;} .sv-1 .ic{background:linear-gradient(160deg,#fff8e8,#ffeec4);} .sv-2{color:#2563eb;} .sv-2 .ic{background:linear-gradient(160deg,#eef4ff,#d9e6ff);} .sv-3{color:#16a34a;} .sv-3 .ic{background:linear-gradient(160deg,var(--surface-2),#d3f3de);} .sv-4{color:#0891b2;} .sv-4 .ic{background:linear-gradient(160deg,#ecfbfd,#cdf0f7);} .sv-5{color:#db2777;} .sv-5 .ic{background:linear-gradient(160deg,#fff0f6,#ffd9e8);} .sv-6{color:#7c3aed;} .sv-6 .ic{background:linear-gradient(160deg,var(--surface-2),#e5daff);} .sv-7{color:#0d9488;} .sv-7 .ic{background:linear-gradient(160deg,var(--surface),#cdf0e8);} .sv-8{color:#dc2626;} .sv-8 .ic{background:linear-gradient(160deg,var(--surface-2),#ffdada);} .sv-9{color:#b45309;} .sv-9 .ic{background:linear-gradient(160deg,#fdf6ec,#f6e5cc);} /* ═══ LAYOUT ═══ */ .main{display:block;padding:30px 0 38px;} .main>*{min-width:0;} @media(max-width:860px){.main{padding:24px 0 30px;}} /* sidebar */ .side{display:none;} .side h4{font-size:15px;font-weight:800;margin-bottom:12px;} .cat{list-style:none;border-left:1.5px solid var(--line);margin:4px 0 22px 6px;} .cat li{padding:8px 6px 8px 16px;font-size:13.5px;color:var(--sub);cursor:pointer;position:relative;display:flex;justify-content:space-between;align-items:center;} .cat li:hover{color:var(--ink);} .cat li.on{color:var(--ink);font-weight:700;} .cat li.on::before{content:'';position:absolute;left:-1.5px;top:7px;bottom:7px;width:2.5px;background:var(--grad);border-radius:2px;} .cat .n{font-size:10.5px;font-weight:800;background:var(--red);color:#fff;border-radius:999px;padding:2px 8px;} .cat li:not(.on) .n{background:var(--surface-2);color:var(--sub);} .fgroup{margin-bottom:18px;} .fgroup .lbl{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;} .side select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;background:var(--surface);outline:none;color:var(--ink);} .ck{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--sub);padding:5px 0;cursor:pointer;} .ck input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;} .clearf{border:0;background:transparent;padding:0;font:inherit;font-size:12.5px;color:#b43a13;cursor:pointer;font-weight:600;text-align:left;} @media(max-width:860px){ /* มือถือแสดงเฉพาะหมวดหมู่ ตัวกรองเดสก์ท็อปที่อยู่นอกจอเคยทำให้กล่องสูง และดันรายการสินค้าลงไปจนเกิดช่องว่างขนาดใหญ่ */ .side{display:block;overflow:visible;padding-bottom:0;min-width:0;} .side>div:first-child{min-width:0;width:100%;} .side>div:not(:first-child){display:none;} .cat{display:flex;border:none;margin:0;gap:6px;overflow-x:auto;padding:0 0 8px; scrollbar-width:none;-webkit-overflow-scrolling:touch;} .cat::-webkit-scrollbar{display:none;} .cat li{padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;white-space:nowrap;gap:7px;} .cat li.on{background:var(--solid);color:#fff;border-color:var(--solid);} .cat li.on::before{display:none;} } /* ═══ PRODUCT CARDS ═══ */ .count{font-size:13px;color:var(--sub);margin-bottom:14px;} .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} @media(max-width:1120px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}} /* ── กล่องค้นหาและตัวกรองสินค้าหลัก ── ใช้แทน Sidebar เดิมเพื่อให้เห็นทุกตัวกรองในจุดเดียวทั้งคอมและมือถือ */ .product-finder{background:linear-gradient(180deg,var(--surface),var(--surface));border:1px solid var(--line); border-radius:22px;padding:20px;margin-bottom:28px;box-shadow:0 10px 34px rgba(17,17,20,.055);} .pf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px;} .pf-head h2{font-size:20px;font-weight:850;letter-spacing:-.35px;line-height:1.25;} .pf-head p{font-size:12.5px;color:var(--sub);margin-top:3px;} .pf-clear{border:0;background:transparent;color:#b43a13;font:inherit;font-size:12.5px; font-weight:750;cursor:pointer;white-space:nowrap;padding:6px 0;} .pf-grid{display:grid;grid-template-columns:minmax(230px,1.65fr) repeat(3,minmax(140px,1fr)) auto; align-items:end;gap:10px;} .pf-field{display:block;min-width:0;} .pf-field>span{display:block;font-size:11px;font-weight:750;color:var(--ink-2);margin:0 0 6px 2px;} .pf-control{height:44px;width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--surface); color:var(--ink);font:inherit;font-size:13px;outline:none;transition:border-color .16s,box-shadow .16s;} select.pf-control{padding:0 34px 0 12px;cursor:pointer;} .pf-search{position:relative;} .pf-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px; stroke:var(--ink-2);fill:none;stroke-width:2;pointer-events:none;} .pf-search input{padding:0 12px 0 40px;} .pf-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,106,42,.12);} .pf-install{height:44px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1.5px solid var(--line); border-radius:12px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;} .pf-install input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;} #products .seg{display:none;} @media(max-width:1050px){ .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .pf-install{justify-content:center;} } @media(max-width:640px){ .product-finder{padding:15px;border-radius:17px;margin-bottom:22px;} .pf-head{align-items:flex-start;margin-bottom:13px;} .pf-head h2{font-size:18px;} .pf-head p{font-size:11.5px;line-height:1.5;} .pf-grid{grid-template-columns:1fr 1fr;gap:9px;} .pf-field.pf-wide{grid-column:1/-1;} .pf-control,.pf-install{height:42px;font-size:12px;} .pf-install{grid-column:1/-1;} } /* ── หัวข้อใหญ่เหนือรายการสินค้า (แบบ Apple Store) ── */ .plist-h{margin-bottom:22px;} .plist-h h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;color:var(--ink);letter-spacing:-.8px;line-height:1.25;} .plist-h h2 em{font-style:normal;color:var(--ink-3);font-weight:700;} .plist-h p{font-size:15px;color:var(--ink-2);margin-top:8px;} /* แถบส้มปิดท้ายรายการสินค้า */ .promo-strip{display:none;margin-top:34px;background:#c94112;border-radius:16px; padding:20px 26px;text-align:center;color:#fff;font-size:15.5px;font-weight:700;line-height:1.5;} @media(max-width:640px){.promo-strip{font-size:13.5px;padding:16px 18px;border-radius:13px;}} /* ── การ์ดสินค้า สไตล์ Apple Store: ชื่อรุ่นอยู่บน รูปอยู่กลาง ราคาอยู่ล่าง ── */ .card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:22px;padding:28px 26px 24px;transition:box-shadow .25s,transform .25s; box-shadow:0 2px 10px rgba(0,0,0,.04);cursor:pointer;} .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.11);} /* ป้ายสภาพ มุมขวาบน */ .bg-bat{background:#1d9e75;} .cbadge{position:absolute;top:22px;right:22px;font-size:11px;font-weight:800;padding:5px 12px; border-radius:999px;z-index:2;letter-spacing:.2px;} .bg-new{background:#111114;color:#fff;} .bg-used{background:var(--surface-2);color:var(--ink);} .bg-sp{background:#d92d20;color:#fff;} /* ชื่อรุ่นอยู่บนสุด แบบ Apple */ .card h3{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.5px;line-height:1.25; padding-right:80px;min-height:60px;margin:0;} .card .csub{font-size:13px;color:var(--ink-3);margin-top:4px;} /* รูปสินค้า */ .ph{position:relative;width:100%;aspect-ratio:1/1;margin:10px 0 14px;background:var(--surface) center/contain no-repeat;overflow:hidden;} .ph .noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-4);} .ph .noimg svg{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.3;} /* ป้ายเสริม (โปรโมชั่น / ติดจอง) มุมซ้ายบนของรูป */ .card .badges{position:absolute;top:0;left:0;display:flex;gap:5px;z-index:2;} .card .badges span{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:7px;} /* ชิปใต้ราคา — ป้ายที่ไม่ได้ขึ้นบนรูปมาอยู่ตรงนี้ ข้อมูลครบเหมือนเดิม ใช้สีอ่อนลงเพราะอยู่บนพื้นขาว ไม่ต้องแย่งสายตากับราคา */ .cchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;} .cchips span{font-size:10.5px;font-weight:700;padding:2.5px 9px;border-radius:999px; background:var(--surface-2);color:var(--sub);border:1px solid var(--line);} .cchips .bg-bat{background:#e9f6ef;color:#12703f;border-color:#bfe3ce;} .cchips .bg-best{background:#fff7e0;color:#8a6009;border-color:#f0d98a;} .cchips .bg-demo{background:#eeeef0;color:#3f3f46;border-color:#dcdce0;} .cchips .bg-promo{background:#fff1e9;color:#b8420d;border-color:#ffd6c0;} .cchips .bg-fresh{background:#e9f6ef;color:#0a7d3f;border-color:#bfe3ce;} .bg-promo{background:#F45A17;color:#fff;} .bg-best{background:#fff7e0;color:#8a6009;border:1px solid #f0d98a;} .bg-rsv{background:#e08600;color:#fff;} .tag{display:none;} /* จุดสีเรียงกึ่งกลางใต้รูป */ .cdots{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:16px;min-height:16px;} .cdots i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.16);display:inline-block;} .cdots small{font-size:11px;color:var(--ink-3);margin-left:3px;} /* ราคาอยู่ซ้าย ปุ่มอยู่ขวา ชิดก้นการ์ด */ .meta{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto;} .price{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.2px;line-height:1.3;} .price small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);text-decoration:line-through;} .price small.from{text-decoration:none;color:var(--ink-3);font-weight:600;font-size:12px;margin-bottom:2px;} .card .cspec{font-size:13px;color:var(--ink-3);margin-top:3px;} /* หน้า iPhone มือสอง */ /* ตารางเงินดาวน์ในหน้าผ่อนเครื่องใหม่ */ .dr-q{width:100%;font:inherit;font-size:16px;padding:13px 16px;border-radius:12px; border:1.5px solid var(--line);background:var(--surface);color:var(--ink);margin-top:14px;} .dr-q:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent;} .dr-cnt{font-size:13px;color:var(--sub);margin:8px 0 0;} .dr-g{margin-top:18px;} .dr-g h3{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--brand); margin:0 0 8px;text-transform:uppercase;} .dr-t{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:14px; overflow:hidden;background:var(--surface);} .dr-t li{display:flex;gap:12px;align-items:baseline;padding:11px 15px; border-bottom:1px solid var(--line);font-size:15px;} .dr-t li:last-child{border-bottom:0;} .dr-t .n{flex:1;min-width:0;} .dr-t .m{display:block;font-size:12.5px;color:var(--sub);margin-top:2px;} .dr-t .v{flex:none;font-weight:800;font-variant-numeric:tabular-nums;} .dr-t .free{color:#1E7E34;font-weight:800;font-size:13.5px;} .dr-none{padding:24px 16px;text-align:center;color:var(--sub);font-size:14.5px; border:1px dashed var(--line);border-radius:14px;margin-top:14px;} .dr-note{font-size:13px;color:var(--sub);line-height:1.75;margin:14px 0 0;} .ui-sec{max-width:1180px;margin:0 auto;padding:26px 18px 4px;} .ui-sec h2{font-size:26px;font-weight:800;letter-spacing:-.4px;color:var(--ink);} .ui-lead{margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:760px;} .ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px;} .ui-c{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:15px 17px; font-size:13.5px;line-height:1.6;color:var(--ink-2);} .dep-h{margin-top:26px;font-size:19px;font-weight:800;color:var(--ink);} .dep-note{margin-top:5px;font-size:13.5px;color:var(--ink-3);} .dep-tw{overflow-x:auto;margin-top:13px;-webkit-overflow-scrolling:touch;} .dep-t{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px;} .dep-t th{text-align:left;font-weight:700;color:var(--ink-3);padding:9px 12px; border-bottom:1.5px solid var(--line);white-space:nowrap;} .dep-t td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;} .dep-t td b{color:var(--ink);} .dep-t tr.on td{background:var(--surface-2);} .dep-steps{margin-top:13px;padding:0;list-style:none;counter-reset:dep;} .dep-steps li{counter-increment:dep;position:relative;padding:0 0 14px 40px; font-size:13.5px;line-height:1.6;color:var(--ink-2);} .dep-steps li::before{content:counter(dep);position:absolute;left:0;top:0; width:26px;height:26px;border-radius:8px;display:grid;place-items:center; font-size:13px;font-weight:800;color:#fff;background:var(--ink);} .dep-steps li b{display:block;font-size:15px;font-weight:750;color:var(--ink);margin-bottom:3px;} @media(max-width:640px){.dep-h{font-size:17px;}.dep-t{font-size:12.5px;}} .ui-c b{display:block;font-size:14.5px;font-weight:750;color:var(--ink);margin-bottom:5px;} @media(max-width:640px){.ui-sec{padding:18px 14px 2px;}.ui-sec h2{font-size:21px;} .ui-lead{font-size:14px;}.ui-grid{gap:9px;margin-top:14px;}} .card .csku{font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;} .card .buy{flex:0 0 auto;background:#f5581a;color:#fff;border:none;border-radius:999px; padding:11px 22px;font:inherit;font-size:14px;font-weight:700;cursor:pointer; transition:background .2s,transform .2s;white-space:nowrap;} .card .buy:hover{background:#d94a12;transform:scale(1.04);} .stars{display:none;} @media(max-width:900px){ .card{padding:20px 18px 18px;border-radius:18px;} .card h3{font-size:19px;min-height:48px;padding-right:66px;} .cbadge{top:16px;right:16px;font-size:10px;padding:4px 10px;} .price{font-size:15.5px;} .card .buy{padding:9px 16px;font-size:13px;} } @media(max-width:640px){ .card{padding:16px 14px 14px;border-radius:16px;} .card h3{font-size:16px;min-height:42px;padding-right:0;} .cbadge{position:static;display:inline-block;margin-bottom:8px;} .card .buy{padding:8px 14px;font-size:12.5px;} } /* installment line on card */ .inst{font-size:12px;font-weight:700;color:#6d28d9;background:#f3edff;border-radius:8px;padding:5px 10px;margin-top:8px;display:inline-block;align-self:flex-start;} /* floating search card */ /* กล่องค้นหา: เดิมดึงขึ้น -52px ไปทับปุ่ม "เลือกซื้อสินค้า" ปุ่มย้ายมาอยู่ล่างสุดของกล่องข้อความแล้ว จึงไม่ดึงขึ้นอีก และต้องเว้นระยะให้มากพอ ไม่งั้นขอบการ์ดจะไปชนก้นปุ่ม ดูเหมือนซ้อนกัน */ .float{position:relative;margin:36px 0 4px;background:var(--surface);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.12);padding:22px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;z-index:5;} @media(max-width:640px){.float{margin-top:24px;padding:18px 18px;}} .float h2{font-size:24px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;} .sbox{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;background:var(--soft);border:1.5px solid var(--line);border-radius:999px;padding:5px 6px 5px 18px;} .sbox input{flex:1;border:none;outline:none;background:transparent;font-size:14.5px;font-family:inherit;color:var(--ink);} .sbox button{border:none;background:var(--grad);color:#fff;font-size:13.5px;font-weight:700;padding:11px 24px;border-radius:999px;cursor:pointer;font-family:inherit;} .announce{margin-top:18px;background:var(--grad);color:#fff;font-size:clamp(15px,2vw,19px);font-weight:800;letter-spacing:.2px;padding:18px 28px;border-radius:16px;text-align:center;box-shadow:0 8px 22px rgba(244,81,30,.28);} /* ═══ STATS ═══ */ .stats{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:6px 4px;margin:16px 0 0;box-shadow:var(--shadow);} .stat{flex:1;min-width:180px;display:flex;gap:13px;align-items:center;padding:18px;} .stat i{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand);} .stat i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .stat b{font-size:19px;font-weight:800;display:block;letter-spacing:-.3px;} .stat span{font-size:12.5px;color:var(--sub);} /* quick search chips */ .qchips{display:flex;gap:8px;flex-wrap:wrap;width:100%;padding-top:2px;} .qchips span{font-size:12px;color:var(--sub);align-self:center;} .qchips button{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--sub);cursor:pointer;font-family:inherit;transition:all .12s;} .qchips button:hover{border-color:var(--brand,#ea580c);color:var(--brand,#ea580c);} /* ═══ SERVICES ═══ */ /* กล่องบริการ: ไม่มีเส้นขอบ ใช้พื้นอ่อนกับเงาฟุ้งแทน มุมมนกว้าง ดูนุ่มไม่แข็งทื่อ */ .svc-wrap{background:linear-gradient(180deg,var(--surface),var(--surface));border:0;border-radius:34px; padding:30px 26px 26px;margin-top:16px;text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.03),0 18px 50px -18px rgba(120,70,40,.16);} .svc-wrap h2{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:2px;} .svc-wrap h2::after{content:'';display:block;width:34px;height:3px;background:var(--grad); border-radius:3px;margin:10px 0 20px;opacity:.85;} /* จัดกึ่งกลางเสมอ แถวสุดท้ายไม่เหลือช่องโบ๋ + มีคำอธิบายสั้นใต้ชื่อ */ /* ── ไอคอนบริการแบบแผ่นใหญ่ ชื่ออยู่ใต้แผ่น กดได้ทั้งแผ่น ── */ /* กระจายเป็นตาราง แถวละ 5 ช่องบนจอคอม แทนที่จะเรียงยาว 10 ช่องรวดจนไอคอนเล็กจิ๋ว แต่ละช่องเป็นแผ่นกดได้จริง มีขอบจางๆ ตอนชี้ ลูกค้าจะรู้ว่ากดได้ */ .svc{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;max-width:720px;margin:0 auto;} .svc a{position:relative;display:flex;flex-direction:column;align-items:center;gap:11px; flex:0 0 calc((100% - 16px)/5);width:auto;padding:14px 6px 15px;border-radius:20px;background:none; border:1px solid transparent;transition:transform .35s cubic-bezier(.22,.9,.3,1);} .svc a:hover{transform:translateY(-5px);border-color:transparent;background:transparent;} /* แผ่นไอคอน */ .svc .ic{position:relative;width:86px;height:86px;border-radius:28px;display:flex; align-items:center;justify-content:center; transition:box-shadow .35s cubic-bezier(.22,.9,.3,1),transform .35s cubic-bezier(.22,.9,.3,1);} .svc a:hover .ic{box-shadow:0 14px 30px -8px rgba(0,0,0,.16);transform:scale(1.05);} .svc .ic svg{width:40px;height:40px;stroke:currentColor;fill:none; stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;} /* ชื่อบริการอยู่ใต้แผ่น */ .svc .lb{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;text-align:center;} .svc a:hover .lb{color:var(--brand);} .svc .sd{display:none;} /* คำอธิบายย้ายไปอยู่ในป๊อปอัปแทน หน้าแรกจะได้สะอาด */ /* ป้ายมุมขวาบนของแผ่น */ .svc .bdg2{position:absolute;top:-5px;right:-4px;background:currentColor;color:#fff; font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.16);white-space:nowrap;} .svc .bdg2 span{color:#fff;} @media(max-width:760px){ .svc{gap:4px 2px;} .svc a{flex:0 0 calc((100% - 6px)/4);} .svc a{padding:10px 3px 11px;gap:8px;} .svc .ic{width:68px;height:68px;border-radius:19px;} .svc .ic svg{width:32px;height:32px;} .svc .lb{font-size:11.5px;} } @media(max-width:440px){ .svc a{flex:0 0 calc((100% - 4px)/3);} .svc .ic{width:100%;max-width:82px;aspect-ratio:1/1;height:auto;} } /* สีประจำแต่ละบริการ — วนใช้ 10 สี เรียงตามลำดับที่กรอกในแอดมิน พื้นแผ่นใช้สีอ่อน ไอคอนใช้สีเข้ม อ่านง่ายและดูสดใสแบบเดียวกัน */ .sv-0{color:#ea580c;} .sv-0 .ic{background:linear-gradient(160deg,#fff4ec,#ffe3d0);} .sv-1{color:#d97706;} .sv-1 .ic{background:linear-gradient(160deg,#fff8e8,#ffeec4);} .sv-2{color:#2563eb;} .sv-2 .ic{background:linear-gradient(160deg,#eef4ff,#d9e6ff);} .sv-3{color:#16a34a;} .sv-3 .ic{background:linear-gradient(160deg,var(--surface-2),#d3f3de);} .sv-4{color:#0891b2;} .sv-4 .ic{background:linear-gradient(160deg,#ecfbfd,#cdf0f7);} .sv-5{color:#db2777;} .sv-5 .ic{background:linear-gradient(160deg,#fff0f6,#ffd9e8);} .sv-6{color:#7c3aed;} .sv-6 .ic{background:linear-gradient(160deg,var(--surface-2),#e5daff);} .sv-7{color:#0d9488;} .sv-7 .ic{background:linear-gradient(160deg,var(--surface),#cdf0e8);} .sv-8{color:#dc2626;} .sv-8 .ic{background:linear-gradient(160deg,var(--surface-2),#ffdada);} .sv-9{color:#b45309;} .sv-9 .ic{background:linear-gradient(160deg,#fdf6ec,#f6e5cc);} /* ═══ LAYOUT ═══ */ .main{display:block;padding:30px 0 38px;} .main>*{min-width:0;} @media(max-width:860px){.main{padding:24px 0 30px;}} /* sidebar */ #products>.side{display:none!important;} .side h4{font-size:15px;font-weight:800;margin-bottom:12px;} .cat{list-style:none;border-left:1.5px solid var(--line);margin:4px 0 22px 6px;} .cat li{padding:8px 6px 8px 16px;font-size:13.5px;color:var(--sub);cursor:pointer;position:relative;display:flex;justify-content:space-between;align-items:center;} .cat li:hover{color:var(--ink);} .cat li.on{color:var(--ink);font-weight:700;} .cat li.on::before{content:'';position:absolute;left:-1.5px;top:7px;bottom:7px;width:2.5px;background:var(--grad);border-radius:2px;} .cat .n{font-size:10.5px;font-weight:800;background:var(--red);color:#fff;border-radius:999px;padding:2px 8px;} .cat li:not(.on) .n{background:var(--surface-2);color:var(--sub);} .fgroup{margin-bottom:18px;} .fgroup .lbl{font-size:11px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;} .side select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;background:var(--surface);outline:none;color:var(--ink);} .ck{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--sub);padding:5px 0;cursor:pointer;} .ck input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;} .clearf{border:0;background:transparent;padding:0;font:inherit;font-size:12.5px;color:#b43a13;cursor:pointer;font-weight:600;text-align:left;} @media(max-width:860px){ .side{display:block;overflow:visible;padding-bottom:0;min-width:0;} .side>div:first-child{min-width:0;width:100%;} .side>div:not(:first-child){display:none;} .cat{display:flex;border:none;margin:0;gap:6px;overflow-x:auto;padding:0 0 8px; scrollbar-width:none;-webkit-overflow-scrolling:touch;} .cat::-webkit-scrollbar{display:none;} .cat li{padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;white-space:nowrap;gap:7px;} .cat li.on{background:var(--solid);color:#fff;border-color:var(--solid);} .cat li.on::before{display:none;} } /* ═══ PRODUCT CARDS ═══ */ .count{font-size:13px;color:var(--sub);margin-bottom:14px;} .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} @media(max-width:1120px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}} /* ── การ์ดสินค้า: ทุกใบใช้จังหวะเดียวกัน รูป/ราคา/เงื่อนไข/ปุ่มตรงแนว ── */ .card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line); border-radius:24px;padding:16px;overflow:hidden;cursor:pointer; transition:border-color .22s,box-shadow .22s,transform .22s; box-shadow:0 4px 18px rgba(17,17,20,.055);} .card:hover{transform:translateY(-5px);border-color:#ffd4be; box-shadow:0 20px 48px rgba(17,17,20,.13);} .card .ckicker{font-size:11px;font-weight:800;color:#b43a13;text-transform:uppercase; letter-spacing:.6px;margin:2px 78px 5px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .card h3{font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.35px; height:46px;min-height:46px;padding-right:68px;margin:0 2px 8px;color:var(--ink);overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .card .ph{position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;margin:0 0 13px; background:var(--surface) center/contain no-repeat;overflow:hidden;} .card .ph::after{content:'';position:absolute;inset:auto 14% 0;height:10px;border-radius:50%; background:rgba(0,0,0,.10);filter:blur(9px);opacity:.34;pointer-events:none;} .card .ph .noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink-4);} .card .badges{top:10px;left:10px;} .card .csummary{display:flex;align-items:center;justify-content:space-between;gap:8px; height:38px;background:var(--surface);border-radius:11px;padding:8px 10px;margin-top:2px;overflow:hidden;} .card .cspec{font-size:12.5px;color:var(--ink-2);line-height:1.4;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .card .cprice-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px; min-height:48px;margin-top:10px;} .card .price{font-size:21px;font-weight:850;color:var(--ink);letter-spacing:-.5px;line-height:1.15;} .cdown{display:flex;flex-direction:column;gap:1px;margin:4px 0 2px;} .cdown b{font-size:19px;font-weight:850;color:#0f8a43;letter-spacing:-.4px;line-height:1.15;} .cdown span{font-size:12.5px;color:var(--ink-2);} .cprice-row .price{font-size:16px;font-weight:700;color:var(--ink);} .card .price small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3); text-decoration:line-through;letter-spacing:0;margin-bottom:3px;} .card .price small.from{text-decoration:none;color:var(--ink-2);} .card .inst,.card .cashonly,.card .financeask{display:flex;align-items:center;width:100%;height:38px; justify-content:center;margin:9px 0 0;padding:8px 10px;border-radius:11px;font-size:12px; font-weight:800;text-align:center;line-height:1.25;} .card .inst{color:#7431d7;background:linear-gradient(135deg,#f3edff,#eee4ff);} .card .cashonly{color:#b42318;background:#fff0ed;} .card .financeask{color:var(--ink-2);background:var(--surface-2);} .card .cactions{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:10px;} .card .cactions button{border-radius:999px;padding:10px 12px;font:inherit;font-size:13px; font-weight:800;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s;} .card .detail{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);} .card .detail:hover{border-color:var(--line);background:var(--surface);} .card .buy{background:var(--grad);border:0;color:#fff;box-shadow:0 7px 18px rgba(244,90,23,.22);} .card .cactions button:hover{transform:translateY(-1px);} .card .cdots{margin:0;justify-content:flex-end;min-height:16px;flex:0 0 auto;} @media(max-width:900px){ .card{padding:13px;border-radius:20px;} .card h3{font-size:18px;height:46px;min-height:46px;} .card .price{font-size:19px;} } @media(max-width:640px){ .card{padding:10px;border-radius:17px;} .card .cbadge{position:absolute;top:10px;right:10px;display:block;width:auto;max-width:68px; margin:0;padding:4px 8px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .card .ckicker{font-size:9.5px;margin-right:56px;} .card h3{font-size:15px;height:40px;min-height:40px;padding-right:0;margin-bottom:6px;} .card .ph{aspect-ratio:1/1;border-radius:13px;} .card .csummary{padding:7px 8px;height:34px;} .card .cspec{font-size:10.5px;} .card .cprice-row{min-height:42px;margin-top:8px;} .card .price{font-size:16px;} .card .cactions{grid-template-columns:1fr;margin-top:9px;} .card .detail{display:none;} .card .cactions button{padding:9px 8px;font-size:11.5px;} .card .inst,.card .cashonly,.card .financeask{height:34px;font-size:10.5px;padding:6px;} } /* กรอบรูป: พื้นเทาอ่อน ให้ตัวเครื่องเด่นขึ้น */ /* ── แถบเลือกสีสไตล์ Apple ── */ .pd-colors{text-align:center;padding:22px 0 6px;margin-top:4px;border-top:1px solid var(--line);} .pd-colors .cc-n{font-size:14px;color:var(--sub);margin-bottom:14px;} .pd-colors .cc-dots{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-bottom:14px;} .pd-colors .cc-dots button{width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer; background:none;border:none;display:grid;place-items:center;transition:transform .15s;} .pd-colors .cc-dots button i{width:22px;height:22px;border-radius:50%;display:block; border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 2px rgba(0,0,0,.07);} .pd-colors .cc-dots button:hover{transform:scale(1.12);} .pd-colors .cc-dots button.on{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--ink);} .pd-colors .cc-names{font-size:15px;color:var(--txt);line-height:1.7;} .pd-colors .cc-names em{font-style:normal;color:var(--sub);} .pd-colors .cc-names .on{font-weight:800;color:var(--ink);} @media(max-width:640px){.pd-colors .cc-names{font-size:14px;}} .pd-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .pd-dots a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--txt);cursor:pointer;padding:7px 13px 7px 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);transition:all .15s;} .pd-dots a i{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,0,0,.15);display:inline-block;} .pd-dots a:hover{border-color:#ffd8c2;transform:translateY(-1px);} .pd-dots a.on{border-color:var(--brand,#ea580c);color:var(--brand,#ea580c);} .btns{display:flex;gap:8px;margin-top:11px;} .btns button{flex:1;padding:10px 0;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;text-align:center;transition:opacity .12s;} .b-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);} .b-ghost:hover{border-color:var(--solid);} .b-dark{background:var(--grad);border:none;color:#fff;} .b-dark:hover{opacity:.85;} /* pagination */ .pager{display:flex;align-items:center;justify-content:space-between;margin-top:30px;font-size:13px;} .pager .pn{display:flex;gap:4px;} .pager button{min-width:34px;height:34px;border-radius:9px;border:1.5px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;font-family:inherit;} .pager button.cur{border-color:var(--solid);color:var(--ink);font-weight:800;} .pager .arrow{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;} .pager .arrow:disabled{color:var(--ink-4);cursor:default;} /* ═══ SECTIONS ═══ */ .sec{padding:16px 0 6px;} .sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .sec-h h2{font-size:26px;font-weight:800;letter-spacing:-.4px;} .sec-h .arr{display:flex;gap:8px;} .sec-h .arr button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-size:15px;color:var(--ink);} .rec{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:none;} .rec::-webkit-scrollbar{display:none;} .rec .card{flex:0 0 230px;} /* ═══ WHY ═══ */ .why-band{background:var(--band,linear-gradient(135deg,#fff7ed,#fff1e6));margin-top:34px;} .why.noimg{grid-template-columns:1fr;} .why{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;padding:46px 0;} @media(max-width:860px){.why{grid-template-columns:1fr;padding:30px 0;}} .why img{width:100%;border-radius:18px;object-fit:cover;max-height:400px;} /* หัวข้อใหญ่ขึ้นชัดเจน + มีป้ายนำหน้า ให้เด่นกว่าหัวข้ออื่นในหน้า */ .why .kick2{display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--brand); font-size:12px;font-weight:800;letter-spacing:.3px;padding:7px 15px;border-radius:999px; margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);} .why .kick2::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);} .why h2{font-size:clamp(32px,4.4vw,50px);font-weight:800;letter-spacing:-1.4px;line-height:1.1;margin-bottom:12px;} .why h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .why .sub{font-size:17px;color:var(--sub);margin-bottom:26px;} .why .sub b{color:var(--ink);} .why ul{list-style:none;} .why li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.62;margin-bottom:16px; background:var(--surface);border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.045);} .why .tick{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-top:1px;} .why .tick svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} .why .btn-about{display:inline-block;margin-top:10px;background:var(--solid);color:#fff;padding:13px 26px;border-radius:999px;font-size:14px;font-weight:700;} /* ═══ REVIEWS ═══ */ /* สลับโทนพื้นหลังให้แต่ละส่วนแยกชัด ตาได้พัก */ #banners-sec{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px 26px 26px;box-shadow:var(--shadow);} #promo{background:var(--band,linear-gradient(135deg,#fff7ed,#fff1e6));border-radius:26px;padding:28px 26px 14px;} #reviews{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px 26px 20px;} #video-sec{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px 26px 26px;box-shadow:var(--shadow);} .rv-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;} .rv-scroll::-webkit-scrollbar{display:none;} .rv{flex:0 0 270px;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);} .rv img{width:100%;height:200px;object-fit:cover;} .rv .b{padding:16px 18px;} .rv .rhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .rv .av{width:38px;height:38px;border-radius:50%;background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5));color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 38px;} .rv .nm{font-size:13.5px;font-weight:700;color:var(--ink);} .rv .stars{color:var(--star);font-size:12px;letter-spacing:2px;} .rv .t{font-size:13px;line-height:1.55;color:var(--txt);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .rv .n{font-size:11.5px;color:var(--sub);margin-top:8px;} /* ═══ CTA ═══ */ .cta-blk{margin:38px 0;background:var(--grad);border-radius:22px;padding:44px 44px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;color:#fff;} @media(max-width:640px){.cta-blk{padding:30px 24px;}} .cta-blk h2{font-size:clamp(24px,3.6vw,36px);font-weight:800;letter-spacing:-.8px;line-height:1.18;flex:1;min-width:230px;} .cta-blk .r{flex:1;min-width:250px;} .cta-blk p{font-size:13.5px;color:rgba(255,255,255,.86);line-height:1.65;margin-bottom:16px;} .cta-btns{display:flex;gap:10px;flex-wrap:wrap;} .cta-btns a{padding:13px 24px;border-radius:999px;font-size:14px;font-weight:700;} .cta-line{background:var(--green);color:#fff;} .cta-tel{background:var(--surface);color:var(--ink);} /* ═══ FOOTER ═══ */ .ft-band{background:#111;color:#fff;margin-top:40px;} footer{padding:46px 0 24px;} .ft{display:flex;gap:48px;flex-wrap:wrap;} .ft h3{font-size:13px;font-weight:800;margin-bottom:12px;color:#fff;} .ft ul{list-style:none;font-size:13.5px;color:var(--ink-3);line-height:2.2;} .ft ul a:hover{color:#fff;} .ft .about{flex:1;min-width:220px;font-size:13.5px;color:var(--ink-3);line-height:1.7;} .ft .about .logo,.ft .about b{color:#fff;} .copy{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:12px;color:var(--ink-3);} /* ═══ MODAL ═══ */ .ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:60;} .ov.show{display:flex;} @media(min-width:640px){.ov{align-items:center;}} .modal{background:var(--surface);width:100%;max-width:580px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;} @media(min-width:640px){.modal{border-radius:22px;}} /* ตารางสเปคมีเส้นแบ่ง อ่านง่าย */ .kv{display:grid;grid-template-columns:120px 1fr;gap:0 16px;font-size:14px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04);} .kv .k{color:#4b5563;font-weight:500;} .kv>div{padding:10px 0;border-bottom:1px solid var(--line);} .kv>div:not(.k){font-weight:700;color:var(--ink);} .kv>div:nth-last-child(-n+2){border-bottom:none;} /* หมายเหตุรายเครื่อง — ข้อความอิสระที่แอดมินพิมพ์ ต้องคงบรรทัดที่พิมพ์ไว้ */ .pd-note{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px 16px; margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);} .pd-note-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;} .pd-note-h b{font-size:13px;color:#4b5563;font-weight:600;} .pd-copy{margin-left:auto;font:inherit;font-size:12px;font-weight:600;cursor:pointer; background:var(--surface);color:#4b5563;border:1px solid var(--line);border-radius:99px;padding:4px 12px;} .pd-copy:hover{border-color:var(--brand);color:var(--brand);} .pd-note-b{white-space:pre-line;font-size:14px;line-height:1.75;color:var(--ink);word-break:break-word;} /* ป๊อปอัพโปรโมชั่น — การ์ดมุมล่างขวา ไม่บังสินค้า ลูกค้าเลื่อนดูต่อได้ */ .mcpop-bg{position:fixed;z-index:10000;right:18px;bottom:88px;width:290px;max-width:calc(100vw - 36px); opacity:0;transform:translateY(20px) scale(.97); transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);} .mcpop-bg.on{opacity:1;transform:none;} /* ยกให้พ้นปุ่มแชท LINE ที่ลอยอยู่มุมเดียวกัน · จอแคบใช้เต็มความกว้าง */ @media(max-width:560px){.mcpop-bg{left:12px;right:12px;bottom:96px;width:auto;}} .mcpop{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:18px 18px 16px;box-shadow:0 16px 44px rgba(20,14,10,.20);} /* วงแหวนเรียกสายตา เต้นเบาๆ ไม่กวน */ .mcpop::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:0 0 0 0 rgba(244,81,30,.5);animation:mcpop-ring 2.4s ease-out infinite;} @keyframes mcpop-ring{ 0%{box-shadow:0 0 0 0 rgba(244,81,30,.45);} 70%{box-shadow:0 0 0 15px rgba(244,81,30,0);} 100%{box-shadow:0 0 0 0 rgba(244,81,30,0);} } .mcpop h3{font-size:16.5px;font-weight:800;letter-spacing:-.2px;margin:0 6px 6px 0;color:var(--ink);line-height:1.4;} .mcpop p{white-space:pre-line;font-size:13.5px;line-height:1.65;color:var(--sub);margin:0 0 14px;} .mcpop a.go{display:block;text-align:center;background:var(--brand);color:#fff;text-decoration:none; font-weight:800;font-size:14px;padding:11px;border-radius:999px;} .mcpop button.x{position:absolute;top:9px;right:10px;width:26px;height:26px;border:0;border-radius:50%; background:var(--surface-2);color:var(--ink-3);font-size:16px;line-height:1;cursor:pointer;padding:0;} .mcpop button.x:hover{background:var(--surface-3);color:var(--ink-2);} @media(prefers-reduced-motion:reduce){ .mcpop-bg{transition:none;} .mcpop::after{animation:none;} } /* แถบเตือนว่าร้านอัปเดตข้อมูลแล้ว — ลอยล่างซ้าย เลี่ยงปุ่มแชทที่อยู่ขวา */ .mc-newbar{position:fixed;left:16px;bottom:16px;z-index:9998;display:flex;align-items:center;gap:10px; background:#1c1c1e;color:#fff;border-radius:999px;padding:9px 10px 9px 18px;font-size:13.5px; box-shadow:0 8px 26px rgba(0,0,0,.24);opacity:0;transform:translateY(10px); transition:opacity .25s ease,transform .25s ease;max-width:calc(100vw - 32px);} .mc-newbar.on{opacity:1;transform:none;} .mc-newbar button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:999px;} #mc-new-go{background:var(--brand);color:#fff;padding:7px 15px;font-size:13px;white-space:nowrap;} #mc-new-x{background:transparent;color:var(--ink-3);font-size:19px;line-height:1;padding:0 6px;} @media(prefers-reduced-motion:reduce){.mc-newbar{transition:none;}} /* การ์ดไฮไลท์: ไอคอนนำ + ลูกศรท้าย กดได้ */ /* คุมโทนเดียวกันทั้งหมด: ขาว-ขอบเทา-ไอคอนครีมส้ม */ .tagline,.giftline{display:flex;align-items:center;gap:11px;border-radius:14px;padding:13px 16px;font-size:13.5px;margin-bottom:8px;cursor:pointer;transition:transform .15s;background:var(--surface);border:1px solid var(--line);color:var(--txt);box-shadow:var(--shadow);} .tagline:hover,.giftline:hover{transform:translateX(3px);} .tagline b,.giftline b{color:var(--ink);} .hl-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--band,linear-gradient(135deg,#fff1e6,#ffe6d5));color:var(--brand,#ea580c);display:flex;align-items:center;justify-content:center;} .hl-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .hl-arrow{margin-left:auto;font-weight:800;} .bdg{font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;background:#fff3e0;color:var(--orange);display:inline-block;} /* ═══ PRODUCT PAGE (หน้ารายละเอียดเต็ม) ═══ */ /* ── ปุ่มสลับภาษา TH / EN ── */ .langsw{position:relative;display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line); border-radius:999px;padding:3px;gap:0;flex:0 0 auto;} .langsw .knob{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px); border-radius:999px;background:#c2410c;box-shadow:0 2px 7px rgba(0,0,0,.16); transition:transform .26s cubic-bezier(.34,1.4,.5,1);pointer-events:none;} .langsw.en .knob{transform:translateX(100%);} .langsw button{position:relative;z-index:1;border:0;background:none;cursor:pointer; font:800 12px/1 inherit;letter-spacing:.4px;color:var(--ink-2);padding:7px 13px;border-radius:999px; transition:color .2s;min-width:40px;} .langsw button.on{color:#fff;} @media(max-width:760px){.langsw button{padding:6px 10px;min-width:34px;font-size:11px;}} /* ── ปุ่มแชทลอยมุมขวาล่าง (กู้กลับมาจากเวอร์ชันก่อน) ── */ .fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;} .fab .ball{position:relative;width:60px;height:60px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(6,199,85,.45);transition:transform .25s ease;} .fab:hover .ball{transform:scale(1.08);} .fab .ball svg{width:30px;height:30px;fill:#fff;} .fab .ball::after{content:'';position:absolute;width:60px;height:60px;border-radius:50%;background:var(--green);opacity:.55;animation:pulse 2.2s ease-out infinite;z-index:-1;} .fab .cap{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.1);white-space:nowrap;} @keyframes pulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.7);opacity:0;}100%{opacity:0;}} /* จอมือถือ: เหลือแค่ลูกกลมเขียว ไม่ต้องมีป้ายกำกับ ป้าย "แชทกับเจ้าหน้าที่" กว้างจนบังสินค้าและปุ่มบนหน้าจอ */ @media(max-width:640px){.fab{right:14px;bottom:78px;}.fab .ball{width:54px;height:54px;}.fab .ball::after{width:54px;height:54px;}.fab .ball svg{width:27px;height:27px;}.fab .cap{display:none;}} /* สไลด์แบนเนอร์ (กู้กลับ) */ .slides{position:absolute;inset:0;} /* ปุ่มบนแบนเนอร์ — ตั้งข้อความ/ปลายทางได้ในแอดมิน */ .hero-btn{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6; display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff; font-size:16px;font-weight:800;letter-spacing:-.2px;padding:15px 30px 15px 26px;border-radius:999px; box-shadow:0 12px 30px rgba(255,106,42,.42),0 0 0 4px rgba(255,255,255,.55); transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap;} .hero-btn:hover{transform:translateX(-50%) translateY(-3px); box-shadow:0 18px 38px rgba(255,106,42,.5),0 0 0 4px rgba(255,255,255,.7);} .hero-btn::after{content:'';width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6l8 6-8 6z'/%3E%3C/svg%3E"); background-size:14px;background-repeat:no-repeat;background-position:center;} @media(max-width:760px){ .hero-btn{bottom:16px;font-size:13.5px;padding:11px 20px 11px 17px;gap:8px;} .hero-btn::after{width:21px;height:21px;background-size:11px;} } /* ใบที่ตั้งลิงก์ไว้ กดได้ทั้งใบ */ .slide.tap{cursor:pointer;} .slide.tap:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;} /* ═══ บริการนอกสถานที่ ═══ */ .oc-sec{padding-bottom:8px;} .oc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:22px;align-items:start;} .oc-left{min-width:0;} @media(max-width:940px){.oc-wrap{grid-template-columns:1fr;}} .oc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .oc-chips span{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.04);} .oc-chips span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);} .oc-zones{display:grid;gap:11px;} .oc-zone{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line); border-radius:18px;padding:17px 19px;position:relative;overflow:hidden;} .oc-zone::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);} .oc-zone.buy::before{background:linear-gradient(135deg,#27AE60,#1e8e4e);} .oc-zone .km{flex:0 0 auto;font-size:30px;font-weight:800;letter-spacing:-1.5px;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .oc-zone.buy .km{background:linear-gradient(135deg,#27AE60,#1e8e4e);-webkit-background-clip:text;background-clip:text;color:transparent;} .oc-zone b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px;} .oc-zone small{display:block;font-size:12.5px;color:var(--sub);line-height:1.55;} /* ขั้นตอนใช้บริการ */ .oc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:16px;} @media(max-width:640px){.oc-steps{grid-template-columns:1fr;}} .oc-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;position:relative;} .oc-step .n{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-size:13px; font-weight:800;display:grid;place-items:center;margin-bottom:9px;} .oc-step b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px;} .oc-step small{display:block;font-size:12.5px;color:var(--sub);line-height:1.55;} /* ย่านที่ไปบ่อย */ .oc-areas{margin-top:18px;} .oc-lbl{font-size:11.5px;font-weight:800;color:var(--ink-2);letter-spacing:.4px;margin-bottom:9px;} .oc-area-chips{display:flex;flex-wrap:wrap;gap:6px;} .oc-area-chips span{font-size:12.5px;color:var(--txt);background:var(--surface);border:1px solid var(--line); border-radius:8px;padding:6px 11px;} .oc-area-chips span.more{background:var(--soft);color:var(--sub);border-style:dashed;} /* จุดสร้างความมั่นใจ */ .oc-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);} .oc-trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sub);} .oc-trust svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .oc-check{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);} .oc-h{display:flex;gap:12px;align-items:center;margin-bottom:16px;} .oc-h svg{flex:0 0 40px;width:40px;height:40px;padding:9px;border-radius:13px;background:#fff4ee; color:var(--brand);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .oc-h b{display:block;font-size:15.5px;color:var(--ink);} .oc-h small{display:block;font-size:12.5px;color:var(--sub);margin-top:1px;} .oc-btn{width:100%;border:none;background:var(--grad);color:#fff;font:inherit;font-size:15px;font-weight:800; padding:15px;border-radius:14px;cursor:pointer;box-shadow:0 10px 24px rgba(255,106,42,.26);transition:transform .18s;} .oc-btn:hover{transform:translateY(-2px);} .oc-btn:disabled{opacity:.6;cursor:default;transform:none;} .oc-hint{font-size:11.5px;color:var(--ink-2);text-align:center;margin-top:10px;line-height:1.6;} .oc-result{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;} .oc-dist{text-align:center;margin-bottom:14px;} .oc-dist .n{font-size:38px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--ink);} .oc-dist .n em{font-style:normal;font-size:17px;font-weight:700;color:var(--sub);margin-left:4px;} .oc-dist .t{font-size:12.5px;color:var(--sub);margin-top:6px;} .oc-rows{display:grid;gap:8px;margin-bottom:14px;} .oc-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.55;padding:10px 12px;border-radius:11px;} .oc-row.ok{background:var(--surface-2);color:#1e6b41;} .oc-row.no{background:#fff6ed;color:#9a5518;} .oc-row i{flex:0 0 17px;font-style:normal;font-weight:800;} .oc-cta{display:block;text-align:center;background:var(--green);color:#fff;font-size:14.5px;font-weight:800; padding:14px;border-radius:13px;} .oc-map{display:block;text-align:center;font-size:12.5px;font-weight:700;color:var(--brand);margin-top:10px;} .oc-err{font-size:13px;color:#b42318;background:var(--surface);border:1px solid #fecdc9;border-radius:11px;padding:12px 14px;line-height:1.6;} /* ═══ สาขา + แผนที่ ═══ */ .br-sec{padding-bottom:8px;} .br-wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:22px;align-items:start;} @media(max-width:940px){.br-wrap{grid-template-columns:1fr;}} .br-list{display:flex;flex-direction:column;gap:11px;} .br-item{position:relative;display:block;width:100%;text-align:left;cursor:pointer;background:var(--surface); border:1px solid var(--line);border-radius:18px;padding:17px 18px 17px 20px;overflow:hidden; transition:border-color .22s,box-shadow .22s,transform .22s;font:inherit;color:inherit;} .br-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad); opacity:0;transition:opacity .22s;} .br-item:hover{border-color:#e0d6d0;box-shadow:var(--shadow);transform:translateY(-1px);} .br-item.on{border-color:transparent;box-shadow:var(--shadow-h);} .br-item.on::before{opacity:1;} .br-top{display:flex;align-items:center;gap:11px;margin-bottom:9px;} .br-pin{flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#fff4ee;color:var(--brand); display:grid;place-items:center;transition:background .22s,color .22s;} .br-pin svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .br-item.on .br-pin{background:var(--grad);color:#fff;} .br-nm{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.2px;line-height:1.3;} .br-meta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:3px;} .br-meta span{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--soft); border-radius:999px;padding:3px 9px;} .br-item.on .br-meta span{background:#fff4ee;color:#b4571f;} /* ป้ายชื่อเรียกอีกแบบ — เน้นให้เห็นชัดกว่าป้ายอื่น เพราะเป็นชื่อที่ลูกค้าอาจคุ้นมากกว่า */ .br-meta .br-alias{background:#fff4ee!important;color:#b4571f!important;border:1px dashed #ffc9ae;} .br-item.on .br-meta .br-alias{background:var(--surface)!important;border-color:#ffb894;} .br-rows{display:flex;flex-direction:column;gap:6px;} .br-row{display:flex;gap:9px;font-size:12.5px;color:var(--sub);line-height:1.55;} .br-row svg{flex:0 0 15px;width:15px;height:15px;margin-top:2px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .br-tel{margin-top:11px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800; color:#b43a13;border:1px solid #ffd9c6;background:var(--surface);border-radius:999px;padding:7px 15px;} .br-tel svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .br-tel{text-decoration:none;} .br-more{margin-top:11px;margin-left:10px;display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:800;color:var(--brand);text-decoration:none; padding:7px 13px;border-radius:999px;border:1px solid rgba(244,90,23,.28);background:var(--surface);} .br-more em{font-style:normal;transition:transform .2s ease;} .br-more:hover{background:#fff5f0;} .br-more:hover em{transform:translateX(3px);} .br-tel:hover{background:#fff1e8;} #ft-tel a{color:inherit;text-decoration:none;} #ft-tel a:hover{text-decoration:underline;} .br-map{position:sticky;top:88px;} @media(max-width:940px){.br-map{position:static;order:-1;}} .br-mapbox{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line); background:var(--soft);box-shadow:var(--shadow);aspect-ratio:4/3;max-height:520px;} @media(max-width:940px){.br-mapbox{aspect-ratio:16/11;max-height:340px;}} .br-mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;} .br-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;width:100%; background:var(--grad);color:#fff;font-size:14.5px;font-weight:800;padding:14px;border-radius:14px; box-shadow:0 10px 26px rgba(255,106,42,.28);transition:transform .18s,box-shadow .18s;} .br-go:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,106,42,.34);} .br-go svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} /* ── สินค้าโปรโมชั่น (ลดราคา/มีตำหนิ ซื้อสดเท่านั้น) ── */ .spTag{background:#d92d20;color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:.2px;} .cashonly{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#b42318; background:var(--surface);border:1px solid #fecdc9;border-radius:7px;padding:4px 9px;margin-top:6px;} .sp-note{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid #fecdc9; border-radius:14px;padding:14px 16px;margin:14px 0;} .sp-note .ic{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#d92d20;color:#fff; display:grid;place-items:center;font-size:13px;font-weight:800;} .sp-note b{display:block;color:#b42318;font-size:14px;margin-bottom:3px;} .sp-note small{color:#a1352b;font-size:12.5px;line-height:1.6;} .topbar{background:#111;color:#fff;font-size:12px;} .topbar .tin{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;padding:9px 0;} /* โหมดข้อความวิ่ง */ .topbar .tin-marq{flex-wrap:nowrap;overflow:hidden;gap:0;justify-content:flex-start; -webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent); mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);} .topbar .tmarq{display:flex;gap:34px;flex:0 0 auto;padding-right:34px;white-space:nowrap; animation:tmarq var(--tmd,40s) linear infinite;will-change:transform;} .topbar .tin-marq:hover .tmarq{animation-play-state:paused;} @keyframes tmarq{to{transform:translate3d(calc(-1 * var(--tmw,1200px)),0,0);}} @media(prefers-reduced-motion:reduce){ .topbar .tmarq{animation:none;} .topbar .tin-marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none;} } .topbar span{display:inline-flex;gap:7px;align-items:center;color:var(--ink-4);} .topbar svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} @media(max-width:760px){ .topbar .tin{justify-content:center;gap:8px 14px;padding:7px 0;} .topbar .tin:not(.tin-marq) span:nth-child(n+3){display:none;} } .pdp{background:var(--surface);width:100%;height:100%;overflow-y:auto;overflow-x:hidden;} .pdp-in{max-width:1400px;margin:0 auto;padding:20px 48px 60px;} @media(max-width:760px){.pdp-in{padding:14px 16px 40px;}} .pd-back{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:16px;} .pd-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 400px;gap:24px;align-items:start;} .pd-side{display:flex;flex-direction:column;gap:16px;min-width:0;} @media(max-width:1100px){.pd-grid{grid-template-columns:1fr 1fr;}.pd-side{grid-column:1/-1;}} @media(max-width:760px){ .pd-grid{grid-template-columns:minmax(0,1fr);} .pd-grid>*{min-width:0;} } /* แกลเลอรี: รูปใหญ่บน + รูปย่อยเรียงแนวนอนด้านล่าง */ .pd-gal{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);} .pd-thumbs{display:flex;flex-direction:row;gap:8px;overflow-x:auto;order:2;} .pd-thumbs img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:2px solid transparent;cursor:pointer;background:var(--surface-2);flex:0 0 84px;} .pd-thumbs img.on{border-color:var(--brand);} /* กรอบแทนรูป เมื่อสินค้ายังไม่ได้อัปรูป */ .g-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;color:var(--ink-4);background:var(--surface-2);border-radius:inherit;} .g-empty svg{width:56px;height:56px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;} .g-empty span{font-size:13.5px;font-weight:600;color:var(--ink-3);} .pd-main{position:relative;order:1;} .pd-badges{position:absolute;top:16px;left:16px;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;z-index:3;max-width:calc(100% - 32px);} .pd-badges span{background:rgba(17,17,17,.85);color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:8px;} .pd-badges span.orange{background:var(--brand,#ea580c);} .pd-main img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:16px;background:var(--surface);display:block;padding:6%;} .pd-main .nav2{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;border:none;font-size:18px;cursor:pointer;} .pd-main .prev{left:10px;}.pd-main .next{right:10px;} .pd-brand{font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.3px;margin-bottom:8px;} .pd-info h1{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.6px;margin-bottom:2px;} .pd-sub{font-size:16px;color:var(--sub);margin-bottom:14px;font-weight:500;} .pd-price{font-size:clamp(30px,3.4vw,40px);font-weight:800;color:var(--ink);letter-spacing:-1.4px;margin:0 0 4px;line-height:1.1;} .pd-inst{font-size:15px;color:var(--sub);margin-bottom:6px;font-weight:500;} .pd-inst b{color:var(--brand);font-weight:800;} .pd-lbl{font-size:11.5px;font-weight:700;color:var(--sub);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.4px;} .pd-chips{display:flex;gap:8px;flex-wrap:wrap;} .pd-chips a{border:1.5px solid var(--line);border-radius:12px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;background:var(--surface);text-align:center;color:var(--ink);} .pd-chips a.on{border-color:var(--brand);color:var(--brand);} .pd-chips a small{display:block;font-weight:600;color:var(--sub);font-size:11px;} .pd-trade{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:18px;font-size:12.5px;color:var(--sub);} .pd-trade b{display:block;font-size:13.5px;color:var(--ink);} .pd-trade a{margin-left:auto;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:700;font-size:12.5px;white-space:nowrap;color:var(--ink);} .pd-buy{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow);} .pd-buy h3{font-size:16px;font-weight:800;margin-bottom:6px;} .pd-opt{display:flex;align-items:center;gap:11px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;} .pd-opt .rad{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 18px;} .pd-opt.on .rad{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3.5px #fff;} .pd-opt b{display:block;font-size:13.5px;} .pd-opt small{color:var(--sub);font-size:11.5px;} .pd-opt .pp{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap;} /* Primary = ส้มทึบ (สมัครผ่อน) · Secondary = LINE ขอบเขียวพื้นขาว */ .pd-inst-btn{display:block;background:var(--brand,#ea580c);color:#fff;text-align:center;padding:16px;border-radius:14px;font-size:15.5px;font-weight:800;margin-top:16px;box-shadow:0 8px 20px rgba(244,81,30,.28);} .pd-line-btn{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--surface);border:1.5px solid #06c755;color:#06c755;text-align:center;padding:14px;border-radius:14px;font-size:14.5px;font-weight:800;margin-top:10px;} .pd-line-btn svg{width:20px;height:20px;fill:#06c755;} .pd-tel-btn{display:block;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);text-align:center;padding:13px;border-radius:14px;font-size:14px;font-weight:700;margin-top:10px;} /* กล่องการันตี 3 ช่อง */ .pd-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px;} .pd-mini span{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:11px 6px;font-size:10.5px;color:var(--txt);font-weight:600;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;} .pd-mini svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} /* ขั้นตอนสั่งซื้อ */ .pd-how{margin-top:34px;background:var(--band,linear-gradient(135deg,#fff7ed,#fff1e6));border-radius:22px;padding:28px;} .pd-how h3{font-size:20px;font-weight:800;margin-bottom:18px;} .pd-how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:700px){.pd-how .steps{grid-template-columns:1fr;}} .pd-how .stp{background:var(--surface);border-radius:16px;padding:18px;display:flex;gap:13px;align-items:flex-start;} .pd-how .num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;} .pd-how b{display:block;font-size:14px;margin-bottom:3px;} .pd-how small{font-size:12px;color:var(--sub);line-height:1.5;} .pd-rel{margin-top:36px;} .pd-rel h3{font-size:20px;font-weight:800;margin-bottom:14px;} /* ═══ FEATURED รุ่นปก ═══ */ .feat{display:grid;grid-template-columns:1fr 1.15fr;gap:38px;align-items:center;background:linear-gradient(135deg,#fff7ed,#ffeede);border:1px solid #ffe1c2;border-radius:22px;padding:36px 42px;margin:30px 0 6px;} @media(max-width:760px){.feat{grid-template-columns:1fr;padding:24px 20px;gap:20px;}} .feat-img{width:100%;aspect-ratio:1/1;max-height:400px;background:var(--surface) center/contain no-repeat;border-radius:18px;box-shadow:0 10px 30px rgba(244,81,30,.12);} .feat-kick{display:inline-block;background:var(--grad);color:#fff;font-size:12px;font-weight:800;letter-spacing:.6px;padding:6px 14px;border-radius:999px;margin-bottom:12px;} .feat h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.7px;line-height:1.15;margin-bottom:8px;} .feat-spec{font-size:15px;color:var(--sub);margin-bottom:12px;} .feat-price{font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--brand);margin-bottom:18px;} .feat-btns{display:flex;gap:12px;flex-wrap:wrap;} .feat-btns button{padding:13px 30px;border-radius:999px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;} /* ═══ BANNERS (แกลเลอรีโปรโมชั่น) ═══ */ /* 3 คอลัมน์ + แบนเนอร์แรกเป็น Feature กว้าง 2 ช่อง */ .banners{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .banners button{display:block;width:100%;border:0;padding:0;background:transparent;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:16/10;box-shadow:var(--shadow);} .banners button:first-child{grid-column:span 2;} .banners img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;} .banners button:hover img{transform:scale(1.04);} @media(max-width:640px){.banners{grid-template-columns:1fr 1fr;gap:10px;}.banners button{border-radius:12px;}} /* ═══ SEGMENT TABS ═══ */ .seg{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:16px;flex-wrap:wrap;} .seg button{border:none;background:transparent;padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--sub);cursor:pointer;font-family:inherit;transition:all .3s ease;white-space:nowrap;} .seg button.on{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(244,81,30,.25);} .seg button .n{font-size:11px;opacity:.75;margin-left:4px;} /* ═══ DUO PROMO CARDS ═══ */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;} @media(max-width:820px){.duo{grid-template-columns:1fr;}} .duo a{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px 8px 28px 30px;cursor:pointer;overflow:hidden;transition:all .3s ease;} .duo a:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);} .duo h3{font-size:clamp(18px,2vw,23px);font-weight:800;letter-spacing:-.4px;margin-bottom:4px;} .duo .dsub{font-size:13px;color:var(--sub);margin-bottom:10px;} .duo .dprice{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--brand,#ea580c);margin-bottom:14px;} .duo .dprice small{font-size:13px;color:var(--sub);font-weight:600;} .duo .dbtn{display:inline-block;background:var(--solid);color:#fff;padding:10px 20px;border-radius:999px;font-size:12.5px;font-weight:700;} .duo .dimg{aspect-ratio:1/1;max-height:230px;background:center/contain no-repeat;} /* ═══ TRADE-IN BANNER ═══ */ .trade{margin-top:30px;background:linear-gradient(120deg,#101014,#1e1e26 60%,#2a1e14);border-radius:24px;padding:clamp(28px,4vw,52px);display:flex;align-items:center;gap:28px;flex-wrap:wrap;color:#fff;position:relative;overflow:hidden;} .trade .tl{flex:1;min-width:250px;} .trade .kick{display:inline-block;color:var(--brand,#ff9500);font-size:13.5px;font-weight:800;letter-spacing:.5px;margin-bottom:8px;} .trade h2{font-size:clamp(24px,3.4vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.15;margin-bottom:8px;} .trade p{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:18px;} .trade .tbtn{display:inline-block;background:var(--grad);color:#fff;padding:14px 30px;border-radius:999px;font-size:14.5px;font-weight:800;} .trade .timg{flex:1;min-width:240px;max-width:460px;border-radius:16px;overflow:hidden;} .trade .timg img{width:100%;display:block;} /* ═══ FADE-IN ═══ */ /* ค่อยๆ ลอยขึ้นตอนเลื่อนถึง ใช้จังหวะแบบนุ่มๆ ไม่กระตุก */ .fadein{opacity:0;transform:translateY(26px); transition:opacity .72s cubic-bezier(.22,.9,.3,1),transform .72s cubic-bezier(.22,.9,.3,1);} .fadein.vis{opacity:1;transform:none;} /* ซ่อนส่วนที่ไม่ใช่ของหน้านั้น — ใช้คลาสอย่างเดียว ไม่แตะ style เดิมของแต่ละส่วน */ .pg-hide{display:none!important;} /* หน้าย่อยไม่มีแบนเนอร์ เว้นระยะใต้หัวเว็บให้หายใจ */ body.pg-sub .container{padding-top:18px;} body.pg-sub .fadein{opacity:1;transform:none;} /* หน้าย่อย: เลิกใช้โครง 2 คอลัมน์ของหน้าแรก ให้เนื้อหากินเต็มความกว้าง ไม่งั้นการ์ดบริการจะไปกองอยู่คอลัมน์ซ้ายแคบๆ แล้วขวาว่างโบ๋ */ body.pg-sub .hero-split{grid-template-columns:minmax(0,1fr);gap:0;} body.pg-sub .hero-card{border-bottom:0;} body.pg-sub .svc-wrap{padding:36px 32px 32px;margin-top:6px;} body.pg-sub .svc-wrap h2{font-size:26px;} body.pg-sub .svc{max-width:940px;margin:0 auto;} body.pg-sub .svc .ic{width:96px;height:96px;border-radius:30px;} body.pg-sub .svc .ic svg{width:44px;height:44px;} body.pg-sub .svc .lb{font-size:13.5px;} /* ทุกหน้าบนจอใหญ่ใช้กรอบเนื้อหาเดียวกัน เพื่อให้แนวซ้าย-ขวาตรงกับหัวเว็บ หน้าสินค้าลดความกว้างขั้นต่ำของการ์ดเฉพาะหน้าเพื่อรักษา 4 คอลัมน์ */ @media(min-width:901px){ .container{max-width:1360px;padding-left:56px;padding-right:56px;} body.pg-products .grid{grid-template-columns:repeat(4,minmax(0,1fr));} /* หน้าแรกย้ายบล็อกออกจาก .container ตามลำดับ HOME_ORDER จึงต้องกำหนดกรอบกลางให้บล็อกเหล่านี้โดยตรง เพื่อให้แนวซ้าย-ขวาตรงกับ Header */ #home-order>.hero-stage .hero-ov .inner{ max-width:1360px; padding-left:56px; padding-right:56px; } #home-order>#svc-sec, #home-order>.float, #home-order>#cats-head, #home-order>#cat-tiles, #home-order>#best-head, #home-order>#best, #home-order>#products, #home-order>#stats, #home-order>#video-sec, #home-order>#reviews, #home-order>#helps, #home-order>#contact, #home-order>#trade, #home-order>#outcall, #home-order>#branches{ width:min(calc(100% - 112px),1248px); margin-left:auto; margin-right:auto; } } @media(min-width:901px) and (max-width:1120px){ body.pg-products .grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media(max-width:760px){ body.pg-sub .svc-wrap{padding:24px 16px 22px;} body.pg-sub .svc-wrap h2{font-size:21px;} body.pg-sub .svc .ic{width:68px;height:68px;border-radius:19px;} body.pg-sub .svc .ic svg{width:32px;height:32px;} body.pg-sub .svc .lb{font-size:11.5px;} } /* ไอคอนบริการทยอยโผล่ทีละอัน ดูมีชีวิตกว่าโผล่พร้อมกันทีเดียว */ .svc-wrap.fadein .svc a{opacity:0;transform:translateY(14px); transition:opacity .5s cubic-bezier(.22,.9,.3,1),transform .5s cubic-bezier(.22,.9,.3,1);} .svc-wrap.fadein.vis .svc a{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .fadein,.fadein.vis,.svc-wrap.fadein .svc a{transition:none;opacity:1;transform:none;} } /* ═══ REVEAL PRODUCTS ═══ */ .reveal-wrap{text-align:center;padding:38px 0 44px;} .reveal-wrap p{font-size:14px;color:var(--sub);margin-bottom:16px;} .reveal-btn{background:var(--grad);color:#fff;border:none;padding:19px 58px;border-radius:999px;font-size:17.5px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px rgba(244,81,30,.35);transition:all .3s ease;} .reveal-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(244,81,30,.45);} .loading{text-align:center;padding:70px 0;color:var(--sub);font-size:14px;} .spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin:0 auto 12px;animation:sp 1s linear infinite;} /* ══════ การ์ดสินค้า — จัดลำดับใหม่ ══════ ปัญหาเดิม: ในการ์ดใบเดียวมีกรอบย่อย 5 อัน (แถบสเปก ตารางสี/สภาพ กล่องผ่อน ปุ่ม 2 ปุ่ม) ทุกอันมีเส้นขอบของตัวเอง สายตาจึงไม่รู้ว่าต้องอ่านอะไรก่อน และตารางที่แถวไม่เท่ากัน ทำให้การ์ดแต่ละใบสูงไม่เท่ากัน ปุ่มอยู่คนละระดับ แก้โดย: เหลือกรอบเดียวคือปุ่มหลัก · ราคาเป็นตัวเด่นที่สุด · ดันกล่องราคาชิดล่างเสมอ */ .card .ctop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 5px;} .card .ctop .ckicker{margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .card .ccond{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px; background:var(--surface-2);color:var(--ink-2);white-space:nowrap;} .card .ccond.promo{background:#fff6e3;color:#8a5a08;display:inline-flex;align-items:center;gap:4px; padding-left:6px;} .promo-ic{width:15px;height:15px;flex:none;display:block;} .card h3{font-size:17px;font-weight:800;line-height:1.35;letter-spacing:-.3px;margin:0; height:auto;min-height:2.7em;padding-right:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .card .cspec{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:4px 0 0; background:none;padding:0;white-space:normal;overflow:visible;text-overflow:clip;} .card .cdots{margin:7px 0 0;justify-content:flex-start;min-height:0;} .card .cstock{margin:7px 0 0;font-size:12px;font-weight:700;color:#0f8a43;} /* กล่องปิดท้าย — margin-top:auto คือหัวใจที่ทำให้ทุกการ์ดเรียงตรงกัน */ .card .cfoot{margin-top:auto;padding-top:13px;} .card .cfoot .price{font-size:22px;font-weight:850;color:var(--ink);letter-spacing:-.5px;line-height:1.15; font-variant-numeric:tabular-nums;} .card .cplan{margin:3px 0 0;font-size:12.5px;font-weight:700;color:#a83b0c;line-height:1.5;} .card .cplan.cash{color:var(--ink-3);font-weight:500;} .card .cfoot .buy{display:block;width:100%;margin-top:11px;background:var(--grad);border:0;color:#fff; border-radius:12px;padding:12px;font:inherit;font-size:14px;font-weight:800;cursor:pointer; box-shadow:0 7px 18px rgba(244,90,23,.2);} .card .cfoot .buy:hover{transform:none;filter:brightness(1.05);} .card .cfoot .detail{display:block;width:100%;margin-top:8px;background:none;border:0; color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:3px;} .card .cfoot .detail:hover{color:var(--brand);transform:none;background:none;} @media(max-width:560px){ .card h3{font-size:15px;min-height:2.7em;height:auto;margin-bottom:0;} .card .cspec{font-size:11.5px;} .card .cfoot .price{font-size:18px;} .card .cplan{font-size:11px;} .card .cfoot .buy{padding:10px;font-size:12.5px;border-radius:11px;} .card .cfoot .detail{display:block;font-size:11.5px;} } /* ── กันปัดนิ้วออกข้างแล้วเด้งย้อนกลับ ── บนแทร็คแพดแมค การเลื่อนสองนิ้วไปทางซ้าย-ขวา = สั่งเบราว์เซอร์ให้ย้อนกลับหน้า ลูกค้าที่กำลังเลื่อนดูสินค้าแล้วนิ้วเอียงนิดเดียว จะหลุดออกจากหน้าไปเลย บรรทัดนี้บอกเบราว์เซอร์ว่าอย่าตีความการเลื่อนแนวนอนเป็นคำสั่งย้อนกลับ (ปุ่ม back ของเบราว์เซอร์ยังใช้ได้ปกติ) ส่วนแถบที่ตั้งใจให้เลื่อนข้างได้ เช่น รีวิว ยังเลื่อนได้เหมือนเดิม */ html{overscroll-behavior-x:none;} body{overscroll-behavior-x:none;overflow-x:clip;} /* ปุ่มสลับโหมด — โชว์ไอคอนของโหมดที่จะได้เมื่อกด ไม่ใช่โหมดปัจจุบัน คนจะได้รู้ว่ากดแล้วจะเป็นอะไร */ .themesw{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line); background:var(--surface);color:var(--ink-3);cursor:pointer;display:grid;place-items:center; flex:none;padding:0;transition:border-color .15s,color .15s;} .themesw:hover{border-color:var(--ink-4);color:var(--ink);} .themesw svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;} .themesw .th-sun{display:none;} .themesw .th-moon{display:block;} :root[data-theme="dark"] .themesw .th-sun{display:block;} :root[data-theme="dark"] .themesw .th-moon{display:none;} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .themesw .th-sun{display:block;} :root:not([data-theme="light"]) .themesw .th-moon{display:none;} } @media(max-width:900px){.themesw{width:34px;height:34px;}.themesw svg{width:17px;height:17px;}} /* ปุ่มเดียวกันในเมนูมือถือ ทำเป็นแถวเต็มความกว้างให้กดง่ายด้วยนิ้ว */ .mdrawer-f .mtheme{display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--surface); color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;} .mdrawer-f .mtheme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;flex:none;} .mdrawer-f .mtheme .th-sun{display:none;} .mdrawer-f .mtheme .th-moon{display:block;} :root[data-theme="dark"] .mdrawer-f .mtheme .th-sun{display:block;} :root[data-theme="dark"] .mdrawer-f .mtheme .th-moon{display:none;} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mdrawer-f .mtheme .th-sun{display:block;} :root:not([data-theme="light"]) .mdrawer-f .mtheme .th-moon{display:none;} } /* ── หน้าเช่าเครื่อง /rent ── */ .rent-top{display:grid;gap:11px;margin:0 0 20px;} @media(min-width:700px){.rent-top{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}} .rent-top div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px;} .rent-top b{display:block;font-size:15.5px;font-weight:800;color:var(--brand);line-height:1.35;} .rent-top span{display:block;font-size:13px;color:var(--ink-3);line-height:1.65;margin-top:3px;} .rent-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;} .rent-tab{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3); border-radius:999px;padding:8px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;} .rent-tab:hover{border-color:var(--ink-4);color:var(--ink);} .rent-tab.on{background:var(--solid);border-color:var(--solid);color:#fff;} .rent-tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);} .rent-tbl{width:100%;border-collapse:collapse;min-width:460px;font-size:14.5px;} .rent-tbl th,.rent-tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);} .rent-tbl tr:last-child td{border-bottom:none;} .rent-tbl thead th{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-4);background:var(--surface-2);} .rent-tbl td.m{font-weight:700;color:var(--ink);} .rent-tbl td.cap{color:var(--ink-3);font-size:13.5px;} .rent-tbl td.p{font-weight:800;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums;} .rent-tbl td.dep{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;} .rent-tbl td.none{color:var(--ink-4);font-weight:500;text-align:center;padding:22px 16px;} .rent-tbl tr.grp td{background:var(--surface-2);font-weight:800;font-size:12.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:9px 16px;} .rent-note{margin:12px 0 0;font-size:13px;line-height:1.75;color:var(--ink-4);} .rent-grid{display:grid;gap:14px;margin-top:26px;} @media(min-width:760px){.rent-grid{grid-template-columns:1fr 1fr;}} .rent-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;} .rent-card h3{font-size:17px;font-weight:800;margin:0 0 13px;} .rent-card ul,.rent-card ol{margin:0;padding:0;list-style:none;} .rent-cond li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14.5px; line-height:1.75;color:var(--ink-2);} .rent-cond li:last-child{margin-bottom:0;} .rent-cond li::before{content:"✓";position:absolute;left:0;top:0;color:#1e7e34;font-weight:800;} .rent-steps{counter-reset:rt;} .rent-steps li{counter-increment:rt;position:relative;padding-left:34px;margin-bottom:12px; font-size:14.5px;line-height:1.75;color:var(--ink-2);} .rent-steps li:last-child{margin-bottom:0;} .rent-steps li::before{content:counter(rt);position:absolute;left:0;top:2px;width:22px;height:22px; border-radius:50%;background:var(--brand);color:#fff;font-size:12.5px;font-weight:800; display:grid;place-content:center;} .rent-steps b{color:var(--ink);font-weight:700;} .rent-rv,.qt-rv{margin-top:30px;} .rent-rv h3,.qt-rv h3{font-size:17px;font-weight:800;margin:0 0 13px;} .rent-rv .rvp-grid,.qt-rv .rvp-grid{columns:1;} @media(min-width:760px){.rent-rv .rvp-grid,.qt-rv .rvp-grid{columns:2;}} @media(min-width:1100px){.qt-rv .rvp-grid{columns:3;}} /* รูปรีวิวไม่ให้สูงจนกลืนทั้งการ์ด กดที่รูปเพื่อดูเต็มได้ */ .rent-rv .rvp-c img,.qt-rv .rvp-c img{max-height:230px;object-fit:cover;object-position:top center;} .qt-rv-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:800; color:var(--brand);text-decoration:none;} .qt-rv-more:hover{text-decoration:underline;} .rent-cta{margin-top:26px;background:var(--surface-2);border-radius:16px;padding:22px 24px; display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .rent-cta p{margin:0;flex:1 1 240px;font-size:14.5px;line-height:1.7;color:var(--ink-2);} .rent-cta b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px;} .rent-cta a{flex:0 0 auto;border-radius:12px;padding:12px 24px;font-size:14.5px;font-weight:800; text-decoration:none;background:var(--grad);color:#fff;} @media(max-width:560px){.rent-card{padding:16px 15px;}.rent-cta{padding:18px 17px;} .rent-tbl th,.rent-tbl td{padding:11px 12px;font-size:13.5px;}} /* ── หน้ารีวิวเต็ม /reviews ── */ .rvp-more{font-size:13.5px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap;} .rvp-more:hover{text-decoration:underline;} .rvp-sum{display:grid;gap:11px;margin:0 0 20px;} @media(min-width:640px){.rvp-sum{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}} .rvp-sum div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 17px;} .rvp-sum b{display:block;font-size:25px;font-weight:850;letter-spacing:-.6px;line-height:1.1; font-variant-numeric:tabular-nums;} .rvp-sum span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px;} .rvp-sum .g b{color:#1a56c4;} .rvp-sum .f b{color:#1257c9;} .rvp-sum .l b{color:#04863b;} .rvp-sum .a b{color:var(--brand);} /* เรียงเป็นคอลัมน์แบบหนังสือพิมพ์ การ์ดสูงไม่เท่ากันจึงไม่เหลือช่องว่าง */ .rvp-grid{columns:1;column-gap:14px;} @media(min-width:700px){.rvp-grid{columns:2;}} @media(min-width:1040px){.rvp-grid{columns:3;}} .rvp-c{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:17px 18px;margin:0 0 14px;display:block;} .rvp-c .h{display:flex;align-items:flex-start;gap:11px;margin-bottom:10px;} .rvp-c .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--surface-2);color:var(--ink-2);font-weight:800;font-size:15px;} .rvp-c .nm{font-weight:800;font-size:14.5px;line-height:1.3;} .rvp-c .stars{color:#f5a623;font-size:12.5px;letter-spacing:1px;margin-top:1px;} .rvp-c .t{font-size:14px;line-height:1.75;color:var(--ink-2);white-space:pre-line;} .rvp-c img{width:100%;border-radius:11px;margin:11px 0 0;display:block;cursor:zoom-in;} .rvp-c .n{font-size:12px;color:var(--ink-4);margin-top:10px;} .rvp-cta{margin-top:26px;background:var(--surface-2);border-radius:16px;padding:22px 24px; display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .rvp-cta p{margin:0;flex:1 1 240px;font-size:14.5px;line-height:1.7;color:var(--ink-2);} .rvp-cta b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px;} .rvp-cta a{flex:0 0 auto;border-radius:11px;padding:11px 20px;font-size:14px;font-weight:800; text-decoration:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);} .rvp-cta a.g{border-color:#c9ddfb;background:#e8f0fe;color:#1a56c4;} .rvp-cta a.f{border-color:#c6dcff;background:#e7f0ff;color:#1257c9;} .rvp-cta a:hover{filter:brightness(.97);} .rvp-empty{background:var(--surface);border:1px dashed var(--line);border-radius:16px; padding:34px 20px;text-align:center;color:var(--ink-3);font-size:14.5px;} @media(max-width:560px){.rvp-c{padding:15px 15px;border-radius:14px;} .rvp-sum b{font-size:22px;}.rvp-cta{padding:18px 17px;}} /* ── ที่มาของรีวิว ── สีป้ายอิงสีจริงของแต่ละแพลตฟอร์ม คนจึงกวาดตาเจอทันที */ .rv-src{margin-left:auto;flex:none;align-self:flex-start;font-size:10.5px;font-weight:800; letter-spacing:.02em;border-radius:6px;padding:3px 8px;white-space:nowrap; background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);} a.rv-src{text-decoration:none;transition:filter .15s;} a.rv-src:hover{filter:brightness(.94);} .rv-google{background:#e8f0fe;color:#1a56c4;border-color:#c9ddfb;} .rv-facebook{background:#e7f0ff;color:#1257c9;border-color:#c6dcff;} .rv-line{background:#e6f7ec;color:#04863b;border-color:#c3ecd3;} .rv-shopee{background:#ffeee6;color:#d1440a;border-color:#ffd6c2;} .rv-lazada{background:#eeeaff;color:#4b2fb5;border-color:#d8d0ff;} .rv-tiktok{background:#f1f1f3;color:#1f1f24;border-color:#dedee3;} .rv-store{background:#fff2ec;color:#a83b0c;border-color:#ffd9c7;} :root[data-theme="dark"] .rv-src{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rv-src{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);} } /* แถบกรองด้านบนรายการรีวิว */ .rv-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;} .rv-f{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3); border-radius:999px;padding:7px 15px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;} .rv-f b{font-weight:800;opacity:.6;margin-left:2px;} .rv-f:hover{border-color:var(--ink-4);color:var(--ink);} .rv-f.on{background:var(--solid);border-color:var(--solid);color:#fff;} .rv-f.on b{opacity:.75;} /* กรอง 2 ชั้นพร้อมกันได้ ใช้คนละคลาส จะได้ไม่ทับกัน */ .rvp-c.rv-hide-topic{display:none;} @media(max-width:560px){.rv-f{padding:6px 12px;font-size:12px;}.rv-filter{margin-bottom:11px;}} /* วิดีโอบนแบนเนอร์ — วางทับกรอบเดียวกับรูป จะได้สัดส่วนและการครอบเท่ากันเป๊ะ */ .hero-vid{position:absolute;inset:0;} .hero-vid video{width:100%;height:100%;display:block;object-fit:cover; object-position:var(--hero-pos,center);background:#0c0c0f;} .hero-fit-contain .hero-vid video{object-fit:contain;} @keyframes sp{to{transform:rotate(360deg)}} .ssr-card{text-decoration:none;color:inherit;display:block;} .ssr-card .ph{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;} .ssr-detail{grid-column:1/-1;} .ssr-detail h1{font-size:20px;margin:8px 0 2px;} .ssr-detail .ssr-sub{margin:0 0 10px;color:var(--sub);font-size:14px;} .ssr-detail dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;} .ssr-detail dt{color:var(--sub);} .ssr-detail dd{margin:0;font-weight:600;} .ssr-note{margin-top:14px;} /* ---------- หน้า "ผ่อนไปใช้ไป" ---------- */ .inst-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 8px;} @media(max-width:700px){.inst-two{grid-template-columns:1fr;}} .inst-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;} .inst-card.on{border-color:var(--brand);box-shadow:0 6px 22px rgba(244,81,30,.10);} .inst-card b{display:block;font-size:16px;margin-bottom:7px;color:var(--ink);} .inst-card.on b:after{content:"บริการหลักของร้าน";display:inline-block;margin-left:8px;vertical-align:2px; font-size:10.5px;font-weight:700;color:#fff;background:var(--brand);border-radius:99px;padding:2px 9px;} .inst-card p{font-size:14px;line-height:1.75;color:var(--sub);margin:0;} .inst-h3{font-size:18px;font-weight:800;letter-spacing:-.2px;margin:26px 0 12px;color:var(--ink);} .inst-steps{list-style:none;counter-reset:i;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;margin:0;} @media(max-width:820px){.inst-steps{grid-template-columns:1fr 1fr;}} @media(max-width:480px){.inst-steps{grid-template-columns:1fr;}} .inst-steps li{counter-increment:i;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;} .inst-steps li:before{content:counter(i);display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:13px;margin-bottom:9px;} .inst-steps b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--ink);} .inst-steps span{font-size:13px;line-height:1.65;color:var(--sub);} .inst-eg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(max-width:820px){.inst-eg{grid-template-columns:1fr 1fr;}} @media(max-width:480px){.inst-eg{grid-template-columns:1fr;}} .inst-eg a{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line); border-radius:16px;padding:14px 16px;} .inst-eg a:hover{border-color:var(--brand);} .inst-eg .m{font-weight:800;font-size:14.5px;color:var(--ink);} .inst-eg .s{font-size:12.5px;color:var(--sub);margin:2px 0 8px;} .inst-eg .d{font-weight:800;color:var(--brand);font-size:15px;} .inst-eg .t{font-size:12.5px;color:var(--sub);} .inst-note{font-size:12.5px;color:var(--sub);line-height:1.7;margin-top:12px;} .inst-faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:8px;} .inst-faq summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;font-size:14.5px;} .inst-faq summary::-webkit-details-marker{display:none;} .inst-faq summary:after{content:"+";float:right;color:var(--brand);font-weight:800;} .inst-faq details[open] summary:after{content:"−";} .inst-faq p{margin:0;padding:0 16px 14px;font-size:14px;line-height:1.75;color:var(--sub);} .inst-cta{margin-top:22px;} .inst-cta a{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:800; font-size:15px;padding:14px 30px;border-radius:999px;} .ssr-note h2{font-size:15px;margin:0 0 6px;} .ssr-note p{margin:0 0 4px;line-height:1.7;}