:root{
    --bg:#fff;
    --surface:#fff;
    --ink:#1c1c1e;
    --muted:#3a3a3c;
    --blue:#1c1c1e;
    --navy:#06245f;
    --line:#e5e5ea;
    --fill:#f2f2f7;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
}

html{
    scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);
    color-scheme:light;
}

::selection{
    background:#d6e4ff;
    color:var(--ink);
}

:focus-visible{
    outline:2px solid var(--navy);
    outline-offset:3px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.6;
}

h1,h2,h3{
    font-family:Prompt,system-ui,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 20px;
}

header{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:5;
    background:#fff;
    color:var(--ink);
    border-bottom:1px solid #e6e8ee;
}

.bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:68px;
    gap:16px;
}

.logo{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 1 auto;
    min-width:0;
    max-width:min(180px,46vw);
    overflow:hidden;
}

.logo img{
    display:block;
    height:46px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
    opacity:0;
}

.logo::after{
    content:"";
    position:absolute;
    inset:0;
    background:#06245f;
    -webkit-mask:url("../img/Logo.PNG") left center / contain no-repeat;
    mask:url("../img/Logo.PNG") left center / contain no-repeat;
}

nav{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    white-space:nowrap;
}

header nav a{
    padding:8px 14px;
    border-radius:999px;
    background:#f3f4f6;
    color:#3a3a3c;
    font-weight:500;
}

header nav a.nav-more{
    display:none;
}

.nav-toggle{
    display:none;
    flex-shrink:0;
    width:44px;
    height:44px;
    margin-left:auto;
    padding:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--navy);
    cursor:pointer;
}

.nav-toggle span{
    display:block;
    width:20px;
    height:2px;
    margin:4px auto;
    background:currentColor;
    border-radius:2px;
}

header nav a:hover,
header nav a.active{
    background:#e7eaf0;
    color:var(--navy);
}

header .btn{
    background:var(--navy);
    color:#fff;
    border-radius:999px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    background:var(--ink);
    color:#fff;
    padding:10px 20px;
    border-radius:14px;
    font-weight:600;
    font-size:15px;
    white-space:nowrap;
}

.btn.ghost{
    background:transparent;
    color:var(--ink);
    border:1.5px solid #c7c7cc;
}

.btn.outline{
    background:#fff;
    color:var(--ink);
    border:1px solid #c7c7cc;
    padding:9px 18px;
}

.hero{
    position:relative;
    overflow:hidden;
    height:min(56.25vw,80vh);
    min-height:220px;
    background:#fff;
}

.vbg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.vbg iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    aspect-ratio:16/9;
    height:auto;
    transform:translate(-50%,-50%);
    border:0;
}

@media (prefers-reduced-motion:reduce){
    .vbg iframe,
    .hero-video video,
    .hero-video::before{
        display:none;
    }

    .slide,
    .slide-bg{
        transition:none;
        transform:none;
    }
}

.banner{
    position:relative;
    display:flex;
    align-items:center;
    min-height:clamp(440px,42vw,640px);
    background:#fff;
    color:var(--ink);
}

.slide-bgs{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.slide-bg{
    position:absolute;
    inset:0;
    background-image:var(--img);
    background-position:var(--pos,center);
    background-size:cover;
    opacity:0;
    transform:scale(1.06);
    transition:opacity .8s ease,transform 7s ease-out;
}

.slide-bg.active{
    opacity:1;
    transform:scale(1);
}

.slide-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 42%,rgba(255,255,255,.08) 78%);
}

.banner .wrap{
    position:relative;
    z-index:1;
    width:100%;
    padding-top:56px;
    padding-bottom:88px;
}

.slides{
    display:grid;
}

.slide{
    grid-area:1/1;
    display:flex;
    align-items:center;
    gap:40px;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:opacity .8s ease,transform .8s ease,visibility .8s ease;
}

.slide.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.slide-img{
    flex:0 0 auto;
}

.slide-img:empty{
    display:none;
}

.slide-img img{
    display:block;
    max-height:260px;
    width:auto;
}

.slide-text{
    flex:0 1 560px;
}

.dots{
    position:absolute;
    left:0;
    right:0;
    bottom:28px;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:10px;
    padding:0 20px;
}

.dot{
    position:relative;
    flex:1;
    max-width:190px;
    height:4px;
    padding:0;
    border:0;
    border-radius:2px;
    background:rgba(28,28,30,.16);
    overflow:hidden;
    cursor:pointer;
}

.dot::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
}

.dot.active::before{
    animation:progress var(--slide-time,6000ms) linear forwards;
}

@keyframes progress{
    to{
        transform:scaleX(1);
    }
}

.tag{
    display:inline-block;
    border:1px solid var(--line);
    border-radius:999px;
    padding:2px 14px;
    font-size:13px;
    margin-bottom:14px;
    background:rgba(255,255,255,.72);
}

.banner h1,
.banner h2{
    font-size:clamp(28px,4.6vw,46px);
    line-height:1.25;
    margin:0 0 14px;
}

.banner p{
    opacity:.92;
    max-width:540px;
    margin:0 0 24px;
}

.banner .btn:not(.ghost){
    background:var(--ink);
    color:#fff;
}

.banner .btn.ghost{
    border-color:var(--ink);
    color:var(--ink);
}

.cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

section{
    padding:52px 0;
}

h2{
    font-size:clamp(26px,3vw,34px);
    letter-spacing:-.02em;
    margin:0 0 8px;
}

.sub{
    color:var(--muted);
    margin:0 0 26px;
}

.grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.grid4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow:0 10px 28px -18px rgba(28,28,30,.45);
}

.ico{
    width:44px;
    height:44px;
    border-radius:12px;
    background:var(--fill);
    color:var(--ink);
    display:grid;
    place-items:center;
    font-size:22px;
}

.card h3{
    margin:6px 0 0;
    font-size:18px;
}

.card p{
    margin:0;
    color:var(--muted);
    font-size:15px;
}

.alt{
    background:var(--surface);
}

.alt .card{
    background:var(--bg);
}

.prod .can{
    height:130px;
    border-radius:12px;
    background:var(--fill);
    display:grid;
    place-items:center;
    margin-bottom:6px;
}

.prod .can svg{
    height:100px;
}

.price{
    color:var(--blue);
    font-weight:700;
    font-size:20px;
    margin-top:auto;
    padding-top:6px;
}

.price small{
    font-weight:500;
    color:var(--muted);
    font-size:13px;
}

.new{
    font-size:12px;
    background:var(--blue);
    color:#fff;
    border-radius:999px;
    padding:0 10px;
    align-self:flex-start;
}

.dealer{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    box-shadow:0 16px 36px -24px rgba(28,28,30,.5);
}

.dealer h2{
    margin:0 0 6px;
}

.dealer p{
    margin:0;
    opacity:.9;
}

footer{
    background:#f3f5f8;
    color:var(--ink);
    padding:48px 0 calc(22px + env(safe-area-inset-bottom,0px));
    font-size:15px;
}

.site-foot{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(180px,.75fr) minmax(140px,.5fr);
    gap:28px 48px;
    align-items:start;
}

