/* โหลด CSS ของ shared หลังไฟล์นี้ เพื่อให้กฎ component มีผลหลัง page reset. */

/* Typography: ใช้ font และ type tokens จาก shared/tci-shared.css. */

.tci-e40211-title {
  padding: 0;
  margin: 0;
  color: #414141;
  font-family: var(--tci-font-heading);
  font-size: var(--tci-title-size);
  font-style: normal;
  font-weight: var(--tci-title-weight);
  line-height: var(--tci-title-line-height);
  letter-spacing: 0;
  text-align: center;
}

.tci-e40211-subtitle {
  padding: 0;
  margin: 0;
  color: #414141;
  font-family: var(--tci-font-heading);
  font-size: var(--tci-subtitle-size);
  font-style: normal;
  font-weight: var(--tci-subtitle-weight);
  line-height: var(--tci-subtitle-line-height);
  letter-spacing: 0;
  text-align: center;
}

.tci-e40211-content {
  margin: 0;
  color: #414141;
  font-family: var(--tci-font-body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

.tci-e40211-small {
  margin: 0;
  color: #414141;
  font-family: var(--tci-font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  text-align: center;
}

/* Reset เฉพาะเนื้อหาภายใน page wrapper. */

.tci-e40211-page,
.tci-e40211-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

.tci-e40211-page :where(ul) {
  list-style: none;
}

.tci-e40211-page {
  max-width: none;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--tci-font-body);
  color: #414141;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* header ติดด้านบนตอนเลื่อน (position: sticky ใน tci-shared.css) ใช้ไม่ได้ถ้า wrapper
   เป็น scroll container (overflow hidden/auto) จึงใช้ clip แทน: ยังตัดส่วนล้นแนวนอน
   เหมือนเดิมแต่ไม่สร้าง scroll container. เบราว์เซอร์เก่าที่ไม่รู้จัก clip ใช้ค่าเดิมด้านบน */
@supports (overflow: clip) {
  .tci-e40211-page {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* แบ่งระยะ section เป็น padding ครึ่งหนึ่งต่อด้าน; main-banner ไม่มี padding. */
.tci-e40211-page > section { margin-block: 0; }
.tci-e40211-page > .tci-e40211-main-banner { padding-block: 0; }
.tci-e40211-page > .tci-e40211-services,
.tci-e40211-page > .tci-e40211-section,
.tci-e40211-page > .tci-e40211-special-rights {
  padding-block: var(--tci-section-padding);
}

/* ปุ่มส้ม (section-2) กับการ์ดบริการลูกค้า (section-4) ให้ชิดกันเหมือนอยู่
   section เดียวกัน (ตัดช่องว่างระหว่างสองฝั่งที่ชนกันออก เหลือแค่ระยะจาก
   section อื่นด้านนอกตามปกติ). */
.tci-e40211-page > .tci-e40211-services {
  padding-block-end: 0;
}

.tci-e40211-page > .tci-e40211-customer-services-section {
  padding-block-start: 0;
}

.tci-e40211-main-banner {
  width: 100%;
}

.tci-e40211-main-banner-image {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 609;
  object-fit: cover;
  height: auto;
}

.tci-e40211-services {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.tci-e40211-intro {
  text-align: center;
  padding-inline: 16px 16px;
}

.tci-e40211-intro p {
  margin-top: var(--tci-title-subtitle-gap);
}

.tci-e40211-intro .tci-e40211-title {
  font-size: var(--tci-intro-title-size);
}

.tci-e40211-service-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: 16px 16px;
}

.tci-e40211-service-link {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 16px;
  min-height: 88px;
  min-width: 0;
  background: var(--tci-orange);
  border-radius: 999px;
  padding: 12px 16px 12px 8px;
  color: #fff;
  box-shadow: 0 0 20px rgba(242, 110, 35, 0.3);
}

/* ไฟล์ icon-home-online-insurance.svg / -accident-claim.svg / -service-center.svg
   ปัจจุบัน (ยังไม่ถูกแทนที่ด้วยไฟล์ใหม่) เป็นภาพ raster สี่เหลี่ยม 72x72 ที่มี
   วงกลมขาว + ไอคอนวาดรวมมาในไฟล์เต็มขอบอยู่แล้ว (มี <rect rx="36"> ครอบเต็มภาพ)
   จึงไม่ต้องเพิ่ม background/padding ผ่าน CSS — ถ้าเพิ่มจะยิ่งบีบให้วงกลมที่มีอยู่แล้ว
   หดเล็กลงและดูจางลง (นี่คือสาเหตุที่ "ไอคอนเล็กและจาง" หลังรอบก่อน) ใช้ object-fit:
   cover ให้ภาพเต็มกรอบเหมือนไฟล์ตั้งใจไว้ ถ้าเปลี่ยนเป็นไฟล์ใหม่แบบลายเส้นโปร่งใส
   ในอนาคตค่อยกลับมาเพิ่ม background + padding อีกครั้ง. */
.tci-e40211-service-icon {
  display: block;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.tci-e40211-service-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.4;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tci-e40211-service-text strong {
  font-family: var(--tci-font-heading);
  font-size: 28px;
  font-weight: 300;
  color: #ffffff;
}

.tci-e40211-service-text small {
  font-size: 14px;
  opacity: 0.9;
  color: #ffffff;

}

.tci-e40211-service-arrow {
  --tci-icon-size: 28px;
  flex-shrink: 0;
}

.tci-e40211-quick-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 12px 16px 0;
}

/* แคปซูลเดียวกับ .tci-e40211-service-link (ปุ่มส้ม 3 ปุ่ม) ต่างแค่ชุดสี:
   พื้นขาว + ขอบส้ม แทนพื้นส้มเต็ม เพราะการ์ดนี้เป็นบริการรอง ไม่ใช่ CTA หลัก. */
.tci-e40211-quick-link-item {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 16px;
  min-height: 88px;
  min-width: 0;
  background: #ffffff;
  border: 1.5px solid #f26f21;
  border-radius: 999px;
  padding: 12px 16px 12px 8px;
  color: #222222;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tci-e40211-quick-link-item:hover {
  background: #fff3ea;
  border-color: #f26f21;
  /* คงสีเดิม — กัน a:hover ของ Bootstrap บนเว็บจริง (สีน้ำเงิน #0056b3) ทับ */
  color: #222222;
}

/* คงสีเดิมตอน hover — กัน a:hover { color: #0056b3 } ของ Bootstrap บนเว็บจริง
   (specificity 0,1,1 ชนะ class ของลิงก์ 0,1,0 แต่แพ้ .class:hover 0,2,0). */
.tci-e40211-service-link:hover {
  color: #fff;
}

.tci-e40211-news-details-link:hover {
  color: var(--tci-orange);
}

.tci-e40211-quick-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: #fff3ea;
}

.tci-e40211-quick-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ขนาด/รูปแบบ font เดียวกับ .tci-e40211-service-text strong (หัวข้อในปุ่มส้ม)
   ตัวนี้เป็นบรรทัดเดียว (ไม่มี small แบบปุ่มส้ม) จึงจับคู่กับ strong เท่านั้น. */
.tci-e40211-quick-text {
  flex: 1;
  min-width: 0;
  font-family: var(--tci-font-heading);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.4;
}

.tci-e40211-quick-arrow {
  --tci-icon-size: 28px;
  flex-shrink: 0;
  background: #fff3ea;
  color: #f26f21;
}

/* หมวดประกัน: สไตล์แถวและไอคอนอยู่ใน shared/tci-shared-category-row.css.
   กล่องเป็นสี่เหลี่ยมจัตุรัสตามความกว้างคอลัมน์ (desktop 6 คอลัมน์แถวเดียว) ไอคอน desktop 72px. */
.tci-e40211-category-scroll-wrap {
  --tci-category-icon-size: 72px;
  padding-inline: 16px 16px;
  margin-top: 24px;
}

.tci-e40211-page .tci-shared-category-link {
  justify-content: center;
}

.tci-e40211-category-label {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .tci-e40211-category-mobile-break {
    display: none;
  }
}

.tci-e40211-section {
  padding-inline: 0 0;
}

.tci-e40211-section-gray {
  background: var(--tci-section-bg);
}

.tci-e40211-section-gray-products {
  background: #fcfcfc;
}

/* ตัด padding ล่างออก (ต้อง prefix .tci-e40211-page > ให้ specificity เท่ากับ
   กฎ padding-block ทั่วไปที่ line ~97 ถึงจะ override ได้ ไม่งั้นแพ้แม้จะมาทีหลัง). */
.tci-e40211-page > .tci-e40211-section-gray-products {
  padding-block-end: 0;
}

.tci-e40211-section-gray-whyus {
  background: #f8f8f8;
}

.tci-e40211-section-gray-news {
  background: #fcfcfc;
}

.tci-e40211-section-title {
  margin-inline: 16px;
  padding: 0;
}

.tci-e40211-section-subtitle {
  margin-top: var(--tci-title-subtitle-gap);
  margin-inline: 16px;
  padding: 0;
}

.tci-e40211-text-orange {
  color: var(--tci-orange);
}

@media (min-width: 1024px) {
  .tci-e40211-text-orange {
    font-size: 72px;
  }

  /* h2 ด้วย — สโคปเฉพาะหัวข้อ 2 sections ที่มี span สีส้มอยู่ (Why Us /
     Awards) เพราะ .tci-e40211-section-title ใช้ร่วมกับ h2 อีก 5 อันในหน้านี้
     (เลือกแบบประกัน, ประกันออนไลน์ยอดนิยม, ข่าวสาร, ธรรมาภิบาล ฯลฯ) ถ้าแก้
     ตรงๆ ทั้ง class จะทำให้หัวข้ออื่นที่ไม่เกี่ยวข้องใหญ่ขึ้นเป็น 72px ไปด้วย —
     ถ้าจริงๆ ต้องการทุก h2 section-title บอกได้เลย จะเปลี่ยนมาแก้ทั้ง class แทน. */
  #home-section-8 .tci-e40211-section-title,
  #home-section-9 .tci-e40211-section-title {
    font-size: 72px;
  }

  /* h2 "คุ้มครองอย่างยั่งยืนด้วยการกำกับดูแลที่ดี" (section Governance) —
     สโคปเฉพาะ #home-section-11 เหตุผลเดียวกับด้านบน (.tci-e40211-section-title
     ใช้ร่วมกับ h2 อื่นในหน้านี้) และใส่ในกลุ่ม desktop เดียวกันตามที่ผู้ใช้ยืนยัน
     ไว้กับหัวข้อ Why Us/Awards ก่อนหน้า — ถ้าต้องการให้ใหญ่ขึ้นบนมือถือด้วย
     บอกได้เลย. */
  #home-section-11 .tci-e40211-section-title {
    font-size: 70px;
  }
}

/* แถวเลื่อนใช้ tci-shared-scroll-row; กำหนด gap และ padding ที่หน้า. */
.tci-e40211-product-scroll,
.tci-e40211-award-scroll,
.tci-e40211-news-scroll {
  gap: var(--tci-card-gap);
  padding: 24px 0;
  margin-inline: var(--tci-gutter);
}

.tci-e40211-page .tci-e40211-product-icon {
  border-radius: 0;
}

.tci-e40211-product-scroll {
  --tci-product-card-flex: 0 0 min(340px, calc(100vw - 56px));
  --tci-product-card-min: 300px;
  --tci-product-card-max: none;
  scroll-padding-inline: 0;
}

.tci-e40211-why-scroll {
  display: flex;
  justify-content: center;
  padding: 20px 16px;
}

.tci-e40211-card-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 4px auto 12px;
}

.tci-e40211-card-pagination[hidden] { display: none; }

.tci-e40211-card-previous-button,
.tci-e40211-card-next-button {
  display: none;
  width: 44px;
  height: 44px;
  color: var(--tci-orange);
  font-size: 20px;
}

.tci-e40211-card-pagination button:disabled { opacity: 0.35; cursor: default; }
.tci-e40211-card-pagination button:focus-visible { outline: 2px solid var(--tci-orange); outline-offset: 2px; }

@media (min-width: 768px) {
  .tci-e40211-card-previous-button,
  .tci-e40211-card-next-button { display: block; }
}

.tci-e40211-pagination-pill {
  width: fit-content;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e6ebef;
  border-radius: 999px;
  padding: 4px 14px;
  color: var(--tci-orange);
}

.tci-e40211-special-rights {
  background: #ffffff;
  padding-inline: 32px 32px;
  /* ขยับแบนเนอร์ขึ้นเข้าใกล้ section ด้านบน (ลดแค่ระยะบน เหลือครึ่งหนึ่งของ
     ระยะ section ปกติ ไม่แตะระยะล่าง). */
  padding-block-start: calc(var(--tci-section-padding) / 2);
}

/* ลิงก์ครอบแบนเนอร์ไปหน้าสิทธิพิเศษ (ลิงก์เดียวกับเมนู "สิทธิพิเศษ" ใน header/footer)
   แบบเดียวกับ .tci-e40211-gov-link — เต็มความกว้างของกล่อง ตำแหน่ง/ขนาดรูปเท่าเดิม. */
.tci-e40211-special-rights-link {
  display: block;
  width: 100%;
  border-radius: 10px;
}

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

.tci-e40211-special-rights-picture {
  display: block;
  width: 100%;
}

.tci-e40211-special-rights-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

.tci-e40211-why-picture {
  display: block;
  width: 100%;
  max-width: 358px;
}

.tci-e40211-why-image {
  display: block;
  width: 100%;
  aspect-ratio: 358 / 740;
  border-radius: 10px;
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

/* การ์ด "ทำไมต้องธนชาตประกันภัย" เวอร์ชัน HTML/CSS จริง desktop เท่านั้น (แทน
   image-home-why-desktop.svg ที่เป็นรูปคนถ่ายจริงฝังใน SVG แก้ layout ด้วย CSS
   ไม่ได้) ซ่อนไว้ก่อนที่ mobile ด้วย display:none แล้วเปิดเฉพาะใน
   @media(min-width:768px) ด้านล่าง mobile ไม่ถูกแตะเลย ยังใช้
   .tci-e40211-why-scroll เดิมกับ image-home-why-mobile.svg ทุกประการ. */
.tci-why-grid {
  display: none;
}

.tci-e40211-award-card {
  flex: 0 0 260px;
  min-width: 0;
  min-height: 400px;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  cursor: pointer;
}

/* ขยายรูปถ้วยรางวัลถาวรเป็น >2 เท่าของเดิม (100x133 -> 220x293, สัดส่วนเดิม
   เท่ากันเกือบเป๊ะ) การ์ดจึงต้องขยายกว้าง/สูงตามให้พอดีกับรูปใหม่ด้วย. */
.tci-e40211-award-image {
  display: block;
  width: 220px;
  height: 293px;
  border-radius: 6px;
  object-fit: contain;
  margin-bottom: 16px;
}

/* เอาเอฟเฟกต์ transform:scale() ตอน hover/active ออก (ตามที่ขอ) — ของเดิมขยาย
   การ์ดในที่เดิมด้วย transform ซึ่งไม่ดันเค้าโครงจริงๆ (transform ไม่กินพื้นที่
   เพิ่ม) แต่การ์ดที่ขยายจะภาพซ้อนทับการ์ดข้างเคียงในแถว scroll แทน ดูเหมือน
   เค้าโครงเพี้ยน เปลี่ยนเป็นคลิกเปิด modal แสดงรูปใหญ่แทน (ดู
   .tci-award-modal ท้ายไฟล์ และ home-page.js) จึงไม่ต้องมีเอฟเฟกต์ hover
   ที่นี่อีกต่อไป (เฉพาะ desktop ตั้งแต่ 768px ขึ้นไป — ดู home-page.js ที่กัน
   openModal() ไม่ให้ทำงานต่ำกว่า 768px).

   มือถือ (<768px) ไม่ต้องมี modal ตามที่ขอ — เอาเอฟเฟกต์ขยาย+นูนแบบเดิมกลับมา
   ใช้แทน scope เฉพาะช่วงความกว้างนี้เท่านั้น (ของเดิมก่อนเปลี่ยนเป็น modal
   ใช้ทุกขนาดจอ ตอนนี้จำกัดเฉพาะมือถือ). */
@media (max-width: 767.98px) {
  @media (hover: hover) {
    .tci-e40211-award-card:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(242, 111, 33, 0.15);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
  }

  @media (hover: none) {
    .tci-e40211-award-card:active {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(242, 111, 33, 0.15);
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
  }
}

.tci-e40211-award-year {
  margin-top: 8px;
}

.tci-e40211-news-tabs {
  display: flex;
  gap: 20px;
  padding: 0 16px;
  margin-top: 24px;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--tci-border);
}

.tci-e40211-news-tabs::-webkit-scrollbar {
  display: none;
}

.tci-e40211-news-tab-button {
  font-size: 16px;
  font-weight: 300;
  color: var(--tci-gray-text);
  white-space: nowrap;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  min-height: 44px;
}

/* แท็บที่เป็นลิงก์ (<a>) จัดข้อความให้อยู่ตำแหน่งเดียวกับแท็บที่เป็น <button> */
a.tci-e40211-news-tab-button {
  display: flex;
  align-items: center;
}

/* ชี้เมาส์เป็นสีส้มบอกว่ากดได้ (และกัน a:hover สีน้ำเงินของ Bootstrap บนเว็บจริง) */
a.tci-e40211-news-tab-button:hover {
  color: var(--tci-orange);
}

.tci-e40211-news-tab-button.tci-shared-is-active {
  color: var(--tci-orange);
  border-bottom-color: var(--tci-orange);
}

.tci-e40211-news-card {
  flex: 0 0 195px;
  min-width: 0;
  /* สูงตามเนื้อหาจริง (รูป 400:270 + ข้อความ + อ่านต่อ) ไม่ล็อกตายตัว — การ์ดในแถว
     เดียวกันยังสูงเท่ากันเพราะแถวเป็น flex (stretch) และ "อ่านต่อ" ชิดล่างเสมอ. */
  min-height: 0;
  scroll-snap-align: start;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #f4f4f4;
  border-radius: 12px;
  padding: 14px 16px 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tci-e40211-news-card:hover {
  transform: translateY(-4px);
  border-color: var(--tci-orange);
  box-shadow: 0 12px 24px rgba(242, 110, 35, 0.25);
}

/* รูปเต็มความกว้างการ์ด ชิดขอบบน (ยื่นทับ padding 14px ของการ์ดด้วย margin
   ติดลบ) — กว้าง/สูงกว่าเดิมและไม่มีขอบขาวล้อมรูป มุมบนโค้งตามการ์ดด้วย
   overflow:hidden ของ .tci-e40211-news-card. สัดส่วนเท่าไฟล์จริง (400x270)
   แสดงเต็มภาพไม่ครอป (รูปข่าวบางใบมีข้อความชิดขอบ เช่น "LINE THAILAND
   AWARDS 2025" ถ้าครอปจะขาด). */
.tci-e40211-news-image {
  display: block;
  width: calc(100% + 32px);
  max-width: none;
  margin: -14px -16px 0;
  aspect-ratio: 400 / 270;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  height: auto;
}

/* หัวข้อข่าว: ตัดบรรทัดให้สวย (text-wrap: pretty กันคำเดียวค้างบรรทัดท้าย เช่น
   "2569" หล่นลงมาเดี่ยวๆ) ตัดที่ขอบเขตคำภาษาไทย ไม่ตัดกลางคำ และแสดงไม่เกิน
   2 บรรทัดตามด้วย "…" ให้การ์ดทุกใบสูงสม่ำเสมอ ข้อความเต็มยังอยู่ใน alt ของรูป. */
.tci-e40211-news-card p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.tci-e40211-news-details-link {
  display: flex;
  align-items: center;
  align-self: flex-end;
  margin-top: auto;
  gap: 8px;
  color: var(--tci-orange);
  font-size: 14px;
  font-weight: 400;
}

.tci-e40211-round-arrow {
  --tci-icon-size: 26px;
}

.tci-e40211-gov-banner {
  display: flex;
  justify-content: center;
  padding: 20px 16px;
}

/* ลิงก์ครอบแบนเนอร์ไปหน้า ESG — เต็มความกว้างของกล่อง แล้วจัดรูปไว้กลาง
   (margin-inline:auto ที่รูป) ให้ตำแหน่ง/ขนาดรูปเท่าเดิมตอนยังไม่มีลิงก์. */
.tci-e40211-gov-link {
  display: block;
  width: 100%;
  border-radius: 10px;
}

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

.tci-e40211-gov-image {
  display: block;
  width: 100%;
  margin-inline: auto;
  max-width: 358px;
  height: auto;
  aspect-ratio: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* Responsive */

@media (min-width: 768px) {

  .tci-e40211-page {
    max-width: none;
  }

  .tci-e40211-page > section:not(.tci-e40211-main-banner) {
    padding-inline: max(var(--tci-gutter-lg), calc((100% - var(--tci-content-max)) / 2));
  }

  .tci-e40211-service-links,
  .tci-e40211-customer-services-section > .tci-e40211-quick-links,
  .tci-e40211-insurance-categories-section > .tci-e40211-category-scroll-wrap {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
  }

  .tci-e40211-product-scroll,
  .tci-e40211-award-scroll,
  .tci-e40211-news-scroll {
    margin-inline: 0;
  }

  /* ไฟล์ภาพใหม่สัดส่วนพอดีแล้ว ไม่ต้องครอป/บังคับสูงอีก จึงตัด aspect-ratio,
     overflow:hidden ของ .tci-e40211-main-banner และ object-fit/position ออก
     (เหลือ aspect-ratio: auto ไว้ค่าเดียว เพราะ rule มือถือฐานตั้ง 390/609 แนวตั้ง
     ไว้แบบไม่มี media query ครอบ ถ้าไม่ reset ตรงนี้จะยังไปบังคับความสูงผิดอยู่). */
  .tci-e40211-main-banner-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto;
  }

  /* Section คุมระยะขอบแล้ว จึงล้าง padding ขององค์ประกอบภายใน. */
  .tci-e40211-section-title,
  .tci-e40211-section-subtitle,
  .tci-e40211-service-links,
  .tci-e40211-category-scroll-wrap,
  .tci-e40211-product-scroll,
  .tci-e40211-award-scroll,
  .tci-e40211-news-scroll,
  .tci-e40211-why-scroll,
  .tci-e40211-news-tabs {
    padding-inline: 0;
  }

  .tci-e40211-section-title,
  .tci-e40211-section-subtitle {
    margin-inline: 0;
  }

  /* หัวข้อ "ธนชาตประกันภัย" กับคำโปรย "ดูแลครบทุกเรื่องประกัน" อยู่คนละบรรทัด
     (เดิมเรียงข้างกันแถวเดียวที่ desktop) — ใช้ระยะห่างเดียวกับมือถือ. */
  .tci-e40211-intro {
    display: block;
    padding-inline: 0 0;
  }

  .tci-e40211-quick-link-item br {
    display: none;
  }

  .tci-e40211-section-title br,
  .tci-e40211-section-subtitle br {
    display: none;
  }

  .tci-e40211-news-tabs {
    justify-content: safe center;
  }

  /* ลดขนาดลง ~27% จากเดิม 1040px (อยู่ในช่วง 25-30% ที่ขอ) aspect-ratio 2/1
     จาก base rule ยังคุมสัดส่วนอยู่ ความสูงย่อตามความกว้างโดยอัตโนมัติ ไม่บีบภาพ
     margin-inline:auto จัดกึ่งกลางเมื่อมีที่ว่างเหลือข้างๆ. */
  .tci-e40211-special-rights-image {
    max-width: 760px;
    margin-inline: auto;
  }

  .tci-e40211-gov-image {
    max-width: 1040px;
  }

  .tci-e40211-why-picture {
    max-width: var(--tci-content-max);
  }

  .tci-e40211-why-image {
    aspect-ratio: 1144 / 140;
  }

  /* สลับจากภาพเดี่ยวเป็นการ์ดจริง เฉพาะ desktop (>=768px) ตามที่ขอ. */
  .tci-e40211-why-scroll {
    display: none;
  }

  .tci-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin-inline: auto;
  }

  /* รูปอย่างเดียว ไม่มีข้อความ/gradient/กล่องใดๆ ทับ — ลบของเก่าที่เคยเพิ่มไว้
     (scrim มืด, .tci-why-card__content, hover shadow) ออกทั้งหมดตามที่ขอ. */
  .tci-why-card {
    height: 230px;
    border-radius: 16px;
    overflow: hidden;
  }

  /* ไฟล์ภาพ (image-home-why-desktop-1.webp ถึง -4.webp) มีไอคอน/หัวข้อ/
     คำอธิบายฝังในรูปแล้ว ไม่ใช่ DOM element แยก จึงปรับสัดส่วนภายในไม่ได้ทาง
     CSS ปรับได้แค่กรอบแสดงผล — ทดสอบ object-position หลายค่าที่ 230px แล้ว
     20% ให้ผลดีที่สุด (เห็นไอคอน+หัวข้อ+เนื้อหา 2 บรรทัดแรกครบทุกใบ) แต่ใบ 2/4
     ที่มีคำอธิบาย 3 บรรทัดจะโดนตัดบรรทัดสุดท้าย เพราะพื้นที่ 230px ไม่พอสำหรับ
     เนื้อหาที่ยาวกว่าจริงๆ แก้ไม่ได้ครบทั้ง 100% ด้วย CSS เพียงอย่างเดียว. */
  .tci-why-card__image {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
  }
}

@media (min-width: 1024px) {

  /* ลดระยะห่างแนวตั้งระหว่าง section บนหน้านี้ให้แน่นขึ้น (ไม่แตะ token กลาง
     เพราะ --tci-section-gap-desktop ใช้ร่วมกับหน้าอื่นด้วย). */
  .tci-e40211-page {
    --tci-section-padding: 32px;
  }

  /* คง selector ของ intro เพื่อ override ขนาดหัวข้อที่มี specificity สูงกว่า. */
  .tci-e40211-title {
    font-size: var(--tci-title-size);
  }

  .tci-e40211-service-links {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    max-width: 1022px;
  }

  .tci-e40211-service-link {
    flex: 0 1 330px;
    min-height: 122px;
    gap: 12px;
    padding: 8px 16px 8px 8px;
  }

  /* desktop 72px — ไฟล์ปัจจุบันเป็น raster ที่มีวงกลมในตัวพอดี 72x72 อยู่แล้ว
     จึงไม่ต้องใส่ padding (ดูหมายเหตุที่ mobile rule ด้านบน) */
  .tci-e40211-service-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .tci-e40211-service-text strong {
    line-height: 1;
  }

  .tci-e40211-service-text small {
    line-height: 1.5;
  }

  .tci-e40211-service-title-line {
    display: block;
    white-space: nowrap;
  }

  /* การ์ดบริการลูกค้า 3 ใบ สลับจากเรียงตั้ง (มือถือ) เป็น 3 คอลัมน์แนวนอน
     ที่ breakpoint เดียวกับปุ่มส้มด้านบน (1024px) ให้ min-height/padding/ขนาด
     วงกลมไอคอนเท่ากันทุกช่วงจอ ตามที่ขอให้ "โครงสร้างเดียวกับปุ่มส้ม". */
  .tci-e40211-quick-links {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    max-width: 1022px;
  }

  .tci-e40211-quick-link-item {
    flex: 0 1 330px;
    min-height: 122px;
    gap: 12px;
    padding: 8px 16px 8px 8px;
  }

  .tci-e40211-quick-icon-circle {
    width: 72px;
    height: 72px;
    min-width: 72px;
  }

  .tci-e40211-quick-icon {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 768px) {
  .tci-e40211-product-scroll {
    --tci-product-card-flex: 0 0 calc((100% - var(--tci-card-gap)) / 2);
    --tci-product-card-min: 380px;
    scroll-padding-inline: 0;
  }
}
@media (min-width: 1024px) {
  .tci-e40211-product-scroll {
    --tci-product-card-flex: 0 0 calc((100% - 2 * var(--tci-card-gap)) / 3);
    /* ปุ่มเลื่อน (.tci-e40211-card-pagination) อ่านค่านี้ผ่าน getComputedStyle
       ใน initCardPagination() (shared/tci-components.js) ให้เลื่อนทีละ 3 ใบ
       ต่อคลิกที่ desktop แทนทีละ 1 ใบแบบเดิม (ค่า default ถ้าไม่ตั้งคือ 1
       ไม่กระทบแถว scroll อื่นที่ไม่ได้ตั้งตัวแปรนี้). */
    --tci-card-step: 3;
  }
}
@media (min-width: 1366px) {
  .tci-e40211-product-scroll { --tci-product-card-flex: 0 0 calc((100% - 3 * var(--tci-card-gap)) / 4); }
}

/* การ์ดข่าวมือถือเดิมกว้างคงที่ 195px ทำให้เหลือพื้นที่ว่างท้ายแถวเยอะเกินไป
   (trailing space ~179px) เปลี่ยนเป็นสูตร "1 ใบ + เศษ 1/3" แบบเดียวกับการ์ด
   รถยนต์หน้า Product (#product-motor-cards) แทน ใบครึ่งท้ายโผล่มาเป็นตัวชวน
   เลื่อนดูใบถัดไป scope ผ่าน #home-news-cards ไม่กระทบการ์ดอื่นที่ใช้
   .tci-e40211-news-card (ไม่มีที่อื่นใช้อยู่แล้ว แต่สโคปไว้กันเผื่อ). เพิ่ม
   @media max-width:767.98px ครอบไว้ (เดิมไม่มี ทำให้ id นี้ specificity สูง
   กว่า .tci-e40211-news-card ธรรมดาที่ desktop ใช้ เลยไปทับ 3 ใบต่อแถวของ
   desktop โดยไม่ตั้งใจ — ค่ามือถือเองไม่เปลี่ยนเลย แค่จำกัดขอบเขตให้ถูกจุด). */
@media (max-width: 767.98px) {
  /* กว้างขึ้นจาก "1 ใบ + เศษ 1/3" (~75%) เป็น "1 ใบ + เศษ 1/6" (~85%) ยังเห็น
     ขอบใบถัดไปเป็นตัวชวนเลื่อน */
  #home-news-cards .tci-e40211-news-card {
    flex: 0 0 calc((100% - 0.1667 * var(--tci-card-gap)) / 1.1667);
  }
}

/* ตั้งแต่ tablet ขึ้นไปการ์ดขยายเต็มแถวแทนความกว้างคงที่ของ mobile
   จำนวนคอลัมน์ไล่ตามขนาดจอแบบเดียวกับการ์ดผลิตภัณฑ์ */
@media (min-width: 768px) {
  .tci-e40211-news-card { flex-basis: calc((100% - 2 * var(--tci-card-gap)) / 3); }

  /* กลับไป 3 ใบต่อแถวตามที่ขอล่าสุด (เดิมเคยลดเป็น 2 ใบ) เพิ่มความสูงแทน
     เฉพาะการ์ดข่าวผ่าน #home-news-cards. */
  /* การ์ดสูงขึ้นให้สมดุลกับความกว้าง (~424px) — พื้นที่ที่เพิ่มอยู่ใต้ข้อความ
     "อ่านต่อ" ยังชิดล่าง รูปไม่ถูกครอป */
  #home-news-cards .tci-e40211-news-card {
    min-height: 460px;
  }
  /* min-height 440px จาก base rule (ตั้งไว้สำหรับรูป 2 เท่าที่ mobile) ไม่ได้ถูก
     override ที่นี่มาก่อน ทำให้การ์ด desktop (รูปเล็กกว่า 120x160) มีที่ว่างเหลือ
     ด้านล่างเยอะเกินไป ไม่สมดุลกับเนื้อหา ลดลงให้พอดีกับรูป+ข้อความจริง. */
  .tci-e40211-award-card {
    flex-basis: calc((100% - 2 * var(--tci-card-gap)) / 3);
    min-height: 300px;
    padding: 24px 16px;
  }
  .tci-e40211-award-image { width: 120px; max-width: 100%; height: 160px; }
}
@media (min-width: 1024px) {
  .tci-e40211-award-card { flex-basis: calc((100% - 3 * var(--tci-card-gap)) / 4); }
}

@media (max-width: 767.98px) {
  .tci-e40211-product-scroll {
    --tci-product-card-flex: 0 0 100%;
    width: min(340px, calc(100% - 32px));
    min-width: 300px;
    margin-inline: auto;
  }

  .tci-e40211-content { font-size: 12px; }
  .tci-e40211-small { font-size: 10px; }
  .tci-e40211-service-text small { font-size: 12px; }
  .tci-e40211-news-tab-button { font-size: 13px; }
  .tci-e40211-news-card p { font-size: 13px; }
  .tci-e40211-news-details-link { font-size: 13px; }

  /* การ์ดสูงขึ้นให้สมดุลกับความกว้าง (~85% ของจอ) — "อ่านต่อ" ชิดล่าง */
  .tci-e40211-news-card {
    min-height: 360px;
  }

  /* การ์ดบริการลูกค้า 3 ใบ มือถือเท่านั้น: กลับไปเป็นการ์ดสี่เหลี่ยมมุมมนแบบเดิม
     (ก่อนปรับเป็นแคปซูล) แค่เพิ่มขอบส้ม อยู่ใน media query นี้ล้วนๆ ไม่แตะ base
     rule หรือ block 1024px ด้านบนเลย เพื่อให้ >=768px ยังใช้ค่าจาก base rule
     เดิม (แคปซูล) เหมือนเดิมทุกจุด ไม่เปลี่ยนแปลง. */
  .tci-e40211-quick-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .tci-e40211-quick-link-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 8px;
    min-height: 44px;
    background: #ffffff;
    border: 1.5px solid #f26f21;
    border-radius: 12px;
    padding: 16px 8px;
  }

  /* เอาวงกลมพื้นส้มอ่อนออก ให้เหลือแค่ไอคอนเปล่าเหมือนการ์ดเดิม */
  .tci-e40211-quick-icon-circle {
    width: auto;
    height: auto;
    min-width: 0;
    background: none;
    border-radius: 0;
  }

  .tci-e40211-quick-icon {
    width: 44px;
    height: 44px;
  }

  /* กลับไปใช้ font แบบเดิมของการ์ดนี้ (ก่อนจับคู่กับหัวข้อ 28px ของปุ่มส้ม)
     เพราะการ์ด 3 คอลัมน์แคบเกินจะใส่ตัวอักษรขนาดหัวข้อได้พอดี */
  .tci-e40211-quick-text {
    font-family: var(--tci-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }

  .tci-e40211-quick-arrow {
    display: none;
  }
}

/* แบ่งแถวละ 2 (ดูเหตุผล breakpoint 1025px ที่ shared/tci-shared-category-row.css)
   ให้ครอบคลุมถึงขนาดจอ iPad — ไอคอน 64px ตามขนาดกล่องแบบมือถือด้วย. */
@media (max-width: 1024.98px) {
  .tci-e40211-category-scroll-wrap {
    --tci-category-icon-size: 64px;
  }
}

/* มือถือจริง (<768px) เปลี่ยนเป็น 3 คอลัมน์แบบเดียวกับหน้า Product ที่ทำไปแล้ว
   (pages/tni-product.css) — ไม่แก้ shared/tci-shared-category-row.css เพราะ
   ไฟล์นั้นใช้ร่วมกับหน้า Product ที่ scope คนละ class กัน (section wrapper
   ของ product คือ .tci-product-e51837-category-section ไม่ใช่
   .tci-e40211-insurance-categories-section ของหน้านี้) การแก้ให้หน้า Product
   เป็น 3 คอลัมน์ก่อนหน้านี้จึงไม่กระทบหน้านี้เลยเป็นเรื่องปกติ ต้องเพิ่ม override
   ของหน้านี้เองแยกต่างหาก. หน้านี้มี 6 การ์ดพอดี (2 แถว x 3) ไม่มีใบคี่เหลือ
   จึงไม่ต้องมี last-child centering เหมือนหน้า product (7 ใบ). */
@media (max-width: 767.98px) {
  .tci-e40211-category-scroll-wrap {
    --tci-category-icon-size: 50px;
  }

  .tci-e40211-category-scroll-wrap > .tci-shared-category-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* label "อุบัติเหตุส่วนบุคคล" (วัดจริง ~98px) ยาวเกิน 93px ที่ว่างในการ์ด
     (109px คอลัมน์ - padding 8x2) ที่ font 13px จึงขึ้น 2 บรรทัด ต่างจากป้ายอื่น
     ที่พอดี 1 บรรทัด — ใส่ min-height สูงพอสำหรับ icon 50px + ข้อความ 2 บรรทัด
     (14+50+4+39+14=121, ปัดขึ้นเป็น 122) ให้ทุกใบสูงเท่ากันแน่นอนตามที่ขอ แม้จะ
     ทำให้การ์ดไม่เป็นสี่เหลี่ยมจัตุรัสเป๊ะอีกต่อไป (aspect-ratio:1/1 จาก shared
     css ยังตั้งไว้ แต่ min-height นี้สูงกว่า จึงชนะ). */
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row > .tci-shared-category-link {
    padding: 14px 8px;
    gap: 4px;
    min-height: 122px;
  }

  .tci-e40211-category-scroll-wrap > .tci-shared-category-row > .tci-shared-category-link > .tci-shared-category-icon {
    display: block;
    margin-inline: auto;
  }

  /* ป้าย "แนะนำ" เดิมออกแบบมาสำหรับการ์ด ~163px (มือถือ 2 คอลัมน์เดิม) ที่การ์ด
     เล็กลงเหลือ 109px ป้ายเดิม (wrap 56px, แถบกว้าง 90px) จะใหญ่เกินสัดส่วน
     ย่อลงตามอัตราส่วนเดียวกับที่การ์ดเล็กลง (109/163 =~ 0.67). */
  .tci-e40211-category-scroll-wrap .tci-shared-category-badge-wrap {
    width: 38px;
    height: 38px;
  }

  .tci-e40211-category-scroll-wrap .tci-shared-category-badge {
    top: 7px;
    left: -14px;
    width: 62px;
    font-size: 9px;
    padding: 3px 0;
  }
}

/* หน้า HomeCorporate ซ่อนการ์ดอุบัติเหตุส่วนบุคคล + กอล์ฟ เหลือ 4 การ์ด
   (.tci-e40211-category-row-4) — grid เดิมตั้งไว้สำหรับ 6 ใบ (มือถือ 3 คอลัมน์,
   iPad 3, desktop 6) จะเหลือใบคี่/ช่องว่างท้ายแถว จึงจัดใหม่เฉพาะแถวที่มี class นี้:
   มือถือ 2x2, iPad 4 ใบแถวเดียว, desktop 4 ใบแถวเดียวกึ่งกลาง (การ์ดกว้าง 160px
   เท่าเดิมตาม max-width ใน shared css). */
.tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 {
  grid-template-columns: repeat(2, 1fr);
}

/* มือถือ 2x2: การ์ดกว้าง ~173px (จอ 390) แต่ไอคอน 50px/ป้ายแนะนำย่อส่วนตั้งไว้
   สำหรับการ์ด 3 คอลัมน์ (~109px) ดูโล่งและไอคอนเล็กเกินการ์ด — ขยายไอคอนเป็น
   72px (เท่า desktop) ตัวอักษร 15px ป้าย "แนะนำ" กลับเป็นขนาดเต็มจาก shared css
   และลดความสูงการ์ดเป็นสัดส่วน 5:4 ให้เนื้อหาเต็มการ์ดพอดีขึ้น. */
@media (max-width: 767.98px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 {
    --tci-category-icon-size: 72px;
    gap: 12px;
  }

  /* shared css ตั้ง border-radius:50% ให้ไอคอน ทำให้ภาพที่สูงเต็มกรอบ (ริบบิ้น
     มะเร็ง, ฐานบ้าน) ถูกตัดมุมเป็นวงกลม — ที่ขนาด 72px เห็นชัด จึงยกเลิก. */
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 .tci-shared-category-icon {
    border-radius: 0;
  }

  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 > .tci-shared-category-link {
    aspect-ratio: 5 / 4;
    min-height: 0;
    padding: 16px 8px;
    gap: 8px;
    font-size: 15px;
  }

  .tci-e40211-category-scroll-wrap .tci-e40211-category-row-4 .tci-shared-category-badge-wrap {
    width: 56px;
    height: 56px;
  }

  .tci-e40211-category-scroll-wrap .tci-e40211-category-row-4 .tci-shared-category-badge {
    top: 11px;
    left: -21px;
    width: 90px;
    font-size: 10px;
    padding: 4px 0;
  }
}

@media (min-width: 768px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1025px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-4 {
    grid-template-columns: repeat(4, 160px);
    justify-content: center;
  }
}

/* 5 การ์ด (เปิดกอล์ฟเพิ่ม: .tci-e40211-category-row-5 ต่อท้าย row-4 ใช้สไตล์การ์ดเดิมของ row-4
   ทุกอย่าง เปลี่ยนแค่จำนวนคอลัมน์): มือถือ 2 คอลัมน์ ใบสุดท้าย (ใบที่ 5) อยู่กึ่งกลางแถว,
   iPad 5 ใบแถวเดียว, desktop 5 ใบแถวเดียวกึ่งกลาง (กว้าง 160px เท่าเดิม). */
@media (max-width: 767.98px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-5 > .tci-shared-category-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }
}

