/* SKT PART SUPPLY — แค็ตตาล็อกอะไหล่อิเล็กทรอนิกส์อุตสาหกรรม
   โทน: ดำเหล็ก + แดงตามโลโก้ · เส้นคม มุมโค้งน้อย · ตัวเลข/รหัสรุ่นอ่านง่าย
   ฟอนต์เดียวทั้งเว็บ Anuphan (400/600/700 — เปลี่ยนตามลูกค้า 2026-10-04 ให้หัวมนและคมขึ้น) · ไอคอนเส้นหนา 1.75 เท่ากันทั้งเว็บ
   กฎเหล็ก: ไม่ล้นจอที่ 360px · รูปสินค้าห้ามครอป (contain) · แบนเนอร์ครอปได้ (cover) */

:root {
  --accent: #c8161d;
  --accent-2: color-mix(in srgb, var(--accent) 82%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, white);
  --ink: #111417;
  --ink-2: #23282e;
  --muted: #5d6670;
  --line: #e2e5e9;
  --paper: #ffffff;
  --paper-2: #f3f4f6;
  --steel: #0e1013;
  --green: #06c755;
  --radius: 8px;
  --font: 'Anuphan', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --display: var(--font);
  --gap: clamp(56px, 8vw, 96px);
  --pad: clamp(16px, 4vw, 32px);
  --max: 1240px;
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.7; -webkit-text-size-adjust: 100%; overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.3; margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }

