/* ============================================================
   เจริญชัยค้าวัสดุ — CRD 1993 · เว็บไซต์เวอร์ชัน 2.1
   Design language: "Blueprint Luxe"
   - dark glass header · hero หลายชั้น + parallax · ticker วิ่งวน
   - ghost typography · bento grid · ตัวเลข count-up
   ============================================================ */

:root {
  /* สี */
  --ink:        #0a0e15;   /* ดำลึกอมน้ำเงิน */
  --ink-2:      #101724;
  --ink-3:      #182335;
  --ink-4:      #22304a;
  --paper:      #f4f1e9;   /* งาช้างอุ่น */
  --surface:    #fffdf8;
  --line-soft:  #e6e0d2;
  --accent:     #ff6a00;   /* ส้มก่อสร้างจัดจ้าน */
  --accent-2:   #ff8c2e;
  --accent-hot: #e05500;
  --accent-soft:#ffe9d6;
  --gold:       #f2b33d;
  --gold-soft:  #ffd98a;
  --green-line: #06c755;
  --green-dark: #05a648;
  --navy:       #14304e;
  --txt:        #232f3d;
  --txt-soft:   #5d6b7a;
  --txt-faint:  #8d99a6;
  --ok:         #17a34a;

  /* ฟอนต์ */
  --font-head: "Kanit", "Sarabun", sans-serif;
  --font-body: "Sarabun", sans-serif;

  /* มิติ */
  --radius: 20px;
  --radius-sm: 13px;
  --container: 1280px;
  --shadow-1: 0 1px 2px rgba(10,14,21,.05), 0 6px 18px rgba(10,14,21,.07);
  --shadow-2: 0 10px 26px rgba(10,14,21,.12), 0 30px 70px rgba(10,14,21,.14);
  --shadow-accent: 0 12px 32px rgba(255,106,0,.38);
  --grad-fire: linear-gradient(120deg, var(--accent-hot), var(--accent) 45%, var(--gold));

  /* ตัวช่วยเดิม */
  --orange: var(--accent);
  --gray-3: var(--txt-soft);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--txt);
  background: var(--paper);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
::selection { background: var(--accent); color: #fff; }

/* ---------- โฟกัสคีย์บอร์ด (กด Tab แล้วต้องเห็นว่าอยู่ตรงไหน) ----------
   :focus-visible = โชว์เฉพาะตอนใช้คีย์บอร์ด กดเมาส์ไม่ขึ้นวงแหวน */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
}
.btn:focus-visible, .prod-add:focus-visible, .sr-add:focus-visible,
.cat-card:focus-visible, .prod-card:focus-visible, .cata-card:focus-visible,
.to-top:focus-visible, .float-btn:focus-visible { outline-offset: 4px; }
/* บนพื้นเข้ม/ธีม teal ใช้สีทองให้ตัดกับพื้นชัดกว่าส้ม */
.site-header :focus-visible, .topbar :focus-visible, .hero :focus-visible,
.page-hero :focus-visible, .bento-section :focus-visible, .quote-drawer :focus-visible,
.cta-band :focus-visible, .site-footer :focus-visible, .search-modal :focus-visible,
.map-panel :focus-visible, .calc-result :focus-visible, .mh-hero :focus-visible,
.mhs-card.ask-mh :focus-visible {
  outline-color: var(--gold);
}
/* ช่องกรอกที่ปิด outline ไว้ (ดีไซน์ไร้ขอบ) — คืนสัญญาณโฟกัสด้วยวงแหวนเงาแทน */
.qty-ctrl input:focus-visible, .search-modal-head input:focus-visible,
.search-box input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px var(--accent);
  border-radius: 7px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* scrollbar แบบบาง */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 8px; border: 2px solid var(--ink-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; color: var(--ink); font-weight: 700; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 26px; }
section { padding: 96px 0; position: relative; }
.section-alt { background:
  linear-gradient(180deg, rgba(10,14,21,.035), rgba(10,14,21,0) 160px),
  var(--surface); }

/* เม็ดเกรนบางๆ ทั้งหน้า — เพิ่มมิติแบบงานพิมพ์ */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: multiply;
}

/* แถบความคืบหน้าการอ่าน (บนสุด) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-fire); z-index: 120;
  box-shadow: 0 0 12px rgba(255,106,0,.6);
}

/* ---------- ชิ้นส่วนหัวข้อ ---------- */
.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; position: relative; }
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); letter-spacing: -.015em; font-weight: 800; text-wrap: balance; }
.section-head p { margin-top: 14px; color: var(--txt-soft); font-size: 1.05rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-hot);
  margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent)); border-radius: 2px; }
.eyebrow::after { background: linear-gradient(90deg, var(--accent), transparent); }
.eyebrow-line {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent-hot); margin-bottom: 14px;
}
.eyebrow-line::before { content: ""; width: 34px; height: 2px; background: var(--accent); border-radius: 2px; }

/* เลขลำดับ ghost หลัง section head */
.section-head .ghost {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 800; font-size: clamp(4.6rem, 10vw, 7.5rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(10,14,21,.08);
  letter-spacing: .04em; pointer-events: none; user-select: none; white-space: nowrap;
}

/* ---------- ปุ่ม ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  padding: 14px 30px; border-radius: 999px; line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }
/* แสง sweep ตอน hover */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.34) 48%, transparent 62%);
  transform: translateX(-130%); transition: transform .05s;
}
.btn:hover::after { transform: translateX(130%); transition: transform .65s ease; }

.btn-primary { background: linear-gradient(135deg, var(--accent-2), var(--accent) 55%, var(--accent-hot)); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(255,106,0,.5); }