.foot-logo{
    position:relative;
    display:inline-block;
    margin-bottom:16px;
}

.foot-logo img{
    display:block;
    height:48px;
    width:auto;
    opacity:0;
}

.foot-logo::after{
    content:"";
    position:absolute;
    inset:0;
    background:#06245f;
    -webkit-mask:url("../img/Logo.PNG") left center / contain no-repeat;
    mask:url("../img/Logo.PNG") left center / contain no-repeat;
}

.foot-name{
    margin:0 0 8px;
    font-size:15px;
    font-weight:700;
}

.foot-blurb{
    margin:0;
    max-width:280px;
    color:#6b7280;
    font-size:13px;
    line-height:1.6;
}

.foot-col{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    min-width:0;
}

.foot-col h3{
    margin:0 0 2px;
    color:var(--ink);
    font-size:15px;
    font-weight:700;
}

.foot-col a{
    color:#2457d6;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
}

.foot-col a:hover{
    text-decoration:underline;
}

.foot-col a.foot-line{
    color:#1f9d55;
}

.foot-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:36px;
    padding-top:16px;
    border-top:1px solid #e3e6ec;
    color:#8b93a7;
    font-size:13px;
}

.foot-bar p{
    margin:0;
}

@media(max-width:800px){
    .site-foot{
        grid-template-columns:1fr;
        gap:28px;
    }

    .foot-bar{
        flex-direction:column;
        align-items:flex-start;
    }
}

.soc{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.fcol .soc a{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--fill);
    color:var(--ink);
    opacity:1;
    line-height:1;
}

.fcol .soc a:hover{
    text-decoration:none;
    opacity:.85;
}

.soc svg{
    width:22px;
    height:22px;
}

.soc .cut{
    fill:#fff;
}

.copy{
    opacity:.7;
    margin-top:18px;
}

@media(max-width:900px){
    .grid4{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:820px){
    .banner .wrap{
        padding-top:24px;
        padding-bottom:52px;
    }

    .highlight .banner .wrap{
        padding-left:16px;
        padding-right:16px;
    }

    .slide{
        gap:14px;
    }

    .banner h2{
        font-size:clamp(18px,4.4vw,28px);
        margin-bottom:8px;
    }

    .banner p{
        font-size:13px;
        margin-bottom:12px;
    }

    .tag{
        font-size:11px;
        margin-bottom:8px;
        padding:2px 10px;
    }

    .grid3{
        grid-template-columns:1fr;
    }

    .bar>.btn{
        margin-left:0;
        padding:8px 14px;
        font-size:14px;
    }

    .fcols{
        grid-template-columns:repeat(2,1fr);
    }

    /* สลับรูป/ตำแหน่งพื้นหลัง responsive จาก style1.css */
    .slide-bg,
    .cat-bg{
        background-image:var(--img-m,var(--img));
        background-position:var(--pos-m,var(--pos,center));
    }
}

.center{
    text-align:center;
    margin-top:28px;
}

/* ===== แบนเนอร์หัวหน้าสินค้า (อิงรูปแบบปัจจุบันจาก style.css) ===== */
.page-head{
    position:relative;
    display:flex;
    align-items:center;
    min-height:clamp(280px,27vw,440px);
    overflow:hidden;
    background:#fff;
    color:var(--ink);
    padding:44px 0 40px;
}

.page-head::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(66%,1000px);
    background:url("../img/banner.jpg") right bottom / auto 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24%);
    pointer-events:none;
}

.page-head .wrap{
    position:relative;
    z-index:1;
    width:100%;
}

.page-head .breadcrumb,
.page-head h1,
.page-head p,
.page-head .chips{
    max-width:min(520px,46%);
}

.page-head h1{
    font-size:clamp(28px,4vw,40px);
    line-height:1.25;
    margin:0 0 8px;
}

.page-head p{
    margin:0;
    opacity:.92;
}

@media (max-width:820px){
    .page-head{
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        padding:18px 0 0;
    }

    .page-head::before{
        position:relative;
        inset:auto;
        order:2;
        width:100%;
        height:auto;
        aspect-ratio:1140 / 640;
        margin-top:14px;
        background-position:right center;
        background-size:168% auto;
        -webkit-mask-image:none;
        mask-image:none;
    }

    .page-head h1{
        font-size:clamp(26px,7vw,34px);
    }

    .page-head p,
    .breadcrumb{
        font-size:14px;
    }

    .page-head .breadcrumb,
    .page-head h1,
    .page-head p,
    .page-head .chips{
        max-width:none;
    }
}

.breadcrumb{
    font-size:14px;
    opacity:.85;
    margin-bottom:10px;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.chip{
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 18px;
    font-size:14px;
    background:#fff;
}

.chip:hover{
    background:var(--fill);
    color:var(--ink);
}

.cat-head{
    margin-bottom:24px;
}

.cat-head h2{
    margin:0 0 6px;
}

.cat-head p{
    margin:0;
    color:var(--muted);
    max-width:720px;
}

.soldout{
    font-size:12px;
    background:#8a97ad;
    color:#fff;
    border-radius:999px;
    padding:0 10px;
    align-self:flex-start;
}

.card.is-soldout .can{
    opacity:.55;
}

.price.ask{
    font-size:16px;
    color:var(--muted);
}

.categories{
    padding-bottom:0;
}

.cat-list{
    margin-top:24px;
}

.cat-band{
    position:relative;
    display:flex;
    align-items:center;
    min-height:clamp(220px,18vw,320px);
    overflow:hidden;
    color:var(--ink);
    background:#fff;
}

.cat-bg{
    position:absolute;
    inset:0;
    background-color:#fff;
    background-image:var(--img);
    background-position:var(--pos,center);
    background-repeat:no-repeat;
    background-size:auto 100%;
    transition:transform .6s ease;
}

.cat-band::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 48%,rgba(255,255,255,0) 80%);
}

.cat-band.right::after{
    background:linear-gradient(270deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 48%,rgba(255,255,255,0) 80%);
}

.cat-band:hover .cat-bg{
    transform:scale(1.04);
}

.cat-band .wrap{
    position:relative;
    z-index:1;
    display:flex;
    width:100%;
}

.cat-band.right .wrap{
    justify-content:flex-end;
}

.cat-text h3{
    font-size:clamp(28px,4vw,48px);
    font-weight:500;
    line-height:1.2;
    margin:0 0 20px;
}

.cat-btn{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    border:1px solid var(--ink);
    border-radius:14px;
    padding:10px 18px;
    font-size:15px;
    font-weight:600;
    transition:background .2s ease,color .2s ease;
}

.cat-band:hover .cat-btn{
    background:var(--ink);
    color:#fff;
}

@media(max-width:820px){
    .cat-band{
        min-height:clamp(118px,34vw,200px);
    }

    .cat-text{
        max-width:68%;
    }

    .cat-text h3{
        font-size:clamp(16px,4.4vw,28px);
        margin-bottom:8px;
    }

    .cat-btn{
        min-height:32px;
        padding:6px 10px;
        border-radius:10px;
        font-size:12px;
    }
}

@media (prefers-reduced-motion:reduce){
    .cat-bg{
        transition:none;
    }

    .cat-band:hover .cat-bg{
        transform:none;
    }
}