@media (min-width: 768px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1025px) {
  .tci-e40211-category-scroll-wrap > .tci-shared-category-row.tci-e40211-category-row-5 {
    grid-template-columns: repeat(5, 160px);
  }
}

/* Web typography: ใช้ขนาดกลาง 5 ประเภท. */
@media (min-width: 1024px) {
  .tci-e40211-intro .tci-e40211-title {
    font-size: var(--tci-intro-title-size);
  }
  .tci-e40211-title {
    font-size: var(--tci-title-size);
  }
  .tci-e40211-subtitle,
  .tci-e40211-service-text strong,
  .tci-e40211-quick-text {
    font-size: var(--tci-subtitle-size);
    line-height: 1;
  }
  .tci-e40211-content,
  .tci-e40211-service-text small,
  .tci-e40211-news-tab-button,
  .tci-e40211-news-card p,
  .tci-e40211-news-details-link {
    font-size: var(--tci-body-size);
  }
  .tci-e40211-small {
    font-size: var(--tci-small-size);
  }
}


/* กล่องของ title/subtitle สูงกว่าตัวหนังสือจริงมาก (half-leading ของ line-height
   บวกกับ ascent/descent ที่ฟอนต์ไทยกันไว้ให้วรรณยุกต์) ทำให้ค่า margin ที่เขียน
   ไม่ตรงกับระยะที่ตาเห็น text-box จึงตัดส่วนนั้นออกให้กล่องหุ้มตัวหนังสือพอดี
   เบราว์เซอร์ที่ยังไม่รองรับจะข้ามกฎนี้ไปและได้ระยะแบบเดิม */
