/* ฟอนต์, tokens และ Header / Footer; โหลดหลัง CSS ของหน้า. */

/* Fonts */
@font-face {
  font-family: "FC SaveSpace";
  src: url("fonts/FCSaveSpace-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC SaveSpace";
  src: url("fonts/FCSaveSpace-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC SaveSpace";
  src: url("fonts/FCSaveSpace-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ekachon";
  src: url("fonts/Ekachon-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ekachon";
  src: url("fonts/Ekachon-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ekachon";
  src: url("fonts/Ekachon-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tci-orange: #f26e23;
  --tci-orange-dark: #d9591a;
  --tci-orange-light: #fff3ec;
  --tci-dark: #262626;
  --tci-gray-text: #7a7a7a;
  --tci-gray-bg: #F8F8F8;
  --tci-section-bg: #fdfdfd;
  --tci-border: #ececec;
  --tci-black: #000000;
  --tci-green: #3cb043;
  --tci-footer-card: #1e1e1e;

  --tci-font-heading: "FC SaveSpace", sans-serif;
  --tci-font-body: "Ekachon", sans-serif;

  /* Typography tokens */
  --tci-title-size: 34px;
  --tci-subtitle-size: 28px;
  --tci-intro-title-size: 44px;
  --tci-body-size: 16px;
  --tci-small-size: 12px;
  --tci-title-weight: 400;
  --tci-subtitle-weight: 300;

  --tci-title-line-height: 1.2;
  --tci-subtitle-line-height: 1.3;
  --tci-title-subtitle-gap: 8px;
  --tci-space-8: 8px;
  --tci-space-24: 24px;
  --tci-space-32: 32px;
  /* ระยะ section: ปรับค่า mobile และ desktop ที่นี่. */
  --tci-section-gap-mobile: 40px;
  --tci-section-gap-desktop: 80px;
  --tci-section-gap: var(--tci-section-gap-mobile);
  --tci-section-padding: calc(var(--tci-section-gap) / 2);
  --tci-card-gap: var(--tci-space-24);
  --tci-section-heading-padding-start: 0px;
  --tci-section-heading-padding-end: 0px;

  /* Layout tokens */
  --tci-content-max: 1200px;
  --tci-gutter: 16px;
  --tci-gutter-lg: clamp(32px, calc((100vw - 768px) / 4), 150px);

  --tci-header-gutter: 16px;
  /* เผื่อพื้นที่ท้าย footer สำหรับปุ่มกลับด้านบนที่ fixed พอให้ไม่บังบรรทัดสุดท้าย
     แต่ไม่มากจนเหลือช่องว่างว่างเปล่าท้าย footer. */
  --tci-scroll-top-clear: 64px;
}

/* ล้าง body margin เพื่อให้ Header / Footer เต็มความกว้างจอ. */
body {
  margin: 0;
}

/* กันกรอบ outline สีเข้ม/ดำจาก default ของ browser โผล่ตอนคลิกปุ่ม/ลิงก์
   แล้วได้ focus (เช่น กดเมนูมือถือแล้วมีกรอบดำรอบหัวข้อที่เปิด) — ทั้งเว็บนี้
   ใส่สีกรอบ custom (ส้มแบรนด์) ผ่าน :focus-visible เท่านั้น ไม่เคย reset
   :focus เฉยๆ ไว้เลยสักจุด บาง browser/สถานการณ์ที่ไม่ตัดสินว่าเป็น
   "focus-visible" (เช่นคลิกเมาส์ในบาง browser) จะเหลือ default outline ของ
   browser เอง (มักเป็นสีดำ/เข้ม) โผล่มาแทนที่กรอบส้มที่ตั้งใจไว้ — กฎนี้ตัด
   default ออกเฉพาะตอนไม่ใช่ focus-visible เท่านั้น ไม่กระทบการ focus ด้วย
   คีย์บอร์ด (Tab) ซึ่งยังเห็นกรอบส้มตามที่แต่ละ element กำหนดไว้เองอยู่. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ล็อก scroll ของหน้าตอนแผงเมนูมือถือเปิดอยู่ (JS toggle บน html). */
html.tci-shared-is-locked {
  overflow: hidden;
}

/* Scoped reset: วางก่อนกฎของ shared component. */
.tci-shared-topbar,
.tci-shared-topbar *,
.tci-shared-header,
.tci-shared-header *,
.tci-shared-footer,
.tci-shared-footer * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tci-shared-topbar :where(a),
.tci-shared-header :where(a) {
  text-decoration: none;
  color: inherit;
}

/* Global: ไม่ขีดเส้นใต้ลิงก์ทุกจุดทุกสถานะ — กันลิงก์ที่อยู่นอก wrapper
   (.tci-e40211-page / .tci-shared-header / -footer ฯลฯ ที่มี :where(a) reset
   ของตัวเอง) หรือโดน CSS ของเว็บปลายทางตั้ง a:hover { underline } ทับ
   (a:hover specificity 0,1,1 ชนะ .wrapper :where(a) 0,1,0).
   จุดที่ตั้งใจให้ขีดเส้นใต้ตอน hover (.tci-shared-footer-links a:hover,
   .tci-shared-footer-legal a:hover, .tci-shared-contact-link:hover) ยังทำงาน
   เพราะ selector เจาะจงกว่า. */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

/* Global: ไม่ให้ตัวหนังสือลิงก์เป็นสีน้ำเงิน (Bootstrap บนเว็บจริงตั้ง
   a { color: #007bff } และ a:hover { color: #0056b3 }) — ใช้สีของข้อความรอบข้าง
   แทน. จงใจใช้แค่ "a" (0,0,1) ไม่ใช่ a:link/a:visited (0,1,1) เพื่อไม่ทับสีที่
   ปุ่ม/ลิงก์แต่ละแบบตั้งผ่าน class (0,1,0) เช่นปุ่มส้มตัวหนังสือขาว.
   ตอน hover ใช้ a:hover (0,1,1) ให้ชนะ a:hover ของ Bootstrap ส่วนลิงก์ที่ต้องคง
   สีของตัวเองตอน hover มี .class:hover (0,2,0) กำหนดไว้แยกแล้ว. */
a {
  color: inherit;
}

a:hover {
  color: inherit;
}

.tci-shared-header :where(button) {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ไอคอนจาก SVG: ปรับขนาดผ่าน --tci-icon-size. */
.tci-shared-icon-check {
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--tci-icon-size, 16px);
  height: var(--tci-icon-size, 16px);

  background: url("/dist/assets/icon/icon-check.svg") center / contain no-repeat;
  vertical-align: middle;
}

/* ลูกศร: ใช้คลาสหลักคู่กับ -white หรือ -orange. */
.tci-shared-icon-arrow {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--tci-icon-size, 26px);
  height: var(--tci-icon-size, 26px);
  border-radius: 50%;
  vertical-align: middle;
}

.tci-shared-icon-arrow-white {
  background: #ffffff;
  color: var(--tci-orange);
}

.tci-shared-icon-arrow-orange {
  background: var(--tci-orange);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(242, 110, 35, 0.22);
}

.tci-shared-icon-arrow::before,
.tci-shared-icon-arrow::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 50%;
}

.tci-shared-icon-arrow::before {
  left: 30%;
  width: 38%;
  height: max(1px, calc(var(--tci-icon-size, 26px) * 0.035));
  background: currentColor;
  transform: translateY(-50%);
}

.tci-shared-icon-arrow::after {
  right: 32%;
  width: 18%;
  height: 18%;
  border-top: max(1px, calc(var(--tci-icon-size, 26px) * 0.035)) solid currentColor;
  border-right: max(1px, calc(var(--tci-icon-size, 26px) * 0.035)) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.tci-shared-topbar {
  height: 42px;
  display: flex;
  align-items: center;
  line-height: 1.3;
  background: var(--tci-orange);
  color: #fff;
  font-family: var(--tci-font-body);
  font-size: 12px;
}

/* Marquee ข้อความในแถบส้ม: เข้าจากขวาสุด ไหลผ่าน ออกทางซ้ายสุด วนซ้ำไม่หยุด.
   ใช้ position:absolute + left:% (อ้างอิงความกว้างของ .tci-marquee ที่เป็น
   containing block) แทน transform:translateX(%) ตามที่เสนอมา เพราะ translateX(%)
   อ้างอิงความกว้างของตัวข้อความเอง ไม่ใช่ของแถบ — ถ้าแถบกว้างกว่าข้อความมาก (เช่น
   จอ desktop) ข้อความจะยังไม่พ้นขอบขวาจริงตอนเริ่ม เห็นโผล่มาแต่แรกแทนที่จะไหล
   เข้ามาจากนอกจอ ใช้ left:% แก้ปัญหานี้ให้อ้างอิงความกว้างแถบเสมอไม่ว่าจอไหน. */
.tci-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  height: 100%;
}

.tci-marquee__text {
  position: absolute;
  top: 50%;
  left: 100%;
  white-space: nowrap;
  transform: translateY(-50%);
  animation: tci-marquee-run 9s linear infinite;
}

/* ข้อความวิ่งเป็นลิงก์ (ไปหน้าแจ้งให้ติดต่อกลับ): หยุดวิ่งตอนชี้เมาส์/focus ให้กดง่าย
   และขีดเส้นใต้ให้รู้ว่ากดได้. */
.tci-shared-topbar:hover .tci-marquee__text,
.tci-shared-topbar:focus-within .tci-marquee__text {
  animation-play-state: paused;
}

a.tci-marquee__text:hover,
a.tci-marquee__text:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

a.tci-marquee__text:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ปลายทาง -100% เดิมทำให้ข้อความเดินทางเลยจุดที่ "พ้นขอบซ้ายแล้ว" ไปอีกเกือบ
   เต็มความกว้างแถบก่อนวนใหม่ (ช่วงที่มองไม่เห็นแต่ยัง "นับเวลา" อยู่) ยิ่งแถบกว้าง
   (จอใหญ่) ยิ่งเห็นเป็นช่วงว่างนาน แก้โดยวัดความกว้างข้อความจริงจากการ render
   (291px ที่ font 12px มือถือ, 315px ที่ font 13px desktop) แล้วตั้งปลายทางเป็น
   px ตายตัวเท่ากับความกว้างข้อความ+กันชนเล็กน้อย แทน -100% — ทำให้ข้อความหยุด
   เดินทางทันทีที่พ้นขอบซ้ายพอดี ไม่มีช่วงมองไม่เห็นเดินฟรีอีก ดูต่อเนื่องขึ้นมาก
   โดยความเร็วช่วงที่มองเห็น (px/วินาที) ยังเท่าเดิม เพราะปรับ duration ลงตาม
   ระยะทางรวมที่สั้นลงด้วยสัดส่วนเดียวกัน. */
@keyframes tci-marquee-run {
  from {
    left: 100%;
  }
  to {
    left: -300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tci-marquee__text {
    animation: none;
    position: static;
    transform: none;
    display: block;
    text-align: center;
  }
}

/* z-index 1000: layout เก่า (default/defaultNonMenu ฯลฯ) มีเนื้อหาที่ตั้ง z-index
   ไว้ถึง 999 (เช่น .section-intro-form 888/999) ถ้าต่ำกว่านั้น dropdown เมนูจะถูก
   เนื้อหาหน้าทับ — 1000 อยู่เหนือเนื้อหาทั้งหมด และเท่ากับ .ui.dimmer/modal ของ
   Semantic UI ซึ่งต่อท้าย body (มาทีหลังใน DOM) จึงยังทับ header ได้ตามปกติ.
   sticky: แถบส้มด้านบนเลื่อนหายไปตามปกติ ส่วน header (โลโก้/เมนู) ติดอยู่บนสุดของจอ
   ตลอดตอนเลื่อนหน้า (ยังเป็นจุดอ้างอิงของแผงเมนู/dropdown ที่เป็น absolute เหมือน relative). */
.tci-shared-header {
  height: 54px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--tci-font-body);
  padding: 0 12px;
  border-bottom: 1px solid var(--tci-border);
}

.tci-shared-logo {
  display: block;
  width: 138px;
  height: 19px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ลิงก์ครอบโลโก้กลับหน้าแรก — เป็น flex item ของ header แทนตัว <img> จึงต้อง
   ไม่หดตัวเหมือนโลโก้เดิม. */
.tci-shared-logo-link {
  display: block;
  flex-shrink: 0;
}

.tci-shared-logo-link:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 4px;
}

.tci-shared-nav {
  display: none;
}

.tci-shared-menu-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block: -8px;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tci-shared-menu-toggle-button span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  /* เทาเข้ม #555 แทนดำ (#262626 เดิม) ให้นุ่มขึ้นและเข้ากับปุ่มเช็กกรมธรรม์
     สีส้มข้างๆ — ลองแล้ว #333 ใกล้ดำเดิมเกินจนตาแยกไม่ออก. */
  background: #555555;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tci-shared-menu-toggle-button,
  .tci-shared-menu-toggle-button span {
    transition: none;
  }
}

.tci-shared-menu-toggle-button:focus-visible,
.tci-shared-nav-link:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

/* เมนูหลักแบบมี submenu: ปุ่ม toggle หน้าตาเหมือนลิงก์ปกติ + chevron หมุนตอนเปิด. */
.tci-shared-nav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font: inherit;
  text-align: left;
}

.tci-shared-nav-toggle:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

.tci-shared-nav-chevron {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.tci-shared-nav-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -5px 0 0 -4px;
  box-sizing: border-box;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* > ตรง .tci-shared-nav-toggle (ไม่ใช่ descendant เฉยๆ) เพราะ chevron ของ
   เมนูซ้อนชั้น 2 (.tci-shared-nav-subtoggle ใน "การแจ้งเคลมและเรียกร้องสินไหม")
   ก็เป็น descendant ของ .tci-shared-nav-item ตัวนอกเหมือนกัน (อยู่ลึกเข้าไป
   ใน .tci-shared-nav-dropdown) ถ้าใช้ตัวเลือกแบบเดิมพอเปิดเมนูชั้นนอก chevron
   ของปุ่มชั้นในจะหมุนตามไปด้วยทั้งที่ชั้นในเองยังปิดอยู่ — > บังคับให้จับเฉพาะ
   chevron ของปุ่ม toggle ที่เป็นลูกตรงของ .tci-shared-nav-item เท่านั้น. */
.tci-shared-nav-item.tci-shared-is-open > .tci-shared-nav-toggle .tci-shared-nav-chevron {
  transform: rotate(180deg);
}

.tci-shared-nav-dropdown-list {
  list-style: none;
}

.tci-shared-nav-dropdown-list a {
  display: block;
  color: var(--tci-dark);
}

.tci-shared-nav-dropdown-list a:hover {
  color: var(--tci-orange);
}

.tci-shared-nav-dropdown-list a:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

/* เมนูซ้อน 2 ชั้นใน dropdown (เช่น "การแจ้งเคลมและเรียกร้องสินไหม" ใน
   "การแจ้งเคลม") ใช้ปุ่ม toggle + chevron แบบเดียวกับชั้นแรกทุกประการ แค่คนละ
   class (.tci-shared-nav-subtoggle ไม่ใช่ .tci-shared-nav-toggle) กัน JS/CSS
   ของชั้นแรกไปจับผิดตัว เปิด/ปิดด้วย .tci-shared-is-open บน .tci-shared-nav-subitem
   เอง (คนละ element กับ .tci-shared-nav-item ชั้นนอก จึงไม่ชนกัน) แผงย่อยซ้อน
   ข้างในใช้ class .tci-shared-nav-dropdown-list ซ้ำได้เลย (ได้สไตล์ลิงก์ +
   พฤติกรรม "คลิกลิงก์แล้วปิดเมนูทั้งหมด" จาก initNavDropdowns() มาฟรี). */
.tci-shared-nav-subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  color: var(--tci-dark);
}

.tci-shared-nav-subtoggle:hover {
  color: var(--tci-orange);
}

.tci-shared-nav-subtoggle:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

.tci-shared-nav-subitem.tci-shared-is-open .tci-shared-nav-chevron {
  transform: rotate(180deg);
}

.tci-shared-nav-subdropdown {
  display: none;
  padding-left: 16px;
}

.tci-shared-nav-subitem.tci-shared-is-open .tci-shared-nav-subdropdown {
  display: block;
}

/* หัวเมนูซ้อนที่เป็นทั้งลิงก์และปุ่มเปิดเมนูย่อย ("การแจ้งเคลมและเรียกร้องสินไหม"):
   ข้อความเป็นลิงก์ (ระยะ/ตัวอักษรเท่าปุ่ม subtoggle เดิม ทุกขนาดจอ) ส่วนลูกศรด้านขวา
   เป็นปุ่ม subtoggle แยก (JS เปิด/ปิดเมนูย่อยเดิมใช้ได้เลย). */
.tci-shared-nav-subrow {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tci-shared-nav-dropdown-list .tci-shared-nav-subrow > .tci-shared-nav-sublink {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 8px;
}

.tci-shared-nav-subtoggle.tci-shared-nav-subtoggle-icon {
  flex: 0 0 auto;
  width: auto;
  padding: 8px;
}

/* เมนูมือถือ: aria-expanded="true" เปิดแผงทับเนื้อหา.
   ใช้ถึง 1279px: โลโก้ + เมนู 7 หมวด + ปุ่มเช็กกรมธรรม์ ต้องใช้จอ ~1240px ขึ้นไป
   (วัดจริง) ต่ำกว่านั้นเมนู desktop ล้นขอบจอจน "ติดต่อเรา"/ปุ่มเช็กกรมธรรม์
   ตกขอบ — ต้องแก้คู่กับ matchMedia 1280px ใน tci-components.js. */
@media (max-width: 1279.98px) {
  .tci-shared-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    background: #ffffff;
    padding: 0 16px 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }

  .tci-shared-menu-toggle-button[aria-expanded="true"] + .tci-shared-nav {
    display: flex;
    flex-direction: column;
  }

  /* แถวหลัก: สูง 52px, ตัวอักษร 16px */
  .tci-shared-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tci-dark);
  }

  .tci-shared-nav-item {
    border-bottom: 1px solid var(--tci-border);
  }

  .tci-shared-nav-toggle {
    min-height: 52px;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tci-dark);
    justify-content: space-between;
  }

  .tci-shared-nav-item.tci-shared-is-open .tci-shared-nav-toggle {
    color: var(--tci-orange);
    font-weight: 700;
  }

  /* เงาบางๆ ใต้หัวข้อที่เปิดอยู่ ให้แยกจากรายการอื่นชัดขึ้น */
  .tci-shared-nav-item.tci-shared-is-open {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  }

  .tci-shared-nav-dropdown {
    display: none;
    padding: 0 0 12px 12px;
  }

  .tci-shared-nav-item.tci-shared-is-open .tci-shared-nav-dropdown {
    display: block;
  }

  /* แถวย่อย: สูง 48px, ตัวอักษร 15px สีเข้มเกือบดำ (ไม่จางแบบเดิม) */
  .tci-shared-nav-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 2px solid var(--tci-orange-light);
    padding-left: 12px;
  }

  .tci-shared-nav-dropdown-list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tci-dark);
  }

  .tci-shared-nav-dropdown-list a:active,
  .tci-shared-nav-link:active {
    color: var(--tci-orange);
  }

  /* ลิงก์ที่ไม่มีเมนูย่อย (เช่น "สิทธิพิเศษ"): ลูกศรขวาสีส้มแบบเดียวกับ
     .tci-shared-footer-highlight-link ใน footer ใช้ class ไอคอนเดิม
     (.tci-shared-icon-arrow) ที่มีอยู่แล้ว ไม่ต้องสร้าง class ใหม่ */
  .tci-shared-nav-link .tci-shared-icon-arrow {
    --tci-icon-size: 20px;
  }

  /* ปุ่มปิด (X): พื้นวงกลมขาวนูนขึ้นจาก header ด้วยเงาสองชั้น (เงาใกล้คม +
     เงาไกลฟุ้ง) ให้ดูเป็นปุ่มกดได้ชัดกว่าเส้นลอยๆ. */
  .tci-shared-menu-toggle-button[aria-expanded="true"] {
    background: #ffffff;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .tci-shared-menu-toggle-button[aria-expanded="true"]:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  }

  .tci-shared-menu-toggle-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .tci-shared-menu-toggle-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .tci-shared-menu-toggle-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Contact blocks */
.tci-shared-contact-group {
  display: flex;
  flex-direction: column;
  font-family: var(--tci-font-body);
  color: #414141;
}

/* ลิงก์ติดต่ออยู่นอก footer จึงต้องมี reset ของตัวเอง. */
.tci-shared-contact-group :where(a) {
  text-decoration: none;
  color: inherit;
}

.tci-shared-contact-block {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tci-shared-contact-block:first-of-type {
  padding-top: 32px;
}

.tci-shared-contact-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.tci-shared-contact-title {
  padding: 0;
  margin: 0 0 4px;
  font-family: var(--tci-font-heading);
  font-size: 28px;
  font-weight: var(--tci-title-weight);
  line-height: 150%;
}

.tci-shared-contact-text {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
}

.tci-shared-contact-link {
  display: none;
  color: var(--tci-orange);
  font-size: 14px;
  font-weight: 400;
}

.tci-shared-contact-link:hover {
  color: var(--tci-orange);
  text-decoration: underline;
}

.tci-shared-footer {
  --tci-footer-pad-x: 16px;
  --tci-footer-pad-top: 28px;
  background: var(--tci-black);
  color: #ffffff;
  font-family: var(--tci-font-body);
  padding: var(--tci-footer-pad-top) var(--tci-footer-pad-x) calc(12px + var(--tci-scroll-top-clear));
  margin-top: 16px;
}

/* ส่วนบนของ footer (ข้อมูลบริษัท+มาตรฐานการรับรอง จนถึงศูนย์บริการลูกค้า/
   ติดต่อเรา — .tci-shared-footer-top + .tci-shared-footer-contact-row) พื้น
   หลังเทาเข้ม #242424 แยกจากส่วนล่าง (คอลัมน์เมนู+ลิงก์กฎหมาย) ที่ยังเป็นสีดำ
   เดิมของ .tci-shared-footer เอง full-bleed ด้วย margin ลบเท่ากับ padding
   ของ .tci-shared-footer (ผ่านตัวแปรเดียวกัน --tci-footer-pad-x/-top จึงตาม
   ค่า padding ของ footer ในทุก breakpoint โดยอัตโนมัติ ไม่ต้อง sync มือ) แล้ว
   เติม padding ในตัวเองกลับเข้าไปเท่าเดิมเพื่อให้เนื้อหาข้างในอยู่ตำแหน่งเดิม
   ทุกจุด ไม่ต้อง padding-bottom เพราะ .tci-shared-footer-contact-row
   (ลูกตัวสุดท้าย) มี padding-bottom + เส้นคั่นของตัวเองอยู่แล้วพอดี ซึ่งกลาย
   เป็นเส้นแบ่งระหว่างสีเทา/ดำไปในตัวโดยไม่ต้องเพิ่มเส้นใหม่. */
.tci-shared-footer-upper {
  background: #242424;
  margin: calc(-1 * var(--tci-footer-pad-top)) calc(-1 * var(--tci-footer-pad-x)) 0;
  padding: var(--tci-footer-pad-top) var(--tci-footer-pad-x) 0;
  border-bottom: 1px solid #4d4d4d;
}

@media (max-width: 767.98px) {
  .tci-shared-footer-upper {
    margin-bottom: 20px;
  }
}

.tci-shared-footer :where(a) {
  text-decoration: none;
  color: inherit;
}

.tci-shared-footer :where(ul) {
  list-style: none;
}

.tci-shared-footer :where(button) {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ส่วนที่ 1+2: ข้อมูลบริษัท + มาตรฐานการรับรอง — คอลัมน์เดียวมือถือ, 2 คอลัมน์
   ซ้าย(ข้อมูลบริษัท)/ขวา(โลโก้) ที่ desktop (ดู @media min-width:768px). */
.tci-shared-footer-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
}

.tci-shared-footer-company {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tci-shared-footer-company-name {
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
}

.tci-shared-footer-company-detail {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.tci-shared-footer-certs-title {
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 12px;
}

.tci-shared-footer-cert-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* พื้นขาวมนให้โลโก้ทุกอันความสูงเท่ากัน (คปภ./DBD/CAC) object-fit:contain กัน
   ภาพยืดเพี้ยน. มือถือ 100px กว้าง คงสัดส่วน
   141:61 เท่า desktop. */
.tci-shared-footer-cert-logo {
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: auto;
  aspect-ratio: 141 / 61;
  padding: 4px 8px;
  border-radius: 6px;
  background: #ffffff;
  object-fit: contain;
}

/* โลโก้ที่เป็นลิงก์ (DBD → หน้า trustmark): class การ์ด .tci-shared-footer-cert-logo
   อยู่ที่ <a> แทน <img> ขนาด/พื้นขาว/ระยะขอบจึงเท่าโลโก้อื่นทุกจอ ภาพด้านในเต็มการ์ด.
   selector ของ CAC ด้านล่างใช้ "> img:last-child" (ลูกตรงเท่านั้น) เพราะภาพใน <a>
   นี้ก็เป็น :last-child ของ <a> — ถ้าไม่จำกัดจะโดนย่อเป็นวงกลม 43px ไปด้วย. */
.tci-shared-footer-cert-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* โลโก้ CAC (ตัวสุดท้ายในแถว คปภ./DBD/CAC) เป็นวงกลม ไม่มีกรอบการ์ด —
   ขนาดไอคอนสูงเท่าการ์ด คปภ. ทุกจอ (desktop 61). มือถือชิดซ้าย, desktop ชิดขวา. */
.tci-shared-footer-cert-logos > img:last-child {
  /* สูงเท่าการ์ด คปภ./DBD บนมือถือ (100px ที่สัดส่วน 141:61 ≈ 43px). */
  width: 43px;
  height: 43px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 0;
  background: none;
}

/* ISO 27001: ตัวหนังสือขาวไม่มีพื้นหลัง วางหน้าสุดของแถวโลโก้ สูงเท่าการ์ด
   คปภ. (ได้ความสูงจาก .tci-shared-footer-cert-logo) กว้างตามตัวหนังสือ
   ตัวอักษรใหญ่ให้ดูหนักเท่าโลโก้ คปภ.: มือถือ 26px, desktop 40px. */
.tci-shared-footer-cert-logos .tci-shared-footer-iso-badge {
  display: flex;
  align-items: center;
  width: auto;
  max-width: none;
  height: 43px; /* = การ์ด คปภ. มือถือ (100px ที่ 141:61) */
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
}

/* มือถือจอแคบ (≤414px): ISO + คปภ. + DBD + CAC กว้างรวมเกินจอ ทำให้ CAC
   ตกลงแถวใหม่ — บังคับอยู่แถวเดียว (nowrap) ให้การ์ด คปภ./DBD หดตามพื้นที่ที่
   เหลือ (สูงตามสัดส่วน 141:61 เอง) ส่วน ISO/CAC ย่อตามความกว้างจอด้วย vw. */
@media (max-width: 414.98px) {
  .tci-shared-footer-cert-logos {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .tci-shared-footer-cert-logo {
    flex: 0 1 100px;
    min-width: 0;
  }

  .tci-shared-footer-cert-logos > img:last-child {
    flex: 0 0 auto;
    width: min(43px, 10.5vw);
    height: min(43px, 10.5vw);
  }

  .tci-shared-footer-cert-logos .tci-shared-footer-iso-badge {
    flex: 0 0 auto;
    font-size: clamp(18px, 6vw, 26px);
  }
}


/* ส่วนที่ 3: ศูนย์บริการลูกค้า + ติดต่อเรา/โซเชียล แถวเดียวกัน (มือถือ 2 แถวแยก
   ดู @media max-width:767.98px). */
.tci-shared-footer-contact-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}

.tci-shared-footer-social-title {
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
}

.tci-shared-footer-social {
  display: flex;
  gap: 6px;
}

/* พื้นที่กดอย่างน้อย 48px แม้ไอคอนภาพจริงจะเล็กกว่า. */
.tci-shared-footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.tci-shared-footer-social-link:hover,
.tci-shared-footer-social-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.tci-shared-footer-social-link:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

.tci-shared-footer-social-link img {
  display: block;
  width: 36px;
  height: 36px;
  /* ไม่ใส่ border-radius: ไฟล์ SVG เป็นวงกลมอยู่แล้ว การตัดซ้ำจะกินขอบ
     anti-alias ของเส้นขอบขาวจนดูแตก. */
}

/* มือถือ: ศูนย์บริการลูกค้า กับ ติดต่อเรา/โซเชียล อยู่แถวเดียวกัน หัวข้อทั้งสอง
   ตรงกัน — ย่อไอคอนโซเชียลให้ 6 อันพอดีพื้นที่ที่เหลือข้าง Call Center.
   จัดชิดซ้ายเป็นกลุ่มเดียว (ไม่ใช้ space-between ที่ดันไปสุดขอบจอจนดูแยก
   ส่วน) คั่นด้วย gap คงที่; จอแคบมากที่ไม่พอ ให้ตัดโซเชียลลงแถวใหม่แทนล้น. */
@media (max-width: 767.98px) {
  .tci-shared-footer-contact-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 32px;
    row-gap: 20px;
  }

  .tci-shared-footer-social-block {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .tci-shared-footer-social-title {
    margin: 0;
    font-size: 16px;
  }

  .tci-shared-footer-social {
    gap: 4px;
    min-height: 52px; /* สูงเท่าแถวเบอร์ 1519 → ไอคอนอยู่กึ่งกลางแนวเดียวกับเบอร์ */
    align-items: center;
  }

  .tci-shared-footer-social-link {
    width: 26px;
    height: 26px;
  }

  .tci-shared-footer-social-link img {
    width: 24px;
    height: 24px;
  }
}

/* Footer accordion */
.tci-shared-footer-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tci-shared-footer-row + .tci-shared-footer-row {
  margin-top: 10px;
}

.tci-shared-footer-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tci-shared-footer-toggle-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--tci-footer-card);
  border-radius: 8px;
  padding: 15px 16px;
  text-align: left;
}

.tci-shared-footer-toggle-button:focus:not(:focus-visible) {
  outline: none;
}

.tci-shared-footer-toggle-button:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

/* .tci-shared-footer-panel/-links ไม่มี tabindex อยู่แล้ว (ตรวจซอร์สทั้งไฟล์
   ไม่พบ) จึง focus ไม่ได้อยู่แล้วโดยธรรมชาติ กันไว้อีกชั้นเผื่อ browser ปฏิบัติ
   กับ container ต่างไปในบางกรณี ไม่มีผลเสียถ้าไม่ใช่สาเหตุจริง. */
.tci-shared-footer-panel:focus,
.tci-shared-footer-links:focus {
  outline: none;
}

.tci-shared-footer-group-title {
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}

.tci-shared-footer-arrow {
  --tci-icon-size: 24px;
}

/* เครื่องหมาย + / − (ไม่ใช้ลูกศร เพื่อไม่ให้สื่อผิดว่าปุ่ม accordion นี้จะพาไป
   หน้าอื่น): ::before = เส้นนอน, ::after = เส้นตั้ง — ตอนเปิดเส้นตั้งหุบลง
   (scaleY 0) เหลือเป็น −. */
.tci-shared-footer-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.tci-shared-footer-toggle-icon::before,
.tci-shared-footer-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: var(--tci-orange);
  transition: transform 0.2s ease;
}

.tci-shared-footer-toggle-icon::after {
  transform: rotate(90deg);
}

.tci-shared-footer-group.tci-shared-is-open .tci-shared-footer-toggle-icon::after {
  transform: rotate(90deg) scaleX(0);
}

/* แต่ละ ul เป็นหนึ่งคอลัมน์บน desktop. */
.tci-shared-footer-panel {
  display: none;
  background: var(--tci-footer-card);
  border-radius: 8px;
  padding: 18px 16px;
}

.tci-shared-footer-group.tci-shared-is-open .tci-shared-footer-panel {
  display: block;
}

.tci-shared-footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tci-shared-footer-links + .tci-shared-footer-links {
  margin-top: 12px;
}

.tci-shared-footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.tci-shared-footer-links a:hover {
  color: #F26F21;
  text-decoration: underline;
}

.tci-shared-footer-links a:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

.tci-shared-footer-bottom {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-top: 1px solid #4d4d4d;
}

/* ลิงก์กฎหมาย: ไหลต่อกันแล้วขึ้นบรรทัดใหม่เองตามที่พอดี (flex-wrap) ทุกจอ
   คั่นด้วยเส้นตั้ง 1px หน้าลิงก์ทุกตัว (li::before) แล้วซ่อนเส้นที่ตกไปอยู่ต้น
   บรรทัด: ดึงทั้งแถวไปทางซ้าย 9px (= เส้น 1px + gap 8px) แล้ว clip-path ตัด
   ขอบซ้าย 9px ออก — เส้นของลิงก์แรกในทุกบรรทัดจึงถูกตัด ลิงก์ชิดซ้ายตรงแนว
   ข้อความลิขสิทธิ์ ไม่มี "|" ห้อยต้นบรรทัดตอนตัดบรรทัดบนมือถือ.
   column-gap = gap ของ li (8px) ให้ระยะสองข้างเส้นเท่ากัน. */
.tci-shared-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  margin-left: -9px;
  clip-path: inset(0 0 0 9px);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.tci-shared-footer-legal li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tci-shared-footer-legal li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.35);
}