.datasheet{
    min-height:60vh;
    padding:40px 0;
}

.datasheet img{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

.card:target,
.card.is-target{
    box-shadow:0 0 0 3px var(--blue);
}

.sitemap{
    min-height:60vh;
    padding:24px 0 64px;
}

.crumb{
    background:var(--surface);
    border-radius:4px;
    padding:10px 18px;
    margin-bottom:28px;
    font-size:14px;
}

.crumb a:hover{
    text-decoration:underline;
}

.sm-title{
    font-size:28px;
    text-align:center;
    margin:0 0 32px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
}

.sm-heading{
    font-size:20px;
    margin:0 0 24px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
}

.sm-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 48px;
}

.sm-group{
    margin-bottom:32px;
}

.sm-group h3{
    font-size:18px;
    margin:0 0 12px;
}

.sm-group ul{
    list-style:none;
    margin:0;
    padding:0;
}

.sm-group li{
    position:relative;
    padding-left:22px;
    margin-bottom:10px;
    line-height:1.7;
}

.sm-group li::before{
    content:"";
    position:absolute;
    left:4px;
    top:.65em;
    border-left:5px solid var(--muted);
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}

.sm-group li a{
    text-decoration:underline;
}

.sm-group li a:hover{
    color:var(--blue);
}

@media(max-width:820px){
    .sm-cols{
        grid-template-columns:1fr;
    }
}

.prod .can img{
    height:110px;
    width:auto;
    max-width:90%;
    object-fit:contain;
}

.buy-btn{
    margin-top:12px;
    text-align:center;
}

.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:14px;
}

.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--bg);
    color:var(--ink);
    font:inherit;
    font-size:15px;
    cursor:pointer;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.tab span{
    font-size:12px;
    opacity:.6;
}

.tab:hover{
    border-color:var(--blue);
    color:var(--blue);
}

.tab.active,
.tab.active:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

.tab.active span{
    opacity:.85;
}

.counter{
    font-size:15px;
    letter-spacing:2px;
    color:var(--muted);
}

.pgrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:22px;
}

.pcard{
    position:relative;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface);
    overflow:hidden;
    outline:none;
    cursor:pointer;
    animation:rise .55s ease backwards;
    animation-delay:calc(var(--i,0) * 45ms);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.pcard:hover,
.pcard:focus-within,
.pcard:focus-visible{
    transform:translateY(-8px);
    border-color:var(--blue);
    box-shadow:0 22px 40px -18px rgba(28,28,30,.28);
}

.pcard:target,
.pcard.is-target{
    box-shadow:0 0 0 3px var(--blue);
}

@keyframes rise{
    from{
        opacity:0;
        transform:translateY(24px);
    }
}

.pcard-media{
    position:relative;
    aspect-ratio:1/1;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:var(--fill);
}

.pcard-media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.3),transparent 65%);
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
}

.pcard:hover .pcard-media::before{
    opacity:1;
}

.pcard-media img,
.pdialog-media img{
    image-rendering:auto;
}

.pcard-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.pcard-ph{
    height:62%;
    filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.pcard-ph svg{
    display:block;
    height:100%;
}

.pcard:hover .pcard-media img{
    transform:scale(1.06);
}

.pcard:hover .pcard-ph{
    transform:scale(1.08) rotate(-3deg);
}

.pcard.is-soldout .pcard-media img,
.pcard.is-soldout .pcard-ph{
    opacity:.55;
}

.pcard-no{
    position:absolute;
    top:14px;
    left:14px;
    z-index:3;
    padding:3px 12px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
    color:#fff;
    background:rgba(6,36,95,.78);
    transition:background .35s ease;
}

.pcard:hover .pcard-no{
    background:var(--blue);
}

.pcard-badges{
    position:absolute;
    top:16px;
    right:14px;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.pcard-badges .new,
.pcard-badges .soldout{
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.pcard-more{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    padding:56px 20px 20px;
    color:#fff;
    background:linear-gradient(0deg,rgba(6,36,95,.96) 55%,rgba(6,36,95,0));
    opacity:0;
    transform:translateY(40%);
    transition:opacity .4s ease,transform .4s ease;
}

.pcard:hover .pcard-more,
.pcard:focus-within .pcard-more,
.pcard:focus-visible .pcard-more{
    opacity:1;
    transform:translateY(0);
}

.pcard-more p{
    margin:0 0 12px;
    font-size:14px;
    line-height:1.5;
}

.pcard-more .buy-btn{
    margin-top:0;
    background:#fff;
    color:var(--navy);
}

.pcard-desc{
    display:none;
}

.pcard-body{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:18px 20px 20px;
}

.pcard-cat{
    font-size:12px;
    letter-spacing:.5px;
    color:var(--muted);
}

.pcard-body h3{
    position:relative;
    margin:0;
    padding-bottom:10px;
    font-size:19px;
    line-height:1.3;
}

.pcard-body h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:28px;
    height:3px;
    border-radius:2px;
    background:var(--blue);
    transition:width .35s ease;
}

.pcard:hover h3::after{
    width:64px;
}

.pprice{
    margin-top:6px;
    font-size:20px;
    font-weight:700;
    color:var(--blue);
}

.pprice small{
    font-size:13px;
    font-weight:500;
    color:var(--muted);
}

.pprice.ask{
    font-size:16px;
    color:var(--muted);
}

@media (hover:none){
    .pcard-more{
        display:none;
    }

    .pcard-desc{
        display:block;
        margin-top:8px;
        font-size:14px;
        color:var(--muted);
    }

    .pcard-desc p{
        margin:0 0 10px;
    }
}

@media (prefers-reduced-motion:reduce){
    .pcard,
    .pcard-media img,
    .pcard-ph,
    .pcard-more{
        animation:none;
        transition:none;
    }
}

.more-hint{
    display:inline-block;
    font-size:14px;
    font-weight:600;
}

.pcard-desc .more-hint{
    color:var(--blue);
}

body.modal-open{
    overflow:hidden;
}

.pdialog{
    width:min(920px,calc(100% - 32px));
    max-height:calc(100dvh - 32px);
    padding:0;
    border:0;
    border-radius:22px;
    background:var(--bg);
    color:var(--ink);
    overflow:auto;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.pdialog[open]{
    animation:pop .3s ease;
}

.pdialog::backdrop{
    background:rgba(3,12,30,.72);
    backdrop-filter:blur(4px);
}

@keyframes pop{
    from{
        opacity:0;
        transform:translateY(16px) scale(.97);
    }
}

.pdialog-box{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
}

.pdialog-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:5;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--fill);
    color:var(--ink);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:background .25s ease;
}

.pdialog-close:hover{
    background:var(--blue);
}

.pdialog-info{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:40px 32px 28px;
}

.pdialog-cat{
    font-size:13px;
    letter-spacing:.5px;
    color:var(--muted);
}

.pdialog-info h2{
    margin:0;
    font-size:28px;
    line-height:1.25;
}

.pdialog-price{
    font-size:26px;
    font-weight:700;
    color:var(--blue);
}

.pdialog-price small{
    font-size:14px;
    font-weight:500;
    color:var(--muted);
}

.pdialog-price.ask{
    font-size:18px;
    color:var(--muted);
}

.pdialog-desc{
    margin:0;
    color:var(--muted);
}

.pdialog-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
}

