/* ==========================================================================
   theme-overrides.css — ทับ Evolta theme ทั้งหมดที่นี่ ห้ามแก้ style.css/bootstrap.min.css
   เพื่อให้อัปเดต theme ทีหลังได้โดยไม่ merge conflict
   โหลดหลัง style.css เสมอ (ดู index.html)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) ล้างร่องรอยจากการ mirror ธีม (HTTrack)
   bootstrap.min.css ที่มากับธีมมีค่า --bs-breadcrumb-divider ถูกแทนที่ด้วย URL
   ของเว็บผู้ขายธีม ("https://html.kodesolution.com/") ถ้ามีใครใช้ .breadcrumb
   ของ Bootstrap เมื่อไหร่ จะเห็น URL นั้นโผล่เป็นตัวคั่นกลางหน้าเว็บ
   ตั้งกลับเป็นค่ามาตรฐานของ Bootstrap แทนการแก้ไฟล์ vendor
   (ไฟล์รูปที่ HTTrack เซฟหน้า 404 มาเป็น .html ถูกลบออกจาก images/ แล้ว 71 ไฟล์
    ทั้งหมดเป็นคลาสตกแต่งของธีมเดิมที่เว็บนี้ไม่ได้ใช้)
   -------------------------------------------------------------------------- */
:root {
  --bs-breadcrumb-divider: "/";
}

/* --------------------------------------------------------------------------
   0.1) โลโก้บนหน้า loading
   ธีมฝังโลโก้ Evolta ไว้ใน CSS ไม่ใช่ใน markup:
     .preloader:after { background-image: url(../images/logo.png) }
   จึงเปลี่ยนที่ markup ไม่ได้ ต้องทับที่ CSS
   ใช้ชุดสีเข้มเพราะพื้นหลัง preloader เป็นสีขาว
   -------------------------------------------------------------------------- */
.preloader:after,
.dark-layout .preloader:after {
  background-image: url("/logo-dark.png");
  background-size: contain;
  width: 220px;
  height: 45px;
  left: 50%;
  top: 50%;
  margin-left: -110px;
  margin-top: -22px;
}

/* --------------------------------------------------------------------------
   1) ฟอนต์ไทย — Noto Sans Thai
   ประกาศฟอนต์ละตินไว้ "ก่อน" ฟอนต์ไทยเสมอ เบราว์เซอร์จะเลือกฟอนต์ต่อ glyph:
   อักษรอังกฤษ/ตัวเลข → Wix Madefor / Orbitron (คงหน้าตา theme 100%)
   อักษรไทย → Noto Sans Thai (Wix Madefor & Orbitron ไม่มี glyph ไทย)
   -------------------------------------------------------------------------- */
:root {
  --body-font-family: "Wix Madefor Display", "Noto Sans Thai", sans-serif;
  --heading-font-family: "Wix Madefor Display", "Noto Sans Thai", sans-serif;
  --style-font-family: "Orbitron", "Noto Sans Thai", sans-serif;
}

/* --------------------------------------------------------------------------
   2) ปรับ metric ให้ภาษาไทยอ่านออก (มีผลเฉพาะตอน lang=th)
   ปัญหาที่ต้องแก้:
   - theme ตั้ง letter-spacing: -0.03em ที่ทุก heading → ไทยสระ/วรรณยุกต์ชนกัน
   - line-height ของ h1/h2 = 1.2–1.26 → ไทยมีสระบน 2 ชั้น (เ-ี่) กับสระล่าง (ุ ู) ตัดขอบ
   -------------------------------------------------------------------------- */
html[lang="th"] {
  --line-height-heading-h1: 1.45em;
  --line-height-heading-h2: 1.4em;
  --line-height-heading: 1.6em;
  --line-height-heading-small: 1.6em;

  /* ธีมตั้งขนาดหัวข้อไว้ใหญ่ (h1 75px / h2 สูงสุด 50px) ซึ่งพอดีกับคำอังกฤษสั้น ๆ
     แต่ตัวอักษรไทยกว้างกว่าอังกฤษที่ขนาดเดียวกัน หัวข้อเลยดูใหญ่เกินและกินพื้นที่
     ย่อลงเฉพาะภาษาไทย — ฝั่งอังกฤษไม่แตะ ยังเป็นขนาดตามธีมเป๊ะ */
  --h1-font-size: clamp(30px, 4.4vw, 56px);
  --h3-font-size: clamp(20px, 2vw, 26px);
}

