/*
 * ส่วนเสริมเล็กน้อยจากธีมเดิม — แก้เฉพาะจังหวะตอนโหลดหน้า
 * ธีมเดิมพึ่ง preloader ซ่อนทั้งหน้าไว้ก่อน จึงไม่เคยเห็นปัญหานี้
 */

/* ด้านหลังของการ์ดต้องไม่โผล่ก่อนปลั๊กอินจะพลิกให้ */
.flip:not([data-flip-ready]) .back {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
 * แก้จุดที่ Lighthouse ชี้ว่าแย่กว่าเว็บเดิม — วัดเทียบ 5 หน้า × 2 ขนาดจอ
 * ไม่แตะ thairung.css เพื่อให้ธีมเดิมยังเทียบกับต้นฉบับได้ตรง ๆ
 */

/* โลโก้ถูกบีบผิดสัดส่วน (image-aspect-ratio ตกทุกหน้าบนเดสก์ท็อป)
   responsive.css:35-36 ตั้ง header .logo{width:14%} + img{width:100%}
   ความกว้างจึงยืดตามจอ แต่ next/image ใส่ height="52" ไว้ตายตัว โลโก้เลยแบน
   เว็บเดิมไม่เป็นเพราะ <img> ของมันไม่ได้ระบุ height ไว้
   ปล่อยความสูงให้เลื่อนตามความกว้าง สัดส่วนจึงตรงไฟล์จริง (203x52) ทุกขนาดจอ */
header .logo img {
  height: auto;
}

/* รูปแบนเนอร์สไลด์ไม่ได้ประกาศขนาด เบราว์เซอร์จึงจองที่ไม่ได้ก่อนรูปโหลด
   หน้า /about/ จึงเลื่อนทั้งหน้า (CLS 0.924 เทียบเว็บเดิม 0.285)
   แบนเนอร์ต้นฉบับเป็น 1900x870 จึงตรึงอัตราส่วนไว้ให้ตรงกัน */
#banner-slider img,
.h-banner .content-slider img {
  aspect-ratio: 1900 / 870;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* พื้นหลังหน้าแรกเป็น jpg 344 KB — แปลงเป็น webp ไว้ข้างกันแล้วเหลือ 26 KB (q80)
   ทับแค่ background-image เบราว์เซอร์จะโหลดเฉพาะตัวที่ชนะ ไม่โหลดทั้งคู่ */
.bg-landing {
  background-image: url(../images/bg-landingpage.webp);
}

/*
 * ฟอนต์ RSU ที่ธีมเดิมประกาศไว้ไม่มี font-display
 * ค่าเริ่มต้น (auto) = เบราว์เซอร์ซ่อนข้อความไว้จนกว่าฟอนต์จะมา แล้วค่อยแสดง
 * ทำให้ layout กระโดดตอนฟอนต์โหลดเสร็จ (Lighthouse ชี้ rsu_bold.woff2 เป็นต้นเหตุ CLS)
 * ประกาศซ้ำที่นี่พร้อม font-display: swap — ตัวหลังชนะเพราะไฟล์นี้โหลดท้ายสุด
 */
@font-face {
  font-family: 'rsuregular';
  src: url('../fonts/rsu_regular.woff2') format('woff2'),
       url('../fonts/rsu_regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rsubold';
  src: url('../fonts/rsu_bold.woff2') format('woff2'),
       url('../fonts/rsu_bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rsulight';
  src: url('../fonts/rsu_light.woff2') format('woff2'),
       url('../fonts/rsu_light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
 * สีตัวอักษรเมนูหลัก: ธีมเดิมใช้ #999 บนพื้นขาว = คอนทราสต์ 2.85:1
 * มาตรฐาน WCAG AA ต้องการ 4.5:1 (ข้อความปกติ) — Lighthouse ตกข้อ color-contrast
 * เข้มขึ้นเป็น #767676 = 4.54:1 ผ่านพอดี และยังเป็นเทากลางเหมือนเดิม
 * สถานะ hover/active ไม่แตะ (น้ำเงิน #282C74 + ขีดแดงใต้ตัวอักษร)
 */
header nav ul li a {
  color: #767676;
}

/*
 * กล่องเนื้อหาการ์ดขาวของหน้ากลุ่มธุรกิจ
 * เว็บเดิมใช้ <h5> ครอบเนื้อหาทั้งก้อน (.busineess section h5)
 * แต่เนื้อหาข้างในมีย่อหน้าและรูป — <p> ซ้อนใน <h5> เป็น HTML ที่ไม่ถูกต้อง
 * เบราว์เซอร์จะปิด <h5> เองแล้วเนื้อหาหลุดออกนอกการ์ด
 * จึงใช้ div.ff-body ที่ประกาศสไตล์เดียวกันแทน (คัดจาก thairung.css:452)
 */
.busineess section .ff > .ff-body {
  width: 100%;
  min-height: 280px;
  line-height: 30px;
  padding: 35px 12%;
  margin: 0;
  color: #666;
  font-size: 22px;
  text-align: center;
  display: inline-block;
  background: #fff;
}

/* รูปในเนื้อหาที่แปลงเป็น Lexical — เว็บเดิมครอบด้วย div.pic ที่จัดกึ่งกลางให้
   ตัวแปลงไม่เก็บ wrapper นั้นมา จึงจัดกึ่งกลางที่ตัวรูปแทน */
/*
 * รูปในแถบ .pic ของหน้ากลุ่มธุรกิจ
 * ธีมเดิมไม่จำกัดความกว้างบนเดสก์ท็อป รูปต้นฉบับที่กว้าง 1920px จึงดันหน้าล้นออกด้านข้าง
 * ใส่แค่ max-width ไม่แตะ width/float เพื่อไม่ไปทับกฎ 3 คอลัมน์ของ responsive.css:169
 * (ไฟล์นี้โหลดท้ายสุด ถ้าใส่ width จะชนะแล้วเลย์เอาต์แท็บเล็ตพัง)
 */
.busineess section .pic img {
  max-width: 100%;
  height: auto;
}

.busineess section .ff-body img,
.busineess section .other img,
.csr .main img,
.about article .main img {
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  display: block;
}

/*
 * รูปบนการ์ด (หน้ารวมข่าว, หน้า CSR) ต้องติดกับกล่องข้อความ ไม่มีช่องว่างคั่น
 *
 * กฎ .csr .main img ข้างบนตั้งใจไว้สำหรับรูปในเนื้อหาบทความ แต่หน้ารวมข่าว
 * ก็อยู่ใต้ .csr .main เหมือนกัน ระยะขอบ 10px จึงไปแทรกระหว่างรูปกับกล่องข้อความ
 * (วัดจริง: ของเราห่าง 10px เว็บเดิม 0px)
 *
 * คงไว้เป็น block ไม่กลับไปเป็น inline แบบเว็บเดิม เพราะ inline จะมีช่องว่างใต้รูป
 * จากเส้นฐานตัวอักษรแทน ซึ่งต้องไปไล่ปิดด้วย line-height อีกทอด
 *
 * ต้องเขียนยาวถึง .csr .main ด้วย ไม่ใช่แค่ .gall li img
 * เพราะกฎข้างบนมีสอง class ส่วน .gall li img มี class เดียว จะแพ้น้ำหนักแล้วไม่มีผล
 */
.csr .main .gall li img,
.about article .main .gall li img {
  margin: 0;
}

/*
 * โลโก้ในแถบ "Contact Companies in Group"
 * ธีมเดิมจำกัดแค่ max-width:100px แล้วปล่อยให้สูงตามสัดส่วน
 * แต่ next/image ใส่ height ตายตัวลงใน HTML โลโก้แนวตั้งจึงยืดสูงผิดรูป
 */
.busineess .group dt img {
  height: auto;
}

/* การ์ดแจ้งเตือนพื้นครีมท้ายหน้าจรรยาบรรณ
   เว็บเดิมทำอีเมลในเนื้อความเป็นตัวหนาสีฟ้า แต่ตัวแก้ไขเนื้อหาเก็บได้แค่ตัวหนา
   สีจึงมากำหนดที่นี่ ทีมยังพิมพ์/แก้ข้อความได้ตามปกติ */
.trg-notice-cream strong {
  color: #2196f3;
}

/*
 * ไอคอน Instagram กับ TikTok
 * ธีมเดิมอ้างไฟล์ icon-instagram.png กับ icon-tiktok.png แต่ไฟล์ไม่มีอยู่จริง
 * (เว็บเดิมก็ตอบ 404 ทั้งคู่ สองรายการนี้จึงไม่มีไอคอนมาแต่ไหนแต่ไร)
 * วาดขึ้นใหม่ให้เข้าชุดกับไอคอนเดิม — วงกลม #292C75 ขนาด 40x40 ตัวไอคอนสีขาว
 */
.f-contact section .instagram {
  background-image: url(../images/icon-instagram.svg);
}
.f-contact section .tiktok {
  background-image: url(../images/icon-tiktok.svg);
}

/*
 * กันหน้าจอล้นแนวนอน
 * ธีมเดิมตั้ง .main{width:1700px} ตายตัว แล้วไปลดเป็น 100% ใน responsive.css
 * ที่ @media (max-width:1700px) เท่านั้น
 * ช่วงจอกว้าง 1701-1715px จึงหลุดทั้งสองกฎ: media query ไม่ทำงานเพราะจอเกิน 1700
 * แต่พื้นที่จริงหลังหักแถบเลื่อนเหลือไม่ถึง 1700 เนื้อหาเลยล้นออกนอกจอ
 * (เว็บเดิมก็เป็นเหมือนกัน แต่เราแก้ให้ เพราะทำให้โลโก้กับข้อความโดนตัดซ้าย)
 *
 * max-width:100% ทำให้ .main ไม่มีทางกว้างเกินกรอบที่มันอยู่
 * จอกว้างกว่า 1700 ก็ยังได้ 1700 จัดกลางเหมือนเดิม
 */
.main {
  max-width: 100%;
}

/*
 * .row ของ bootstrap มี margin ติดลบข้างละ 15px ปกติถูกดูดซับด้วย padding
 * ของ .main ที่ responsive.css ใส่ให้ที่จอ <=1700px
 * ช่วง 1701-1740px ไม่มีทั้ง padding และพื้นที่เหลือ margin ติดลบจึงทะลุออกนอกจอ
 * ใส่ padding ให้ช่วงนี้ด้วย ส่วนจอกว้างกว่านั้นปล่อยตามเดิมเพราะมีพื้นที่เหลือพอ
 */
/*
 * ระยะขอบซ้าย-ขวาของทั้งเว็บ
 * ธีมเดิมให้ .main แค่ 20px ที่จอ <=1700px และไม่ให้เลยที่จอกว้างกว่านั้น
 * เนื้อหาจึงชิดขอบจนอ่านอึดอัด โดยเฉพาะช่วงจอที่ .main เต็มความกว้างพอดี
 *
 * ตั้งเป็น 40px ตั้งแต่จอโน้ตบุ๊กขึ้นไป ส่วนจอเล็กคงไว้ 20px ตามเดิม
 * เพราะพื้นที่มีจำกัดอยู่แล้ว
 * bootstrap ตั้ง box-sizing:border-box ไว้ทั้งหน้า padding จึงนับรวมใน 1700px
 * ความกว้างรวมไม่บานออก และยังดูดซับ margin ติดลบของ .row ได้ด้วย
 *
 * หมายเหตุ: จุดนี้ตั้งใจให้ต่างจากเว็บเดิม ตามที่ขอให้เว้นขอบมากขึ้น
 */
@media (min-width: 992px) {
  .main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1701px) and (max-width: 1740px) {
  .main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* รูปและ iframe ต้องไม่ดันหน้าให้กว้างเกินจอเช่นกัน */
img,
iframe {
  max-width: 100%;
}

/*
 * รายละเอียดตำแหน่งงาน
 * เว็บเดิมประกาศ CSS ชุดนี้ไว้ใน <style> ฝังในหน้า /job/ เอง ไม่ได้อยู่ในไฟล์ธีม
 * เราไม่ได้ยกมาด้วย รายละเอียดที่กางออกมาจึงไม่มีระยะขอบและบรรทัดติดกันเป็นพืด
 */
.job-details-inner {
  padding: 0 20px 22px 20px;
}
.detail-text {
  font-size: 20px;
  color: #171a42;
  line-height: 1.6;
  margin: 12px 0;
  white-space: pre-line;
}
/* แต่ละบรรทัดของรายละเอียดเป็นย่อหน้าแยก จึงต้องตัดระยะห่างระหว่างย่อหน้าออก
   ให้อ่านต่อเนื่องเหมือนต้นฉบับที่ใช้ white-space:pre-line กับข้อความก้อนเดียว */
.detail-text p {
  margin: 0;
}
.detail-text .section-title,
.section-title {
  font-weight: 700;
  margin-top: 8px;
}
.actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.job-details-inner .btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  background: #171a42;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
}
.job-details-inner .btn:hover {
  background: #272c73;
  color: #fff;
}

/*
 * แถบสถานะตอนโหลดข่าวเพิ่ม
 * ธีมเดิมไม่มีส่วนนี้เพราะโหลดข่าวมาทั้งหมดในครั้งเดียว
 * เราแบ่งโหลดทีละชุดเพื่อให้หน้าเปิดเร็วขึ้น จึงต้องมีตัวบอกว่ากำลังโหลดอยู่
 */
.news-more {
  width: 100%;
  padding: 28px 0 40px;
  text-align: center;
  color: #272c73;
  font-size: 20px;
  display: block;
  clear: both;
}
.news-more__loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.news-more__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(39, 44, 115, 0.25);
  border-top-color: #272c73;
  border-radius: 50%;
  display: inline-block;
  animation: trg-spin 0.7s linear infinite;
}
@keyframes trg-spin {
  to {
    transform: rotate(360deg);
  }
}
.news-more__retry {
  padding: 10px 18px;
  border: 2px solid #b71f25;
  border-radius: 8px;
  background: transparent;
  color: #b71f25;
  font-size: 18px;
  cursor: pointer;
}
.news-more__retry:hover {
  background: #b71f25;
  color: #fff;
}
/* ผู้ที่ตั้งค่าลดการเคลื่อนไหวไว้ ไม่ต้องเห็นวงหมุน */
@media (prefers-reduced-motion: reduce) {
  .news-more__spinner {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * แบนเนอร์คุกกี้ — การ์ดลอยมุมล่าง
 * ของเดิมเป็นแถบดำเต็มความกว้าง และมี CSS อยู่ใน @media max-width:320px
 * อย่างเดียว จอปกติจึงไม่มีสไตล์เลย ชุดนี้เขียนใหม่ทั้งหมดด้วย class ของเรา
 * ------------------------------------------------------------------------- */
.trg-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2051;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.trg-cookie__card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 880px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(39, 44, 115, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(10, 26, 74, 0.22);
  animation: trg-cookie-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.trg-cookie__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  background: rgba(39, 44, 115, 0.08);
}
.trg-cookie__body {
  flex: 1 1 auto;
  min-width: 0;
}
.trg-cookie__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #1b1f3b;
}
.trg-cookie__link {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  color: #272c73;
  text-decoration: underline;
}
.trg-cookie__accept {
  flex: 0 0 auto;
  padding: 12px 30px;
  border: 0;
  border-radius: 999px;
  background: #272c73;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.trg-cookie__accept:hover {
  background: #1b1f57;
  transform: translateY(-1px);
}
.trg-cookie__accept:focus-visible {
  outline: 3px solid rgba(39, 44, 115, 0.35);
  outline-offset: 2px;
}
@keyframes trg-cookie-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
/* จอแคบ: วางเป็นแนวตั้ง ปุ่มเต็มความกว้างให้กดง่าย */
@media (max-width: 767px) {
  .trg-cookie {
    padding: 10px;
  }
  .trg-cookie__card {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }
  .trg-cookie__icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .trg-cookie__text {
    font-size: 15px;
  }
  .trg-cookie__accept {
    width: 100%;
    padding: 13px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trg-cookie__card {
    animation: none;
  }
  .trg-cookie__accept:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * โครงการ์ดเปล่าระหว่างรอข้อมูล (หน้ารวมข่าวและหน้า CSR)
 * ขนาดต้องเท่าการ์ดจริง ไม่งั้นหน้ากระโดดตอนการ์ดจริงมาแทน
 * ------------------------------------------------------------------------- */
.trg-skeleton-card {
  display: block;
  cursor: default;
}
.trg-skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, #e9ebf2 25%, #f4f5f9 37%, #e9ebf2 63%);
  background-size: 400% 100%;
  animation: trg-skeleton-sweep 1.4s ease-in-out infinite;
}
.trg-skeleton--image {
  height: 221px;
  border-radius: 0;
}
/*
 * ตัวเลขทั้งชุดวัดจากการ์ดจริงบนหน้า ไม่ได้กะเอา
 * .content สูง 265px = padding 23/38 + หัวข้อ 56 (เว้นล่าง 20)
 * + คำโปรย 72 (เว้นล่าง 23) + ปุ่ม 36
 * ถ้าโครงเตี้ยกว่าการ์ดจริง หน้าจะกระโดดตอนการ์ดจริงมาแทน
 */
.trg-skeleton--title {
  height: 56px;
  margin: 0 0 20px 0;
}
.trg-skeleton--line {
  height: 22px;
  margin: 0 0 12px 0;
}
.trg-skeleton--short {
  width: 60%;
  margin-bottom: 23px;
}
.trg-skeleton--button {
  height: 36px;
  width: 140px;
  margin: 0;
}
@keyframes trg-skeleton-sweep {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}
/* ผู้ที่ตั้งค่าลดการเคลื่อนไหวไว้ ให้เห็นเป็นบล็อกนิ่ง ๆ แทนแถบไล่สีวิ่ง */
@media (prefers-reduced-motion: reduce) {
  .trg-skeleton {
    animation: none;
    background: #e9ebf2;
  }
}

/* ---------------------------------------------------------------------------
 * กล่องโลโก้บริษัทในกลุ่ม (ท้ายหน้าแรก) — ตัดพื้นเทาว่างท้ายกล่อง
 *
 * thairung.css:988 ตั้ง .content{height:1100px} ไว้ตายตัวให้ทุกกล่องสูงเท่ากัน
 * แต่เนื้อหาจริงแต่ละกลุ่มไม่เท่ากันเลย (วัดจากหน้าจริง: Manufacturing 1250px,
 * Dealership & BP 967, Vehicle Leasing 601, Property 962, Hospitality 907)
 * กล่องที่โลโก้น้อยจึงเหลือพื้นเทาว่างยาว 130-500px ส่วน Manufacturing
 * กลับล้นออกนอกกล่องเพราะเนื้อหาเกิน 1100 (เว็บเดิมเป็นทั้งสองอาการ)
 *
 * เปลี่ยนให้กล่องสูงตามเนื้อหาของตัวเอง พื้นเทาจึงจบตรงโลโก้ใบสุดท้ายพอดี
 * (จุดนี้ตั้งใจให้ต่างจากเว็บเดิม ตามที่ขอให้เอาช่องว่างออก)
 *
 * ใช้ flex แทน float เพราะ float ที่ความสูงไม่เท่ากันจะเกยกัน
 * แถวถัดไปจะไปเสียบใต้กล่องที่เตี้ยสุดแทนที่จะขึ้นบรรทัดใหม่
 * align-items:flex-start คือตัวที่ทำให้แต่ละกล่องไม่ถูกยืดเท่ากล่องที่สูงสุด
 *
 * ต้องปิด ::before/::after ของ .row ด้วย — bootstrap 3 ใช้มันเป็น clearfix
 * พอ .row เป็น flex สองตัวนี้จะกลายเป็น flex item เปล่า ๆ แทรกเป็นคอลัมน์ผี
 *
 * ครอบเฉพาะ >=769px เพราะจอเล็กกว่านั้น responsive.css:216-217
 * สลับเป็นคอลัมน์เดียว + height:auto อยู่แล้ว
 * ------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .h-contact ul .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .h-contact ul .row::before,
  .h-contact ul .row::after {
    display: none;
  }
  .h-contact ul .row > li {
    float: none;
  }
  .h-contact ul .row > li .content {
    height: auto;
  }
}

/*
 * รูปการ์ดในแถบ "ธุรกิจของเรา" (หน้าแรก)
 * ธีมเดิมตั้งแค่ .h-busineess ul li .pic img{width:100%} แล้วปล่อยความสูงตามสัดส่วน
 * รูปทุกใบจึงสูง 180px เท่ากันพอดี (ต้นฉบับ 546x300 กับ 403x221 สัดส่วนเท่ากัน 1.82)
 *
 * ของเราใช้ next/image ซึ่งเขียน height ลงใน HTML ด้วย ความสูงจึงถูกตรึงไว้ที่
 * ขนาดไฟล์จริง — การ์ด 3 ใบแรกสูง 300px ส่วนการ์ดโรงแรมสูง 221px
 * นอกจากไม่เท่ากันแล้วยังยืดผิดสัดส่วน เพราะความกว้างถูกบีบเหลือ 318px
 * (อาการเดียวกับโลโก้บนหัวเว็บที่แก้ไว้ข้างบน)
 */
.h-busineess ul li .pic img {
  height: auto;
}

/*
 * รูปที่ทำหน้าที่เป็น "คอลัมน์" ของบล็อกสองช่อง (กล่องข้อความ | รูป)
 * ไม่ใช่รูปแทรกกลางเนื้อความ จึงต้องไม่มีระยะขอบ
 *
 * กฎ .csr .main img / .about article .main img ข้างบนใส่ margin:10px ไว้ให้รูปในบทความ
 * แต่มันไปโดนรูปคอลัมน์นี้ด้วย รูปเลยเลื่อนลง 10px ไม่ตรงกับกล่องข้อความที่อยู่ข้าง ๆ
 * (วัดจริงบนหน้า /csr/: กล่องกรมท่า 765-1288 ส่วนรูป 775-1298 — เว็บเดิมตรงกันพอดี)
 */
.csr .main .row > div > div > img,
.about article .main .row > div > div > img,
.busineess section .other .row > div > div > img {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * ช่องว่างส่วนเกินระหว่างบล็อก
 *
 * เว็บเดิมเขียนทั้งหน้าเป็น section เดียว แล้ววางเนื้อหาทุกก้อนไว้ข้างใน
 * ของเราให้ทีมสลับ/เพิ่มบล็อกเองได้ แต่ละบล็อกจึงออกมาเป็น section ของตัวเอง
 * ระยะท้าย section (45px) กับระยะรอบ ul (40/80px) เลยถูกนับซ้ำทุกบล็อก
 *
 * วัดจริงที่ /business-manufacturing/ : เว็บเดิม 1 section ของเรา 4
 * ช่องว่างเกิน 3x45 = 135px · /csr/ เว็บเดิม 1 ul ของเรา 3 เกิน 2x120 = 240px
 *
 * แก้โดยให้เฉพาะก้อนสุดท้ายเว้นท้าย ก้อนกลาง ๆ ต่อกันเลยเหมือนเว็บเดิม
 * ------------------------------------------------------------------------- */
.busineess > section:has(+ section) {
  padding-bottom: 0;
}

/* ลาย bg2.jpg เป็นของประดับมุมบนของทั้งส่วน ไม่ใช่ของแต่ละบล็อก
   ถ้าไม่ปิด section ที่ตามมาจะวาดลายซ้ำกลางหน้า */
.busineess > section.bg ~ section.bg {
  background-image: none;
}

.csr > .main:has(+ .main) > ul {
  margin-bottom: 0;
}
.csr > .main + .main > ul {
  margin-top: 0;
}

/* กล่องขาวของบล็อกเนื้อหาที่วางต่อกัน ต้องดูเป็นกล่องเดียวเหมือนเว็บเดิม
   .busineess .ff เป็นกรอบสีกรมท่ารอบกล่องขาว (padding 30px)
   พอบล็อกแยก section กรอบนี้เลยมาคั่นกลางกลายเป็นกล่องขาวหลายใบ
   ตัดเฉพาะด้านที่ประกบกัน ด้านนอกสุดยังเว้นเท่าเดิม */
.busineess > section:has(+ section .ff) > .main > .ff {
  padding-bottom: 0;
}
.busineess > section:has(.ff) + section > .main > .ff {
  padding-top: 0;
}

/* แถบบนติดขอบจอตอนเลื่อน ทุกขนาดจอ
   ธีมเดิมไม่มีพื้นหลัง (background:none) ต้องใส่ขาวไม่งั้นเนื้อหาจะลอดใต้เมนู
   z-index ต่ำกว่าปุ่มเมนูมือถือ #nav-icon2 (999) ซึ่ง fixed อยู่มุมบนอยู่แล้ว
   ไม่รวมหน้าแรก (.no-border) — หัวโปร่งซ้อนบนภาพพื้นหลังของ landing */
.warp > header:not(.no-border) {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
}