:root{
  --ink:#060B1A; --navy-900:#0A1533; --navy-800:#0E1F4A; --navy-700:#14306E;
  --blue-600:#1745C4; --blue-500:#2E63F0; --blue-300:#8FB0FF;
  --red-700:#B0161F; --red-600:#D81E28; --red-500:#F0323C;
  --paper:#fff; --paper-2:#F4F7FC; --paper-3:#EAEFF8;
  --line:#DFE5F1; --line-strong:#C7D2E6;
  --text:#0B1327; --muted:#5C6884; --muted-2:#8893AB;
  --ok:#12805A;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(11,19,39,.05),0 4px 14px rgba(11,19,39,.06);
  --sh-2:0 2px 6px rgba(11,19,39,.06),0 20px 46px rgba(11,19,39,.13);
  --maxw:1220px; --gut:clamp(16px,3.5vw,36px);
  --f-d:'Anuphan',system-ui,sans-serif;
  --f-b:'IBM Plex Sans Thai',system-ui,sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,monospace;
  --logo:url("logo.webp");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-b);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:700;line-height:1.4;margin:0;letter-spacing:-.01em}
p{margin:0} ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:4px}
.dark :focus-visible{outline-color:#9BBBFF}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--red-600);color:#fff;padding:12px 20px;font-weight:600}
.skip:focus{left:0;top:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section[id]{scroll-margin-top:126px}

.eyebrow{font-family:var(--f-m);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);display:inline-flex;align-items:center;gap:10px;line-height:1}
.eyebrow::before{content:"";width:24px;height:2px;background:linear-gradient(90deg,var(--red-600),var(--blue-500))}
.dark .eyebrow{color:var(--blue-300)}
.h-sec{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.02em}
.lead{color:var(--muted);max-width:62ch}
.dark .lead{color:#A9B6D4}
.sec{padding-block:clamp(46px,6.5vw,86px)}
.sec-head{margin-bottom:clamp(22px,3vw,36px)}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{margin-bottom:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:999px;border:1px solid transparent;font-family:var(--f-d);font-weight:600;font-size:.98rem;line-height:1;cursor:pointer;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:linear-gradient(180deg,var(--red-500),var(--red-700));color:#fff;box-shadow:0 8px 20px rgba(216,30,40,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(216,30,40,.4)}
.btn-blue{background:linear-gradient(180deg,var(--blue-500),var(--blue-600));color:#fff;box-shadow:0 8px 20px rgba(23,69,196,.26)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(23,69,196,.36)}
.btn-ghost{background:transparent;border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--paper-2);border-color:var(--navy-800)}
.dark .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
.dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:16px 28px;font-size:1.04rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- TOP + HEADER ---------- */
.topbar{background:var(--ink);color:#94A5CC;font-size:.8rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px}
.topbar ul{display:flex;gap:24px}
.topbar li{display:flex;align-items:center;gap:7px}
.topbar svg{width:13px;height:13px;opacity:.7}
.tag-open{display:inline-flex;align-items:center;gap:7px;color:#8FE3B0;font-family:var(--f-m);font-size:.71rem;letter-spacing:.06em}
.dot{width:7px;height:7px;border-radius:50%;background:#3ED37F;box-shadow:0 0 0 3px rgba(62,211,127,.2)}
@media (max-width:900px){.topbar{display:none}}

.header{position:sticky;top:0;z-index:70;background:rgba(10,21,51,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
.hrow{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.mark{display:block;background:var(--logo) center/contain no-repeat}
.mark-h{width:80px;height:45px}
.brand-txt{display:none}
@media (min-width:1100px){.brand-txt{display:block;line-height:1.25}
.brand-txt b{font-family:var(--f-d);font-size:1rem;color:#fff;display:block;white-space:nowrap}
.brand-txt span{font-family:var(--f-m);font-size:.63rem;letter-spacing:.18em;color:var(--blue-300)}}

.search{flex:1 1 320px;max-width:430px;position:relative}
.search input{width:100%;padding:12px 16px 12px 42px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:.94rem}
.search input::placeholder{color:#8B9AC0}
.search input:focus{background:rgba(255,255,255,.14);border-color:var(--blue-300);outline:none}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#8B9AC0}
@media (max-width:860px){.search{display:none}}

.call-chip{display:flex;align-items:center;gap:10px;color:#fff}
.call-chip .ico{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(180deg,var(--red-500),var(--red-700));box-shadow:0 6px 16px rgba(216,30,40,.4)}
.call-chip .ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(240,50,60,.8);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.75);opacity:0}}
@media (prefers-reduced-motion:reduce){.call-chip .ico::after{animation:none;opacity:0}}
.call-chip svg{width:17px;height:17px}
.call-chip small{display:block;font-size:.66rem;color:#93A3C7;font-family:var(--f-m);letter-spacing:.08em}
.call-chip b{font-family:var(--f-d);font-size:1.04rem;white-space:nowrap}
@media (max-width:620px){.call-chip .n{display:none}}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:1024px){.burger{display:grid}}

/* brand nav bar */
.navbar{position:sticky;top:74px;z-index:68;background:var(--navy-800);border-bottom:1px solid rgba(255,255,255,.08)}
.navbar .wrap{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none}
.navbar .wrap::-webkit-scrollbar{display:none}
.navbar a{padding:12px 15px;font-size:.92rem;font-weight:500;color:#C3D0EE;white-space:nowrap;border-bottom:2px solid transparent;transition:color .16s,border-color .16s}
.navbar a:hover{color:#fff;border-color:var(--red-500)}
@media (max-width:1024px){.navbar{display:none}}

.mmenu{display:none;background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:74px;z-index:69}
.mmenu.open{display:block}
.mmenu a{display:block;padding:13px var(--gut);color:#D6DFF5;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}

/* ---------- HERO BANNER ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(760px 420px at 76% 22%,rgba(46,99,240,.34),transparent 62%),
  radial-gradient(560px 340px at 10% 90%,rgba(216,30,40,.26),transparent 60%),
  linear-gradient(172deg,#0A1533,#070D1F 62%,#050915)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 55% 45%,#000 18%,transparent 76%);-webkit-mask-image:radial-gradient(circle at 55% 45%,#000 18%,transparent 76%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,54px);align-items:center;padding-block:clamp(38px,5vw,64px)}
@media (max-width:940px){.hero-in{grid-template-columns:1fr;padding-block:34px 44px}}
.hero h1{font-size:clamp(1.85rem,4.4vw,3.1rem);line-height:1.28;letter-spacing:-.03em;margin:16px 0 14px}
.hero h1 .hl{display:block;background:linear-gradient(96deg,#FF4A54,#FF7B82 38%,#AFCBFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-visual{position:relative;display:grid;place-items:center}
.hero-glow{position:absolute;width:min(100%,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,99,240,.4),rgba(216,30,40,.16) 46%,transparent 68%);filter:blur(12px);animation:pl 6s ease-in-out infinite}
@keyframes pl{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.hero-logo{position:relative;width:min(100%,440px);aspect-ratio:1426/797;background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));animation:logoIn 1s cubic-bezier(.2,.75,.25,1) both .15s,float 7s ease-in-out infinite 1.2s}
@keyframes logoIn{from{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* --- circuit traces: กระแสไฟวิ่งเข้าหาโลโก้ --- */
.circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.circuit path{fill:none;stroke-width:1.4;stroke-linecap:round}
.circuit .trace{stroke:rgba(150,180,255,.16)}
.circuit .node{fill:rgba(150,180,255,.3)}
.circuit .pulse{stroke-width:2.2;stroke-dasharray:46 900;stroke-dashoffset:946;animation:dash 5.5s linear infinite}
.circuit .pulse.b{stroke:#8FB0FF;filter:drop-shadow(0 0 6px rgba(143,176,255,.9))}
.circuit .pulse.r{stroke:#FF6A72;filter:drop-shadow(0 0 6px rgba(255,106,114,.9))}
@keyframes dash{to{stroke-dashoffset:0}}

/* --- เกจไฟ: บอกสถานะ "ไฟเต็ม พร้อมส่ง" --- */
.charge{position:relative;margin-top:14px;width:min(100%,420px);display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.charge .bolt{width:20px;height:20px;flex:none;color:#FFCF3D;animation:blink 3.4s ease-in-out infinite}
@keyframes blink{0%,86%,100%{opacity:1}90%{opacity:.25}94%{opacity:1}}
.cells{display:flex;gap:4px;flex:1}
.cells i{display:block;flex:1;height:12px;border-radius:3px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.cells i::after{content:"";position:absolute;inset:0;border-radius:3px;opacity:0;
  background:linear-gradient(180deg,#FF5A62,#D81E28);box-shadow:0 0 10px rgba(255,90,98,.7);animation:cellOn 4.6s linear infinite var(--d,0s)}
.cells i:nth-child(n+7)::after{background:linear-gradient(180deg,#5E8CFF,#1745C4);box-shadow:0 0 10px rgba(94,140,255,.7)}
@keyframes cellOn{0%,4%{opacity:0}12%,80%{opacity:1}92%,100%{opacity:0}}
.charge .lbl{font-family:var(--f-m);font-size:.63rem;letter-spacing:.16em;color:#9FB3DC;white-space:nowrap}

/* --- ลำดับการเข้าของเนื้อหา --- */
.anim{opacity:0;transform:translateY(16px);animation:rise .75s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hero-glow,.hero-logo,.charge .bolt{animation:none}
  .circuit .pulse{animation:none;opacity:0}
  .cells i::after{animation:none;opacity:1}
  .anim{animation:none;opacity:1;transform:none}
}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-badges li{font-size:.84rem;color:#CBD6F0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px}

/* ---------- VEHICLE TILES ---------- */
.veh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:940px){.veh-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.veh-grid{grid-template-columns:repeat(2,1fr)}}
.veh{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 14px;text-align:center;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;font-family:var(--f-d);font-weight:600;font-size:.95rem}
.veh:hover{border-color:var(--blue-500);box-shadow:var(--sh-2);transform:translateY(-3px)}
.veh svg{width:34px;height:34px;margin:0 auto 10px;color:var(--navy-800);stroke-width:1.6}
.veh span{display:block;font-family:var(--f-b);font-weight:400;font-size:.79rem;color:var(--muted);line-height:1.5;margin-top:3px}
@media (prefers-reduced-motion:reduce){.veh:hover{transform:none}}

/* ---------- SHOP ---------- */
.shop{background:var(--paper-2);border-block:1px solid var(--line)}
.notice{display:flex;gap:12px;align-items:flex-start;background:#FFF7E8;border:1px solid #F2DFB4;color:#7A5A12;border-radius:var(--r-md);padding:14px 18px;font-size:.87rem;line-height:1.65;margin-bottom:22px}
.notice svg{width:18px;height:18px;flex:none;margin-top:3px}

.toolbar{position:sticky;top:119px;z-index:40;background:var(--paper-2);padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:24px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line-strong);background:var(--paper);border-radius:999px;padding:9px 17px;font-family:var(--f-d);font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:.16s}
.chip:hover{border-color:var(--navy-800)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border-color:transparent;color:#fff}
.tb-row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tb-row select{padding:10px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);font-size:.9rem}
.count{margin-left:auto;font-family:var(--f-m);font-size:.82rem;color:var(--muted)}
.msearch{display:none;flex:1 1 200px;position:relative}
.msearch input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--line-strong);border-radius:999px;font-size:.9rem}
.msearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2)}
@media (max-width:860px){.msearch{display:block}.count{width:100%;margin-left:0}}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-media{padding:16px 10px 10px}
  .card-media svg{width:96px}
  .tag{font-size:.6rem;padding:3px 7px}
  .card-body{padding:13px}
  .card h3{font-size:.98rem}
  .card .for{font-size:.76rem;min-height:3.4em;line-height:1.5}
  .specs{gap:4px;margin:10px 0}
  .specs li{font-size:.63rem;padding:3px 6px}
  .price .now{font-size:1.15rem}
  .price .was{font-size:.75rem}
  .price .unit{display:none}
  .card-act{flex-direction:column;gap:6px}
  .card-act .btn{padding:10px;font-size:.82rem}
}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-4px);border-color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card-media{position:relative;background:linear-gradient(160deg,#F7F9FE,#E9EFFA);padding:22px 18px 14px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.card-media svg{width:132px;height:auto}
.tagset{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tag{font-family:var(--f-m);font-size:.66rem;font-weight:600;letter-spacing:.06em;padding:4px 9px;border-radius:6px;color:#fff;background:var(--navy-800)}
.tag.hot{background:linear-gradient(180deg,var(--red-500),var(--red-700))}
.tag.free{background:var(--ok)}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card .bd{font-family:var(--f-m);font-size:.72rem;letter-spacing:.1em;color:var(--blue-600);font-weight:600}
.card h3{font-size:1.08rem;margin:6px 0 4px;letter-spacing:-.01em}
.card .for{font-size:.83rem;color:var(--muted);line-height:1.6;min-height:2.7em}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.specs li{font-family:var(--f-m);font-size:.7rem;color:var(--navy-800);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.price{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-strong);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price .now{font-family:var(--f-d);font-weight:700;font-size:1.4rem;color:var(--red-600);letter-spacing:-.02em}
.price .was{font-size:.84rem;color:var(--muted-2);text-decoration:line-through}
.price .unit{font-size:.76rem;color:var(--muted)}
.card-act{display:flex;gap:8px;margin-top:14px}
.card-act .btn{flex:1;padding:11px 12px;font-size:.88rem}

.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}
.empty b{display:block;font-family:var(--f-d);font-size:1.15rem;color:var(--text);margin-bottom:6px}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(6,11,26,.62);backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal-box{background:var(--paper);border-radius:var(--r-xl);max-width:660px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sh-2);position:relative}
.modal-hd{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:26px;border-bottom:1px solid var(--line);align-items:center}
@media (max-width:560px){.modal-hd{grid-template-columns:1fr;text-align:center}}
.modal-hd .pic{background:linear-gradient(160deg,#F7F9FE,#E9EFFA);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:grid;place-items:center}
.modal-bd{padding:26px}
.modal h3{font-size:1.35rem;margin:6px 0 8px}
.spec-table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:.92rem}
.spec-table th,.spec-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.spec-table th{color:var(--muted);font-weight:500;width:42%}
.spec-table td{font-family:var(--f-m);font-size:.88rem}
.modal-act{display:flex;gap:10px;flex-wrap:wrap}
.modal-act .btn{flex:1 1 180px}
.mclose{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center}
.mclose svg{width:16px;height:16px}

/* ---------- SERVICE BAND ---------- */
.band{background:linear-gradient(160deg,var(--navy-900),var(--ink));color:#fff}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.band-grid{grid-template-columns:1fr}}
.band-c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:26px}
.band-c .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(160deg,var(--blue-500),var(--blue-600))}
.band-c:nth-child(2) .ic{background:linear-gradient(160deg,var(--red-500),var(--red-700))}
.band-c svg{width:22px;height:22px}
.band-c h3{font-size:1.1rem;margin-bottom:8px}
.band-c p{font-size:.92rem;color:#A9B6D4}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:26px 24px 26px 0}
.step+.step{padding-left:24px;border-left:1px solid var(--line)}
.step .n{font-family:var(--f-m);font-weight:600;font-size:.76rem;letter-spacing:.14em;color:var(--blue-600);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.step .n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}
.step h3{font-size:1.06rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--muted)}

/* ---------- CONTACT ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}}
.icard,.form{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);background:var(--paper);box-shadow:var(--sh-1)}
.ilist{display:grid;gap:18px;margin-top:20px}
.ilist li{display:flex;gap:14px}
.ilist .ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);color:var(--blue-600)}
.ilist svg{width:18px;height:18px}
.ilist b{display:block;font-family:var(--f-d);font-size:.83rem;color:var(--muted-2);font-weight:600}
.field{margin-bottom:15px}
.field label{display:block;font-size:.87rem;font-weight:500;margin-bottom:6px}
.req{color:var(--red-600)}
.field input,.field select,.field textarea{width:100%;padding:12px 15px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:.95rem;background:var(--paper)}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(46,99,240,.13);outline:none}
.field .err{display:none;color:var(--red-600);font-size:.82rem;margin-top:5px}
.field.invalid input{border-color:var(--red-600)}
.field.invalid .err{display:block}
.hint{font-size:.82rem;color:var(--muted);margin-top:12px}
.form-ok{display:none;padding:16px 18px;border-radius:var(--r-md);background:#EAF7EF;border:1px solid #B9E3C9;color:#1B6B3A;font-size:.93rem;margin-bottom:16px}
.form-ok.show{display:block}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:#93A2C6;padding-block:clamp(42px,5vw,66px) 0}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.mark-f{width:112px;height:63px;margin-bottom:16px}
.footer h4{color:#fff;font-size:.98rem;margin-bottom:14px}
.footer li{margin-bottom:9px;font-size:.9rem}
.footer p{font-size:.9rem;line-height:1.8}
.footer a:hover{color:#fff}
.fbot{margin-top:clamp(30px,4vw,48px);border-top:1px solid rgba(255,255,255,.1);padding-block:20px 24px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.82rem;color:#71809F}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,21,51,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.14)}
.callbar .btn{flex:1;padding:14px 12px}
@media (max-width:1024px){.toolbar{top:74px}}
@media (max-width:768px){.callbar{display:flex}body{padding-bottom:76px}}


/* ================= MULTI-PAGE ADDITIONS ================= */
.view{display:none}
.view.active{display:block}

/* inner page header */
.phead{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(680px 340px at 78% 20%,rgba(46,99,240,.32),transparent 62%),
  radial-gradient(480px 300px at 8% 92%,rgba(216,30,40,.24),transparent 60%),
  linear-gradient(170deg,#0A1533,#070D1F)}
.phead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(circle at 60% 40%,#000 15%,transparent 74%);-webkit-mask-image:radial-gradient(circle at 60% 40%,#000 15%,transparent 74%)}
.phead .wrap{position:relative;padding-block:clamp(30px,4.5vw,56px)}
.phead h1{font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.025em;margin:14px 0 12px}
.phead .lead{max-width:60ch}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.84rem;color:#93A5CC}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* prose */
.prose{max-width:70ch}
.prose h3{font-size:1.18rem;margin:26px 0 10px}
.prose p{color:var(--muted);margin-bottom:14px}
.prose ul{display:grid;gap:9px;margin:12px 0 18px}
.prose li{position:relative;padding-left:26px;color:var(--muted);font-size:.95rem}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red-600),var(--blue-500))}

/* split layout */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,52px);align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.aside-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--paper-2);position:sticky;top:130px}
@media (max-width:900px){.aside-card{position:static}}
.aside-card h3{font-size:1.1rem;margin-bottom:10px}
.aside-card p{font-size:.92rem;color:var(--muted);margin-bottom:16px}
.aside-card .btn{width:100%;margin-bottom:9px}

/* service detail rows */
.srow{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
@media (max-width:600px){.srow{grid-template-columns:1fr;gap:14px}}
.srow .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--blue-500),var(--blue-600));box-shadow:0 10px 20px rgba(23,69,196,.2)}
.srow:nth-child(even) .ic{background:linear-gradient(160deg,var(--red-500),var(--red-700));box-shadow:0 10px 20px rgba(216,30,40,.2)}
.srow svg{width:26px;height:26px}
.srow h3{font-size:1.2rem;margin-bottom:8px}
.srow p{color:var(--muted);font-size:.95rem}
.srow .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.srow .tags li{font-family:var(--f-m);font-size:.72rem;color:var(--navy-800);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:5px 10px}

/* coverage */
.cover{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cover li{font-size:.88rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 15px}

/* mini brand tiles */
.btiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:900px){.btiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.btiles{grid-template-columns:repeat(2,1fr)}}
.btile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 12px;text-align:center;cursor:pointer;transition:.18s;font-family:var(--f-d);font-weight:700;letter-spacing:.03em;color:var(--navy-800)}
.btile:hover{border-color:var(--blue-500);color:var(--blue-600);box-shadow:var(--sh-1);transform:translateY(-2px)}
.btile span{display:block;font-family:var(--f-b);font-weight:400;font-size:.74rem;color:var(--muted-2);margin-top:3px}
@media (prefers-reduced-motion:reduce){.btile:hover{transform:none}}

/* section link row */
.grid.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:400px){.grid.grid-2{grid-template-columns:1fr}}
/* ---- service icon tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:820px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{
  background:var(--paper);padding:26px 16px 22px;text-align:center;text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:14px;transition:background .2s;
}
.tile:hover{background:var(--paper-2)}
.tile .box{
  width:72px;height:72px;border-radius:18px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--blue-500),var(--blue-600));
  box-shadow:0 10px 22px rgba(23,69,196,.22);
  transition:transform .28s cubic-bezier(.2,.75,.25,1),background .28s,box-shadow .28s;
}
.tile:nth-child(4n+2) .box,.tile:nth-child(4n+3) .box{background:linear-gradient(160deg,var(--navy-700),var(--navy-900));box-shadow:0 10px 22px rgba(14,31,74,.24)}
.tile:hover .box{background:linear-gradient(160deg,var(--red-500),var(--red-700));box-shadow:0 14px 28px rgba(216,30,40,.34);transform:translateY(-5px) rotate(-3deg)}
.tile .box svg{width:34px;height:34px;stroke-width:1.6}
.tile b{font-family:var(--f-d);font-size:.95rem;font-weight:600;line-height:1.55;letter-spacing:-.01em}
.tile small{display:block;font-family:var(--f-b);font-weight:400;font-size:.79rem;color:var(--muted);margin-top:2px}
@media (max-width:560px){
  .tile{padding:20px 10px 18px;gap:11px}
  .tile .box{width:60px;height:60px;border-radius:15px}
  .tile .box svg{width:29px;height:29px}
  .tile b{font-size:.86rem}
  .tile small{font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){.tile:hover .box{transform:none}}

.seelink{display:flex;justify-content:center;margin-top:28px}
.navbar a.on{color:#fff;border-color:var(--red-500)}

/* ============================================================
   ส่วนที่เพิ่มมาพร้อมแคตตาล็อกสินค้าชุดใหญ่
   แถบหมวดสินค้า แถบยี่ห้อ ตัวเลขของร้าน และหน้าความรู้/เกี่ยวกับร้าน
   ============================================================ */

/* แถบกรองหมวดสินค้า — วางไว้เหนือแถบยี่ห้อ */
.catchips{margin-bottom:10px}
.catchips .chip .n{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--paper-3);color:var(--muted);font-family:var(--f-m);font-size:.72rem;font-weight:600}
.catchips .chip[aria-pressed="true"] .n{background:rgba(255,255,255,.18);color:#fff}

/* รหัส JIS เล็ก ๆ ต่อท้ายชื่อยี่ห้อบนการ์ด */
.card .bd .jis{font-style:normal;color:var(--muted-2);letter-spacing:.06em}

/* ราคาที่ยังไม่ได้ตั้ง ให้ดูเป็นข้อความ ไม่ใช่ตัวเลขแดงใหญ่ */
.price .now.ask{font-size:1.02rem;color:var(--navy-800)}

/* ปุ่ม "ดูรุ่นที่เหลือ" ท้ายหน้าหมวดแบตรถยนต์ */
.morebtn{display:flex;width:100%;justify-content:center;margin-top:22px}

/* แถบยี่ห้อบนหน้าแรก */
.bstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.bchip{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 10px;text-align:center;cursor:pointer;font-family:var(--f-m);font-weight:600;font-size:.92rem;letter-spacing:.04em;color:var(--navy-900);transition:border-color .16s,box-shadow .16s,transform .16s}
.bchip:hover{border-color:var(--blue-500);box-shadow:var(--sh-1);transform:translateY(-2px)}
.bchip span{display:block;font-family:var(--f-b);font-weight:400;font-size:.74rem;color:var(--muted);letter-spacing:0;margin-top:5px}
@media (max-width:900px){.bstrip{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.bstrip{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.bchip:hover{transform:none}}

/* ตัวเลขสรุปของร้าน */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.stat{background:linear-gradient(160deg,var(--navy-900),var(--ink));color:#fff;border-radius:var(--r-lg);padding:22px 18px;text-align:center}
.stat b{display:block;font-family:var(--f-d);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;font-size:.79rem;color:#A9B6D4;margin-top:7px;line-height:1.5}
@media (max-width:760px){.statbar{grid-template-columns:repeat(2,1fr)}}

/* ตารางเปรียบเทียบชนิดแบตในหน้าความรู้ */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.ktable{width:100%;border-collapse:collapse;min-width:680px;font-size:.9rem}
.ktable th,.ktable td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ktable thead th{background:var(--paper-2);font-family:var(--f-d);font-weight:600;font-size:.84rem;color:var(--navy-800);white-space:nowrap}
.ktable tbody th{font-family:var(--f-d);font-weight:600;color:var(--navy-900);white-space:nowrap}
.ktable tbody tr:last-child th,.ktable tbody tr:last-child td{border-bottom:0}
.ktable td{color:var(--muted);line-height:1.65}

/* การ์ดอธิบายรหัส JIS ทีละตัวอักษร */
.codegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.codecard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:22px}
.codecard .k{display:inline-grid;place-items:center;min-width:52px;height:52px;padding:0 12px;border-radius:14px;background:linear-gradient(160deg,var(--red-500),var(--red-700));font-family:var(--f-m);font-weight:600;font-size:1.25rem;color:#fff;margin-bottom:14px}
.codecard:nth-child(2) .k,.codecard:nth-child(4) .k{background:linear-gradient(160deg,var(--blue-500),var(--blue-600))}
.codecard h3{font-size:1.02rem;color:#fff;margin-bottom:7px}
.codecard p{font-size:.85rem;color:#A9B6D4;line-height:1.7}
@media (max-width:900px){.codegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.codegrid{grid-template-columns:1fr}}
.klead{margin-top:26px;max-width:820px}
.klead p{color:#A9B6D4;font-size:.93rem;line-height:1.8;margin-bottom:10px}
.klead b{color:#fff}

/* รายการอาการแบตเสื่อม */
.signlist{display:grid;gap:10px;margin-top:6px}
.signlist li{list-style:none;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--red-600);border-radius:var(--r-md);padding:15px 18px;font-size:.9rem;line-height:1.7;color:var(--muted)}
.signlist li b{display:block;color:var(--text);font-family:var(--f-d);font-weight:600;margin-bottom:2px}

/* คำถามที่พบบ่อย */
.faq{display:grid;gap:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq summary{cursor:pointer;padding:16px 46px 16px 20px;font-family:var(--f-d);font-weight:600;font-size:.98rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq details[open] summary{background:var(--paper-2)}
.faq p{padding:4px 20px 18px;font-size:.9rem;line-height:1.8;color:var(--muted)}

/* เหตุผลที่เลือกเรา ในหน้าเกี่ยวกับร้าน */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:24px}
.why h3{font-size:1.04rem;color:#fff;margin-bottom:8px}
.why p{font-size:.87rem;color:#A9B6D4;line-height:1.7}
@media (max-width:900px){.whygrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.whygrid{grid-template-columns:1fr}}

/* ============================================================
   เมนูดรอปดาวน์
   จอใหญ่ใช้เลื่อนเมาส์ไปวางหรือกด Tab แล้วเมนูย่อยจะเลื่อนลงมา
   จอเล็กเมนูย่อยอยู่ในเมนูแฮมเบอร์เกอร์ กดหัวข้อเพื่อกางออก
   ============================================================ */

/* เดิม wrap เป็น overflow-x:auto ซึ่งจะตัดเมนูย่อยที่ยื่นออกมา */
.navbar .wrap{overflow:visible}
.navbar{overflow:visible}

.navdd{position:relative}
.navdd > a{display:inline-flex;align-items:center;gap:5px}
.navdd > a .cav{width:13px;height:13px;opacity:.7;transition:transform .18s}
.navdd:hover > a .cav,.navdd:focus-within > a .cav{transform:rotate(180deg);opacity:1}

.dd{position:absolute;top:100%;left:0;min-width:268px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);padding:8px;z-index:80;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.navdd:hover > .dd,.navdd:focus-within > .dd{opacity:1;visibility:visible;transform:translateY(0)}
/* แถบใสคั่นระหว่างปุ่มเมนูกับกล่อง กันเมาส์หลุดระหว่างเลื่อนลง */
.dd::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}

.dd a{display:block;padding:9px 12px;border-radius:9px;border:0;color:var(--text);font-family:var(--f-d);font-weight:600;font-size:.88rem;white-space:nowrap;line-height:1.35}
.dd a span{display:block;font-family:var(--f-b);font-weight:400;font-size:.76rem;color:var(--muted);margin-top:2px;white-space:normal}
.dd a b{float:right;font-family:var(--f-m);font-size:.72rem;font-weight:600;color:var(--muted-2);margin-left:14px}
.dd a:hover,.dd a:focus-visible{background:var(--paper-2);color:var(--navy-900);border-color:transparent}
.dd .ddhead{padding:8px 12px 6px;font-family:var(--f-m);font-size:.7rem;letter-spacing:.12em;color:var(--muted-2);font-weight:600}
.dd .ddall{margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
.dd .ddall a{color:var(--blue-600)}
.dd-2col{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.dd-2col .ddall{grid-column:1/-1}

/* เมนูย่อยบนจอเล็ก */
.mmenu details > summary{display:block;padding:13px var(--gut);color:#D6DFF5;font-weight:500;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;position:relative;list-style:none}
.mmenu details > summary::-webkit-details-marker{display:none}
.mmenu details > summary::after{content:"";position:absolute;right:var(--gut);top:50%;width:8px;height:8px;border-right:2px solid #8FA3CC;border-bottom:2px solid #8FA3CC;transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.mmenu details[open] > summary::after{transform:translateY(-25%) rotate(-135deg)}
.mmenu details[open] > summary{color:#fff;background:rgba(255,255,255,.04)}
.mmenu .msub{background:rgba(0,0,0,.22)}
.mmenu .msub a{padding-left:calc(var(--gut) + 16px);font-size:.9rem;color:#B7C6E6}
.mmenu .msub a b{float:right;font-family:var(--f-m);font-size:.74rem;color:#7D8FB5;font-weight:600}

/* ============================================================
   ธีมมืด
   บล็อกนี้อยู่ท้ายไฟล์และทับค่าที่ประกาศไว้ข้างบน
   อยากกลับไปใช้ธีมสว่าง ลบทั้งบล็อกนี้ทิ้งได้เลย ส่วนอื่นไม่ต้องแตะ
   ============================================================ */

:root{
  color-scheme:dark;

  --ink:#04070F;          /* ดำอมน้ำเงิน ใช้เป็นแถบเข้มสุด */
  --navy-900:#080D18;     /* พื้นหลังหน้าเว็บ */
  --navy-800:#0C1424;     /* แถบเมนู */
  --navy-700:#17284A;

  /* น้ำเงินต้องสว่างกว่าธีมสว่าง ไม่งั้นอ่านบนพื้นดำไม่ออก */
  --blue-600:#4C86FF; --blue-500:#6C9BFF; --blue-300:#A9C4FF;
  --red-700:#C4202A; --red-600:#EE3A44; --red-500:#FF5560;

  --paper:#101A2A;        /* พื้นการ์ด กล่อง ช่องกรอก */
  --paper-2:#17233A;      /* พื้นตอนชี้เมาส์ ชิป หัวตาราง */
  --paper-3:#1F2C46;

  --line:#1E2B40; --line-strong:#33445F;
  --text:#E9EEFA; --muted:#94A3BF; --muted-2:#6B7B99;
  --ok:#17A06C;

  --sh-1:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.38);
  --sh-2:0 2px 8px rgba(0,0,0,.5),0 24px 54px rgba(0,0,0,.55);
}

body{background:var(--navy-900)}
::selection{background:var(--blue-600);color:#fff}

/* แถบบนสุดกับแถบโทรลอยล่าง ให้กลืนกับพื้นหลังใหม่ */
.header{background:rgba(8,13,24,.92)}
.callbar{background:rgba(8,13,24,.96)}

/* พื้นที่หน้าสินค้า ทำให้เข้มกว่าการ์ด การ์ดจะได้ดูลอยขึ้นมา */
.shop{background:var(--ink);border-block-color:var(--line)}
.toolbar{background:var(--ink)}

/* ภาพประกอบแบตบนการ์ดและในป๊อปอัป */
.card-media{background:linear-gradient(160deg,#1A2740,#0B1322)}
.modal-hd .pic{background:linear-gradient(160deg,#1A2740,#0B1322)}
.card:hover{border-color:var(--blue-600);box-shadow:0 2px 8px rgba(0,0,0,.5),0 24px 54px rgba(0,0,0,.6)}

/* ป้ายบนการ์ด */
.tag{background:#27364F}

/* ตัวอักษรที่เดิมเป็นสีกรมท่าเข้ม บนพื้นมืดต้องเปลี่ยนเป็นสีสว่าง */
.specs li,.srow .tags li{color:var(--blue-300)}
.btile{color:var(--text)}
.bchip{color:var(--text)}
.bchip:hover{color:var(--blue-300);border-color:var(--blue-600)}
.price .now.ask{color:var(--blue-300)}
.veh svg{color:var(--blue-300)}
.ktable thead th{color:var(--blue-300)}
.ktable tbody th{color:var(--text)}
.dd a:hover,.dd a:focus-visible{color:#fff}
.btn-ghost:hover{background:var(--paper-2);border-color:var(--blue-600);color:#fff}

/* ชิปที่ถูกเลือก ใช้สีแดงของแบรนด์ให้เด่นบนพื้นมืด */
.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--red-500),var(--red-700));color:#fff}
.chip{color:var(--text)}
.catchips .chip .n{background:var(--paper-3);color:var(--blue-300)}

/* กล่องเตือนสีเหลืองและกล่องส่งฟอร์มสำเร็จ ทำเป็นโทนมืด */
.notice{background:rgba(240,180,60,.09);border-color:rgba(240,180,60,.32);color:#EBC77A}
.form-ok{background:rgba(31,163,111,.12);border-color:rgba(31,163,111,.36);color:#5FD6A4}

/* แถบสีเข้มในหน้าต่าง ๆ ให้มีโทนน้ำเงินกว่าพื้นหลังเล็กน้อย จะได้แยกชั้นออก */
.band{background:linear-gradient(160deg,#0D1A34,#04070F);border-block:1px solid var(--line)}
.stat{background:linear-gradient(160deg,#132743,#070C18);border:1px solid var(--line)}

/* กล่องโปร่งบนแถบเข้ม เพิ่มความคมให้ขอบ */
.band-c,.codecard,.why{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
.band-c:hover,.codecard:hover,.why:hover{border-color:rgba(255,255,255,.2)}

/* ตัวเลือกในเมนูดรอปดาวน์ */
.dd{background:var(--paper);border-color:var(--line-strong);box-shadow:0 2px 10px rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.6)}

/* ช่องกรอกในฟอร์ม */
.field input,.field select,.field textarea,.tb-row select{background:var(--paper);border-color:var(--line-strong);color:var(--text)}
.field input::placeholder,.field textarea::placeholder,.msearch input::placeholder{color:var(--muted-2)}
.msearch input{background:var(--paper);border-color:var(--line-strong);color:var(--text)}

/* เส้นคั่นในตารางและกล่องต่าง ๆ ให้จางลงหน่อย จะได้ไม่ตัดตา */
.spec-table th,.spec-table td,.ktable th,.ktable td{border-bottom-color:var(--line)}
.tblwrap{background:var(--paper)}

/* ไอคอนบริการ 16 ช่อง ให้ช่องเว้นเป็นเส้นจาง ๆ */
.tiles{background:var(--line);border-color:var(--line)}
.tile{background:var(--paper)}
.tile:hover{background:var(--paper-2)}

/* เงาปุ่มสีบนพื้นมืดต้องเบาลง ไม่งั้นดูฟุ้ง */
.btn-primary{box-shadow:0 8px 22px rgba(238,58,68,.28)}
.btn-primary:hover{box-shadow:0 14px 32px rgba(238,58,68,.42)}
.btn-blue{box-shadow:0 8px 22px rgba(76,134,255,.24)}

/* เส้นเรืองแสงบาง ๆ คั่นหัวเว็บกับเนื้อหา ให้ดูเป็นแนวเทคโนโลยี */
.navbar{box-shadow:0 1px 0 rgba(108,155,255,.16)}

/* ============================================================
   แท็บข้อมูลเพิ่มเติมในป๊อปอัปสินค้า และกล่องพื้นที่ให้บริการ
   ============================================================ */

.mtabs{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.mtab-bar{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:2px}
.mtab-bar::-webkit-scrollbar{display:none}
.mtab-bar button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;
  padding:8px 15px;font-family:var(--f-d);font-weight:600;font-size:.85rem;white-space:nowrap;cursor:pointer;transition:.16s}
.mtab-bar button:hover{color:var(--text);border-color:var(--line-strong)}
.mtab-bar button[aria-selected="true"]{background:var(--paper-2);border-color:var(--blue-600);color:var(--text)}

.mtab-body{margin-top:16px;font-size:.9rem;line-height:1.8}
.mtab-body .tl{color:var(--muted);margin-bottom:14px}
.mtab-body .tn{color:var(--muted-2);font-size:.85rem;margin:-2px 0 8px}
.mtab-body h4{font-family:var(--f-d);font-size:.95rem;margin:16px 0 8px;color:var(--text)}
.mtab-body h4:first-child{margin-top:0}
.mtab-body ul{display:grid;gap:7px}
.mtab-body li{position:relative;padding-left:22px;color:var(--muted);font-size:.88rem;line-height:1.7}
.mtab-body li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red-600),var(--blue-500))}
.mtab-body .tf{margin-top:14px;padding:11px 14px;border-radius:var(--r-sm);background:var(--paper-2);
  border:1px solid var(--line);color:var(--muted);font-size:.85rem}
.mtab-body .tf b{color:var(--text)}

/* พื้นที่ให้บริการ */
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.areagrid{grid-template-columns:1fr}}
.areacard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.areacard h3{font-size:1.02rem;margin-bottom:14px}
.areacard ul{display:flex;flex-wrap:wrap;gap:8px}
.areacard li{font-size:.86rem;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px}
.areanote{margin-top:16px;font-size:.85rem;color:var(--muted-2)}

/* ============================================================
   รายละเอียดบริการทั้ง 16 อย่างในหน้าบริการ
   ============================================================ */

.srvlist{display:grid;gap:10px}
.srv{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s}
.srv[open]{border-color:var(--line-strong)}
.srv > summary{display:flex;align-items:center;gap:16px;padding:18px 46px 18px 18px;cursor:pointer;
  position:relative;list-style:none}
.srv > summary::-webkit-details-marker{display:none}
.srv > summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.srv[open] > summary::after{transform:translateY(-25%) rotate(-135deg)}
.srv > summary:hover{background:var(--paper-2)}
.srv .ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--blue-500),var(--blue-600));box-shadow:0 8px 18px rgba(76,134,255,.22)}
.srv:nth-child(even) .ic{background:linear-gradient(160deg,var(--red-500),var(--red-700));
  box-shadow:0 8px 18px rgba(238,58,68,.22)}
.srv .ic svg{width:22px;height:22px;stroke-width:1.7}
.srv .tx b{display:block;font-family:var(--f-d);font-weight:600;font-size:1.04rem;line-height:1.4}
.srv .tx i{font-style:normal;font-size:.8rem;color:var(--muted)}

.srv-bd{padding:4px 22px 24px 80px;border-top:1px solid var(--line);margin-top:2px;padding-top:20px}
@media (max-width:640px){.srv-bd{padding-left:22px}}
.srv-bd .lead{font-size:.93rem;color:var(--muted);max-width:none;margin-bottom:14px}
.srv-bd .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.srv-bd .tags li{font-family:var(--f-m);font-size:.72rem;color:var(--blue-300);background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:5px 10px}

.sbgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
@media (max-width:760px){.sbgrid{grid-template-columns:1fr;gap:18px}}
.sb h4{font-family:var(--f-d);font-size:.92rem;margin-bottom:10px}
.sb ul{display:grid;gap:8px}
.sb li{position:relative;padding-left:22px;font-size:.88rem;color:var(--muted);line-height:1.7}
.sb li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-300))}
.sb.warn li::before{background:linear-gradient(90deg,var(--red-600),var(--red-500))}

.smeta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
@media (max-width:640px){.smeta{grid-template-columns:1fr}}
.sm{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.sm span{display:block;font-family:var(--f-m);font-size:.68rem;letter-spacing:.12em;color:var(--muted-2);
  font-weight:600;margin-bottom:5px}
.sm p{font-size:.86rem;color:var(--muted);line-height:1.7}

.srv-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.srv-act .btn{flex:1 1 220px}

/* ============================================================
   รูปถ่ายสินค้า
   ============================================================ */
.card-media.has-img{padding:0;background:#fff}
.card-media .pimg{width:100%;height:auto;display:block;aspect-ratio:560/434;object-fit:cover}
.modal-hd .pic.has-img{padding:0;background:#fff;overflow:hidden}
.modal-hd .pic.has-img .pimg{width:100%;height:auto;display:block}
@media (max-width:560px){.modal-hd .pic.has-img{max-width:280px;margin-inline:auto}}

/* รูปสินค้าและชื่อรุ่นบนการ์ด กดเพื่อเปิดรายละเอียดได้ */
button.card-media{width:100%;border:0;border-bottom:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;text-align:inherit}
button.card-media:hover .pimg{transform:scale(1.04)}
.card-media .pimg{transition:transform .3s}
.card-media{overflow:hidden}
.card h3 .ptitle{background:0;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.card h3 .ptitle:hover{color:var(--blue-300)}
@media (prefers-reduced-motion:reduce){button.card-media:hover .pimg{transform:none}}

/* ============================================================
   รายชื่อรถที่ใช้แบตรุ่นนี้ได้ และปุ่มไลน์
   ============================================================ */
.fitbox{margin:18px 0 4px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--paper-2)}
.fitbox h4{font-family:var(--f-d);font-size:.95rem;margin-bottom:10px}
.fitbox ul{display:grid;gap:8px}
.fitbox li{display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:.86rem;line-height:1.6}
@media (max-width:520px){.fitbox li{grid-template-columns:1fr;gap:2px}}
.fitbox li b{font-family:var(--f-m);font-size:.74rem;letter-spacing:.06em;color:var(--blue-300);padding-top:2px}
.fitbox li span{color:var(--muted)}
.fitbox .fitnote{margin-top:12px;font-size:.79rem;color:var(--muted-2);line-height:1.6}

.btn-line{background:linear-gradient(180deg,#12CE63,#06A94D);color:#fff;box-shadow:0 8px 20px rgba(6,169,77,.26)}
.btn-line:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(6,169,77,.36)}
.btn-line svg{width:19px;height:19px}
.btn-line-off{background:linear-gradient(180deg,#4B5A72,#36435A);box-shadow:none}
@media (prefers-reduced-motion:reduce){.btn-line:hover{transform:none}}

/* ปุ่มไลน์แบบกลมเล็กบนแถบหัวเว็บ และลิงก์ไลน์ในฟุตเตอร์ */
.line-chip{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,#12CE63,#06A94D);color:#fff;box-shadow:0 6px 16px rgba(6,169,77,.35)}
.line-chip svg{width:22px;height:22px}
.line-chip:hover{filter:brightness(1.08)}
.hrow .line-chip{margin-left:2px}
@media (max-width:620px){.line-chip{width:38px;height:38px}.line-chip svg{width:20px;height:20px}}

.line-foot a{display:inline-flex;align-items:center;gap:7px;color:#2FD07E}
.line-foot a:hover{color:#6BE6A8}
.line-foot svg{width:16px;height:16px;flex:none}

/* แถวปุ่มที่มีทั้งโทรและไลน์ ให้ไหลลงบรรทัดใหม่ได้บนจอแคบ */
.hero-cta,.seelink{flex-wrap:wrap}
.callbar .btn-line{flex:1}
.aside-card .btn-line{width:100%;margin-bottom:9px}

/* ปุ่มไลน์บนการ์ดสินค้า เป็นไอคอนอย่างเดียวเพื่อไม่ให้ปุ่มล้น */
.card-act .btn-line-ico{flex:0 0 44px;min-width:44px;padding:11px 0;justify-content:center}
.card-act .btn-line-ico svg{width:20px;height:20px;margin:0}
@media (max-width:560px){
  .card-act{flex-direction:row;gap:6px}
  .card-act .btn:not(.btn-line-ico){flex:1;padding:10px 6px;font-size:.78rem}
  .card-act .btn-line-ico{flex:0 0 40px;min-width:40px;padding:10px 0}
}

/* ไอคอนเพจเฟซบุ๊ก */
.fb-chip{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,#3B82F6,#1D4ED8);color:#fff;box-shadow:0 6px 16px rgba(29,78,216,.35)}
.fb-chip svg{width:22px;height:22px}
.fb-chip:hover{filter:brightness(1.1)}
@media (max-width:620px){.fb-chip{width:38px;height:38px}.fb-chip svg{width:20px;height:20px}}
@media (max-width:420px){.fb-chip{display:none}}

.fb-foot a{display:inline-flex;align-items:center;gap:7px;color:#7EA9FF}
.fb-foot a:hover{color:#A9C4FF}
.fb-foot svg{width:16px;height:16px;flex:none}