.tci-shared-footer-legal a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* มือถือ: ส่วนท้ายสุด (ลิขสิทธิ์ + ลิงก์นโยบาย)
   - margin-top 28px + เส้นเทาจางด้านบน แยกจาก accordion เมนูให้ชัดว่าคนละส่วน
   - ไม่มี padding ซ้าย-ขวา: ข้อความห่างขอบจอเท่า padding ของ footer (16px)
     ตรงแนวขอบกล่อง accordion และเส้นคั่นด้านบน
   - จังหวะบรรทัดเท่ากันทั้งส่วน: ใช้ line-height 2 อย่างเดียว gap ทุกจุด = 0
     (ลิขสิทธิ์ → เว็บไซต์นี้แสดงผล → กลุ่มลิงก์ → ลิงก์แถวถัดไป) บรรทัดที่ตัด
     ขึ้นใหม่ภายในย่อหน้าเดียวกันจึงห่างเท่ากับระหว่างย่อหน้าด้วย — เดิมลิงก์มี
     min-height 44px/28px ทำให้แถวลิงก์ห่างกว่าบรรทัดลิขสิทธิ์มาก
   - text-wrap: pretty แทน balance (balance ตัด "Browser Google | Chrome" สั้นผิดที่)
   - ลิงก์สีเทาเหมือนทุกจอ (สีจาก .tci-shared-footer-legal) hover เป็นส้ม+ขีดเส้นใต้ */
