/* =========================================================
   Shintaeki Thailand — style.css
   ========================================================= */

:root {
  --navy-950: #06143b;   /* หัวข้อ Hero / ปุ่มทึบ / จุดสไลด์ */
  --navy-900: #0a1438;   /* วงกลมในปุ่ม / ตัวอักษรเข้ม */
  --navy-800: #0b1a3d;   /* สีตัวอักษรเมนู */
  --blue-700: #004b9c;   /* ปุ่มหลัก */
  --blue-600: #0a5cb8;
  --sky-50:   #eef5fc;
  --white:    #ffffff;
  --text:     #0b1a3d;

  --font-th: "Noto Sans Thai", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-fs: 18px;        /* ขนาดตัวอักษรเมนูหลัก — เมนูรองใช้ค่าเดียวกัน */
  --header-h: 86px;
  --header-h-scrolled: 70px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* animation ทำงานเสมอ แม้ Windows ปิด Animation effects (ผู้ใช้สั่ง 15 ต.ค. 2569) */

/* เลื่อนไปยัง anchor แล้วไม่ให้ header บังหัวข้อ */
[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  font-family: var(--font-th);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: var(--blue-700); color: var(--white);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 4px; }

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--navy-800);
}

/* ชั้นพื้นหลัง header: แถบเมนูขาวโปร่งเท่ากันทั้งแถบ + คลื่น/แถบโค้งสีขาวด้านล่าง (ตามแบบ 1-home.jpg) */
.site-header__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + 26px);
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.site-header__swoosh {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 290px;
}
/* แถบเมนู: ขาวโปร่งสม่ำเสมอ ไม่ไล่จาง — ค่าเดียวกับคลื่นใต้โลโก้และโคนแถบโค้ง (--band-a) ให้ดูเป็นแถบเดียวกัน */
.site-header__bg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, .68);
}

/* พื้นหลังตอนเลื่อนหน้าลง: ขาวทึบ + เงา */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 24px rgba(10, 20, 56, .08);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.site-header.is-scrolled .site-header__bg { opacity: 0; }
.site-header.is-scrolled::after,
.site-header.is-open::after { opacity: 1; }

.site-header__bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--gutter);
  transition: height .35s var(--ease);
}
.site-header.is-scrolled .site-header__bar { height: var(--header-h-scrolled); }

/* --- Logo --- */
.site-header__logo {
  justify-self: start;
  display: block;
  width: 156px;
  margin-top: 0;
  transition: width .35s var(--ease);
}
.site-header__logo img { width: 100%; height: auto; }
.site-header.is-scrolled .site-header__logo { width: 140px; }

/* --- Main nav --- */
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav__item { position: relative; }

.main-nav__link {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: var(--nav-fs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--navy-800);
  transition: color .2s;
}
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"] { color: var(--blue-700); }
.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after,
.has-sub:hover > .main-nav__link::after,
.has-sub:focus-within > .main-nav__link::after,
.has-sub.is-open > .main-nav__link::after { transform: scaleX(1); }

/* Dropdown ผลิตภัณฑ์ (เมนูรอง) — ตัวอักษรเล็กกว่าเมนูหลัก 2px
   ชิดซ้ายให้ข้อความตรงกับเมนูหลัก: left = -(padding กล่อง 10 + padding ลิงก์ 14) */
.main-nav__sub {
  position: absolute;
  top: 100%;
  left: -24px;
  min-width: 290px;
  padding: 10px;
  margin-top: 10px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10, 20, 56, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.main-nav__sub::before { /* สะพานกันเมาส์หลุดระหว่างลิงก์กับ dropdown */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.has-sub:hover > .main-nav__sub,
.has-sub:focus-within > .main-nav__sub,
.has-sub.is-open > .main-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.main-nav__sub a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: calc(var(--nav-fs) - 2px);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.main-nav__sub a:hover { background: var(--sky-50); color: var(--blue-700); }

/* --- Actions (ค้นหา / ภาษา / ปุ่ม) --- */
.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--navy-900);
  transition: color .2s, background .2s;
}
.icon-btn:hover { color: var(--blue-700); background: rgba(0, 75, 156, .08); }
.icon-btn svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}

.lang { position: relative; margin-right: 15px; }
.lang__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  min-width: 150px;
  padding: 8px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(10, 20, 56, .14);
}
.lang__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.lang__menu a:hover { background: var(--sky-50); }
.lang__menu a[aria-current="true"] { color: var(--blue-700); font-weight: 600; }

/* ปุ่ม "ขอใบเสนอราคา" — ใช้ซ้ำทั้งเว็บ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 3px 0 13px;
  border-radius: 999px;
  background: var(--blue-700);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-cta__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-900);
  transition: transform .3s var(--ease);
}
.btn-cta__icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-cta:hover { background: var(--blue-600); box-shadow: 0 8px 20px rgba(0, 75, 156, .28); }
.btn-cta:hover .btn-cta__icon { transform: rotate(45deg); }

/* --- Hamburger (มือถือ / แท็บเล็ต) --- */
.burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.burger span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-900);
  transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* --- แถบค้นหา --- */
.search-panel {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) 18px;
}
.search-panel__form {
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 6px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(10, 20, 56, .14);
}
.search-panel__form input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
}
.search-panel__submit {
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--blue-700);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}
.search-panel__submit:hover { background: var(--blue-600); }

/* --- เมนูมือถือ --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h-scrolled) + 16px) var(--gutter) 28px;
  background: var(--white);
  overflow-y: auto;
  animation: mnav-in .3s var(--ease);
}
.mobile-nav[hidden] { display: none; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } }

.mobile-nav nav > ul > li { border-bottom: 1px solid #e6edf6; }
.mobile-nav a,
.mobile-nav__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 2px;
  font-size: 17px;
  text-align: left;
}
.mobile-nav__toggle::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .25s;
}
.mobile-nav__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.mobile-nav__group ul { padding: 0 0 10px 14px; }
.mobile-nav .mobile-nav__group ul a { padding: 9px 2px; font-size: 15.5px; color: #33456b; }


.mobile-nav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}
.mobile-nav__lang { display: flex; gap: 10px; color: #8a97b2; font-size: 15px; }
.mobile-nav__lang a { display: inline; padding: 0; font-size: 15px; }
.mobile-nav__lang a[aria-current="true"] { color: var(--blue-700); font-weight: 600; }
.mobile-nav .btn-cta { width: auto; padding: 0 3px 0 16px; font-size: 15px; height: 42px; }
.mobile-nav .btn-cta__icon { width: 36px; height: 36px; }

/* --- Responsive --- */
@media (max-width: 1440px) {
  :root { --nav-fs: 17px; }
  .main-nav__list { gap: 24px; }
}

@media (max-width: 1320px) {
  :root { --nav-fs: 16px; }
  .main-nav__list { gap: 20px; }
}

@media (max-width: 1240px) {
  .site-header__bar { grid-template-columns: auto 1fr; }
  .main-nav { display: none; }
  .burger { display: block; margin-left: 8px; }
  .lang { margin-right: 6px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 68px; --header-h-scrolled: 62px; }
  .site-header__logo { width: 124px; }
  .site-header.is-scrolled .site-header__logo { width: 118px; }
  .site-header__actions { gap: 6px; }
  .burger { margin-left: 0; }
  .site-header__actions > .btn-cta,
  .site-header__actions > .lang { display: none; }
  .site-header__swoosh { display: none; }
  .site-header__bg::before {
    background: rgba(255, 255, 255, .8);
  }
}



/* =========================================================
   ส่วนกลาง
   ========================================================= */
.container {
  width: min(1276px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ตัดบรรทัดตามแบบเฉพาะจอใหญ่ */
@media (max-width: 1529px) { .br-lg { display: none; } }

/* ปุ่มแคปซูล + วงกลมลูกศร (ใช้ใน Hero และส่วนอื่น) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 35px;
  padding: 0 3px 0 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: transform .3s var(--ease), background .25s var(--ease);
}
.btn__icon svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.btn:hover .btn__icon { transform: rotate(45deg); }

.btn--navy { background: var(--navy-950); color: var(--white); }
.btn--navy .btn__icon { background: var(--blue-700); color: var(--white); }
.btn--navy:hover { background: #10245e; box-shadow: 0 8px 20px rgba(6, 20, 59, .28); }

.btn--outline {
  background: rgba(255, 255, 255, .92);
  color: var(--navy-950);
  box-shadow: inset 0 0 0 1px var(--navy-950);
}
.btn--outline .btn__icon { background: var(--navy-950); color: var(--white); }
.btn--outline:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--navy-950), 0 8px 20px rgba(6, 20, 59, .16); }

/* =========================================================
   Hero banner (สไลด์)
   ========================================================= */
.hero {
  position: relative;
  width: 100%;                /* ต้องกำหนดชัด ไม่งั้น max-height ถูกแปลงเป็น max-width ผ่าน aspect-ratio ทำให้ hero ไม่เต็มจอกว้าง */
  aspect-ratio: 1530 / 869;   /* 869px ที่เนื้อหากว้าง 1530 ตามแบบ — ใช้ aspect-ratio แทน vw เพราะ vw รวม scrollbar ทำให้คลาด ~8px */
  min-height: 620px;
  max-height: 970px;
  overflow: hidden;
  background: #dfe9f3;
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 11px;
  background: var(--white);
  pointer-events: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--ease), visibility 0s;
  z-index: 1;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: 60% 50%;
}
/* ภาพ hero ไม่มี animation ขยาย (ผู้ใช้สั่ง 17 ต.ค. 2569 — ขยายแล้วภาพแตก) · สไลด์ยังเฟดเปลี่ยนภาพ ข้อความยังเลื่อนขึ้น */

/* ข้อความ: ตำแหน่งตามแบบ (หัวข้อเริ่มราว 29% ของความสูง) */
.hero__content {
  position: relative;
  z-index: 2;
  padding-top: 237px;
}
.hero__title {
  margin: 0;
  font-size: 58px;
  font-weight: 600;
  line-height: 84px;
  letter-spacing: -.005em;
  color: var(--navy-950);
}
.hero__lead {
  margin: -3px 0 0;
  font-size: 15.5px;
  line-height: 22px;
  color: #1b2238;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
}

/* ข้อความค่อย ๆ ขึ้นเมื่อสไลด์ทำงาน */
.hero__title, .hero__lead, .hero__actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__lead,
.hero__slide.is-active .hero__actions { opacity: 1; transform: none; }
.hero__slide.is-active .hero__title { transition-delay: .25s; }
.hero__slide.is-active .hero__lead { transition-delay: .4s; }
.hero__slide.is-active .hero__actions { transition-delay: .55s; }

/* โหลดครั้งแรก: สไลด์แรกเริ่มจากสถานะซ่อน แล้วเล่น animation เมื่อ JS ใส่ .is-ready (ภาพแรกโหลดเสร็จ) */
.js .hero:not(.is-ready) .hero__slide.is-active { opacity: 0; }
.js .hero:not(.is-ready) .hero__slide.is-active .hero__title,
.js .hero:not(.is-ready) .hero__slide.is-active .hero__lead,
.js .hero:not(.is-ready) .hero__slide.is-active .hero__actions { opacity: 0; transform: translateY(18px); }
.js .hero .hero__next,
.js .hero .hero__dots { transition: opacity .6s var(--ease) .7s, background .25s var(--ease), transform .3s var(--ease), box-shadow .25s var(--ease); }
.js .hero:not(.is-ready) .hero__next,
.js .hero:not(.is-ready) .hero__dots { opacity: 0; }

/* ม่านขาวฟุ้งมุมล่างซ้าย */
.hero__veil {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 46%;
  height: 32%;
  background: radial-gradient(110% 100% at 0% 100%,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .86) 30%,
    rgba(255, 255, 255, .45) 58%,
    rgba(255, 255, 255, 0) 80%);
  pointer-events: none;
}

/* คลื่นขาวขอบล่าง */
.hero__wave {
  position: absolute;
  left: 0;
  bottom: 10px;               /* ยกขึ้นให้ขอบคลื่นตรงแบบ (แถบขาวใต้คลื่นเติมด้วย .hero::after) */
  z-index: 3;
  width: 100%;
  height: 16.3%;
  fill: var(--white);
  pointer-events: none;
}