svg.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; flex: none; }
svg.ico-line { width: 22px; height: 22px; flex: none; --line-ink: var(--green); }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 1.5px solid transparent;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--accent-2); }
.btn:active { transform: translateY(1px); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); }
.btn-line, .btn-light.btn-line { background: var(--green); color: #fff; }
.btn-line:hover { background: #05b34c; }
.btn-lg { min-height: 56px; font-size: 17px; }
.btn svg.ico { width: 19px; height: 19px; }

/* ---------- แถบบนสุด + หัวเว็บ ---------- */
.topbar { background: var(--steel); color: #c3c9d0; font-size: 14px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar svg.ico { width: 16px; height: 16px; }
.topbar svg.ico-line { width: 18px; height: 18px; --line-ink: var(--steel); color: #c3c9d0; }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo img { width: 44px; height: auto; }
.logo span { font-weight: 700; font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.menu { display: flex; gap: 2px; }
.menu a { position: relative; padding: 8px 12px; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ink-2); border-radius: 6px; white-space: nowrap; }
.menu a:hover { background: var(--paper-2); }
.menu a[aria-current="page"] { color: var(--accent); }
.menu a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 2px; background: var(--accent); }
.search-nav { flex: 1; max-width: 360px; margin-left: auto; }
.nav-line { min-height: 42px; padding: 0 16px; font-size: 15px; flex: none; }
.nav-toggle { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; border-radius: var(--radius); cursor: pointer; place-items: center; }
.nav-toggle svg.ico { width: 26px; height: 26px; }
.nav-toggle .ico:last-child, .nav.is-open .nav-toggle .ico:first-child { display: none; }
.nav.is-open .nav-toggle .ico:last-child { display: block; }

/* ---------- ช่องค้นหา ---------- */
.search { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(17, 20, 23, .06); }
.search > svg.ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 8px 0 44px; height: 44px; font-size: 16px; outline: none; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search button { flex: none; margin: 4px; padding: 0 18px; min-height: 38px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.search button:hover { background: var(--accent); }
.search-nav { min-height: 42px; }
.search-nav input { height: 38px; font-size: 16px; }
.search-nav button { min-height: 32px; padding: 0 12px; font-size: 14px; }

/* ---------- แบนเนอร์ ---------- */
.hero { position: relative; background: var(--steel); color: #fff; overflow: hidden; isolation: isolate; }
.hero-track { display: grid; }
.hero-slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.hero-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.hero-pic { position: absolute; inset: 0; z-index: -1; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 15, .93) 0%, rgba(10, 12, 15, .74) 46%, rgba(10, 12, 15, .18) 100%); }
.hero .wrap { position: relative; width: 100%; }
.hero-body { max-width: 640px; }
.hero-title { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.22; font-weight: 700; letter-spacing: -.005em; }
.hero-title::before { content: ''; display: block; width: 48px; height: 4px; background: var(--accent); margin-bottom: 22px; }
.hero-sub { margin: 16px 0 28px; font-size: clamp(16px, 1.6vw, 19px); color: #d3d8de; max-width: 52ch; }
.hero-full .hero-slide { min-height: min(78vh, 680px); padding: 72px 0 150px; }
.hero-split .hero-slide { min-height: 520px; padding: 64px 0; }
.hero-split .hero-pic { left: 50%; }
.hero-split .hero-pic::after { background: linear-gradient(90deg, var(--steel) 0%, transparent 40%); }
.hero-compact .hero-slide { min-height: 280px; padding: 56px 0; }
.hero-compact .hero-title { font-size: clamp(28px, 4vw, 46px); }
.hero-compact .hero-sub { margin-bottom: 0; }
.hero-search { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 3; }
.hero-search .search { max-width: 640px; min-height: 58px; border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hero-search .search input { height: 54px; color: var(--ink); }
.hero-search .search button { min-height: 46px; padding: 0 24px; font-size: 16px; background: var(--accent); }
.hero-search .search button:hover { background: var(--accent-2); }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button { width: 32px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: rgba(255, 255, 255, .35); border-radius: 2px; transition: background .3s; }
.hero-dots button[aria-current="true"]::before { background: var(--accent); }

/* ---------- ส่วนทั่วไป ---------- */
.sec { padding-block: var(--gap); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 32px); }
.sec-head h2 { font-size: clamp(24px, 3.2vw, 36px); }
.sec-head p { color: var(--muted); margin-top: 8px; max-width: 62ch; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 15.5px; }
.more svg.ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.more:hover svg.ico { transform: translateX(3px); }

/* ---------- หมวดสินค้า ---------- */
.cats-block { margin-bottom: clamp(48px, 7vw, 80px); }
.cats-title { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 18px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--paper-2); border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.35; transition: background .2s, color .2s; }
.cats a b { font-weight: 600; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s; }
.cats a:hover, .cats a[aria-current="page"] { background: var(--ink); color: #fff; }
.cats a:hover b, .cats a[aria-current="page"] b { color: #ff8a8e; }

/* ---------- การ์ดสินค้า ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(17, 20, 23, .22); border-color: #d3d7dc; }
.card[hidden] { display: none; }
.card-pic { aspect-ratio: 1; background: var(--paper-2); padding: 9%; display: grid; place-items: center; }
.card-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card-pic.is-cover { padding: 0; }
.card-pic.is-cover img { object-fit: cover; mix-blend-mode: normal; }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.card-cat { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); line-height: 1.4; }
.card-name { font-size: 16.5px; line-height: 1.35; overflow-wrap: anywhere; }
.card-link { text-decoration: none; }
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-short { font-size: 14px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { font-weight: 700; font-size: 17px; }
.card-price s { color: var(--muted); font-weight: 400; font-size: 14px; }
.card-sold { font-size: 14px; color: var(--muted); font-weight: 600; }
.card-cta { position: relative; z-index: 2; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: var(--radius); border: 1.5px solid var(--line); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.card-short + .card-cta, .card-name + .card-cta, .card-sold + .card-cta { margin-top: 12px; }
.card-cta:hover { border-color: var(--ink); }
.card-cta.is-line { background: var(--green); border-color: var(--green); color: #fff; }
.card-cta.is-line:hover { background: #05b34c; border-color: #05b34c; }
.card-cta svg.ico-line { width: 20px; height: 20px; }
.card.is-out .card-pic img { opacity: .55; }
.card-row { display: grid; grid-template-columns: 112px 1fr; }
.card-row .card-pic { aspect-ratio: auto; height: 100%; }
.rows { display: grid; gap: 10px; }

/* ---------- จุดเด่น ---------- */
.sec-features { background: var(--paper-2); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feature { background: #fff; border-radius: 10px; padding: clamp(18px, 2.4vw, 28px); }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.feature-icon svg.ico { width: 26px; height: 26px; }
.feature h3 { font-size: 17px; }
.feature p { margin-top: 6px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ---------- เกี่ยวกับ ---------- */
.about { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-pic { margin: 0; }
.about-pic img { width: 100%; border-radius: 10px; }
.about-text h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
.about-text h2::before { content: ''; display: block; width: 40px; height: 3px; background: var(--accent); margin-bottom: 18px; }
.about-text p { color: var(--ink-2); margin-bottom: 14px; max-width: 62ch; }
.about-text .btn { margin-top: 10px; }

/* ---------- คำถามที่พบบ่อย ---------- */
.sec-faq { background: var(--paper-2); }
.faq { border-top: 1px solid #d7dbe0; }
.faq details { border-bottom: 1px solid #d7dbe0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-a { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }
.faq-a p + p { margin-top: 10px; }

/* ---------- แถบชวนติดต่อ ---------- */
.cta { padding-block: clamp(44px, 6vw, 64px); }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(22px, 2.8vw, 32px); max-width: 30ch; flex: 1 1 320px; }
.cta-kicker { flex-basis: 100%; font-weight: 600; font-size: 15px; color: var(--accent); }
.cta-dark { background: var(--steel); color: #fff; border-top: 4px solid var(--accent); }
.cta-dark .cta-kicker { color: #ff8a8e; }
.cta-soft { background: var(--paper-2); }

/* ---------- ติดต่อ ---------- */
.contact { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
.contact-note { color: var(--ink-2); margin-bottom: 16px; padding: 14px 16px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li > a, .contact-list li > div { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 16.5px; overflow-wrap: anywhere; }
.contact-list li > a:hover { color: var(--accent); }
.contact-list svg.ico { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.contact-list svg.ico-line { width: 26px; height: 26px; color: var(--green); --line-ink: #fff; }
.contact-list small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.hours { margin-top: 24px; }
.hours h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 8px; }
.hours ul { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.hours .closed { color: var(--muted); }
.map { display: block; width: 100%; height: 300px; border: 0; border-radius: 10px; margin-top: 24px; }
.lead { display: grid; gap: 14px; background: var(--paper-2); padding: clamp(20px, 3vw, 32px); border-radius: 12px; }
.lead h3 { font-size: 20px; }
.lead label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.lead label small { font-weight: 400; color: var(--muted); font-size: 14px; }
.lead input, .lead textarea { width: 100%; font-size: 16px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; }
.lead input:focus, .lead textarea:focus { outline: none; border-color: var(--ink); }
.lead textarea { resize: vertical; min-height: 110px; }
.lead .btn { justify-self: start; min-width: 180px; }
.f2 { display: grid; gap: 14px; }
.hp { position: absolute; left: -9999px; }
.msg:empty { display: none; }
.msg { font-size: 15px; }
.msg.ok { color: #0f7a3d; font-weight: 600; }
.msg.bad { color: #b42318; font-weight: 600; }

/* ---------- หัวหน้ารวม/หน้าหมวด ---------- */
.cat-head { background: var(--steel); color: #fff; padding: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 40px); }
.cat-head h1 { font-size: clamp(28px, 4vw, 44px); margin-top: 8px; overflow-wrap: anywhere; }
.cat-sub { color: #c3c9d0; margin-top: 6px; }
.cat-head .search { max-width: 640px; margin-top: 20px; border: 0; }
.cat-head .search input { color: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.cat-head .crumbs { color: #9aa3ad; }
.cat-head .crumbs span[aria-current] { color: #fff; }
.sec-catalog { padding-top: clamp(24px, 3vw, 36px); }
.catalog { display: grid; gap: 20px; }
.catalog-side { min-width: 0; }
.catalog-count:empty { display: none; }
.catalog-count { margin-bottom: 14px; color: var(--muted); font-size: 15px; }
.catalog-empty { text-align: center; padding: clamp(32px, 5vw, 56px) 20px; background: var(--paper-2); border-radius: 12px; }
.catalog-empty h2 { font-size: 22px; }
.catalog-empty p { color: var(--muted); margin: 8px auto 20px; max-width: 46ch; }
.nf { padding-block: clamp(56px, 10vw, 120px); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ---------- หน้ารายละเอียดสินค้า ---------- */
.pd { padding: 20px 0 clamp(48px, 6vw, 72px); }
.pd-grid { display: grid; gap: clamp(24px, 4vw, 56px); margin-top: 18px; align-items: start; }
.pd-gallery { min-width: 0; }
.pd-main { background: var(--paper-2); border-radius: 12px; padding: clamp(16px, 3vw, 32px); display: grid; place-items: center; min-height: 280px; }
.pd-shot { margin: 0; }
.pd-shot img { max-height: 520px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; cursor: zoom-in; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.pd-thumbs button { flex: none; width: 76px; height: 76px; padding: 6px; border: 2px solid transparent; border-radius: var(--radius); background: var(--paper-2); cursor: pointer; }
.pd-thumbs button[aria-current="true"] { border-color: var(--accent); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper-2); border-radius: 12px; color: #aab1b9; }
.pd-noimg svg.ico { width: 72px; height: 72px; stroke-width: 1.25; }
.pd-cat { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--accent); text-decoration: none; }
.pd-name { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; letter-spacing: .005em; }
.pd-short { margin-top: 10px; font-size: 17px; color: var(--ink-2); }
.pd-price { margin-top: 14px; font-size: 26px; font-weight: 700; }
.pd-price s { font-size: 17px; color: var(--muted); font-weight: 400; }
.pd-out { margin-top: 14px; color: #b42318; font-weight: 600; }
.pd-quote { margin-top: 22px; padding: 14px 18px; background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.pd-quote b { font-size: 16.5px; }
.pd-quote p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.pd-actions { display: grid; gap: 10px; margin-top: 20px; }
.pd-actions .btn-ghost { min-height: 50px; }
.pd-meta { margin: 24px 0 0; }
.pd-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.pd-meta dt { color: var(--muted); }
.pd-meta dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pd-spec { margin-top: clamp(40px, 5vw, 64px); max-width: 880px; }
.pd-spec h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.sec-related { background: var(--paper-2); }
.sec-related .card { border-color: transparent; }

/* ---------- เนื้อหายาว / ตารางสเปก ---------- */
.prose { max-width: 72ch; }
.prose.is-wide { max-width: none; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 14px; }
.prose h3, .prose h4 { font-size: 19px; margin: 22px 0 8px; }
.prose p, .prose ul, .prose ol, .prose pre { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose pre { white-space: pre-wrap; font: inherit; background: var(--paper-2); padding: 14px 16px; border-radius: var(--radius); }
.spec { overflow-x: auto; }
.spec table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15.5px; min-width: 420px; }
.spec th, .spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { background: var(--ink); color: #fff; font-weight: 600; }
.spec tbody tr:nth-child(odd) { background: var(--paper-2); }
.spec tbody td:first-child { font-weight: 600; width: 38%; }

/* ---------- แกลเลอรี / รีวิว / บทความ ---------- */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gal img { width: 100%; border-radius: var(--radius); }
.quotes { display: grid; gap: 12px; }
.quote { margin: 0; background: var(--paper-2); padding: 24px; border-radius: 10px; }
.quote blockquote { margin: 0 0 16px; font-size: 16.5px; }
.quote figcaption { display: flex; gap: 12px; align-items: center; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote figcaption span span { display: block; color: var(--muted); font-size: 14px; }
.a-wrap { max-width: 800px; }
.a-wrap h1 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 8px; }
.a-meta { color: var(--muted); font-size: 14.5px; }
.a-cover { margin: 24px 0; }
.a-cover img { width: 100%; border-radius: 10px; }
.a-lead { font-size: 18px; color: var(--ink-2); margin-bottom: 20px; }
.a-toc { background: var(--paper-2); padding: 18px 22px; border-radius: 10px; margin: 0 0 28px; }
.a-toc ol { margin: 8px 0 0; padding-left: 1.2em; }
.a-body h2 { margin-top: 32px; }
.a-fig { margin: 24px 0; }
.a-fig img { border-radius: 10px; }
.a-fig figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.a-body blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.a-embed { margin-top: 40px; }
.a-embed h3 { font-size: 20px; margin-bottom: 14px; }
.a-cta { margin: 32px 0; padding: 24px; background: var(--paper-2); border-radius: 10px; display: grid; gap: 14px; justify-items: start; }

/* ---------- ท้ายเว็บ ---------- */
.foot { background: var(--steel); color: #b6bdc5; padding: clamp(48px, 6vw, 72px) 0 28px; font-size: 15px; }
.foot .wrap { display: grid; gap: 32px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.logo-foot { color: #fff; }
.logo-foot img { width: 52px; background: #fff; border-radius: var(--radius); padding: 4px; }
.foot-brand p { margin-top: 12px; max-width: 42ch; }
.foot-addr { color: #8d96a0; }
.foot-col { display: grid; gap: 8px; align-content: start; }
.foot-col h2 { font-size: 14px; letter-spacing: .08em; color: #fff; margin-bottom: 4px; }
.social { display: flex; gap: 8px; margin-top: 16px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1d2126; color: #fff; }
.social a:hover { background: var(--accent); }
.foot-copy { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid #22272d; color: #7d8690; font-size: 14px; }

/* ---------- ปุ่มลอยบนมือถือ (ไลน์ + โทร) ---------- */
.float-contact { display: none; }

/* ---------- ดูรูปขนาดเต็ม ---------- */
dialog.light { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.light::backdrop { background: rgba(8, 9, 11, .86); }
dialog.light img { max-width: 94vw; max-height: 88vh; width: auto; background: #fff; border-radius: var(--radius); }
dialog.light button { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; }

/* ---------- เนื้อหาปรากฏตอนเลื่อนถึง (เล่นครั้งเดียว) ---------- */
.rv-on .rv { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.rv-on .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rv-on .rv { opacity: 1; transform: none; }
}

/* ---------- จอ ---------- */
@media (min-width: 480px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .features { grid-template-columns: repeat(min(var(--cols, 3), 4), minmax(0, 1fr)); gap: 14px; }
  .about { grid-template-columns: 1fr 1fr; }
  .about.pic-right .about-pic { order: 2; }
  .contact { grid-template-columns: 1fr 1.15fr; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .card-row { grid-template-columns: 140px 1fr; }
  .foot .wrap { grid-template-columns: 1.6fr 1fr 1fr; }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
  .faq-wrap .sec-head { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .pd-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .pd-info { position: sticky; top: calc(var(--nav-h) + 24px); }
  .catalog { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
  .catalog .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-side { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
  .catalog-side .cats { display: flex; flex-direction: column; gap: 2px; }
  .catalog-side .cats a { background: transparent; padding: 9px 12px; }
  .catalog-side .cats a:hover { background: var(--paper-2); color: var(--ink); }
  .catalog-side .cats a:hover b { color: var(--muted); }
  .catalog-side .cats a[aria-current="page"] { background: var(--ink); color: #fff; }
  .catalog-side .cats a[aria-current="page"] b { color: #ff8a8e; }
}
@media (min-width: 1280px) {
  .catalog .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* หัวเว็บแบบมือถือ/แท็บเล็ต */
@media (max-width: 1099px) {
  .menu, .search-nav { display: none; }
  .nav-toggle { display: grid; }
  .nav-line { margin-left: auto; }
  .nav-line + .nav-toggle { margin-left: 0; }
  .nav.is-open .wrap { flex-wrap: wrap; padding-bottom: 14px; }
  .nav.is-open .menu { display: flex; flex-direction: column; order: 5; flex-basis: 100%; gap: 0; border-top: 1px solid var(--line); padding-top: 6px; }
  .nav.is-open .menu a { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav.is-open .menu a[aria-current="page"]::after { display: none; }
  .nav.is-open .search-nav { display: flex; order: 4; flex-basis: 100%; max-width: none; min-height: 48px; }
  .nav.is-open .search-nav input { height: 44px; }
}
@media (max-width: 899px) {
  .topbar { display: none; }
  .float-contact { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
  .float-contact a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: var(--radius); font-weight: 600; font-size: 16px; text-decoration: none; }
  .fl-line { flex: 1; background: var(--green); color: #fff; }
  .fl-call { width: 104px; background: var(--ink); color: #fff; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  .hero-full .hero-slide { min-height: min(70svh, 620px); padding: 48px 0 132px; align-items: flex-end; }
  .hero-pic::after { background: linear-gradient(0deg, rgba(10, 12, 15, .95) 0%, rgba(10, 12, 15, .72) 55%, rgba(10, 12, 15, .35) 100%); }
  .hero-split .hero-pic { left: 0; }
  .hero-title::before { width: 36px; margin-bottom: 14px; }
  .hero-search { bottom: 48px; }
  .hero-search .search button { padding: 0 16px; }
  .hero-dots { bottom: 14px; }
  .hero-compact .hero-slide { min-height: 220px; padding: 40px 0; }
  .logo span { font-size: 15px; }
  .logo img { width: 38px; }
  .nav-line { display: none; }
  .catalog-side .cats { display: flex; overflow-x: auto; margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scrollbar-width: none; }
  .catalog-side .cats::-webkit-scrollbar { display: none; }
  .catalog-side .cats a { flex: none; border-radius: 999px; padding: 8px 14px; }
  .lead .btn { justify-self: stretch; }
  .cta .btn { width: 100%; }
}
@media (max-width: 380px) {
  .card-body { padding: 10px 10px 12px; }
  .card-name { font-size: 15.5px; }
  .card-cta { font-size: 14px; padding: 0 8px; }
}

/* ---------- พื้นที่กดอย่างน้อย 44px ทุกจุด + โลโก้คงสัดส่วนเดิม (ผลตรวจ qa check-visual) ---------- */
.logo { min-height: 48px; }
.logo img { object-fit: contain; }
.logo-foot img { padding: 0; background: none; border-radius: 0; }
.logo-foot .logo-chip { display: grid; place-items: center; width: 56px; height: 56px; background: #fff; border-radius: var(--radius); }
.logo-foot .logo-chip img { width: 46px; }
.cats a { min-height: 48px; }
.card-cta { min-height: 46px; }
.more { min-height: 44px; }
.hero-dots button { width: 40px; height: 44px; }
.hero-dots button::before { top: 20px; }
.foot-col { gap: 0; }
.foot-col a { display: flex; align-items: center; min-height: 44px; }
.social a { width: 44px; height: 44px; }
.crumbs a, .pd-cat { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { align-items: center; }
.contact-list li > a { min-height: 56px; }
/* ระยะบรรทัดไทยอย่างน้อย 1.4 (สระบน-ล่างไม่ชนกัน) และตัวหนังสือไม่ต่ำกว่า 14px */
h1, h2, h3, h4, .hero-title, .pd-name, .card-name, .cats a, .btn, .card-cta, .search button, .card-cat { line-height: 1.4; }
.card-cat, .pd-cat { font-size: 14px; letter-spacing: .04em; }
.hero-dots button { width: 44px; }
@media (max-width: 767px) { .nav-line + .nav-toggle { margin-left: auto; } }

/* =====================================================================
   ชั้นดีไซน์รอบ 2 — ยกระดับหน้าตา + อนิเมชัน (ลูกค้าขอ 2026-10-01)
   หลัก: สังเกตได้แต่ไม่รบกวน · เล่นครั้งเดียวตอนเลื่อนถึง · ขยับเฉพาะ transform/opacity/clip-path
   ทุกอย่างปิดเองเมื่อเครื่องตั้ง "ลดการเคลื่อนไหว" (ดูท้ายไฟล์)
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --grid-line: rgba(255, 255, 255, .045);
}

/* ---------- แถบความคืบหน้าการเลื่อน + หัวเว็บ ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.nav { transition: box-shadow .3s ease, background-color .3s ease; }
.nav.is-scrolled { box-shadow: 0 8px 24px -16px rgba(17, 20, 23, .35); }
.menu a { transition: background-color .2s ease, color .2s ease; }
.menu a::after { transform: scaleX(0); transition: transform .3s var(--ease-out); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .menu a:not([aria-current])::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 2px; background: var(--ink); }
  .menu a:hover::after { transform: scaleX(1); }
  .menu a:hover { background: transparent; }
}

/* ---------- ปุ่มตอบสนองตอนกด ---------- */
.btn, .card-cta, .search button, .cat-tile, .fl-line, .fl-call { transition: transform .16s ease-out, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:active, .card-cta:active, .search button:active, .fl-line:active, .fl-call:active { transform: scale(.97); }
.btn-line { box-shadow: 0 6px 18px -8px rgba(6, 199, 85, .6); }
.btn .ico, .more .ico { transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ico:not(.ico-line) { transform: translateX(2px); }
}

/* ---------- ป้ายนำหัวข้อ + หัวข้อเผยจากล่างขึ้นบน ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.sec-features .kicker, .cta-dark .kicker { color: #ff7a80; }
.rv-on .sec-head.rv { opacity: 1; transform: none; }
.rv-on .sec-head.rv h2, .rv-on .sec-head.rv .kicker, .rv-on .sec-head.rv p, .rv-on .sec-head.rv .more {
  opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.rv-on .sec-head.rv h2 { clip-path: inset(0 0 100% 0); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), clip-path .8s var(--ease-out); transition-delay: .06s; }
.rv-on .sec-head.rv p, .rv-on .sec-head.rv .more { transition-delay: .14s; }
.rv-on .sec-head.rv.is-in h2, .rv-on .sec-head.rv.is-in .kicker, .rv-on .sec-head.rv.is-in p, .rv-on .sec-head.rv.is-in .more { opacity: 1; transform: none; }
.rv-on .sec-head.rv.is-in h2 { clip-path: inset(-30% -4% -30% -4%); }

/* การ์ดไล่กันขึ้น: ห่างกัน 60ms ตามคอลัมน์ (JS ใส่ --d ให้) */
.rv-on .rv { transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); transform: translateY(24px); }
.rv-on .card.rv.is-in { transition: opacity .6s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s, border-color .2s; transition-delay: 0s; }

/* ---------- แบนเนอร์ ---------- */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 75%); }
.hero::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 3; background: var(--accent); }
.hero-compact::after { display: none; }
.hero .wrap { z-index: 3; }
.hero-pic { will-change: transform; }
.hero-pic img { transform-origin: 70% 50%; }
.hero-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
/* ภาพซูมออกช้าๆ ระหว่างสไลด์แสดง */
.hero.is-motion .hero-pic img { transform: scale(1.1); transition: transform 7.5s cubic-bezier(.2, .6, .2, 1); }
.hero.is-motion .hero-slide.is-on .hero-pic img { transform: scale(1); }
/* ข้อความไล่ขึ้นทีละบรรทัดเมื่อสไลด์เปิด */
.hero.is-motion .hero-body > * { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .5s ease; }
.hero.is-motion .hero-slide.is-on .hero-body > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.hero.is-motion .hero-slide.is-on .hero-body > :nth-child(1) { transition-delay: .25s; }
.hero.is-motion .hero-slide.is-on .hero-body > :nth-child(2) { transition-delay: .4s; }
.hero.is-motion .hero-slide.is-on .hero-body > :nth-child(3) { transition-delay: .55s; }
.hero.is-motion .hero-title::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out) .2s; }
.hero.is-motion .hero-slide.is-on .hero-title::before { transform: scaleX(1); }
.hero-search { animation: rise .9s var(--ease-out) .7s both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
/* จุดสไลด์มีแถบนับเวลาถึงสไลด์ถัดไป */
.hero-dots button::after { content: ''; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.hero-dots button[aria-current="true"]::before { background: rgba(255, 255, 255, .35); }
.hero:not(.is-playing) .hero-dots button[aria-current="true"]::before { background: var(--accent); }
.hero.is-playing .hero-dots button[aria-current="true"]::after { animation: tick var(--dur, 6s) linear both; background: var(--accent); }
@keyframes tick { to { transform: scaleX(1); } }

/* ---------- แถบตัวเลข + แบรนด์ ---------- */
.trust { background: var(--steel); color: #fff; border-top: 1px solid #1f2329; overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 22px 4px; display: grid; gap: 2px; align-content: center; border-bottom: 1px solid #1f2329; }
.stat b { display: flex; align-items: baseline; gap: 2px; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat b i { font-style: normal; color: var(--accent); }
.stat small { font-size: 14px; color: #9aa3ad; line-height: 1.5; }
.stat-note b svg.ico-line { width: 34px; height: 34px; color: var(--green); --line-ink: var(--steel); }
.brands { position: relative; padding: 18px 0 22px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.brands:hover .brands-track { animation-play-state: paused; }
.brands ul { display: flex; flex: none; gap: 44px; padding: 0 22px; margin: 0; list-style: none; }
.brands li { font-size: 17px; font-weight: 700; letter-spacing: .1em; color: #59626d; white-space: nowrap; transition: color .2s ease; }
.brands li:hover { color: #fff; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- การ์ดหมวดมีรูป ---------- */
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cat-tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px 10px 10px; background: var(--paper-2); border-radius: 10px; text-decoration: none; overflow: hidden; isolation: isolate; }
.cat-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .35s var(--ease-out); }
.cat-pic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; background: #fff; border-radius: 8px; padding: 5px; overflow: hidden; }
.cat-pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease-out); }
.cat-txt { display: grid; min-width: 0; line-height: 1.4; }
.cat-txt b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; transition: color .25s ease; }
.cat-txt small { font-size: 14px; color: var(--muted); transition: color .25s ease; }
.cat-tile > .ico { margin-left: auto; width: 18px; height: 18px; color: var(--muted); opacity: 0; transform: translateX(-6px); transition: transform .3s var(--ease-out), opacity .3s ease, color .25s; }
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover::before { transform: none; }
  .cat-tile:hover .cat-txt b, .cat-tile:hover > .ico { color: #fff; }
  .cat-tile:hover .cat-txt small { color: #ff8a8e; }
  .cat-tile:hover > .ico { opacity: 1; transform: none; }
  .cat-tile:hover .cat-pic img { transform: scale(1.08); }
}

/* ---------- การ์ดสินค้า ---------- */
.card-pic { overflow: hidden; position: relative; }
.card-pic img { transition: transform .5s var(--ease-out); }
.card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); z-index: 3; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-pic img { transform: scale(1.06); }
  .card:hover::after { transform: scaleX(1); }
}
@media (hover: none) { .card:hover { transform: none; box-shadow: none; } }

/* ---------- จุดเด่น (พื้นเข้ม มีเลขลำดับ) ---------- */
.sec-features { background: var(--steel); color: #fff; position: relative; overflow: hidden; }
.sec-features::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 80% 0%, #000, transparent 70%); }
.sec-features .wrap { position: relative; }
.sec-features .sec-head p { color: #a7afb8; }
.feature { position: relative; background: #15181c; border: 1px solid #23282e; overflow: hidden; transition: transform .25s var(--ease-out), border-color .25s ease, background-color .25s ease; }
.feature-no { position: absolute; top: 14px; right: 18px; font-size: 40px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px #3a4048; transition: -webkit-text-stroke-color .25s ease; }
.feature-icon { background: rgba(200, 22, 29, .14); color: #ff6b72; transition: transform .35s var(--ease-out); }
.feature h3 { color: #fff; }
.feature p { color: #a7afb8; }
@media (hover: hover) and (pointer: fine) {
  .feature:hover { transform: translateY(-4px); border-color: var(--accent); background: #181b20; }
  .feature:hover .feature-icon { transform: rotate(-6deg) scale(1.08); }
  .feature:hover .feature-no { -webkit-text-stroke-color: var(--accent); }
}

/* ---------- เกี่ยวกับ: รูปเปิดแบบม่าน + บล็อกแดงด้านหลัง ---------- */
.about-pic { position: relative; isolation: isolate; }
.about-pic::before { content: ''; position: absolute; inset: 22px -14px -14px 22px; z-index: -1; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 10px); opacity: .5; }
.about-pic img { position: relative; }
.rv-on .about-pic.rv { transform: none; }
.rv-on .about-pic.rv img { clip-path: inset(0 100% 0 0 round 10px); transform: scale(1.06); transition: clip-path 1.1s var(--ease-io), transform 1.4s var(--ease-out); }
.rv-on .about-pic.rv.is-in img { clip-path: inset(0 0 0 0 round 10px); transform: none; }

/* ---------- คำถามที่พบบ่อย: เปิด-ปิดนุ่ม ---------- */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }

/* ---------- แถบชวนติดต่อ: ลายเส้นเลื่อนช้าๆ ---------- */
.cta-dark { position: relative; overflow: hidden; isolation: isolate; }
.cta-dark::before { content: ''; position: absolute; inset: -50%; z-index: -1; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 22px); animation: drift 40s linear infinite; }
.cta-dark::after { content: ''; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; z-index: -1; background: radial-gradient(closest-side, rgba(200, 22, 29, .35), transparent); }
@keyframes drift { to { transform: translateX(22px) translateY(-38px); } }

/* ---------- หัวหน้ารวม/หน้าหมวด ---------- */
.cat-head { position: relative; overflow: hidden; }
.cat-head::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(270deg, #000, transparent 70%); }
.cat-head .wrap { position: relative; }
.cat-head h1, .cat-head .cat-sub, .cat-head .search { animation: rise .7s var(--ease-out) both; }
.cat-head .cat-sub { animation-delay: .08s; }
.cat-head .search { animation-delay: .16s; }

/* ---------- หน้าสินค้า ---------- */
.pd-shot:not([hidden]) { animation: shotIn .35s var(--ease-out); }
@keyframes shotIn { from { opacity: 0; transform: scale(.98); } }
.pd-thumbs button { transition: border-color .2s ease, transform .16s ease-out; }
.pd-thumbs button:active { transform: scale(.95); }
.pd-info > * { animation: rise .7s var(--ease-out) both; }
.pd-info > :nth-child(2) { animation-delay: .05s; }
.pd-info > :nth-child(3) { animation-delay: .1s; }
.pd-info > :nth-child(n+4) { animation-delay: .15s; }
.pd-main { animation: rise .7s var(--ease-out) both; }

/* ---------- ปุ่มลอยไลน์: วงแหวนชวนกดเบาๆ ทุก 6 วินาที ---------- */
.fl-line { position: relative; }
.fl-line::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(6, 199, 85, .55); animation: ring 6s ease-out 2s infinite; }
@keyframes ring { 0%, 70% { box-shadow: 0 0 0 0 rgba(6, 199, 85, .55); } 85% { box-shadow: 0 0 0 10px rgba(6, 199, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); } }

/* ---------- จอ ---------- */
@media (min-width: 480px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 30px 24px; border-bottom: 0; border-left: 1px solid #1f2329; }
  .stat:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) { .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .stat:nth-child(odd) { padding-right: 16px; }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid #1f2329; }
  .brands li { font-size: 15px; }
  .brands ul { gap: 32px; padding: 0 16px; }
  .about-pic::before { inset: 14px -8px -8px 14px; }
}

/* ---------- ลดการเคลื่อนไหว: ปิดทุกอย่างที่ขยับตำแหน่ง ---------- */
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; flex-wrap: wrap; width: auto; }
  .brands-track ul + ul { display: none; }
  .brands ul { flex-wrap: wrap; row-gap: 10px; }
  .brands { mask-image: none; }
  .cta-dark::before, .fl-line::after, .hero-search, .cat-head h1, .cat-head .cat-sub, .cat-head .search, .pd-info > *, .pd-main, .pd-shot:not([hidden]) { animation: none !important; }
  .rv-on .sec-head.rv h2, .rv-on .sec-head.rv .kicker, .rv-on .sec-head.rv p, .rv-on .sec-head.rv .more { opacity: 1; transform: none; clip-path: none; }
  .rv-on .about-pic.rv img { clip-path: none; transform: none; }
  .hero-pic { transform: none !important; }
}
/* หลังเผยแล้ว ให้ hover กลับมาใช้จังหวะเร็วของตัวเอง (กฎเผยมีน้ำหนักสูงกว่า เลยต้องบอกซ้ำ) */
.rv-on .feature.rv.is-in { transition: opacity .6s var(--ease-out), transform .25s var(--ease-out), border-color .25s ease, background-color .25s ease; transition-delay: 0s; }
.rv-on .cat-tile.rv.is-in { transition: opacity .6s var(--ease-out), transform .16s ease-out; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .rv-on .card.rv.is-in:hover { transform: translateY(-3px); }
  .rv-on .feature.rv.is-in:hover { transform: translateY(-4px); }
}
.rv-on .cat-tile.rv.is-in:active { transform: scale(.98); }
/* รูปแบนเนอร์ต้องเต็มกรอบเสมอ (picture เป็น inline โดยปริยาย ทำให้รูปสูงไม่เต็มเมื่อแบนเนอร์สูงกว่าสัดส่วนรูป) */
.hero-pic picture { display: block; width: 100%; height: 100%; }
.hero-pic { inset: -2px 0 -2px 0; }
.cat-txt b { overflow-wrap: break-word; word-break: normal; }
.cat-txt { flex: 1; }
@media (max-width: 767px) {
  .cat-tile { gap: 10px; min-height: 64px; padding: 8px 10px 8px 8px; }
  .cat-pic { width: 46px; height: 46px; padding: 4px; }
  .cat-tile > .ico { display: none; }
  .cat-txt b { font-size: 14px; }
}
/* จุดสไลด์มี class wrap ด้วย — ต้องลอยทับรูป ไม่ใช่ดันแบนเนอร์ให้สูงขึ้น */
.hero .hero-dots { position: absolute; }
.sec-head .kicker { color: var(--accent); margin-top: 0; max-width: none; }
.sec-features .sec-head .kicker { color: #ff7a80; }

/* ---------- ท้ายเว็บ (ลูกค้าแก้ 2026-10-03): โลโก้ไม่มีกรอบขาว · ไอคอนหน้าช่องทางติดต่อ · โซเชียลอยู่ขวาล่าง ---------- */
.logo-foot img { width: 56px; height: auto; background: none; padding: 0; border-radius: 0; }
.foot-contact a { display: flex; align-items: center; gap: 10px; }
.foot-contact svg.ico { width: 20px; height: 20px; color: var(--accent); }
.foot-contact svg.ico-line { width: 22px; height: 22px; color: var(--green); --line-ink: var(--steel); }
.foot-contact .social { margin-top: 10px; }
.foot-contact .social a { gap: 0; justify-content: center; }
.foot-contact .social svg.ico { color: #fff; }

/* ---------- แก้ตามลูกค้า 2026-10-03 ---------- */
/* การ์ด: ปุ่ม "ดูเพิ่มเติม" (พาไปหน้าสเปก) + ปุ่มไลน์ไอคอนข้างๆ */
.card-actions { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.card-actions .card-cta { flex: 1; margin-top: 0; background: var(--ink); border-color: var(--ink); color: #fff; gap: 6px; }
.card-actions .card-cta svg.ico { width: 17px; height: 17px; transition: transform .25s var(--ease-out); }
.card-line { flex: none; display: grid; place-items: center; width: 46px; min-height: 46px; border-radius: var(--radius); background: var(--green); color: #fff; transition: background-color .2s ease, transform .16s ease-out; }
.card-line svg.ico-line { width: 24px; height: 24px; --line-ink: var(--green); }
.card-line:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
  .card-actions .card-cta:hover { background: var(--accent); border-color: var(--accent); }
  .card-actions .card-cta:hover svg.ico { transform: translateX(3px); }
  .card-line:hover { background: #05b34c; }
}

/* เกี่ยวกับเรา: เอาพื้นลายเส้นแดงด้านหลังรูปออก */
.about-pic::before { content: none; }

/* สไลด์รูปในส่วนเกี่ยวกับเรา — รูปมีตัวหนังสือในรูป จึงไม่ครอป (contain) */
.about-slider { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.about-slider .slides { display: grid; aspect-ratio: 3 / 2; }
.about-slider .slide { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.about-slider .slide.is-on { opacity: 1; visibility: visible; }
.about-slider .slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; clip-path: none !important; transform: none !important; }
.rv-on .about-slider.rv { transform: translateY(24px); }
.rv-on .about-slider.rv.is-in { transform: none; }
.sl-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(17, 20, 23, .72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s ease, background-color .2s ease, transform .16s ease-out; }
.sl-prev { left: 10px; } .sl-next { right: 10px; }
.sl-prev svg.ico { transform: rotate(180deg); }
.sl-nav:active { transform: scale(.94); }
.about-slider:hover .sl-nav, .sl-nav:focus-visible { opacity: 1; }
.sl-nav:hover { background: var(--accent); }
@media (hover: none) { .sl-nav { opacity: 1; } }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; }
.sl-dots button { width: 32px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.sl-dots button::before { content: ''; position: absolute; left: 6px; right: 6px; top: 12px; height: 4px; border-radius: 2px; background: rgba(17, 20, 23, .25); transition: background-color .3s; }
.sl-dots button[aria-current="true"]::before { background: var(--accent); }

/* หน้ารวมสินค้า/หน้าหมวด: แถบดำเตี้ยลง สินค้าขึ้นมาเห็นเร็วขึ้น */
.cat-head-compact { padding: 18px 0 20px; }
.cat-head-compact .wrap { display: grid; gap: 12px; align-items: end; }
.cat-head-compact h1 { font-size: clamp(24px, 3vw, 34px); margin-top: 0; }
.cat-head-compact .crumbs a { min-height: 32px; }
.cat-head-compact .cat-sub { margin-top: 2px; font-size: 15px; }
.cat-head-compact .search { margin-top: 0; }
.sec-catalog { padding-top: 20px; }
@media (min-width: 900px) {
  .cat-head-compact .wrap { grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 32px; }
}
.card-actions .card-cta { white-space: nowrap; }
@media (max-width: 479px) {
  .card-actions { gap: 6px; }
  .card-actions .card-cta { padding: 0 6px; }
  .card-actions .card-cta svg.ico { display: none; }
  .card-line { width: 44px; min-height: 44px; }
}
/* ชื่อสินค้าเป็นลิงก์ (ขยายทับทั้งการ์ดอยู่แล้ว) — ให้กล่องลิงก์สูง 44px ตามเกณฑ์ โดยไม่ดันเลย์เอาต์ */
.card-link { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* =====================================================================
   แก้ไขครั้งที่ 2 (2026-10-04)
   ===================================================================== */

/* ---------- ฟอนต์: Anuphan (ไทย-อังกฤษ หัวมน เส้นคม) + เรนเดอร์ให้คมขึ้น ---------- */
:root { --font: 'Anuphan', -apple-system, 'Segoe UI', Tahoma, sans-serif; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1; }
h1, h2, h3, .card-name, .pd-name, .cat-txt b, .stat b { letter-spacing: -.005em; }
/* หัวข้อบนพื้นสว่าง: เงานุ่มบางๆ ให้ตัวหนังสือลอยขึ้นจากพื้น */
.sec-head h2, .about-text h2, .pd-name, .cats-title, .cat-tiles b, .card-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(17, 20, 23, .1); }
/* หัวข้อบนพื้นเข้ม: เงาลึกขึ้น */
.sec-features .sec-head h2, .cta-dark h2, .cat-head h1, .stat b, .feature h3 { text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .35); }
.card-cat, .pd-cat, .kicker { text-shadow: 0 1px 6px rgba(200, 22, 29, .18); }

/* ---------- หัวข้อแบนเนอร์: มีมิติ ไฮไลต์สี ไล่ขึ้นทีละคำ ---------- */
.hero-title { font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 3px 0 rgba(0, 0, 0, .22), 0 10px 30px rgba(0, 0, 0, .55), 0 0 60px rgba(0, 0, 0, .3); }
.hero-title .w { display: inline-block; vertical-align: top; overflow: hidden; padding: .16em .05em .24em; margin: -.16em -.05em -.24em; }
.hero-title .w > span { display: inline-block; }
.hero-title .hl { position: relative; text-shadow: none;
  background: linear-gradient(100deg, #ff4b4b 0%, #ff7a3d 45%, #ffd0a8 52%, #ff7a3d 60%, #e8121b 100%);
  background-size: 20em auto; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)) drop-shadow(0 6px 22px rgba(255, 60, 40, .45)); }
.hero-title .w:has(.hl) { overflow: visible; }
.hero-title .hl::after { content: ''; position: absolute; left: .02em; right: .02em; bottom: -.06em; height: .09em; min-height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #e8121b, #ff7a3d); box-shadow: 0 0 18px rgba(255, 70, 40, .6); transform-origin: 0 50%; }
.hero-title .sep { color: var(--accent); margin: 0 .08em; text-shadow: 0 0 18px rgba(255, 50, 50, .7); }
.hero-sub { color: #e2e6ea; text-shadow: 0 2px 10px rgba(0, 0, 0, .65); }
.hero-btn { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.hero-btn svg.ico { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .hero-btn:hover { background: var(--accent); color: #fff; box-shadow: 0 12px 30px -8px rgba(200, 22, 29, .6); }
  .hero-btn:hover svg.ico { transform: translateX(4px); }
}

/* จังหวะ: ทั้งหัวข้ออยู่นิ่ง แต่ละคำโผล่จากล่างขึ้นไล่กัน · วลีไฮไลต์มีแสงวิ่งผ่าน + เส้นใต้ลากเข้า */
.hero.is-motion .hero-body > .hero-title { opacity: 1; transform: none; }
.hero.is-motion .hero-title .w > span { transform: translateY(110%); opacity: 0; transition: transform .45s ease, opacity .3s ease; }
.hero.is-motion .hero-slide.is-on .hero-title .w > span { transform: none; opacity: 1;
  transition: transform .9s var(--ease-out), opacity .6s ease; transition-delay: calc(.2s + var(--i, 0) * 110ms); }
.hero.is-motion .hero-title .hl { background-position: 100% 0; }
.hero.is-motion .hero-slide.is-on .hero-title .hl { animation: shine 1.6s var(--ease-out) .9s both; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hero.is-motion .hero-title .hl::after { transform: scaleX(0); transition: transform .3s ease; }
.hero.is-motion .hero-slide.is-on .hero-title .hl::after { transform: scaleX(1); transition: transform .8s var(--ease-out) 1.1s; }
.hero.is-motion .hero-slide.is-on .hero-body > .hero-sub { transition-delay: .65s; }
.hero.is-motion .hero-slide.is-on .hero-body > .btn { transition-delay: .8s; }

/* ---------- ท้ายเว็บ: Facebook เป็นแถวเดียวกับช่องทางอื่น โลโก้สีฟ้า ชื่อเพจ ---------- */
.foot-contact .foot-social { display: flex; align-items: center; gap: 10px; }
.foot-contact svg.ico-fb { width: 22px; height: 22px; flex: none; }
.contact-list svg.ico-fb { width: 26px; height: 26px; flex: none; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-title .w > span { transform: none !important; opacity: 1 !important; }
  .hero-title .hl { animation: none !important; background-position: 0 0; }
  .hero-title .hl::after { transform: none !important; }
}
/* Anuphan กว้างกว่าฟอนต์เดิม ขยายพื้นที่ข้อความแบนเนอร์ หัวข้อจะได้ไม่ตกบรรทัดเหลือคำเดียว */
@media (min-width: 768px) { .hero-body { max-width: 800px; } }