@media (max-width: 767.98px) {
  .tci-shared-footer-bottom {
    gap: 0;
    margin-top: 28px;
    padding-top: 16px;
  }

  .tci-shared-footer-copy-wrap {
    gap: 0;
  }

  .tci-shared-footer-copy,
  .tci-shared-footer-legal {
    line-height: 2;
  }

  .tci-shared-footer-copy {
    text-wrap: pretty;
  }

  .tci-shared-footer-legal {
    row-gap: 0;
  }

  .tci-shared-footer-legal a {
    min-height: 0;
  }
}

.tci-shared-footer-legal a:hover {
  color: var(--tci-orange);
  text-decoration: underline;
}

.tci-shared-footer-legal a:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: -2px;
}

/* ปุ่มกลับด้านบน: JS เติม .tci-shared-is-visible เพื่อแสดง. */
.tci-shared-scroll-top-button {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  /* เว้น safe area สำหรับ home indicator. */
  padding-bottom: max(9px, env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0;
  background: var(--tci-orange);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.tci-shared-scroll-top-button.tci-shared-is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tci-shared-scroll-top-button:hover {
  background: var(--tci-orange-dark);
}

.tci-shared-scroll-top-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .tci-shared-scroll-top-button {
    transition: none;
    transform: translate(-50%, 0);
  }
}

.tci-shared-footer-top-icon {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}

.tci-shared-footer-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  text-wrap: balance;
}