.btn-line { background: var(--green-line); color: #fff; box-shadow: 0 12px 30px rgba(6,199,85,.35); }
.btn-line:hover { background: var(--green-dark); transform: translateY(-3px); }

.btn-navy { background: var(--ink-2); color: #fff; box-shadow: var(--shadow-1); }
.btn-navy:hover { background: var(--ink-3); transform: translateY(-3px); }

.btn-outline { border: 2px solid rgba(255,255,255,.65); color: #fff; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.btn-outline:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }

.btn-ghost { border: 1.6px solid var(--line-soft); color: var(--txt); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hot); transform: translateY(-3px); }

.btn-sm { padding: 10px 20px; font-size: .9rem; }
.btn-block { width: 100%; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  background: #060a10; color: #b9c6d4; font-size: .85rem;
  position: relative; z-index: 60;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 14px; flex-wrap: wrap; }
.topbar-group { display: flex; align-items: center; gap: 22px; }
.topbar a, .topbar .hours { display: inline-flex; align-items: center; gap: 7px; color: #b9c6d4; transition: color .15s; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 15px; height: 15px; fill: var(--accent); }

/* ============================================================
   Header — กระจกดำ
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(8,12,18,.82);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled { box-shadow: 0 14px 44px rgba(4,7,12,.5); background: rgba(8,12,18,.92); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 82px; }

.logo { display: flex; align-items: center; gap: 13px; }
.logo-badge {
  width: 52px; height: 52px; border-radius: 15px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-fire);
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.08rem;
  letter-spacing: .02em; box-shadow: 0 8px 20px rgba(255,106,0,.4);
  position: relative; overflow: hidden;
}
.logo-badge::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 46%, transparent 60%);
  transform: translateX(-130%); transition: transform .7s ease; }
.logo:hover .logo-badge::after { transform: translateX(130%); }
.logo-text { display: flex; flex-direction: column; line-height: 1.22; }
.logo-text strong { font-family: var(--font-head); font-size: 1.14rem; color: #fff; font-weight: 700; }
.logo-text span { font-size: .73rem; color: #7e8d9d; letter-spacing: .04em; }

.main-nav ul { display: flex; gap: 2px; }
.main-nav a {
  display: block; padding: 10px 15px; border-radius: 11px;
  font-family: var(--font-head); font-weight: 500; font-size: .96rem; color: #c6d1dd;
  position: relative; transition: color .15s, background .15s;
}
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.main-nav a.active { color: var(--gold); }
.main-nav a.active::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 3px;
  border-radius: 3px; background: var(--grad-fire);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }
.quote-btn { position: relative; background: var(--grad-fire); color: #fff; box-shadow: 0 8px 22px rgba(255,106,0,.35); }
.quote-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,106,0,.5); }
.quote-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .78rem;
  transition: transform .2s ease;
}
.quote-count.empty { background: rgba(0,0,0,.25); color: #ffd9b8; }
.quote-count.bump { transform: scale(1.4); }

.search-toggle {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  color: #c6d1dd; border: 1.4px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  transition: all .15s;
}
.search-toggle:hover { border-color: var(--accent); color: var(--gold); background: rgba(255,106,0,.12); }
.search-toggle svg { width: 20px; height: 20px; fill: currentColor; }

.nav-toggle {
  display: none; width: 48px; height: 48px; border-radius: 13px;
  border: 1.4px solid rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.05);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ---------- แถบประกาศ (จาก admin) ---------- */
.announce-bar {
  background: linear-gradient(90deg, var(--navy), #1c4a74); color: #fff; font-size: .93rem;
  position: relative; z-index: 5;
}
.announce-bar .container { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.announce-bar svg { width: 17px; height: 17px; fill: var(--gold); flex: none; }
.announce-bar a { color: var(--gold-soft); font-weight: 700; }
.announce-bar a:hover { text-decoration: underline; }
/* ---------- ประเภทประกาศ 4 แบบ ---------- */
.an-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; animation: an-pulse 1.2s ease-in-out infinite; }
@keyframes an-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.55); } }
.an-urgent { background: linear-gradient(90deg, #b71c1c, #d32f2f); }
.an-urgent svg { fill: #fff; }
.an-urgent .an-dot { background: #ffd7d7; }
.an-holiday { background: linear-gradient(90deg, #8a5000, #c07a12); }
.an-holiday svg { fill: #ffe08a; }
.an-holiday .an-dot { background: #ffe08a; }
.an-holiday b { color: #ffe9b0; font-weight: 700; }
.an-promo { background: var(--grad-fire); color: #fff; overflow: hidden; }
.an-promo .container { flex-wrap: nowrap; }
.an-promo svg { fill: #fff; }
.an-badge { background: #fff; color: #e05300; font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.an-badge svg { width: 14px !important; height: 14px !important; fill: #e05300; }
.an-marq-wrap { flex: 1; min-width: 0; overflow: hidden; }
.an-marq { display: inline-flex; white-space: nowrap; animation: an-marq 18s linear infinite; }
.an-marq .announce-text, .an-marq .announce-text2 { padding-right: 64px; }
@keyframes an-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.an-btn { border: 1.5px solid rgba(255,255,255,.8); color: #fff !important; font-weight: 700; padding: 4px 13px; border-radius: 999px; font-size: .84rem; flex: none; white-space: nowrap; }
.an-btn:hover { background: rgba(255,255,255,.15); text-decoration: none !important; }
.an-shine { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation: an-shine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes an-shine { 0% { left: -35%; } 55%,100% { left: 135%; } }

/* ============================================================
   Hero — หลายชั้น + parallax
   ============================================================ */
.hero {
  position: relative; color: #fff; padding: 0;
  background: var(--ink); overflow: hidden; isolation: isolate;
}
/* แยก background-image ออกจาก shorthand เพื่อให้ admin เปลี่ยนรูปทับได้
   (applyImages() ใน main.js เซ็ต el.style.backgroundImage — ถ้าเขียนรวมใน shorthand
    ค่าที่ตั้งจาก JS จะถูก position/size ของ shorthand ทับจนเพี้ยน) */
.hero-bg {
  position: absolute; inset: -12% 0; z-index: -3;
  background-image: url("../img/storefront.jpg");
  background-position: center 68%;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.1) translateY(-1.6%); } }
.hero-veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(255,106,0,.28), transparent 60%),
    linear-gradient(98deg, rgba(6,9,14,.96) 26%, rgba(6,9,14,.78) 52%, rgba(8,12,18,.45) 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .17; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(95% 85% at 18% 25%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(95% 85% at 18% 25%, #000 0%, transparent 72%);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 48px; align-items: center;
  padding-top: 104px; padding-bottom: 118px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  padding: 9px 18px; border-radius: 999px;
  font-family: var(--font-head); font-size: .85rem; font-weight: 500; color: var(--gold-soft);
  margin-bottom: 26px;
}
.hero h1 {
  color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  text-wrap: balance;
}
.hero h1 .hl {
  background: linear-gradient(92deg, var(--gold-soft), var(--gold) 30%, var(--accent) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 22px rgba(255,140,46,.35));
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hero-tag {
  font-family: var(--font-head); font-weight: 500; font-size: .86rem;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06);
  color: #e9eff5; backdrop-filter: blur(4px);
  transition: all .2s;
}
.hero-tag:hover { border-color: var(--accent); color: var(--gold-soft); background: rgba(255,106,0,.14); transform: translateY(-2px); }
.hero-sub { margin-top: 24px; font-size: 1.12rem; color: #c4cfdc; max-width: 580px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* การ์ดกระจกลอยด้านขวา hero */
.hero-panel {
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 26px; padding: 30px 30px 26px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(4,7,12,.45), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex; flex-direction: column; gap: 18px;
  animation: panel-float 7s ease-in-out infinite alternate;
}
@keyframes panel-float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.open-badge {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(23,163,74,.16); border: 1px solid rgba(23,163,74,.45); color: #7ef0a4;
}
.open-badge.closed { background: rgba(220,38,38,.14); border-color: rgba(248,113,113,.4); color: #fda4a4; }
.open-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: dot-pulse 1.8s ease-out infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(126,240,164,.5); } 100% { box-shadow: 0 0 0 9px rgba(126,240,164,0); } }
.hp-rows { display: flex; flex-direction: column; }
.hp-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px dashed rgba(255,255,255,.16); }
.hp-row:last-child { border-bottom: none; }
.hp-row b {
  font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff, var(--gold-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  min-width: 120px; white-space: nowrap;
}
.hp-row span { color: #b9c6d4; font-size: .9rem; }
.hero-panel .btn { align-self: stretch; }

/* ---------- Ticker วิ่งวนท้าย hero ---------- */
.ticker {
  position: relative; z-index: 2;
  background: var(--grad-fire);
  box-shadow: 0 -8px 30px rgba(255,106,0,.25), 0 14px 40px rgba(255,106,0,.28);
  overflow: hidden; padding: 13px 0;
  margin-top: 0;
}
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker-run 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: inline-flex; align-items: center; }
.ticker-set span {
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: #fff;
  letter-spacing: .04em; padding: 0 18px; display: inline-flex; align-items: center; gap: 18px;
}
.ticker-set span::after { content: "✦"; font-size: .8rem; color: rgba(255,255,255,.75); }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Quick bar (สถิติ + count-up) ---------- */
.quick-bar { position: relative; z-index: 1; background: var(--ink); padding: 74px 0 66px; overflow: hidden; }
.quick-bar::before { content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 66px 66px; }
.quick-bar .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; position: relative; }
.quick-item { position: relative; padding-left: 22px; }
.quick-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 4px; background: var(--grad-fire); box-shadow: 0 0 16px rgba(255,106,0,.55); }
.quick-item .num {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.7rem, 2.9vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15;
  background: linear-gradient(92deg, #fff 20%, var(--gold-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.quick-item .lbl { display: block; margin-top: 6px; font-size: .92rem; color: #93a3b4; }

/* ---------- Brands strip ---------- */
.brands-bar { background: var(--surface); border-bottom: 1px solid var(--line-soft); padding: 30px 0; }
.brands-bar-inner { display: flex; align-items: center; gap: 28px; }
.brands-label {
  flex: none; font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: var(--txt-faint); letter-spacing: .18em; text-transform: uppercase;
  border-right: 2px solid var(--line-soft); padding-right: 28px;
}
.brand-strip { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; overflow: hidden; flex: 1; }
/* กล่องโลโก้ขนาดเท่ากันทุกแบรนด์ — รูปถูกย่อให้พอดีกล่องทั้งใบ เห็นเต็มโลโก้เสมอ */
.brand-chip { flex: none; display: flex; align-items: center; justify-content: center; width: 112px; height: 54px; }
.brand-chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .95; transition: opacity .25s, transform .25s; }
.brand-chip:hover img { opacity: 1; transform: scale(1.08); }
.brand-strip.marquee { flex-wrap: nowrap; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.brand-track { display: inline-flex; animation: marquee linear infinite; }
.brand-strip.marquee:hover .brand-track { animation-play-state: paused; }
.brand-set { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   โปรโมชั่น
   ============================================================ */
.promo-section { padding: 96px 0 0; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 380px)); gap: 26px; justify-content: center; }
.promo-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-1); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.2,.8,.24,1), box-shadow .25s ease;
}
.promo-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); }
.promo-img { display: block; overflow: hidden; position: relative; }
.promo-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(255,106,0,0) 65%, rgba(255,106,0,.16)); opacity: 0; transition: opacity .3s; }
.promo-card:hover .promo-img::after { opacity: 1; }
.promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.24,1); }
.promo-card:hover .promo-img img { transform: scale(1.06); }
.promo-img.r-11 { aspect-ratio: 1/1; } .promo-img.r-45 { aspect-ratio: 4/5; }
.promo-img.r-169 { aspect-ratio: 16/9; } .promo-img.r-auto img { height: auto; }
.promo-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.promo-body h3 { font-size: 1.16rem; }
.promo-body p { color: var(--txt-soft); font-size: .94rem; flex: 1; }
.promo-body .btn { align-self: flex-start; margin-top: 6px; }

/* ============================================================
   การ์ดสินค้า
   ============================================================ */
.prod-grid, .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 24px; }
.prod-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; position: relative;
  transition: transform .25s cubic-bezier(.2,.8,.24,1), box-shadow .25s ease, border-color .25s ease;
}
.prod-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); border-color: #f3c59a; }
/* กรอบรูปสินค้า — สินค้าที่ยังไม่มีรูปจะเห็นพื้นกระดาษอุ่น + ลายตารางพิมพ์เขียว
   (โทนเดียวกับทั้งเว็บ ไม่ใช่กล่องเทาที่ดูเหมือนรูปโหลดไม่ขึ้น) */
.card-photo {
  aspect-ratio: 4/3; background: linear-gradient(150deg, #f8f3e9, #ebe3d3);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.card-photo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,48,78,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,48,78,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 46%, #000 12%, transparent 74%);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.24,1); position: relative; z-index: 1; }
.prod-card:hover .card-photo img { transform: scale(1.07); }
.card-photo .ph-icon {
  width: 62px; height: 62px; fill: #c9a273; position: relative; z-index: 1;
  filter: drop-shadow(0 3px 6px rgba(20,48,78,.14));
}
.prod-badge {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(10,14,21,.88); color: #fff; backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(10,14,21,.3);
}
.prod-badge.hot { background: var(--grad-fire); box-shadow: 0 5px 14px rgba(255,106,0,.4); }
.prod-info { padding: 18px 19px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.prod-cat { font-size: .73rem; font-weight: 700; color: var(--accent-hot); letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-head); }
.prod-name { font-size: 1.04rem; font-weight: 600; line-height: 1.35; }
.prod-spec { font-size: .87rem; color: var(--txt-soft); flex: 1; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.prod-price small {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-hot); font-size: .78rem; font-family: var(--font-head); font-weight: 600;
  background: var(--accent-soft); border: 1px solid #fcd0a4; border-radius: 999px; padding: 3px 10px;
}
.prod-price small::before { content: "฿"; font-weight: 700; opacity: .75; }
.prod-add {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: .88rem;
  color: var(--accent-hot); border: 1.6px solid var(--accent);
  padding: 9px 17px; border-radius: 999px; background: #fff;
  transition: all .2s ease;
}
.prod-add svg { width: 16px; height: 16px; fill: currentColor; }
.prod-add:hover { background: var(--grad-fire); border-color: transparent; color: #fff; box-shadow: var(--shadow-accent); transform: translateY(-2px); }
.prod-add.added { background: var(--ok); border-color: var(--ok); color: #fff; }
/* ปุ่มสอบถามรุ่น (หมวดกระเบื้อง) — เขียว LINE ให้ต่างจากปุ่มเพิ่มในตะกร้า */
.prod-add.prod-ask { color: #06c755; border-color: #06c755; }
.prod-add.prod-ask:hover { background: #06c755; border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(6,199,85,.28); }

/* แบนเนอร์อธิบายหมวดกระเบื้อง (สั่งจากแคตตาล็อก) */
.tile-notice {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fff7ed, #fff);
  border: 1px solid #fed7aa; border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 4px;
}
.tile-notice h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 1.08rem; color: var(--ink); margin: 0 0 8px;
}
.tile-notice h3 svg { width: 22px; height: 22px; fill: var(--accent); }
.tile-notice p { font-size: .92rem; color: #475569; margin: 0 0 10px; line-height: 1.65; }
.tile-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tile-brands span { font-size: .88rem; color: #64748b; }
.tile-brands a {
  font-family: var(--font-head); font-weight: 600; font-size: .86rem;
  color: var(--accent-hot); background: #fff; border: 1.4px solid var(--accent);
  padding: 5px 14px; border-radius: 999px; text-decoration: none; transition: all .18s ease;
}
.tile-brands a:hover { background: var(--grad-fire); border-color: transparent; color: #fff; }
.tile-notice .tile-warn {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .86rem; color: #92400e; background: #fffbeb;
  border-radius: 8px; padding: 9px 12px; margin: 0;
}
.tile-notice .tile-warn svg { width: 17px; height: 17px; fill: #d97706; flex: none; margin-top: 2px; }

/* การ์ดชวนถาม */
.ask-card { background: linear-gradient(155deg, var(--ink), var(--ink-3)); border: none; justify-content: center; overflow: hidden; }
.ask-card::before { content: ""; position: absolute; right: -46px; top: -46px; width: 190px; height: 190px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,106,0,.35), transparent 70%); }
.ask-card .ask-body { padding: 32px 28px; display: flex; flex-direction: column; gap: 13px; position: relative; }
.ask-card h3 { color: #fff; font-size: 1.28rem; }
.ask-card p { color: #b3c1d0; font-size: .91rem; }
.ask-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ask-card .btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.ask-card .btn-ghost:hover { background: #fff; color: var(--ink); }

/* แถบชวนเช็คราคา */
.ask-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(95deg, #fff5e8, #fff9ec);
  border: 1px dashed #f8b878; border-radius: var(--radius-sm);
  padding: 16px 24px; margin-bottom: 28px;
}
.ask-bar p { font-size: .95rem; color: #7c3d12; }

/* ============================================================
   หมวดสินค้า (การ์ดหน้าแรก) — hover กลับสีเป็นดำ
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 24px; }
.cat-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px 26px 24px; overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .25s cubic-bezier(.2,.8,.24,1), box-shadow .25s, background .3s ease, border-color .3s;
}
.cat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad-fire);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.cat-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); background: var(--ink-2); border-color: var(--ink-2); }
.cat-card:hover::before { transform: scaleX(1); }
.cat-thumbs { display: flex; gap: 8px; margin-bottom: 8px; }
.cat-thumb { width: 60px; height: 60px; border-radius: 13px; overflow: hidden; border: 1px solid var(--line-soft); flex: none; background: #fff; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-num {
  position: absolute; top: 12px; right: 20px;
  font-family: var(--font-head); font-weight: 800; font-size: 2.1rem;
  color: transparent; -webkit-text-stroke: 1.3px rgba(10,14,21,.13);
  letter-spacing: -.02em; transition: -webkit-text-stroke-color .3s;
}
.cat-card:hover .cat-num { -webkit-text-stroke-color: rgba(255,140,46,.55); }
.cat-card h3 { font-size: 1.12rem; transition: color .3s; }
.cat-card p { font-size: .87rem; color: var(--txt-soft); flex: 1; transition: color .3s; }
.cat-count { font-size: .78rem; font-weight: 700; color: var(--accent-hot); transition: color .3s; }
.cat-card:hover h3 { color: #fff; }
.cat-card:hover p { color: #9db0c2; }
.cat-card:hover .cat-count { color: var(--gold); }
.cat-go {
  position: absolute; right: 20px; bottom: 18px;
  font-weight: 700; font-size: 1.2rem; color: var(--gold); opacity: 0; transform: translateX(-8px);
  transition: all .25s ease;
}
.cat-card:hover .cat-go { opacity: 1; transform: none; }

/* ============================================================
   ขั้นตอนสั่งซื้อ / ค่านิยม — เลข ghost ใหญ่
   ============================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); gap: 22px; }
.step-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 24px 26px; position: relative; box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.24,1), box-shadow .25s;
}
.step-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-fire); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.step-card:hover::after { transform: scaleY(1); }
.step-num {
  position: absolute; top: 6px; right: 14px;
  font-family: var(--font-head); font-weight: 800; font-size: 3.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.6px rgba(255,106,0,.35);
  pointer-events: none; user-select: none;
}
.step-card h3 { font-size: 1.06rem; margin-bottom: 8px; padding-right: 44px; }
.step-card p { font-size: .9rem; color: var(--txt-soft); }
.step-cta { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.step-line { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .89rem; color: var(--green-dark); }
.step-line svg { width: 17px; height: 17px; fill: currentColor; }
.step-line:hover { text-decoration: underline; }
.step-line.step-call { color: var(--navy); }

/* ============================================================
   รูปหน้าร้าน — caption เลื่อนขึ้น
   ============================================================ */
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.photo-strip figure { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-1); }
.photo-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.24,1); }
.photo-strip figure:hover img { transform: scale(1.07); }
.photo-strip figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 15px;
  background: linear-gradient(transparent, rgba(6,9,14,.9));
  color: #fff; font-family: var(--font-head); font-weight: 500; font-size: .93rem;
  transform: translateY(6px); opacity: .92; transition: all .3s ease;
}
.photo-strip figure:hover figcaption { transform: none; opacity: 1; }
.photo-strip figcaption::before { content: ""; display: block; width: 30px; height: 3px; border-radius: 3px;
  background: var(--grad-fire); margin-bottom: 8px; }

/* ============================================================
   Bento USP (หน้าแรก)
   ============================================================ */
.bento-section { background: var(--ink); padding: 100px 0; overflow: hidden; position: relative; }
.bento-section::before { content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 66px 66px; }
.bento-section .section-head h2 { color: #fff; }
.bento-section .section-head p { color: #93a3b4; }
.bento-section .section-head .eyebrow { color: var(--gold); }
.bento-section .section-head .eyebrow::before { background: var(--gold); }
.bento-section .section-head .ghost { -webkit-text-stroke-color: rgba(255,255,255,.09); }
.bento-grid {
  display: grid; gap: 22px; position: relative;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 205px;
}
.bento-card {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-3));
  border: 1px solid rgba(255,255,255,.09);
  padding: 26px 26px 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  transition: transform .28s cubic-bezier(.2,.8,.24,1), border-color .28s;
}
.bento-card:hover { transform: translateY(-6px); border-color: rgba(255,140,46,.5); }
.bento-card.b-lg { grid-column: span 2; grid-row: span 2; }
.bento-card.b-wide { grid-column: span 2; }
.bento-card .b-img { position: absolute; inset: 0; z-index: 0; }
.bento-card .b-img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform .6s ease, opacity .3s; }
.bento-card:hover .b-img img { transform: scale(1.05); opacity: .62; }
.bento-card .b-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(8,12,18,.1) 20%, rgba(8,12,18,.94) 88%); }
.bento-card .icon {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: auto;
  background: rgba(255,106,0,.16); border: 1px solid rgba(255,106,0,.45);
  backdrop-filter: blur(6px);
}
.bento-card .icon svg { width: 25px; height: 25px; fill: var(--accent-2); }
.bento-card h3 { position: relative; z-index: 1; color: #fff; font-size: 1.22rem; }
.bento-card.b-lg h3 { font-size: 1.55rem; }
.bento-card p { position: relative; z-index: 1; color: #a7b6c6; font-size: .92rem; max-width: 420px; }
.bento-card .b-link { position: relative; z-index: 1; margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--gold); }
.bento-card .b-link svg { width: 16px; height: 16px; fill: currentColor; transition: transform .2s; }
.bento-card:hover .b-link svg { transform: translateX(4px); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--grad-fire);
  border-radius: 28px; padding: 54px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  box-shadow: var(--shadow-accent);
}
.cta-band::before { content: ""; position: absolute; right: -70px; top: -70px; width: 270px; height: 270px;
  border-radius: 50%; background: rgba(255,255,255,.15); }
.cta-band::after { content: ""; position: absolute; right: 80px; bottom: -110px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.1); }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.cta-band p { color: rgba(255,255,255,.93); margin-top: 8px; max-width: 540px; font-size: 1.03rem; }
.cta-band .btns { display: flex; gap: 13px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-band .btn-primary { background: var(--ink); box-shadow: 0 12px 28px rgba(6,9,14,.4); }
.cta-band .btn-line { box-shadow: 0 12px 28px rgba(4,110,46,.4); }

/* ============================================================
   Contact / แผนที่
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }
.contact-cards { display: flex; flex-direction: column; gap: 17px; }
.contact-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 20px 21px; box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.contact-card .icon {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid #fcd0a4;
}
.contact-card .icon svg { width: 22px; height: 22px; fill: var(--accent-hot); }
.contact-card h3 { font-size: 1rem; margin-bottom: 3px; }
.contact-card p { font-size: .9rem; color: var(--txt-soft); }
.contact-card a.big { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--accent-hot); }
.contact-card a.big:hover { text-decoration: underline; }
/* แผนที่ — ครอบด้วยแผงมีหัวแถบเข้ม ให้เข้าชุดกับการ์ดอื่น แทน iframe ลอยเปล่าๆ
   พื้นด้านหลังเป็นสีเข้ม+ลายพิมพ์เขียว จึงไม่เห็นสี่เหลี่ยมขาวแฟลชตอนแผนที่ยังโหลดไม่เสร็จ */
.map-panel {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  border: 1px solid var(--ink-4); background: var(--ink-2);
  background-image:
    linear-gradient(rgba(122,162,214,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,162,214,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  min-height: 440px;
}
.map-panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; background: rgba(10,14,21,.72); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.map-panel-head svg { width: 19px; height: 19px; fill: var(--accent); flex: none; }
.map-panel-head b { font-family: var(--font-head); color: #fff; font-size: .97rem; font-weight: 600; }
.map-panel-head small { color: #9fb0c4; font-size: .82rem; }
.map-panel-head .map-go {
  margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  color: var(--gold); border: 1px solid rgba(242,179,61,.42); border-radius: 999px;
  padding: 6px 15px; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.map-panel-head .map-go:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
.map-panel .map-frame { flex: 1; border-radius: 0; box-shadow: none; min-height: 380px; }
.map-frame { width: 100%; min-height: 440px; height: 100%; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); background: var(--ink-2); }
@media (max-width: 560px) {
  .map-panel-head { padding: 12px 14px; }
  .map-panel-head .map-go { margin-left: 0; width: 100%; text-align: center; }
}

.hours-table { border-collapse: collapse; width: 100%; font-size: .92rem; margin-top: 4px; }
.hours-table td { padding: 5px 12px 5px 0; color: var(--txt-soft); }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--txt); }
.hours-table tr.today td { color: var(--accent-hot); font-weight: 700; }
.hours-table tr.today td:first-child::after {
  content: "วันนี้"; margin-left: 8px; font-size: .68rem; font-weight: 700; color: #fff;
  background: var(--grad-fire); border-radius: 999px; padding: 2px 9px; vertical-align: 2px;
}

/* ============================================================
   Page hero (หน้าใน) — ghost word + ตารางพิมพ์เขียว
   ============================================================ */
.page-hero {
  position: relative; color: #fff; padding: 82px 0 72px;
  background:
    radial-gradient(900px 400px at 88% -20%, rgba(255,106,0,.22), transparent 60%),
    linear-gradient(115deg, var(--ink) 35%, var(--ink-3));
  overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(90% 100% at 30% 0%, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(90% 100% at 30% 0%, #000, transparent 85%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .ghost-word {
  position: absolute; right: -6px; bottom: -30px; z-index: 0;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.1);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.015em; }
.page-hero p { margin-top: 12px; color: #b3c1d0; max-width: 660px; font-size: 1.05rem; }
.breadcrumb { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: #8a99aa; margin-bottom: 18px;
  font-family: var(--font-head); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: 7px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
.breadcrumb a { color: #c0cddb; } .breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--accent); }

/* ============================================================
   หน้าสินค้า: filter + ค้นหา
   ============================================================ */
.catalog-layout { display: grid; grid-template-columns: 256px 1fr; gap: 32px; align-items: start; }
.filter-panel {
  position: sticky; top: 104px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-1);
}
.filter-panel h3 { display: flex; align-items: center; gap: 8px; font-size: .97rem; margin-bottom: 14px; }
.filter-panel h3 svg { width: 18px; height: 18px; fill: var(--accent); }
.filter-list { display: flex; flex-direction: column; gap: 4px; }
.filter-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  text-align: left; padding: 10px 14px; border-radius: 11px;
  font-family: var(--font-head); font-weight: 500; font-size: .9rem; color: var(--txt-soft);
  transition: all .15s;
}
.filter-list button:hover { background: var(--accent-soft); color: var(--accent-hot); }
.filter-list button.active { background: var(--grad-fire); color: #fff; box-shadow: 0 6px 15px rgba(255,106,0,.35); }
.filter-list .count { font-size: .74rem; opacity: .78; font-weight: 600; }

.catalog-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 250px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1.6px solid var(--line-soft);
  border-radius: 999px; padding: 4px 8px 4px 20px;
  transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,106,0,.16); }
.search-box svg { width: 19px; height: 19px; fill: var(--txt-faint); flex: none; }
.search-box input { flex: 1; border: none; outline: none; background: none; padding: 11px 0; font-size: .97rem; }
.result-count { font-size: .87rem; color: var(--txt-faint); font-family: var(--font-head); }

.no-results { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--txt-soft); }
.no-results svg { width: 48px; height: 48px; fill: var(--txt-faint); margin: 0 auto 14px; }

/* ============================================================
   หน้าแคตตาล็อกผู้ผลิต
   ============================================================ */
.cata-group { margin-bottom: 48px; }
.cata-head { font-size: 1.35rem; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.cata-head::before { content: ""; width: 5px; height: 26px; border-radius: 4px; background: var(--grad-fire); }
.cata-head::after { content: ""; flex: 1; height: 1.6px; background: linear-gradient(90deg, var(--line-soft), transparent); }
.cata-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 20px; }
.cata-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 20px 21px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
}
/* การ์ดแคตตาล็อกเดิม "จืด" กว่าการ์ดอื่นทั้งเว็บ — เติมแถบ accent + ลูกศรขยับ ให้เข้าชุดกัน */
.cata-card { position: relative; overflow: hidden; }
.cata-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-fire); transform: scaleY(0); transform-origin: top; transition: transform .28s ease;
}
.cata-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: #f3c59a; }
.cata-card:hover::after { transform: scaleY(1); }
.cata-top { display: flex; align-items: center; gap: 11px; }
/* แบรนด์ที่ไม่มีไฟล์โลโก้ ต้องกินที่เท่ากันไม่งั้นแถวเยื้องกัน — ใช้ตัวอักษรแรกแทน */
.cata-top::before {
  content: attr(data-initial); flex: none; order: -1;
  width: 44px; height: 44px; border-radius: 11px; display: none; place-items: center;
  background: var(--accent-soft); border: 1px solid #fcd0a4;
  font-family: var(--font-head); font-weight: 700; color: var(--accent-hot); font-size: 1.05rem;
}
.cata-top.no-logo::before { display: grid; }
.cata-logo { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line-soft); overflow: hidden; flex: none; display: grid; place-items: center; background: #fff; }
.cata-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cata-brand { font-family: var(--font-head); font-weight: 600; font-size: .84rem; color: var(--accent-hot); }
/* เดิม h3 ตั้ง flex:1 ทำให้การ์ดชื่อสั้นมีช่องว่างค้างกลางใบ — ดัน CTA ไปติดก้นการ์ดแทน */
.cata-card h3 { font-size: 1.02rem; line-height: 1.4; }
.cata-card p { font-size: .85rem; color: var(--txt-soft); }
.cata-open {
  font-size: .87rem; font-weight: 700; color: var(--navy); font-family: var(--font-head);
  margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  border-top: 1px dashed var(--line-soft);
}
.cata-card:hover .cata-open { color: var(--accent-hot); }
.cata-open::after { content: "→"; transition: transform .22s ease; }
.cata-card:hover .cata-open::after { transform: translateX(4px); }
/* ลิงก์ออกเว็บแบรนด์ ให้ต่างจากไฟล์ PDF ชัดเจน (class นี้ถูก render อยู่แล้วแต่ไม่เคยมีสไตล์) */
.cata-open.cata-ext { color: var(--txt-soft); }
.cata-open.cata-ext::after { content: "↗"; }
.cata-card:hover .cata-open.cata-ext { color: var(--navy); }

/* ============================================================
   หน้าบริการ
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; }
.svc-card {
  display: flex; gap: 19px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.24,1), box-shadow .25s;
}
.svc-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-fire); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: #f3c59a; }
.svc-icon { transition: transform .3s cubic-bezier(.2,.8,.24,1), box-shadow .3s ease; }
.svc-card:hover .svc-icon { transform: rotate(-6deg) scale(1.06); box-shadow: 0 14px 28px rgba(255,106,0,.42); }
.svc-card:hover::after { transform: scaleY(1); }
.svc-icon {
  flex: none; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center;
  background: var(--grad-fire);
  box-shadow: 0 10px 22px rgba(255,106,0,.35);
}
.svc-icon svg { width: 27px; height: 27px; fill: #fff; }
.svc-card h3 { font-size: 1.16rem; margin-bottom: 6px; }
.svc-card > div > p { font-size: .93rem; color: var(--txt-soft); margin-bottom: 12px; }
.svc-card ul { display: flex; flex-direction: column; gap: 8px; }
.svc-card li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--txt); }
.svc-card li svg { width: 16px; height: 16px; fill: var(--ok); flex: none; margin-top: 4px; }
/* การ์ดเรือธง (พื้น SPC) — มี 7 ใบ แถวสุดท้ายเหลือใบเดียว ให้เต็มแถวแบบตั้งใจ
   ไม่ใช่ใบเดี่ยวยืดจนดูเหมือน layout พัง + ป้าย "แนะนำ" กำกับว่าจงใจ */
.svc-card.svc-feature {
  grid-column: 1 / -1;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255,140,46,.10), transparent 58%),
    var(--surface);
  border-color: #f3c59a;
}
.svc-card.svc-feature::after { transform: scaleY(1); }
.svc-card.svc-feature .svc-icon { width: 66px; height: 66px; border-radius: 20px; }
.svc-card.svc-feature .svc-icon svg { width: 31px; height: 31px; }
.svc-card.svc-feature h3 { font-size: 1.3rem; }
.svc-card.svc-feature h3::after {
  content: "แนะนำ"; display: inline-block; vertical-align: middle; margin-left: 10px;
  font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--accent-hot); border-radius: 999px; padding: 3px 11px;
  transform: translateY(-2px);
}
@media (min-width: 861px) {
  .svc-card.svc-feature ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
}

/* ============================================================
   หน้าเกี่ยวกับเรา
   ============================================================ */
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.about-visual { position: relative; }
.about-visual::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border-radius: 26px; background: var(--grad-fire); opacity: .18; }
.about-visual img { border-radius: 24px; box-shadow: var(--shadow-2); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
.year-badge {
  position: absolute; left: -20px; bottom: -24px;
  background: var(--grad-fire); color: #fff;
  border-radius: 20px; padding: 20px 24px; max-width: 240px;
  box-shadow: var(--shadow-accent);
}
.year-badge .year { font-family: var(--font-head); font-weight: 800; font-size: 2.3rem; line-height: 1; }
.year-badge .cap { font-size: .83rem; opacity: .95; margin-top: 6px; }
.about-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; font-weight: 800; letter-spacing: -.01em; }
.about-text p { color: var(--txt-soft); margin-bottom: 14px; font-size: 1.03rem; }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 78px 36px 1fr; gap: 6px; }
.tl-year { font-family: var(--font-head); font-weight: 800; color: var(--accent-hot); font-size: 1.12rem; text-align: right; padding-top: 1px; }
.tl-line { position: relative; display: flex; justify-content: center; }
/* เส้นเชื่อมเดิมจางจนแทบไม่เห็นบนพื้นกระดาษ (opacity .5 + จางลงตั้งแต่ 60%) — เพิ่มน้ำหนักให้อ่านออก */
.tl-line::before { content: ""; position: absolute; top: 6px; bottom: -6px; width: 2.5px;
  background: linear-gradient(var(--accent) 0%, #d9b48a 55%, var(--line-soft) 100%); opacity: .95; }
.tl-item:last-child .tl-line::before { bottom: auto; height: 20px; }
.tl-item { transition: transform .22s ease; }
.tl-item:hover { transform: translateX(4px); }
.tl-item:hover .tl-dot { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(255,106,0,.16); }
.tl-dot { transition: transform .22s ease, box-shadow .22s ease; }
/* หมุดล่าสุด = "วันนี้" ให้ต่างจากอดีต */
.tl-item:last-child .tl-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(255,106,0,.18); }
.tl-item:last-child .tl-year { color: var(--accent-hot); font-weight: 800; }
.tl-dot {
  position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 6px;
  border-radius: 50%; background: var(--grad-fire);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.tl-body { padding: 0 0 38px 10px; }
.tl-body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.tl-body p { font-size: .92rem; color: var(--txt-soft); }

/* ============================================================
   ฟอร์ม
   ============================================================ */
.form-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 38px 38px 32px; box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-fire); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink); }
.form-field .req { color: var(--accent-hot); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.6px solid var(--line-soft); border-radius: 12px; padding: 12px 16px;
  background: #fbf9f3; font-size: .97rem; color: var(--txt);
  transition: border-color .15s, box-shadow .15s, background .15s; outline: none; width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(255,106,0,.14);
}
.form-field textarea { min-height: 135px; resize: vertical; }
.form-hint { font-size: .78rem; color: var(--txt-faint); }