/* ⚠️ h2 ต้องทับที่ selector ไม่ใช่ที่ตัวแปร
   style.css บรรทัด 239–244 ประกาศ font-size ซ้ำสองครั้งในกฎเดียวกัน:
     h2 { font-size: var(--h2-font-size); ... font-size: clamp(30px, 4vw, 50px); }
   บรรทัดหลังชนะเสมอ ตัวแปร --h2-font-size จึงไม่มีผลกับ h2 เลย */
html[lang="th"] h2,
html[lang="th"] .h2 {
  font-size: clamp(24px, 2.9vw, 38px);
}

html[lang="th"] h1,
html[lang="th"] .h1,
html[lang="th"] h2,
html[lang="th"] .h2,
html[lang="th"] h3,
html[lang="th"] .h3,
html[lang="th"] h4,
html[lang="th"] .h4,
html[lang="th"] h5,
html[lang="th"] .h5,
html[lang="th"] h6,
html[lang="th"] .h6 {
  letter-spacing: normal;
}

/* subtitle / ปุ่ม / label ที่ theme ใส่ letter-spacing บวกเยอะ (2px) — ไทยจะดูขาดเป็นห้วง ๆ */
html[lang="th"] .sec-title .sub-title,
html[lang="th"] .btn-style-one,
html[lang="th"] .btn-style-two,
html[lang="th"] .theme-btn {
  letter-spacing: 0.02em;
}

/* ตัวเลข/หน่วยที่ใช้ Orbitron (counter, ราคา) ให้คงเป็นละตินเสมอ — ไทยไม่ควรตกมาที่นี่ */
.counter-block .count-text,
.pricing-block .price {
  font-family: var(--style-font-family);
  font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   3) แบรนด์ MarsXCharger — map ทับสีของ theme
   ค่าเดิมของ Evolta อยู่ที่ style.css (:root) — ตรงนี้ override เฉพาะที่ต้องเปลี่ยน
   TODO: เคาะ mapping สีให้ครบหลังดูหน้า Home จริง
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4) ขนาดโลโก้
   ไฟล์จริงอยู่ที่ src/assets/Logo MarsxCharge/ (ชุด Black / White พื้นโปร่งใส)
   ที่ public/ ครอปขอบโปร่งออกแล้ว สัดส่วน 4.97:1 ใกล้เคียงกับที่ธีมออกแบบมา (~4.1:1)
   ล็อกเฉพาะความสูง ปล่อยความกว้างอัตโนมัติ เพื่อไม่ให้สัดส่วนเพี้ยน
   -------------------------------------------------------------------------- */
.main-header .logo img,
.main-header .logo-box img,
.sticky-header .logo img,
.mobile-menu .nav-logo img,
.footer-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.footer-logo img {
  max-height: 46px;
}

/* --------------------------------------------------------------------------
   5) ตัวสลับภาษา TH/EN — ไม่ได้มากับ theme (Evolta เป็นภาษาเดียว) จึงต้องสร้างเอง
   ยืมโทนสีจากตัวแปรของ theme เพื่อให้กลืนกับ header ทั้ง state ปกติและตอน fixed-header
   -------------------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-color, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  margin-inline-end: 20px;
}

.lang-switch__btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--body-font-family);
  font-size: 14px;
  line-height: 1;
  padding: 5px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 300ms ease;
  white-space: nowrap;
}

.lang-switch__btn:hover {
  color: var(--theme-color1);
}

.lang-switch__btn.active {
  background-color: var(--theme-color1);
  color: var(--white-color, #fff);
}

.mobile-menu__lang {
  padding: 20px 25px 0;
}

/* mobile menu: theme ใช้ slideToggle() ของ jQuery — ที่นี่คุมด้วย inline display จาก React
   ใส่ transition ให้ปุ่มลูกศรหมุนเหมือนเดิม */
.mobile-menu .navigation li .dropdown-btn {
  transition: transform 300ms ease;
}

.mobile-menu .navigation li .dropdown-btn.active {
  transform: rotate(180deg);
}