/* ครอบลิขสิทธิ์ + ข้อความแนะนำ browser ให้เป็น item เดียวของ .tci-shared-footer-bottom
   (desktop เป็น grid 2 คอลัมน์ ถ้าเพิ่ม <p> ตรงๆ จะกลายเป็น item ที่ 3 ตกไปแถวใหม่)
   แต่ละบรรทัดยังเป็น .tci-shared-footer-copy จึงได้ขนาด/สี/การจัดชิดเดิมทุกจอ. */
.tci-shared-footer-copy-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Call Center: อยู่ในแถวเดียวกับติดต่อเรา/โซเชียล (.tci-shared-footer-contact-row
   เป็นคนคุมเส้นคั่น/ระยะห่างของทั้งแถวแทนแล้ว). */
.tci-shared-footer-callcenter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.tci-shared-footer-callcenter-label {
  margin: 0;
  font-family: var(--tci-font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--tci-orange);
}

.tci-shared-footer-callcenter-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* คงสีเดิม (สืบทอดจาก footer) ตอน hover — กัน a:hover ของ Bootstrap บนเว็บจริง */
.tci-shared-footer-callcenter-row:hover {
  color: inherit;
}

.tci-shared-footer-phone-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tci-shared-footer-phone-container img {
  display: block;
  width: 36px;
  height: 36px;
}