/* ปุ่มสไลด์ถัดไป / ก่อนหน้า (ก่อนหน้าแสดงตั้งแต่สไลด์ที่ 2) */
.hero__next,
.hero__prev {
  position: absolute;
  z-index: 4;
  right: 24px;
  top: calc(43.4% - 36px);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(240, 241, 245, .82);
  color: var(--navy-950);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .25s var(--ease), transform .3s var(--ease), box-shadow .25s var(--ease);
}
.hero__prev {
  right: auto;
  left: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-12px);
  transition: background .25s var(--ease), transform .35s var(--ease), box-shadow .25s var(--ease), opacity .35s var(--ease), visibility 0s linear .35s;
}
.hero__prev.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: background .25s var(--ease), transform .35s var(--ease), box-shadow .25s var(--ease), opacity .35s var(--ease), visibility 0s;
}
.hero__next svg,
.hero__prev svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.hero__next:hover,
.hero__prev:hover { background: var(--white); box-shadow: 0 10px 30px rgba(6, 20, 59, .18); }
.hero__next:hover svg { transform: translateX(3px); }
.hero__prev:hover svg { transform: translateX(-3px); }

/* จุดบอกสไลด์ */
.hero__dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12.1%;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
}
.hero__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--navy-950);
  transition: width .4s var(--ease), opacity .25s;
}
.hero__dot::after { /* ขยายพื้นที่กด */
  content: ""; position: absolute; inset: -8px -3px;
}
.hero__dot.is-active { width: 28px; }
.hero__dot:not(.is-active):hover { opacity: .65; }

@media (max-width: 1240px) {
  .hero__title { font-size: 50px; line-height: 1.45; }
}

@media (max-width: 768px) {
  .hero { height: auto; aspect-ratio: auto; min-height: 640px; max-height: none; }
  .hero__content { padding-top: 120px; padding-bottom: 170px; }
  .hero__title { font-size: 38px; line-height: 1.45; }
  .hero__lead { margin-top: 10px; font-size: 15px; text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.8); }
  .hero__media img { object-position: 72% 50%; }
  .hero__next { width: 52px; height: 52px; top: auto; bottom: 22%; right: 16px; }
  .hero__prev { width: 52px; height: 52px; top: auto; bottom: 22%; left: auto; right: 80px; }
  .hero__veil { width: 100%; height: 30%; }
  .hero__wave { height: 70px; }
  .hero__dots { bottom: 74px; }
  /* อ่านข้อความง่ายขึ้นบนจอเล็ก */
  .hero__slide::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 42%, rgba(255,255,255,0) 72%);
  }
}


/* =========================================================
   Shintaeki Thailand (รู้จักเรา)
   ระยะอ้างอิงจาก 1-home.jpg ที่จอกว้าง 1530px: ภาพซ้าย y 775–1290 · หัวข้อ x 719
   ========================================================= */
.about {
  position: relative;
  z-index: 5;                 /* ทับขอบล่างของ hero เหมือนในแบบ */
  margin-top: -94px;
  min-height: 515px;
  padding-bottom: 60px;
  overflow: hidden;
  overflow-x: clip;            /* ตัดเฉพาะแนวนอน (วงกลมเลยขอบขวา) ให้แถบม่วงอ่อนล้นลงล่างได้ตามแบบ */
  overflow-y: visible;
  pointer-events: none;
}
.about > * { pointer-events: auto; }
/* กราฟิกพื้นหลังม่วงอ่อน (ดึงจากแบบ 1-home.jpg: แถบโค้งล่าง · วงแหวนรอบภาพห้อง · เสี้ยววงกลมรอบฟูจิ)
   แบ่ง 3 ชิ้น: ซ้าย 760px ยึดซ้าย (ตามภาพห้อง) · ขวา 430px ยึดขวา (ตามวงกลมฟูจิ) · กลางยืดตามความกว้างจอ */
.about__bg {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 603px;
  background:
    url("../img/about-bg-l.webp") left top / 760px 603px no-repeat,
    url("../img/about-bg-r.webp") right top / 430px 603px no-repeat,
    url("../img/about-bg-m.webp") 760px top / calc(100% - 1190px) 603px no-repeat;
  pointer-events: none;
}

.about__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 700px;
  height: 515px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 515' preserveAspectRatio='none'%3E%3Cpath d='M0 3C200 15 420 55 540 125C640 185 680 275 674 335C668 405 600 465 500 487C380 513 150 507 0 505Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 515' preserveAspectRatio='none'%3E%3Cpath d='M0 3C200 15 420 55 540 125C640 185 680 275 674 335C668 405 600 465 500 487C380 513 150 507 0 505Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* วงกลมภาพภูเขาฟูจิ + คลื่น ด้านขวา (เลยขอบจอเล็กน้อยตามแบบ) */
.about__art {
  position: absolute;
  right: -23px;
  top: 117px;
  width: 336px;
  height: 336px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle closest-side, #000 99%, transparent 100%);   /* ขอบคมตามแบบ */
          mask: radial-gradient(circle closest-side, #000 99%, transparent 100%);
}
.about__art img { width: 100%; height: 100%; object-fit: cover; }

.about__inner { position: relative; }
.about__content {
  width: 470px;
  margin-left: calc(46.4% - 3px);
  padding-top: 125px;
}
.about__title {
  margin: 0;
  font-family: "Noto Sans", var(--font-th);
  font-size: 38.8px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--navy-950);
}
.about__text {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 22.2px;
  color: #1b2238;
}
.about .btn { margin-top: 25px; }

/* =========================================================
   หัวข้อ section (ใช้ซ้ำ)
   ========================================================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.section-title {
  margin: 0;
  font-size: 38.2px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy-950);
}
.section-sub {
  margin: -2px 0 0;
  font-size: 16px;
  line-height: 22px;
  color: #1b2238;
}

.section-head .btn { padding-left: 13px; gap: 13px; font-size: 15px; height: 35px; }

/* =========================================================
   โซลูชัน (การ์ด 4 ใบ) — แบบ: หัวข้อ y 1380 · การ์ด y 1480–1883 · กว้าง 302 ห่าง 23
   ========================================================= */
.solutions {
  position: relative;
  padding: 90px 0 0;
}
.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 23px;
  margin-top: 25px;
}
.sol-card { display: flex; }
.sol-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 0 0 1px #eef2f8, 0 6px 18px rgba(10, 30, 70, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sol-card__media {
  aspect-ratio: 302 / 225;
  overflow: hidden;
  background: #e8eef6;
}
.sol-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.sol-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 13px 6px 21px 13px;   /* ขวาแคบกว่าซ้าย ให้หัวข้อยาวที่สุดพอดีบรรทัดเดียวตามแบบ */
}
.sol-card__title {
  margin: 0;
  font-family: "Noto Sans", var(--font-th);
  font-size: clamp(16px, 1.268vw, 19.4px);   /* 19.4px ที่ 1530 · ย่อตามจอไม่ให้หัวข้อการ์ดตกบรรทัด */
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
  color: var(--navy-950);
  transition: color .25s;
}
.sol-card__text {
  margin: 1px 0 0;
  min-height: 65px;
  font-size: 16px;
  line-height: 21.5px;
  color: #2a3045;
}
.sol-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 14px;
  line-height: 20px;
  color: #1b2238;
}
.sol-card__more svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease);
}
.sol-card__link:hover,
.sol-card__link:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px #e3eaf5, 0 18px 40px rgba(10, 30, 70, .14);
}
.sol-card__link:hover .sol-card__media img { transform: scale(1.06); }
.sol-card__link:hover .sol-card__title { color: var(--blue-700); }
.sol-card__link:hover .sol-card__more svg { transform: translate(2px, -2px); }

/* =========================================================
   โลโก้ลูกค้า (marquee) — แบบ: ช่องละ 96px ห่าง 47.4px · y 1954–2050
   ========================================================= */