/* หัวข้อในแบนเนอร์หน้าใน — theme ตั้ง h1 ไว้ 75px ซึ่งกว้างพอสำหรับคำอังกฤษสั้น ๆ
   หัวข้อไทยยาวกว่ามากและจะล้นขอบ container จึงให้ย่อขนาดตามความกว้างจอ */
.page-title .title-outer .title {
  font-size: clamp(32px, 5vw, var(--h1-font-size));
  overflow-wrap: break-word;
}

/* ราคาที่เป็นข้อความแทนตัวเลข ("ติดต่อเรา" / "Contact us") — theme ออกแบบช่องนี้
   มาสำหรับ "$19" สั้น ๆ ข้อความไทยยาวกว่าจึงต้องลดขนาดลงไม่ให้ล้นการ์ด */
.pricing-block .price .price-amount--text {
  font-size: 0.55em;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   6) หน้าจุดชาร์จ (Service Station) — ไม่มีใน theme ต้องสร้างเอง
   ใช้ตัวแปรสี/รัศมี/ฟอนต์ของ theme ทั้งหมด เพื่อให้หน้านี้ดูเป็นส่วนหนึ่งของดีไซน์เดิม
   -------------------------------------------------------------------------- */
/* ⚠️ ภาพ mockup มือถือใน section ดาวน์โหลดแอป
   ธีมวางไว้แบบ absolute โดยไม่จำกัดความกว้าง เพราะไฟล์เดิม (icons/phone.png) เป็นมือถือ
   เครื่องเดียวทรงสูง แต่ไฟล์ที่เราใช้แทน (resource/phone2-1.png) เป็นภาพ 2 เครื่องแนวนอน
   กว้างกว่ามาก จนล้นมาทับปุ่ม App Store / Google Play — ทดสอบแล้วว่า elementFromPoint
   ที่กลางปุ่ม Google Play คืนค่าเป็น <img> แปลว่า "ปุ่มโหลดแอป Android กดไม่ได้"
   แก้ 2 ชั้น: จำกัดความกว้าง + ปิด pointer-events เพราะเป็นภาพประกอบล้วน */
.app-banner-section .mobile-app {
  pointer-events: none;
  max-width: 46%;
}

.app-banner-section .mobile-app img {
  width: 100%;
  height: auto;
}

/* ปุ่มต้องอยู่เหนือภาพประกอบเสมอ (ธีมให้ .mobile-app z-index: 9) */
.app-banner-section .button-items {
  position: relative;
  z-index: 10;
}

/* โลโก้ + ชื่อแอป MarsGo เหนือหัวข้อใน section ดาวน์โหลดแอป (ธีมไม่มีส่วนนี้) */
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.app-brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--theme-color-white);
  object-fit: contain;
}

.app-brand span {
  font-family: var(--style-font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--theme-color-white);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   เอกสารทางกฎหมาย (/terms, /privacy) — ธีมไม่มีเลย์เอาต์แบบเอกสารยาว
   จำกัดความกว้างบรรทัดไว้เพื่อให้อ่านได้จริง (ข้อความยาวเต็มความกว้างจอ
   ตากลับบรรทัดผิดตลอด) ระยะทั้งหมดอยู่บนสเกล 5px ของธีม
   -------------------------------------------------------------------------- */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
}

.legal-meta {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-color);
}

.legal-intro p {
  font-size: 17px;
  line-height: 1.9;
}

.legal-toc {
  margin: 30px 0 40px;
  padding: 25px 30px;
  border-radius: 15px;
  background-color: var(--theme-color-lighter2);
}

.legal-toc__title {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--headings-color);
}

.legal-toc ol {
  margin: 0;
  padding-inline-start: 20px;
  columns: 2;
  column-gap: 30px;
}

@media (max-width: 575.98px) {
  .legal-toc ol {
    columns: 1;
  }
}

.legal-toc li {
  margin-bottom: 5px;
  break-inside: avoid;
}

.legal-toc a {
  color: var(--text-color);
  font-size: 15px;
}

.legal-toc a:hover {
  color: var(--theme-color1);
}

.legal-block {
  margin-top: 40px;
  /* เผื่อที่ให้ sticky header ตอนกระโดดจากสารบัญ ไม่งั้นหัวข้อจะโดนบัง */
  scroll-margin-top: 110px;
}