.pdialog-nav{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid var(--line);
    letter-spacing:2px;
    color:var(--muted);
}

.pdialog-nav button{
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--bg);
    color:var(--ink);
    font-size:16px;
    cursor:pointer;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.pdialog-nav button:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

@media(max-width:820px){
    .pdialog{
        width:min(920px,calc(100% - 16px));
    }

    .pdialog-info{
        gap:6px;
        padding:16px 14px 14px;
    }

    .pdialog-info h2{
        font-size:18px;
    }

    .pdialog-price{
        font-size:18px;
    }
}

@media (prefers-reduced-motion:reduce){
    .pdialog[open]{
        animation:none;
    }
}

.eyebrow{
    display:none;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--bg);
    color:var(--blue);
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
}

.eyebrow::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--blue);
}

.sec-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:36px;
}

.sec-head h2{
    margin:14px 0 0;
    font-size:clamp(28px,4vw,44px);
    line-height:1.2;
}

.center-head{
    justify-content:center;
    text-align:center;
}

.hero2{
    position:relative;
    min-height:clamp(280px,36vw,460px);
    padding:0;
    overflow:hidden;
    background:#1c1c1e;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    border-radius:0;
    overflow:hidden;
    background:#1c1c1e url("../img/banner2.jpg") center / cover no-repeat;
    pointer-events:none;
}

.hero-video video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.42);
    transform-origin:center center;
    opacity:0;
    transition:opacity .55s ease;
}

.hero-video.is-ready video{
    opacity:1;
}

.hero-video::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(100deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 68%);
    background-size:220% 100%;
    animation:hero-shimmer 1.35s ease-in-out infinite;
    pointer-events:none;
}

.hero-video.is-ready::before,
.hero-video.is-poster::before{
    animation:none;
    opacity:0;
    transition:opacity .35s ease;
}

@keyframes hero-shimmer{
    from{ background-position:120% 0; }
    to{ background-position:-120% 0; }
}

.hero-intro{
    padding:clamp(40px,5vw,72px) 0 clamp(28px,4vw,48px);
    text-align:center;
    background:linear-gradient(#f4f7fb,#fff 72%);
}

.hero-intro h1{
    margin:0;
    color:var(--ink);
    font-size:clamp(34px,4.8vw,58px);
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.03em;
}

.hero-intro h1 span{
    color:var(--navy);
}

.hero-intro p{
    max-width:34rem;
    margin:14px auto 0;
    color:var(--muted);
    font-size:clamp(16px,1.7vw,20px);
}

.hero-intro .cta{
    justify-content:center;
    margin-top:28px;
}

.hero-intro .btn{
    min-height:48px;
    padding:12px 22px;
    border-radius:999px;
}

.hero-intro .btn:not(.ghost){
    background:var(--navy);
    color:#fff;
}

.hero-intro .btn:not(.ghost):hover{
    background:#0a3278;
}

.hero-intro .btn.ghost{
    background:#fff;
    color:var(--navy);
    border:1.5px solid #c5d0e4;
}

.hero-intro .btn.ghost:hover{
    background:#f4f7fc;
}

.hero2 .eyebrow{
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.08);
    color:#9fc2ff;
}

.hero2 .eyebrow::before{
    background:#9fc2ff;
}

.hero2 h1{
    margin:0 0 20px;
    font-size:clamp(32px,4vw,52px);
    line-height:1.15;
    letter-spacing:-.03em;
    color:#fff;
    text-shadow:0 1px 16px rgba(0,0,0,.28);
}

.hero2 h1 em{
    font-style:normal;
    color:#fff;
}

.hero2-copy p{
    margin:0 0 20px;
    color:var(--muted);
    font-size:16px;
    text-shadow:none;
}

.hero2 .btn:not(.ghost){
    background:#fff;
    color:#1c1c1e;
}

.hero2 .btn.ghost{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.8);
}

.stats{
    display:flex;
    gap:28px;
    padding:16px 24px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:rgba(6,20,50,.42);
    backdrop-filter:blur(8px);
}

.stat b{
    display:block;
    font-size:clamp(26px,2.8vw,36px);
    line-height:1.1;
}

.stat span{
    color:rgba(255,255,255,.8);
    font-size:13px;
}

@media(max-width:820px){
    .hero2{
        min-height:clamp(180px,52vw,300px);
    }

    .hero-intro{
        padding:28px 0 20px;
    }

    .hero-intro h1{
        font-size:clamp(26px,7vw,36px);
    }

    .hero-intro p{
        font-size:15px;
    }

    .hero-intro .cta{
        margin-top:18px;
    }

    .hero-intro .cta .btn{
        min-height:40px;
        padding:8px 14px;
        font-size:14px;
    }

    .hero-video{
        width:100%;
        height:100%;
        margin:0;
        border-radius:0;
    }

    .highlight{
        padding-top:28px;
    }

    .highlight .banner{
        min-height:clamp(200px,50vw,280px);
    }

    .highlight .banner .wrap{
        padding-top:14px;
        padding-bottom:34px;
    }

    .highlight .slide-text{
        flex:0 1 auto;
        max-width:52%;
    }

    .highlight .banner h2{
        font-size:clamp(15px,3.8vw,22px);
        line-height:1.25;
        margin-bottom:4px;
    }

    .highlight .banner p{
        font-size:clamp(11px,2.8vw,13px);
        line-height:1.35;
        margin-bottom:8px;
    }

    .highlight .tag{
        font-size:10px;
        margin-bottom:4px;
        padding:1px 8px;
    }

    .highlight .cta{
        gap:6px;
    }

    .highlight .cta .btn{
        min-height:28px;
        padding:4px 8px;
        font-size:clamp(10px,2.7vw,13px);
    }

    .highlight .slide-bg{
        background-position:right center;
        background-size:cover;
    }

    .highlight .slide-bg:nth-child(1){
        background-position:right center;
    }

    .highlight .slide-bg:nth-child(2),
    .highlight .slide-bg:nth-child(3){
        background-position:right center;
    }

    .highlight .slide-bg::after{
        background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 58%,rgba(255,255,255,.4) 74%,rgba(255,255,255,0) 86%);
    }

    .highlight .dots{
        bottom:10px;
        gap:8px;
    }

    .cta{
        gap:8px;
    }

    .cta .btn{
        min-height:36px;
        padding:8px 12px;
        font-size:13px;
    }

    .stats{
        gap:12px;
        padding:10px 12px;
    }

    .sec-head{
        flex-wrap:nowrap;
        align-items:center;
        gap:8px;
        margin-bottom:16px;
    }

    .sec-head h2{
        margin-top:0;
        font-size:clamp(18px,5vw,28px);
    }

    .sec-head .btn{
        flex-shrink:0;
        padding:8px 10px;
        font-size:12px;
    }

    .why{
        padding:28px 0 32px;
    }

    .why-grid{
        gap:8px;
    }

    .why-card{
        padding:12px 8px;
        border-radius:14px;
        overflow-wrap:break-word;
    }

    .why-card h3{
        font-size:13px;
    }

    .why-card p{
        font-size:11px;
    }

    .featured{
        padding:28px 0 32px;
    }

    .featured .pgrid{
        gap:8px;
    }

    .featured .pcard{
        border-radius:14px;
    }

    .featured .pcard-body{
        gap:2px;
        padding:8px;
    }

    .featured .pcard-body h3{
        font-size:12px;
        padding-bottom:6px;
    }

    .featured .pprice{
        font-size:13px;
    }

    .featured .pcard-desc{
        display:none;
    }

    .faq{
        padding:28px 0 36px;
    }

    .faq-list summary{
        gap:8px;
        padding:12px 0;
        font-size:14px;
    }

    .faq-list summary::after{
        width:26px;
        height:26px;
        font-size:16px;
    }

    .dealer{
        flex-wrap:nowrap;
        gap:10px;
        padding:14px;
        border-radius:16px;
    }

    .dealer h2{
        font-size:18px;
    }

    .dealer p{
        font-size:13px;
    }

    .dealer .btn{
        flex-shrink:0;
        padding:8px 10px;
        font-size:12px;
    }
}