.tci-e40211-title,
.tci-e40211-subtitle {
  text-box: trim-both text text;
}

/* iPad Air/Mini (768-1023.98px แคบกว่า iPad Pro 1024px): การ์ด "ทำไมต้อง
   ธนชาตประกันภัย" 2 คอลัมน์ทำให้แต่ละคอลัมน์แคบ (~356px) แคบกว่า 460px
   (จุดที่ height:230px คงที่ ผสมกับสัดส่วนภาพเนทีฟ 358x179 เริ่มบีบให้
   object-fit:cover ครอปจาก "ซ้าย-ขวา" แทน "บน-ล่าง" — ไอคอนกับต้นข้อความ
   หัวข้อฝั่งซ้ายเลยโดนตัดหายไป ไม่ใช่ "เต็ม" เหมือน iPad Pro ที่คอลัมน์กว้าง
   พอ (~656px) ยังครอปบน-ล่างตามปกติ) แก้โดยสลับเป็น 1 คอลัมน์เฉพาะช่วงความ
   กว้างนี้ ให้คอลัมน์กว้างพอที่ cover จะกลับไปครอปบน-ล่างเหมือน iPad Pro/
   desktop แทน. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tci-why-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Award Modal =====
   เปิดตอนคลิกการ์ดรางวัล (.tci-e40211-award-card) แสดงรูปขนาดใหญ่ "ตรงตำแหน่ง
   การ์ดที่เลือก" (ไม่ลอยกลางจอ) แบบขยายออกจากตำแหน่งเดิม ปิดด้วยปุ่ม×/คลิก
   backdrop/Escape — ดู home-page.js สำหรับตำแหน่ง/แอนิเมชัน (ตั้ง left/top
   ให้ .tci-award-modal__content ตรงกึ่งกลางการ์ดที่คลิกโดยตรง .tci-award-modal
   เองเลยไม่ต้องจัดกลางด้วย flex อีกต่อไป มีไว้แค่คลุม backdrop เต็มจอ).

   เดิมลองใช้เมาส์วาง (hover) เปิด/ปิด แต่พอผสมกับแอนิเมชันขยายออกจากตำแหน่ง
   การ์ด (เนื้อหา modal ต้องเริ่มทับตำแหน่งเดียวกับการ์ดเป๊ะ) กลายเป็นว่า
   __content (ซึ่งต้องคลิกปุ่มปิดได้ จึงเปิด pointer-events ไว้) ไปบังการ์ดตรง
   จุดเริ่มพอดี ทำให้ mouseleave/mouseenter การ์ดสลับกันถี่ยิบจนกระพริบซ้ำอีก
   ต่อให้แก้ backdrop ไปแล้วก็ตาม — คลิกเปิด/ปิดไม่มีปัญหานี้เพราะเป็น
   discrete event ไม่ใช่การไล่ตรวจ hover ต่อเนื่อง จึงเปลี่ยนมาใช้แทน. */