.clients {
  --logo-h: 92px;                 /* โลโก้สูงเท่ากัน กว้างตามสัดส่วนโลโก้จริง (รูปจากเว็บเดิม) */
  position: relative;
  padding: 71px 0 10px;
  overflow: hidden;
}
.clients__viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.clients__viewport.is-dragging { cursor: grabbing; }
.clients__viewport.is-dragging img { pointer-events: none; }
.clients__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding: 2px 28px 2px 0;        /* ระยะต่อรอบเท่ากับระยะระหว่างโลโก้ · สูงรวม 96px เท่าแบบ */
  animation: clients-scroll 38s linear infinite;
}
.clients__track li { flex: none; }
.clients__track picture { display: block; }
.clients__track img {
  display: block;
  width: auto;
  height: var(--logo-h);
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e3eaf3, 0 4px 14px rgba(10, 30, 70, .06);   /* โลโก้พื้นขาวยังเห็นเป็นกรอบ เหมือนบนเว็บเดิม */
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.clients__track img:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #d3e0ef, 0 10px 24px rgba(10, 30, 70, .14); }
.clients:hover .clients__track { animation-play-state: paused; }
.js .clients__track { animation: none; will-change: transform; }   /* มี JS → เลื่อนด้วย JS แทน CSS */
.clients__track img { -webkit-user-drag: none; user-select: none; }

/* ปุ่มเลื่อนซ้าย/ขวา: วงกลมขาวกึ่งโปร่ง ตรงกลางแนวโลโก้ */
.clients__btn {
  position: absolute;
  z-index: 2;
  top: calc(71px + 2px + var(--logo-h) / 2 - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy-950);
  box-shadow: 0 6px 20px rgba(6, 20, 59, .16), 0 0 0 1px rgba(6, 20, 59, .06);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s, color .2s;
}
.clients__btn--prev { left: 18px; transform: translateX(-8px); }
.clients__btn--next { right: 18px; transform: translateX(8px); }
.clients:hover .clients__btn,
.clients:focus-within .clients__btn,
.no-hover .clients__btn { opacity: 1; transform: none; }
.clients__btn:hover { background: var(--navy-950); color: var(--white); }
.clients__btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.no-js .clients__btn { display: none; }
@media (hover: none) {
  .clients__btn { opacity: 1; transform: none; }
}
@keyframes clients-scroll {
  to { transform: translateX(-50%); }
}

/* =========================================================
   CTA — แบบ: y 2060–2500 · หัวข้อ x 128
   ========================================================= */
.cta {
  position: relative;
  height: 440px;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(180deg, #2463a8 0%, #2463a8 11%, #185399 30%, #11448a 54%, #0b3873 77%, #0b356f 88%, #133c74 100%);
}
.cta__media {
  position: absolute;
  left: 36.6%;
  right: 0;
  top: 30px;
  bottom: 0;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 16%);
          mask: linear-gradient(90deg, transparent 0%, #000 16%);
}
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cta__top {
  position: absolute;
  left: 0; top: -2px;
  width: 100%;
  height: 202px;
  pointer-events: none;
}
.cta__bottom {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 120px;
  overflow: visible;
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 2;
  padding-top: 119px;
}
.cta__title {
  margin: 0;
  font-size: 38.9px;
  font-weight: 500;
  line-height: 54px;
  color: var(--white);
}
.cta__text {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, .95);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 21px;
}
.btn--white { background: var(--white); color: var(--navy-950); }
.btn--white .btn__icon { background: var(--navy-950); color: var(--white); }
.btn--white:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.btn--ghost { color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.btn--ghost .btn__icon { background: var(--white); color: var(--navy-950); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* =========================================================
   Footer — แบบ: คอลัมน์ x 127 / 452 / 777 / 1101 · เส้นคั่น y 2674 · ล่างสุด 2739
   ========================================================= */
.site-footer {
  position: relative;
  color: rgba(255, 255, 255, .92);
  background: linear-gradient(180deg, #133c74 0%, #0e3369 22%, #0b2c5f 45%, #0b2c5f 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 325px 325px 324px 1fr;
  padding-top: 43px;
  padding-bottom: 58px;
}
.footer__brand img { width: 191px; height: auto; }
.footer__title {
  margin: 0 0 11px;
  font-size: 16.2px;
  font-weight: 300;
  line-height: 24px;
  color: var(--white);
}
.footer__col address,
.footer__col p {
  margin: 0;
  font-style: normal;
  font-size: 12.5px;
  line-height: 19.5px;
  color: rgba(255, 255, 255, .88);
}
.footer__col a { transition: color .2s; }
.footer__col a:hover { color: #9fcbff; }
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  color: var(--white);
  transition: transform .3s var(--ease), color .2s;
}
.footer__social svg { width: 13px; height: 13px; fill: currentColor; }
.footer__social a:hover { color: #9fcbff; transform: translateY(-3px); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 11.5px;
  line-height: 20px;
  color: rgba(255, 255, 255, .85);
}
.footer__bottom p { margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; }
.footer__links li + li::before { content: "|"; margin: 0 6px; opacity: .8; }
.footer__links a:hover { color: #9fcbff; }

/* ปุ่มกลับขึ้นด้านบน */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy-950);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(6, 20, 59, .3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--blue-700); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   Responsive ของส่วนเนื้อหา
   ========================================================= */
/* รู้จักเรา 1241–1529px: ย่อทั้งชุด (ภาพห้อง · กราฟิกพื้นหลัง · วงกลมฟูจิ) ตามสัดส่วนจอ 1530 ไม่ให้ข้อความทับภาพ */
@media (min-width: 1241px) and (max-width: 1529px) {
  .about { min-height: 33.66vw; }
  .about__media { width: 45.75vw; height: 33.66vw; }
  .about__bg {
    height: 39.41vw;
    background-size: 49.67vw 39.41vw, 28.1vw 39.41vw, calc(100% - 77.78vw) 39.41vw;
    background-position: left top, right top, 49.67vw top;
  }
  .about__art { width: 21.96vw; height: 21.96vw; right: -1.5vw; top: 7.65vw; }
  .about__inner { width: auto; margin: 0; }
  .about__content { width: 29vw; margin-left: 46.99vw; padding-top: 7.4vw; }
  .about__title { font-size: 2.54vw; }
  .about__text { font-size: 15px; line-height: 21.5px; }
}

@media (max-width: 1240px) {
  .about { margin-top: -60px; }
  .about__media { width: 50%; }
  .about__bg { display: none; }
  .about__content { width: auto; margin-left: 52%; padding-top: 90px; }
  .about__art { width: 240px; height: 240px; top: auto; bottom: 20px; right: -60px; opacity: .9; }
  .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .about { margin-top: 0; padding-bottom: 40px; }
  .about__bg { display: none; }
  .solutions { padding-top: 24px; }
  .cta__top path:last-child { display: none; }   /* เส้นเฉียงขาวทับหัวข้อบนจอแคบ */
  .about__media { position: relative; width: 100%; height: 300px; }
  .about__content { margin: 0; padding-top: 24px; }
  .about__art { display: none; }
  .about__title { font-size: 32px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 30px; }
  .cta { height: auto; padding-bottom: 150px; }
  .cta__media { left: 0; top: auto; height: 260px; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 45%); mask: linear-gradient(180deg, transparent 0%, #000 45%); }
  .cta__title { font-size: 30px; line-height: 42px; }
}
@media (max-width: 560px) {
  .sol-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .clients { --logo-h: 72px; }
  .clients__track { gap: 20px; padding-right: 20px; }
}

/* =========================================================
   Animation เมื่อเลื่อนมาถึง (ทำงานเฉพาะเมื่อ JS พร้อม: html.js)
   ========================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* รู้จักเรา: fade in ล้วน เรียงลำดับ #1 ภาพห้อง → #2 ข้อความ → #3 วงกลมฟูจิ (ผู้ใช้สั่ง 15 ต.ค. 2569) */
.about__media picture { display: block; height: 100%; }
.js .about__bg,
.js .about__media,
.js .about__content,
.js .about__art {
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.js .about.is-in .about__bg,
.js .about.is-in .about__media   { opacity: 1; transition-delay: 0s; }
.js .about.is-in .about__content { opacity: 1; transition-delay: .4s; }
.js .about.is-in .about__art     { opacity: 1; transition-delay: .8s; }

/* CTA: ภาพบ้านเลื่อนเข้าช้า ๆ */
.js .cta__media img {
  transform: scale(1.08) translateX(30px);
  transition: transform 2s var(--ease);
}
.js .cta.is-in .cta__media img { transform: none; }

/* แถบไฮไลต์ขาวขอบล่าง CTA วาดเส้นตามการเลื่อน */
.js .cta__bottom path:last-child {
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  transition: stroke-dashoffset 2.2s var(--ease) .3s;
}
.js .cta.is-in .cta__bottom path:last-child { stroke-dashoffset: 0; }

/* จุดสไลด์ที่ทำงานอยู่: แถบนับเวลาเลื่อนอัตโนมัติ */
.hero__dot.is-active {
  background: linear-gradient(var(--blue-600), var(--blue-600)) 0 0 / 0% 100% no-repeat, var(--navy-950);
}
.hero.is-playing .hero__dot.is-active { animation: dot-progress var(--hero-delay, 6500ms) linear forwards; }
@keyframes dot-progress { to { background-size: 100% 100%, auto; } }

/* =========================================================
   หน้า "รู้จักเรา" (about.html) — ระยะอ้างอิงจาก 2-about.jpg ย่อเป็นกว้าง 1530px
   ========================================================= */

/* --- หัวหน้า: ภาพท้องฟ้า + อาคาร ขอบล่างจางเป็นขาว --- */
.page-hero {
  position: relative;
  height: 505px;
  overflow: hidden;
  background: #eaf2fb;
}
.page-hero__media,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-hero__media img {
  object-fit: cover;
  object-position: 50% 0;       /* ไม่มี animation ขยายภาพ (ผู้ใช้สั่ง 17 ต.ค. 2569) */
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 261px;
}
.page-hero__title {
  margin: 0;
  font-size: 58px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-950);
  animation: page-hero-title .9s var(--ease) .2s both;
}
@keyframes page-hero-title { from { opacity: 0; transform: translateY(20px); } }

/* --- Shintaeki Thailand: ภาพห้องในกรอบโค้งด้านซ้าย + ข้อความขวา --- */
.about-intro {
  position: relative;
  min-height: 575px;
}
.about-intro__media {
  position: absolute;
  left: 0; top: 0;
  width: 672px;
  height: 500px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 672 500' preserveAspectRatio='none'%3E%3Cpath d='M0 4C17 5 67 8 100 11C133 14 167 18 200 23C233 28 267 32 300 40C333 48 367 58 400 71C433 84 467 96 500 115C533 134 575 163 600 185C625 207 638 223 650 245C662 267 672 289 672 315C672 341 662 378 650 400C638 422 625 432 600 444C575 456 533 464 500 469C467 474 433 472 400 474C367 476 333 479 300 481C267 483 233 485 200 487C167 489 133 491 100 493C67 495 17 499 0 500Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 672 500' preserveAspectRatio='none'%3E%3Cpath d='M0 4C17 5 67 8 100 11C133 14 167 18 200 23C233 28 267 32 300 40C333 48 367 58 400 71C433 84 467 96 500 115C533 134 575 163 600 185C625 207 638 223 650 245C662 267 672 289 672 315C672 341 662 378 650 400C638 422 625 432 600 444C575 456 533 464 500 469C467 474 433 472 400 474C367 476 333 479 300 481C267 483 233 485 200 487C167 489 133 491 100 493C67 495 17 499 0 500Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.about-intro__media picture { display: block; height: 100%; }
.about-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 40%;
}
.js .about-intro__media { opacity: 0; transition: opacity 1s var(--ease); }
.js .about-intro__media.is-in { opacity: 1; }

.about-intro__inner { position: relative; }
.about-intro__content {
  width: 510px;
  margin-left: 652px;          /* ข้อความเริ่ม x 779 ที่จอ 1530 */
  padding-top: 177px;
}

/* --- เหตุผลที่ลูกค้าเลือกเรา: แถบน้ำเงิน ขอบบน/ล่างเป็นคลื่น --- */
.reasons {
  position: relative;
  margin-top: 0;
  padding: 66px 0 58px;
  color: var(--white);
}
.reasons::before {             /* ตัวแถบ (ระหว่างคลื่นบนกับคลื่นล่าง) */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 66px; bottom: 58px;
  background: linear-gradient(180deg, #3a72b0 0%, #0e529b 15%, #014a97 30%, #014a97 78%, #1257a0 92%, #2c66a7 100%);
}
.reasons__wave {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.reasons__wave--top { top: 1px; height: 66px; fill: #3a72b0; }
.reasons__wave--bottom { bottom: 0; height: 58px; fill: url(#reasonsBottomFill); }
.reasons .container { position: relative; z-index: 1; padding-bottom: 74px; }
.reasons__heading {
  margin: 0;
  padding-top: 66px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.reasons__list {
  display: grid;
  grid-template-columns: repeat(4, 263px);
  margin-top: 41px;
  padding-left: 125px;
}
.reason__icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-left: -4px;
  transition: transform .4s var(--ease);
}
.reason__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.reason:hover .reason__icon { transform: translateY(-4px) scale(1.06); }
.reason__title {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
}
.reason__text {
  margin: 11px 0 0;
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, .92);
}

/* --- ลูกค้าของเรา (มีหัวข้อ) --- */
.clients--titled { padding-top: 91px; padding-bottom: 94px; }
.clients__title { text-align: center; margin-bottom: 48px; }
.clients--titled .clients__btn { top: calc(91px + 55px + 48px + 2px + var(--logo-h) / 2 - 22px); }

/* --- footer มีคลื่นด้านบน --- */
.site-footer--wave { margin-top: 116px; }
.site-footer--wave .footer__grid { padding-top: 16px; }
.footer-wave {
  position: absolute;
  left: 0;
  top: -115px;
  width: 100%;
  height: 116px;
  pointer-events: none;
}

/* --- Responsive --- */
@media (min-width: 1241px) and (max-width: 1529px) {
  .about-intro__media { width: 43.92vw; height: 32.68vw; }
  .about-intro { min-height: 37.6vw; }
  .about-intro__inner { width: auto; margin: 0; }
  .about-intro__content { width: 33vw; margin-left: 50.9vw; padding-top: 10vw; }
  .about-intro .about__text { font-size: 15px; line-height: 21.5px; }
}
@media (max-width: 1240px) {
  .reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-left: 0; max-width: 640px; margin-inline: auto; }
  .about-intro__media { width: 50%; height: 380px; }
  .about-intro { min-height: 420px; }
  .about-intro__content { width: auto; margin-left: 52%; padding-top: 60px; }
}
@media (max-width: 860px) {
  .page-hero { height: 340px; }
  .page-hero__inner { padding-top: 150px; }
  .page-hero__title { font-size: 42px; }
  .about-intro__media { position: relative; width: 100%; height: 300px; }
  .about-intro { min-height: 0; padding-bottom: 48px; }
  .about-intro__content { margin: 0; padding-top: 24px; }
  .reasons__heading { font-size: 30px; padding-top: 40px; }
  .reasons__list { margin-top: 32px; }
  .reason__title { font-size: 22px; }
  .clients--titled { padding-top: 60px; padding-bottom: 60px; }
  .clients__title { margin-bottom: 32px; }
}
@media (max-width: 560px) {
  .reasons__list { grid-template-columns: 1fr; }
}

/* =========================================================
   หน้า Heat Pump System (heat-pump.html) — ระยะจาก 3-heat-pump-system.jpg ย่อเป็นกว้าง 1530px
   ========================================================= */
.page-hero__title--en { font-family: "Noto Sans", var(--font-th); font-size: 57.4px; margin-top: -5px; }

/* --- จุดเด่น: แถบโค้งฟ้า (ภาพ alpha ยืดตามจอ) + วงกลมเครื่อง --- */
.hp-intro {
  position: relative;
  z-index: 1;
  height: 643px;                 /* y 505–1148 */
}
.hp-intro__swoosh {
  position: absolute;
  left: 0; top: -25px;
  width: 100%;
  height: 690px;
  background: url("../img/hp-swoosh.webp") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.hp-intro__inner { position: relative; height: 100%; }
.hp-intro__visual {
  position: absolute;
  left: 173px;                   /* x 300 */
  top: 125px;                    /* y 630 */
  width: 405px;
}
.hp-intro__visual img { width: 100%; height: auto; }
.hp-intro__content {
  position: absolute;
  left: 649px;                   /* x 778 */
  top: 207px;
}
.hp-block + .hp-block { margin-top: 52px; }
.hp-block__title {
  margin: 0;
  font-family: "Noto Sans", var(--font-th);
  font-size: 25.6px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy-950);
}
.hp-block__text {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 20.5px;
  color: #1b2238;
}

/* --- คุณสมบัติ: แถบฟ้าขอบคลื่น + ภาพอ่าง --- */
.hp-points {
  position: relative;
  height: 611px;                 /* y 1148–1759 */
  overflow-x: clip;
}
.hp-points__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #d5effe;
}
.hp-points__media {
  position: absolute;
  right: 0;
  top: 47px;                     /* y 1195 */
  width: 685px;
}
.hp-points__media img { width: 100%; height: auto; }
.js .hp-points__media { opacity: 0; transform: translateX(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .hp-points__media.is-in { opacity: 1; transform: none; }
.hp-points__inner { position: relative; padding-top: 160px; padding-left: 123px; }
.hp-points__title {
  margin: 0 0 0 1px;
  font-family: "Noto Sans", var(--font-th);
  font-size: 38.6px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-950);
}
.hp-points__list { margin-top: 19px; }
.hp-points__list li {
  position: relative;
  padding-left: 22px;
  font-family: "Noto Sans", var(--font-th);
  font-size: 19.2px;
  line-height: 39px;
  color: #1b2238;
}
.hp-points__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-700);
}

/* --- All In One: ภาพฝักบัวชิดซ้าย มุมขวาโค้ง --- */
.hp-allinone {
  position: relative;
  overflow-x: clip;
  min-height: 775px;             /* y 1759–2407 + ช่องว่างก่อน footer */
  padding-bottom: 0;
}
.hp-allinone__media {
  position: absolute;
  left: 0; top: 139px;           /* y 1898 */
  width: 765px;
  height: 509px;
  overflow: hidden;
  border-radius: 0 32px 32px 0;
}
.hp-allinone__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hp-allinone:hover .hp-allinone__media img { transform: scale(1.03); }
.js .hp-allinone__media { opacity: 0; transform: translateX(-40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .hp-allinone__media.is-in { opacity: 1; transform: none; }
.hp-allinone__inner { position: relative; }
.hp-allinone__content {
  margin-left: 686px;            /* x 813 */
  padding-top: 220px;
}
.hp-block__text--wide { width: 700px; line-height: 22.5px; }
.hp-allinone__content { width: 700px; }
.hp-features__title { margin-top: 47px; }
.hp-features {
  margin: 4px 0 0;
  padding-left: 21px;
  list-style: decimal;
  font-size: 16px;
  line-height: 21.7px;
  color: #1b2238;
}
.hp-features li { padding-left: 2px; }

/* --- Responsive --- */
@media (max-width: 1529px) {
  .hp-intro__swoosh { background-size: 1530px 100%; background-position: 0 0; }
}
/* 1241–1529px: ภาพอ่าง/ฝักบัวย่อตามจอ ข้อความไม่ทับภาพ */
@media (min-width: 1241px) and (max-width: 1529px) {
  .hp-points__media { width: 44.77vw; top: 3.07vw; }
  .hp-allinone__media { width: 50vw; height: 33.27vw; }
  .hp-allinone__inner { width: auto; margin: 0; }
  .hp-allinone__content { width: 44vw; margin-left: 53.14vw; }
  .hp-block__text--wide { width: auto; }
  .hp-block__text--wide br { display: none; }
}
@media (max-width: 1240px) {
  .hp-intro { height: auto; padding: 40px 0 60px; }
  .hp-intro__inner { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; }
  .hp-intro__visual, .hp-intro__content { position: static; width: auto; }
  .hp-points { height: auto; padding: 80px 0 110px; }
  .hp-points__media { position: relative; top: auto; right: auto; width: min(560px, 90%); margin: 0 0 0 auto; order: 2; }
  .hp-points__inner { padding-top: 0; padding-left: 0; }
  .hp-allinone { min-height: 0; padding: 60px 0 40px; }
  .hp-allinone__media { position: relative; top: 0; width: min(765px, 92%); height: auto; aspect-ratio: 765 / 509; }
  .hp-allinone__content { width: auto; margin: 32px 0 0; padding-top: 0; }
  .hp-block__text br, .hp-block__text--wide br { display: none; }
  .hp-block__text--wide { width: auto; }
}
@media (max-width: 760px) {
  .hp-intro__inner { grid-template-columns: 1fr; }
  .hp-intro__visual { max-width: 340px; margin: 0 auto; }
  .hp-points__title { font-size: 28px; }
  .hp-points__list li { font-size: 16px; line-height: 32px; }
  .hp-points__list li::before { top: 12px; }
  .hp-block__title { font-size: 22px; }
}

/* =========================================================
   หน้า ผลงานของเรา (projects.html) — ระยะจาก 4-project.png ขยายเป็นกว้าง 1530px
   ========================================================= */
.page-hero--project { height: 599px; }
.page-hero--project .page-hero__inner { padding-top: 186px; }
.page-hero--project .page-hero__title { font-size: 64px; line-height: 1.2; }
.page-hero__en {
  margin: -3px 0 0;
  font-family: "Noto Sans", var(--font-th);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy-950);
  animation: page-hero-title .9s var(--ease) .35s both;
}
.page-hero__lead {
  margin: 22px 0 0;
  font-size: 18.5px;
  line-height: 27.5px;
  color: #1b2238;
  animation: page-hero-title .9s var(--ease) .5s both;
}

/* --- ประเภทโครงการ: แถบฟ้าอ่อนขอบล่างโค้ง --- */
.ptypes {
  position: relative;
  height: 281px;                  /* y 599–880 */
}
.ptypes__bg {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 300px;
  fill: #eef4fc;
  pointer-events: none;
}
.ptypes__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 57px;
}
.ptypes .section-title, .projects .section-title { font-size: 36.5px; }
.projects .section-sub { font-size: 17.5px; }
.ptypes__sub {
  margin: 4px 0 0;
  font-size: 17.5px;
  line-height: 28px;
  color: #1b2238;
}
.ptypes__list {
  display: flex;
  margin-top: 6px;
  margin-right: -3px;
}
.ptype {
  width: 152px;
  text-align: center;
}
.ptype__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-700);
  box-shadow: 0 6px 18px rgba(10, 40, 90, .08);
  transition: transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.ptype__icon svg {
  width: 38px; height: 38px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ptype:hover .ptype__icon {
  transform: translateY(-5px);
  background: var(--blue-700);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(0, 75, 156, .25);
}
.ptype__label {
  display: block;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 22px;
  color: #1b2238;
}

/* --- ผลงานโครงการ --- */
.projects { padding-top: 5px; padding-bottom: 8px; }
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px 23px;
  margin-top: 26px;
}
.pcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 0 0 1px #eef2f8, 0 6px 18px rgba(10, 30, 70, .07);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px #e3eaf5, 0 18px 40px rgba(10, 30, 70, .14); }
.pcard__media {
  position: relative;
  aspect-ratio: 303 / 215;
  overflow: hidden;
  background: #e8eef6;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__type {
  position: absolute;
  left: 12px; top: 10px;
  padding: 5px 15px;
  border-radius: 999px;
  background: #0668a9;
  color: var(--white);
  font-size: 13.5px;
  line-height: 20px;
}
.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 165px;
  padding: 20px 17px 18px;
}
.pcard__title {
  margin: 0;
  font-family: "Noto Sans", var(--font-th);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0a1650;
  transition: color .25s;
}
.pcard:hover .pcard__title { color: var(--blue-700); }
.pcard__loc { margin: 3px 0 0; font-size: 14px; line-height: 22px; color: #3a5877; }
.pcard__desc { margin: 5px 0 0; font-size: 12.5px; line-height: 22px; color: #6b7a90; }
.pcard__sys {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 6px;
  font-family: "Noto Sans", var(--font-th);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 20px;
  color: #1b2b48;
}
.pcard__sys svg {
  flex: none;
  width: 21px; height: 21px;
  fill: none; stroke: #2c8fd8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* --- CTA ของหน้านี้ (เตี้ยกว่าหน้าแรก) --- */
.cta--project { height: 338px; }
.cta--project .cta__inner { padding-top: 69px; }
.cta--project .cta__title { font-size: 32px; line-height: 49px; }
.cta--project .cta__text { margin-top: 4px; font-size: 16.5px; line-height: 28px; }
.cta--project .cta__actions { margin-top: 14px; }
.cta--project .cta__top { height: 120px; }
.cta--project .cta__bottom { height: 70px; }
.cta--project .cta__media { top: 50px; }

/* --- Responsive --- */
@media (max-width: 1240px) {
  .ptypes { height: auto; padding-bottom: 90px; }
  .ptypes__bg { height: 100%; }
  .ptypes__inner { flex-direction: column; gap: 28px; padding-top: 48px; }
  .ptypes__list { flex-wrap: wrap; gap: 20px 0; margin: 0; }
  .ptype { width: calc(100% / 3); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-hero--project { height: 520px; }
  .page-hero--project .page-hero__inner { padding-top: 120px; }
  .page-hero--project .page-hero__title { font-size: 44px; }
  .page-hero__en { font-size: 28px; }
  .page-hero__lead { font-size: 16px; line-height: 25px; }
  .page-hero--project .page-hero__lead br { display: none; }
  .cta--project { height: auto; }
}
@media (max-width: 560px) {
  .ptype { width: 50%; }
  .pgrid { grid-template-columns: 1fr; }
}

/* =========================================================
   หน้า ติดต่อเรา (contact.html) — ระยะจาก 5-contact.png ขยายเป็นกว้าง 1530px
   ========================================================= */
.page-hero--contact .page-hero__media img { object-position: 60% 0; }
.page-hero--contact .page-hero__inner { padding-top: 220px; }
.page-hero--contact .page-hero__title { font-size: 68px; }
.page-hero--contact .page-hero__en { font-size: 46px; margin-top: 2px; }
.page-hero--contact .page-hero__lead { margin-top: 18px; font-size: 20.5px; line-height: 33px; }

/* --- ข้อมูลติดต่อ + ฟอร์ม --- */
.contact { padding: 40px 0 0; }
.contact__info { padding-top: 46px; }
.contact__inner {
  display: grid;
  grid-template-columns: 472px 1fr;
  gap: 0;
}
.contact .section-title { font-size: 42px; line-height: 1.3; }
.contact__sub { margin: 2px 0 0; font-size: 21px; line-height: 26px; color: #2d4a73; }
.cinfo__list { margin-top: 38px; }
.cinfo {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.cinfo + .cinfo { margin-top: 40px; }
.cinfo__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1a64b4 0%, #07366b 75%);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(7, 54, 107, .22);
  transition: transform .35s var(--ease);
}
.cinfo:hover .cinfo__icon { transform: scale(1.08) rotate(-6deg); }
.cinfo__icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cinfo__title { margin: 4px 0 0; font-size: 18.5px; font-weight: 700; line-height: 26px; color: #0a2556; }
.cinfo__text { margin: 3px 0 0; font-size: 17.5px; line-height: 30px; color: #2d4a73; }
.cinfo__text a:hover { color: var(--blue-700); text-decoration: underline; }

.cform-card {
  padding: 46px 34px 46px 40px;
  border: 1px solid #e6eef8;
  border-radius: 14px;
  background: #f2f8fd;
}
.contact .cform__title { font-size: 38.5px; }
.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  margin-top: 26px;
}
.cfield { position: relative; display: block; }
.cfield--full { grid-column: 1 / -1; }
.cfield__label {
  position: absolute;
  left: 20px; top: 18px;
  font-size: 17.5px;
  line-height: 24px;
  color: #3b5170;
  pointer-events: none;
  z-index: 1;
}
.cfield__label b { color: #3b5170; font-weight: 400; }
.cfield input,
.cfield select,
.cfield textarea {
  display: block;
  width: 100%;
  border: 1px solid #dbe8f6;
  border-radius: 10px;
  background: var(--white);
  font: inherit;
  font-size: 16px;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.cfield input { height: 80px; padding: 42px 20px 10px; }
.cfield select {
  height: 104px;
  padding: 30px 46px 0 30px;
  line-height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2556' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 30px top 59px / 18px no-repeat,
    linear-gradient(#f1f6fc, #f1f6fc) 18px 48px / calc(100% - 36px) 40px no-repeat,
    var(--white);
  cursor: pointer;
}
.cfield select:invalid { color: #3b5170; }
.cfield textarea { height: 152px; padding: 54px 20px 12px; resize: vertical; }
.cfield textarea::placeholder { color: #9aa8bb; }
.cfield input:focus,
.cfield select:focus,
.cfield textarea:focus { outline: 0; border-color: #5d9ae0; box-shadow: 0 0 0 4px rgba(0, 92, 184, .12); }
.cfield__error {
  display: none;
  margin-top: 6px;
  font-size: 13.5px;
  color: #c0392b;
}
.cfield.is-invalid input,
.cfield.is-invalid select,
.cfield.is-invalid textarea { border-color: #e06b5f; }
.cfield.is-invalid .cfield__error,
.ccheck.is-invalid .cfield__error { display: block; }

.ccheck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  color: #3b5170;
  cursor: pointer;
}
.ccheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-700); }
.ccheck a { color: #2c8fd8; text-decoration: underline; }
.ccheck .cfield__error { flex-basis: 100%; margin: 0 0 0 30px; }
.cform__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 298px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0d4c8f, #063873);
  color: var(--white);
  font-size: 16.5px;
  box-shadow: 0 8px 20px rgba(6, 56, 115, .25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cform__submit svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cform__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 56, 115, .32); }
.cform__submit[disabled] { opacity: .65; pointer-events: none; }
.cform__status { margin: 0; font-size: 15px; color: #0a7a42; }
.cform__status.is-error { color: #c0392b; }

/* --- แผนที่ + ภาพสำนักงาน --- */
.cmap { padding: 56px 0 64px; }
.cmap__grid {
  display: grid;
  grid-template-columns: 756px 1fr;
  gap: 38px;
}
.cmap .section-title { font-size: 36px; }
.cmap__map {
  position: relative;
  height: 516px;
  margin-top: 30px;
  overflow: hidden;
  border-radius: 12px;
  background: #e8eef5;
  box-shadow: 0 0 0 1px #e6eef8;
}
.cmap__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmap__card {
  position: absolute;
  left: 10px; top: 10px;
  padding: 26px 26px 22px 24px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(10, 30, 70, .14);
}
.cmap__addr {
  display: flex;
  gap: 16px;
  margin: 0;
  font-size: 16.5px;
  line-height: 28px;
  color: #0a2556;
}
.cmap__addr span {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-top: -2px;
  border-radius: 50%;
  background: #07366b;
  color: var(--white);
}
.cmap__addr svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.cmap__btn {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 16px;
  padding: 13px 22px 13px 28px;
  border-radius: 999px;
  background: #07366b;
  color: var(--white);
  font-size: 15.5px;
  transition: background .2s, transform .25s var(--ease);
}
.cmap__btn:hover { background: var(--blue-700); transform: translateY(-2px); }
.cmap__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmap__gallery-wrap { padding-top: 44px; }
.cmap__gtitle { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; color: #0a2556; }
.cmap__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 284px 211px;
  gap: 8px;
  margin-top: 14px;
}
.cmap__gallery picture { overflow: hidden; border-radius: 8px; }
.cmap__g1 { grid-column: 1 / -1; }
.cmap__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cmap__gallery picture:hover img { transform: scale(1.06); }

/* --- Responsive --- */
@media (max-width: 1529px) and (min-width: 1241px) {
  .contact__inner { grid-template-columns: 34% 1fr; }
  .cmap__grid { grid-template-columns: 58% 1fr; }
}
@media (max-width: 1240px) {
  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .cmap__grid { grid-template-columns: 1fr; }
  .cmap__gallery-wrap { padding-top: 0; }
}
@media (max-width: 640px) {
  .cform { grid-template-columns: 1fr; }
  .cform-card { padding: 32px 20px; }
  .contact .section-title, .contact .cform__title, .cmap .section-title { font-size: 30px; }
  .cform__submit { width: 100%; }
  .cmap__map { height: 440px; }
  .cmap__card { left: 12px; right: 12px; top: 12px; padding: 16px; }
  .cmap__addr { font-size: 15px; line-height: 24px; }
  .cmap__gallery { grid-template-rows: 200px 150px; }
  .cinfo { gap: 18px; }
  .cinfo__icon { width: 56px; height: 56px; }
}

/* =========================================================
   หน้าผลิตภัณฑ์ Heat Recovery / Storage Electric / Pool Heat Pump (โครงเดียวกับ heat-pump.html)
   ========================================================= */
.hp-intro--auto { height: auto; min-height: 643px; padding-bottom: 40px; }
.hp-intro--auto .hp-intro__content { position: relative; left: auto; top: auto; margin-left: 649px; padding-top: 190px; width: 680px; }
.hp-intro--auto .hp-block__text br { display: block; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spec-chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1px #cfe3f7;
  font-family: "Noto Sans", var(--font-th);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-700);
}

.hp-points--auto { height: auto; min-height: 611px; padding-bottom: 120px; }
.hp-points--auto .hp-points__inner { max-width: 1276px; }
.hp-points--auto .hp-points__list { max-width: 590px; }
.hp-points__list--num { counter-reset: pt; list-style: none; padding-left: 0; }
.hp-points__list--num li { counter-increment: pt; padding-left: 40px; line-height: 30px; margin-bottom: 9px; }
.hp-points__list--num li::before {
  content: counter(pt);
  top: 2px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--white);
}

.hp-allinone--auto { min-height: 775px; padding-bottom: 110px; }
.hp-allinone--auto .hp-allinone__content { padding-top: 170px; }
.hp-allinone--auto .hp-allinone__content { width: 590px; }
.hp-allinone--auto .hp-block__text--wide { width: auto; }
.hp-allinone__media--contain { background: var(--white); box-shadow: inset 0 0 0 1px #e6eef8; }
.hp-allinone__media--contain img { object-fit: contain; }
.hp-steps { margin: 14px 0 0; padding-left: 22px; font-size: 16px; line-height: 26px; color: #1b2238; }
.hp-steps li + li { margin-top: 10px; }
.hp-steps li::marker { font-weight: 600; color: var(--blue-700); }
.hp-control { display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #f2f8fd; font-size: 15px; line-height: 24px; color: #1b2238; }
.hp-control img { width: 64px; height: auto; flex: none; }
.hp-control strong { color: var(--navy-950); }

.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.use-grid li { position: relative; overflow: hidden; border-radius: 10px; }
.use-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s var(--ease); }
.use-grid li:hover img { transform: scale(1.07); }
.use-grid span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 9px;
  background: linear-gradient(transparent, rgba(6, 20, 59, .78));
  color: var(--white);
  font-family: "Noto Sans", var(--font-th);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}

.spec-table-wrap { margin-top: 18px; overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; color: #1b2238; }
.spec-table th, .spec-table td { padding: 12px 16px; border-bottom: 1px solid #e3ecf6; text-align: left; }
.spec-table thead th { background: var(--navy-950); color: var(--white); font-weight: 500; }
.spec-table thead th:first-child { border-radius: 10px 0 0 0; }
.spec-table thead th:last-child { border-radius: 0 10px 0 0; }
.spec-table tbody th { font-weight: 600; color: var(--navy-950); background: #f2f8fd; }
.spec-table tbody tr:hover td { background: #f7fbff; }
.spec-note { margin-top: 14px; }

@media (min-width: 1241px) and (max-width: 1529px) {
  .hp-intro--auto .hp-intro__content { margin-left: 610px; width: auto; }
  .hp-points--auto .hp-points__list { max-width: calc(55vw - 190px); }
  .hp-allinone--auto .hp-allinone__content { width: 44vw; }
}
@media (max-width: 1240px) {
  .hp-intro--auto .hp-intro__content { margin: 0; padding-top: 0; width: auto; }
  .hp-intro--auto .hp-block__text br { display: none; }
  .hp-points--auto { padding-bottom: 110px; }
  .hp-allinone--auto { min-height: 0; padding-bottom: 60px; }
  .hp-allinone--auto .hp-allinone__content { padding-top: 0; width: auto; }
}
@media (max-width: 560px) {
  .page-hero__title--en { font-size: 32px; line-height: 1.25; }
  .use-grid { grid-template-columns: 1fr 1fr; }
  .spec-table { font-size: 14px; }
  .spec-table th, .spec-table td { padding: 10px; }
}

/* =========================================================
   หน้าบริการหลังการขาย (service.html) — ไม่มีแบบ ใช้โครงจาก about.html + projects.html
   ========================================================= */
.page-hero--service .page-hero__media img { object-position: 70% 0; }
.svc-intro .about__title { font-size: 36px; line-height: 1.3; }
.svc-intro .about__text { margin-top: 14px; line-height: 25px; }
.svc-intro .about-intro__content { padding-top: 120px; }

/* --- บริการของเรา: การ์ด 3 คอลัมน์ บนพื้นฟ้าอ่อนขอบบนโค้ง --- */
.svc {
  position: relative;
  padding: 40px 0 120px;
  background: linear-gradient(180deg, var(--white) 0, #f3f8fd 160px, #f3f8fd 100%);
}
.svc__head { text-align: center; }
.svc__head .section-sub { margin-top: 2px; font-size: 17px; line-height: 26px; }
.svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 42px;
}
.svc-card {
  position: relative;
  padding: 34px 32px 32px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 0 0 1px #e6eef8, 0 8px 24px rgba(10, 30, 70, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px #d8e5f4, 0 18px 40px rgba(10, 30, 70, .13); }
.svc-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eaf3fc;
  color: var(--blue-700);
  transition: background .3s, color .3s, transform .4s var(--ease);
}
.svc-card__icon svg {
  width: 32px; height: 32px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.svc-card:hover .svc-card__icon { background: var(--blue-700); color: var(--white); transform: scale(1.06); }
.svc-card__num {
  position: absolute;
  right: 28px; top: 24px;
  font-family: "Noto Sans", var(--font-th);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: #e3edf8;
  transition: color .3s;
}
.svc-card:hover .svc-card__num { color: #cfe0f3; }
.svc-card__title span { white-space: nowrap; }
.svc-card__title {
  margin: 22px 0 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-950);
}
.svc-card__text {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 25px;
  color: #3a4660;
}

/* --- ขั้นตอนการให้บริการ: ใช้แถบน้ำเงินของ about.html + เลขขั้นตอน --- */
.reasons--steps { margin-top: -40px; background: linear-gradient(#f3f8fd, #f3f8fd) 0 0 / 100% 67px no-repeat; }
.reasons--steps .reasons__list { list-style: none; margin-bottom: 0; }
.reason__step {
  display: block;
  margin-bottom: 12px;
  font-family: "Noto Sans", var(--font-th);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #9cc6f3;
}
.cta--service .cta__text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
.cta--service .cta__text a:hover { text-decoration-color: currentColor; }

@media (min-width: 1241px) and (max-width: 1529px) {
  .svc-intro .about-intro__content { padding-top: 7vw; }
  .svc-intro .about__title { font-size: 2.35vw; }
}
@media (max-width: 1240px) {
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-intro .about-intro__content { padding-top: 40px; }
}
@media (max-width: 860px) {
  .page-hero--service .page-hero__media img { object-position: 78% 0; }
  .page-hero--contact .page-hero__media img { object-position: 82% 0; }
  .page-hero--contact.page-hero--veil .page-hero__media::after {   /* ข้อความยาวลงถึงช่วงล่าง → ขาวเข้มต่อถึงขอบล่าง ยังเห็นหน้าคนด้านบน */
    background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .6) 22%, rgba(255, 255, 255, .84) 42%, rgba(255, 255, 255, .86) 100%);
  }
  .page-hero--veil .page-hero__media::after {   /* จอแคบ: วัตถุในภาพมาอยู่ใต้ข้อความ → ทำพื้นขาวจางให้อ่านง่าย (service + หน้าผลิตภัณฑ์ 3 หน้า) */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .8) 25%, rgba(255, 255, 255, .72) 58%, rgba(255, 255, 255, 0) 82%);
  }
  .page-hero--service .page-hero__lead br { display: none; }
  .svc { padding-bottom: 100px; }
  .svc-intro .about__title { font-size: 30px; }
}
@media (max-width: 640px) {
  .svc__grid { grid-template-columns: 1fr; gap: 18px; }
  .svc-card { padding: 28px 24px 26px; }
}

/* =========================================================
   หน้าย่อยที่ไม่มีแบบ: ข่าวสารและความรู้ · บทความ · ค้นหา · นโยบาย · ข้อกำหนด · แผนผังเว็บไซต์ · 404
   ========================================================= */
/* เมนูภาษา: EN ยังไม่มีหน้า → แสดงเป็น "เร็ว ๆ นี้" (ไม่ใช่ลิงก์) */
.lang__soon { display: block; padding: 8px 12px; font-size: 14px; color: #8a97ab; cursor: default; }
.lang__soon small, .mobile-nav__lang small { font-size: 11px; margin-left: 4px; }
.mobile-nav__lang .lang__soon { display: inline; padding: 0; font-size: 15px; }

/* --- หัวหน้าแบบไม่มีภาพ: พื้นฟ้าอ่อน + คลื่นด้านล่าง --- */
.page-hero--plain { height: auto; min-height: 380px; padding-bottom: 104px; background: linear-gradient(180deg, #d9e9f9 0%, #eaf3fc 52%, #f7fbff 100%); }
.page-hero--plain .page-hero__title--article { max-width: 860px; font-size: 42px; line-height: 1.35; }
.page-hero--plain .page-hero__inner { padding-top: 168px; }
.page-hero--plain .page-hero__title { font-size: 52px; line-height: 1.25; }
.page-hero--plain .page-hero__en { font-size: 26px; margin-top: 2px; color: #3a5877; }
.page-hero__waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }
.page-hero__waves path:nth-child(1) { fill: #cfe2f6; opacity: .55; }
.page-hero__waves path:nth-child(2) { fill: #fff; }
.page-hero__flake {
  position: absolute;
  right: max(var(--gutter), calc((100% - 1276px) / 2));
  top: 118px;
  width: 210px; height: 210px;
  color: #c4dcf4;
  opacity: .7;
  pointer-events: none;
  animation: page-hero-title 1.2s var(--ease) .3s both;
}
.page-hero__flake svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 14px; color: #4a5a75; animation: page-hero-title .9s var(--ease) .1s both; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #9fb3cc; }
.breadcrumb a { color: var(--blue-700); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero--project .breadcrumb { margin-bottom: 14px; }

/* --- เนื้อหาบทความ / นโยบาย (ตัวอักษรอ่านยาว) --- */
.prose { font-size: 17px; line-height: 1.85; color: #1b2238; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 42px 0 12px; font-size: 26px; font-weight: 600; line-height: 1.4; color: var(--navy-950); scroll-margin-top: 110px; }
.prose h3 { margin: 28px 0 8px; font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--navy-950); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: .78em; width: 8px; height: 8px; border-radius: 50%; background: #2c8fd8; }
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; padding-left: 34px; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: .3em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-700); color: var(--white); font-size: 13px; font-weight: 600; line-height: 1; }
.prose a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 75, 156, .35); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; color: var(--navy-950); }
.prose table { width: 100%; margin: 6px 0 22px; border-collapse: collapse; font-size: 15.5px; line-height: 1.6; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid #e3ecf6; text-align: left; vertical-align: top; }
.prose thead th { background: var(--navy-950); color: var(--white); font-weight: 500; }
.prose tbody th { width: 34%; background: #f2f8fd; font-weight: 600; color: var(--navy-950); }
/* เนื้อหาข่าว: ใช้แค่ <p> · <p><strong>…</strong></p> (หัวข้อย่อยตัวหนา) · <ul><li> — ให้ระบบหลังบ้านเรียบง่าย (ผู้ใช้สั่ง 17 ต.ค. 2569) */
.article .prose p:has(> strong:only-child) { margin: 30px 0 10px; font-size: 19px; }
.article .prose > p:first-child:has(> strong:only-child) { margin-top: 0; }

/* --- ข่าวสารและความรู้ --- */
.news { padding: 64px 0 120px; }
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.news__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px #cfdcec;
  font-size: 14.5px; color: #1b2b48; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.chip:hover, .chip[aria-pressed="true"] { background: var(--navy-950); color: var(--white); box-shadow: none; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 34px; }
.ncard {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--white);
  box-shadow: 0 0 0 1px #e6eef8, 0 8px 24px rgba(10, 30, 70, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ncard:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px #d8e5f4, 0 18px 40px rgba(10, 30, 70, .13); }
.ncard[hidden] { display: none; }
.ncard__link { display: flex; flex-direction: column; height: 100%; }
.ncard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef6; }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ncard:hover .ncard__media img { transform: scale(1.05); }
.ncard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 24px 24px; }   /* หัวข้อข่าวชิดบน (ผู้ใช้สั่ง 17 ต.ค. 2569) */
.ncard__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--navy-950); transition: color .25s; }
.ncard:hover .ncard__title { color: var(--blue-700); }
.ncard__text { margin: 10px 0 0; font-size: 15px; line-height: 25px; color: #3a4660; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 500; color: var(--blue-700); }
.ncard__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.ncard:hover .ncard__more svg { transform: translateX(4px); }
.ncard--feature { grid-column: 1 / -1; }
.ncard--feature .ncard__link { flex-direction: row; }
.ncard--feature .ncard__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 360px; }
.ncard--feature .ncard__body { padding: 32px 44px 40px; justify-content: flex-start; }
.ncard--feature .ncard__title { font-size: 28px; }
.ncard--feature .ncard__text { font-size: 16px; line-height: 27px; -webkit-line-clamp: 5; }
.ncard--feature .ncard__more { margin-top: 18px; }
.news__note { margin-top: 40px; padding: 26px 30px; border-radius: 16px; background: #eef5fd; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.news__note p { margin: 0; font-size: 16.5px; color: #1b2238; }
.news__note strong { color: var(--navy-950); }

/* --- หน้าบทความ --- */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; padding: 54px 0 120px; }
.article__cover { margin: 0 0 28px; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 9; background: #e8eef6; }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 26px; border-top: 1px solid #e3ecf6; }
.aside-card { padding: 24px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e6eef8, 0 8px 24px rgba(10, 30, 70, .05); }
.aside-card__title { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: var(--navy-950); }
.aside-list li + li { margin-top: 14px; }
.aside-list a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.aside-list img { width: 84px; height: 62px; border-radius: 10px; object-fit: cover; }
.aside-list span { font-size: 15px; line-height: 1.5; color: #1b2b48; transition: color .25s; }
.aside-list a:hover span { color: var(--blue-700); }
.aside-card--contact { background: linear-gradient(160deg, #0a3d82 0%, #06143b 100%); color: var(--white); box-shadow: none; }
.aside-card--contact .aside-card__title { color: var(--white); }
.aside-card--contact p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.aside-card--contact .aside-tel { display: block; font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.aside-card--contact .aside-tel + .aside-tel { margin-top: 2px; }
.aside-card--contact .btn { margin-top: 18px; }
.article-aside .aside-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }

/* --- ผลลัพธ์การค้นหา --- */
.search-page { padding: 50px 0 120px; }
.search-big { display: flex; gap: 10px; max-width: 780px; }
.search-big input {
  flex: 1; min-width: 0; height: 56px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px #cfdcec; font: inherit; font-size: 17px; color: var(--text);
  transition: box-shadow .25s var(--ease);
}
.search-big input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue-700), 0 0 0 4px rgba(0, 75, 156, .12); }
.search-big button { height: 56px; padding: 0 28px; border-radius: 999px; background: var(--navy-950); color: var(--white); font-size: 16px; transition: background .25s var(--ease); }
.search-big button:hover { background: var(--blue-700); }
.search-summary { margin: 24px 0 0; font-size: 16.5px; color: #3a4660; }
.search-summary strong { color: var(--navy-950); }
.sresults { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.sresult__link { display: block; padding: 22px 26px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e6eef8; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.sresult__link:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #d3e2f3, 0 14px 30px rgba(10, 30, 70, .1); }
.sresult__type { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #eaf3fc; color: var(--blue-700); font-size: 13px; }
.sresult__title { margin: 8px 0 0; font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--navy-950); }
.sresult__link:hover .sresult__title { color: var(--blue-700); }
.sresult__snippet { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: #3a4660; }
.sresult__url { display: block; margin-top: 8px; font-family: "Noto Sans", var(--font-th); font-size: 13px; color: #6b8bb0; }
.sresults mark { padding: 0 2px; border-radius: 3px; background: #ffe98a; color: inherit; }
.search-empty { margin-top: 30px; }
.search-empty[hidden] { display: none; }
.search-empty__title { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--navy-950); }
.search-empty .news__filters { margin-bottom: 26px; }
.search-empty__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.search-empty__links a { display: block; padding: 16px 20px; border-radius: 14px; background: #f3f8fd; font-size: 15.5px; color: #1b2b48; transition: background .25s var(--ease), color .25s var(--ease); }
.search-empty__links a:hover { background: var(--navy-950); color: var(--white); }

/* --- นโยบาย / ข้อกำหนด: สารบัญซ้าย + เนื้อหา --- */
.legal { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 60px; padding: 54px 0 120px; }
.legal__toc { position: sticky; top: 100px; align-self: start; padding: 22px 22px 18px; border-radius: 16px; background: #f3f8fd; }
.legal__toc h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--navy-950); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; font-size: 14.5px; line-height: 1.5; color: #3a4660; transition: color .2s; }
.legal__toc a::before { content: counter(toc) "."; color: #8aa2bf; }
.legal__toc a:hover { color: var(--blue-700); }
.legal__updated { display: inline-block; margin-bottom: 22px; padding: 6px 14px; border-radius: 999px; background: #eaf3fc; font-size: 14px; color: #3a5877; }
.legal .prose h2 { margin-top: 38px; }

/* --- แผนผังเว็บไซต์ --- */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 56px 0 120px; }
.smap__group { padding: 28px 28px 24px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e6eef8, 0 8px 24px rgba(10, 30, 70, .05); }
.smap__group h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 20px; font-weight: 600; color: var(--navy-950); }
.smap__group h2 span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #eaf3fc; color: var(--blue-700); }
.smap__group h2 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.smap__group li + li { border-top: 1px solid #edf2f8; }
.smap__group a { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 0; transition: color .2s; }
.smap__group a strong { display: block; font-size: 16px; font-weight: 500; color: #1b2b48; }
.smap__group a small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: #6b7a90; }
.smap__group a svg { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: #9fb3cc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease), stroke .2s; }
.smap__group a:hover strong { color: var(--blue-700); }
.smap__group a:hover svg { stroke: var(--blue-700); transform: translateX(4px); }

/* --- 404 --- */
.page-hero--404 { height: 560px; }
.page-hero--404 .page-hero__inner { padding-top: 160px; }
.page-hero__code { display: block; font-family: "Noto Sans", var(--font-th); font-size: 120px; font-weight: 600; line-height: 1; color: #bcd6f2; animation: page-hero-title .9s var(--ease) both; }
.page-hero--404 .page-hero__lead { max-width: 560px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; animation: page-hero-title .9s var(--ease) .6s both; }

@media (max-width: 1240px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ncard--feature .ncard__link { flex-direction: column; }
  .ncard--feature .ncard__media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .ncard--feature .ncard__body { padding: 26px 28px 28px; }
  .article-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .article-aside .aside-sticky { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .legal__toc { position: static; }
  .smap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__flake { width: 160px; height: 160px; }
}
@media (max-width: 860px) {
  .page-hero--plain { min-height: 300px; padding-bottom: 70px; }
  .page-hero--plain .page-hero__title--article { font-size: 28px; }
  .page-hero--plain .page-hero__inner { padding-top: 118px; }
  .page-hero--plain .page-hero__title { font-size: 36px; }
  .page-hero--plain .page-hero__en { font-size: 20px; }
  .page-hero__flake { top: 96px; width: 120px; height: 120px; opacity: .45; }
  .page-hero__waves { height: 70px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 22px; }
  .ncard--feature .ncard__title { font-size: 23px; }
  .search-empty__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero--404 { height: 500px; }
  .page-hero--404 .page-hero__inner { padding-top: 120px; }
  .page-hero__code { font-size: 84px; }
}
@media (max-width: 640px) {
  .news-grid, .smap { grid-template-columns: minmax(0, 1fr); }
  .article-aside .aside-sticky { grid-template-columns: minmax(0, 1fr); }
  .search-big { flex-direction: column; }
  .search-big button { height: 50px; }
  .search-empty__links { grid-template-columns: minmax(0, 1fr); }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: auto; }
  .prose tbody th { border-bottom: 0; padding-bottom: 4px; }
}

/* =========================================================
   หน้า ผลงานของเรา — ข้อมูลจริงจากเว็บเดิม (17 ต.ค. 2569): แกลเลอรีหน้างาน + โรงแรมที่ไว้วางใจเรา
   ========================================================= */
.pgal { padding: 76px 0 96px; background: linear-gradient(180deg, #f3f8fd 0%, #f7fbff 70%, #fff 100%); }
.pgal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.pgal .section-title { font-size: 36.5px; }
.pgal .section-sub { max-width: 900px; margin-top: 2px; font-size: 17px; line-height: 27px; }
.pgal__count { margin: 0; font-size: 15px; color: #3a5877; }
.pgal__count strong { font-size: 28px; font-weight: 600; color: var(--navy-950); margin-right: 4px; }
.pgal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: 30px; }
.pgal__item { margin: 0; }
.pgal__link { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #e8eef6; box-shadow: 0 6px 18px rgba(10, 30, 70, .07); }
.pgal__link { aspect-ratio: 4 / 3; }
.pgal__link picture { display: block; height: 100%; }
.pgal__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }   /* ภาพเต็มไม่ครอปใน lightbox */
.pgal__link:hover img { transform: scale(1.04); }
.pgal__zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(6, 20, 59, .72); color: var(--white);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.pgal__zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pgal__link:hover .pgal__zoom, .pgal__link:focus-visible .pgal__zoom { opacity: 1; transform: none; }
@media (hover: none) { .pgal__zoom { opacity: 1; transform: none; } }
.pgal__item figcaption { margin-top: 9px; font-size: 14px; line-height: 1.55; color: #3a4660; }

.hotels { padding: 10px 0 84px; }
.hotels__head { text-align: center; }
.hotels .section-title { font-size: 36.5px; }
.hotels .section-sub { margin-top: 4px; font-size: 17px; line-height: 27px; }
.hotels .section-sub strong { color: var(--navy-950); }
.hotels__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px; margin: 38px 0 0; padding: 0; list-style: none; }
.hotel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px 14px; border-radius: 14px; background: var(--white);
  box-shadow: 0 0 0 1px #e6eef8, 0 6px 18px rgba(10, 30, 70, .05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hotel:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #d6e3f2, 0 14px 30px rgba(10, 30, 70, .12); }
.hotel__logo { display: grid; place-items: center; width: 100%; height: 96px; }
.hotel__logo picture { display: contents; }
.hotel__logo img { width: auto; height: auto; max-width: 100%; max-height: 96px; border-radius: 4px; }
.hotel__name { font-size: 13.5px; line-height: 1.4; text-align: center; color: #3a4660; }

/* --- Lightbox (ดูภาพใหญ่) --- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 84px 40px;
  background: rgba(4, 12, 34, .92);
  opacity: 0; transition: opacity .3s var(--ease);
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; margin: 0; }
.lightbox__img { -webkit-user-drag: none; user-select: none; display: block; max-width: min(1200px, 100%); max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); background: #1b2440; }
.lightbox__cap { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .9); text-align: center; }
.lightbox__count { margin-left: 8px; color: rgba(255, 255, 255, .6); }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--white);
  transition: background .2s, transform .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.lightbox__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: 14px; right: 16px; width: 46px; height: 46px; }
.lightbox__prev { left: 18px; top: 50%; margin-top: -26px; }
.lightbox__next { right: 18px; top: 50%; margin-top: -26px; }
.lightbox__prev:hover { transform: translateX(-3px); }
.lightbox__next:hover { transform: translateX(3px); }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next, .lightbox.is-single .lightbox__count { display: none; }

@media (max-width: 860px) {
  .pgal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .pgal .section-title, .hotels .section-title { font-size: 30px; }
  .hotels { padding: 10px 0 64px; }
  .pgal { padding: 56px 0 76px; }
  .hotels__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .hotel__logo { height: 76px; }
  .hotel__logo img { max-height: 76px; }
  .lightbox { padding: 60px 12px 30px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; margin-top: 0; width: 46px; height: 46px; }
  .lightbox__img { max-height: calc(100vh - 190px); }
}
@media (min-width: 861px) and (max-width: 1240px) {
  .pgal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hotels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hotel { padding: 10px 6px 9px; gap: 6px; border-radius: 10px; }
  .hotel__logo { height: 54px; }
  .hotel__logo img { max-height: 54px; }
  .hotel__name { font-size: 11.5px; }
}
@media (max-width: 400px) {
  .pgal__item figcaption { font-size: 13px; }
}

/* =========================================================
   หน้า Heat Pump System — ข้อมูลจริงจากเว็บเดิม (17 ต.ค. 2569): จุดเด่น+ไอคอน · หลักการทำงาน · ชิ้นส่วน · สเปก · All In One · แบบติดตั้ง
   ========================================================= */
/* จุดเด่น 6 ข้อ: ไอคอนในกล่องขาว + อังกฤษ/ไทย · ภาพเครื่องจริงด้านขวา */
.hp-points--icons .hp-points__inner { padding-top: 120px; padding-left: 60px; }
.hp-points__media--units { display: block; top: 150px; right: max(24px, calc((100% - 1276px) / 2 - 10px)); width: 560px; }
.hp-feats { display: grid; gap: 14px; max-width: 610px; margin: 24px 0 0; padding: 0; list-style: none; }
.hp-feat { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.hp-feat__icon {
  display: grid; place-items: center; width: 64px; height: 64px; padding: 8px;
  border-radius: 14px; background: var(--white); box-shadow: 0 6px 16px rgba(10, 40, 90, .08);
}
.hp-feat__icon img { display: block; max-width: 48px; max-height: 48px; width: auto; height: auto; }
.hp-feat__text strong { display: block; font-family: "Noto Sans", var(--font-th); font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--navy-950); }
.hp-feat__text span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: #3a4660; }

/* หัวข้อส่วน (ใช้ร่วม) */
.hp-head .section-title { font-size: 36.5px; }
.hp-head .section-sub { margin-top: 4px; max-width: 820px; font-size: 17px; line-height: 27px; }
.hp-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.hp-head--sub { margin-top: 64px; }
.hp-head__title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.4; color: var(--navy-950); }

/* หลักการทำงาน */
.hp-how { padding: 90px 0 90px; }
.hp-how__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 32px; }
.hp-how__diagram { margin: 0; padding: 22px 22px 14px; border-radius: 18px; background: linear-gradient(180deg, #f3f8fd, #fff); box-shadow: 0 0 0 1px #e3ecf6; }
.hp-diagram { display: block; width: 100%; height: auto; }
.hp-diagram path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hp-diagram__hot { stroke: #e2452f; }
.hp-diagram__cold { stroke: #2a7fd0; }
.hp-diagram__cool { stroke: #8cc4ef; }
.hp-diagram__coil { stroke: #fff !important; stroke-width: 3 !important; opacity: .85; }
.hp-diagram__water-hot { stroke: #f08a3c; stroke-width: 8 !important; }
.hp-diagram__water-cold { stroke: #7cc0ec; stroke-width: 8 !important; }
.hp-diagram__air-cold { stroke: #2a7fd0; stroke-width: 5 !important; }
.hp-diagram__air-hot { stroke: #f08a3c; stroke-width: 5 !important; }
.hp-diagram__evap rect { fill: #cfe6f8; stroke: #2a7fd0; stroke-width: 2; }
.hp-diagram__t { font-family: var(--font-th); font-size: 15px; fill: #1b2238; }
.hp-diagram__t--mid { text-anchor: middle; }
.hp-diagram__t--end { text-anchor: end; }
.hp-diagram__t--b { font-weight: 600; fill: var(--navy-950); }
.hp-diagram__n circle { fill: var(--blue-700); }
.hp-diagram__n text { font-family: "Noto Sans", sans-serif; font-size: 14px; font-weight: 600; fill: #fff; text-anchor: middle; }
.hp-how__steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 18px; }
.hp-how__steps li { position: relative; counter-increment: st; padding-left: 50px; font-size: 16.5px; line-height: 1.7; color: #1b2238; }
.hp-how__steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-700); color: var(--white); font-family: "Noto Sans", sans-serif; font-size: 15px; font-weight: 600;
}

/* ชิ้นส่วนหลัก */
.hp-parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.hp-part { padding: 18px 16px 18px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e6eef8, 0 8px 22px rgba(10, 30, 70, .05); text-align: center; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.hp-part:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #d6e3f2, 0 14px 30px rgba(10, 30, 70, .12); }
.hp-part__img { display: grid; place-items: center; height: 130px; margin-bottom: 12px; }
.hp-part__img img { max-width: 100%; max-height: 130px; width: auto; height: auto; border-radius: 10px; }
.hp-part__title { margin: 0; font-family: "Noto Sans", var(--font-th); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--navy-950); }
.hp-part__sub { margin: 2px 0 0; font-family: "Noto Sans", var(--font-th); font-size: 13px; color: var(--blue-700); }
.hp-part__text { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #3a4660; }

/* ข้อมูลจำเพาะ */
.hp-spec { padding: 80px 0 90px; background: linear-gradient(180deg, #f3f8fd 0%, #f7fbff 70%, #fff 100%); }
.spec-scroll { margin-top: 26px; overflow-x: auto; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px #dfe9f5, 0 10px 26px rgba(10, 30, 70, .06); }
.spec-scroll:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }
.spec-wide { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.45; color: #1b2238; }
.spec-wide th, .spec-wide td { padding: 9px 10px; border-bottom: 1px solid #e8eff7; text-align: center; vertical-align: middle; }
.spec-wide thead th { position: sticky; top: 0; background: var(--navy-950); color: var(--white); font-family: "Noto Sans", var(--font-th); font-weight: 600; white-space: nowrap; }
.spec-wide tbody th { text-align: left; font-weight: 500; color: var(--navy-950); }
.spec-wide thead th:first-child, .spec-wide tbody tr:not(.spec-grp) th { position: sticky; left: 0; z-index: 1; min-width: 200px; background: #f6f9fd; box-shadow: 1px 0 0 #e3ecf6; }
.spec-wide thead th:first-child { z-index: 2; background: var(--navy-950); text-align: left; }
.spec-wide .spec-unit { color: #6b7a90; white-space: nowrap; }
.spec-wide thead .spec-unit { color: rgba(255, 255, 255, .7); }
.spec-wide td[colspan] { color: #2b3a55; }
.spec-wide tbody tr:not(.spec-grp):hover td { background: #f3f8fd; }
.spec-grp th { padding: 10px 14px; background: #e6f0fa; color: var(--blue-700); font-family: "Noto Sans", var(--font-th); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-align: left; }
.spec-foot { margin: 14px 0 0; font-size: 14px; color: #6b7a90; }
.spec-foot a { color: var(--blue-700); }

/* All In One: โครงสร้าง + ตารางสเปก */
.hp-aio { padding: 40px 0 90px; }
.hp-aio__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hp-aio__visual { position: sticky; top: 110px; padding: 30px 24px 22px; border-radius: 18px; background: linear-gradient(180deg, #eef5fd, #fff); text-align: center; }
.hp-aio__visual img { width: 100%; height: auto; }
.hp-aio__cap { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #3a4660; }
.hp-aio__spec .section-title { font-size: 30px; }
.spec-list { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; color: #1b2238; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px #dfe9f5; }
.spec-list th, .spec-list td { padding: 9px 16px; border-bottom: 1px solid #e8eff7; text-align: left; vertical-align: top; }
.spec-list thead th { background: var(--navy-950); color: var(--white); font-family: "Noto Sans", var(--font-th); font-weight: 600; }
.spec-list tbody th { width: 46%; background: #f6f9fd; font-family: "Noto Sans", var(--font-th); font-weight: 500; color: var(--navy-950); }
.spec-list tbody tr:hover td { background: #f3f8fd; }

/* แบบการติดตั้ง */
.hp-install { padding: 76px 0 96px; background: linear-gradient(180deg, #f3f8fd 0%, #f7fbff 70%, #fff 100%); }
.hp-install__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 30px; }
.hp-install__item { margin: 0; }
.hp-install__link { aspect-ratio: auto; background: var(--white); }
.hp-install__link img { height: auto; max-height: 560px; object-fit: contain; }
.hp-install__item figcaption { margin-top: 10px; font-size: 15px; color: #3a4660; }

@media (min-width: 1241px) and (max-width: 1529px) {
  .hp-points__media--units { width: 36vw; }
}
@media (max-width: 1240px) {
  .hp-points--icons .hp-points__inner { padding-left: 0; padding-top: 0; }
  .hp-points__media--units { top: auto; right: auto; width: min(520px, 86%); margin: 0 auto 24px; }
  .hp-how__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hp-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-aio__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hp-aio__visual { position: static; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .hp-head .section-title { font-size: 28px; }
  .hp-how, .hp-spec, .hp-install { padding: 56px 0 64px; }
  .hp-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hp-part__img { height: 100px; }
  .hp-part__img img { max-height: 100px; }
  .hp-install__grid { grid-template-columns: minmax(0, 1fr); }
  .spec-wide thead th:first-child, .spec-wide tbody tr:not(.spec-grp) th { min-width: 150px; }
  .spec-list th, .spec-list td { padding: 8px 10px; font-size: 13.5px; }
  .hp-feat__text strong { font-size: 16px; }
}

/* =========================================================
   หน้า Heat Recovery — ข้อมูลจริงจากเว็บเดิม (17 ต.ค. 2569) · ใช้คลาส hp-* / spec-* ร่วมกับหน้า heat-pump
   ========================================================= */
.hr-stats { position: relative; z-index: 2; padding: 10px 0 60px; }
.hr-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hr-stat {
  display: flex; flex-direction: column; gap: 6px; padding: 24px 22px;
  border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e3ecf6, 0 10px 26px rgba(10, 30, 70, .07);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hr-stat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #d6e3f2, 0 16px 34px rgba(10, 30, 70, .13); }
.hr-stat__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 14px; background: #eaf3fc; color: var(--blue-700); }
.hr-stat__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hr-stat strong { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--navy-950); }
.hr-stat > span:last-child { font-size: 14.5px; line-height: 1.6; color: #3a4660; }
.hr-uses { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 26px; }
.hr-uses__label { font-size: 15px; font-weight: 600; color: var(--navy-950); }
.hr-uses .spec-chips { margin: 0; padding: 0; list-style: none; }
.hr-uses .spec-chips li { background: #eef5fd; font-family: var(--font-th); font-size: 14px; }

.hr-parts .hp-points__inner { padding-bottom: 10px; }
.hr-parts__list { max-width: 640px; }
.hr-parts__list li { font-size: 16.5px; }
.hr-parts__media { top: 130px; width: 470px; margin: 0; }
.hr-parts__media figcaption, .hr-system figcaption { margin-top: 8px; font-size: 13.5px; color: #3a5877; text-align: center; }
.hr-zoom { aspect-ratio: auto; background: var(--white); }
.hr-zoom img { height: auto; }

.hr-system { padding: 14px; }
.hr-system .hr-zoom { border-radius: 12px; }
.hr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.hr-fact { padding: 18px 20px; border-radius: 14px; background: linear-gradient(160deg, #0a3d82 0%, #06143b 100%); color: var(--white); }
.hr-fact strong { display: block; font-family: "Noto Sans", var(--font-th); font-size: 26px; font-weight: 600; line-height: 1.2; }
.hr-fact span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .85); }

.spec-wide--3 { min-width: 640px; font-size: 14.5px; }
.spec-wide--3 tbody th { width: 34%; }
.hr-quality { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 40px; padding: 18px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px #e3ecf6; }
.hr-quality picture { display: block; }
.hr-quality__img { width: 100%; height: auto; border-radius: 10px; }
.hr-quality__certs { text-align: center; }
.hr-quality__certs span { display: block; margin-bottom: 12px; font-size: 14px; color: #3a5877; }
.hr-quality__certs img { width: 100%; max-width: 362px; height: auto; }

@media (min-width: 1241px) and (max-width: 1529px) {
  .hr-parts__media { width: 32vw; }
}
@media (max-width: 1240px) {
  .hr-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-parts__media { top: auto; right: auto; width: min(470px, 86%); margin: 0 auto 24px; }
  .hr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-quality { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hr-stats__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hr-stat { padding: 18px; }
  .hr-facts { grid-template-columns: minmax(0, 1fr); }
  .hr-fact strong { font-size: 22px; }
}

/* =========================================================
   หน้า Storage Electric — ข้อมูลจริงจากเว็บเดิม (17 ต.ค. 2569) · ใช้ hp-* / hr-* / spec-* ร่วมกัน
   ========================================================= */
.se-lineup { width: 500px; top: 120px; }
.se-tech__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.se-tech__card { padding: 18px 18px 24px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px #e3ecf6, 0 10px 26px rgba(10, 30, 70, .06); }
.se-tech__card .hr-zoom { border-radius: 12px; }
.se-tech__card .hp-head__title { margin-top: 18px; font-size: 22px; }
.se-tech__card p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.7; color: #3a4660; }
.se-tech__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.se-tech__tags li { padding: 5px 13px; border-radius: 999px; background: #eaf3fc; font-size: 13.5px; color: var(--blue-700); }

.se-multi { padding: 30px 0 90px; }
.se-multi__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.se-multi__visual { margin: 0; padding: 30px; border-radius: 20px; background: linear-gradient(180deg, #eef5fd, #fff); text-align: center; }
.se-multi__visual img { width: 100%; max-width: 340px; height: auto; }
.se-multi__uses { margin-top: 26px; padding: 0; list-style: none; }
.se-multi__uses img { aspect-ratio: 4 / 3; }
.se-multi__uses small { display: block; margin-top: 2px; font-family: var(--font-th); font-size: 12.5px; font-weight: 400; letter-spacing: 0; opacity: .9; }

.se-spec { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 56px; align-items: center; }
.se-spec__visual { margin: 0; padding: 30px 20px 20px; border-radius: 20px; background: linear-gradient(180deg, #fff, #eef5fd); text-align: center; }
.se-spec__visual img { width: auto; max-width: 100%; max-height: 460px; height: auto; }
.se-spec__visual figcaption { margin-top: 12px; font-family: "Noto Sans", var(--font-th); font-weight: 600; color: var(--navy-950); }

@media (min-width: 1241px) and (max-width: 1529px) {
  .se-lineup { width: 34vw; }
}
@media (max-width: 1240px) {
  .se-lineup { top: auto; width: min(480px, 86%); }
  .se-multi__grid, .se-spec { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .se-multi__visual, .se-spec__visual { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .se-tech__grid { grid-template-columns: minmax(0, 1fr); }
  .se-multi { padding-bottom: 64px; }
}

/* =========================================================
   หน้า Pool Heat Pump — ข้อมูลจริงจากเว็บเดิม (17 ต.ค. 2569) · การ์ดสินค้าพื้นน้ำเงินเข้มแบบเว็บเดิม
   ========================================================= */
.pool-models { padding: 30px 0 90px; }
.pool-models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.pool-model {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(165deg, #0d2a66 0%, #06143b 70%);
  box-shadow: 0 18px 44px rgba(6, 20, 59, .22); color: var(--white);
}
.pool-model__media {
  display: grid; place-items: center; height: 340px; padding: 30px 30px 10px;
  background: radial-gradient(ellipse at 50% 60%, #e9f5ff 0%, #b9dcf6 55%, rgba(185, 220, 246, 0) 72%), linear-gradient(180deg, #2a5ca5 0%, #0d2a66 100%);
}
.pool-model__media img { width: auto; height: auto; max-width: 100%; max-height: 300px; filter: drop-shadow(0 16px 20px rgba(4, 16, 46, .35)); transition: transform .6s var(--ease); }
.pool-model:hover .pool-model__media img { transform: translateY(-6px); }
.pool-model__body { padding: 28px 34px 34px; }
.pool-model__logo { width: 140px; height: auto; }
.pool-model__title { margin: 10px 0 0; font-family: "Noto Sans", var(--font-th); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: .02em; }
.pool-model__title span { display: block; font-size: 22px; font-weight: 600; letter-spacing: .08em; color: #9cc6f3; }
.pool-model__tag { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.pool-model__specs { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.pool-model__specs li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.pool-model__specs svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(156, 198, 243, .18); fill: none; stroke: #9cc6f3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pool-model__specs strong { display: block; font-family: "Noto Sans", var(--font-th); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: #9cc6f3; }
.pool-model__specs em { display: block; font-style: normal; font-family: "Noto Sans", var(--font-th); font-size: 20px; font-weight: 600; line-height: 1.35; }
.pool-model__specs small { display: block; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .75); }

.pool-compare { min-width: 560px; }
.pool-compare tbody td { font-size: 15px; }
.pool-prep { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }

@media (max-width: 1040px) {
  .pool-models__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .pool-prep { grid-template-columns: minmax(0, 1fr); }
  .pool-model__media { height: 260px; }
  .pool-model__media img { max-height: 220px; }
  .pool-model__body { padding: 22px 22px 26px; }
  .pool-model__title { font-size: 34px; }
  .pool-model__title span { font-size: 18px; }
}

/* =========================================================
   หน้า ติดต่อเรา — ข้อมูลจากเว็บเดิม (17 ต.ค. 2569): Facebook แทนเวลาทำการ · Company information แทนภาพสำนักงาน AI
   ========================================================= */
.cinfo__en { margin: 2px 0 0; font-family: "Noto Sans", var(--font-th); font-size: 14px; line-height: 22px; color: #6b7a90; }
.cinfo__icon--fb svg { fill: currentColor; stroke: none; width: 28px; height: 28px; }
.cmap__company { padding-top: 44px; }
.ccompany {
  margin-top: 18px; padding: 26px 26px 24px; border-radius: 16px;
  background: linear-gradient(180deg, #f3f8fd, #fff); box-shadow: 0 0 0 1px #e3ecf6, 0 10px 26px rgba(10, 30, 70, .06);
}
.ccompany__logo { display: block; width: 190px; height: auto; }
.ccompany__name { margin: 14px 0 0; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--navy-950); }
.ccompany__name span { display: block; font-family: "Noto Sans", var(--font-th); font-size: 14.5px; font-weight: 600; letter-spacing: .04em; color: var(--blue-700); }
.ccompany__brand { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: #3a4660; }
.ccompany__list { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #e3ecf6; }
.ccompany__list div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
.ccompany__list dt { font-family: "Noto Sans", var(--font-th); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #6b8bb0; text-transform: uppercase; padding-top: 2px; }
.ccompany__list dd { margin: 0; font-size: 15px; line-height: 1.6; color: #1b2238; }
.ccompany__list a:hover { color: var(--blue-700); text-decoration: underline; }
.ccompany__social { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3ecf6; }
.ccompany__qr { width: 128px; height: 128px; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 1px #e3ecf6; padding: 6px; }
.ccompany__social p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: #3a4660; }
.ccompany__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0 8px 8px 0; padding: 0 16px;
  border-radius: 999px; color: var(--white); font-size: 14.5px; font-weight: 500; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ccompany__btn svg { width: 18px; height: 18px; fill: currentColor; }
.ccompany__btn--line { background: #06c755; }
.ccompany__btn--fb { background: #1877f2; }
.ccompany__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10, 30, 70, .2); }
.cta__text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
@media (max-width: 1240px) {
  .cmap__company { padding-top: 0; }
}
@media (max-width: 480px) {
  .ccompany { padding: 20px 18px; }
  .ccompany__social { grid-template-columns: 1fr; justify-items: start; }
  .ccompany__list div { grid-template-columns: 1fr; gap: 0; }
}