.coverflow{
    overflow:hidden;
    padding:20px 0 24px;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.coverflow-stage{
    position:relative;
    width:100%;
    height:250px;
    perspective:1400px;
}

.coverflow-item{
    position:absolute;
    top:50%;
    left:50%;
    height:200px;
    width:auto;
    object-fit:contain;
    transform-origin:center center;
    pointer-events:none;
}

.coverflow-item.is-center{
    filter:drop-shadow(0 16px 18px rgba(28,28,30,.18));
}

.coverflow-item.is-side{
    filter:brightness(.93);
}

@media(max-width:820px){
    .coverflow{
        padding:12px 0 14px;
    }

    .coverflow-stage{
        height:150px;
    }

    .coverflow-item{
        height:110px;
    }
}

.highlight{
    padding:64px 0 0;
}

.highlight-title{
    margin:0 0 20px;
}

@media(max-width:820px){
    .highlight-title{
        margin-bottom:12px;
        font-size:clamp(18px,5vw,28px);
    }
}

.highlight .banner{
    border-radius:28px;
    overflow:hidden;
}

.highlight .banner .wrap{
    padding-left:48px;
    padding-right:48px;
}

.highlight .slide-text{
    flex:0 1 38%;
    max-width:38%;
}

.intro{
    padding:88px 0 24px;
}

.intro-grid{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:32px;
}

.intro-tags{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.intro p{
    margin:0;
    font-size:clamp(22px,2.8vw,34px);
    font-weight:500;
    line-height:1.55;
}

.intro mark{
    background:none;
    color:var(--ink);
    font-weight:700;
}

.why{
    padding:64px 0 72px;
}

.why .faq-list{
    max-width:none;
    margin:0;
}

.why-card{
    min-width:0;
    padding:28px 24px;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--surface);
    transition:transform .35s ease,box-shadow .35s ease,background .35s ease,color .35s ease;
}

.why-card .no{
    display:none;
}

.why-card h3{
    margin:0 0 8px;
    font-size:20px;
}

.why-card p{
    margin:0;
    color:var(--muted);
    font-size:15px;
}

.why-card:hover{
    transform:translateY(-4px);
    background:#fff;
    color:var(--ink);
    box-shadow:0 18px 32px -20px rgba(28,28,30,.45);
}

.why-card:hover p{
    color:var(--muted);
}

.featured{
    padding:72px 0;
}

.featured .pgrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.faq{
    padding:72px 0 88px;
    background:#fff;
}

.faq-list{
    max-width:860px;
    margin:0 auto;
}

.faq-list details{
    border-bottom:1px solid var(--line);
}

.faq-list summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:20px 0;
    font-size:18px;
    font-weight:600;
    list-style:none;
    cursor:pointer;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}

.faq-list summary::after{
    content:"+";
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--bg);
    font-size:20px;
    transition:background .3s ease,color .3s ease,border-color .3s ease;
}

.faq-list details[open] summary::after{
    content:"\2212";
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

.faq-list p{
    margin:0 0 20px;
    color:var(--muted);
}

.js .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .7s ease;
    transition-delay:calc(var(--d,0) * 90ms);
}

.js .reveal.visible{
    opacity:1;
    transform:none;
}

@media(max-width:900px){
    .intro-grid{
        grid-template-columns:1fr;
    }

    .intro-tags{
        flex-direction:row;
    }
}

@media(max-width:1180px){
    header{
        position:sticky;
    }

    .nav-toggle{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
    }

    .nav-toggle span{
        margin:0;
    }

    header nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        z-index:30;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:6px 20px 14px;
        background:#fff;
        border-top:1px solid #e6e8ee;
        box-shadow:0 18px 30px rgba(6,20,50,.12);
        white-space:normal;
    }

    header.is-open nav{
        display:flex;
    }

    header nav a,
    header nav a.nav-more{
        display:block;
        padding:13px 0;
        border-radius:0;
        background:transparent;
        border-bottom:1px solid #eef0f4;
        font-size:16px;
    }

    header nav a:last-child{
        border-bottom:0;
    }
}

@media(max-width:480px){
    .bar{
        gap:8px;
    }

    .logo img{
        height:36px;
    }

    .bar>.btn{
        flex-shrink:0;
        padding:8px 12px;
        font-size:0;
    }

    .bar>.btn::after{
        content:"โทร";
        font-size:14px;
        font-weight:600;
    }
}

@media(max-width:560px){
    .fcols{
        grid-template-columns:1fr;
    }

    .stats{
        gap:12px;
    }

    .highlight .banner .wrap{
        padding-left:20px;
        padding-right:20px;
    }
}

@media (prefers-reduced-motion:reduce){
    .coverflow-item{
        transition:none;
    }

    .js .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* ===== Product carousel ===== */
.pcar{
    --pc-w:280px;
    --pc-h:400px;
    --pc-panel:460px;
    --pc-gap:16px;
    --pad:max(20px,calc((100% - 1160px) / 2 + 20px));
}

.pcar-track{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:var(--pc-gap);
    overflow-x:auto;
    padding:6px var(--pad) 10px;
    scroll-padding-inline:var(--pad);
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    cursor:grab;
}

.pcar-track::-webkit-scrollbar{
    display:none;
}

.pcar-track.is-drag{
    cursor:grabbing;
    scroll-snap-type:none;
    user-select:none;
}

.pc{
    flex:0 0 var(--pc-w);
    min-width:0;
    scroll-snap-align:start;
    transition:flex-basis .7s cubic-bezier(.22,1,.36,1),opacity .4s ease;
}

.pc.is-open{
    flex-basis:calc(var(--pc-w) + var(--pc-panel));
}

.pcar-track:not(.has-open):has(.pc:hover) .pc:not(:hover){
    opacity:.4;
}

.pcar-track.has-open .pc:not(.is-open){
    opacity:.4;
}

.pcar-track.has-open .pc:not(.is-open):hover{
    opacity:.7;
}

.pc-main{
    display:flex;
    height:var(--pc-h);
    border-radius:16px;
    overflow:hidden;
    background:var(--surface);
}

.pc.is-target .pc-main{
    box-shadow:0 0 0 3px var(--blue);
}

.pc-media{
    position:relative;
    flex:0 0 var(--pc-w);
    height:100%;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    cursor:pointer;
    background:var(--fill);
}

.pc-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
    -webkit-user-drag:none;
    transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}

