/* หน้าแยกยี่ห้อ/ซีรีส์ (SEO) — โทนเดียวกับหน้าเว็บหลัก: กรมท่า + การ์ดสีอ่อน + ทองสำหรับปุ่ม */
:root{--bg:#070C33;--band:#0D1550;--panel:#121B5B;--line:#26328A;--ink:#F3F5FF;--muted:#AEB7E6;--tile:#F7F8FD;--tile-ink:#121A4F;--tile-muted:#5B6496;--tile-line:#DCE1F0;--gold:#E4B43D;--gold-ink:#1B1406;
  --goldgrad:linear-gradient(135deg,#8F6210 0%,#D9A72C 28%,#FFF1B8 50%,#E2B23C 70%,#9A6B12 100%);--red:linear-gradient(180deg,#F0352B 0%,#C8161D 100%);
  --fd:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;--fb:"IBM Plex Sans Thai","Anuphan",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--fb)}
h1,h2{font-family:var(--fd);line-height:1.25;text-wrap:balance}
h1{font-size:clamp(26px,4vw,38px);margin:6px 0 16px}
h2{font-size:22px;margin:34px 0 12px}
a{color:var(--gold)}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:16px}
.top{background:var(--band);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 18px/1.15 var(--fd)}
.brand img{border-radius:10px;background:#fff}
.brand small{display:block;font:500 12px var(--fb);color:var(--muted)}
.top nav{display:flex;gap:14px;align-items:center;font-size:15px}
.top nav a{text-decoration:none}
.top nav .line{background:#06C755;color:#fff;border-radius:999px;padding:6px 12px;font-weight:600}
@media (max-width:560px){.brand small{display:none}.top nav a:first-child{display:none}}
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.pimg{width:100%;height:auto;background:#fff;border-radius:14px;padding:10px}
.blogo{height:30px;width:auto;background:#fff;border-radius:8px;padding:4px 8px;vertical-align:middle;margin-right:8px}
.blogo.big{height:64px;padding:8px 14px}
.kind{color:var(--muted);margin:8px 0 0}
.from{font:600 20px var(--fd);margin:6px 0}
.from b{color:var(--gold);font-size:30px}
.lead{color:var(--ink);opacity:.92}
.bdg{display:inline-block;background:var(--goldgrad);color:var(--gold-ink);border-radius:999px;padding:1px 10px;font-size:13px;font-weight:600;margin-left:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:11px 18px;font:600 16px var(--fd);text-decoration:none;border:0}
.btn.gold{background:var(--goldgrad);color:var(--gold-ink)}
.btn.red{background:var(--red);color:#fff}
.btn.green,.btn.line{background:#06C755;color:#fff}
.btn.sm{padding:7px 12px;font-size:14px;border-radius:10px;white-space:nowrap}
.tbl{overflow-x:auto;background:var(--tile);color:var(--tile-ink);border-radius:16px;border:1px solid var(--tile-line)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:620px}
th,td{padding:10px 12px;border-top:1px solid var(--tile-line);text-align:left;vertical-align:middle}
th{border-top:0;font-size:13px;color:var(--tile-muted)}
td small{color:var(--tile-muted)}
td a{color:#1d3fbd}
.r{text-align:right}
.price{font-weight:700;color:#C8161D;white-space:nowrap}
.ext{font-size:12px;white-space:nowrap}
.muted{color:var(--muted);font-size:13.5px}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.feat li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.clip{display:grid;gap:6px;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.clip img{width:100%;height:auto;display:block}
.clip span{padding:0 12px 12px;font-weight:500}
.bro{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.bro img{width:100%;height:auto;border-radius:12px;background:#fff;display:block}
.links{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{display:grid;gap:4px;text-decoration:none;color:var(--tile-ink);background:var(--tile);border-radius:16px;padding:12px;border:1px solid var(--tile-line)}
.card img{width:100%;height:auto;border-radius:10px}
.card small{color:var(--tile-muted)}
.card .price{font-size:18px}
.bsec h2 a{text-decoration:none;color:var(--ink)}
.bsec h2 small{font:500 14px var(--fb);color:var(--muted)}
.trust{margin:40px 0;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:20px;padding:6px 22px 20px}
.trust ul{padding-left:0;list-style:none;display:grid;gap:6px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);background:var(--band);padding:18px 0 28px;font-size:14px;color:var(--muted)}
.foot .brands a{color:var(--muted)}