.tci-shared-footer-callcenter-number {
  font-family: var(--tci-font-body);
  font-weight: 700;
  font-size: 35px;
  color: rgba(255, 255, 255, 0.85);
}

.tci-shared-footer-callcenter-row:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 4px;
}

@media (min-width: 768px) {

  .tci-shared-topbar {
    font-size: 13px;
  }

  /* แถบกว้างขึ้นที่ desktop ระยะเดินทางของข้อความ (ความกว้างแถบ + ความกว้าง
     ข้อความ) ยาวขึ้นตาม จึงยืดเวลาให้ความเร็วอ่านใกล้เคียงกับมือถือ ปลายทาง
     ก็ต้องกำหนดใหม่ตามความกว้างข้อความจริงที่ font 13px (315px) ด้วย เพราะ
     @keyframes ชื่อซ้ำจะถูกแทนที่ทั้งชุด ไม่ merge เฉพาะ property ที่ต่าง. */
  .tci-marquee__text {
    animation-duration: 20s;
  }

  @keyframes tci-marquee-run {
    from {
      left: 100%;
    }
    to {
      left: -325px;
    }
  }

  .tci-shared-header {
    padding-inline: var(--tci-header-gutter);
  }

  .tci-shared-contact-group {
    flex-direction: row;
    gap: 24px;
    padding-inline: max(var(--tci-gutter-lg), calc((100% - var(--tci-content-max)) / 2));
    padding-block: var(--tci-section-padding);
  }

  .tci-shared-contact-block {
    flex: 1;
    padding: 0;
  }

  .tci-shared-contact-block:first-of-type {
    padding-top: 0;
  }

  .tci-shared-footer {
    --tci-footer-pad-x: 24px;
    --tci-footer-pad-top: 48px;
    padding: var(--tci-footer-pad-top) var(--tci-footer-pad-x) calc(20px + var(--tci-scroll-top-clear));
    margin-top: 24px;
  }

  .tci-shared-footer-social {
    padding-bottom: 28px;
    padding-top: 26px; /* +11px ให้ไอคอนอยู่แนวกึ่งกลางเดียวกับเบอร์ 1519 */
  }

  /* จอกว้างแสดงทุกกลุ่ม; tci-components.js ตั้ง aria-expanded ให้ตรงกัน. */
  .tci-shared-footer-nav {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 4 คอลัมน์เท่ากันทั้งสองแถว (แถวล่างมีแค่ 3 กลุ่ม จะไปอยู่ 3 คอลัมน์แรกเอง)
     ใช้ grid-template-columns ชุดเดียวกันทั้งสองแถว เพื่อให้ขอบซ้ายของหัวข้อ
     เรียงตรงกันเป็นแนวตั้งทุกแถวตามดีไซน์ใหม่. */
  .tci-shared-footer-row-primary,
  .tci-shared-footer-row-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }

  .tci-shared-footer-row-secondary {
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .tci-shared-footer-row + .tci-shared-footer-row {
    margin-top: 40px;
  }

  .tci-shared-footer-group {
    display: block;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .tci-shared-footer-toggle-button {
    background: none;
    border-radius: 0;
    padding: 0 0 16px;
    cursor: default;
    pointer-events: none;
  }

  .tci-shared-footer-toggle-icon {
    display: none;
  }

  /* แต่ละคอลัมน์หลักตอนนี้แคบกว่าเดิมมาก (1 ใน 4 แทน 1 ใน 3 ที่มี fr ใหญ่กว่า
     เดิม) การแตกเป็นคอลัมน์ย่อย 2-3 คอลัมน์ซ้อนข้างในอีกชั้น (data-tci-columns)
     แบบเดิมเลยเหลือพื้นที่ต่อคอลัมน์ย่อยแคบเกินไปจนคำยาวๆ ถูกตัดกลางคำ
     (เช่น "ส่วนบุคคล", "ระดับสากล") จึงยกเลิกการแตกคอลัมน์ย่อยที่ desktop ไป
     เลย ให้ทุก <ul> ในหนึ่งกลุ่มเรียงต่อกันเป็นคอลัมน์เดียวแทน (1fr เสมอ ไม่ว่า
     data-tci-columns จะเป็นค่าไหน) กว้างเต็มคอลัมน์หลัก ข้อความมีที่พอขึ้น
     บรรทัดใหม่ตรงช่องว่างปกติแทนการตัดกลางคำ. */
  .tci-shared-footer-panel,
  .tci-shared-footer-group.tci-shared-is-open .tci-shared-footer-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    background: none;
    border-radius: 0;
    padding: 0;
    align-items: start;
  }

  .tci-shared-footer-links + .tci-shared-footer-links {
    margin-top: 0;
  }

  /* 2 คอลัมน์แทน 2 แถว: ซ้าย = ลิงก์กฎหมาย, ขวา = ลิขสิทธิ์ (ปุ่มกลับด้านบน
     เป็น position:fixed ไม่นับเป็น grid item จึงไม่กระทบเลย์เอาต์ 2 คอลัมน์
     นี้). justify-content: space-between ดันคอลัมน์แรกชิดซ้าย คอลัมน์
     สุดท้ายชิดขวาอัตโนมัติ. */
  .tci-shared-footer-bottom {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-top: 1px solid #4d4d4d;
  }

  .tci-shared-footer-copy {
    text-align: left;
    font-size: 12px;
  }

  /* จอกว้างพอแล้ว ไม่ต้องกันพื้นที่กดสูงแบบมือถือ ระยะห่างแนวตั้งกว้างขึ้นได้. */
  .tci-shared-footer-legal {
    row-gap: 8px;
  }

  .tci-shared-footer-legal a {
    min-height: 0;
  }

  /* ให้ไอคอน+เบอร์โทรอยู่ใต้ label เสมอ (column) แม้จอกว้างขึ้น แทนที่จะเรียง
     ข้างกันแบบเดิม gap เท่ากับ margin-bottom ของหัวข้อ "ติดต่อเรา" (10px)
     ให้แถวไอคอน/เบอร์โทร เริ่มระดับเดียวกับแถวไอคอนโซเชียลข้างๆ พอดี. */
  .tci-shared-footer-callcenter-label {
    font-size: 18px;
  }

  .tci-shared-footer-callcenter-number {
    font-size: 55px;
  }

  .tci-shared-footer-phone-container img {
    width: 52px;
    height: 52px;
  }

  /* ส่วนที่ 1+2 (ข้อมูลบริษัท/มาตรฐานการรับรอง) และส่วนที่ 3 (ศูนย์บริการ
     ลูกค้า/ติดต่อเรา) เรียงแนวนอนที่ desktop แทนสต็อกแนวตั้งแบบมือถือ. */
  .tci-shared-footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
  }

  .tci-shared-footer-company {
    flex: 1 1 auto;
    max-width: 800px;
  }

  .tci-shared-footer-certs {
    flex-shrink: 0;
    text-align: right;
  }

  .tci-shared-footer-cert-logos {
    justify-content: flex-end;
  }

  .tci-shared-footer-cert-logo {
    width: 141px;
    height: 61px;
    padding: 4px 10px;
  }

  .tci-shared-footer-cert-logos > img:last-child {
    margin-left: auto;
    width: 61px;
    height: 61px;
  }

  /* ตัวอักษรใหญ่ขึ้นตามขนาดจอ (ไม่ใช้ขนาดเดียวทุกจอแบบเดิม) — จุดที่เคยตั้งใจ
     ให้คงที่ (หัวข้อคอลัมน์เมนู/ลิงก์ย่อย) ยังปลอดภัยจะขยายได้แล้ว เพราะคอลัมน์
     กว้างขึ้นมากหลังยกเลิกการแตกคอลัมน์ย่อยไปก่อนหน้านี้ (ดูคอมเมนต์จุดนั้น). */
  .tci-shared-footer-company-name {
    font-size: 20px;
  }

  .tci-shared-footer-company-detail {
    font-size: 15px;
  }

  .tci-shared-footer-certs-title {
    font-size: 20px;
    /* ชิดซ้ายของกล่อง แม้ .tci-shared-footer-certs จะ text-align: right */
    text-align: left;
  }

  .tci-shared-footer-cert-logos .tci-shared-footer-iso-badge {
    width: auto;
    height: 61px;
    padding: 0;
    font-size: 40px;
  }

  .tci-shared-footer-social-title {
    font-size: 16px;
  }

  .tci-shared-footer-group-title {
    font-size: 17px;
  }

  .tci-shared-footer-links a {
    font-size: 15px;
  }

  .tci-shared-footer-legal {
    font-size: 12px;
  }

  /* align-items: flex-start (แทน center) ให้แถวไอคอน/เบอร์โทรกับแถวไอคอน
     โซเชียลเริ่มที่ระดับเดียวกัน. */
  .tci-shared-footer-contact-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
}