.pc-media svg{
    max-width:78%;
    max-height:78%;
    height:70%;
    width:auto;
    pointer-events:none;
    -webkit-user-drag:none;
    transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}

.pc-media:hover img,
.pc-media:hover svg{
    transform:scale(1.04);
}

.pc.is-soldout .pc-media img,
.pc.is-soldout .pc-media svg{
    opacity:.5;
}

.pc-badges{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.pc-toggle{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(6,36,95,.35);
    background:#fff;
    color:#111;
    cursor:pointer;
    opacity:0;
    transform:scale(.8);
    transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1);
}

.pc-toggle::before,
.pc-toggle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:1.5px;
    background:currentColor;
    transform:translate(-50%,-50%);
}

.pc-toggle::after{
    transform:translate(-50%,-50%) rotate(90deg);
}

.pc-media:hover .pc-toggle,
.pc-toggle:focus-visible{
    opacity:1;
    transform:scale(1);
}

.pc.is-open .pc-toggle{
    opacity:1;
    transform:rotate(45deg) scale(1);
}

.pc-panel{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    background:var(--surface);
    visibility:hidden;
    opacity:0;
    transition:opacity .3s ease,visibility 0s .7s;
}

.alt .pc-panel{
    background:var(--bg);
}

.pc.is-open .pc-panel{
    visibility:visible;
    opacity:1;
    transition:opacity .45s ease .25s,visibility 0s;
}

.pc-panel-in{
    width:var(--pc-panel);
    height:100%;
    padding:22px 26px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
}

.pc-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-right:8px;
    scrollbar-width:thin;
}

.pc-list{
    margin:0 0 12px;
    padding-left:18px;
    font-size:14px;
    line-height:1.65;
}

.pc-list li{
    margin-bottom:4px;
}

.pc-block{
    margin:0 0 12px;
}

.pc-block h4{
    margin:0 0 4px;
    font-size:14px;
}

.pc-block p{
    margin:0;
    font-size:14px;
    line-height:1.65;
    color:var(--muted);
}

.pc-size{
    margin:0 0 12px;
    font-size:13px;
    color:var(--muted);
}

.pc-meta{
    font-size:13px;
    color:var(--muted);
}

.pc-desc{
    margin:0 0 10px;
    font-size:15px;
    font-weight:500;
    line-height:1.6;
}

.pc-foot{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.pc-body .price{
    margin:0;
    padding:0;
}

.pc-foot .price{
    margin:0;
    padding:0;
}

.pc-cta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pc-cta .btn{
    font-family:inherit;
    font-size:14px;
}

.pc-info{
    width:var(--pc-w);
    max-width:100%;
    padding:14px 2px 0;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:12px;
}

.pc-info h3{
    margin:0;
    font-size:16px;
    font-weight:500;
    line-height:1.4;
}

.pc-num{
    padding-top:3px;
    font-size:12px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
}

.pc.is-open .pc-num{
    color:var(--ink);
}

.pc-sub{
    grid-column:1/-1;
    margin:2px 0 0;
    font-size:14px;
    color:var(--muted);
}

.pcar-bar{
    display:flex;
    gap:4px;
    padding:12px var(--pad) 0;
}

.pcar-dash{
    position:relative;
    width:18px;
    height:14px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    transition:width .3s ease;
}

.pcar-dash::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:6px;
    height:2px;
    border-radius:1px;
    background:color-mix(in srgb,var(--ink) 18%,transparent);
    transition:background .3s ease;
}

.pcar-dash.active{
    width:34px;
}

.pcar-dash.active::before{
    background:var(--ink);
}

@media (hover:none){
    .pc-toggle{
        opacity:1;
        transform:scale(1);
    }
}

@media (max-width:760px){
    .pcar{
        --pc-w:34vw;
        --pc-h:46vw;
        --pc-panel:54vw;
        --pc-gap:8px;
    }

    .pc-panel-in{
        gap:8px;
        padding:12px 12px;
    }

    .pc-desc,
    .pc-list,
    .pc-block p{
        font-size:12px;
    }

    .pc-info h3{
        font-size:13px;
    }

    .pc-sub{
        font-size:12px;
    }

    .pc.is-open .pc-main{
        height:auto;
        min-height:var(--pc-h);
        align-items:flex-start;
    }

    .pc.is-open .pc-media{
        height:var(--pc-h);
    }

    .pc.is-open .pc-media img,
    .pc.is-open .pc-media svg{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .pc.is-open .pc-panel-in,
    .pc.is-open .pc-body{
        height:auto;
        overflow:visible;
    }

    .pc.is-open .pc-body{
        padding-right:0;
    }
}

@keyframes pcFade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@media (prefers-reduced-motion:reduce){
    .pc,
    .pc-media img,
    .pc-media svg,
    .pc-toggle,
    .pc-panel,
    .pcar-dash,
    .pcar-dash::before{
        transition:none;
    }

    .pc.is-open .pc-panel{
        animation:none;
    }
}

/* ===== ตัวกรอง / ค้นหาสินค้า ===== */
.filter-bar{
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:18px 0;
}

.filter-bar:empty{
    display:none;
}

.fb-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 16px;
}

.fb-row + .fb-row{
    margin-top:14px;
}

.fb-search{
    position:relative;
    display:block;
    flex:1 1 280px;
    max-width:460px;
}

.fb-search svg{
    position:absolute;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    color:var(--muted);
    pointer-events:none;
}

.fb-search input,
.fb-select select{
    height:44px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--bg);
    color:var(--ink);
    font:inherit;
    font-size:15px;
}

.fb-search input{
    width:100%;
    padding:0 16px 0 42px;
}

.fb-select{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--muted);
}

.fb-select select{
    min-width:180px;
    max-width:280px;
    padding:0 14px;
    cursor:pointer;
}

.fb-search input:focus-visible,
.fb-select select:focus-visible,
.fb-chip:focus-visible,
.fb-reset:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.fb-label{
    font-size:14px;
    color:var(--muted);
}

.fb-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.fb-chip{
    padding:6px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--bg);
    color:var(--ink);
    font:inherit;
    font-size:14px;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.fb-chip small{
    margin-left:4px;
    color:var(--muted);
}

.fb-chip:hover{
    border-color:var(--blue);
}

