@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&display=swap');
:root{--y:#ffda39;--k:#222;--c:#fffaf0;--r:#f44d55}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c);color:var(--k);font-family:Kanit,Arial,sans-serif}
a{text-decoration:none;color:inherit}
[data-k]{white-space:pre-line}
.wrap{max-width:1150px;margin:auto;padding:0 22px}

/* header */
.strip{background:var(--y);text-align:center;padding:8px;font-size:12px;font-weight:800;letter-spacing:1px;border-bottom:2px solid var(--k)}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:14px;position:relative}
nav .logo{font-size:30px;font-weight:700;letter-spacing:-2px}
nav .logo span{color:var(--r)}
nav .links{display:flex;gap:25px;font-size:14px;font-weight:700}
nav .links a{padding:4px 0;border-bottom:3px solid transparent}
nav .links a.on{border-bottom-color:var(--y)}
nav .links a:hover{border-bottom-color:var(--k)}
.burger{display:none;background:#fff;border:2px solid var(--k);border-radius:10px;font:700 18px Kanit;padding:5px 12px;cursor:pointer}
.btn{display:inline-block;background:var(--y);color:var(--k);border:2px solid var(--k);border-radius:40px;padding:11px 22px;font:800 16px Kanit,Arial,sans-serif;box-shadow:4px 4px 0 var(--k);cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--k)}