/* footer ขนาดจอ iPad (768-1024): ผู้ใช้ขอให้ยังพับ/กางแบบ accordion เหมือน
   มือถือ แทนที่จะกางเมนูค้างทั้งหมดแบบ desktop ทั่วไป — override บล็อก
   min-width:768px ด้านบนกลับไปเป็นค่า mobile เฉพาะส่วนโครงสร้าง accordion
   (ไม่แตะ header/topbar/contact ที่อยู่ในบล็อกเดียวกัน เพราะไม่ได้ขอ)
   ต้องอัปเดต DESKTOP_QUERY ใน tci-components.js เป็น 1025px คู่กันด้วย
   ไม่งั้นปุ่มพับ/กางจะไม่ทำงาน (JS จะคิดว่าเป็น desktop ตั้งแต่ 768px). */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .tci-shared-footer-nav {
    /* เว้นระยะจากส่วนบน (ศูนย์บริการลูกค้า/โซเชียล) ก่อนเริ่ม accordion */
    padding-top: 24px;
    border-top: none;
  }

  .tci-shared-footer-row-primary,
  .tci-shared-footer-row-secondary {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .tci-shared-footer-row-secondary {
    padding-top: 0;
    border-top: none;
  }

  .tci-shared-footer-row + .tci-shared-footer-row {
    margin-top: 10px;
  }

  .tci-shared-footer-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    border-radius: 0;
    padding: 0;
  }

  .tci-shared-footer-toggle-button {
    background: var(--tci-footer-card);
    border-radius: 8px;
    padding: 15px 16px;
    cursor: pointer;
    pointer-events: auto;
  }

  .tci-shared-footer-toggle-icon {
    display: block;
  }

  .tci-shared-footer-panel,
  .tci-shared-footer-group:not(.tci-shared-is-open) .tci-shared-footer-panel {
    display: none;
    background: var(--tci-footer-card);
    border-radius: 8px;
    padding: 18px 16px;
    grid-template-columns: none;
  }

  .tci-shared-footer-group.tci-shared-is-open .tci-shared-footer-panel {
    display: block;
  }

  .tci-shared-footer-links + .tci-shared-footer-links {
    margin-top: 12px;
  }
}

/* เมนู desktop (dropdown แนวนอน) เริ่มที่ 1025px ให้ตรงกับ hamburger block
   ด้านบน — iPad Pro 12.9" แนวตั้ง (1024px) จะได้ใช้ hamburger เหมือน iPad
   รุ่นอื่นแทนที่จะโดนเมนู desktop แคบๆ ผิดที่. */
@media (min-width: 1025px) {
  .tci-shared-footer {
    --tci-footer-pad-x: 60px;
    padding-inline: var(--tci-footer-pad-x);
  }

  /* ระยะขอบซ้าย-ขวา header desktop แคบกว่า footer (60px) โดยตั้งใจ ให้โลโก้
     ชิดซ้ายและปุ่มเช็กกรมธรรม์ชิดขวามากขึ้น (มือถือ 12px, 768+ 16px). */
  .tci-shared-header {
    padding-inline: 24px;
  }

  .tci-shared-contact-text br {
    display: none;
  }

  .tci-shared-contact-link {
    display: inline-block;
    margin-top: 16px;
  }
}

/* เมนู desktop (dropdown แนวนอน) ของ header เริ่มที่ 1280px (ต่ำกว่านั้นใช้
   hamburger — ดูบล็อก max-width:1279.98px). */