.fb-chip[aria-pressed="true"]{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

.fb-chip[aria-pressed="true"] small{
    color:rgba(255,255,255,.85);
}

.fb-count{
    margin-left:auto;
    font-size:14px;
    color:var(--muted);
}

.fb-reset{
    padding:6px 14px;
    border:0;
    background:none;
    color:var(--blue);
    font:inherit;
    font-size:14px;
    text-decoration:underline;
    cursor:pointer;
}

.pc-empty{
    padding:64px 0;
    text-align:center;
}

.pc-empty p{
    margin:0 0 6px;
    font-size:18px;
}

.pc-empty .sub{
    font-size:15px;
}

@media (max-width:760px){
    .filter-bar{
        padding:10px 0;
    }

    .fb-row{
        flex-wrap:nowrap;
        gap:8px;
    }

    .fb-search{
        flex:1 1 auto;
        min-width:0;
        max-width:none;
    }

    .fb-search input,
    .fb-select select{
        height:34px;
        font-size:12px;
    }

    .fb-select{
        position:relative;
        flex:0 1 32%;
        width:auto;
        min-width:0;
        gap:0;
        font-size:11px;
    }

    .fb-select > span{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }

    .fb-select select{
        flex:1;
        min-width:0;
        max-width:none;
        padding:0 8px;
    }

    .fb-count{
        flex:0 0 auto;
        margin-left:0;
        font-size:11px;
    }
}

.pc-more{
    padding:0;
    border:0;
    background:none;
    font:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    cursor:pointer;
}

.pc-more:hover{
    text-decoration:underline;
}

/* ===== หน้ารายละเอียดสินค้า (หน้าต่างซ้อน Modal) ===== */
body.pm-lock{
    overflow:hidden;
}

.pm{
    position:fixed;
    inset:0;
    z-index:20;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(4,10,24,.72);
    animation:pcFade .25s ease both;
}

.pm-box{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);
    grid-template-rows:minmax(0,1fr);
    width:min(1140px,100%);
    height:min(880px,calc(100vh - 32px));
    max-height:calc(100vh - 32px);
    overflow:hidden;
    border-radius:16px;
    background:var(--bg);
    color:var(--ink);
    border:1px solid var(--line);
}

.pm-media{
    position:relative;
    align-self:stretch;
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    gap:12px;
    height:auto;
    min-height:0;
    padding:20px 18px;
    overflow:hidden;
    background:var(--fill);
}

.pm-thumbs{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    scrollbar-width:thin;
}

.pm-thumb{
    flex:0 0 68px;
    height:68px;
    padding:4px;
    border:1px solid #d7d7dc;
    border-radius:12px;
    background:#fff;
    scroll-snap-align:start;
    cursor:pointer;
    font-family:inherit;
}

.pm-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.pm-thumb.is-active{
    border-color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--ink);
}

.pm-thumb.is-missing{
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:11px;
    background:#fff;
}

.pm-thumb.is-missing::before{
    content:"รอรูป";
}

.pm-stage{
    position:relative;
    min-width:0;
    min-height:0;
    display:grid;
    place-items:center;
}

.pm-stage .pm-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
}

.pm-missing{
    color:var(--muted);
    font-size:14px;
}

.pm-box.is-soldout .pm-photo,
.pm-box.is-soldout .pm-thumb img{
    opacity:.5;
}

.pm-info{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    height:100%;
    max-height:none;
    padding:28px 64px 28px 32px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}

.pm-info h2{
    margin:0;
    font-size:clamp(22px,3vw,28px);
    line-height:1.3;
}

.pm-info .pc-desc{
    margin:0;
}

.pm-buy{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.pm-buy .price{
    margin:0;
    padding:0;
}

.pm-sec{
    padding:0;
}

.pm-sec h3{
    margin:0 0 6px;
    font-size:17px;
}

.pm-sec .pc-list{
    margin:0;
}

.pm-sec p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:var(--muted);
}

.pm-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
}

.pm-close::before,
.pm-close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:2px;
    background:#0b1b3a;
}

.pm-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
}

.pm-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}

@media (max-width:760px){
    .pm{
        padding:10px;
    }

    .pm-box{
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(240px,46dvh) minmax(0,1fr);
        width:min(1140px,100%);
        height:calc(100dvh - 20px);
        max-height:calc(100dvh - 20px);
        border-radius:14px;
    }

    .pm-media{
        grid-template-columns:58px minmax(0,1fr);
        gap:8px;
        width:100%;
        height:auto;
        min-height:0;
        padding:12px;
    }

    .pm-thumb{
        flex-basis:52px;
        height:52px;
        border-radius:10px;
    }

    .pm-info{
        gap:8px;
        height:auto;
        padding:14px 48px 14px 12px;
    }

    .pm-info h2{
        font-size:16px;
    }

    .pm-sec h3{
        font-size:14px;
    }

    .pm-sec p,
    .pm-sec .pc-list{
        font-size:12px;
    }
}

/* ===== ส่วน Datasheets (เพิ่มจาก style1.css) ===== */
.ds-tabs{
    margin-bottom:24px;
}

.ds-card{
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--bg);
    overflow:hidden;
}

.ds-bar{
    padding:8px;
    background:var(--fill);
    color:var(--ink);
    font-size:12px;
    letter-spacing:.3em;
    text-align:center;
}

.ds-body{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:36px;
    padding:36px;
}

.ds-name{
    margin:0;
    font-size:clamp(30px,4vw,48px);
    line-height:1.1;
}