.tci-award-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.tci-award-modal[hidden] {
  display: none;
}

/* fade backdrop เข้า/ออกด้วย opacity (home-page.js เป็นคนเพิ่ม/ลด class
   is-open ส่วน transform ของ __content คุมแยกผ่าน inline style ในสคริปต์
   เพราะต้องคำนวณตำแหน่ง/ขนาดของการ์ดที่คลิกแบบไดนามิกทีละครั้ง). */
.tci-award-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tci-award-modal.is-open .tci-award-modal__backdrop {
  opacity: 1;
}

/* position:fixed + left/top ตั้งจาก JS ตามตำแหน่งการ์ดที่คลิก (แทนที่จะลอย
   กลางจอเสมอแบบเดิม) transform: translate(-50%,-50%) ยึดจุดกึ่งกลางกล่องไว้
   ที่ left/top พอดี ส่วน scale ต่อท้ายไว้ขยายจากขนาดการ์ดจริง -> เต็มขนาด. */
.tci-award-modal__content {
  position: fixed;
  left: 50%;
  top: 50%;
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 12px 12px;
  max-width: 320px;
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s ease;
  z-index: 1;
  font-family: var(--tci-font-body);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.tci-award-modal__image {
  display: block;
  max-width: 100%;
  max-height: 92%;
  width: auto;
  height: auto;
  margin: 0 auto 8px;
  border: 6px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.tci-award-modal__title {
  color: #414141;
  font-family: var(--tci-font-heading);
  font-weight: var(--tci-title-weight);
  font-size: 22px;
}

.tci-award-modal__year {
  margin-top: 10px;
  color: var(--tci-orange);
  font-weight: 700;
  font-size: 15px;
}

.tci-award-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #414141;
  cursor: pointer;
}

.tci-award-modal__close:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

/* แถวข่าว desktop กว้างขึ้น: section ข่าวใช้ความกว้างเนื้อหา 1320px (ทั่วไป 1200px)
   และขอบข้างขั้นต่ำ 32px แทน --tci-gutter-lg (สูงสุด 150px) — ยัง 3 ใบต่อแถว
   การ์ดกว้างขึ้นจาก ~364px เป็น ~424px ที่จอ 1440px. */
@media (min-width: 1024px) {
  .tci-e40211-page > #home-section-10 {
    padding-inline: max(32px, calc((100% - 1320px) / 2));
  }
}