/* sections */
.sec{padding:78px 0 0}
.sec.hero-sec{padding-top:0}
.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
.heading h1,.heading h2{font-size:clamp(30px,4vw,48px);line-height:1.2;margin:5px 0}
.heading p{max-width:360px;color:#777}
.kicker{font-size:13px;font-weight:800;color:#ac5524;letter-spacing:2px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--k);border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--k);background:white}
.intro{padding:35px 42px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:2px}
.intro h1{font-size:clamp(46px,6vw,75px);line-height:1.1;margin:15px 0;letter-spacing:-3px}
.intro mark{background:var(--y);padding:0 10px;color:var(--k)}
.intro p{font-size:17px;line-height:1.8;color:#555}
.heroart{background:var(--y);display:grid;place-items:center;min-height:310px;border-left:3px solid var(--k)}
.mascot{background-image:url('mascot.webp');background-repeat:no-repeat;background-size:500% 400%;aspect-ratio:1}
.heroart .mascot{width:min(95%,430px)}
.ticker{background:var(--k);color:var(--y);border-radius:10px;text-align:center;padding:12px;font-weight:800;letter-spacing:2px;font-size:13px}
.sec-ticker{padding-top:28px}

/* cards */
.cards,.prices,.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card,.plan{background:white;border:2px solid var(--k);border-radius:18px;padding:20px;box-shadow:5px 5px 0 var(--k)}
.service-four{grid-template-columns:repeat(4,1fr)}
.service-four .card{display:flex;flex-direction:column;min-height:285px}
.service-four .card .svc-icon{font-size:35px;margin-bottom:16px}
.service-four .card h3{font-size:18px;margin:0 0 4px}
.service-four .card p{flex:1;font-size:14px;color:#666;line-height:1.7;margin:0}
.service-four .card .btn{align-self:flex-start;font-size:13px;padding:9px 15px;margin-top:14px;border-radius:12px}

/* pricing */
.band{background:var(--y);border-block:3px solid var(--k);margin-top:80px;padding:65px 0}
.tabs{display:inline-flex;background:white;border:2px solid var(--k);border-radius:30px;padding:4px}
.tabs button{border:0;background:none;border-radius:30px;padding:9px 17px;font:700 14px Kanit;cursor:pointer;color:var(--k)}
.tabs button.active{background:var(--k);color:white}
.plan h3{font-size:25px;margin:8px 0}
.plan .price{font-size:44px;font-weight:900}
.plan ul{padding-left:20px;line-height:2.2;font-size:14px;min-height:150px}
.plan.featured{background:var(--k);color:white}
.plan.featured .btn{background:var(--y);color:var(--k)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:white;border:2px solid var(--k);border-radius:15px;padding:12px;text-align:center}
.step .mascot{width:100%;max-width:190px;margin:auto}
.step h3{margin:0}
.step p{font-size:13px;color:#777}
.foot-note{font-size:13px;color:#666;margin-top:20px;text-align:center}

/* contact */
.contact{margin:85px 0 40px;padding:35px;background:var(--k);color:white;border-radius:22px;display:grid;grid-template-columns:1fr 210px;align-items:center}
.contact h2{font-size:45px;margin:0}
.contact .kicker{color:var(--y)}
.contact .mascot{width:200px;background-color:var(--y);border-radius:50%}
.contact-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.contact-links a.mini{font-size:13px;font-weight:700;border:2px solid #fff;color:#fff;border-radius:30px;padding:6px 14px}
footer{border-top:2px solid var(--k);padding:25px 0;color:#777;font-size:12px}


/* บริการและราคา (ส่วนบน ต่อจาก Hero) */
.sp-sec{padding-top:26px}
.sp-box{background:#fff;border:2px solid var(--k);border-radius:22px;padding:26px 26px 22px;box-shadow:6px 6px 0 var(--k)}
.sp-head{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:26px;margin-bottom:0}
.sp-kicker{font-size:12px;font-weight:800;letter-spacing:2px}
.sp-title h2{font-size:clamp(34px,4.6vw,52px);line-height:1.1;margin:6px 0 4px;letter-spacing:-1.5px}
.sp-title p{margin:0 0 18px;color:#555;font-size:15px}
.sp-peek{position:relative;width:176px;margin-bottom:-14px;z-index:0}
.sp-crop{height:96px;overflow:hidden}
.sp-crop .mascot{width:176px;margin-top:-44px}
.sp-crop .mascot.custom{width:100%;height:100%;aspect-ratio:auto;margin-top:0}
.sp-bubble{position:absolute;right:calc(100% - 34px);top:6px;width:max-content;z-index:2;background:#fff;border:2px solid var(--k);border-radius:22px;padding:8px 16px;font-weight:800;font-size:15px;line-height:1.25;text-align:center;white-space:pre-line;transform:rotate(-3deg)}
.sp-bubble::after{content:"";position:absolute;right:-9px;bottom:10px;width:14px;height:14px;background:#fff;border-right:2px solid var(--k);border-bottom:2px solid var(--k);transform:rotate(-35deg) skew(10deg)}
.sp-chips{display:flex;gap:20px;align-self:center;padding-bottom:16px}
.sp-chip{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;font-weight:700;text-align:center;min-width:64px}
.sp-chip i{width:52px;height:52px;border:2px solid var(--k);border-radius:50%;display:grid;place-items:center;background:#fff}
.sp-chip svg{width:25px;height:25px;fill:none;stroke:var(--k);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-plans{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;position:relative;z-index:1;margin-top:0;align-items:stretch}
.sp-plan{position:relative;display:flex;flex-direction:column;background:#fffaf0;border:2px solid var(--k);border-radius:16px;padding:20px 18px 16px;box-shadow:3px 3px 0 var(--k)}
.sp-plan h3{margin:0;font-size:20px;line-height:1.25}
.sp-price{font-size:clamp(34px,3.9vw,46px);font-weight:900;color:var(--r);line-height:1.15;margin:2px 0 4px;letter-spacing:-1px}
.sp-price s{font-size:.45em;color:#888;font-weight:700;letter-spacing:0;margin-right:4px}
.sp-unit{margin:0;font-size:13px;font-weight:600}
.sp-feat{margin:3px 0 14px;font-size:12.5px;color:#666;line-height:1.55;flex:1}
.sp-btn{display:block;text-align:center;width:100%;padding:9px 10px;font-size:14px;border-radius:12px;box-shadow:2px 2px 0 var(--k)}
.sp-hot{position:absolute;left:14px;top:-14px;background:var(--r);color:#fff;font-size:12px;font-weight:800;padding:2px 12px;border-radius:8px;border:2px solid var(--k)}
.sp-plan.hot{background:#fff6cf}
.sp-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.sp-ex{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i t go" "i d go";gap:1px 12px;align-items:center;border:2px solid var(--k);border-radius:14px;padding:11px 14px;background:#fff}
.sp-ex:hover{background:#fffaf0;transform:translate(1px,1px)}
.sp-ex-i{grid-area:i;width:46px;height:46px;border:2px solid var(--k);border-radius:12px;display:grid;place-items:center;font-size:24px;background:#fffaf0}
.sp-ex-t{grid-area:t;display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap}
.sp-ex-t b{font-size:14.5px}
.sp-ex-t em{font-style:normal;font-weight:800;font-size:13.5px}
.sp-ex-d{grid-area:d;font-size:12px;color:#666;line-height:1.45}
.sp-go{grid-area:go;width:34px;height:34px;border:2px solid var(--k);border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px}
.hero .intro p[data-k="hero.tags"]{margin-top:16px}
.sp-plan[hidden],.sp-ex[hidden]{display:none}
.sp-hot:empty{display:none}
.sp-plan.sp-off,.sp-ex.sp-off{opacity:.35;border-style:dashed}
body.edit-mode .sp-hot:empty{display:block;min-width:64px;min-height:22px;background:#f3b3b6}
body.edit-mode .sp-feat:empty,body.edit-mode .sp-unit:empty{min-height:18px;background:rgba(0,0,0,.05)}
@media(max-width:1000px){.sp-chips{display:none}.sp-head{grid-template-columns:1fr auto}}
@media(max-width:900px){.sp-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.sp-plan:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}.sp-extra{grid-template-columns:1fr}}
@media(max-width:570px){.sp-box{padding:20px 14px 16px}.sp-head{grid-template-columns:1fr}.sp-peek{display:none}.sp-title p{margin-bottom:14px}.sp-plans{gap:18px 10px}.sp-plan{padding:18px 12px 12px}.sp-price{font-size:32px}}

/* portfolio */
.portfolio-filters{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 18px}
.filter-btn{font:700 13px Kanit,Arial,sans-serif;padding:8px 16px;background:white;border:2px solid var(--k);border-radius:24px;cursor:pointer;color:var(--k)}
.filter-btn.active{background:var(--y);box-shadow:2px 2px var(--k)}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portfolio-card{background:white;border:2px solid var(--k);border-radius:17px;overflow:hidden;box-shadow:4px 4px var(--k)}
.portfolio-art{min-height:205px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background-size:cover;background-position:center}
.portfolio-art.has-img{min-height:240px}
.portfolio-art small{font-weight:800;font-size:11px;letter-spacing:1px}
.portfolio-art strong{font-size:clamp(33px,4.2vw,60px);font-weight:900;line-height:.95;letter-spacing:-2px;white-space:pre-line}
.portfolio-art span{font-size:11px;font-weight:600}
.portfolio-info{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.portfolio-info a{font-size:12px;font-weight:800;text-decoration:underline}
.portfolio-bottom{display:flex;align-items:center;gap:18px;margin-top:24px}
.portfolio-bottom span{font-size:12px;color:#666}
.empty{grid-column:1/-1;text-align:center;color:#777;padding:40px 0}
.works-teaser .gallery{margin-top:6px}

/* tracking */
.tracking{display:grid;grid-template-columns:1fr 1.2fr;gap:25px;align-items:start}
.track-panel{background:white;border:2px solid var(--k);border-radius:19px;padding:25px;box-shadow:5px 5px 0 var(--k)}
.track-panel h3{margin:0 0 4px}
.field{width:100%;padding:13px;border:2px solid var(--k);border-radius:10px;font:inherit;margin:7px 0 12px}
.muted{color:#777;font-size:13px}
.result{margin-top:18px;padding:16px;border-radius:12px;background:#fff7dc}
.hidden{display:none!important}
.service-note{font-size:12px;color:#777;margin-top:8px}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:20px;border:2px solid var(--k);background:#fff;margin:2px 4px 2px 0}
.badge.ok{background:#c5f0d8}.badge.warn{background:#ffe9a8}.badge.bad{background:#ffc9cc}
.progress{height:14px;border:2px solid var(--k);border-radius:20px;background:#fff;overflow:hidden;margin:12px 0}
.progress i{display:block;height:100%;background:var(--y);border-right:2px solid var(--k)}
.status-list{padding-left:22px;line-height:2.3;margin:8px 0}
.status-list li.done{color:#16804b}
.status-list li.current{font-weight:800;color:#b06a00}
.status-list li.todo{color:#999}
.note-box{background:#fff;border:2px dashed var(--k);border-radius:12px;padding:10px 14px;margin:12px 0;font-size:14px;line-height:1.7}
.timeline{margin:10px 0 0;padding:0;list-style:none;border-left:3px solid var(--k);margin-left:6px}
.timeline li{padding:0 0 12px 16px;position:relative;font-size:14px}
.timeline li::before{content:"";position:absolute;left:-9px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--y);border:2px solid var(--k)}
.timeline small{display:block;color:#888;font-size:12px}
.banner{padding:10px 14px;border-radius:10px;border:2px solid var(--k);font-weight:700;margin:10px 0}
.banner.hold{background:#ffe9a8}.banner.cancelled{background:#ffc9cc}.banner.done{background:#c5f0d8}

/* โหมดแก้ไขในหลังบ้าน */
body.edit-mode [data-k]{outline:2px dashed transparent;outline-offset:3px;cursor:text;transition:outline-color .15s}
body.edit-mode [data-k]:hover{outline-color:#3b82f6}
body.edit-mode [data-k]:focus{outline:2px solid #3b82f6;background:rgba(59,130,246,.08)}
body.edit-mode a,body.edit-mode button{cursor:default}

@media(max-width:900px){.service-four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
  nav .links{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;flex-direction:column;gap:0;background:#fff;border:2px solid var(--k);border-radius:14px;box-shadow:4px 4px 0 var(--k);padding:6px 16px}
  nav .links.open{display:flex}
  nav .links a{padding:10px 0;border-bottom:1px solid #eee}
  .burger{display:block;margin-left:auto}
  nav>.btn{display:none}
  .hero{grid-template-columns:1fr}
  .intro{padding:30px 22px}
  .heroart{border-left:0;border-top:3px solid var(--k);min-height:250px}
  .heroart .mascot{width:300px}
  .cards,.prices{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .portfolio-art{min-height:145px;padding:12px}
  .portfolio-art.has-img{min-height:170px}
  .portfolio-art strong{font-size:34px}
  .portfolio-info{padding:10px;flex-wrap:wrap}
  .portfolio-bottom{flex-wrap:wrap}
}
@media(max-width:650px){.service-four,.tracking{grid-template-columns:1fr}}
@media(max-width:570px){
  .cards,.prices{grid-template-columns:1fr}
  .heading{display:block}
  .intro h1{font-size:55px}
  .contact{grid-template-columns:1fr}
  .contact h2{font-size:33px}
  .contact .mascot{margin:auto}
  .wrap{padding:0 15px}
}

/* ภาพที่เปลี่ยนเอง */
.mascot.custom{background-repeat:no-repeat;background-position:center}
.heroart .mascot.custom{width:100%;height:100%;min-height:310px;aspect-ratio:auto}
.step .mascot.custom{border-radius:10px}
body.edit-mode [data-img]{cursor:pointer;outline:2px dashed transparent;outline-offset:-2px;transition:outline-color .15s}
body.edit-mode [data-img]:hover{outline-color:#3b82f6}

/* ส่วนเสริม: สไลด์ / วิดีโอ */
.blk .heading{margin-bottom:18px}
.slider{position:relative;border:3px solid var(--k);border-radius:20px;overflow:hidden;background:#fff;box-shadow:6px 6px 0 var(--k);user-select:none;touch-action:pan-y}
.slider .track{display:flex;transition:transform .5s ease;will-change:transform}
.slider .slide{flex:0 0 100%;margin:0;position:relative;aspect-ratio:var(--ratio,16/9);background:#eee}
.slider .slide img{width:100%;height:100%;object-fit:var(--fit,cover);display:block;pointer-events:none}
.slider .slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.slider .nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:2px solid var(--k);background:var(--y);color:var(--k);font:800 18px Kanit;cursor:pointer;box-shadow:2px 2px 0 var(--k)}
.slider .nav.prev{left:12px}.slider .nav.next{right:12px}
.slider .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px}
.slider .dots button{width:11px;height:11px;border-radius:50%;border:2px solid var(--k);background:#fff;padding:0;cursor:pointer}
.slider .dots button.on{background:var(--y);transform:scale(1.25)}
.slider.single .nav,.slider.single .dots{display:none}
.video-box{border:3px solid var(--k);border-radius:20px;overflow:hidden;background:#000;box-shadow:6px 6px 0 var(--k);aspect-ratio:16/9}
.video-box iframe,.video-box video{width:100%;height:100%;border:0;display:block;background:#000}
.blk-empty{border:3px dashed var(--k);border-radius:20px;padding:40px;text-align:center;color:#777}
@media(max-width:570px){.slider .nav{width:34px;height:34px}}

/* ผลงานหลายขนาด: แสดงตามสัดส่วนจริง (จัตุรัส 1 ช่อง / ปก-แบนเนอร์กว้าง 2 ช่อง / สตอรี่แนวตั้ง 1 ช่อง) */
.gallery{align-items:start;grid-auto-flow:row dense}
.gallery .portfolio-card.f-wide,.gallery .portfolio-card.f-rich,.gallery .portfolio-card.f-richhalf{grid-column:span 2}
.portfolio-art.f-rich{aspect-ratio:2500/1686;min-height:0}
.portfolio-art.f-richhalf{aspect-ratio:2500/843;min-height:0}
.portfolio-art.f-sq{aspect-ratio:1/1;min-height:0}
.portfolio-art.f-wide{aspect-ratio:851/315;min-height:0}
.portfolio-art.f-tall{aspect-ratio:9/16;min-height:0}
.portfolio-art.f-rich strong,.portfolio-art.f-richhalf strong,.portfolio-art.f-wide strong{font-size:clamp(24px,3.4vw,46px)}
.portfolio-art.f-wide{padding:14px 18px}
.portfolio-info>span{display:flex;flex-direction:column;min-width:0}
.fmt-tag{font-size:11px;font-weight:600;color:#777}
.filter-sep{width:2px;background:var(--k);opacity:.25;margin:0 4px;border-radius:2px}
.portfolio-card{cursor:default}.portfolio-card:has(.has-img){cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px}
.lb figure{margin:0;max-width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;gap:10px}
.lb img{max-width:100%;max-height:82vh;border-radius:10px;background:#fff}
.lb figcaption{color:#fff;font-size:14px}.lb figcaption span{opacity:.6;margin-left:8px}
.lb-x,.lb-n{position:absolute;border:2px solid #fff;background:rgba(0,0,0,.4);color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;line-height:1}
.lb-x{top:14px;right:14px}.lb-n{top:50%;transform:translateY(-50%);font-size:30px}.lb-p{left:12px}.lb-nx{right:12px}
@media(max-width:700px){.portfolio-art.f-sq,.portfolio-art.f-wide,.portfolio-art.f-tall,.portfolio-art.f-rich,.portfolio-art.f-richhalf{min-height:0!important}.portfolio-art.f-wide{padding:10px 12px}.portfolio-art.f-wide strong{font-size:22px}}

/* โปรโมชั่น + หน้าบริการและราคา */
.promo-bar{display:block;background:var(--r);color:#fff;text-align:center;padding:8px 14px;font-size:13px;font-weight:600}
.promo-bar small{opacity:.9;font-weight:500}.promo-bar u{margin-left:6px;font-weight:700}
.pbadge{display:inline-block;background:var(--r);color:#fff;border:2px solid var(--k);border-radius:20px;padding:0 10px;font-size:12px;font-weight:800;line-height:20px;vertical-align:middle}
.pbadge.big{font-size:14px;line-height:28px;padding:0 16px;white-space:nowrap}
s,.was{color:#888;text-decoration:line-through;font-weight:500}
.svc-price s{font-size:.8em}
.pp-h{font-size:clamp(26px,3.6vw,38px);margin:0 0 18px;letter-spacing:-1px}
.pp-sub{font-size:20px;margin:26px 0 12px}.pp-sub:first-child{margin-top:0}
.pp-promo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--y);border:2px solid var(--k);border-radius:18px;box-shadow:5px 5px var(--k);padding:18px 22px;margin:8px 0 6px}
.pp-promo h3{margin:0 0 2px;font-size:22px}.pp-promo p{margin:0}.pp-promo>div:nth-child(2){flex:1;min-width:200px}
.pp-until{text-align:center;font-size:12px;border-left:2px dashed var(--k);padding-left:18px}.pp-until b{display:block;font-size:16px}
.svc-list{display:grid;gap:20px}
.svc-detail{background:#fff;border:2px solid var(--k);border-radius:20px;box-shadow:5px 5px var(--k);padding:22px}
.sd-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.sd-head .svc-icon{flex:none}.sd-t{flex:1;min-width:220px}.sd-t h3{margin:0 0 4px;font-size:24px}.sd-t p{margin:0;color:#555}
.sd-price{text-align:right;min-width:150px}.sd-price>small{display:block;font-size:12px;color:#777}
.pricebox b{font-size:30px;letter-spacing:-1px}.pricebox small{display:block;font-size:12px;color:#777}
.pricebox.promo b{color:var(--r)}.pricebox.promo s{font-size:16px}
.pr-note{font-size:12px;color:#555;margin-top:2px}
.sd-meta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.sd-meta>span{background:#fff7d6;border:2px solid var(--k);border-radius:30px;padding:3px 14px;font-size:13px}
.sd-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}
.sd-cols h4,.sd-steps h4{margin:0 0 6px;font-size:15px}
.sd-cols ul,.sd-steps ol{margin:0;padding:0;list-style:none}
.sd-cols li{padding:4px 0 4px 26px;position:relative;font-size:14px}
.sd-cols .ok li::before{content:"✓";position:absolute;left:0;color:#16804b;font-weight:800}
.sd-cols .no li::before{content:"✗";position:absolute;left:0;color:#c0262d;font-weight:800}
.sd-steps ol{display:flex;gap:8px;flex-wrap:wrap;counter-reset:n}
.sd-steps li{counter-increment:n;background:#f6f1e1;border-radius:30px;padding:3px 14px;font-size:13px}
.sd-steps li::before{content:counter(n) ". ";font-weight:800}
.svc-detail>.btn{margin-top:14px}
.pp-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:2px solid var(--k);border-radius:18px;padding:22px;box-shadow:5px 5px var(--k)}
.pp-bottom h3{margin:0 0 4px;font-size:22px}.pp-bottom p{margin:0;color:#555}
@media(max-width:700px){.sd-cols{grid-template-columns:1fr}.sd-price{text-align:left}.pp-until{border:0;padding:0}}

/* เลือกประเภทงาน */
.pp-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.pick{position:relative;text-align:left;font:inherit;background:#fff;border:2px solid var(--k);border-radius:18px;box-shadow:4px 4px var(--k);padding:16px 16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:var(--k);transition:transform .12s}
.pick:hover{transform:translate(-1px,-1px)}
.pick .pk-i{font-size:30px;line-height:1}
.pick b{font-size:17px}.pick small{font-size:12px;color:#666;line-height:1.35}
.pick em{font-style:normal;font-weight:800;font-size:14px;margin-top:6px}
.pick .pbadge{position:absolute;top:10px;right:10px}
.pick.on{background:var(--y);box-shadow:2px 2px var(--k);transform:translate(2px,2px)}.pick.on small{color:#444}
.pp-detail{scroll-margin-top:20px}
.pp-hint{border:2px dashed var(--k);border-radius:18px;padding:26px;text-align:center;font-weight:600;background:#fff}
.pp-ghead{display:flex;gap:14px;align-items:center;margin-bottom:6px}.pp-ghead .pk-i{font-size:42px}.pp-ghead h3{margin:0;font-size:28px}.pp-ghead p{margin:0;color:#555}
.pp-sub{font-size:19px;margin:22px 0 12px}
.pp-plans{margin-top:10px}
.pp-plans .prices{margin-bottom:6px}

/* เกี่ยวกับเรา */
.ab-story{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:30px;align-items:center;background:#fff;border:2px solid var(--k);border-radius:20px;padding:26px;box-shadow:6px 6px var(--k)}
.ab-pic{text-align:center}.ab-pic p{font-weight:700;margin:10px 0 0}
.ab-text h3{font-size:26px;margin:0 0 10px}.ab-text>p{color:#444;line-height:1.8;margin:0 0 18px}
.ab-nums{display:flex;gap:12px;flex-wrap:wrap}
.ab-num{flex:1;min-width:120px;background:var(--y);border:2px solid var(--k);border-radius:14px;padding:12px 14px}
.ab-num b{display:block;font-size:26px;line-height:1.2}.ab-num span{font-size:13px}
.ab-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab-val{background:#fff;border:2px solid var(--k);border-radius:18px;padding:22px;box-shadow:5px 5px var(--k)}
.ab-val h3{margin:8px 0 6px;font-size:20px}.ab-val p{margin:0;color:#555;line-height:1.7}.ab-i{font-size:34px}
@media(max-width:760px){.ab-story{grid-template-columns:1fr}.ab-vals{grid-template-columns:1fr}}
.ab-vals{margin-top:6px}.sec .pp-h{margin-top:30px}
.ab-pic .mascot{aspect-ratio:262/300;max-width:260px!important}
#filters .frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}#filters .flabel{font-size:12px;font-weight:800;opacity:.6;min-width:78px}
#filters.portfolio-filters{display:block}

/* ส่วนที่ซ่อนไว้ด้วยแอตทริบิวต์ hidden (แท็บราคา/หมวดบริการที่ยังไม่ได้เลือก) ต้องซ่อนจริงเสมอ แม้คลาสนั้นกำหนด display ไว้ */
[hidden]{display:none!important}

.sp-old{font-size:15px;font-weight:700;color:#888;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--r);line-height:1.2;margin-top:4px}
.sp-old:empty{display:none}
.sp-old:not(:empty)+.sp-price{margin-top:0}
.sp-ex-old{font-size:12.5px;color:#888;font-weight:700;text-decoration-color:var(--r)}
.sp-ex-old:empty{display:none}
body.edit-mode .sp-old:empty,body.edit-mode .sp-ex-old:empty{display:block;min-width:60px;min-height:16px;background:rgba(0,0,0,.05)}