.ds-type{
    margin:10px 0 0;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.ds-tag{
    margin:4px 0 0;
    color:var(--muted);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.ds-vi{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:20px;
    padding:10px 18px;
    border:1.5px solid var(--ink);
    border-radius:14px;
}

.ds-vi span{
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    color:var(--muted);
}

.ds-vi b{
    font-size:30px;
    line-height:1;
}

.ds-badges,
.ds-oem{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.ds-badge{
    padding:6px 14px;
    border:1.5px solid var(--ink);
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

.ds-badge.dark{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

.ds-text{
    margin:20px 0 0;
    color:var(--muted);
}

.ds-block{
    margin-top:24px;
}

.ds-block h3{
    margin:0;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.ds-props{
    width:100%;
    margin-top:10px;
    border-collapse:collapse;
    font-size:14px;
}

.ds-props td{
    padding:9px 0;
    border-bottom:1px solid var(--line);
}

.ds-props td:last-child{
    text-align:right;
    font-weight:600;
}

.ds-props small{
    display:block;
    color:var(--muted);
    font-size:12px;
}

.ds-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.ds-media{
    align-self:start;
    display:grid;
    place-items:center;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:18px;
    background:var(--fill);
}

.ds-media img{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    object-fit:cover;
}

.ds-ph{
    height:62%;
    filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));
}

.ds-ph svg{
    display:block;
    height:100%;
}

.ds-compare-title{
    margin-top:48px;
}

.ds-table-wrap{
    overflow-x:auto;
}

.ds-table{
    width:100%;
    border-collapse:collapse;
    font-size:15px;
    white-space:nowrap;
}

.ds-table th,
.ds-table td{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    text-align:center;
}

.ds-table th:first-child,
.ds-table td:first-child{
    text-align:left;
}

.ds-table th{
    background:var(--surface);
    font-size:13px;
    letter-spacing:.06em;
}

.ds-table tbody tr:hover{
    background:var(--surface);
}

.ds-link{
    padding:0;
    border:0;
    background:none;
    color:var(--blue);
    font:inherit;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}

@media(max-width:820px){
    .ds-body{
        grid-template-columns:1fr;
        gap:24px;
        padding:22px;
    }

    .ds-media{
        order:-1;
    }
}

@media print{
    header,
    footer,
    .crumb,
    .ds-tabs,
    .ds-actions,
    .ds-compare-title,
    .ds-table-wrap{
        display:none;
    }

    .ds-card{
        border:0;
    }
}

/* ===== หน้าค้นหาตัวแทนจำหน่าย ===== */
body.finder{
    background:#e7eef8;
}

.finder-main{
    padding:22px 0 28px;
}

.finder-label{
    display:block;
    margin:0 0 6px;
    color:#667085;
    font-size:13px;
}

.finder-search{
    width:100%;
    min-height:48px;
    padding:0 16px;
    border:1.5px solid #3b6fd8;
    border-radius:14px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:16px;
    outline:none;
}

.finder-search:focus{
    box-shadow:0 0 0 3px rgba(59,111,216,.18);
}

.finder-chips{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:12px;
    padding:8px;
    border-radius:14px;
    background:#f4f7fb;
}

.finder-chip{
    min-height:36px;
    padding:6px 12px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:14px;
    cursor:pointer;
}

.finder-chip.active{
    background:#fff;
    font-weight:600;
    box-shadow:0 1px 2px rgba(16,24,40,.08);
}

.finder-count{
    margin:12px 2px;
    color:#3a3a3c;
    font-size:14px;
}

.finder-board{
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    gap:12px;
    align-items:stretch;
    height:clamp(560px,calc(100dvh - 160px),900px);
}

.finder-join{
    margin-top:16px;
}

.finder-list,
.finder-map{
    min-width:0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.finder-list{
    height:100%;
    overflow:auto;
}

.finder-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    width:100%;
    padding:8px 12px;
    border:0;
    border-bottom:1px solid #eef0f4;
    background:#fff;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.finder-row:hover,
.finder-row.is-on{
    background:#f5f8ff;
}

.finder-name,
.finder-meta{
    min-width:0;
    overflow:hidden;
    line-height:1.2;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.finder-name{
    font-size:14px;
    font-weight:700;
}

.finder-meta{
    color:#667085;
    font-size:12px;
    text-align:left;
}

.finder-empty{
    margin:0;
    padding:24px 16px;
    color:#667085;
}

.finder-map{
    position:relative;
    z-index:0;
    isolation:isolate;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#d7e1ea;
}

#dealer-map{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:#d7e1ea;
}

.leaflet-container.finder-map-scroll{
    touch-action:pan-y;
}

.finder-tools{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:500;
    display:flex;
    gap:6px;
}

.finder-fit,
.finder-locate{
    min-height:34px;
    padding:0 12px;
    border:0;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:13px;
    font-weight:600;
    box-shadow:0 1px 4px rgba(16,24,40,.18);
    cursor:pointer;
}

.finder-locate{
    color:#2457d6;
}

.finder-locate:disabled{
    opacity:.6;
    cursor:default;
}

.dl-me-icon{
    background:none;
    border:0;
}

.dl-me{
    display:block;
    width:18px;
    height:18px;
    margin:2px;
    border:3px solid #fff;
    border-radius:50%;
    background:#2457d6;
    box-shadow:0 0 0 6px rgba(36,87,214,.25);
}

.dl-pin-icon{
    background:none;
    border:0;
}

.leaflet-popup-content-wrapper{
    border-radius:14px;
    font-family:inherit;
}

.dl-popup{
    display:grid;
    gap:4px;
}

.dl-popup strong{
    font-size:15px;
}

.dl-popup span{
    color:#667085;
    font-size:13px;
}

.dl-popup a{
    margin-top:4px;
    color:#2457d6;
    font-size:14px;
    font-weight:600;
}

.finder-gesture{
    position:absolute;
    left:50%;
    top:50%;
    z-index:600;
    max-width:80%;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(28,28,30,.84);
    color:#fff;
    font-size:13px;
    line-height:1.35;
    text-align:center;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    transition:opacity .2s ease;
}

.finder-gesture.is-on{
    opacity:1;
}

@media(max-width:800px){
    .finder-main{
        padding:12px 0 16px;
    }

    .finder-label{
        margin-bottom:4px;
        font-size:11px;
    }

    .finder-search{
        min-height:34px;
        padding:0 10px;
        border-radius:10px;
        font-size:13px;
    }

    .finder-chips{
        gap:2px;
        margin-top:8px;
        padding:4px;
        border-radius:10px;
    }

    .finder-chip{
        min-height:24px;
        padding:2px 7px;
        font-size:11px;
    }

    .finder-count{
        margin:6px 2px;
        font-size:11px;
    }

    .finder-board{
        grid-template-columns:minmax(0,34%) minmax(0,1fr);
        gap:6px;
        height:clamp(320px,calc(100dvh - 196px),680px);
    }

    .finder-list,
    .finder-map{
        border-radius:12px;
    }

    .finder-row{
        gap:4px;
        padding:6px 7px;
    }

    .finder-name{
        font-size:11px;
    }

    .finder-meta{
        font-size:10px;
        text-align:left;
    }

    .finder-tools{
        left:6px;
        bottom:6px;
        gap:4px;
    }

    .finder-fit,
    .finder-locate{
        min-height:22px;
        padding:0 6px;
        border-radius:7px;
        font-size:10px;
    }

    .finder-map .leaflet-control-zoom a{
        width:22px;
        height:22px;
        line-height:22px;
        font-size:14px;
    }

    .finder-map .leaflet-control-attribution{
        font-size:8px;
    }

    .finder-gesture{
        padding:6px 8px;
        font-size:11px;
    }

    .dl-popup strong{
        font-size:12px;
    }

    .dl-popup span,
    .dl-popup a{
        font-size:11px;
    }

    .dl-pin-icon svg{
        width:26px;
        height:32px;
    }
}


/* ===== Social Wall ===== */
.social{
    padding:clamp(36px, 6vw, 72px) 0 clamp(40px, 7vw, 80px);
}

.social .juicer-feed{
    width:100%;
    min-width:0;
}

.social .jcr-feed-grid,
.social .jcr-masonry-grid{
    position:relative !important;
    display:block !important;
    height:auto !important;
}

.social .jcr-post{
    margin:0 !important;
    overflow:hidden;
    border-radius:clamp(4px, 0.8vw, 8px);
    background:#d9e3f3;
}

.social .jcr-post-primary-link{
    position:absolute;
    inset:0;
    display:block;
}

.social .jcr-post-header,
.social .jcr-post-content,
.social .jcr-post-message,
.social .swiper-pagination,
.social .swiper-notification{
    display:none !important;
}

.social .jcr-post > .jcr-post-slider,
.social .jcr-post-slider,
.social .swiper-wrapper,
.social .swiper-slide-active,
.social .jcr-post-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
}

.social .swiper-slide:not(.swiper-slide-active){
    display:none !important;
}

.social .jcr-post-image img,
.social .jcr-post-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media (max-width:820px){
    .why-card{
        padding:10px 6px;
    }

    .why-card h3{
        margin:0 0 4px;
        font-size:12px;
        line-height:1.35;
    }

    .why-card p{
        font-size:11px;
        line-height:1.35;
        overflow-wrap:break-word;
    }
}