/* ============================================================
   เครื่องคำนวณ
   ============================================================ */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.calc-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem; color: var(--txt-soft);
  background: var(--surface); border: 1.6px solid var(--line-soft);
  padding: 11px 20px; border-radius: 999px; transition: all .18s;
}
.calc-tab svg { width: 17px; height: 17px; fill: currentColor; }
.calc-tab:hover { border-color: var(--accent); color: var(--accent-hot); transform: translateY(-2px); }
.calc-tab.active {
  background: var(--grad-fire); border-color: transparent;
  color: #fff; box-shadow: var(--shadow-accent);
}
/* มือถือ: 9 ปุ่มห่อเป็น 4-5 แถวไม่เท่ากัน ดูรก → เปลี่ยนเป็นแถบเลื่อนแนวนอนแถวเดียว
   มีเงาจางบอกว่ายังเลื่อนต่อได้ และดีดปุ่มที่เลือกมากลางจอให้เอง (calculator.js) */
@media (max-width: 640px) {
  .calc-tabs {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding: 2px 22px 10px; margin-left: -22px; margin-right: -22px; margin-bottom: 26px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .calc-tabs::-webkit-scrollbar { display: none; }
  .calc-tab { flex: none; scroll-snap-align: center; }
}
.calc-panel { display: none; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1020px; margin: 0 auto; }
.calc-panel.active { display: grid; animation: panel-in .35s cubic-bezier(.2,.8,.24,1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }
.calc-form, .calc-result {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 30px 28px; box-shadow: var(--shadow-1);
}
/* แท็บที่มีช่องกรอกน้อย การ์ดซ้ายจะเหลือที่ว่างใหญ่ใต้ฟอร์ม (เพราะยืดสูงเท่าการ์ดผลลัพธ์)
   → เติมลายตารางพิมพ์เขียวจางที่มุมล่างขวา ให้ที่ว่างกลายเป็นพื้นผิวที่ตั้งใจ */
.calc-form { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.calc-form > * { position: relative; z-index: 1; }
.calc-form::after {
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 260px; height: 260px;
  background-image:
    linear-gradient(rgba(20,48,78,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,48,78,.11) 1px, transparent 1px);
  background-size: 24px 24px; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 8%, transparent 72%);
          mask-image: radial-gradient(circle at 100% 100%, #000 8%, transparent 72%);
}
.calc-form h3, .calc-result h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; margin-bottom: 20px; }
.calc-form h3 svg { width: 21px; height: 21px; fill: var(--accent); flex: none; }
.calc-result { background: linear-gradient(165deg, var(--ink), var(--ink-3)); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow-2); }
.calc-result h3 { color: #fff; }
.calc-result-rows { display: flex; flex-direction: column; }
.calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 2px; border-bottom: 1px dashed rgba(255,255,255,.15);
  font-size: .93rem; color: #bfcbd9;
}
.calc-row strong { font-family: var(--font-head); font-size: 1.2rem; white-space: nowrap; font-weight: 700;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.calc-row strong small { -webkit-text-fill-color: #93a3b4; font-weight: 400; font-size: .78rem; margin-left: 5px; }
.calc-disclaimer { font-size: .78rem; color: #93a3b4; margin: 15px 0; line-height: 1.6; }
/* กล่องจุดขาย "เอเย่นต์ตราเพชร สั่งได้ทั้งเซต" — เฉพาะแท็บหลังคา */
.roof-agent-box {
  font-size: .85rem; line-height: 1.6; color: #fff5e8;
  background: linear-gradient(135deg, rgba(249,115,22,.22), rgba(249,115,22,.08));
  border: 1px solid rgba(249,115,22,.45); border-radius: 10px;
  padding: 11px 14px; margin: 4px 0 14px;
}
.roof-agent-box b { color: #ffd9b0; }
.calc-result.is-empty .roof-agent-box { display: none; }
/* แถวแรก = คำตอบหลักที่ลูกค้าตามหา ทำให้เด่นกว่าแถวรอง */
.calc-result-rows .calc-row:first-child { padding-top: 4px; }
.calc-result-rows .calc-row:first-child strong { font-size: 1.62rem; }
.calc-result-rows .calc-row:first-child span { color: #cfdae6; font-weight: 600; }
.calc-row { transition: background .18s ease; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.calc-row:hover { background: rgba(255,255,255,.045); }
/* ยังไม่กรอกตัวเลข = ซ่อนบันไดเลข 0 แล้วขึ้นข้อความชวนกรอกแทน */
.calc-result.is-empty .calc-result-rows, .calc-result.is-empty .calc-disclaimer { display: none; }
.calc-empty { display: none; padding: 26px 4px 20px; text-align: center; color: #93a3b4; font-size: .92rem; }
.calc-result.is-empty .calc-empty { display: block; }
.calc-empty b { display: block; color: #fff; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 6px; }
.calc-disclaimer-global {
  border-top: 1px solid rgba(255,255,255,.13); padding: 13px 0 0 26px; position: relative;
  font-size: .74rem; color: #7e8c9c; line-height: 1.55;
}
.calc-disclaimer-global::before {
  content: "!"; position: absolute; left: 0; top: 14px;
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(242,179,61,.18); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
}
.calc-result .btn { margin-top: 4px; }

/* ============================================================
   Footer — ลายน้ำ CRD
   ============================================================ */
.site-footer { background: #070b11; color: #93a3b4; padding: 80px 0 0; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, transparent 14px 28px); opacity: .8; }
.site-footer::after {
  content: "CRD 1993"; position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
  font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 17vw, 15rem); line-height: 1;
  letter-spacing: .04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.045);
  pointer-events: none; user-select: none;
}
.footer-main {
  display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr; gap: 40px;
  padding-bottom: 52px; position: relative; z-index: 1;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: .02em; }
.footer-brand p { font-size: .91rem; margin-top: 17px; max-width: 310px; }
.footer-brand .logo-text strong { color: #fff; }
.footer-brand .logo-text span { color: #6e7f90; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  transition: all .2s;
}
.footer-social a:hover { background: var(--grad-fire); border-color: transparent; transform: translateY(-4px); box-shadow: 0 10px 22px rgba(255,106,0,.35); }
.footer-social svg { width: 19px; height: 19px; fill: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .91rem; color: #93a3b4; transition: color .15s, transform .15s; }
.footer-links a:hover { color: var(--gold); transform: translateX(4px); }
.footer-links svg { width: 15px; height: 15px; fill: var(--accent); flex: none; }
.footer-contact { display: flex; flex-direction: column; gap: 13px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .91rem; }
.footer-contact svg { width: 17px; height: 17px; fill: var(--accent); flex: none; margin-top: 4px; }
.footer-contact a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .8rem; color: #61707f; position: relative; z-index: 1;
}

/* ============================================================
   Quote drawer (ตะกร้าใบเสนอราคา)
   ============================================================ */
.quote-overlay {
  position: fixed; inset: 0; background: rgba(6,9,14,.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90;
}
.quote-overlay.open { opacity: 1; pointer-events: auto; }
.quote-drawer {
  position: fixed; top: 0; right: 0; width: min(440px, 100vw); height: 100vh; height: 100dvh;
  background: var(--paper); z-index: 95; display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform .34s cubic-bezier(.2,.8,.24,1);
  box-shadow: -20px 0 60px rgba(6,9,14,.35);
}
.quote-drawer.open { transform: none; }
.quote-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 21px 24px; background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.quote-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-fire); }
.quote-head h3 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.05rem; }
.quote-head svg { width: 20px; height: 20px; fill: var(--gold); }
.quote-close { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); transition: background .15s; }
.quote-close:hover { background: rgba(255,255,255,.22); }
.quote-close svg { width: 20px; height: 20px; }
.quote-items { flex: 1; overflow-y: auto; padding: 18px 19px; display: flex; flex-direction: column; gap: 13px; }
.quote-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 14px 15px; box-shadow: var(--shadow-1);
}
.quote-item-info { flex: 1; min-width: 0; }
.quote-item-info .nm { font-family: var(--font-head); font-weight: 600; font-size: .91rem; line-height: 1.35; }
.quote-item-info .sp { font-size: .77rem; color: var(--txt-faint); margin-top: 2px; }
.qty-ctrl { display: flex; align-items: center; gap: 2px; border: 1.4px solid var(--line-soft); border-radius: 999px; padding: 2px; }
.qty-ctrl button { width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; font-weight: 700; color: var(--txt-soft); transition: all .12s; }
.qty-ctrl button:hover { background: var(--accent); color: #fff; }
.qty-ctrl input { width: 40px; text-align: center; border: none; outline: none; background: none; font-weight: 700; font-size: .93rem; -moz-appearance: textfield; }
.qty-ctrl input::-webkit-outer-spin-button, .qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quote-remove { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; color: var(--txt-faint); transition: all .12s; flex: none; }
.quote-remove:hover { background: #fee2e2; color: #dc2626; }
.quote-remove svg { width: 17px; height: 17px; fill: currentColor; }
.quote-empty { text-align: center; color: var(--txt-faint); padding: 56px 18px; }
.quote-empty svg { width: 48px; height: 48px; fill: var(--line-soft); margin: 0 auto 12px; }
.quote-foot { padding: 17px 19px 21px; background: var(--surface); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; }
.quote-note { font-size: .78rem; color: var(--txt-faint); text-align: center; }
/* ปุ่มรอง 2 อันเรียงคู่ — LINE ยังเป็นปุ่มหลักเต็มความกว้างด้านบน ลิ้นชักไม่ยาวเกินจอมือถือ */
.quote-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quote-alt .btn { padding-left: 10px; padding-right: 10px; font-size: .87rem; }
.quote-clear { font-size: .8rem; color: var(--txt-faint); text-align: center; padding: 4px; }
.quote-clear:hover { color: #dc2626; text-decoration: underline; }

/* ============================================================
   Search overlay (ค้นหาด่วนทุกหน้า)
   ============================================================ */
.search-overlay {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(6,9,14,.66); backdrop-filter: blur(6px);
  display: none; padding: 9vh 18px 18px;
}
.search-overlay.open { display: flex; justify-content: center; align-items: flex-start; }
.search-modal {
  width: min(660px, 100%); background: var(--paper); border-radius: 22px; overflow: hidden;
  box-shadow: 0 36px 90px rgba(0,0,0,.5); display: flex; flex-direction: column; max-height: 76vh;
  animation: pop-in .24s cubic-bezier(.2,.8,.24,1);
  border: 1px solid rgba(255,255,255,.12);
}
@keyframes pop-in { from { transform: translateY(16px) scale(.97); opacity: 0; } }
.search-modal-head { display: flex; align-items: center; gap: 12px; padding: 17px 22px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.search-modal-head svg { width: 21px; height: 21px; fill: var(--accent); flex: none; }
.search-modal-head input { flex: 1; border: none; outline: none; background: none; font-size: 1.08rem; font-family: var(--font-head); min-width: 0; }
.search-modal-head kbd {
  font-size: .7rem; color: var(--txt-faint); border: 1px solid var(--line-soft); border-bottom-width: 2.5px;
  border-radius: 6px; padding: 3px 8px; font-family: var(--font-head); white-space: nowrap;
}
.search-results { overflow-y: auto; padding: 10px; }
.search-hint { padding: 28px 18px; text-align: center; color: var(--txt-faint); font-size: .92rem; }
.search-hint .btn { margin-top: 13px; }
.search-result {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 12px 14px; border-radius: 14px; transition: background .12s;
}
.search-result:hover { background: var(--accent-soft); }
.search-result .thumb {
  width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: none;
  background: #e9ecf0; display: grid; place-items: center; border: 1px solid var(--line-soft);
}
.search-result .thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-result .thumb svg { width: 23px; height: 23px; fill: #b7c2ce; }
.search-result .sr-info { flex: 1; min-width: 0; }
.search-result .sr-name { font-family: var(--font-head); font-weight: 600; font-size: .95rem; }
.search-result .sr-spec { font-size: .78rem; color: var(--txt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result .sr-add {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--accent-hot);
  border: 1.4px solid var(--accent); border-radius: 999px; padding: 7px 13px; background: #fff;
  transition: all .15s;
}
.search-result .sr-add:hover { background: var(--accent); color: #fff; }
.search-result .sr-add svg { width: 14px; height: 14px; fill: currentColor; }

/* ============================================================
   ปุ่มลอย + back to top + mobile bar
   ============================================================ */
.float-btns { position: fixed; right: 22px; bottom: 24px; display: flex; flex-direction: column; gap: 13px; z-index: 80; }
.float-btn {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 12px 30px rgba(6,9,14,.35);
  transition: transform .2s ease; position: relative;
}
.float-btn:hover { transform: translateY(-5px) scale(1.06); }
.float-btn svg { width: 26px; height: 26px; fill: #fff; }
.float-line { background: var(--green-line); }
.float-line::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--green-line); opacity: .55; animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.85); opacity: .55; } 80%, 100% { transform: scale(1.32); opacity: 0; } }
.float-phone { background: var(--navy); }

.to-top {
  position: fixed; left: 22px; bottom: 24px; z-index: 80;
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-soft); color: var(--txt-soft);
  box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: all .25s ease;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--accent-hot); border-color: var(--accent); }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 18px);
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 500; font-size: .93rem;
  padding: 14px 24px; border-radius: 999px; box-shadow: 0 16px 44px rgba(6,9,14,.5);
  border: 1px solid rgba(255,255,255,.12);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.8,.24,1); z-index: 99;
  max-width: min(92vw, 500px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 19px; height: 19px; fill: var(--gold); flex: none; }

/* ============================================================
   Reveal on scroll (+ stagger ด้วย --d)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.24,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg, .hero-panel, .ticker-track, .brand-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 84px; padding-bottom: 104px; }
  .hero-panel { max-width: 480px; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 195px; }
}

@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: static; min-width: 0; }
  .filter-list { flex-direction: row; flex-wrap: wrap; }
  .about-layout { grid-template-columns: 1fr; gap: 46px; }
  .quick-bar .container { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  section { padding: 64px 0; }
  .hide-m { display: none !important; }
  .main-nav {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(330px, 88vw);
    background: var(--ink); padding: 96px 24px 30px; z-index: 72;
    transform: translateX(103%); transition: transform .32s cubic-bezier(.2,.8,.24,1);
    box-shadow: -20px 0 60px rgba(6,9,14,.5); overflow-y: auto;
  }
  .main-nav.open { transform: none; }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav a { color: #d7e0e9; font-size: 1.08rem; padding: 14px 17px; }
  .main-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
  .main-nav a.active { color: var(--gold); }
  .main-nav a.active::after { display: none; }
  .nav-toggle { display: grid; place-items: center; z-index: 75; position: relative; }
  .btn-quote-text { display: none; }
  .quote-btn { padding: 10px 14px; }

  .ticker { transform: rotate(0) scale(1); margin-top: 0; }
  .quick-bar { padding: 56px 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .map-frame { min-height: 330px; }
  .calc-panel { grid-template-columns: 1fr; }
  .cta-band { padding: 38px 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px 26px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .svc-grid { grid-template-columns: 1fr; }
  .year-badge { left: 12px; bottom: -18px; }
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card { min-height: 185px; }
  .bento-card.b-lg { grid-column: auto; grid-row: auto; min-height: 300px; }
  .bento-card.b-wide { grid-column: auto; }
  .page-hero .ghost-word { font-size: clamp(3rem, 16vw, 5.5rem); bottom: -14px; }
  .section-head .ghost { display: none; }

  body { padding-bottom: 64px; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: rgba(10,14,21,.94); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -10px 30px rgba(6,9,14,.4);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bar a, .mobile-bar button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 11px; font-family: var(--font-head); font-weight: 500; font-size: .72rem;
    color: #aebbc9;
  }
  .mobile-bar svg { width: 21px; height: 21px; fill: currentColor; }
  .mobile-bar .mb-line { color: #4ade80; }
  .mobile-bar .mb-phone { color: #93c5fd; }
  .mobile-bar .mb-quote { color: var(--gold); position: relative; }
  .mobile-bar .mb-quote .quote-count {
    position: absolute; top: 4px; right: calc(50% - 27px);
    background: var(--accent); color: #fff; min-width: 18px; height: 18px; font-size: .68rem;
  }
  .mobile-bar .mb-quote .quote-count.empty { display: none; }
  .float-btns { display: none; } /* มือถือใช้แถบล่างแทน (ไม่ซ้ำ/ไม่ลอยทับเมนู) */
  .to-top { bottom: 82px; }
  .toast { bottom: 86px; }
}
@media (min-width: 861px) { .mobile-bar { display: none; } }

@media (max-width: 560px) {
  .quick-bar .container { grid-template-columns: 1fr; }
  .prod-grid, .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
  .prod-info { padding: 13px 13px 14px; }
  .prod-name { font-size: .93rem; }
  .hero-ctas .btn { width: 100%; }
  .topbar .container { justify-content: center; }
  .cta-band .btns { width: 100%; }
  .cta-band .btn { flex: 1; }
  .hero-panel { padding: 24px 22px 22px; }
  .hp-row b { font-size: 1.35rem; min-width: 100px; }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header, .float-btns, .mobile-bar, .to-top, .quote-drawer, .quote-overlay, .site-footer, .ticker, .scroll-progress { display: none !important; }
  body::before { display: none; }
}

/* ============================================================
   MattHouse — แบรนด์ลูกงานรับติดตั้ง (เปิด/ปิดจาก admin: sections.matthouse)
   หน้า matthouse.html ใช้ body.mh → เปลี่ยนชุดสีทั้งหน้าเป็น teal อัตโนมัติ
   ============================================================ */
body.mh {
  --accent:      #14b8a6;
  --accent-2:    #2dd4bf;
  --accent-hot:  #0d9488;
  --accent-soft: #ccfbf1;
  --gold:        #5eead4;
  --gold-soft:   #99f6e4;
  --navy:        #134e4a;
  --grad-fire:   linear-gradient(120deg, #0f766e, #14b8a6 55%, #2dd4bf);
  --shadow-accent: 0 12px 32px rgba(20,184,166,.38);
}
body.mh ::selection { background: #14b8a6; }
body.mh .logo-badge { box-shadow: 0 8px 20px rgba(20,184,166,.4); }
body.mh .quote-btn { box-shadow: 0 8px 22px rgba(20,184,166,.35); }
body.mh .btn-primary { box-shadow: var(--shadow-accent); }
body.mh .btn-primary:hover { box-shadow: 0 16px 40px rgba(20,184,166,.5); }
body.mh .hero-eyebrow { color: var(--gold-soft); }
/* จุดที่ยังฝังสีส้มไว้ตรงๆ (ไม่ได้ใช้ตัวแปร) — ทับเป็น teal ให้ธีมสะอาดทั้งหน้า */
body.mh .step-num { -webkit-text-stroke-color: rgba(20,184,166,.42); }
body.mh .hero-tag:hover { border-color: var(--accent); background: rgba(20,184,166,.14); }
body.mh .scroll-progress { box-shadow: 0 0 14px rgba(20,184,166,.55); }

/* ป้ายชื่อแบรนด์ MattHouse (wordmark) */
.mh-mark {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.01em;
}
.mh-mark .m1 { color: #14b8a6; }
.mh-mark .m2 { color: currentColor; }
.mh-mark .by { font-size: .5em; font-weight: 500; color: var(--txt-faint); margin-left: 8px; letter-spacing: .02em; }

/* hero ของหน้า MattHouse */
.mh-hero {
  position: relative; color: #fff; padding: 96px 0 88px;
  background:
    radial-gradient(900px 420px at 85% -15%, rgba(20,184,166,.3), transparent 62%),
    linear-gradient(115deg, #071512 30%, #0d2925);
  overflow: hidden;
}
.mh-hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(90% 100% at 30% 0%, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(90% 100% at 30% 0%, #000, transparent 85%); }
.mh-hero .ghost-word { position: absolute; right: -8px; bottom: -28px; font-family: var(--font-head);
  font-weight: 800; font-size: clamp(4rem, 12vw, 9.5rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(94,234,212,.14); pointer-events: none; user-select: none; white-space: nowrap; }
.mh-hero .container { position: relative; z-index: 1; }
.mh-hero .mh-mark { font-size: clamp(2.4rem, 5.6vw, 4rem); color: #fff; line-height: 1.05; }
.mh-hero .mh-tagline { margin-top: 14px; font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-family: var(--font-head); font-weight: 600; color: #b8efe4; }
.mh-hero p.sub { margin-top: 16px; color: #9ccec4; max-width: 640px; font-size: 1.05rem; }
.mh-badge-soon {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(94,234,212,.12); border: 1px solid rgba(94,234,212,.4); color: #99f6e4;
  padding: 8px 18px; border-radius: 999px; font-family: var(--font-head); font-size: .86rem; font-weight: 500;
  margin-bottom: 22px;
}

/* แถบโปรโมท MattHouse บนหน้าแรก CRD */
.mh-promo { padding: 0 0 96px; }
.mh-promo-band {
  position: relative; overflow: hidden; border-radius: 28px;
  background:
    radial-gradient(700px 300px at 90% -30%, rgba(45,212,191,.35), transparent 60%),
    linear-gradient(120deg, #0a1f1b, #11433c);
  border: 1px solid rgba(94,234,212,.25);
  padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  box-shadow: 0 18px 50px rgba(13,148,136,.25);
}
.mh-promo-band::before { content: "MH"; position: absolute; right: 18px; bottom: -34px;
  font-family: var(--font-head); font-weight: 800; font-size: 11rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(94,234,212,.12); pointer-events: none; }
.mh-promo-band .mh-mark { font-size: 1.05rem; color: #5eead4; letter-spacing: .12em; text-transform: uppercase; }
.mh-promo-band h2 { color: #fff; font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 8px 0 10px; font-weight: 800; }
.mh-promo-band p { color: #9ccec4; max-width: 560px; }
.mh-promo-band .hero-tags { margin-top: 16px; }
.mh-promo-band .hero-tag { border-color: rgba(94,234,212,.3); color: #b8efe4; }
.mh-promo-band .btn-mh { position: relative; z-index: 1; background: linear-gradient(120deg, #0f766e, #14b8a6 55%, #2dd4bf); color: #fff; box-shadow: 0 12px 30px rgba(20,184,166,.4); }
.mh-promo-band .btn-mh:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,184,166,.55); }

/* FAQ อย่างง่าย (หน้า MattHouse) */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 0; box-shadow: var(--shadow-1); overflow: hidden;
}
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 17px 22px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.3rem; color: var(--accent-hot); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details { transition: border-color .2s ease, box-shadow .2s ease; }
.faq-list details:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.faq-list summary { transition: color .18s ease; }
.faq-list summary:hover { color: var(--accent-hot); }
.faq-list details[open] p { animation: faq-open .26s cubic-bezier(.2,.8,.24,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }
.mhs-card .ic { transition: transform .28s cubic-bezier(.2,.8,.24,1); }
.mhs-card:hover .ic { transform: rotate(-6deg) scale(1.08); }
.faq-list details p { padding: 0 22px 18px; color: var(--txt-soft); font-size: .93rem; }

@media (max-width: 860px) {
  .mh-promo-band { padding: 34px 26px; }
  .mh-hero { padding: 70px 0 64px; }
}

/* ---------- MattHouse landing v2 ---------- */
.mh-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 46px; align-items: center; position: relative; z-index: 2;
}
.mh-logo-lockup { display: flex; align-items: center; gap: 20px; margin: 20px 0 4px; }
.mh-logo-lockup img { width: 92px; height: 92px; flex: none;
  filter: drop-shadow(0 14px 34px rgba(20,184,166,.45)); }
.mh-logo-lockup .mh-mark { font-size: clamp(2.5rem, 5.4vw, 3.9rem); color: #fff; line-height: 1; }
.mh-logo-lockup .lk-tag { display: block; margin-top: 8px; font-family: var(--font-head);
  font-weight: 500; font-size: .95rem; color: #8fd8cb; letter-spacing: .04em; }

/* ฉากทิวเขา + สายน้ำ ท้าย hero (เล่าเรื่องเดียวกับโลโก้) */
.mh-scene { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 170px;
  pointer-events: none; z-index: 0; }

/* การ์ดบริการ 12 ช่อง (แต่ละใบเปิด/ปิดจาก admin) */
.mhs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 18px; }
.mhs-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 21px 20px; display: flex; gap: 14px; align-items: flex-start;
  box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.24,1), box-shadow .22s, border-color .22s;
}
.mhs-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-fire); transform: scaleY(0); transform-origin: top; transition: transform .28s ease; }
.mhs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: #8ce0d2; }
.mhs-card:hover::after { transform: scaleY(1); }
.mhs-card .ic {
  flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid #99f6e4;
}
.mhs-card .ic svg { width: 23px; height: 23px; fill: var(--accent-hot); }
.mhs-card h3 { font-size: 1.02rem; margin-bottom: 3px; }
.mhs-card p { font-size: .85rem; color: var(--txt-soft); }
/* การ์ดใบที่ 13 "งานอื่นนอกเหนือจากนี้?" — เดิมไม่มีสไตล์ เลยหน้าตาเหมือนบริการทั่วไป
   และลอยเดี่ยวในแถวสุดท้าย → ทำเป็นแถบชวนคุยเต็มแถว พื้นเข้ม teal ให้ต่างจาก 12 ใบชัดเจน */
.mhs-card.ask-mh {
  grid-column: 1 / -1; align-items: center; border-color: #14b8a6;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(45,212,191,.22), transparent 60%),
    linear-gradient(115deg, #0d2925, #134e4a);
  box-shadow: 0 12px 30px rgba(13,41,37,.28);
}
.mhs-card.ask-mh::after { display: none; }
.mhs-card.ask-mh:hover { transform: translateY(-4px); border-color: #5eead4; }
.mhs-card.ask-mh .ic { background: rgba(94,234,212,.16); border-color: rgba(94,234,212,.4); }
.mhs-card.ask-mh .ic svg { fill: #5eead4; }
.mhs-card.ask-mh h3 { color: #fff; font-size: 1.1rem; }
.mhs-card.ask-mh p { color: #b8efe4; }
.mhs-card.ask-mh .btn { margin-top: 12px; }
@media (min-width: 861px) {
  .mhs-card.ask-mh { gap: 20px; padding: 24px 26px; }
  .mhs-card.ask-mh > div:last-child { display: flex; align-items: center; gap: 22px; flex: 1; flex-wrap: wrap; }
  .mhs-card.ask-mh .btn { margin-top: 0; margin-left: auto; flex: none; }
}

@media (max-width: 1100px) {
  .mh-hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .mh-hero-inner .hero-panel { max-width: 480px; }
}
@media (max-width: 560px) {
  .mh-logo-lockup img { width: 70px; height: 70px; }
}


/* ---------- กันหน้าเด้งตอนโหลด (CLS) ----------
   กริดพวกนี้ JS เป็นคนเติมทีหลัง ถ้าไม่จองความสูงไว้ เนื้อหาใต้มันจะกระโดดตอนของมา */
#catGrid:empty, #featuredGrid:empty, #catalogGrid:empty { min-height: 420px; }
#catalogList:empty { min-height: 600px; }
#brandStrip:empty { min-height: 54px; }
#footerCats:empty { min-height: 160px; }


/* ---------- เก็บงานรอบ 2 (20 ก.ค. 2569) ---------- */

/* [81] บล็อกตกแต่งส้มและป้ายปีหลุดขอบจอช่วงแท็บเล็ต — ดึงกลับเข้ากรอบ */
/* ป้ายปีเดิมตั้ง left:-20px ยื่นออกนอกรูป พอจอแคบลงจะโผล่พ้นขอบจอซ้าย
   (คอนเทนเนอร์มี padding แค่ 26px) → ดึงกลับเข้ามาให้อยู่ในกรอบเสมอ */
@media (max-width: 1024px) {
  .about-visual::before { inset: 16px -8px -16px 16px; }
  .year-badge { left: 0; bottom: -14px; }
}
@media (max-width: 640px) {
  .about-visual::before { inset: 12px 0 -12px 12px; }
  .year-badge { left: 10px; right: 10px; bottom: -12px; max-width: none; padding: 14px 18px; }
  .year-badge .year { font-size: 1.85rem; }
}

/* [89] หน้าแรกมี steps-grid เลข 1-4 สองชุดติดกัน (จุดเด่นร้าน vs ขั้นตอนสั่งซื้อ) หน้าตาเหมือนกันเป๊ะ
   → ชุด "ขั้นตอน" ทำเป็นเส้นทางมีลำดับชัด เลขเป็นวงกลมทึบ ไม่ใช่เลข ghost เหมือนอีกชุด */
.steps-flow .step-card { padding-top: 26px; }
.steps-flow .step-num {
  position: static; -webkit-text-stroke: 0; color: #fff; font-size: 1.02rem;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-fire); box-shadow: 0 8px 18px rgba(255,106,0,.32); margin-bottom: 12px;
  line-height: 1;
}
.steps-flow .step-card:not(:last-child)::before {
  content: ""; position: absolute; top: 43px; right: -13px; width: 26px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px);
  opacity: .55; z-index: 2;
}
@media (max-width: 900px) { .steps-flow .step-card::before { display: none; } }

/* [90] เซคชันบริการเป็นพื้นกระดาษเปล่าหลัง hero teal เข้ม — เติมลายพิมพ์เขียวจางให้มีพื้นผิว */
body.mh .mhs-section { position: relative; overflow: hidden; }
body.mh .mhs-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(19,78,74,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,78,74,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 78%);
}
body.mh .mhs-section > .container { position: relative; z-index: 1; }

/* ---------- เก็บงานรอบ 3 (21 ก.ค. 2569) ---------- */

/* [45] ปุ่ม "เพิ่ม" ตอนกดแล้วควรรู้สึกว่าติดจริง ไม่ใช่แค่เปลี่ยนสี */
.prod-add.added { animation: add-pop .42s cubic-bezier(.2,.8,.24,1); }
@keyframes add-pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.14); }
  70% { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* [46] หัวหมวดที่กำลังกรองอยู่ — เดิมมีแต่ "พบ N รายการ" ลำดับชั้นอ่อน */
.catalog-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.catalog-head h2 { font-size: 1.42rem; }
.catalog-head .count { font-size: .9rem; color: var(--txt-soft); font-family: var(--font-body); }

/* [47] มือถือ: รายการกรองห่อหลายบรรทัดกินที่แนวตั้ง → แถบเลื่อนแถวเดียว */
@media (max-width: 640px) {
  .filter-list {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; min-width: 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding-bottom: 8px; margin: 0 -22px; padding-left: 22px; padding-right: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-list button { flex: none; scroll-snap-align: start; white-space: nowrap; }
}

/* [55] ช่องว่างใหญ่เกินก่อนแถบ CTA ท้ายหน้า */
.cata-group:last-child { margin-bottom: 0; }
section + section.section-alt > .container > .cta-band { margin-top: 0; }

/* [56] หัวกลุ่มแคตตาล็อกบาง — เติมจำนวนเล่มให้มีน้ำหนัก */
.cata-head .n {
  font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--accent-hot);
  background: var(--accent-soft); border: 1px solid #fcd0a4; border-radius: 999px; padding: 2px 11px;
}

/* [64] เครื่องหมายถูกใน bullet ของการ์ดบริการดูบาง — ใส่วงกลมพื้นอ่อน */
.svc-card li svg {
  width: 20px; height: 20px; padding: 3px; border-radius: 50%;
  background: rgba(23,163,74,.12); box-sizing: border-box; margin-top: 2px;
}

/* [76] เครื่องคำนวณไม่มี section-head + บรรทัดอ้างอิงใช้ inline style */
.calc-ref {
  text-align: center; font-size: .8rem; color: var(--txt-faint);
  max-width: 720px; margin: 0 auto 22px;
}

/* [77] เล่าความสัมพันธ์ "กรอกซ้าย → ได้ผลขวา" ด้วยลูกศรคั่นกลาง */
@media (min-width: 861px) {
  .calc-panel { position: relative; }
  .calc-panel.active::before {
    content: "→"; position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
    z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); border: 1.6px solid var(--line-soft); color: var(--accent-hot);
    font-family: var(--font-head); font-weight: 700; box-shadow: var(--shadow-1);
  }
}

/* [84] หัวข้อเรื่องราวหลักเล็กกว่าหัวข้อรอง ทำให้ลำดับตัวอักษรกลับหัว */
.about-text h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
/* [83] ย่อหน้าแรกเป็น lead ให้คอลัมน์ข้อความมีจุดเริ่ม */
.about-text p:first-of-type { font-size: 1.1rem; font-weight: 500; color: var(--txt); }

/* [85] รูปหน้าร้าน about นิ่งสนิท ต่างจากรูปอื่นทั้งเว็บ */
.about-visual { overflow: hidden; border-radius: 24px; }
.about-visual img { transition: transform .6s cubic-bezier(.2,.8,.24,1); }
.about-visual:hover img { transform: scale(1.04); }

/* [86] timeline wrapper เคยผูกค่าไว้ใน inline style */
.timeline-wrap { max-width: 680px; margin: 0 auto; }

/* [95] หน้าจอ "MattHouse — เร็วๆ นี้" ให้เข้าภาษา Blueprint Luxe */
.mh-closed { padding: 110px 24px; text-align: center; position: relative; }
.mh-closed img { width: 92px; margin: 0 auto 18px; }
.mh-closed h2 { font-size: 1.65rem; margin-bottom: 10px; }
.mh-closed p { color: var(--txt-soft); max-width: 520px; margin: 0 auto 24px; }
.mh-closed .soon-chip {
  display: inline-block; margin-bottom: 16px; font-family: var(--font-head); font-weight: 600;
  font-size: .82rem; letter-spacing: .04em; color: #0d9488;
  background: #ccfbf1; border: 1px solid #99f6e4; border-radius: 999px; padding: 5px 15px;
}

/* [98] ขอบมนกระจัดกระจาย 13/16/20/22/24/26/28px — ยึดเป็น 2 ค่าหลักของระบบ */
.about-visual, .about-visual img { border-radius: var(--radius); }
.year-badge, .hero-panel, .form-card, .promo-card { border-radius: var(--radius); }
.filter-list button, .cata-logo, .contact-card .icon, .mhs-card .ic { border-radius: 12px; }

/* [33] คู่สีเสี่ยง contrast ต่ำกับตัวอักษรเล็ก */
.prod-spec, .cata-card p, .mhs-card p, .svc-card > div > p { color: #4d5967; }
.form-hint, .calc-ref { color: #5d6b7a; }

/* [44] การ์ดชวนทัก LINE ใต้แผงกรอง — เดิมคอลัมน์ซ้ายเหลือที่ว่างยาวมาก */
.filter-help {
  display: block; margin-top: 18px; padding: 18px 18px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--ink), var(--ink-3));
  border: 1px solid var(--ink-4); box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.filter-help:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.filter-help b { display: block; font-family: var(--font-head); color: #fff; font-size: 1rem; margin-bottom: 5px; }
.filter-help span { display: block; color: #9fb0c4; font-size: .85rem; line-height: 1.6; }
.filter-help .go {
  margin-top: 11px; color: var(--gold); font-family: var(--font-head); font-weight: 700; font-size: .88rem;
}
.filter-help:hover .go { color: var(--accent-2); }
@media (max-width: 860px) { .filter-help { display: none; } }

/* [54] แถบชิปกระโดดไปกลุ่มแคตตาล็อก (โผล่เมื่อมีมากกว่า 1 กลุ่ม) */
.cata-jump {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px;
  position: sticky; top: 88px; z-index: 5;
  background: rgba(244,241,233,.9); backdrop-filter: blur(8px);
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.cata-jump a {
  font-family: var(--font-head); font-weight: 500; font-size: .86rem; color: var(--txt-soft);
  background: var(--surface); border: 1.4px solid var(--line-soft); border-radius: 999px; padding: 7px 15px;
  transition: all .18s;
}
.cata-jump a:hover { border-color: var(--accent); color: var(--accent-hot); transform: translateY(-2px); }
@media (max-width: 640px) {
  .cata-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 70px; }
  .cata-jump::-webkit-scrollbar { display: none; }
  .cata-jump a { flex: none; white-space: nowrap; }
}
.cata-group { scroll-margin-top: 150px; }