@media (min-width: 1280px) {
  /* จอ desktop แคบ (1280-1479): เมนู 7 หมวดยาวเกินจะพอดีถ้าใช้ระยะห่าง/
     ตัวอักษรขนาดเดียวกับจอกว้าง จึงย่อไว้ก่อน แล้วขยายกลับที่ >=1480px. */
  .tci-shared-header {
    height: 64px;
  }

  /* ขนาดโลโก้ desktop วัดจากเว็บหลัก (298x42) — ตั้งแค่ height แล้วปล่อย width:auto
     ตามสัดส่วนจริงของไฟล์ SVG เรา (160:22) กัน "บีบภาพ" ผิดสัดส่วน
     ผลจริงจะกว้าง ~305px ไม่ใช่ 298px เป๊ะ เพราะไฟล์โลโก้คนละไฟล์กับเว็บหลัก
     (โหลดไฟล์จากเว็บหลักมาเทียบไม่ได้ในเซสชันนี้). */
  /* จอ 1024-1279 แคบกว่า desktop ทั่วไปที่วัดค่ามา (298x42) ถ้าใช้เต็ม 42px
     เมนู 7 หมวดจะไม่พอที่และขึ้นบรรทัดใหม่ (คำนวณแล้วขาดพื้นที่) จึงย่อโลโก้ลง
     ตามสัดส่วนไว้ก่อนชั่วคราว แล้วขยายเต็ม 42px ที่ >=1280px แทน — ถ้ายืนยันว่า
     ต้องการ 42px แม้ที่ 1024px เป๊ะๆ บอกได้ จะลดขนาด/ระยะห่างเมนูลงอีกแทน. */
  .tci-shared-logo {
    width: auto;
    height: 30px;
  }

  .tci-shared-nav {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .tci-shared-nav-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--tci-dark);
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
  }

  .tci-shared-nav-link:hover {
    color: var(--tci-orange);
    border-bottom-color: var(--tci-orange);
  }

  /* ลูกศรขวาไว้เฉพาะแผงมือถือ (แถวสไตล์ footer); desktop โชว์เป็นข้อความเปล่า
     เหมือนหัวข้อ toggle อื่นๆ ในแถวเดียวกัน. */
  .tci-shared-nav-link .tci-shared-icon-arrow {
    display: none;
  }

  .tci-shared-menu-toggle-button {
    display: none;
  }

  /* เมนูย่อย: กดเปิด/ปิดแทน hover ล้วน เพื่อให้ใช้งานได้ดีทั้งเมาส์และคีย์บอร์ด. */
  .tci-shared-nav-item {
    position: relative;
  }

  .tci-shared-nav-toggle {
    width: auto;
    font-size: 14px;
    font-weight: 400;
    color: var(--tci-dark);
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
  }

  .tci-shared-nav-toggle:hover,
  .tci-shared-nav-item.tci-shared-is-open .tci-shared-nav-toggle {
    color: var(--tci-orange);
    border-bottom-color: var(--tci-orange);
  }

  .tci-shared-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    /* ปุ่ม 3 อันแรกชิดซ้าย (แผงกางไปทางขวา), 3 อันหลังชิดขวา (แผงกางไปทางซ้าย)
       กันแผงล้นขอบจอ — ใช้ :nth-of-type เพราะ .tci-shared-nav-item ทุกอันเป็น
       <div> เหมือนกัน นับตำแหน่งได้ตรงโดยไม่สนใจ .tci-shared-nav-link (เป็น
       <a>, คนละ tag) ที่แทรกอยู่ระหว่างกลาง จึงไม่ต้องเพิ่ม class ใหม่. */
    left: 0;
    margin-top: 8px;
    min-width: 300px;
    max-width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--tci-border);
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    padding: 12px;
  }

  .tci-shared-nav-item:nth-of-type(n+4) .tci-shared-nav-dropdown {
    left: auto;
    right: 0;
  }

  .tci-shared-nav-item.tci-shared-is-open .tci-shared-nav-dropdown {
    display: block;
  }

  .tci-shared-nav-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tci-shared-nav-dropdown-list a {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tci-dark);
    overflow-wrap: break-word;
  }

  .tci-shared-nav-subtoggle {
    font-size: 15px;
  }

  .tci-shared-nav-dropdown-list a:hover {
    background: var(--tci-orange-light);
    color: var(--tci-orange);
  }
}

@media (min-width: 1024px) {
  :root {
    --tci-title-size: 60px;
    --tci-subtitle-size: 40px;
    --tci-intro-title-size: 80px;
    --tci-title-subtitle-gap: 16px;
    --tci-section-gap: var(--tci-section-gap-desktop);
  }
}

.tci-shared-contact-group {
  padding-block: var(--tci-section-padding);
  gap: 32px;
}
.tci-shared-contact-block,
.tci-shared-contact-block:first-of-type { padding-block: 0; min-width: 0; }
.tci-shared-contact-text { font-size: 16px; line-height: 1.6; }
.tci-shared-contact-title { font-size: 32px; line-height: 1.25; margin-bottom: 12px; }
.tci-shared-contact-icon { object-fit: contain; }
.tci-shared-footer { margin-top: 0; }
.tci-shared-footer-group-title { line-height: 1.6; }
/* ลิงก์ย่อยในเมนู footer: เทาอ่อน 14px คงที่ทุกขนาดจอ hover เป็นสีส้มแบรนด์
   ตามที่ขอเป๊ะ (#F26F21 — ใกล้เคียง var(--tci-orange) มากแต่ไม่ตรงกันเป๊ะ
   #F26E23 จึงใส่ค่าตรงๆ ตามที่ขอ ไม่ใช้ตัวแปรเดิม). overflow-wrap: anywhere
   เดิม (มีมาก่อนงานนี้) บังคับตัดขึ้นบรรทัดใหม่ "ตรงไหนก็ได้" แม้จะมีจุดขึ้น
   บรรทัดใหม่ปกติ (ช่องว่าง/ขอบเขตคำภาษาไทย) ที่ดีกว่าอยู่แล้ว พอคอลัมน์แคบลง
   จากการลดคอลัมน์ย่อยด้านบน คำยาวๆ เลยถูกตัดกลางคำ เปลี่ยนเป็น break-word
   แทน (ตัดกลางคำเฉพาะตอนคำเดียวยาวเกินทั้งบรรทัดจริงๆ เท่านั้น). */
.tci-shared-footer-links a { line-height: 1.7; overflow-wrap: break-word; }
@media (min-width: 1024px) {
  .tci-shared-contact-text br { display: initial; }
}

@media (max-width: 767.98px) {
  .tci-shared-contact-title { font-size: 28px; }
  .tci-shared-contact-text { font-size: 12px; }
  .tci-shared-footer-copy { font-size: 11px; }
}

/* Web typography: ใช้ขนาดกลาง 5 ประเภท. */
@media (min-width: 1024px) {
  .tci-shared-contact-title {
    font-size: var(--tci-subtitle-size);
  }
  .tci-shared-topbar,
  .tci-shared-contact-text,
  .tci-shared-contact-link,
  .tci-shared-scroll-top-button {
    font-size: var(--tci-body-size);
  }
  .tci-shared-footer-copy {
    font-size: 12px;
  }
}

/* จอกว้างขึ้น (>=1480px) มีที่ว่างพอ ขยายโลโก้ + ระยะห่าง/ตัวอักษรเมนูให้ดูสบายตาขึ้น
   (ขนาดนี้ต้องใช้จอ ~1465px ขึ้นไป — วัดจริง). */
@media (min-width: 1480px) {
  .tci-shared-header {
    height: 72px;
  }

  /* ขนาดเต็มตามที่วัดจากเว็บหลัก (desktop 298x42) — ตั้งแค่ height ให้ width:auto
     รักษาสัดส่วนไฟล์จริง (160:22) จึงได้ ~305x42 ไม่ใช่ 298x42 เป๊ะ. */
  .tci-shared-logo {
    width: auto;
    height: 36px;
  }

  .tci-shared-nav {
    gap: 28px;
  }

  .tci-shared-nav-link,
  .tci-shared-nav-toggle {
    font-size: var(--tci-body-size);
  }

  .tci-shared-nav-dropdown {
    max-height: calc(100vh - 130px);
  }

  /* "บริการของเรา" (10 รายการ) กว้างกว่าปกติและแบ่ง 2 คอลัมน์ — ใช้ id เดิมที่มี
     อยู่แล้วในมาร์กอัป (#tci-nav-panel-3) ไม่ต้องเพิ่ม class ใหม่
     ยังไม่ใส่หัวข้อกลุ่มย่อยตามที่แจ้งไว้ รอทีมเนื้อหาอนุมัติ.
     จงใจใช้ position: fixed จัดกึ่งกลางจอแทนการอิงตำแหน่งปุ่ม เพราะ .tci-shared-nav
     เป็น flex justify-content: space-between ตำแหน่งปุ่มนี้ขยับได้มากตามความกว้าง
     จอ ถ้าอิงปุ่มแผง 640px จะเสี่ยงล้นขอบขวาอีกที่จอกว้างมาก ๆ. */
  #tci-nav-panel-3.tci-shared-nav-dropdown {
    position: fixed;
    top: 80px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: min(640px, calc(100vw - 32px));
  }

  #tci-nav-panel-3 .tci-shared-nav-dropdown-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 16px;
  }
}