/* iPad แนวตั้ง (768-1023px): การ์ดข่าวแคบ (~214-300px) ใช้ความสูงน้อยกว่า
   desktop (460px) ไม่ให้การ์ดสูงชะลูดเกินสัดส่วน. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #home-news-cards .tci-e40211-news-card {
    min-height: 380px;
  }
}

/* ===== แบนเนอร์หลักแบบสไลด์ (home-section-1) =====
   แบบเดียวกับแบนเนอร์หน้า jacket: เลื่อนด้วย scroll-snap (ปัดนิ้วได้บนมือถือ) ส่วน
   home-page.js คุมปุ่มก่อน/ถัดไป จุดบอกหน้า และเล่นอัตโนมัติทุก 5 วินาที.
   ทุก slide สูงเท่ากัน (track เป็น flex ยืดตามใบที่สูงสุด) ภาพเต็มกรอบด้วย object-fit:cover
   แม้ไฟล์ภาพแต่ละรูปสัดส่วนต่างกันเล็กน้อย. */
.tci-e40211-main-banner {
  position: relative;
}

.tci-e40211-main-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tci-e40211-main-banner-track::-webkit-scrollbar {
  display: none;
}

.tci-e40211-main-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.tci-e40211-main-banner-slide > picture {
  display: block;
  height: 100%;
}