.legal-block h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 15px;
}

.legal-subblock {
  margin-top: 25px;
}

.legal-subblock h3 {
  font-size: clamp(17px, 1.8vw, 20px);
  margin-bottom: 10px;
}

.legal-block p,
.legal-subblock p {
  margin-bottom: 15px;
  line-height: 1.9;
}

.legal-list {
  margin: 0 0 15px;
  padding-inline-start: 20px;
  list-style: disc;
}

.legal-list li {
  margin-bottom: 10px;
  line-height: 1.9;
}

.legal-contact {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}

.legal-contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
  line-height: 1.9;
}

.legal-contact li span {
  min-width: 150px;
  color: var(--text-color);
}

.legal-crosslink {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid rgba(var(--theme-color2-rgb), 0.1);
}

.legal-crosslink a {
  font-weight: 600;
  color: var(--theme-color1);
}

/* คำอธิบายใต้หัวข้อ section — ธีมมีแต่ h2 กับ sub-title ไม่มีย่อหน้านำ */
.sec-lead {
  max-width: 760px;
  margin: 15px auto 0;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-color);
}

.sec-title.text-center .sec-lead,
.text-center .sec-lead {
  text-align: center;
}

.station-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 40px;
}

.station-stats__item {
  background-color: var(--theme-color-lighter2);
  border-radius: 16px;
  padding: 25px 20px;
  text-align: center;
}

.station-stats__value {
  font-family: var(--style-font-family);
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--theme-color1);
}

.station-stats__label {
  color: var(--text-color);
  font-size: 15px;
  margin-top: 5px;
}

.station-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 15px 25px;
  padding: 25px;
  background-color: var(--theme-color-lighter);
  border-radius: 16px;
  margin-bottom: 25px;
}

.station-filters__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 240px;
  flex: 1 1 240px;
}

.station-filters__field > span {
  font-size: 14px;
  color: var(--text-color);
}

.station-filters__field select {
  appearance: none;
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.14);
  border-radius: 10px;
  background-color: var(--theme-color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231C2029' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  font-family: var(--body-font-family);
  font-size: 15px;
  color: var(--headings-color);
  cursor: pointer;
}

.station-filters__field select:focus-visible,
.station-filters__reset:focus-visible,
.station-filters__check input:focus-visible {
  outline: 2px solid var(--theme-color1);
  outline-offset: 2px;
}

.station-filters__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  color: var(--headings-color);
  padding-bottom: 10px;
}

.station-filters__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--theme-color1);
  cursor: pointer;
}

.station-filters__reset {
  border: 0;
  background: transparent;
  color: var(--theme-color1);
  font-family: var(--body-font-family);
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
  padding-bottom: 10px;
}

.station-count {
  color: var(--text-color);
  margin-bottom: 20px;
}

.station-message {
  padding: 40px 0;
  text-align: center;
  color: var(--text-color);
}

.station-message--error {
  color: #b3261e;
}

.station-card {
  height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
  padding: 25px;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
  border-radius: 18px;
  background-color: var(--theme-color-white);
  transition: all 300ms ease;
}

.station-card:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.5);
  box-shadow: 0 18px 40px rgba(var(--theme-color2-rgb), 0.08);
}

.station-card__name {
  font-size: 20px;
  margin: 0 0 5px;
}

.station-card__place {
  color: var(--text-color);
  font-size: 14px;
  margin: 0;
}

.station-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 15px;
  margin: 0;
  padding: 15px 0;
  border-block: 1px solid rgba(var(--theme-color2-rgb), 0.08);
}

.station-card__facts dt {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-color);
}

.station-card__facts dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--headings-color);
}

.station-card__access-title {
  font-size: 13px;
  color: var(--text-color);
  margin: 0 0 10px;
}

.station-card__access ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.station-access {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: var(--headings-color);
}

.station-access i {
  font-size: 13px;
}

.station-access--yes i {
  color: var(--theme-color1);
}

.station-access--no {
  color: var(--text-color);
}

.station-access--no i {
  color: #b3261e;
}

.station-access--unknown {
  color: var(--text-color);
}

.station-access--unknown i {
  color: var(--theme-color-silver2);
}

.station-access em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-color);
}

.station-access.is-highlight {
  font-weight: 600;
}