/* iPad mini/Air แนวตั้ง (768-1023px): แถวโลโก้มาตรฐานการรับรองขนาด desktop
   (ISO 40px + การ์ด 141x61 x2 + CAC 61 ≈ 553px) กว้างคงที่ จนบีบคอลัมน์ข้อมูล
   บริษัทเหลือ 117-164px ข้อความยาวลงเป็นคอลัมน์แคบ — ย่อแถวโลโก้เหลือ ~420px
   ให้บริษัทกว้างพอเรียงแบบเดียวกับ iPad Pro (1024px ขึ้นไปใช้ขนาดเต็มเหมือนเดิม). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tci-shared-footer-cert-logo {
    width: 110px;
    height: 48px;
    padding: 4px 8px;
  }

  .tci-shared-footer-cert-logos .tci-shared-footer-iso-badge {
    width: auto;
    height: 48px;
    padding: 0;
    font-size: 30px;
  }

  .tci-shared-footer-cert-logos > img:last-child {
    width: 48px;
    height: 48px;
    padding: 0;
  }

  .tci-shared-footer-top {
    gap: 24px;
  }

  /* ตัวอักษรย่อตามแถวโลโก้ (desktop: ชื่อบริษัท 20 / รายละเอียด 15 /
     หัวข้อ 20 / 1519 38px) ให้สัดส่วนสมดุลและข้อความบริษัทขึ้นบรรทัดน้อยลง */
  .tci-shared-footer-company-name {
    font-size: 18px;
  }

  .tci-shared-footer-company-detail {
    font-size: 13px;
  }

  .tci-shared-footer-certs-title {
    font-size: 18px;
  }

  .tci-shared-footer-callcenter-label {
    font-size: 16px;
  }

  .tci-shared-footer-callcenter-number {
    font-size: 32px;
  }

  .tci-shared-footer-phone-container img {
    width: 44px;
    height: 44px;
  }

  .tci-shared-footer-social-title {
    font-size: 15px;
  }

  /* แถว 1519 เตี้ยลงตามตัวอักษร/ไอคอนที่ย่อ → ลด padding บนของไอคอนโซเชียล
     (desktop 26px) ให้ยังอยู่แนวกึ่งกลางเดียวกับเบอร์ 1519 */
  .tci-shared-footer-social {
    padding-top: 8px;
  }
}

/* iPad ทุกรุ่น ทั้งแนวตั้ง/แนวนอน (768-1366px): 2 คอลัมน์ (ลิขสิทธิ์ซ้าย/ลิงก์
   กฎหมายขวา) คอลัมน์ขวาแคบเกินจนลิงก์ 4 รายการตัดบรรทัดไม่เป็นระเบียบและล้น
   ขอบจอ — เปลี่ยนเป็น 2 แถวชิดซ้าย: ลิขสิทธิ์ด้านบน (ลำดับเดิมใน HTML) ลิงก์
   กฎหมายเรียงต่อกันด้านล่าง (ปุ่มกลับด้านบนเป็น position:fixed ไม่กระทบ). */
@media (min-width: 768px) and (max-width: 1366.98px) {
  .tci-shared-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .tci-shared-footer-legal {
    column-gap: 8px;
    row-gap: 8px;
  }

  .tci-shared-footer-copy {
    text-align: left;
  }
}

/* ===== ปุ่มลัด "เช็กกรมธรรม์" ใน header =====
   2 รูปแบบ (<a> อันเดียว กดตรงไหนก็ได้):
     แคปซูล    — ขอบส้ม พื้นขาว สูง 38px: วงกลม 28px พื้นส้มอ่อน + ไอคอนคน
                 ตามด้วยข้อความ. ใช้ตั้งแต่ 360px ขึ้นไป (มือถือ + iPad + desktop
                 — ข้อความ "กรมธรรม์" สั้นพอให้ header ไม่ล้น).
     ไอคอนล้วน — วงกลม 36x36 ขอบส้ม พื้นส้มอ่อน ไอคอนคน 18px (ขนาดที่เห็น
                 เล็กลงให้มีระยะบน-ล่างใน header 54px และสมดุลกับปุ่ม ☰
                 แต่พื้นที่กดยังขยายเป็น 44px ด้วย ::after โปร่งใส).
                 ใช้เฉพาะจอแคบมาก <360px.
   ข้อความซ่อนแบบ visually-hidden (โปรแกรมอ่านหน้าจอยังอ่านได้) + aria-label.
   มือถือ/iPad: อยู่ระหว่างโลโก้กับปุ่มเมนู ☰ (margin-left:auto + order),
   desktop: ต่อท้ายเมนูหลัก. สีใช้ token แบรนด์ --tci-orange / -light. */
.tci-shared-header-cta {
  order: 1;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 36px;
  height: 36px;
  margin-left: auto;
  margin-right: 12px;
  padding: 0;
  border: 1.5px solid var(--tci-orange);
  border-radius: 999px;
  background: var(--tci-orange-light);
  color: var(--tci-orange);
  font-family: var(--tci-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tci-shared-header-cta:focus-visible {
  outline: 3px solid var(--tci-orange);
  outline-offset: 3px;
}

/* ขยายพื้นที่กดให้สูงอย่างน้อย 44px (มาตรฐานจอสัมผัส) โดยไม่เพิ่มขนาดที่เห็น */
.tci-shared-header-cta::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}

/* ไอคอนล้วน: วงกลมด้านในกลืนไปกับตัวปุ่ม (ปุ่มเป็นวงกลมเอง). */
.tci-shared-header-cta-circle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tci-shared-header-cta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ไอคอน icon-ic-user มาจากฟอนต์ไอคอนของเว็บหลัก ซึ่งโปรเจกต์นี้ไม่มี —
   วาดรูปคนสำรองด้วย SVG mask (stroke 1.75, สีตาม currentColor จึงเปลี่ยนสี
   ตอน hover ได้) ให้เห็นไอคอนระหว่างพัฒนา.
   เมื่อโหลดฟอนต์ไอคอนจริงแล้ว ลบ background/mask ด้านล่างออก ไม่งั้นจะซ้อนกัน. */
.tci-shared-header-cta .icon-ic-user {
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 18px;
  font-style: normal;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tci-shared-header .tci-shared-menu-toggle-button {
  order: 2;
}

/* hover เฉพาะอุปกรณ์ที่มีเมาส์ (กันสถานะค้างหลังแตะบนมือถือ):
   ไอคอนล้วน → พื้นส้ม ไอคอนขาว. */
@media (hover: hover) {
  .tci-shared-header-cta:hover {
    background: var(--tci-orange);
    color: #ffffff;
  }
}

/* แคปซูล: ตั้งแต่ 360px ขึ้นไป (มือถือทั่วไป, iPad, desktop). จอแคบกว่า 360px
   เหลือไอคอนล้วนกันปุ่มดันโลโก้/ปุ่มเมนูล้นจอ. */
@media (min-width: 360px) {
  .tci-shared-header-cta {
    width: auto;
    height: 38px;
    padding: 0 16px 0 5px;
    background: #ffffff;
  }

  .tci-shared-header-cta-circle {
    width: 28px;
    height: 28px;
    background: var(--tci-orange-light);
    color: var(--tci-orange);
  }

  .tci-shared-header-cta .icon-ic-user {
    width: 17px;
    height: 17px;
  }

  .tci-shared-header-cta-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* hover แคปซูล: พื้นส้ม ข้อความขาว วงกลมพื้นขาว ไอคอนส้ม. */
@media (hover: hover) and (min-width: 360px) {
  .tci-shared-header-cta:hover .tci-shared-header-cta-circle {
    background: #ffffff;
    color: var(--tci-orange);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tci-shared-header-cta,
  .tci-shared-header-cta-circle {
    transition: none;
  }
}

@media (min-width: 1280px) {
  .tci-shared-header-cta {
    margin-left: 14px;
    margin-right: 0;
  }
}

@media (min-width: 1480px) {
  .tci-shared-header-cta {
    margin-left: 28px;
  }
}

@media (min-width: 1600px) {
  .tci-shared-header-cta {
    font-size: var(--tci-body-size);
  }
}

/* มือถือ (<768px): ย่อโลโก้และปุ่มกรมธรรม์ให้สมดุลกับปุ่มแฮมเบอร์เกอร์
   (เส้น 20px) — แคปซูลสูง 32px, วงกลม 24px, ไอคอน 14px, ตัวอักษร 13px.
   พื้นที่กดยังได้ ~40px จาก ::after ที่ยื่นรอบปุ่ม. */
@media (max-width: 767.98px) {
  .tci-shared-logo {
    width: 120px;
    height: 17px;
  }

  .tci-shared-header-cta {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    font-size: 13px;
    gap: 6px;
  }

  .tci-shared-header-cta .icon-ic-user {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 360px) and (max-width: 767.98px) {
  .tci-shared-header-cta {
    width: auto;
    height: 32px;
    padding: 0 12px 0 3px;
  }

  .tci-shared-header-cta-circle {
    width: 24px;
    height: 24px;
  }

  .tci-shared-header-cta .icon-ic-user {
    width: 14px;
    height: 14px;
  }
}