.tci-e40211-main-banner-slide .tci-e40211-main-banner-image {
  height: 100%;
  object-fit: cover;
}

/* ปุ่มก่อน/ถัดไป: วงกลมขาวนูน ลูกศร chevron ส้ม — ซ่อนบนมือถือ (ใช้ปัดแทน) */
.tci-e40211-main-banner-arrow {
  display: none;
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tci-e40211-main-banner-arrow:hover {
  background: #ffffff;
}

.tci-e40211-main-banner-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -3px;
  border-style: solid;
  border-color: var(--tci-orange);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.tci-e40211-main-banner-arrow-prev {
  left: 24px;
}

.tci-e40211-main-banner-arrow-prev::before {
  margin-left: -7px;
  transform: rotate(-135deg);
}

.tci-e40211-main-banner-arrow-next {
  right: 24px;
}

.tci-e40211-main-banner-arrow:focus-visible,
.tci-e40211-main-banner-dot:focus-visible {
  outline: 2px solid var(--tci-orange);
  outline-offset: 2px;
}

.tci-e40211-main-banner-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ปุ่มจุด: พื้นที่กด 24px แต่จุดที่เห็นเล็กกว่า; จุดของ slide ปัจจุบันยืดเป็นแถบส้ม */
.tci-e40211-main-banner-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.tci-e40211-main-banner-dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.tci-e40211-main-banner-dot[aria-current="true"]::before {
  width: 20px;
  background: var(--tci-orange);
}

@media (prefers-reduced-motion: reduce) {
  .tci-e40211-main-banner-track {
    scroll-behavior: auto;
  }

  .tci-e40211-main-banner-arrow,
  .tci-e40211-main-banner-dot::before {
    transition: none;
  }
}

@media (min-width: 768px) {
  .tci-e40211-main-banner-arrow {
    display: block;
  }

  .tci-e40211-main-banner-dots {
    bottom: 24px;
  }
}