.station-card__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.station-card__operator {
  font-size: 13px;
  color: var(--text-color);
  margin: 0;
}

.station-card__map {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-color1);
}

/* แบ่งหน้า — ธีมไม่มีคอมโพเนนต์นี้ (มีแค่ .pagination ของ Bootstrap ที่หน้าตาไม่เข้ากัน) */
.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pagination-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination-nav__page,
.pagination-nav__arrow {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.14);
  border-radius: 12px;
  background-color: var(--theme-color-white);
  font-family: var(--style-font-family);
  font-size: 15px;
  color: var(--headings-color);
  cursor: pointer;
  transition: all 300ms ease;
}

.pagination-nav__page:hover:not(.is-current),
.pagination-nav__arrow:hover:not(:disabled) {
  border-color: var(--theme-color1);
  color: var(--theme-color1);
}

.pagination-nav__page.is-current {
  background-color: var(--theme-color1);
  border-color: var(--theme-color1);
  color: var(--theme-color1-text-color);
  cursor: default;
}

.pagination-nav__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-nav__page:focus-visible,
.pagination-nav__arrow:focus-visible {
  outline: 2px solid var(--theme-color1);
  outline-offset: 2px;
}

.pagination-nav__gap {
  min-width: 24px;
  text-align: center;
  color: var(--text-color);
  user-select: none;
}

.station-disclaimer {
  margin-top: 40px;
  padding: 20px 25px;
  background-color: var(--theme-color-lighter2);
  border-radius: 14px;
  color: var(--text-color);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   7) หน้าสเปกตู้ชาร์จ (Hardware) — ตารางสเปก ไม่มีใน theme
   -------------------------------------------------------------------------- */
.spec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  border-radius: 18px;
  background-color: var(--theme-color-lighter2);
  margin-bottom: 25px;
}

.spec-head__vendor {
  margin: 0;
  color: var(--text-color);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec-head__model {
  margin: 5px 0;
  font-family: var(--style-font-family);
  font-size: 44px;
  line-height: 1.1;
}

.spec-head__category {
  margin: 0;
  color: var(--text-color);
}

.spec-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  flex: 1 1 420px;
}

.spec-facts__item {
  background-color: var(--theme-color-white);
  border-radius: 14px;
  padding: 20px 15px;
  text-align: center;
}

.spec-facts__value {
  font-family: var(--style-font-family);
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-color1);
  line-height: 1.2;
}

.spec-facts__label {
  font-size: 13px;
  color: var(--text-color);
  margin-top: 5px;
}

.spec-note {
  display: flex;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 12px;
  background-color: var(--theme-color-lighter);
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.spec-note i {
  margin-top: 5px;
  color: var(--theme-color1);
}

.spec-group {
  margin-top: 40px;
}

.spec-group__title {
  font-size: 22px;
  margin-bottom: 15px;
}

/* ตารางสเปกยาวกว่าจอมือถือ — ให้เลื่อนในกล่องตัวเอง ไม่ให้ทั้งหน้าเลื่อนแนวนอน */
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
  border-radius: 14px;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.spec-table th,
.spec-table td {
  padding: 15px 20px;
  text-align: start;
  vertical-align: top;
  font-size: 15px;
  border-bottom: 1px solid rgba(var(--theme-color2-rgb), 0.08);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  width: 38%;
  font-weight: 400;
  color: var(--text-color);
  background-color: var(--theme-color-lighter);
}

.spec-table td {
  font-weight: 600;
  color: var(--headings-color);
}

/* --------------------------------------------------------------------------
   8) ราคา — การ์ดค่าชาร์จ + รูปแบบค่าบริการองค์กร
   (theme มีแต่การ์ดแพ็กเกจรายเดือนแบบ B2C ซึ่งใช้กับโมเดลธุรกิจจริงไม่ได้)
   -------------------------------------------------------------------------- */
.rate-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 35px;
  border-radius: 20px;
  background-color: var(--theme-color2);
  color: var(--theme-color-white);
  margin-bottom: 60px;
}

.rate-card__main {
  flex: 0 0 auto;
}

.rate-card__label {
  margin: 0 0 10px;
  font-size: 15px;
  opacity: 0.75;
}

.rate-card__value {
  margin: 0;
  font-family: var(--style-font-family);
  font-size: 54px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--theme-color1);
  white-space: nowrap;
}

