/* Layout: Mockup toolbar (นอกดีไซน์) + กรอบเว็บ .site ย่อเป็นมือถือ 390px หรือเต็มคอม · container query เพื่อสลับมุมมองได้
   .site.bright = โทนสว่าง (เสนอ v2) / .site.dark = โทนเดิม (v1 อนุมัติ 30-09-26) · .ink = บล็อกดำประจำแบรนด์ */
.x4-mk{
  color-scheme:dark;
  --c-black:#0E0E0E; --c-orange:#F48028; --c-orange-hover:#D96A15; --c-ok:#2FBF71;
  --c-orange-text:#B35200;
  --m-bg:#2B2B2E; --m-bar:#18181A; --m-fg:#E9E9EC; --m-dim:#9A9AA2; --m-note:#7FB7FF; --m-wait:#E7C14B;
  --f-plex:'IBM Plex Sans Thai',"Noto Sans Thai",Tahoma,system-ui,sans-serif;
  --f-anuphan:'Anuphan',"Noto Sans Thai",Tahoma,system-ui,sans-serif;
  --f-kanit:'Kanit',"Noto Sans Thai",Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
}
.x4-mk *{box-sizing:border-box}
.x4-mk{margin:0;background:var(--m-bg);color:var(--m-fg);font-family:system-ui,sans-serif;font-size:16px;line-height:1.6}
.x4-mk button,.x4-mk select,.x4-mk input{font:inherit;color:inherit}
.x4-mk :focus-visible{outline:2px solid var(--c-orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.x4-mk *{scroll-behavior:auto!important;transition:none!important}}
.x4-mk .mbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--m-bar);border-bottom:1px solid #000;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px}
.x4-mk .mbar b{font-weight:600}
.x4-mk .mbar .grp{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.x4-mk .mbar .grp>span{color:var(--m-dim);margin-right:2px}
.x4-mk .mbar button{background:transparent;border:1px solid #3A3A40;border-radius:4px;padding:4px 9px;cursor:pointer;color:var(--m-dim)}
.x4-mk .mbar button[aria-pressed="true"]{background:var(--m-fg);color:#111;border-color:var(--m-fg)}
.x4-mk .mbar .sp{flex:1}
.x4-mk .mbar small{color:var(--m-dim)}
.x4-mk .stage{padding:24px 16px 64px;display:flex;justify-content:center}
.x4-mk .stage.mob .site{max-width:390px;border-radius:28px;box-shadow:0 0 0 10px #111,0 0 0 11px #444,0 30px 60px rgba(0,0,0,.5)}
.x4-mk .stage.mob .site>*:first-child{border-radius:28px 28px 0 0}
/* ---------- Theme tokens ---------- */
/* ---------- ทดลองโทนขาว (.lt) · v47 · เฉพาะ HOME / หน้าสินค้า / Hub ขาย ---------- */
.x4-mk .site.dark.lt{--bg:#FFFFFF;--alt:#F4F5F6;--fg:#141414;--muted:#5C5F66;--surface:#FFFFFF;--line:#E3E5E8;--chip:#F1F2F4;--link:var(--c-orange-text);--shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.07);--wait:#8A6A00;--wait-bg:rgba(231,193,75,.10);--ph1:#EDEFF1;--ph2:#F4F5F6;--ph-ink:#6B6F76}
.x4-mk .lt .card{box-shadow:var(--shadow)}
/* hover กลาง: ขอบส้ม 2px + เงา + ลอยขึ้น (ทุกการ์ด / กล่องที่กดได้) */
.x4-mk .card,.x4-mk .rcard,.x4-mk .post,.x4-mk .model,.x4-mk .s9card,.x4-mk .hubinfo-link,.x4-mk .hubcta,.x4-mk .gdlink,.x4-mk .rcv3 .ptile,.x4-mk .opt,.x4-mk .pick label,.x4-mk .pvi,.x4-mk .ordc,.x4-mk .tcard{transition:border-color .15s,box-shadow .15s,transform .15s}
.x4-mk .site .card:hover,.x4-mk .site .model:hover,.x4-mk .site .hubinfo-link:hover,.x4-mk .site .hubcta:hover,.x4-mk .site .gdlink:hover,.x4-mk .site .opt:hover,.x4-mk .site .pick label:hover,.x4-mk .site .ordc:hover{border-color:var(--c-orange);box-shadow:0 0 0 2px var(--c-orange),0 10px 24px rgba(16,24,40,.12);transform:translateY(-2px)}
.x4-mk .site .rcard:hover img{box-shadow:0 0 0 2px var(--c-orange)}
.x4-mk .site .rcard:hover{transform:translateY(-2px)}
.x4-mk .site .post .media{transition:box-shadow .15s}.x4-mk .site .post:hover .media{box-shadow:0 0 0 2px var(--c-orange),0 10px 24px rgba(16,24,40,.12)}.x4-mk .site .post:hover b{color:var(--c-orange-text)}
.x4-mk .site .hscroll{padding-top:6px;padding-inline:3px;scroll-padding-inline:3px}
@media (hover:none){.x4-mk .site .card:hover,.x4-mk .site .post:hover,.x4-mk .site .model:hover,.x4-mk .site .opt:hover,.x4-mk .site .pick label:hover,.x4-mk .site .ordc:hover,.x4-mk .site .rcard:hover,.x4-mk .lt .cat:hover,.x4-mk .site.lt .s9card:hover{transform:none}}
.x4-mk .lt .cat{transition:border-color .15s,box-shadow .15s,transform .15s}
.x4-mk .lt .cat:hover{border-color:var(--c-orange);box-shadow:0 0 0 2px var(--c-orange),0 10px 24px rgba(16,24,40,.12);transform:translateY(-2px)}
.x4-mk .site .tscroll{scrollbar-width:thin;scrollbar-color:var(--c-orange) #FFFFFF}
.x4-mk .site .tscroll::-webkit-scrollbar{height:8px}
.x4-mk .site .tscroll::-webkit-scrollbar-track{background:#FFFFFF;border-top:1px solid #E3E5E8}
.x4-mk .site .tscroll::-webkit-scrollbar-thumb{background:var(--c-orange);border-radius:4px}
.x4-mk .site .tscroll::-webkit-scrollbar-button{display:none}
.x4-mk .lt .hero .media::after,.x4-mk .lt .cat::after,.x4-mk .lt .rcard::after,.x4-mk .lt .lpx-m::after{display:none}
.x4-mk .lt .hero .copy{margin-top:0;padding-top:20px}
.x4-mk .site.lt .hero .copy{margin-top:0!important}
.x4-mk .lt .ptile{background:#F4F5F6;border-color:#E3E5E8;color:#141414}
.x4-mk .lt .ptile .bg{-webkit-text-stroke:1.5px #D3D6DA}
.x4-mk .lt .ptile .sm{color:#5C5F66}
.x4-mk .lt .ptile.solid{background:var(--c-orange);border-color:var(--c-orange);color:#000}
.x4-mk .lt .ptile.solid .sm{color:#2A1300}
.x4-mk .lt .ptile.solid .bg{-webkit-text-stroke:1.5px rgba(0,0,0,.18)}
.x4-mk .lt .s09{background:#FFFFFF;color:#141414;--fg:#141414;--muted:#5C5F66;--line:#E3E5E8}
.x4-mk .lt .s09 .h2{color:#141414}
.x4-mk .lt .s09 .s09tabs button{color:#7A7D84}.x4-mk .lt .s09 .s09tabs button[aria-selected="true"]{color:#141414}
.x4-mk .lt .s09 .s09bar{background:#E3E5E8}
.x4-mk .lt .s09 .pbar::before{background:#E3E5E8}
.x4-mk .site.lt .s9card{background:#141414;color:#fff;border-radius:8px;box-shadow:0 10px 26px rgba(16,24,40,.18)}
.x4-mk .site.lt .s9card:hover{box-shadow:0 0 0 2px var(--c-orange),0 14px 30px rgba(16,24,40,.22)}
.x4-mk .site.lt .s9card span,.x4-mk .site.lt .s9card .pr small,.x4-mk .site.lt .s9card .st{color:#B8B8B8}
.x4-mk .site.lt .s9card .pr .price{color:#fff}
.x4-mk .site.lt .s9card .go{color:var(--c-orange)}
.x4-mk .site.lt .s9card .media .ph{background:repeating-linear-gradient(135deg,#1E1E1E 0 10px,#232323 10px 20px);color:#9A9EA5;border-color:#2E2E2E}
.x4-mk .lt .s9card{box-shadow:0 8px 22px rgba(16,24,40,.10)}
.x4-mk .lt .pbar::before{background:#E3E5E8}
.x4-mk .lt .vbar{background:#F4F5F6}
.x4-mk .lt .hubcta{background:#FFFFFF;box-shadow:var(--shadow)}
.x4-mk .lt .sheet{background:#FFFFFF;border-color:#E3E5E8}.x4-mk .lt .sheet>div{border-color:#EEF0F2}
.x4-mk .lt .lpx{background:#F4F5F6;border-color:#E3E5E8}.x4-mk .lt .lpx-bg{-webkit-text-stroke:1.5px #DDE0E4}.x4-mk .lt .lpx-l li{border-color:#E3E5E8}.x4-mk .lt .lpx-l p{color:#5C5F66}
.x4-mk .lt .pvimg::after{background:radial-gradient(ellipse at center,rgba(0,0,0,.28),transparent 70%)}
.x4-mk .lt .rec{border-color:#E3E5E8}
/* โทนขาว: Header / Footer / แถบติดจอ / เมนู / ค้นหา */
.x4-mk .lt .hdr.ink,.x4-mk .lt .ftr.ink,.x4-mk .lt .stickybar.ink{--bg:#FFFFFF;--fg:#141414;--muted:#5C5F66;--surface:#FFFFFF;--line:#E3E5E8;--chip:#F1F2F4;--link:var(--c-orange-text)}
.x4-mk .lt .hdr.ink{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #E3E5E8;box-shadow:0 2px 12px rgba(16,24,40,.06)}
.x4-mk .lt .logo{color:#141414;border-color:#C9CDD2}.x4-mk .lt .logo small{color:#6B6F76}
.x4-mk .lt .lang{border-color:#D5D8DC}.x4-mk .lt .lang button{color:#5C5F66}.x4-mk .lt .lang button[aria-pressed="true"]{background:#141414;color:#fff}
.x4-mk .lt .sbox{border:1px solid #D5D8DC;background:#F7F8F9}
.x4-mk .lt .sbox:focus-within{background:#fff}
.x4-mk .lt .mega{background:#FFFFFF;border-color:#E3E5E8;box-shadow:0 12px 32px rgba(16,24,40,.12)}
.x4-mk .lt .mcol .mh{color:#141414;border-color:#E3E5E8}.x4-mk .lt .mcol a{color:#5C5F66}
.x4-mk .lt .sg{background:#FFFFFF;border-color:#E3E5E8;box-shadow:0 12px 32px rgba(16,24,40,.12)}
.x4-mk .lt .sg-i{color:#2B2D31}.x4-mk .lt .sg-i:hover{background:#F4F5F6;color:#141414}.x4-mk .lt .sg-i b{color:#141414}.x4-mk .lt .sg-i span{color:#6B6F76}
.x4-mk .lt .ftr.ink{background:#FFFFFF;border-top:1px solid #E3E5E8;box-shadow:0 -2px 12px rgba(16,24,40,.04)}
.x4-mk .lt .picker.ink{--bg:#F4F5F6;--fg:#141414;--muted:#5C5F66;--surface:#FFFFFF;--line:#DADDE1;background:#F4F5F6;border-color:#E3E5E8}
.x4-mk .lt .fcol h4{color:#141414}.x4-mk .lt .fcol a,.x4-mk .lt .crow{color:#5C5F66}.x4-mk .lt .pay span{border-color:#D5D8DC;color:#3D4046}
.x4-mk .lt .fbot{border-color:#E3E5E8;color:#6B6F76}
.x4-mk .lt .fbrand p{color:#5C5F66}
.x4-mk .lt .stickybar.ink{background:rgba(255,255,255,.97);box-shadow:0 -8px 24px rgba(16,24,40,.10)}
.x4-mk .lt .stickybar button:not(.cartb){background:#F4F5F6;border-color:#D5D8DC;color:#141414}
.x4-mk .lt .stickybar button:not(.cartb):active{background:#E9EBEE}
.x4-mk .lt-on .drawer{--bg:#FFFFFF;--fg:#141414;--muted:#5C5F66;--line:#E3E5E8;--surface:#FFFFFF;--chip:#F1F2F4;--link:var(--c-orange-text)}
.x4-mk .lt-on .modal.ink{--bg:#FFFFFF;--fg:#141414;--muted:#5C5F66;--line:#E3E5E8;background:#FFFFFF;color:#141414;border-color:#E3E5E8;box-shadow:0 20px 50px rgba(16,24,40,.2)}
.x4-mk .lt-on .scrim{background:rgba(16,24,40,.35)}
.x4-mk .lt .ptile{background:#141414;border-color:#141414;color:#fff}
.x4-mk .site.lt .ptile .bg{-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
.x4-mk .site.lt .ptile .bg.fill{color:rgba(244,128,40,.16);-webkit-text-stroke:1px rgba(255,255,255,.30)}
.x4-mk .lt .ptile .sm{color:#C9CBD0!important}
.x4-mk .lt .ptile .k{color:var(--c-orange)}
.x4-mk .lt .ptile .big em{color:var(--c-orange)}
.x4-mk .lt .ptile.solid{background:var(--c-orange);border-color:var(--c-orange);color:#000}
.x4-mk .lt .ptile.solid .sm{color:#2A1300!important}.x4-mk .lt .ptile.solid .k{color:#000}
.x4-mk .site.lt .ptile.solid .bg{-webkit-text-stroke:1.5px rgba(0,0,0,.14)}
.x4-mk .lt .picker.ink{--bg:#141414;--fg:#fff;--muted:#B8B8B8;--surface:#1A1A1A;--line:#2E2E2E;background:#141414;border-color:#141414;color:#fff}
.x4-mk .lt .picker.ink .pt small,.x4-mk .lt .picker.ink .lbl{color:#B8B8B8!important}
.x4-mk .lt .lpx{background:#141414;border-color:#141414;color:#fff;--fg:#fff;--muted:#B8B8B8}
.x4-mk .lt .lpx .h2{color:#fff}.x4-mk .lt .lpx-l b{color:#fff}.x4-mk .lt .lpx-l p{color:#B8B8B8!important}
.x4-mk .lt .lpx .lpx-cap b{color:#fff!important}.x4-mk .lt .lpx .lpx-cap span{color:#B8B8B8!important}
.x4-mk .lt .lpx-bg{-webkit-text-stroke:1.5px rgba(255,255,255,.10)}
.x4-mk .lt .lpx-l li,.x4-mk .lt .lpx-l li:last-child{border-color:rgba(255,255,255,.12)}
.x4-mk .lt .vbar{background:#141414}
.x4-mk .site.lt .lpx-m{aspect-ratio:auto!important;overflow:visible;height:auto;display:block}.x4-mk .site.lt .lpx-m img{display:block;height:auto;aspect-ratio:4/3;border-radius:10px}
.x4-mk .lt .lpx-cap{position:static;padding-top:10px}.x4-mk .lt .lpx-cap b{color:#141414}.x4-mk .lt .lpx-cap span{color:#5C5F66}
.x4-mk .lt .cat{aspect-ratio:auto;color:var(--fg);display:grid;background:#FFFFFF}
.x4-mk .lt .cat .media{position:relative;inset:auto;aspect-ratio:4/3}
.x4-mk .lt .cat .t{position:static;padding:10px 12px 12px}.x4-mk .lt .cat .t span{color:#5C5F66}
.x4-mk .lt .rcard{text-decoration:none;aspect-ratio:auto;color:var(--fg);display:grid;overflow:visible}
.x4-mk .lt .rcard img{position:relative;inset:auto;aspect-ratio:4/5;border-radius:8px}
.x4-mk .lt .rcard .tx{position:static;padding:10px 2px 0}.x4-mk .lt .rcard small{color:#5C5F66}
.x4-mk .lt .rcard .play{top:40%}
.x4-mk .lt .pvtxt{color:#141414}.x4-mk .lt .pvtxt span{color:#5C5F66}.x4-mk .lt .pvnav{color:#141414}
.x4-mk .lt .art-w p,.x4-mk .lt .art-w .art-ul li{color:#2B2D31}.x4-mk .lt .art-lead{color:#3D4046}
@container site (min-width:1024px){
  .x4-mk .site.lt .hero .media::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,0) 55%)}
  .x4-mk .site.lt .hero .copy{color:#fff;--fg:#fff;--muted:#F0F0F0}
  .x4-mk .site.lt .hero h1,.x4-mk .site.lt .hero .h1{color:#fff!important}
  .x4-mk .site.lt .hero h1{font-size:52px;font-weight:700;text-shadow:0 2px 16px rgba(0,0,0,.45)}
  .x4-mk .site.lt .hero p{color:#F2F2F2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .x4-mk .site.lt .hero .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .x4-mk .site.lt .hero .btn-g{color:#fff;border-color:#fff}
}
.x4-mk .site{container:site/inline-size;width:100%;max-width:1440px;position:relative;background:var(--bg);color:var(--fg);font-family:var(--f);line-height:1.6}
.x4-mk .f-plex{--f:var(--f-plex)} .x4-mk .f-anuphan{--f:var(--f-anuphan)} .x4-mk .f-kanit{--f:var(--f-kanit)}
.x4-mk .bright{--bg:#FFFFFF;--alt:#F4F5F6;--fg:#141414;--muted:#5C5F66;--surface:#FFFFFF;--line:#E3E5E8;--chip:#F1F2F4;--link:var(--c-orange-text);--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06);--wait:#8A6A00;--wait-bg:rgba(231,193,75,.10);--ph1:#EDEFF1;--ph2:#F4F5F6;--ph-ink:#6B6F76}
.x4-mk .dark{--bg:#0E0E0E;--alt:#F5F5F5;--fg:#FFFFFF;--muted:#B8B8B8;--surface:#1A1A1A;--line:#2A2A2A;--chip:#262626;--link:var(--c-orange);--shadow:none;--wait:var(--m-wait);--wait-bg:rgba(231,193,75,.06);--ph1:#1E1E1E;--ph2:#232323;--ph-ink:#B8B8B8}
.x4-mk .ink{--bg:#0E0E0E;--fg:#FFFFFF;--muted:#A9ABB0;--surface:#1A1A1A;--line:#2E2E2E;--chip:#262626;--link:var(--c-orange);--shadow:none;--wait:var(--m-wait);--wait-bg:rgba(231,193,75,.06);--ph1:#1E1E1E;--ph2:#232323;--ph-ink:#B8B8B8;background:var(--bg);color:var(--fg)}
.x4-mk .alt{--surface:#FFFFFF;--fg:#141414;--muted:#5C5F66;--line:#E3E5E8;--chip:#EDEFF1;--link:var(--c-orange-text);--wait:#8A6A00;--wait-bg:rgba(231,193,75,.10);--ph1:#E7E9EC;--ph2:#EEF0F2;--ph-ink:#6B6F76;background:var(--alt);color:var(--fg)}
.x4-mk .ann{display:none}
.x4-mk .show-ann .ann{display:inline-flex}
.x4-mk .tag{position:absolute;top:6px;left:6px;z-index:7;font:600 11px/1 var(--mono);background:var(--m-note);color:#06203F;padding:4px 6px;border-radius:3px}
.x4-mk .slot{font:600 11px/1 var(--mono);background:var(--m-note);color:#06203F;padding:3px 5px;border-radius:3px;margin-right:6px;vertical-align:middle}
.x4-mk .sz{position:absolute;right:6px;bottom:6px;z-index:6;font:600 10px/1.2 var(--mono);background:rgba(0,0,0,.78);color:#FFE6A8;padding:3px 6px;border-radius:3px;pointer-events:none}
.x4-mk .wait{border:1px dashed var(--wait);color:var(--wait);background:var(--wait-bg);border-radius:6px;padding:12px 14px;font-size:14px;line-height:1.5}
.x4-mk .wait strong{font-weight:600}
.x4-mk .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(135deg,var(--ph1) 0 10px,var(--ph2) 10px 20px);color:var(--ph-ink);font-size:13px;line-height:1.4;padding:12px;border:1px dashed var(--line)}
.x4-mk .ph code{font:11px/1.3 var(--mono);word-break:break-all;margin-top:4px;opacity:.85}
.x4-mk .ph.cut{background:#FFFFFF;color:#80848C;border:1px dashed #D9DCE0}
.x4-mk .ph.cut svg{color:#C6CACF;margin-bottom:6px}
/* ---------- Base ---------- */
.x4-mk .wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
.x4-mk .sec{padding-block:48px;position:relative}
.x4-mk h1,.x4-mk h2,.x4-mk h3{margin:0;font-weight:600;line-height:1.25;text-wrap:balance}
.x4-mk .h1{font-size:28px;font-weight:700;letter-spacing:-.01em}
.x4-mk .h2{font-size:24px;letter-spacing:-.005em}
.x4-mk .h3{font-size:18px}
.x4-mk .eyebrow{font-size:12px;color:var(--link);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.x4-mk .muted{color:var(--muted)}
.x4-mk .small{font-size:14px}
.x4-mk .sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.x4-mk .sec-head a{color:var(--link);font-size:14px;text-decoration:none;white-space:nowrap;font-weight:600}
.x4-mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:4px;border:0;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.x4-mk .btn-o{background:var(--c-orange);color:#000}
.x4-mk .btn-o:hover{background:var(--c-orange-hover)}
.x4-mk .btn-g{background:transparent;color:var(--fg);border:1px solid var(--fg)}
.x4-mk .btn-sm{height:36px;padding:0 12px;font-size:14px}
.x4-mk .price{font-weight:700;font-variant-numeric:tabular-nums}
.x4-mk .badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;padding:5px 8px;border-radius:3px;white-space:nowrap}
.x4-mk .b-wait{border:1px dashed var(--wait);color:var(--wait)}
.x4-mk .fit{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg);background:var(--chip);border:1px solid var(--line);border-radius:3px;padding:4px 8px}
.x4-mk .fit svg{flex:none;color:var(--c-orange)}
.x4-mk select.inp,.x4-mk input.inp{height:48px;border-radius:4px;border:1px solid var(--line);background:var(--surface);padding:0 12px;width:100%;color:var(--fg)}
.x4-mk select.inp:disabled{opacity:.5}
.x4-mk .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.x4-mk .hscroll{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;overscroll-behavior-x:contain}
.x4-mk .hscroll::-webkit-scrollbar{display:none}
.x4-mk .pbar{position:relative;height:24px;margin:8px auto 0;max-width:560px;width:70%;cursor:grab;touch-action:none;user-select:none}
.x4-mk .pbar::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:#2E2E2E;transition:height .15s,top .15s}
.x4-mk .alt .pbar::before,.x4-mk .on-light .pbar::before{background:#DADDE1}
.x4-mk .pbar span{position:absolute;left:0;top:10px;height:4px;background:var(--c-orange);border-radius:2px;transition:height .15s,top .15s}
.x4-mk .pbar:hover::before,.x4-mk .pbar:hover span,.x4-mk .pbar.drag::before,.x4-mk .pbar.drag span{top:9px;height:6px;border-radius:3px}
.x4-mk .pbar.drag{cursor:grabbing}
.x4-mk .hscroll>*{scroll-snap-align:start}
.x4-mk .media{position:relative;overflow:hidden;background:var(--ph1);max-width:100%}
.x4-mk .media>img,.x4-mk .media>.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x4-mk .media.cutbox{background:#FFFFFF}
/* ---------- Header ---------- */
.x4-mk .hdr{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--mbar-h,44px));z-index:40;border-bottom:1px solid var(--line)}
.x4-mk .hdr .row{display:flex;align-items:center;gap:4px;height:60px}
.x4-mk .hdr .row>.btn-sm{padding:0 10px;margin-left:2px}
.x4-mk .icon-btn{width:34px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--fg);position:relative;border-radius:4px}
.x4-mk .icon-btn:hover{color:var(--c-orange)}
.x4-mk .cart-n{position:absolute;top:3px;right:-2px;min-width:17px;height:17px;border-radius:9px;background:var(--c-orange);color:#000;font-size:11px;font-weight:700;line-height:17px;text-align:center;padding:0 4px}
.x4-mk .logo{display:flex;flex-direction:column;justify-content:center;height:40px;padding:0 6px;flex:none;border:1px dashed #555;border-radius:3px;text-decoration:none;color:#fff;line-height:1}
.x4-mk .logo b{font-weight:700;font-size:13px;letter-spacing:.04em}.x4-mk .logo b i{font-style:normal;color:var(--c-orange)}
.x4-mk .logo small{font-size:9px;color:#B8B8B8;margin-top:3px;font-family:var(--mono)}
.x4-mk .lang{display:inline-flex;border:1px solid #444;border-radius:4px;overflow:hidden;flex:none;height:28px;margin-left:2px}
.x4-mk .lang button{background:none;border:0;color:#B8B8B8;font-size:11px;font-weight:600;padding:0 6px;cursor:pointer}
.x4-mk .lang button[aria-pressed="true"]{background:#fff;color:#000}
.x4-mk .nav{display:none}
.x4-mk .hsearch{display:none}
.x4-mk .hdr .grow{flex:1}
.x4-mk .searchrow{padding-bottom:12px}
.x4-mk .sbox{display:flex;align-items:center;gap:8px;height:48px;background:#FFFFFF;border:2px solid #FFFFFF;border-radius:6px;padding:0 12px;color:#111}
.x4-mk .sbox:focus-within{border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(244,128,40,.35)}
.x4-mk .sbox svg{color:#555;flex:none;width:22px;height:22px}
.x4-mk .sbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#2B2D31;font-size:17px;font-weight:400;letter-spacing:.01em;height:100%}
.x4-mk .sbox input::placeholder{color:#6B6F76;font-weight:400;opacity:1}
.x4-mk .sbox svg{color:#6B6F76!important;stroke-width:1.6}
.x4-mk .searchrow[hidden]{display:none}
.x4-mk .sbtn[aria-expanded="true"]{color:var(--c-orange)}
.x4-mk .hdrveh{display:none}
/* ---------- HOME: S01 ---------- */
.x4-mk .hero{position:relative}
.x4-mk .hero .media{aspect-ratio:16/10}
.x4-mk .hero .copy{position:relative;z-index:2}
.x4-mk .bright .hero .card-copy{background:var(--surface);border-radius:8px;box-shadow:0 12px 32px rgba(16,24,40,.14);padding:20px;margin-top:-56px;position:relative}
.x4-mk .dark .hero .media{aspect-ratio:4/3}
.x4-mk .dark .hero .media::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,transparent,#0E0E0E)}
.x4-mk .dark .hero .copy{padding-block:4px 32px;width:100%;margin-top:-28px}
.x4-mk .hero .media img{animation:kb 9s ease-out both;filter:saturate(1.12) contrast(1.04)}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.x4-mk .hero .media img{animation:none}}
.x4-mk .hchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:13px;color:#B8B8B8}
.x4-mk .hchips button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:16px;padding:4px 12px;font-size:13px;cursor:pointer;backdrop-filter:blur(4px)}
.x4-mk .hchips button:hover{border-color:var(--c-orange);color:var(--c-orange)}
/* S05 photo tiles */
.x4-mk .ptiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x4-mk .ptile{position:relative;overflow:hidden;border-radius:8px;background:#161616;border:1px solid #262626;padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;min-width:0}
.x4-mk .ptile .bg{position:absolute;right:-6px;top:-14px;font-size:96px;font-weight:700;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #3A3A3A;pointer-events:none;white-space:nowrap}
.x4-mk .ptile .bg.fill{color:rgba(244,128,40,.16);-webkit-text-stroke:0}
.x4-mk .ptile .k{position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange);font-weight:700}
.x4-mk .ptile .big{position:relative;font-size:24px;font-weight:700;line-height:1.1;margin-top:4px}
.x4-mk .ptile .big em{font-style:normal;color:var(--c-orange)}
.x4-mk .ptile .sm{position:relative;font-size:12px;color:#A9ABB0;margin-top:6px;line-height:1.45}
.x4-mk .ptile .pill2{position:relative;align-self:flex-start;margin-top:8px;font-size:11px;font-weight:700;background:#fff;color:#000;border-radius:3px;padding:2px 7px}
.x4-mk .ptile.solid{background:var(--c-orange);border-color:var(--c-orange);color:#000}
.x4-mk .ptile.solid .k{color:#000;opacity:.6}.x4-mk .ptile.solid .sm{color:#2A1300}
.x4-mk .ptile.solid .bg{-webkit-text-stroke:1.5px rgba(0,0,0,.18)}
.x4-mk .sample{position:absolute;left:8px;top:8px;z-index:4;font-size:11px;background:rgba(0,0,0,.72);color:#FFE6A8;padding:2px 7px;border-radius:3px}
/* S06 review cards */
.x4-mk .rcard{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;max-width:100%;color:#fff}
.x4-mk .rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x4-mk .rcard::after{content:"";position:absolute;inset:50% 0 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85))}
.x4-mk .rcard .tx{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:grid;gap:4px}
.x4-mk .rcard .mdl{justify-self:start;font-size:12px;background:var(--c-orange);color:#000;font-weight:600;padding:2px 8px;border-radius:3px}
.x4-mk .rcard b{font-size:15px;font-weight:600;line-height:1.35}
.x4-mk .rcard small{font-size:12px;color:#ddd}
.x4-mk .rcard .plat{position:absolute;right:8px;top:8px;z-index:4;font-size:11px;background:#fff;color:#000;font-weight:600;padding:2px 7px;border-radius:3px}
.x4-mk .rcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.x4-mk .hero h1{max-width:18ch}
.x4-mk .hero p{margin:10px 0 18px;max-width:46ch;color:var(--muted)}
.x4-mk .hero .acts{display:flex;gap:10px;flex-wrap:wrap}
/* S02 */
.x4-mk .picker{border:1px solid var(--line);border-radius:8px;padding:20px;display:grid;gap:12px;position:relative}
.x4-mk .picker .lbl{font-size:13px;color:var(--muted);margin-bottom:4px;display:block}
.x4-mk .picker .fld{min-width:0}
.x4-mk .picker .pt{font-weight:600;font-size:18px}
.x4-mk .picker .pt small{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.x4-mk .s02{padding-block:24px 0}
/* S05 promise band */
.x4-mk .promise .ph2{display:grid;gap:6px;margin-bottom:28px}
.x4-mk .promise .ph2 p{margin:0;color:var(--muted);max-width:52ch;font-size:15px}
.x4-mk .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.x4-mk .pitem{padding:18px 14px 20px 0;border-top:1px solid var(--line);display:grid;gap:4px;align-content:start;position:relative}
.x4-mk .pitem:nth-child(odd){padding-right:16px}
.x4-mk .pitem:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.x4-mk .pitem::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:2px;background:var(--c-orange)}
.x4-mk .pitem:nth-child(even)::before{left:16px}
.x4-mk .pitem .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.x4-mk .pitem .big{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.x4-mk .pitem b{font-weight:600;font-size:15px;margin-top:6px}
.x4-mk .pitem span{font-size:13px;color:var(--muted);line-height:1.5}
/* S03 categories — product cut-outs on white */
.x4-mk .cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.x4-mk .cat{position:relative;display:block;border-radius:6px;overflow:hidden;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:#fff;aspect-ratio:4/5;max-width:100%}
.x4-mk .cat:hover{border-color:var(--c-orange)}
.x4-mk .cat .media{position:absolute;inset:0}
.x4-mk .cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.88));z-index:1}
.x4-mk .cat .t{position:absolute;left:12px;right:12px;bottom:12px;z-index:2}
.x4-mk .cat .t b{display:block;font-weight:600;font-size:17px;line-height:1.25}
.x4-mk .cat .t span{font-size:13px;color:#B8B8B8}
.x4-mk .usp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.x4-mk .usp div{color:#141414;background:#fff;border:1px solid #E2E2E2;border-radius:6px;padding:16px;display:grid;gap:6px;align-content:start}
.x4-mk .usp svg{color:var(--c-orange);width:28px;height:28px}
.x4-mk .usp b{font-weight:600;font-size:16px;line-height:1.35}
.x4-mk .usp span{font-size:14px;color:#555;line-height:1.5}
/* S09 */
.x4-mk .models{grid-auto-columns:80%}
.x4-mk .model{display:grid;border-radius:8px;overflow:hidden;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg);box-shadow:var(--shadow);max-width:100%}
.x4-mk .model:hover,.x4-mk .card:hover{border-color:var(--c-orange)}
.x4-mk .model .media{aspect-ratio:16/10}
.x4-mk .model .t{padding:12px 14px}
.x4-mk .model .t small{display:block;color:var(--link);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.x4-mk .model .t b{font-weight:600;font-size:19px;display:block;line-height:1.25}
.x4-mk .model .t span{font-size:13px;color:var(--muted)}
.x4-mk .dark .model{position:relative}
.x4-mk .dark .model .t{position:absolute;left:0;bottom:0;z-index:2}
.x4-mk .dark .model .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),transparent 70%)}
.x4-mk .dark .model .t span{color:#DDD}
/* S10 */
.x4-mk .cmp{display:grid;gap:12px}
.x4-mk .cmpc{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:var(--shadow)}
.x4-mk .cmpc .media{aspect-ratio:16/9}
.x4-mk .cmpc .bd{padding:16px;display:grid;gap:10px;align-content:start}
.x4-mk .cmpc .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.x4-mk .cmpc .nm b{font-size:20px;font-weight:600}
.x4-mk .cmpc .from{font-size:13px;color:var(--muted);text-align:right}
.x4-mk .cmpc .from .price{font-size:22px;color:var(--fg);display:block;line-height:1.2}
.x4-mk .cmpc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.x4-mk .cmpc dt{color:var(--muted)}.x4-mk .cmpc dd{margin:0}
/* cards */
.x4-mk .prods{grid-auto-columns:62%}
.x4-mk .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;color:var(--fg);cursor:pointer;text-align:left;padding:0;min-width:0;box-shadow:var(--shadow)}
.x4-mk .card .media{aspect-ratio:4/3}
.x4-mk .card .media .ph{font-size:11px}
.x4-mk .card .bd{padding:12px;display:grid;gap:6px;align-content:start;min-width:0}
.x4-mk .card .nm{font-size:15px;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.x4-mk .card .fitl{font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x4-mk .card .fitl b{color:var(--link);font-weight:600}
.x4-mk .card .pr{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.x4-mk .card .pr .price{font-size:18px}
.x4-mk .reviews{grid-auto-columns:70%}
.x4-mk .rv{aspect-ratio:4/5;border-radius:8px;max-width:100%;position:relative}
.x4-mk .posts{display:grid;gap:16px}
.x4-mk .post{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start;text-decoration:none;color:var(--fg)}
.x4-mk .post .media{aspect-ratio:1200/630;border-radius:6px}
.x4-mk .post .ph{font-size:11px;padding:6px}
.x4-mk .post b{font-weight:600;line-height:1.4;display:block}
.x4-mk .post small{color:var(--muted);font-size:13px}
.x4-mk #sticky,.x4-mk #cmpHost,.x4-mk #ckHost{display:contents}
.x4-mk .stickybar{position:sticky;bottom:0;z-index:30;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.x4-mk .stickybar button{height:48px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;cursor:pointer;position:relative}
.x4-mk .stickybar.ink{background:rgba(30,30,32,.97);border-top:2px solid var(--c-orange);box-shadow:0 -10px 28px rgba(0,0,0,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.x4-mk .stickybar button:not(.cartb){background:#2A2A2D;border-color:#55555A}
.x4-mk .stickybar button,.x4-mk .psticky .btn{transition:transform .32s cubic-bezier(.34,1.8,.64,1),background-color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.x4-mk .stickybar button:active,.x4-mk .psticky .btn:active{transform:scale(.9);transition-duration:.08s}
.x4-mk .stickybar button:not(.cartb):active{background:#3A3A3E;border-color:var(--c-orange)}
.x4-mk .stickybar button.cartb:active,.x4-mk .psticky .btn:active{background:var(--c-orange-hover)}
@media (prefers-reduced-motion:reduce){.x4-mk .stickybar button,.x4-mk .psticky .btn{transition:background-color .15s}.x4-mk .stickybar button:active,.x4-mk .psticky .btn:active{transform:none}}
.x4-mk .stickybar button.cartb{background:var(--c-orange);color:#000;border-color:var(--c-orange);font-weight:600}
.x4-mk .stickybar .w{position:absolute;top:-8px;right:4px;font-size:10px;line-height:1;background:var(--m-wait);color:#2B2000;padding:2px 4px;border-radius:2px}
.x4-mk .ftr{padding-block:32px;font-size:14px;color:var(--muted)}
.x4-mk .ftr .wrap{display:block}
/* ---------- Shop ---------- */
.x4-mk .crumb{font-size:13px;color:var(--muted);padding-top:16px}
.x4-mk .crumb a{color:var(--muted);text-decoration:none}.x4-mk .crumb a:hover{color:var(--link)}
.x4-mk .vbar{border-bottom:1px solid var(--line);padding-block:12px;position:relative;background:#141414}
.x4-mk .vbar select.inp:disabled{opacity:.45}
.x4-mk .vbar-in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.x4-mk .vbar select.inp{height:40px;font-size:14px;padding:0 8px}
.x4-mk .shop-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:16px 0;flex-wrap:wrap}
.x4-mk .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.x4-mk .chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;background:var(--chip);border:1px solid var(--line);padding:4px 10px;border-radius:14px;cursor:pointer}
.x4-mk .chip:hover{border-color:var(--c-orange)}
.x4-mk .shop{display:grid;gap:24px;padding-bottom:48px}
.x4-mk .side{display:none}
.x4-mk .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x4-mk .empty{grid-column:1/-1}
.x4-mk .fgroup{border-bottom:1px solid var(--line);padding-block:14px;display:grid;gap:8px}
.x4-mk .fgroup h4{margin:0;font-size:15px;font-weight:600}
.x4-mk .fopt{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--muted)}
.x4-mk .fopt input{width:18px;height:18px}
.x4-mk :is(.site,#layer) input[type=radio],.x4-mk :is(.site,#layer) input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;background:#fff;border:1.5px solid #9A9EA5;cursor:pointer;display:inline-grid;place-content:center;transition:border-color .15s}
.x4-mk :is(.site,#layer) input[type=radio]{border-radius:50%}
.x4-mk :is(.site,#layer) input[type=checkbox]{border-radius:4px}
.x4-mk :is(.site,#layer) input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-orange);transform:scale(0);transition:transform .12s}
.x4-mk :is(.site,#layer) input[type=checkbox]::before{content:"";width:10px;height:6px;border:2px solid var(--c-orange);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .12s}
.x4-mk :is(.site,#layer) input[type=radio]:checked,.x4-mk :is(.site,#layer) input[type=checkbox]:checked{border-color:var(--c-orange)}
.x4-mk :is(.site,#layer) input[type=radio]:checked::before{transform:scale(1)}
.x4-mk :is(.site,#layer) input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
.x4-mk :is(.site,#layer) input[type=radio]:focus-visible,.x4-mk :is(.site,#layer) input[type=checkbox]:focus-visible{outline:2px solid var(--c-orange);outline-offset:2px}
.x4-mk :is(.site,#layer) input[type=radio]:disabled,.x4-mk :is(.site,#layer) input[type=checkbox]:disabled{background:#F1F2F4;border-color:#C9CDD2;cursor:not-allowed}
.x4-mk .fopt.on{color:var(--fg)}
.x4-mk .fopt .n{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}
.x4-mk .fsub{padding-left:26px;display:grid;gap:6px}
/* ---------- Drawer ---------- */
.x4-mk .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70}
.x4-mk .modal{position:fixed;z-index:72;top:50%;left:calc(var(--fl,0px) + var(--fw,100vw)/2);transform:translate(-50%,-50%);width:min(380px,calc(var(--fw,100vw) - 32px));border:1px solid #4A4A4E;border-radius:10px;padding:20px;display:grid;gap:12px;font-family:var(--f);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.x4-mk .modal .mbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.x4-mk .drawer{position:fixed;top:0;bottom:0;left:var(--fl,0px);width:min(340px,var(--fw,100vw));z-index:71;background:var(--bg);color:var(--fg);border-right:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto;font-family:var(--f)}
.x4-mk .drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);padding-top:calc(12px + env(safe-area-inset-top,0px))}
.x4-mk .drawer .dh b{font-weight:600;font-size:18px}
.x4-mk .drawer .db{overflow:auto;padding:0 16px}
.x4-mk .drawer .df{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:8px}
.x4-mk .menu a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.x4-mk .menu .subm a{padding-left:16px;color:var(--muted);font-size:15px}
/* ---------- Product ---------- */
.x4-mk .pd{display:grid;gap:20px;padding-block:16px 48px}
.x4-mk .gal{position:relative;margin-inline:-16px}
.x4-mk .gal .track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.x4-mk .gal .track::-webkit-scrollbar{display:none}
.x4-mk .gal{position:relative}
.x4-mk .gal .track{cursor:grab;user-select:none;-webkit-user-select:none}
.x4-mk .gal .track img{-webkit-user-drag:none;pointer-events:none}
.x4-mk .gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#141414;font-size:24px;line-height:34px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.x4-mk .gnav:hover{background:#fff;color:var(--c-orange-text)}
.x4-mk .gprev{left:10px}.x4-mk .gnext{right:10px}
.x4-mk .gdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:4;pointer-events:none}
.x4-mk .gdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.x4-mk .gdots i.on{background:var(--c-orange);width:18px;border-radius:4px}
.x4-mk .gal .track>.media{scroll-snap-align:start;aspect-ratio:4/3}
.x4-mk .gal .cnt{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:3px 8px;border-radius:10px;font-variant-numeric:tabular-nums;z-index:3}
.x4-mk .thumbs{display:none}
.x4-mk .info{display:grid;gap:16px;align-content:start;min-width:0}
.x4-mk .info h1{font-size:22px;line-height:1.35;overflow-wrap:anywhere}
.x4-mk .info .sku{font-size:13px;color:var(--muted);font-family:var(--mono)}
.x4-mk .info .prow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.x4-mk .info .prow .price{font-size:32px;line-height:1}
.x4-mk .info .prow .vat{font-size:13px;color:var(--muted)}
.x4-mk .pick{display:grid;gap:8px}
.x4-mk .slip{display:grid;gap:10px;border:1px solid var(--line);border-radius:8px;padding:16px}
.x4-mk .slipf{display:block;border:1px dashed #555;border-radius:6px;padding:14px;text-align:center;color:var(--muted);cursor:pointer;font-size:14px}
.x4-mk .slipf input{display:none}
.x4-mk .slipch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.x4-mk .slipdone{display:grid;gap:4px;border:1px solid var(--c-ok);border-radius:8px;padding:14px;color:var(--fg)}
.x4-mk .slipdone b{color:var(--c-ok)}
.x4-mk .mailbox{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:8px}
.x4-mk .cprow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.x4-mk .cpv{min-width:0;overflow-wrap:anywhere}
.x4-mk .linkbtn{background:none;border:0;padding:0;color:var(--c-orange);text-decoration:underline;cursor:pointer;justify-self:start;font:inherit}
.x4-mk .slipf img{display:block;max-width:100%;max-height:220px;margin:10px auto 0;border-radius:4px}
.x4-mk .slipch .btn{position:relative;gap:6px;padding:0 8px;font-size:14px}
.x4-mk .slipch .wtag{position:absolute;top:-9px;right:4px;font-size:10px}
.x4-mk .accw{display:grid;gap:16px}
.x4-mk .card{position:relative}
.x4-mk .site table{color:var(--fg);font:inherit;font-size:14px}
.x4-mk .site .stickybar~.cmpbar,.x4-mk .cmpbar{bottom:0}
.x4-mk .site:has(.stickybar) .cmpbar{bottom:68px}
@container site (min-width:1024px){.x4-mk .site:has(.stickybar) .cmpbar{bottom:0}}
.x4-mk .site:has(.psticky.show) .cmpbar{bottom:64px}
.x4-mk .cmpbtn{position:absolute;top:8px;right:8px;z-index:5;background:rgba(255,255,255,.94);color:#141414;border:1px solid #D5D8DC;border-radius:4px;font:600 12px/1 var(--f);padding:6px 8px;cursor:pointer}
.x4-mk .cmpbtn:hover{border-color:var(--c-orange);color:var(--c-orange-text)}
.x4-mk .cmpbtn.on{background:var(--c-orange);border-color:var(--c-orange);color:#000}
.x4-mk .cmpbar{position:sticky;bottom:0;z-index:31;background:#141414;color:#fff;border-top:2px solid var(--c-orange);box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.x4-mk .cmpbar-in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.x4-mk .cmpbar-t{display:flex;align-items:center;gap:12px;min-width:0}
.x4-mk .cmpbar-th{display:flex;gap:6px}
.x4-mk .cth{position:relative;width:52px;height:39px;border-radius:4px;overflow:hidden;background:#2A2A2D;display:block}
.x4-mk .cth img{width:100%;height:100%;object-fit:cover}
.x4-mk .cth button{position:absolute;top:0;right:0;width:18px;height:18px;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:13px;line-height:18px;padding:0;cursor:pointer}
.x4-mk .cmpbar-a{display:flex;gap:12px;align-items:center}.x4-mk .cmpbar .linkbtn{color:#ddd}
.x4-mk .cmpbar{max-width:100%;overflow:hidden;box-sizing:border-box}
.x4-mk .cmpbar-in,.x4-mk .dock2-in{box-sizing:border-box;width:100%}
.x4-mk .d2cart .btn{flex:none}
.x4-mk .cartbar .cb-l{display:flex;align-items:center;gap:10px;min-width:0}
.x4-mk .cartbar .cb-l img,.x4-mk .cartbar .cb-l i{width:56px;height:42px;border-radius:4px;object-fit:cover;background:#2A2A2D;flex:none}
.x4-mk .cartbar .cb-l b{display:block;font-size:15px;color:#fff}
.x4-mk .cartbar .cb-l small{color:#B8B8B8;font-size:13px}
.x4-mk .btn-ghw{background:transparent;color:#fff;border:1px solid #fff}.x4-mk .btn-ghw:hover{border-color:var(--c-orange);color:var(--c-orange)}
.x4-mk .cbx{background:none;border:0;color:#B8B8B8;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.x4-mk .cbx:hover{color:#fff}
@container site (max-width:767px){.x4-mk .cartbar .cmpbar-in{gap:8px}.x4-mk .cartbar .cmpbar-a{width:100%;display:grid;grid-template-columns:1fr 1fr 28px;gap:8px}.x4-mk .cartbar .cmpbar-a .btn{min-width:0;padding:0 8px}.x4-mk .d2t{font-size:14px}.x4-mk .dock2-in{gap:6px;padding:6px 10px}}
.x4-mk .dock2-in{max-width:1200px;margin:0 auto;padding:6px 12px;display:flex;align-items:center;gap:8px}
.x4-mk .d2cmp{display:inline-flex;align-items:center;gap:6px;background:#2A2A2D;color:#fff;border:1px solid #3A3A3E;border-radius:6px;height:38px;padding:0 12px;font:600 13px var(--f);cursor:pointer;white-space:nowrap}
.x4-mk .d2cmp:hover{border-color:var(--c-orange)}.x4-mk .d2cmp[disabled]{opacity:.55;cursor:not-allowed}
.x4-mk .d2cart{flex:1;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.x4-mk .d2n{position:relative;display:inline-flex;color:#fff}.x4-mk .d2n svg{width:22px;height:22px}
.x4-mk .d2n b{position:absolute;top:-6px;right:-8px;background:var(--c-orange);color:#000;font-size:11px;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.x4-mk .d2t{color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.x4-mk .dock2 .btn-sm{height:38px}
.x4-mk .d2atc{display:none}
.x4-mk .wish-n{background:#141414!important;color:#fff!important}
.x4-mk .wish-n[hidden]{display:none}
.x4-mk .wishbtn{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #141414;color:#141414;padding:0!important;width:48px!important;min-width:48px}
.x4-mk .wishbtn:hover{border-color:#E0245E;color:#E0245E}
.x4-mk .wishbtn.on{color:#E0245E;border-color:#F6C3D2;background:#FFF1F5}
.x4-mk .wishnote{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:#F4F5F6;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:14px}
.x4-mk .wishgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.x4-mk .wishi{display:grid;gap:8px;grid-template-rows:1fr auto}
.x4-mk .wishi-a{display:flex;gap:12px;align-items:center}.x4-mk .wishi-a .btn{flex:1}
@container site (min-width:768px){.x4-mk .wishgrid{grid-template-columns:repeat(4,1fr)}}
.x4-mk .backbar{padding-top:4px;padding-bottom:4px}
.x4-mk .backlink{background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--fg);cursor:pointer;display:flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;text-align:left;white-space:nowrap}
.x4-mk .backlink span{color:var(--c-orange-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;max-width:60ch}
.x4-mk .backlink:hover span{text-decoration:underline}
@container site (min-width:1024px){
  /* Desktop: ถ้ามี Dock แล้ว ซ่อน Sticky ATC สีขาว และย้ายปุ่มใส่ตะกร้าเข้า Dock แทน */
  .x4-mk .site:has(#cmpHost .dock2) .psticky{display:none!important}
  .x4-mk .site .dock2.atc .d2atc{display:flex;align-items:center;gap:10px;padding-right:12px;margin-right:2px;border-right:1px solid #2E2E2E}
  .x4-mk .d2atc-n{color:#B8B8B8;font-size:12px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .x4-mk .d2atc b{color:#fff;font-size:16px;white-space:nowrap}
  /* Desktop: Dock เป็นการ์ดลอยมุมขวาล่าง แทนแถบเต็มจอ */
  .x4-mk .site .cmpbar{background:transparent;border-top:0;box-shadow:none;bottom:20px!important;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;padding-right:24px;overflow:visible}
  .x4-mk .site .cmpbar>*{pointer-events:auto}
  .x4-mk .site .cmpbar>.tag{align-self:flex-end}
  .x4-mk .site .dock2-in,.x4-mk .site .cmpbar-in{width:auto;max-width:none;margin:0;background:#141414;border-radius:12px;padding:10px 12px;box-shadow:0 12px 32px rgba(16,24,40,.28),0 0 0 1px rgba(255,255,255,.06);border-top:2px solid var(--c-orange);justify-content:flex-end;gap:10px}
  .x4-mk .site .dock2-in .d2cart{flex:none;margin-left:0}
  .x4-mk .site .cmpbar-in{gap:16px;padding:12px 14px}
  .x4-mk .site .cartbar .cmpbar-in{min-width:520px}
  .x4-mk .site .cartbar .cb-l{margin-right:8px}
  .x4-mk .site .d2back{max-width:240px}
  .x4-mk .site .dpanel{width:460px;max-width:460px;margin:0 0 8px;background:#141414;border:0;border-radius:12px;box-shadow:0 16px 40px rgba(16,24,40,.32),0 0 0 1px rgba(255,255,255,.06);padding:14px 14px 4px;max-height:min(60vh,480px)}
  .x4-mk .site .dp-i{grid-template-columns:52px 1fr auto auto}
  .x4-mk .site .dp-a.two{grid-template-columns:1fr 1fr}
  .x4-mk .site .dock2.open .dock2-in{border-top-color:#3A3A3E}
}
.x4-mk .d2back{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#2A2A2D;color:#fff;border:1px solid #3A3A3E;border-radius:6px;height:38px;padding:0 12px;font:600 13px/1.1 var(--f);cursor:pointer;max-width:46%;min-width:0;text-align:left}
.x4-mk .d2back small{font-weight:400;font-size:11px;color:#B8B8B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.x4-mk .d2back:hover{border-color:var(--c-orange)}
.x4-mk .d2open{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:6px;padding:0 8px;height:38px;cursor:pointer;color:#fff}
.x4-mk .d2open:hover,.x4-mk .d2open.on{border-color:#3A3A3E;background:#222}
.x4-mk .d2cmp.on{border-color:var(--c-orange)}
.x4-mk .car{font-size:10px;color:#B8B8B8;margin-left:2px}
.x4-mk .dpanel{max-width:1200px;margin:0 auto;padding:12px 12px 4px;border-bottom:1px solid #2E2E2E;max-height:min(55vh,420px);overflow-y:auto;position:relative}
.x4-mk .dp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff}.x4-mk .dp-h .linkbtn{color:var(--c-orange)}
.x4-mk .dp-list{display:grid;gap:6px}
.x4-mk .dp-i{display:grid;grid-template-columns:52px 1fr auto auto;gap:10px;align-items:center;background:#1E1E20;border-radius:6px;padding:6px 8px}
.x4-mk .dp-i img,.x4-mk .dp-i i{width:52px;height:39px;border-radius:4px;object-fit:cover;background:#2A2A2D;display:block}
.x4-mk .dp-i a{color:#fff;font-size:13px;line-height:1.35;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x4-mk .dp-i a:hover{color:var(--c-orange)}
.x4-mk .dp-p{color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
.x4-mk .dp-x{background:none;border:0;color:#B8B8B8;font-size:20px;cursor:pointer;padding:0 4px}.x4-mk .dp-x:hover{color:#fff}
.x4-mk .dp-q{display:inline-flex;align-items:center;border:1px solid #3A3A3E;border-radius:4px}
.x4-mk .dp-q button{background:none;border:0;color:#fff;width:24px;height:26px;cursor:pointer;font-size:15px}.x4-mk .dp-q b{color:#fff;font-size:13px;min-width:18px;text-align:center}
.x4-mk .dp-tot{display:flex;justify-content:space-between;color:#B8B8B8;font-size:14px;padding:10px 2px 0}.x4-mk .dp-tot b{color:#fff}
.x4-mk .dp-a{display:flex;justify-content:flex-end;gap:8px;padding:10px 0 8px}.x4-mk .dp-a.two{display:grid;grid-template-columns:1fr 1fr}
@container site (max-width:767px){.x4-mk .dp-i{grid-template-columns:44px 1fr auto;grid-template-areas:"img nm x" "img q p"}.x4-mk .dp-i img,.x4-mk .dp-i i{grid-area:img;width:44px;height:33px}.x4-mk .dp-i a{grid-area:nm}.x4-mk .dp-i .dp-x{grid-area:x}.x4-mk .dp-i .dp-q{grid-area:q;justify-self:start}.x4-mk .dp-i .dp-p{grid-area:p;justify-self:end}.x4-mk .d2open{gap:6px;padding:0 4px}}
@keyframes dockin{from{transform:translateY(100%)}to{transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,128,40,.7)}100%{box-shadow:0 0 0 14px rgba(244,128,40,0)}}
.x4-mk .cartbar.pulse{animation:dockin .3s ease-out}
.x4-mk .d2cart.pulse .d2n b{animation:pulse .8s ease-out 2}
@media (prefers-reduced-motion:reduce){.x4-mk .cartbar.pulse,.x4-mk .d2cart.pulse .d2n b{animation:none}}
.x4-mk .cmpbar .btn[disabled]{opacity:.5;cursor:not-allowed}
.x4-mk .cmpt th,.x4-mk .cmpt td{min-width:180px;width:22%;vertical-align:top}
.x4-mk .cmpt thead th:first-child,.x4-mk .cmpt tbody th{min-width:120px;width:12%;position:sticky;left:0;background:var(--bg);z-index:1}
.x4-mk .cmpt{table-layout:fixed;width:100%}
.x4-mk .cmpt tr.dif th{box-shadow:inset 3px 0 0 var(--c-orange)}
.x4-mk .cmpt tr.dif td{background:#FFF6EE}
.x4-mk .cmpt tr.dif th{color:var(--c-orange-text)}
.x4-mk .cmph{position:relative}
.x4-mk .cmpc{display:grid;gap:8px;align-content:start}
.x4-mk .cmpimg{width:100%;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#F1F2F4;display:grid;place-items:center;font-size:12px;color:#8A8E95;border:1px solid var(--line)}
.x4-mk .cmpimg img{width:100%;height:100%;object-fit:cover}
.x4-mk .cmpc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x4-mk .cmpc .btn{width:100%}
.x4-mk .cmpx{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#141414;font-size:16px;line-height:1;cursor:pointer;z-index:2}
.x4-mk .cmpx:hover{border-color:var(--c-orange);color:var(--c-orange-text)}
.x4-mk .cmpt thead th{padding:12px 8px}
@container site (max-width:767px){
  .x4-mk .cmpt{table-layout:auto}
  .x4-mk .cmpt th,.x4-mk .cmpt td{min-width:0;width:auto;padding:10px 8px;font-size:13px}
  .x4-mk .cmpt thead th:not(:first-child),.x4-mk .cmpt tbody td{min-width:46cqw;max-width:46cqw;scroll-snap-align:start}
  .x4-mk .cmpt thead th:first-child,.x4-mk .cmpt tbody th{min-width:22cqw;max-width:22cqw;width:22cqw;font-size:12px;box-shadow:2px 0 6px rgba(16,24,40,.06)}
  .x4-mk .cmpwrap{scroll-snap-type:x mandatory;scroll-padding-left:22cqw;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .x4-mk .cmpc a{font-size:13px}
  .x4-mk .cmpadd b{font-size:13px}
}
.x4-mk .cmphint{display:none;position:sticky;left:0;padding:0 0 8px}
@container site (max-width:767px){.x4-mk .cmphint{display:block}}
.x4-mk .pcmp{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px}
.x4-mk .mapb{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#EEF0EC}
.x4-mk .mapb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.x4-mk .mapsvg{position:absolute;inset:0;width:100%;height:100%}
.x4-mk .mapb .tag{z-index:3}
.x4-mk .mapif{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:transparent}
.x4-mk .mapfb{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;text-align:center;color:#141414}
.x4-mk .mappin{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));margin-bottom:-4px}
.x4-mk .mapfb b{background:#fff;padding:4px 10px;border-radius:6px;box-shadow:0 2px 10px rgba(16,24,40,.18);font-size:14px;margin-top:6px}
.x4-mk .mapfb small{background:rgba(255,255,255,.85);padding:1px 6px;border-radius:4px;margin-top:4px}
.x4-mk .mapfb small{color:#6B6F76;font-size:12px}
.x4-mk .mapgo{display:flex;align-items:center;justify-content:center;text-decoration:none}
.x4-mk .fmap{color:var(--c-orange-text)!important;text-decoration:none;font-weight:600}
.x4-mk .phelp{margin:10px 0 0}
.x4-mk #mainCta{margin-top:14px}
.x4-mk .btn-line{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.x4-mk .btn-line{background:#06C755;color:#fff;border:1px solid #06C755;font-weight:600}
.x4-mk .btn-line:hover{background:#05B04B;border-color:#05B04B}
.x4-mk .btn-line svg{width:18px;height:18px}
.x4-mk .pcmp-b{font-weight:600;white-space:nowrap;padding-inline:20px;min-width:0}
.x4-mk #mainCta>.btn{margin:0!important;height:48px;width:100%;justify-self:stretch}
.x4-mk .pcmp-b.on{background:#141414;color:#fff;box-shadow:inset 0 0 0 2px var(--c-orange)}
.x4-mk .cmpc a{color:var(--fg);font-weight:600;font-size:14px;line-height:1.35;text-decoration:none}.x4-mk .cmpc a:hover{color:var(--c-orange-text)}
.x4-mk .cmpc-a{display:flex;gap:10px;align-items:center}
.x4-mk .cmpadd{display:grid;gap:8px;text-align:center}.x4-mk .cmpadd b{font-size:14px}.x4-mk .cmpadd .inp{height:38px;font-size:13px}
.x4-mk .cmpul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.x4-mk .cpn{border-top:1px solid var(--line);margin-top:14px;padding-top:14px;display:grid;gap:6px;position:relative}
.x4-mk .cpn-row{display:flex;gap:8px}.x4-mk .cpn-row .inp{flex:1;min-width:0;height:40px}
.x4-mk .btn-dk{background:#141414;color:#fff;border:1px solid #141414}.x4-mk .btn-dk:hover{background:#2A2A2D}
.x4-mk .cpn-on{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#EAF7EF;border:1px solid #BFE5CC;color:#1F5C38;border-radius:6px;padding:8px 10px;font-size:14px}
.x4-mk .lp1{padding:20px 0 8px;position:relative}
.x4-mk .lp1g{display:grid;gap:20px}
.x4-mk .lp1m .media{aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.x4-mk .lp1m .media img{width:100%;height:100%;object-fit:cover}
.x4-mk .lp1th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.x4-mk .lp1th img,.x4-mk .lp1th .ph{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.x4-mk .lp1th .ph{display:grid;place-items:center;text-align:center;font-size:12px}
.x4-mk .lp1c{display:grid;gap:12px;align-content:start}
.x4-mk .lp1p{display:grid;gap:2px}.x4-mk .lp1p .price{font-size:32px}
.x4-mk .lpopts2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.x4-mk .lpopts2 .opt{display:grid;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--fg);cursor:pointer;font:inherit}
.x4-mk .lpopts2 .opt small{color:var(--muted);font-size:12px}.x4-mk .lpopts2 .opt b{font-size:14px}
.x4-mk .lpopts2 .opt[aria-pressed="true"]{border-color:var(--c-orange);box-shadow:0 0 0 1px var(--c-orange)}
.x4-mk .hubh{padding:16px 0 8px;position:relative;border-bottom:1px solid var(--line)}
.x4-mk .hubh-g{display:grid;gap:14px;margin-top:10px}
.x4-mk .hubinfo-link{display:grid;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c-orange);border-radius:8px;padding:12px 16px;color:var(--fg);cursor:pointer;font:inherit}
.x4-mk .hubinfo-link small{color:var(--muted)}
.x4-mk .hubnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:16px 0 8px}
.x4-mk .hubnav .chip{flex:none}
.x4-mk .hubf{padding-block:28px}
.x4-mk .hubf+.hubf{border-top:1px solid var(--line)}
.x4-mk .hubf-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:14px}
.x4-mk .hubf-a{display:flex;gap:14px;align-items:center}
.x4-mk .hubcta{display:grid;gap:4px;width:100%;text-align:left;background:linear-gradient(120deg,#1C1C1C,#121212);border:1px solid var(--c-orange);border-radius:10px;padding:20px 22px;color:var(--fg);cursor:pointer;font:inherit}
.x4-mk .hubcta b{font-size:22px}
.x4-mk .gart{position:relative;padding:16px 0 56px}
.x4-mk .art-w{display:block!important}
.x4-mk .art-w h2,.x4-mk .art-w h3{clear:both}
.x4-mk .afig.flr{float:right;width:44%;margin:6px 0 14px 24px!important}
.x4-mk .art-ul{margin:0 0 14px!important;padding-left:22px;display:grid;gap:6px}
.x4-mk .art-ul li{font-size:16px;line-height:1.65;color:#DADBDE}
.x4-mk .art-ul li::marker{color:var(--c-orange)}
.x4-mk .afig{margin:8px 0 20px!important}
.x4-mk .famimg{margin:4px 0 14px!important;max-width:520px;position:relative}
.x4-mk .famimg .media{aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.x4-mk .famimg figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.x4-mk .afig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.x4-mk .afig figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.x4-mk .afig.wide img{aspect-ratio:21/9}
.x4-mk .afig.bleed{margin:8px 0 24px!important}
.x4-mk .afig.bleed img{aspect-ratio:16/8}
.x4-mk .asplit{display:grid;gap:4px 24px;margin:10px 0 6px!important}
.x4-mk .asplit .afig{margin:0 0 12px!important}
.x4-mk .asplit h3{margin-top:0!important}
.x4-mk .apair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 10px!important}
.x4-mk .apair .afig{margin:0!important}
.x4-mk .apair .afig img{aspect-ratio:4/3}
.x4-mk .rec{border-top:1px solid #262626;border-bottom:1px solid #262626;padding:10px 0;margin:4px 0 22px!important;display:grid;gap:2px;position:relative}
.x4-mk .rec-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.x4-mk .rec-h .linkbtn{font-size:12px}
.x4-mk .recs{grid-auto-columns:58%;gap:10px}
.x4-mk .recs .card .bd{padding:10px;gap:4px}
.x4-mk .recs .card .bd b,.x4-mk .recs .card h3{font-size:14px;line-height:1.35}
.x4-mk .recs .card .price{font-size:16px}
@container site (min-width:768px){.x4-mk .recs{grid-auto-columns:calc((100% - 20px)/3)}}
.x4-mk .rec-i{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:none;border:0;padding:6px 0;color:var(--fg);cursor:pointer;font:inherit;text-align:left;border-radius:6px}
.x4-mk .rec-i:hover .rec-t{color:var(--c-orange)}
.x4-mk .rec-i img,.x4-mk .rec-ph{width:52px;height:39px;object-fit:cover;border-radius:4px;background:#1E1E1E;display:block}
.x4-mk .rec-t{font-size:14px;line-height:1.35}
.x4-mk .rec-p{font-size:13px;color:#B8B8B8;font-weight:600}
@container site (min-width:768px){.x4-mk .asplit{grid-template-columns:5fr 6fr;align-items:start}.x4-mk .asplit.rev{grid-template-columns:6fr 5fr}.x4-mk .asplit.rev>.afig{order:2}.x4-mk .asplit.sm{grid-template-columns:2fr 5fr}.x4-mk .afig.bleed{margin-inline:-120px!important}}
@container site (min-width:1100px){.x4-mk .afig.bleed{margin-inline:-180px!important}}
.x4-mk .art-w{max-width:780px;margin-inline:auto;display:grid;gap:0}
.x4-mk .art-w>*{margin:0}
.x4-mk .art-h1{font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:14px 0 10px!important}
.x4-mk .art-lead{font-size:18px;line-height:1.7;color:#C9CBD0;margin-bottom:18px!important}
.x4-mk .art-meta{display:flex;gap:12px;align-items:center;padding:14px 0;border-block:1px solid var(--line);margin-bottom:22px!important}
.x4-mk .art-meta .av{width:40px;height:40px;border-radius:50%;background:var(--c-orange);color:#000;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.x4-mk .art-meta small{display:block;color:var(--muted);font-size:13px}
.x4-mk .art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.x4-mk .art-fig figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.x4-mk .art-toc{margin:22px 0!important;border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:var(--surface)}
.x4-mk .art-toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.x4-mk .art-w h2{font-size:26px;font-weight:700;line-height:1.3;margin:40px 0 12px!important;padding-top:6px;scroll-margin-top:120px}
.x4-mk .art-w h3{font-size:20px;font-weight:700;line-height:1.35;margin:26px 0 8px!important}
.x4-mk .art-w h4{font-size:16px;font-weight:700;color:var(--c-orange);margin:18px 0 6px!important}
.x4-mk .art-w p{font-size:17px;line-height:1.8;color:#DADBDE;margin:0 0 14px!important}
.x4-mk .art-w .btn{justify-self:start;margin-bottom:14px!important}
.x4-mk .art-note{border-left:3px solid var(--c-orange);background:#161616;border-radius:0 8px 8px 0;padding:12px 16px;font-size:15px;margin:6px 0 16px!important}
.x4-mk .art-w .tscroll{margin:6px 0 14px!important}
.x4-mk .artins{border:1px solid var(--line);border-radius:10px;padding:14px;margin:6px 0 18px!important;position:relative;background:#121212}
.x4-mk .artins-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.x4-mk .artins-g{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.x4-mk .art-w .qas{margin-bottom:22px!important}
@container site (min-width:768px){.x4-mk .art-h1{font-size:44px}.x4-mk .hubh-g{grid-template-columns:1fr auto;align-items:end}}
.x4-mk .lpx{position:relative;overflow:hidden;background:#090909;border-block:1px solid #1E1E1E;padding-block:48px}
.x4-mk .lpx-bg{position:absolute;left:-2%;bottom:-6%;font-size:min(30cqw,320px);font-weight:700;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px #232323;pointer-events:none;white-space:nowrap}
.x4-mk .lpx-g{position:relative;display:grid;gap:28px}
.x4-mk .lpx-m{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.x4-mk .lpx-m img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.x4-mk .lpx-m::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,9,9,.92))}
.x4-mk .lpx-cap{position:absolute;left:18px;bottom:16px;z-index:1;display:grid;line-height:1.15}
.x4-mk .lpx-cap small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-orange);font-weight:700}
.x4-mk .lpx-cap b{font-size:28px;letter-spacing:-.01em}.x4-mk .lpx-cap span{font-size:13px;color:#B8B8B8}
.x4-mk .lpx-l{list-style:none;margin:8px 0 0;padding:0;display:grid}
.x4-mk .lpx-l li{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start;padding:18px 0;border-top:1px solid #262626}
.x4-mk .lpx-l li:last-child{border-bottom:1px solid #262626}
.x4-mk .lpx-l .n{font-size:48px;font-weight:700;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--c-orange)}
.x4-mk .lpx-l b{font-size:19px}.x4-mk .lpx-l p{margin:4px 0 0;color:#A9ABB0;font-size:14px;line-height:1.55}
.x4-mk .lpspec-g{display:grid;gap:20px;margin-top:20px}
.x4-mk .sheet{margin:0;border:1px solid #262626;border-radius:10px;background:#121212;padding:6px 20px}
.x4-mk .sheet>div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #222}
.x4-mk .sheet>div:last-child{border-bottom:0}
.x4-mk .sheet dt{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:#8A8C91;font-weight:700;padding-top:3px}
.x4-mk .sheet dd{margin:0;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.x4-mk .rcv3{display:grid;gap:10px}
.x4-mk .rcv3 .ptile{min-height:118px}
@container site (min-width:768px){.x4-mk .rcv3{grid-template-columns:repeat(3,1fr)}.x4-mk .rcv3 .ptile{min-height:200px}}
@container site (min-width:1024px){.x4-mk .lpx{padding-block:72px}.x4-mk .lpx-g{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px}.x4-mk .lpspec-g{grid-template-columns:1fr 1.25fr;align-items:stretch}.x4-mk .rcv3{grid-template-columns:1fr}.x4-mk .rcv3 .ptile{min-height:0;padding:18px 22px}.x4-mk .rcv3 .ptile .bg{font-size:110px}}
.x4-mk .lpwhy,.x4-mk .gdtech{display:grid;gap:12px;margin:16px 0}
.x4-mk .lpwhy>div,.x4-mk .gdtech>div{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--surface)}
.x4-mk .lpwhy p,.x4-mk .gdtech p{margin:6px 0 0}
.x4-mk .lp2c{display:grid;gap:24px}
.x4-mk .lpcta{margin-top:24px;border:1px solid var(--c-orange);border-radius:10px;padding:20px;display:grid;gap:10px;justify-items:start}
.x4-mk .lpcta b{font-size:20px}
.x4-mk .lpcta .acts,.x4-mk .lp1c .acts{display:flex;gap:10px;flex-wrap:wrap}
.x4-mk .lpfoot{display:grid;gap:10px;padding-block:28px;position:relative}
.x4-mk .lpfoot .links a{color:var(--muted)}
.x4-mk .lpfoot .crow{display:inline-block;margin-right:16px}
.x4-mk .lpfoot .logo{display:inline-flex;width:auto}
.x4-mk .fcmp th,.x4-mk .fcmp td{min-width:130px;vertical-align:top}
.x4-mk .fcmp thead th{line-height:1.35}
.x4-mk .mhub{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:32px;position:relative}
.x4-mk .plinks{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px;position:relative}
.x4-mk .gdlink{display:flex;justify-content:space-between;width:100%;margin:0 0 12px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c-orange);border-radius:8px;padding:12px 14px;color:var(--fg);cursor:pointer;font:inherit;text-align:left}
.x4-mk .gdnav{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;position:relative}
.x4-mk .gdart{display:grid;gap:16px;padding-bottom:48px;max-width:900px}
.x4-mk .gdart>p{margin:0;line-height:1.75}
.x4-mk .gdart .h2{margin-top:16px}
.x4-mk .eeat{border-left:3px solid var(--c-orange);padding-left:10px}
.x4-mk .gdfeat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x4-mk .gdfeat>div{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;background:var(--surface)}
.x4-mk .gdfeat svg{color:var(--c-orange);flex:none}
.x4-mk .gdins{border:1px solid var(--line);border-radius:10px;padding:16px;position:relative;min-width:0}
@container site (min-width:768px){.x4-mk .lpwhy,.x4-mk .gdtech{grid-template-columns:repeat(3,1fr)}.x4-mk .gdfeat{grid-template-columns:repeat(4,1fr)}.x4-mk .lp2c{grid-template-columns:1fr 1fr}}
@container site (min-width:1024px){.x4-mk .lp1g{grid-template-columns:1.2fr 1fr;align-items:start}.x4-mk .lpfoot{grid-template-columns:auto 1fr;align-items:center}}
.x4-mk .ordcards{display:grid;gap:8px}
.x4-mk .ordc{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:6px}
.x4-mk .ordc .r1,.x4-mk .ordc .r3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.x4-mk .ordtab{display:none}
@container site (min-width:768px){.x4-mk .ordcards{display:none}.x4-mk .ordtab{display:block}}
.x4-mk .demohint{border:1px dashed var(--wait);color:var(--wait);border-radius:6px;padding:8px 10px}
.x4-mk .os-hold{border:1px solid var(--c-orange);color:var(--c-orange)}
.x4-mk .os-proc{border:1px solid #777;color:var(--fg)}
.x4-mk .os-done{border:1px solid var(--c-ok);color:var(--c-ok)}
.x4-mk .accnav{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.x4-mk .accnav button{text-align:center;background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:10px 14px;cursor:pointer;font:inherit;font-size:14px}
.x4-mk .accnav button[aria-current="true"]{color:var(--fg);border-color:var(--c-orange)}
@container site (min-width:1024px){.x4-mk .accw{grid-template-columns:220px 1fr;align-items:start}.x4-mk .accnav{grid-template-columns:1fr}.x4-mk .accnav button{text-align:left}}
.x4-mk .ordbar{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.x4-mk .ordbar>div{background:var(--surface);padding:12px 14px;display:grid;gap:2px;min-width:0}
.x4-mk .ordbar span{font-size:12px;color:var(--muted)}
.x4-mk .ordbar b{font-size:15px;overflow-wrap:anywhere}
@container site (min-width:768px){.x4-mk .ordbar{grid-template-columns:repeat(4,1fr)}}
.x4-mk .acclink{font-size:14px;margin:0 0 4px}
.x4-mk .rcv{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.x4-mk .rcv li{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;padding:7px 12px;border-top:1px solid var(--line)}
.x4-mk .rcv li:first-child{border-top:0}
.x4-mk .rcv b{font-weight:600;font-size:14px}
.x4-mk .rcv small{color:var(--muted);font-size:12px}
.x4-mk .pick label{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:12px;cursor:pointer}
.x4-mk .pick label:has(input:checked){border-color:var(--c-orange);box-shadow:0 0 0 1px var(--c-orange)}
.x4-mk .pick input{accent-color:var(--c-orange);width:18px;height:18px;grid-column:1;grid-row:1/span 2}
.x4-mk .pick b{font-weight:600;font-size:15px;grid-column:2;grid-row:1}
.x4-mk .pick small{grid-column:2;grid-row:2;font-size:13px;color:var(--muted);line-height:1.4}
.x4-mk .pick .same{font-size:12px;color:#0E7A45;background:rgba(47,191,113,.14);padding:2px 6px;border-radius:3px;grid-column:3;grid-row:1}
.x4-mk .dark .pick .same{color:var(--c-ok)}
.x4-mk .rcvn .same{font-size:12px;color:#0E7A45;background:rgba(47,191,113,.14);padding:2px 6px;border-radius:3px}
.x4-mk .dark .rcvn .same{color:var(--c-ok)}
.x4-mk .cta{display:grid;grid-template-columns:1fr 1fr 48px;gap:8px}
.x4-mk .cta>.btn-o{grid-column:auto}
@container site (min-width:1024px){.x4-mk .cta>.btn-o{grid-column:auto}}
.x4-mk .agree{font-size:13px;color:var(--muted);line-height:1.5}
.x4-mk .tabs{display:none}
.x4-mk .acc{border-top:1px solid var(--line)}
.x4-mk .acc>button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);padding:16px 0;cursor:pointer;font-weight:600;font-size:17px;color:var(--fg);text-align:left}
.x4-mk .acc>button svg{transition:transform .2s}
.x4-mk .acc>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.x4-mk .panel{padding:16px 0 24px;border-bottom:1px solid var(--line)}
.x4-mk .panel p{margin:0 0 12px}
.x4-mk .ftab{width:100%;border-collapse:collapse;font-size:14px}
.x4-mk .ftab th,.x4-mk .ftab td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.x4-mk .ftab th{color:var(--muted);font-weight:400;font-size:13px}
.x4-mk .ftab td.inf{color:var(--wait)}
.x4-mk .tscroll{overflow-x:auto}
.x4-mk .psticky{position:sticky;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .2s}
.x4-mk .psticky.show{transform:none}
.x4-mk .psticky .price{font-size:20px}
.x4-mk .psticky .nm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch;display:none}
.x4-mk .toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#fff;color:#000;padding:10px 16px;border-radius:4px;font-size:14px;z-index:90;box-shadow:0 6px 20px rgba(0,0,0,.4)}
/* ---------- Mockup docs pages ---------- */
.x4-mk .doc{background:#F5F5F5;color:#111;padding-block:32px 48px}
.x4-mk .doc h1{font-size:26px;margin-bottom:6px}
.x4-mk .doc .tw{overflow-x:auto;margin-top:20px;background:#fff;border:1px solid #E2E2E2;border-radius:6px}
.x4-mk .doc table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;line-height:1.5}
.x4-mk .doc th,.x4-mk .doc td{padding:10px 12px;border-bottom:1px solid #EAEAEA;text-align:left;vertical-align:top}
.x4-mk .doc th{background:#F0F0F0;font-weight:600;font-size:13px}
.x4-mk .doc td.n{font-variant-numeric:tabular-nums;color:#777}
.x4-mk .doc td.px{font-family:var(--mono);font-size:13px;white-space:nowrap}
.x4-mk .doc .note{font-size:14px;color:#444;margin-top:16px;display:grid;gap:6px;max-width:80ch}
.x4-mk .pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.x4-mk .p-hi{background:#FFE3CC;color:#8A3A00}.x4-mk .p-md{background:#EEE;color:#444}.x4-mk .p-new{background:#DDEBFF;color:#0B3B80}
/* ---------- Desktop ---------- */
@container site (min-width:768px){
  .x4-mk .sec{padding-block:80px}
  .x4-mk .h1{font-size:44px}.x4-mk .h2{font-size:32px}.x4-mk .h3{font-size:20px}
  .x4-mk .bright .hero .media{aspect-ratio:2/1;width:100%}
  .x4-mk .bright .hero .copy{position:absolute;left:0;right:0;bottom:40px}
  .x4-mk .bright .hero .card-copy{margin-top:0;max-width:540px;padding:28px 32px}
  .x4-mk .dark .hero{min-height:600px;display:flex;align-items:center}
  .x4-mk .dark .hero .media{position:absolute;inset:0;aspect-ratio:auto}
  .x4-mk .dark .hero .media::after{inset:0;height:auto;background:linear-gradient(90deg,rgba(14,14,14,.86) 0%,rgba(14,14,14,.5) 30%,rgba(14,14,14,0) 56%),linear-gradient(180deg,transparent 80%,rgba(14,14,14,.6))}
  .x4-mk .dark .hero .copy{padding-block:80px;margin-top:0}
  .x4-mk .dark .hero p{color:#E6E6E6}
  .x4-mk .ptiles{grid-template-columns:repeat(4,1fr);gap:16px}
  .x4-mk .ptile{min-height:210px;padding:22px}
  .x4-mk .ptile .bg{font-size:150px;top:-22px}
  .x4-mk .ptile .big{font-size:32px}
  .x4-mk .ptile .sm{font-size:14px}
  .x4-mk .s02{padding-top:32px}
  .x4-mk .picker{grid-template-columns:minmax(150px,auto) repeat(3,1fr) auto;align-items:end;padding:24px}
  .x4-mk .picker .pt{align-self:center;margin-right:8px}
  .x4-mk .pgrid{grid-template-columns:repeat(4,1fr)}
  .x4-mk .pitem,.x4-mk .pitem:nth-child(odd),.x4-mk .pitem:nth-child(even){padding:24px 24px 8px;border-left:1px solid var(--line);border-top:0}
  .x4-mk .pitem:first-child{border-left:0;padding-left:0}
  .x4-mk .pitem::before,.x4-mk .pitem:nth-child(even)::before{left:24px;top:0}
  .x4-mk .pitem:first-child::before{left:0}
  .x4-mk .pitem .big{font-size:40px}
  .x4-mk .promise .ph2{grid-template-columns:1fr 1fr;align-items:end;margin-bottom:40px}
  .x4-mk .cats{grid-template-columns:repeat(3,1fr);gap:16px}
  .x4-mk .cat{aspect-ratio:4/3}
  .x4-mk .usp{grid-template-columns:repeat(4,1fr);gap:16px}
  .x4-mk .usp div{padding:24px}
  .x4-mk .models{grid-auto-columns:calc((100% - 24px)/3)}
  .x4-mk .cmp{grid-template-columns:repeat(3,1fr);gap:16px}
  .x4-mk .prods{grid-auto-columns:calc((100% - 36px)/4)}
  .x4-mk .reviews{grid-auto-columns:calc((100% - 36px)/4)}
  .x4-mk .posts{grid-template-columns:repeat(3,1fr);gap:24px}
  .x4-mk .post{grid-template-columns:1fr}
  .x4-mk .stickybar{display:none}
  .x4-mk .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .x4-mk .pd{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding-top:24px}
  .x4-mk .gal{margin-inline:0}
  .x4-mk .gal .track>.media{border-radius:8px}
  .x4-mk .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
  .x4-mk .thumbs button{padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:#fff;max-width:100%;font:10px/1.2 var(--mono);color:#888}
  .x4-mk .thumbs button.on{border-color:var(--c-orange)}
  .x4-mk .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .x4-mk .info h1{font-size:26px}
  .x4-mk .cta{grid-template-columns:minmax(0,1fr) minmax(190px,auto) 48px}
  .x4-mk .below{grid-column:1/-1}
  .x4-mk .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
  .x4-mk .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:14px 18px;cursor:pointer;font-weight:600;color:var(--muted);font-size:16px}
  .x4-mk .tabs button[aria-selected="true"]{color:var(--fg);border-color:var(--c-orange)}
  .x4-mk .acc{border:0}
  .x4-mk .acc>button{display:none}
  .x4-mk .acc .panel{border:0;padding:24px 0;max-width:820px}
  .x4-mk .acc .panel:not(.cur){display:none!important}
  .x4-mk .psticky .nm{display:block}
}
@container site (min-width:1024px){
  .x4-mk .hdr .row{height:72px;gap:12px}
  .x4-mk .burger,.x4-mk .sbtn{display:none!important}
  .x4-mk .hdrveh{display:inline-flex}
  .x4-mk .nav{display:flex;gap:2px}
  .x4-mk .nav a{color:var(--fg);text-decoration:none;padding:8px 10px;font-size:15px;border-radius:4px}
  .x4-mk .nav a:hover{color:var(--c-orange)}
  .x4-mk .hsearch{display:block;flex:1;max-width:340px;margin-left:auto}
  .x4-mk .hsearch .sbox{height:34px;padding:0 10px;border-width:1px;border-radius:5px}
  .x4-mk .hsearch .sbox input{font-size:15px}
  .x4-mk .hsearch .sbox svg{width:18px;height:18px}
  .x4-mk .searchrow{display:none!important}
  .x4-mk .hdr .grow{display:none}
  .x4-mk .lang{height:32px}.x4-mk .lang button{font-size:12px;padding:0 8px}
  .x4-mk .shop{grid-template-columns:260px minmax(0,1fr);gap:32px}
  .x4-mk .side{display:block}
  .x4-mk .fbtn{display:none!important}
}
@container site (min-width:1280px){ .x4-mk .grid{grid-template-columns:repeat(4,1fr)} }
/* ---------- v4 pages ---------- */
.x4-mk .mbar select{background:#26262A;border:1px solid #3A3A40;border-radius:4px;color:var(--m-fg);padding:4px 8px;font-size:13px;max-width:220px}
.x4-mk .navi{position:relative}
.x4-mk .navi>a{display:block}
.x4-mk .mega{display:none;position:absolute;left:0;top:100%;z-index:50;background:#141414;border:1px solid #2E2E2E;border-radius:6px;padding:20px;grid-template-columns:repeat(3,200px);gap:18px 24px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.x4-mk .has-mega:hover .mega,.x4-mk .has-mega:focus-within .mega{display:grid}
.x4-mk .mcol{display:grid;gap:4px;align-content:start}
.x4-mk .mcol a{color:#B8B8B8;text-decoration:none;font-size:14px;padding:2px 0}
.x4-mk .mcol a:hover{color:var(--c-orange)}
.x4-mk .mcol .mh{color:#fff;font-weight:600;font-size:15px;display:flex;justify-content:space-between;border-bottom:1px solid #2E2E2E;padding-bottom:6px;margin-bottom:4px}
.x4-mk .mcol .mh span{color:#777;font-weight:400;font-size:12px}
/* v91 หน้าบทความ */
.x4-mk .site .blog{gap:40px 24px}
.x4-mk .site .bpost .media{aspect-ratio:4/3;border-radius:4px}
.x4-mk .site .chipbar+.blog{margin-top:12px}
.x4-mk .bpost .bt{display:grid;gap:6px;padding-top:6px}
.x4-mk .bpost .bt b{font-size:19px;font-weight:700;line-height:1.35}
.x4-mk .bpost .bt .bx{margin:2px 0 0}
.x4-mk .bmore{justify-self:start;margin-top:8px;font-weight:700;font-size:14px;color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.x4-mk .site .bpost:hover .bmore{color:var(--c-orange-text)}
.x4-mk .site .bpost:hover .media{box-shadow:0 0 0 2px var(--c-orange)}
@container site (min-width:1024px){.x4-mk .site .blog{gap:56px 28px}}
.x4-mk .site .bpost.feat{border-bottom:1px solid var(--line);padding-bottom:40px}
.x4-mk .site .bpost.feat .bt b{font-size:24px}
@container site (min-width:1024px){
  .x4-mk .site .bpost.feat{grid-column:1/-1;grid-template-columns:1.5fr 1fr;align-items:center;gap:40px;padding-bottom:56px}
  .x4-mk .site .bpost.feat .media{aspect-ratio:16/10}
  .x4-mk .site .bpost.feat .bt b{font-size:32px;line-height:1.25}
  .x4-mk .site .bpost.feat .bx{font-size:16px}
}
.x4-mk .ptags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:relative}
.x4-mk .tagchip{cursor:pointer}
/* v94 เมนูมือถือ: motion */
.x4-mk #layer.stay .drawer,.x4-mk #layer.stay .scrim,.x4-mk #layer.stay .menu a{animation:none}
@keyframes dIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes sIn{from{opacity:0}to{opacity:1}}
@keyframes mIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.x4-mk .drawer{animation:dIn .28s cubic-bezier(.22,1,.36,1) both}
.x4-mk .scrim{animation:sIn .25s ease both}
.x4-mk #layer.closing .drawer{transition:transform .2s ease-in;transform:translateX(-100%)}
.x4-mk #layer.closing .scrim{transition:opacity .2s;opacity:0}
.x4-mk .drawer .dh{position:relative;transition:box-shadow .2s}
.x4-mk .drawer.scrolled .dh{box-shadow:0 6px 14px rgba(16,24,40,.08)}
.x4-mk .dprog{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--c-orange);transform:scaleX(0);transform-origin:left;transition:transform .08s linear;z-index:2}
.x4-mk .drawer .db{scrollbar-width:thin;scrollbar-color:var(--c-orange) transparent;scroll-behavior:smooth}
.x4-mk .drawer .db::-webkit-scrollbar{width:5px}
.x4-mk .drawer .db::-webkit-scrollbar-track{background:transparent}
.x4-mk .drawer .db::-webkit-scrollbar-thumb{background:var(--c-orange);border-radius:3px}
.x4-mk .menu a{position:relative;animation:mIn .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 28ms + 90ms);transition:background-color .18s,color .18s,padding-left .18s}
.x4-mk .menu a{gap:12px}.x4-mk .menu a>span{transition:transform .18s,color .18s;text-align:right;flex:none}
.x4-mk .menu a::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:3px;background:var(--c-orange);transform:scaleY(0);transition:transform .18s}
.x4-mk .menu a:active,.x4-mk .menu a.tap{background:#FFF3E8;color:var(--c-orange-text);padding-left:8px}
.x4-mk .menu .subm a:active,.x4-mk .menu .subm a.tap{padding-left:24px}
.x4-mk .menu a:active::before,.x4-mk .menu a.tap::before{transform:scaleY(1)}
.x4-mk .menu a:active>span,.x4-mk .menu a.tap>span{transform:translateX(4px);color:var(--c-orange-text)}
@media (hover:hover){.x4-mk .menu a:hover{color:var(--c-orange-text)}.x4-mk .menu a:hover>span{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.x4-mk .drawer,.x4-mk .scrim,.x4-mk .menu a{animation:none}.x4-mk .menu a,.x4-mk .menu a>span,.x4-mk .menu a::before,.x4-mk .dprog{transition:none}}
.x4-mk .site .dp-i.ci{grid-template-columns:52px 1fr auto auto 24px}
.x4-mk .dp-i.ci .dp-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:18px;line-height:1}
.x4-mk .dp-i.ci .dp-x:hover{background:#3A3A3E;color:var(--c-orange)}
@container site (max-width:767px){.x4-mk .site .dp-i.ci{grid-template-columns:44px 1fr auto}}
/* v98 แบนเนอร์คุกกี้ */
.x4-mk #paybox{scroll-margin-top:100px}
@keyframes ckIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.x4-mk .ckbar{position:sticky;bottom:0;z-index:60;background:#fff;color:#141414;border-top:2px solid var(--c-orange);box-shadow:0 -8px 24px rgba(16,24,40,.14);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;animation:ckIn .3s ease both;font-size:14px}
.x4-mk .ckbar p{margin:0;line-height:1.55;color:#3A3D42}.x4-mk .ckbar a{color:var(--c-orange-text)}
.x4-mk .ckb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x4-mk .ckbar .btn-g{color:#141414;border-color:#141414;background:#fff}
@container site (min-width:1024px){.x4-mk .ckbar{margin:0 0 0 24px;width:420px;bottom:20px;border:1px solid #E3E5E8;border-top:2px solid var(--c-orange);border-radius:12px}}
@media (prefers-reduced-motion:reduce){.x4-mk .ckbar{animation:none}}
/* v87 */
.x4-mk .site .gdtech>.ptile{border:0;background:#141414;min-height:170px;padding:20px}
.x4-mk .site .gdtech .ptile .big{font-size:22px}
.x4-mk .site .gdtech .ptile .sm{color:#C9CBD0!important;font-size:14px;line-height:1.5;margin-top:6px;position:relative}
.x4-mk .site .gdtech .ptile .k{color:var(--c-orange)}
.x4-mk .site .gdfeat>div{background:#F4F5F6;border:0;font-weight:600;padding:12px 14px}
.x4-mk .gdfeat i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--c-orange);color:#000;display:grid;place-items:center}
.x4-mk .gdfeat i svg{color:#000!important;width:13px;height:13px;stroke-width:3}
.x4-mk .bx{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x4-mk .bt .bx{margin-top:6px}
.x4-mk .cmph .cmpc a{min-height:4.05em;padding-inline:12px;overflow-wrap:anywhere}
.x4-mk .cmph .cmpc{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;gap:10px;box-shadow:var(--shadow)}
.x4-mk .cmph .cmpimg{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.x4-mk .cmph .cmpc .btn{width:auto;margin:0 12px 12px}
.x4-mk .cmph .cmpc{grid-template-rows:auto auto auto}
.x4-mk .lt .reviews{grid-template-rows:repeat(4,auto);align-items:start}
.x4-mk .lt .reviews>.rcard{grid-row:span 4;grid-template-rows:subgrid;row-gap:4px}
.x4-mk .lt .reviews>.rcard .tx{display:contents}
.x4-mk .lt .reviews>.rcard .mdl{margin-top:8px;align-self:start}
.x4-mk .lt .reviews>.rcard b,.x4-mk .lt .reviews>.rcard small{padding-inline:2px}
/* v86 ความสม่ำเสมอทุกหน้า */
.x4-mk .pcmp-b{position:relative}
.x4-mk #mainCta>.btn,.x4-mk .wishbtn{border-radius:4px}
.x4-mk .vbar{border-top:2px solid var(--c-orange)}
.x4-mk .vbar .vbl{display:none;color:#fff;font-weight:600;font-size:16px;white-space:nowrap}
.x4-mk .cta-box .ctx{display:grid;gap:4px;min-width:0}
.x4-mk .cta-box .ctx .price{font-size:22px}
.x4-mk .cta-box .acts{display:flex;gap:10px}
.x4-mk .wishi,.x4-mk .wishi .card,.x4-mk .wishgrid{min-width:0}
.x4-mk .wishnote{min-width:0;overflow-wrap:anywhere}
.x4-mk .nav a{white-space:nowrap}
.x4-mk .site .cmpbar,.x4-mk .site .stickybar~.cmpbar{bottom:0!important}
.x4-mk .site:has(#cmpHost .cmpbar) .stickybar{display:none}
@container site (min-width:1024px){
  .x4-mk .site.lt .vbar{background:transparent;border:0;padding-block:20px 0}
  .x4-mk .vbar-in{grid-template-columns:auto 1fr 1fr 1fr;align-items:center;gap:12px;background:#141414;border-radius:8px;padding:16px 20px}
  .x4-mk .vbar .vbl{display:block;margin-right:8px}
  .x4-mk .nav a{padding:8px 6px}
  .x4-mk .hsearch{min-width:120px}.x4-mk .hsearch .sbox,.x4-mk .hsearch .sbox input{min-width:0;width:100%}
  .x4-mk .hdr .row>*{flex-shrink:0}.x4-mk .hdr .row>.hsearch{flex-shrink:1}
}
/* v81 LP ใช้โครงหน้าสินค้า */
.x4-mk .lp1{padding:0;position:relative}
.x4-mk .lppd{padding-top:20px}
.x4-mk .lppd .cta{grid-template-columns:1fr}
.x4-mk .lpst-in{display:contents}
.x4-mk .lpspec .lpspec-g{grid-template-columns:1fr!important}
@container site (min-width:1024px){
  .x4-mk .lp-mode .hdr .grow{display:block}
  .x4-mk .lpspec .sheet{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  /* Desktop: แถบติดจอของ Landing เป็นการ์ดลอยมุมขวาล่าง แบบเดียวกับ Dock */
  .x4-mk .site .psticky.lpst{background:transparent;border:0;box-shadow:none;padding:0 24px 20px 0;justify-content:flex-end;pointer-events:none;transform:translateY(160%)}
  .x4-mk .site .psticky.lpst.show{transform:none}
  .x4-mk .site .lpst-in{pointer-events:auto;display:flex;align-items:center;gap:14px;background:#141414;border-top:2px solid var(--c-orange);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.28),0 0 0 1px rgba(255,255,255,.06);padding:10px 12px}
  .x4-mk .site .lpst-in>div{display:flex;align-items:center;gap:12px}
  .x4-mk .site .psticky.lpst .nm{color:#B8B8B8;max-width:260px}
  .x4-mk .site .psticky.lpst .price{color:#fff;font-size:16px}
  .x4-mk .site .psticky.lpst .btn{height:38px;padding:0 16px}
}
.x4-mk .lp-mode .nav,.x4-mk .lp-mode .burger,.x4-mk .lp-mode .hsearch,.x4-mk .lp-mode .sbtn{display:none!important}
.x4-mk .wtag{font-size:11px;color:var(--wait);border:1px dashed var(--wait);border-radius:3px;padding:1px 5px;margin-left:4px}
.x4-mk .wtxt{color:var(--wait)}
.x4-mk .ftr{position:relative;padding-block:40px 24px}
.x4-mk .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px}
.x4-mk .fcol{display:grid;gap:8px;align-content:start;font-size:14px}
.x4-mk .fcol h4{margin:0 0 4px;color:#fff;font-size:15px;font-weight:600}
.x4-mk .fcol a{color:#B8B8B8;text-decoration:none}.x4-mk .fcol a:hover{color:var(--c-orange)}
.x4-mk .fbrand{grid-column:1/-1}
.x4-mk .fbrand .logo{display:inline-flex;justify-self:start}
.x4-mk .fbrand p{margin:8px 0;color:#B8B8B8;max-width:40ch}
.x4-mk .pay{display:flex;gap:6px;flex-wrap:wrap}.x4-mk .pay span{border:1px solid #333;border-radius:3px;padding:3px 8px;font-size:12px;color:#ddd}
.x4-mk .crow{color:#B8B8B8}
.x4-mk .fbot{border-top:1px solid #2A2A2A;margin-top:28px;padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#888}
.x4-mk .phero{position:relative;padding-block:8px 28px;border-bottom:1px solid var(--line)}
.x4-mk .phero .lead{margin:8px 0 0;max-width:60ch}
.x4-mk .two{display:grid;gap:16px;padding-block:24px 48px}
.x4-mk .box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;position:relative;min-width:0}
.x4-mk .sum{display:grid;gap:10px;align-content:start}
.x4-mk .srow{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.x4-mk .srow.tot{font-size:17px;font-weight:600;border:0}
.x4-mk .crow2{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:start;padding-block:12px;border-bottom:1px solid var(--line)}
.x4-mk .crow2:last-child{border:0}
.x4-mk .thumb{aspect-ratio:1;border-radius:4px}
.x4-mk .ci{min-width:0;display:grid;gap:4px}
.x4-mk .cn{color:var(--fg);text-decoration:none;font-weight:600;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.x4-mk .qty{display:flex;align-items:center;gap:8px;margin-top:4px}
.x4-mk .qty button{width:30px;height:30px;border:1px solid var(--line);background:var(--chip);border-radius:4px;cursor:pointer;color:var(--fg)}
.x4-mk .qty .lnk{width:auto;border:0;background:none;color:var(--muted);text-decoration:underline;font-size:13px}
.x4-mk .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.x4-mk .ff{display:grid;gap:4px;min-width:0}.x4-mk .ff.full,.x4-mk .fgrid2 .full{grid-column:1/-1}
.x4-mk .ff label{font-size:13px;color:var(--muted)}
.x4-mk textarea.inp{height:auto;padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:var(--surface);width:100%;color:var(--fg);font:inherit}
.x4-mk .paybox{display:grid;grid-template-columns:auto 1fr;gap:10px;border:1px solid var(--c-orange);border-radius:8px;padding:12px;margin-top:10px}
.x4-mk .paybox input{accent-color:var(--c-orange)}.x4-mk .paybox small{display:block;color:var(--muted);font-size:13px}
.x4-mk .agree-box{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.x4-mk .ck{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;align-items:start;cursor:pointer}
.x4-mk .ck input{accent-color:var(--c-orange);width:18px;height:18px;margin-top:2px}
.x4-mk .bank{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.x4-mk .qr{aspect-ratio:1;border-radius:6px}
.x4-mk .kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.x4-mk .kv dt{color:var(--muted)}.x4-mk .kv dd{margin:0}
.x4-mk .steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.x4-mk .prose-wrap{display:grid;gap:20px;padding-block:24px 56px}
.x4-mk .prose-wrap>*{max-width:860px;min-width:0}
.x4-mk .prose-wrap p{margin:0}
.x4-mk .bigsteps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.x4-mk .bigsteps li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding-block:16px;border-bottom:1px solid var(--line)}
.x4-mk .bigsteps .n{width:36px;height:36px;border-radius:50%;background:var(--c-orange);color:#000;font-weight:700;display:flex;align-items:center;justify-content:center}
.x4-mk .bigsteps b{font-weight:600;font-size:17px}.x4-mk .bigsteps p{color:var(--muted);font-size:14px;margin:2px 0 0}
.x4-mk .itab{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.x4-mk .itab th,.x4-mk .itab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.x4-mk .itab thead th{color:var(--muted);font-weight:600;font-size:13px}
.x4-mk .itab tbody th{font-weight:600;white-space:nowrap}
.x4-mk .media.wide{aspect-ratio:16/9;border-radius:8px}
.x4-mk .toc{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:4px}
.x4-mk .chipbar{display:flex;gap:8px;flex-wrap:wrap;padding-block:16px;align-items:center}
.x4-mk .chip.on{background:var(--c-orange);color:#000;border-color:var(--c-orange)}
.x4-mk button.chip{color:var(--fg)}.x4-mk button.chip.on{color:#000}
.x4-mk .mhero{position:relative;min-height:360px;display:flex;align-items:flex-end}
.x4-mk .mhero .media{position:absolute;inset:0}
.x4-mk .mhero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,.2),rgba(14,14,14,.95))}
.x4-mk .mhero .copy{position:relative;z-index:2;padding-block:32px;width:100%;color:#fff;--fg:#fff;--muted:#E6E6E6}
.x4-mk .mhero h1{color:#fff;font-size:34px;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.x4-mk .mhero .yr{color:#fff!important;font-weight:600;opacity:.9}
.x4-mk .mhero p{color:#F0F0F0!important;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@container site (min-width:768px){.x4-mk .mhero h1{font-size:48px}}
.x4-mk .mhero .yr{font-weight:400;color:#ccc;font-size:.6em}
.x4-mk .mhero p{color:#ddd;margin:8px 0 12px}
.x4-mk .blog{display:grid;gap:16px}
.x4-mk .bpost{display:grid;gap:8px;text-decoration:none;color:var(--fg)}
.x4-mk .bpost .media{aspect-ratio:1200/630;border-radius:6px}
.x4-mk .bpost small{color:var(--muted);font-size:13px}.x4-mk .bpost b{font-weight:600;font-size:17px;line-height:1.35;display:block}
.x4-mk .art{display:grid;gap:16px;padding-block:36px 56px;max-width:820px;position:relative}
.x4-mk .cta-box{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:20px;border-radius:8px}
.x4-mk .cta-box b{font-size:18px;font-weight:600}
.x4-mk .g3{grid-template-columns:1fr 1fr}
.x4-mk .lph .copy{padding-block:40px}
@container site (min-width:768px){
  .x4-mk .fgrid{grid-template-columns:2fr 1fr 1fr 1.3fr}.x4-mk .fbrand{grid-column:auto}
  .x4-mk .two{grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
  .x4-mk .sum{position:sticky;top:calc(var(--mbar-h,44px) + 88px)}
  .x4-mk .phero{padding-bottom:36px}
  .x4-mk .mhero{min-height:460px}
  .x4-mk .mhero .media::after{background:linear-gradient(90deg,rgba(14,14,14,.92),rgba(14,14,14,.2) 70%)}
  .x4-mk .mhero .copy{padding-block:64px}
  .x4-mk .blog{grid-template-columns:repeat(3,1fr);gap:24px}
  .x4-mk .bpost.feat{grid-column:1/-1;grid-template-columns:1.4fr 1fr;align-items:center;gap:24px}
  .x4-mk .bpost.feat b{font-size:26px}
  .x4-mk .g3{grid-template-columns:repeat(3,1fr)}
}
.x4-mk .sgw{position:relative}
.x4-mk .sg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:55;background:#141414;border:1px solid #333;border-radius:6px;padding:6px;max-height:70vh;overflow:auto;box-shadow:0 16px 40px rgba(0,0,0,.5);min-width:280px}
.x4-mk .sg-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#888;padding:8px 8px 4px}
.x4-mk .sg-i{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;color:#ddd;padding:8px;border-radius:4px;cursor:pointer;font-size:14px}
.x4-mk .sg-i:hover{background:#222;color:#fff}.x4-mk .sg-i b{color:#fff;font-weight:600}.x4-mk .sg-i span{color:#888;font-size:12px}
.x4-mk .sg-p .sg-t{color:#ddd;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.x4-mk .sg-p .price{color:#fff;font-size:13px;flex:none}
.x4-mk .sg-all{width:100%;margin-top:4px;background:var(--c-orange);color:#000;border:0;border-radius:4px;padding:9px;font-weight:600;cursor:pointer}
.x4-mk .sg-empty{padding:12px;color:#aaa;font-size:14px}
.x4-mk .qas{display:grid;gap:0;border-top:1px solid var(--line)}
.x4-mk .qa{border-bottom:1px solid var(--line)}
.x4-mk .qa summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.x4-mk .qa summary::after{content:"+";color:var(--c-orange);font-size:20px;line-height:1}
.x4-mk .qa[open] summary::after{content:"−"}
.x4-mk .qa>div{padding:0 0 14px;color:var(--muted);font-size:15px}
.x4-mk .qa>div b{color:var(--fg)}
.x4-mk .facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x4-mk .facts div{border:1px solid var(--line);border-radius:8px;padding:14px;display:grid;gap:2px}
.x4-mk .facts b{font-size:24px;font-weight:700;color:var(--c-orange);line-height:1.1}
.x4-mk .facts span{font-size:13px;color:var(--muted)}
.x4-mk .ticks,.x4-mk .xs{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.x4-mk .ticks li,.x4-mk .xs li{position:relative;padding-left:24px}
.x4-mk .ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--c-orange);border-bottom:2px solid var(--c-orange);transform:rotate(-45deg)}
.x4-mk .xs li::before{content:"×";position:absolute;left:4px;top:0;color:#E5484D;font-weight:700}
.x4-mk .ticks.hl li{font-size:15px}
.x4-mk .suit{font-size:14px;line-height:1.5;border-left:3px solid var(--c-orange);padding:6px 10px;background:rgba(244,128,40,.08);border-radius:0 4px 4px 0}
@container site (min-width:768px){.x4-mk .facts{grid-template-columns:repeat(4,1fr)}}
.x4-mk .s09h{text-align:center;display:grid;gap:4px;margin-bottom:16px}
.x4-mk .s09tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);padding-inline:12px}
.x4-mk .s09tabs::-webkit-scrollbar{display:none}
.x4-mk .s09tabs>:first-child{margin-left:auto}.x4-mk .s09tabs>:last-child{margin-right:auto}
.x4-mk .s09tabs.drag{cursor:grabbing;scroll-behavior:auto}.x4-mk .s09tabs.drag button{pointer-events:none}
.x4-mk .s09tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.x4-mk .s09tabs button[aria-selected="true"]{color:var(--fg);border-color:transparent}
.x4-mk .s09row{grid-auto-columns:78%;gap:16px;padding-bottom:4px;scrollbar-width:none}
.x4-mk .s09row::-webkit-scrollbar{display:none}
.x4-mk .s9card{display:grid;grid-template-rows:auto 1fr;background:#fff;color:#141414;text-decoration:none;border-radius:4px;overflow:hidden;box-shadow:0 6px 20px rgba(16,24,40,.08);transition:transform .2s,box-shadow .2s;max-width:100%}
.x4-mk .s9card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,24,40,.14)}
.x4-mk .s9card .media{aspect-ratio:5/4}
.x4-mk .s9card .t{padding:14px 16px 16px;display:grid;gap:4px;align-content:start}
.x4-mk .s9card b{font-size:17px;font-weight:700;line-height:1.3}
.x4-mk .s9card span{font-size:13px;color:#5C5F66}
.x4-mk .s9card .pr{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.x4-mk .s9card .pr small{font-size:12px;color:#5C5F66}
.x4-mk .s9card .pr .price{font-size:22px;color:#141414}
.x4-mk .s9card .go{font-style:normal;font-size:12px;font-weight:600;color:var(--c-orange-text);letter-spacing:.04em;margin-top:6px}
.x4-mk .s09bar{height:4px;background:#DADDE1;border-radius:2px;margin:24px auto 0;max-width:560px;overflow:hidden}
.x4-mk .s09bar span{display:block;height:100%;background:var(--c-orange);border-radius:2px;transition:margin-left .1s}
@container site (min-width:768px){.x4-mk .s09row{grid-auto-columns:calc((100% - 48px)/4)}.x4-mk .s09h .h2{font-size:40px}}
.x4-mk .s09{background:#0E0E0E;color:#fff;--fg:#fff;--muted:#A9ABB0;--line:#2A2A2A}
.x4-mk .s09 .s09tabs button{color:#8E9096}.x4-mk .s09 .s09tabs button[aria-selected="true"]{color:#fff}
.x4-mk .s09 .s09bar{background:#2E2E2E}
.x4-mk .s9card .st{font-style:normal;font-size:12px;color:#5C5F66;border-left:2px solid var(--c-orange);padding-left:6px;margin-top:4px;line-height:1.4}
.x4-mk .s9card{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.x4-mk .pv{overflow:hidden}
.x4-mk .pvrow{grid-auto-columns:72cqw;gap:0;padding-inline:14cqw;scroll-snap-type:x mandatory;padding-bottom:0}
.x4-mk .pvi{scroll-snap-align:center;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.28;transform:scale(.78);transition:opacity .35s,transform .35s;position:relative}
.x4-mk .pvi.on{opacity:1;transform:scale(1)}
.x4-mk .pvimg{display:block;width:100%;aspect-ratio:16/10;position:relative}
.x4-mk .pvimg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.x4-mk .pvimg::after{content:"";position:absolute;left:18%;right:18%;bottom:4%;height:8%;background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);z-index:-1}
.x4-mk .pvcap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:8px}
.x4-mk .pvnav{background:none;border:0;color:#fff;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.x4-mk .pvnav:hover{color:var(--c-orange)}
.x4-mk .pvtxt{text-align:center;text-decoration:none;color:#fff;display:grid;gap:2px}
.x4-mk .pvtxt small{color:var(--c-orange);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.x4-mk .pvtxt b{font-size:24px;font-weight:700;line-height:1.2}
.x4-mk .pvtxt span{font-size:13px;color:#A9ABB0}
.x4-mk .pv .pbar{margin-top:4px}
@container site (min-width:768px){.x4-mk .pvrow{grid-auto-columns:40cqw;padding-inline:30cqw}.x4-mk .pvtxt b{font-size:30px}.x4-mk .pvcap{max-width:760px;margin-inline:auto}}
.x4-mk .hscroll{cursor:grab}
.x4-mk .hscroll.mdrag{cursor:grabbing;user-select:none}
.x4-mk .hscroll.mdrag *{pointer-events:none}
.x4-mk .hscroll img{-webkit-user-drag:none;user-select:none}
/* ---- 4x4thailand: ปรับให้เข้ากับธีม ---- */
.x4-mk{background:none;color:var(--x4-text,#141414);color-scheme:light;font-size:16px;line-height:1.6;margin:0}
.x4-mk .site{margin-inline:auto;max-width:none;background:#fff}
.x4-mk a{text-decoration:none}
.x4-mk .crumb a:hover{text-decoration:underline}
.x4-mk img{max-width:100%;height:auto}
.x4-mk .media img,.x4-mk .rcard img,.x4-mk .afig img,.x4-mk .lpx-m img,.x4-mk .mhero img{width:100%;height:100%;object-fit:cover}
.x4-mk .x4-cutimg{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
.x4-mk ul.products{margin:0!important;padding:0!important;list-style:none;grid-template-columns:none}
.x4-mk ul.products::before,.x4-mk ul.products::after{display:none!important}
.x4-mk ul.products li.product{width:auto!important;margin:0!important;float:none!important}
.x4-mk ul.grid.products{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px}
@container site (min-width:768px){.x4-mk ul.grid.products{grid-template-columns:repeat(3,1fr)!important;gap:16px}.x4-mk ul.grid.products:not(.g3){grid-template-columns:repeat(4,1fr)!important}}
.x4-mk ul.hscroll.products{grid-template-columns:none!important}
.x4-mk .x4-postbody{max-width:780px}
.x4-mk .x4-postbody img{border-radius:6px}
.x4-mk .x4-pagin{display:flex;gap:6px;margin-top:32px}.x4-mk .x4-pagin .page-numbers{padding:6px 12px;border:1px solid var(--line);border-radius:4px;color:var(--fg)}.x4-mk .x4-pagin .current{background:var(--c-orange);border-color:var(--c-orange)}
.x4-mk .bpost .media img{display:block}
.x4-mk .x4-gdbody{max-width:780px}
.x4-mk--s06 .site{background:none}
.x4-mk a.chip{color:var(--fg)}.x4-mk a.chip.on{color:#000}.x4-mk a.chip:hover{border-color:var(--c-orange)}
.x4-mk a.card,.x4-mk a.bpost,.x4-mk a.rcard,.x4-mk a.post{color:var(--fg)}
.x4-mk p a,.x4-mk li a,.x4-mk .crumb a{color:var(--link)}
.x4-mk .crumb a{color:var(--muted)}
.x4-mk .hero .media:has(.x4-cutimg){background:#1A1A1A}
.x4-mk .hero .media .x4-cutimg{object-fit:contain!important;object-position:right center;padding:32px 6% 32px 45%;background:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
.x4-mk--cmp .site{background:none}
.x4-mk .cmpul{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px}
.x4-mk .cmpadd{display:grid;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:8px;text-align:left}
.x4-mk .cmpadd .inp{height:40px;width:100%;border:1px solid var(--line);border-radius:4px;padding:0 8px;background:#fff}
.x4-mk .cmpc .btn{height:36px;font-size:14px}
.x4-mk .x4-cmplead{margin:0 0 8px}
.x4-mk .cmpt td,.x4-mk .cmpt th{font-size:14px}
.x4-mk .cmpc .btn{display:flex!important;align-items:center;justify-content:center;height:36px!important;min-height:0!important;padding:0 12px!important;font-size:14px!important;line-height:1!important;text-decoration:none!important}
.x4-mk .hero.gdh .media::after{content:"";display:block!important;position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 62%);pointer-events:none}
/* หน้าเปรียบเทียบ: คอลัมน์หัวแถวติดซ้ายปิดเนื้อหาที่เลื่อนผ่านได้สนิท · ปุ่ม × วงกลม */
.x4-mk .cmpt{border-collapse:separate!important;border-spacing:0}
.x4-mk .cmpt thead th:first-child,.x4-mk .cmpt tbody th{position:sticky;left:0;z-index:3;background:#fff;box-shadow:6px 0 8px -6px rgba(16,24,40,.18)}
.x4-mk .cmpt tr.dif th{background:#fff;box-shadow:inset 3px 0 0 var(--c-orange),6px 0 8px -6px rgba(16,24,40,.18)}
.x4-mk .cmpt thead th.cmph{z-index:1}
.x4-mk .cmpx{padding:0!important;width:26px!important;height:26px!important;min-height:0!important;min-width:0!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;top:4px!important;right:4px!important;left:auto!important;font-size:16px!important;line-height:1!important;background:#fff!important;color:#141414!important;border:1px solid var(--line)!important}
@container site (max-width:767px){.x4-mk .cmpt thead th:first-child,.x4-mk .cmpt tbody th{min-width:84px;width:84px;font-size:13px;padding-left:10px}}
/* เปรียบเทียบ (มือถือ): ช่องว่างหัวตารางไม่ติดซ้าย ให้เห็นรูปที่เลื่อนผ่าน · หัวข้อแถวขึ้นบรรทัดใหม่ ไม่ล้นทับข้อมูล */
.x4-mk .cmpt tbody th{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word;line-height:1.35}
@container site (max-width:767px){
 .x4-mk .cmpt thead th:first-child{position:static!important;background:transparent!important;box-shadow:none!important;min-width:76px;width:76px}
 .x4-mk .cmpt tbody th{min-width:76px;width:76px;max-width:76px;font-size:12px;padding:10px 6px 10px 10px}
}