.rate-card__value span {
  font-family: var(--body-font-family);
  font-size: 18px;
  font-weight: 400;
  color: var(--theme-color-white);
  margin-inline-start: 10px;
}

.rate-card__aside {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.rate-card__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.85;
}

.business-pricing__head {
  text-align: center;
  margin-bottom: 30px;
}

.business-pricing__title {
  font-size: 30px;
  margin-bottom: 10px;
}

.business-pricing__note {
  color: var(--text-color);
  margin: 0;
}

.business-pricing__item {
  height: calc(100% - 24px);
  margin-bottom: 25px;
  padding: 30px;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.1);
  border-radius: 18px;
  background-color: var(--theme-color-white);
  transition: all 300ms ease;
}

.business-pricing__item:hover {
  border-color: rgba(var(--theme-color1-rgb), 0.5);
  box-shadow: 0 18px 40px rgba(var(--theme-color2-rgb), 0.08);
}

.business-pricing__index {
  font-family: var(--style-font-family);
  font-size: 14px;
  color: var(--theme-color1);
  margin-bottom: 10px;
}

.business-pricing__item-title {
  margin-bottom: 10px;
}

.business-pricing__item p {
  margin: 0;
  font-size: 15px;
}

/* ผลลัพธ์หลังกดส่งฟอร์ม — ธีมไม่มี state นี้เลย (ฟอร์มเดิมเป็น demo ที่ไม่ส่งจริง) */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 15px 20px;
  border-radius: 12px;
  background-color: rgba(179, 38, 30, 0.08);
  color: #b3261e;
  font-size: 15px;
  line-height: 1.7;
}

.form-sent {
  padding: 20px 25px;
  border-radius: 14px;
  background-color: var(--theme-color-white);
  border: 1px solid rgba(var(--theme-color1-rgb), 0.4);
}

.form-sent__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  font-weight: 600;
  color: var(--headings-color);
}

.form-sent__title i {
  color: var(--theme-color1);
}

.form-sent__text {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color);
}

.form-sent__fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.form-sent__fallback a {
  font-weight: 600;
  color: var(--theme-color1);
  word-break: break-all;
}

.form-sent__copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(var(--theme-color2-rgb), 0.18);
  background: transparent;
  border-radius: 999px;
  padding: 10px 15px;
  font-family: var(--body-font-family);
  font-size: 14px;
  color: var(--headings-color);
  cursor: pointer;
  transition: all 300ms ease;
}

.form-sent__copy:hover {
  border-color: var(--theme-color1);
  color: var(--theme-color1);
}

/* ธีมมีไอคอนสีขาวสำหรับวงกลมเขียวแค่ call3/location2 ส่วน email.png เป็นสีเขียว
   (ทำมาสำหรับพื้นอ่อน) พอวางบนวงกลมเขียวเลยมองไม่เห็น — ฟอกให้เป็นสีขาวเฉพาะจุดนี้ */
.contact-section .map-info-items .info-items .icon img[src$="email.png"] {
  filter: brightness(0) invert(1);
}

/* ที่อยู่ใต้แผนที่ในหน้า Contact — แยกออกจากการ์ด overlay ของธีม
   เพราะ .map-info-items ทรงแคปซูลรองรับข้อความบรรทัดเดียวเท่านั้น */
.contact-address {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 25px;
  padding: 20px 25px;
  border-radius: 16px;
  background-color: var(--theme-color-lighter2);
}

.contact-address .icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--theme-color1);
}

.contact-address .icon img {
  max-width: 22px;
  height: auto;
}

.contact-address .content p {
  margin: 0 0 5px;
  font-size: 14px;
  color: var(--text-color);
}

.contact-address address {
  margin: 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  color: var(--headings-color);
}

/* บล็อกชื่อนิติบุคคลใน footer (เพิ่มเข้ามา theme ไม่มี) */
.footer-company {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.7;
}

.footer-company p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* ตัวเลขสถิติใน hero — theme มีแต่กล่องดาวรีวิว ที่นี่ใช้โชว์จำนวนสถานีจริงแทน */
.hero-ratting-items .star-box {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-stat strong {
  font-family: var(--style-font-family);
  font-size: 26px;
  color: var(--theme-color1);
}

.hero-stat span {
  font-size: 13px;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   9) แก้ผลข้างเคียงจาก client-side routing
   ScrollSmoother ตั้ง transform ที่ #smooth-content — ตอนเปลี่ยนหน้า ถ้ายังไม่ refresh
   จะเห็นเนื้อหากระโดด กัน flash ด้วยการซ่อนจนกว่า smoother จะพร้อม
   -------------------------------------------------------------------------- */
#smooth-wrapper:not([data-smoother-ready]) #smooth-content {
  visibility: visible;
}

/* ปุ่มทางเข้าระบบในเมนูมือถือ — theme ไม่มี CTA ในเมนูนี้ */
.mobile-menu__cta {
  padding: 20px 25px 0;
}

.mobile-menu__cta .btn-style-one {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Responsive — การ์ดข้อมูลติดต่อใน footer ล้นขอบจอบนมือถือ

   ธีมตั้ง grid-template-columns: repeat(n, 1fr) ซึ่งดูเหมือนถูก แต่ `1fr` ย่อมาจาก
   minmax(auto, 1fr) และขอบล่าง `auto` = ความกว้างขั้นต่ำของเนื้อหา
   อีเมล "marsxsupport@marsxthings.com" เป็นคำก้อนเดียวที่ตัดบรรทัดไม่ได้
   จึงดัน track ให้กว้าง 345px ค้างไว้ ไม่ยอมย่อตามจอ
   วัดที่จอ 360px: การ์ดกว้าง 345px ในกล่องแม่ 296px = ล้น 49px ข้อความเลยโดนตัด

   แก้ 3 ชั้น:
   1. minmax(0, 1fr) ให้ track ย่อต่ำกว่าความกว้างเนื้อหาได้
   2. min-width: 0 ที่ตัวการ์ดและกล่องเนื้อหา — flex/grid item ไม่ยอมย่อถ้าไม่สั่ง
   3. overflow-wrap: anywhere ให้อีเมลยาวตัดบรรทัดแทนที่จะดันกล่อง
   -------------------------------------------------------------------------- */
.footer-information-wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  .footer-information-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .footer-information-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-information-wrap .footer-info,
.footer-information-wrap .footer-info .content {
  min-width: 0;
}

.footer-information-wrap .footer-info .title,
.footer-information-wrap .footer-info .title a {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Responsive — ขนาดพื้นที่กดบนอุปกรณ์สัมผัส
   ลิงก์ข้อความในธีมเป็น inline ล้วน ความสูงจึงเท่ากับบรรทัดเดียว (~20px)
   ต่ำกว่าเกณฑ์ WCAG 2.5.8 Target Size (Minimum) ที่กำหนด 24×24 CSS px
   วัดที่จอ 360px: .footer-list a = 52×20 · .service-btn = 83×20 · .footer-logo = 46×20
   เพิ่มระยะแนวตั้งให้ถึงเกณฑ์ โดยไม่กระทบเลย์เอาต์ (inline-block + padding)
   -------------------------------------------------------------------------- */
.footer-list a,
.service-btn,
.legal-toc a,
.station-card__map,
.blog-block .btn-box a,
.about-info .number a,
.contact-section .info-items .h5 a,
.footer-info .title a {
  display: inline-block;
  min-height: 24px;
  padding-block: 5px;
}

/* ลิงก์ที่ห่อรูป (โลโก้) — ต้องเป็น inline-block + line-height 0
   ไม่งั้นความสูงจะยุบตามบรรทัดข้อความแทนที่จะเท่ารูป */
.footer-logo,
.main-header .logo a,
.sticky-header .logo a,
.mobile-menu .nav-logo a {
  display: inline-block;
  line-height: 0;
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   พื้นที่กดของเมนูหลัก
   ธีมใส่ padding แนวตั้งไว้ที่ <li> (32.5px ทั่วไป / 35.5px ใน header-style-one)
   แต่ <a> ข้างในสูงแค่ 19px — ตาเห็นเมนูสูง 90px แต่กดติดแค่แถบกลาง
   ผู้ใช้กดตรงที่เห็นว่าเป็นเมนูแล้วไม่มีอะไรเกิดขึ้น โดยเฉพาะบนแท็บเล็ต

   ย้าย padding จาก <li> มาไว้ที่ <a> ความสูงรวมเท่าเดิมทุกพิกเซล
   แต่พื้นที่กดขยายเต็มความสูง
   (ใช้ ::after ครอบไม่ได้ เพราะธีมตั้ง a { position: relative } ไว้แล้ว
    inset จะครอบแค่ตัว <a> เอง — และธีมมี ::after ของตัวเองใช้ทำเอฟเฟกต์อยู่) */
.main-menu .navigation > li {
  padding-block: 0;
}

.main-menu .navigation > li > a {
  padding-block: 32.5px;
}

.header-style-one .main-menu .navigation > li {
  padding-block: 0;
}

.header-style-one .main-menu .navigation > li > a {
  padding-block: 35.5px;
}

/* ==========================================================================
   13. แท็กหัวข้อ vs ขนาดตัวอักษร
   ==========================================================================
   โครงสร้างหัวข้อ (h1 → h2 → h3) เป็นเรื่อง semantic ที่ search engine และ
   screen reader ใช้ ส่วนขนาดตัวอักษรเป็นเรื่องดีไซน์ สองอย่างนี้ไม่ต้องตรงกัน
   ธีมจึงมีทั้งแท็ก hN และคลาส .hN ให้เลือกใช้แยกกันได้ เช่น <h2 class="h4">
   = "หัวข้อระดับ 2 ที่แสดงผลขนาด h4"

   ปัญหา: กฎ `html[lang="th"] h2` ในไฟล์นี้ (บรรทัด 74) มี specificity 0,1,1
   ซึ่งสูงกว่า `.h4` (0,1,0) ทำให้ <h2 class="h4"> ได้ขนาด h2 แทน
   บล็อกนี้ยกระดับให้คลาสชนะกลับ โดยประกาศเฉพาะ font-size เท่านั้น —
   line-height / font-weight ยังมาจากกฎ `h4, .h4` เดิมซึ่งชนะ `h2` อยู่แล้ว
   ค่าที่ใช้เป็นตัวแปรตัวเดียวกับที่กฎเดิมใช้ ผลลัพธ์จึงเท่ากันทุกพิกเซล

   ⚠️ ใช้ <h2 class="hN"> ได้เฉพาะกับ element ที่ .hN เป็นตัวคุมขนาดตัวเดียวเท่านั้น
   ถ้ามีคลาสอื่นกำหนด font-size ด้วย (เช่น .sidebar__title) กฎนี้จะทับคลาสนั้นไปด้วย
   กรณีแบบนั้นให้ใช้แท็กที่ตรงกับคลาส (<h3 class="h3">) แทน */
html[lang] h2.h3 {
  font-size: var(--h3-font-size);
}

html[lang] h2.h4 {
  font-size: var(--h4-font-size);
}

html[lang] h2.h5 {
  font-size: var(--h5-font-size);
}

/* คำถามใน accordion (หน้า FAQ) ถูกห่อด้วยแท็ก heading เพื่อให้เป็นหัวข้อจริง
   .acc-btn คุมฟอนต์/ขนาดของทั้งกล่องอยู่แล้ว ตัว heading จึงต้องไม่เพิ่มอะไรเลย
   display: inline ทำให้ไหลเหมือน text node เดิมเป๊ะ ๆ ไม่ดันเลย์เอาต์ */
.accordion-box .block .acc-btn .acc-btn__title {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* คำอธิบายในการ์ดบริการ (หน้า /services)
   ธีมประกาศ `.service-block-style2 .inner-block .content .text { display: none }`
   ไว้ที่ style.css บรรทัด 8911 แต่ไม่มีกฎไหนในธีมเปิดกลับมาเลย แม้แต่ตอน hover
   ผลคือข้อความถูก render ลง DOM แต่ไม่มีใครได้อ่าน — ผู้ใช้ก็ไม่เห็น ส่วน Google
   ก็ลดน้ำหนักข้อความที่ display:none ทำให้หน้านี้เหลือเนื้อหาที่มองเห็นแค่ ~144 ตัวอักษร
   เปิดให้แสดงจริง เพราะเป็นข้อความที่เขียนไว้อยู่แล้วและตรงกับที่การ์ดข่าว/หน้าแรกทำ */
.service-block-style2 .inner-block .content .text {
  display: block;
}