/* ============================================
   CUSTOM CSS - CPAC Template
   Project-specific overrides & additions
   ============================================ */

/* ============================================
   PRELOADER
   ============================================ */
#cpac-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #004391;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#cpac-preloader.hide { opacity: 0; visibility: hidden; }
.preloader-logo {
  width: 363px;
  display: block;
  margin: auto;
  position: relative;
  top: 5vh;
  animation: preloaderPulse 1.4s ease-in-out infinite;
}
@keyframes preloaderPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.95); }
}

/* ============================================
   GLOBAL FONT RESET
   ============================================ */
/* Base font size: default 16px + 2px. All rem-based sizes scale with this. */
html {
  font-size: 18px;
}
/* CPAC Modern is the loopless (ไม่มีหัว) family; the file named CPAC Loop is the
   looped one, so it is not used as a fallback here. */
html, body, * {
  font-family: 'CPAC Modern', sans-serif !important;
}

/* ============================================
   EQUAL-HEIGHT CARDS (all grid sections)
   ============================================ */
/* Card-level grid cells: stretch and fill */
.MuiGrid-grid-md-4,
.MuiGrid-grid-sm-6 {
  display: flex;
}
/* Links inside grid cells fill height */
.MuiGrid-grid-md-4 > a,
.MuiGrid-grid-sm-6 > a {
  display: flex;
  width: 100%;
}
/* Paper/Card fills its parent */
.MuiGrid-grid-md-4 .MuiPaper-root,
.MuiGrid-grid-md-4 .MuiCard-root,
.MuiGrid-grid-sm-6 .MuiPaper-root,
.MuiGrid-grid-sm-6 .MuiCard-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
/* Card content area grows to fill remaining space */
.MuiGrid-grid-md-4 .MuiPaper-root .MuiStack-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.MuiGrid-grid-md-4 .MuiCardContent-root,
.MuiGrid-grid-sm-6 .MuiCardContent-root {
  flex: 1;
}
/* News card links fill height */
.news-card-link {
  display: flex !important;
  height: 100%;
}

.swiper-pagination {
  margin-bottom: 15px;
}

/* ============================================
   HEADER NAV SPACING — match reference design
   ============================================ */

/* ============================================
   BLOCK-HEADER
   ============================================ */
.block-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: #fff;
  box-shadow: inset 0 -2px 0 #E6EDF3;
  transition: all 0.2s ease-in-out;
}
.block-header__inner {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
@media (min-width: 576px) {
  .block-header__inner { padding: 0 24px; }
}
.block-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.block-header__logo img {
  height: 36px;
  width: auto;
}
@media (min-width: 576px) {
  .block-header__logo img { height: 46px; }
}
.block-header__nav {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 992px) {
  .block-header__nav { display: flex; }
}
.block-header__link {

  font-size: 0.875rem;
  font-weight: 500;
  color: #004391;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.block-header__link:hover {
  background: rgba(0,67,145,0.05);
}
.block-header__link--active {
  color: #0c4da2;
  font-weight: 600;
}
.block-header__link--active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #0c4da2;
  border-radius: 2px;
}
/* When header is scrolled, active nav underline turns white */
header.MuiAppBar-root.scrolled .css-1awymsp.active::before,
header.MuiAppBar-root.scrolled .css-1awymsp.active:before,
header.MuiAppBar-root.scrolled .block-header__link--active::before {
  background-color: #fff !important;
  background: #fff !important;
}
.block-header__chevron {
  flex-shrink: 0;
  opacity: 0.6;
}
.block-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-header__lang {

  font-size: 0.875rem;
  font-weight: 500;
  color: #004391;
  padding: 6px 12px;
  border: 1px solid #E6EDF3;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.block-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  color: #004391;
  border-radius: 8px;
}
.block-header__hamburger:hover {
  background: #f3f4f6;
}
@media (min-width: 992px) {
  .block-header__hamburger { display: none; }
}

/* ============================================
   BLOCK-FOOTER
   ============================================ */
.block-footer {
  position: relative;
  background: #004391;
  color: #fff;
}
.block-footer__container {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 576px) {
  .block-footer__container { padding: 0 24px; }
}
/* Back to top button */
.block-footer__top-btn {
  position: absolute;
  top: -22px;
  right: 24px;
  z-index: 50;
}
@media (max-width: 575px) {
  .block-footer__top-btn { top: 16px; right: 16px; }
}
.block-footer__scroll-top {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(11px);
  box-shadow: 0 2px 14px rgba(0,67,145,0.2);
  color: #004391;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}
.block-footer__scroll-top:hover {
  background: #fff;
}
@media (max-width: 575px) {
  .block-footer__scroll-top { width: 36px; height: 36px; min-width: 36px; }
}
/* Main footer content */
.block-footer__main {
  padding: 40px 0 24px;
}
.block-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media (min-width: 992px) {
  .block-footer__grid { flex-wrap: nowrap; }
}
.block-footer__brand {
  flex: 0 0 auto;
  max-width: 320px;
}
.block-footer__logo {
  height: 56px;
  width: auto;
  margin-bottom: 12px;
}
.block-footer__slogan {

  font-size: 1.25rem;
  font-weight: 700;
  color: #0c4da2;
  margin: 0 0 8px;
  line-height: 1.4;
}
.block-footer__desc {

  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.7;
}
/* Footer links */
.block-footer__links {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media (min-width: 768px) {
  .block-footer__links { gap: 48px; }
}
.block-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.block-footer__col li {
  margin-bottom: 6px;
}
.block-footer__col a {

  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.15s;
}
.block-footer__col a:hover {
  color: #fff;
}
.block-footer__col-title {

  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
/* Divider */
.block-footer__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0;
}
/* Bottom bar */
.block-footer__bottom {
  padding: 20px 0;
}
.block-footer__bottom-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.block-footer__company {

  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}
.block-footer__address {

  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 12px;
}
.block-footer__social {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.block-footer__social a {
  display: flex;
  text-decoration: none;
}
.block-footer__social img {
  width: 32px;
  height: 32px;
}
.block-footer__copyright {

  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
/* CTA area */
.block-footer__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.block-footer__call img {
  height: 50px;
  width: auto;
}
.block-footer__cta-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
}
.block-footer__order {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.block-footer__order-text {

  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-align: right;
  line-height: 1.3;
}
.block-footer__order img {
  width: 48px;
  height: 48px;
}

/* Hero banner: slide text overlay */
.hero-slide-img {
  position: relative !important;
  overflow: hidden !important;
}
.hero-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 48px 40px;
  color: #fff;
  width: 50%;
  max-width: 640px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,67,145,0.72) 0%, rgba(0,67,145,0.38) 60%, transparent 100%);
  border-radius: 0 24px 0 0;
}
.hero-slide-overlay h2 {

  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: #fff;
}
.hero-slide-overlay p {

  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 991px) {
  .hero-slide-overlay {
    width: 60%;
    padding: 24px 32px 28px;
  }
  .hero-slide-overlay h2 { font-size: 1.5rem; }
  .hero-slide-overlay p { font-size: 0.8125rem; }
}
@media (max-width: 767px) {
  .hero-slide-overlay {
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 20px 24px 24px;
    bottom: auto;
    top: 0;
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(0,67,145,0.78) 0%, rgba(0,67,145,0.40) 70%, transparent 100%);
  }
  .hero-slide-overlay h2 { font-size: 1.25rem; margin-bottom: 8px; }
  .hero-slide-overlay p { font-size: 0.8125rem; }
}

/* Hero banner: desktop/mobile image toggle */
.css-2dmznq .css-h9r63z { display: block !important; }
.css-2dmznq .css-3l99kw { display: none !important; }
@media (max-width: 767px) {
  .css-2dmznq .css-h9r63z { display: none !important; }
  .css-2dmznq .css-3l99kw { display: block !important; }
}

/* ============================================
   BLOCK-01: Hero Carousel Banner
   ============================================ */
.block-carousel-001 {
  position: relative;
  overflow: hidden;
}
.block-carousel-001 .hero-carousel {
  width: 100%;
}
.block-carousel-001 .swiper-slide a {
  display: block;
  width: 100%;
}
.block-carousel-001 .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Desktop / Mobile image toggle */
/* Slide is positioning context for the caption overlay */
.block-carousel-001 .swiper-slide { position: relative; }
.block-carousel-001 .swiper-slide > a { position: relative; display: block; }

/* Caption overlay — ข้อความวางบนภาพโดยตรง (ไม่มีกรอบขาว)
   ใช้ scrim ไล่สีดำโปร่งคลุมภาพแทน เพื่อให้ตัวหนังสือขาวไม่จมไปกับภาพ */
.block-carousel-001 .hero-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* เว้นล่างให้พ้นแถบ pagination ของสไลเดอร์ */
  padding: clamp(56px, 11vh, 140px) clamp(24px, 6vw, 96px) clamp(46px, 9vh, 104px);
  color: #fff;
  pointer-events: none;
  z-index: 2;
}

/* Scrim: เข้มด้านบน (รองข้อความนำ) และด้านล่าง (รองหัวข้อใหญ่) กลางภาพโปร่ง */
.block-carousel-001 .hero-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 25, 55, 0.55) 0%,
      rgba(0, 25, 55, 0.22) 26%,
      rgba(0, 25, 55, 0.10) 50%,
      rgba(0, 25, 55, 0.34) 78%,
      rgba(0, 25, 55, 0.62) 100%);
}

/* ข้อความนำ — กล่องอยู่ขวาบนเหมือนเดิม ตัวอักษรจัดกึ่งกลางในกล่อง */
.block-carousel-001 .hero-caption__lead {
  position: relative;
  margin: 0 0 0 auto;
  max-width: 1000px;
  text-align: center;
  font-size: clamp(1.25rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 20, 50, 0.55);
}

/* หัวข้อใหญ่ประจำสไลด์ — มุมล่าง ซ้าย/ขวาตามคลาส modifier */
.block-carousel-001 .hero-caption__title {
  position: relative;
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 20, 50, 0.6);
}
.block-carousel-001 .hero-caption--right .hero-caption__title { align-self: flex-end; }
.block-carousel-001 .hero-caption--left  .hero-caption__title { align-self: flex-start; }

/* Mobile (≤767px): ข้อความนำอยู่บน หัวข้อใหญ่กึ่งกลางด้านล่าง */
@media (max-width: 767px) {
  .block-carousel-001 .hero-caption {
    padding: 44px 20px 34px;
    text-align: center;
  }
  .block-carousel-001 .hero-caption__lead { margin: 0 auto; font-size: 1.15rem; line-height: 1.5; }
  .block-carousel-001 .hero-caption__title { font-size: 2.5rem; }
  .block-carousel-001 .hero-caption--right .hero-caption__title,
  .block-carousel-001 .hero-caption--left  .hero-caption__title { align-self: center; }
}

/* Desktop hero: full-height banner = 90vh */
.block-carousel-001 .hero-desktop {
  display: block;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}
.block-carousel-001 .hero-mobile { display: none; }
@media (max-width: 767px) {
  .block-carousel-001 .hero-desktop { display: none; }
  .block-carousel-001 .hero-mobile {
    display: block;
    width: 100%;
    /* Mobile banners are portrait (720x1282) — height reduced 40% from 860px → 516px */
    aspect-ratio: 720 / 1282;
    max-height: 516px;
    overflow: hidden;
  }
}
/* Navigation arrows */
.block-carousel-001 .swiper-button-prev,
.block-carousel-001 .swiper-button-next {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s;
}
.block-carousel-001 .swiper-button-prev:hover,
.block-carousel-001 .swiper-button-next:hover {
  background: #fff;
}
.block-carousel-001 .swiper-button-prev::after,
.block-carousel-001 .swiper-button-next::after {
  font-size: 20px;
  font-weight: 700;
  color: #004391;
}
/* Pagination dots */
/* Pagination dots */
.block-carousel-001 .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.7) !important;
  opacity: 1 !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
}
.block-carousel-001 .swiper-pagination-bullet-active {
  background: #0c4da2 !important;
  width: 48px !important;
  height: 12px !important;
  border-radius: 6px !important;
}

/* ============================================
   BLOCK-CONTENT-001: About CPAC
   ============================================ */
.block-content-001 {
  position: relative;
  text-align: center;
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 24px;
}
@media (max-width: 767px) {
  .block-content-001 {
    padding: 56px 20px;
  }
}
.block-content-001__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.block-content-001__title {

  font-weight: 700;
  /* Fluid size in vw so the title shrinks/grows together with the full-width map image */
  font-size: clamp(1.6rem, 4vw, 4.2rem);
  color: #004391;
  margin: 0 0 12px;
  line-height: 1.2;
}
.block-content-001__desc {

  font-size: 1rem;
  color: #1a1a1a;
  margin: 0 0 6px;
  line-height: 1.7;
}
.block-content-001__desc:last-child { margin-bottom: 0; }
.block-content-001__highlight-inline {
  font-weight: 700;
  color: #00a1e5;
}
.block-content-001__highlight {

  font-size: 1.0625rem;
  font-weight: 700;
  color: #0c4da2;
  margin: 0;
  line-height: 1.6;
}
.block-content-001__cta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.block-content-001__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  font-size: 0.9375rem;
  font-weight: 600;
  color: #004391;
  text-decoration: none;
  border: 2px solid rgba(0,67,145,0.15);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,67,145,0.10);
  transition: all 0.2s ease;
}
.block-content-001__btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,67,145,0.18);
}
.block-content-001__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0c4da2;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .block-content-001__title { font-size: 2rem; }
  .block-content-001__desc { font-size: 0.875rem; }
  .block-content-001__highlight { font-size: 0.9375rem; }
  .block-content-001__cta { bottom: 16px; }
}
@media (min-width: 1200px) {
  .block-content-001 { padding-top: 56px; }
}
@media (min-width: 1441px) {
  .block-content-001 { padding-top: 72px; }
}

/* ============================================
   BLOCK-THUMBS-001: Recent Projects (non-clickable thumbnails) — full-area BG image
   ============================================ */
.block-thumbs-001 {
  position: relative;
  padding: 80px 24px 56px;
  background-image: url('../images/bannerbg4.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  min-height: 900px;
  overflow: hidden;
}
/* Darkening overlay for contrast */
.block-thumbs-001::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.block-thumbs-001__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
}
.block-thumbs-001__title {
  margin: 0 0 20px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.block-thumbs-001__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Slider wrapper — provides side padding so arrows sit OUTSIDE the slides */
.block-thumbs-001__slider {
  position: relative;
  padding: 0 48px; /* room for arrows on left/right */
}
.block-thumbs-001__swiper {
  position: relative;
  width: 100%;
  padding-bottom: 4px; /* breathing room under shadow */
  overflow: hidden;
}
.block-thumbs-001__swiper .swiper-slide {
  height: auto;
  display: flex;
}
.block-thumbs-001__swiper .swiper-slide .thumb-card { width: 100%; }
/* Slider navigation — positioned in the side gutter, NOT over the slides */
.block-thumbs-001__nav-prev,
.block-thumbs-001__nav-next {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease;
  /* swiper sets these too via .swiper-button-* — duplicate explicitly here */
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-thumbs-001__nav-prev:hover,
.block-thumbs-001__nav-next:hover { background: #fff; }
.block-thumbs-001__nav-prev::after,
.block-thumbs-001__nav-next::after {
  font-size: 18px;
  font-weight: 700;
  color: #004391;
}
.block-thumbs-001__nav-prev { left: -6px; }
.block-thumbs-001__nav-next { right: -6px; }
@media (max-width: 767px) {
  .block-thumbs-001 { padding: 56px 16px 32px; min-height: 700px; }
  .block-thumbs-001__title { font-size: 1.05rem; margin-bottom: 14px; }
  .block-thumbs-001__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .block-thumbs-001__slider { padding: 0 40px; }
  .block-thumbs-001__nav-prev,
  .block-thumbs-001__nav-next { width: 34px; height: 34px; margin-top: -17px; }
  .block-thumbs-001__nav-prev { left: 4px; }
  .block-thumbs-001__nav-next { right: 4px; }
  .block-thumbs-001__nav-prev::after,
  .block-thumbs-001__nav-next::after { font-size: 15px; }
}
/* Thumbnail card — small white panel, purely visual (not interactive) */
.thumb-card {
  margin: 0;
  pointer-events: none;
  user-select: none;
  cursor: default;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.thumb-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9eef5;
}
.thumb-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-card__caption {
  margin: 0;
  padding: 12px 14px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #004391;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumb-card__desc {
  margin: 0;
  padding: 0 14px 14px;
  font-size: 0.9rem;
  font-weight: 400;
  color: #5b6b7d;
  line-height: 1.5;
}

/* === Hero carousel: thumbnail-image pagination (desktop) + dots+bar (mobile) === */
.block-carousel-001 .swiper-pagination {
  bottom: 18px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}
.block-carousel-001 .swiper-pagination-bullet.hero-thumb {
  pointer-events: auto;
  position: relative;
  width: 28px !important;
  height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  overflow: hidden;
  opacity: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
  transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.block-carousel-001 .swiper-pagination-bullet.hero-thumb img {
  display: none;
}
.block-carousel-001 .swiper-pagination-bullet.hero-thumb:hover {
  background: rgba(255, 255, 255, 0.8) !important;
}
.block-carousel-001 .swiper-pagination-bullet-active.hero-thumb {
  width: 46px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 2px 8px rgba(0, 67, 145, 0.45) !important;
}
/* Progress-fill effect: blue fill sweeps the active bar over the autoplay duration */
.block-carousel-001 .swiper-pagination-bullet-active.hero-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00a1e5, #0c4da2);
  box-shadow: 0 0 8px rgba(0, 161, 229, 0.85), 0 0 2px rgba(255, 255, 255, 0.9);
  transform-origin: left center;
  animation: heroBarFill 5s linear forwards, heroBarGlow 1.6s ease-in-out infinite;
}
@keyframes heroBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroBarGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
/* Mobile: hide thumbnail image, show simple dot/bar style */
@media (max-width: 767px) {
  .block-carousel-001 .swiper-pagination {
    bottom: 12px !important;
    gap: 6px;
    padding: 0 8px;
  }
  .block-carousel-001 .swiper-pagination-bullet.hero-thumb {
    width: 8px !important;
    height: 8px !important;
    border: 0;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  }
  .block-carousel-001 .swiper-pagination-bullet.hero-thumb img {
    display: none;
  }
  .block-carousel-001 .swiper-pagination-bullet-active.hero-thumb {
    width: 28px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #00a1e5, #0c4da2) !important;
    box-shadow: 0 2px 8px rgba(0, 67, 145, 0.50) !important;
    transform: none;
  }
}

/* News/article cards (css-1u2xe3e): remove rounded corners on card, image & corner-frame — all pages */
.MuiCard-root.css-1u2xe3e,
.MuiCard-root.css-1u2xe3e .MuiCardMedia-root,
.MuiCard-root.css-1u2xe3e:hover .MuiCardMedia-root {
  border-radius: 0 !important;
}
.MuiCard-root.css-1u2xe3e .corner-frame {
  --corner-frame-rounded: 0 !important;
  border-radius: 0 !important;
}

/* Product pages "related products" blue gradient box: square corners */
.MuiBox-root.css-xc4q4s {
  border-radius: 0 !important;
  background: linear-gradient(135deg, #3a72c4 0%, #0c4da2 55%, #004391 100%) !important;
}

/* Product pages "related products" cards (recommend-swiper): square corners */
.recommend-swiper .MuiCard-root,
.recommend-swiper .MuiCard-root .MuiCardMedia-root,
.recommend-swiper .MuiCard-root:hover .MuiCardMedia-root {
  border-radius: 0 !important;
}
.recommend-swiper .corner-frame {
  --corner-frame-rounded: 0 !important;
  border-radius: 0 !important;
}

/* News section heading: smaller font */
.block-content-003 h2.text-2xl {
  font-size: 2.1rem !important;
}
.block-content-003 .text-md {
  font-size: 1.15rem !important;
}

/* === News carousel (block-content-003): bar pagination + progress-fill effect === */
.block-content-003 .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.block-content-003 .swiper-pagination-bullet {
  position: relative;
  width: 28px;
  height: 6px;
  margin: 0 !important;
  border-radius: 999px;
  background: rgba(0, 67, 145, 0.22);
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.block-content-003 .swiper-pagination-bullet:hover {
  background: rgba(0, 67, 145, 0.4);
}
.block-content-003 .swiper-pagination-bullet-active {
  width: 46px;
  background: rgba(0, 67, 145, 0.22);
}
.block-content-003 .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00a1e5, #0c4da2);
  transform-origin: left center;
  animation: heroBarFill 5s linear forwards;
}

/* Product/Service hero banner (BLOCK-PRODUCT-001): remove floating bubble icon under banner — all pages */
.css-1kjizbl {
  display: none !important;
}

/* Global font-size bump: +2px across the whole site.
   Base root 16px -> 18px so all rem-based fonts scale up.
   --spacing pinned to px so Tailwind layout spacing does NOT grow with the larger root. */
html {
  font-size: 18px;
}
:root {
  --spacing: 4px;
}
/* "ดูข่าวสารทั้งหมด" pill button: keep on one line after the global font bump */
.css-aen4em {
  font-size: 0.95rem !important;
  white-space: nowrap;
}
/* Header navigation links: fixed 18px */
header .css-1awymsp {
  font-size: 20px !important;
}

/* ============================================
   BLOCK-IMAGE-001: Full-width Partners / World Map image
   ============================================ */
.block-image-001 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0; /* removes inline-image whitespace below */
}
.block-image-001__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* override any container max-width */
}

/* ============================================
   BLOCK-CAROUSEL-002: Product Showcase
   ============================================ */
.block-carousel-002 {
  position: relative;
  overflow: hidden;
      padding: 40px 30px;
}
.block-carousel-002 .swiper {
      border-radius: 24px;
}
/* Square the outer frame only (keep caption card & tab pill rounded) */
.block-carousel-002 .bc002__main {
      border-radius: 0;
}

.bc002 {
  position: relative;
}

/* Static stacked list (replaces the swiper carousel) */
.bc002__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Main slide link */
.bc002__slide {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: 0;
}

/* Image containers */
.bc002__img img {
  width: 100%;
  height: auto;
  display: block;
}
.bc002__img--desktop { display: block; }
.bc002__img--mobile { display: none; }
@media (max-width: 767px) {
  .bc002__img--desktop { display: none; }
  .bc002__img--mobile { display: block; }
}

/* Text overlay */
.bc002__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #282728;
}
@media (max-width: 767px) {
  .bc002__overlay {
    /* default (static variant): overlay sits at top of image */
    justify-content: flex-start;
    padding: 16px;
    padding-bottom: 20px;
  }
  /* Slider variant on mobile: stack the text card ABOVE the image (no overlay) */
  .block-carousel-002:not(.block-carousel-002--static) .bc002__slide {
    display: flex;
    flex-direction: column;
  }
  .block-carousel-002:not(.block-carousel-002--static) .bc002__overlay {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 22px 22px 24px;
    background: #e8f4fd;
    order: -1;          /* card first */
  }
  .block-carousel-002:not(.block-carousel-002--static) .bc002__overlay-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
}
@media (min-width: 576px) {
  .bc002__overlay { padding: 32px; }
}
@media (min-width: 768px) {
  .bc002__overlay {
    color: #fff;
    padding: 32px;
    padding-bottom: 24px;
  }
}
@media (min-width: 992px) {
  .bc002__overlay { padding: 48px; padding-bottom: 28px; }
}
@media (min-width: 1441px) {
  .bc002__overlay { padding: 64px; padding-bottom: 32px; }
}
/* Slider variant: lift card up so it doesn't overlap the tabs pill at the bottom */
@media (min-width: 768px) {
  .block-carousel-002:not(.block-carousel-002--static) .bc002__overlay {
    padding-bottom: 140px;
  }
}
@media (min-width: 992px) {
  .block-carousel-002:not(.block-carousel-002--static) .bc002__overlay {
    padding-bottom: 150px;
  }
}
@media (min-width: 1441px) {
  .block-carousel-002:not(.block-carousel-002--static) .bc002__overlay {
    padding-bottom: 160px;
  }
}

/* White card wrapper around the overlay text */
.bc002__overlay-card {
  /* mobile: white rounded card matching desktop look, scaled down */
  width: 100%;
  background: #fff;
  padding: 18px 20px 14px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) {
  .bc002__overlay-card {
    width: auto;
    max-width: 640px;
    background: #fff;
    padding: 28px 32px 20px;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  }
}
@media (min-width: 992px) {
  .bc002__overlay-card {
    /* wide enough for the longest headline to stay on one line */
    max-width: 800px;
    padding: 32px 40px 22px;
    border-radius: 20px;
  }
}
@media (min-width: 1441px) {
  .bc002__overlay-card {
    max-width: 960px;
    padding: 40px 48px 28px;
    border-radius: 22px;
  }
}

/* Overlay text */
.bc002__title {

  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
  font-size: 1.5rem;
  color: #004391;
}
.bc002__desc {

  margin: 0;
  line-height: 1.7;
  font-size: 0.875rem;
  color: #004391;
}
@media (min-width: 768px) {
  .bc002__title { color: #004391; font-size: 2rem; }
  .bc002__desc { color: #004391; font-size: 1rem; max-width: 520px; }
}
@media (min-width: 992px) {
  .bc002__title { font-size: 2.5rem; }
}
@media (min-width: 1441px) {
  .bc002__title { font-size: 3rem; }
  .bc002__desc { font-size: 1.25rem; max-width: 640px; }
}

/* Navigation arrows — edge-positioned simple chevrons */
.bc002__main .swiper-button-prev,
.bc002__main .swiper-button-next {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  top: 50%;
  margin-top: -20px;
}
.bc002__main .swiper-button-prev { left: 8px; }
.bc002__main .swiper-button-next { right: 8px; }
.bc002__main .swiper-button-prev::after,
.bc002__main .swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
  color: #004391;
}
.bc002__main .swiper-button-prev:hover,
.bc002__main .swiper-button-next:hover {
  background: rgba(255,255,255,0.9);
}

/* Thumb tabs */
.bc002__tabs {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin-top: -90px;
    padding: 0 0 40px 0;
}
@media (max-width: 767px) {
  .bc002__tabs {
    /* keep the overlapping pill style, just smaller */
    margin-top: -55px;
    padding: 0 12px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
  }
  .bc002__tabs-pill {
    /* prevent the inline-flex pill from shrinking when the row scrolls */
    flex-shrink: 0;
  }
}
.bc002__tabs-pill {
  display: inline-flex;
  max-width: 100%;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.bc002__thumbs {
  overflow: visible;
}
.bc002__thumbs .swiper-wrapper {
  display: flex;
}
.bc002__thumbs .swiper-slide {
  width: auto !important;
  flex-shrink: 0;
  cursor: pointer;
  text-align: center;
  padding: 11px 30px;

  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  border-radius: 999px;
  transition: all 0.25s ease;
  white-space: nowrap;
  user-select: none;
}
.bc002__thumbs .swiper-slide:hover {
  color: #004391;
}
.bc002__thumbs .swiper-slide-thumb-active {
  background: linear-gradient(135deg, #0c4da2 0%, #0090E0 100%);
  color: #fff !important;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,144,224,0.35);
}
@media (max-width: 767px) {
  .bc002__thumbs .swiper-slide {
    font-size: 0.9rem;
    padding: 9px 18px;
  }
  .bc002__tabs-pill {
    border-radius: 16px;
  }
}

/* ============================================
   BLOCK-CONTENT-002: GREEN PRODUCT
   ============================================ */
.block-content-002 {
  position: relative;
  background-image: url('https://web.cpac.co.th/_next/static/media/green-product-bg.1303de81.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 56px 24px 0;
}
@media (max-width: 767px) {
  .block-content-002 {
    background-image: url('https://web.cpac.co.th/_next/static/media/green-product-bg-mobile.1bc23d19.jpg');
    min-height: 600px;
    padding: 40px 20px 0;
  }
}
@media (min-width: 1200px) {
  .block-content-002 { min-height: 780px; padding-top: 64px; }
}
@media (min-width: 1441px) {
  .block-content-002 { min-height: 900px; padding-top: 72px; }
}
.block-content-002__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
/* Title */
.block-content-002__title {

  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.2;
}
.block-content-002__title-green {
  color: #2E7D32;
}
.block-content-002__title-light {
  color: #004391;
  font-weight: 300;
}
@media (max-width: 767px) {
  .block-content-002__title { font-size: 2rem; }
}
@media (min-width: 1200px) {
  .block-content-002__title { font-size: 3.5rem; }
}
/* Description */
.block-content-002__desc {

  font-size: 1rem;
  color: #004391;
  margin: 0 0 4px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .block-content-002__desc { font-size: 0.875rem; }
}
/* Highlight tagline */
.block-content-002__highlight {

  font-size: 1.25rem;
  color: #2E7D32;
  margin: 0 0 32px;
  line-height: 1.6;
}
.block-content-002__highlight strong {
  font-weight: 700;
  background: linear-gradient(90deg, #2E7D32, #43A047);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 767px) {
  .block-content-002__highlight { font-size: 1rem; margin-bottom: 24px; }
}
/* Icon row */
.block-content-002__icons {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
@media (max-width: 991px) {
  .block-content-002__icons { gap: 24px; }
}
@media (max-width: 767px) {
  .block-content-002__icons { gap: 16px; }
}
.block-content-002__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 140px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.block-content-002__icon-item:hover {
  transform: translateY(-6px);
}
@media (max-width: 767px) {
  .block-content-002__icon-item { width: 100px; gap: 10px; }
}
.block-content-002__icon-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2.5px solid #4CAF50;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(76,175,80,0.08);
}
.block-content-002__icon-circle img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.block-content-002__icon-item:hover .block-content-002__icon-circle {
  border-color: #2E7D32;
  box-shadow: 0 6px 24px rgba(76,175,80,0.22);
  background: #fff;
}
.block-content-002__icon-item:hover .block-content-002__icon-circle img {
  transform: scale(1.08);
}
@media (max-width: 767px) {
  .block-content-002__icon-circle { width: 80px; height: 80px; }
  .block-content-002__icon-circle img { width: 48px; height: 48px; }
}
@media (min-width: 1200px) {
  .block-content-002__icon-circle { width: 140px; height: 140px; }
  .block-content-002__icon-circle img { width: 84px; height: 84px; }
}
.block-content-002__icon-label {

  font-size: 0.8125rem;
  color: #004391;
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
  transition: color 0.2s;
}
.block-content-002__icon-item:hover .block-content-002__icon-label {
  color: #2E7D32;
}
/* Bottom actions */
.block-content-002__actions {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: 90%;
}
@media (max-width: 767px) {
  .block-content-002__actions {
    flex-direction: column;
    bottom: 20px;
    width: 90%;
  }
}
/* Search bar */
.block-content-002__search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(0,67,145,0.12);
  border-radius: 999px;
  padding: 4px 6px 4px 24px;
  min-width: 420px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
@media (max-width: 767px) {
  .block-content-002__search { min-width: auto; width: 100%; }
}
.block-content-002__search input {
  flex: 1;
  border: none;
  background: none;

  font-size: 0.875rem;
  color: #6b7280;
  outline: none;
  padding: 8px 0;
}
.block-content-002__search-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,67,145,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.block-content-002__search-btn:hover {
  background: rgba(0,67,145,0.15);
}
/* CTA button */
.block-content-002__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  font-size: 0.9375rem;
  font-weight: 600;
  color: #004391;
  text-decoration: none;
  border: 2px solid rgba(0,67,145,0.15);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,67,145,0.10);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.block-content-002__cta:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,67,145,0.18);
}
.block-content-002__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0c4da2;
  flex-shrink: 0;
}

/* ============================================
   LANGUAGE SWITCHER - Hide on Mobile
   ============================================ */
@media (max-width: 991px) {
  .css-19muecv {
    display: none !important;
  }
  header .MuiToolbar-root .css-19muecv .nav-btn-wrap {
    display: none !important;
  }
}

/* ============================================
   BLOCK-CAROUSEL-002 THUMBS - Hide on Mobile
   ============================================ */
@media (max-width: 767px) {
  .bc002__thumbs {
    display: none !important;
  }
}

/* ============================================
   BLOCK-PRODUCT-001: Product Hero Banner
   ============================================ */
.block-product-001 {
  position: relative;
  overflow: hidden;
}
.block-product-001__banner {
  position: relative;
  width: 100%;
}
.block-product-001__img {
  width: 100%;
  height: auto;
  display: block;
}
.block-product-001__img--desktop { display: block; }
.block-product-001__img--mobile { display: none; }
@media (max-width: 767px) {
  .block-product-001__img--desktop { display: none; }
  .block-product-001__img--mobile { display: block; }
}
.block-product-001__overlay {
  position: absolute;
  bottom: 12%;
  left: 0;
  width: 100%;
  text-align: left;
  pointer-events: none;
  padding: 0 48px;
}
.block-product-001__title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.2;
  -webkit-text-stroke: 1.5px #004391;
  paint-order: stroke fill;
  text-shadow: 2px 3px 6px rgba(0,67,145,0.25);
}
.block-product-001__desc {
  font-size: 1.75rem;
  font-weight: 600;
  color: #0c4da2;
  margin: 0;
  font-style: italic;
  text-shadow: 1px 2px 4px rgba(255,255,255,0.5);
}
@media (max-width: 991px) {
  .block-product-001__overlay { padding: 0 32px; }
  .block-product-001__title { font-size: 2.5rem; }
  .block-product-001__desc { font-size: 1.25rem; }
}
@media (max-width: 767px) {
  .block-product-001__overlay { bottom: 8%; padding: 0 20px; }
  .block-product-001__title { font-size: 1.5rem; -webkit-text-stroke: 1px #004391; }
  .block-product-001__desc { font-size: 0.875rem; }
}
/* Bottom icon */
.block-product-001__icon-wrap {
  display: flex;
  justify-content: center;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}
.block-product-001__icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,67,145,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e8f0f8;
}
.block-product-001__icon-circle img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* --- Project carousel section spacing --- */
div.MuiBox-root.css-muwg19 {
  margin-top: 60px !important;
}
@media (max-width: 991px) {
  div.MuiBox-root.css-muwg19 {
    margin-top: 20px !important;
  }
}

/* --- Project carousel card: remove black border --- */
.css-muwg19 .MuiCard-root,
.css-muwg19 .css-1ji6kdc,
.css-muwg19 .MuiPaper-root {
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0,67,145,0.08) !important;
}
.css-muwg19 a,
.css-muwg19 a:focus,
.css-muwg19 a:active,
.css-muwg19 a:visited,
.css-muwg19 .swiper-slide *,
.css-muwg19 .css-79elbk {
  border: none !important;
  outline: none !important;
}

/* ============================================
   BLOCK-LAYOUT-001: Product Series / Assessment Sections
   ============================================ */
.block-layout-001 {
  padding: 32px 0 64px;
  background: #fff;
}
.block-layout-001 .MuiContainer-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Hero intro title block --- */
.css-w9zzj1 {
  text-align: center;
  margin-bottom: 60px;
}
/* หน้าสินค้าและบริการ: ลดเฉพาะระยะด้านบนหัวข้อเหลือครึ่งเดียว
   (แบนเนอร์ 60→30, section padding-top 64→32, กล่องหัวข้อ padding-top 32→16)
   ระยะด้านล่างทั้งหมดคงค่าเดิม */
.block-layout-001 .css-w9zzj1 {
  margin-bottom: 60px;
  padding-top: 16px;
  padding-bottom: 32px;
}
body:has(.block-layout-001) .css-cc0vvn {
  margin-bottom: 30px;
}

/* --- Hero intro spacing --- */
.bl001-hero-intro {
  margin-bottom: 80px;
}
/* Intro subtitle text → black, 1rem (all product/service pages) */
.bl001-hero-intro .css-q5fye1 {
  color: #1a1a1a !important;
  font-size: 1rem !important;
}

/* --- Row layout --- */
.bl001-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 60px;
}
.bl001-row--reverse {
  flex-direction: row-reverse;
}
.bl001-content {
  flex: 1.3;
  min-width: 0;
}
/* flex 1 -> 1.3 ทำให้คอลัมน์ภาพกว้างขึ้น 15% พอดี (43.5% -> 50% ของพื้นที่แถว) */
.bl001-image {
  flex: 1.3;
  min-width: 0;
}

/* --- Series badge --- */
.bl001-series-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 12px 4px 4px;
  background: #fff;
  border: 1.5px solid #004391;
  border-radius: 0;
}
.bl001-badge-logo {
  height: 22px;
  width: auto;
}
.bl001-badge-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #004391;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
}
.bl001-badge-name small {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  display: block;
  margin-top: 1px;
}

/* --- Section number --- */
.bl001-num {
  color: #0c4da2;
  font-weight: 700;
}

/* --- Title --- */
.bl001-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #004391;
  margin: 0 0 12px;
  line-height: 1.4;
}
.bl001-title strong {
  font-weight: 700;
  color: #0c4da2;
}

/* --- Description --- */
.bl001-desc {
  font-size: 0.925rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* --- Bullet list inside the assessment steps --- */
.bl001-list {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: disc inside !important;
}
.bl001-list > li {
  display: list-item !important;
  list-style: disc inside !important;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;
  margin-bottom: 8px;
}
.bl001-sublist {
  margin: 8px 0 4px;
  padding-left: 22px;
  list-style: circle inside !important;
}
.bl001-sublist > li {
  display: list-item !important;
  list-style: circle inside !important;
  font-size: 0.88rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* --- Label box --- */
.bl001-label-box {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #004391;
  border: 1.5px solid #004391;
  border-radius: 0;
  padding: 8px 20px;
  margin-bottom: 16px;
}

/* --- Product list --- */
.bl001-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bl001-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}
.bl001-list li + li {
  border-top: 1px solid #eef2f7;
}
.bl001-plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.bl001-list a {
  font-size: 0.925rem;
  font-weight: 500;
  color: #004391;
  text-decoration: none;
  transition: color 0.2s;
}
.bl001-list a:hover {
  color: #0c4da2;
}
.bl001-list span:not(.bl001-plus) {
  font-size: 0.925rem;
  color: #004391;
  line-height: 1.6;
}
.bl001-list span strong {
  font-weight: 600;
  color: #004391;
}

/* --- Image frame with cyan background --- */
.bl001-frame-wrap {
  position: relative;
  padding-right: 28px;
  padding-bottom: 28px;
}
.bl001-row--reverse .bl001-frame-wrap {
  padding-right: 0;
  padding-left: 28px;
  padding-bottom: 28px;
}
.bl001-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  background: linear-gradient(135deg, #3a72c4 0%, #0c4da2 55%, #004391 100%);
  border-radius: 0;
  overflow: hidden;
}
.bl001-row--reverse .bl001-frame {
  right: auto;
  left: 0;
}
.bl001-frame-lines {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
}
.bl001-photo {
  position: relative;
  z-index: 1;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,67,145,0.15);
}

/* --- Swiper carousel in layout --- */
.bl001-swiper {
  width: 100%;
}
.bl001-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bl001-swiper .swiper-pagination {
  bottom: 12px !important;
}
.bl001-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #888;
  opacity: 1;
  transition: all 0.3s;
}
.bl001-swiper .swiper-pagination-bullet-active {
  background: #0c4da2;
  width: 28px;
  border-radius: 5px;
}

/* --- Static image (no carousel) --- */
.bl001-static-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Solid-color placeholder (no image) --- */
.bl001-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background: linear-gradient(135deg, #0c4da2 0%, #00a1e5 100%);
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .bl001-hero-intro {
    margin-bottom: 20px;
  }
  .bl001-row,
  .bl001-row--reverse {
    flex-direction: column;
    gap: 32px;
  }
  .bl001-row {
    margin-bottom: 20px;
  }
  .bl001-image {
    width: 100%;
  }
  .block-layout-001 {
    padding: 40px 0;
  }
}
@media (max-width: 575px) {
  .bl001-title {
    font-size: 1.5rem;
  }
  .bl001-row {
    gap: 24px;
    margin-bottom: 30px;
  }
  .block-layout-001 {
    padding: 32px 0;
  }
}

/* ============================================
   SCROLL FADE-IN ANIMATION
   ============================================ */
.scroll-fade {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-fade--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Preserve translateX(-50%) on centered absolute elements */
.css-1kjizbl.scroll-fade {
  transform: translateX(-50%) translateY(32px);
}
.css-1kjizbl.scroll-fade--visible {
  transform: translateX(-50%) translateY(0);
}
/* Stagger cards within a grid row */
.MuiGrid-root.scroll-fade:nth-child(2) { transition-delay: 0.1s; }
.MuiGrid-root.scroll-fade:nth-child(3) { transition-delay: 0.2s; }
.MuiGrid-root.scroll-fade:nth-child(4) { transition-delay: 0.15s; }
.MuiGrid-root.scroll-fade:nth-child(5) { transition-delay: 0.25s; }
.MuiGrid-root.scroll-fade:nth-child(6) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   NEWS DETAIL PAGE
   ============================================ */
.news-detail-hero {
  padding: 32px 0 0;
  background: linear-gradient(180deg, #f7fcff 0%, #fff 100%);
}
.news-detail-hero-img {
  border-radius: 16px;
  overflow: hidden;
}
/* ความสูงตามสัดส่วนไฟล์ต้นฉบับ — ไม่ครอปภาพ */
.news-detail-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}
.news-detail-content {
  padding: 40px 0 56px;
}
.news-detail-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.news-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.news-detail-date {
  font-size: 0.875rem;
  color: #888;
}
.news-detail-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #004391;
  line-height: 1.4;
  margin-bottom: 32px;
}
.news-detail-body p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
}
.news-detail-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #004391;
  margin: 32px 0 16px;
}
.news-detail-img-inline {
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
}
.news-detail-img-inline img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Related News */
.news-related {
  padding: 48px 0 56px;
  background: #f7fcff;
}
.news-related-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #004391;
  margin-bottom: 24px;
}
.news-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.news-card-link:hover .MuiCard-root {
  box-shadow: 0 4px 20px rgba(0,67,145,0.12);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

@media (max-width: 600px) {
  .news-detail-title {
    font-size: 1.35rem;
  }
  .news-detail-content {
    padding: 24px 0 40px;
  }
  .news-detail-hero {
    padding: 16px 0 0;
  }
  .news-related {
    padding: 32px 0 40px;
  }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero Section */
.about-hero {
  padding-top: 60px;
  padding-bottom: 0;
}
.about-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #004391;
  margin-bottom: 12px;
}
.about-hero .subtitle {
  font-size: 1rem;
  color: #004391;
  margin-bottom: 40px;
  line-height: 1.7;
}

/* Stat Boxes */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.about-stat-box {
  text-align: center;
  padding: 32px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}
.about-stat-box .stat-label {
  font-size: 1rem;
  color: #004391;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.5;
}
.about-stat-box .stat-number {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(90deg, #0c4da2, #004391);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-stat-box .stat-unit {
  font-size: 1rem;
  color: #004391;
}

/* Description Section */
.about-description {
  padding-bottom: 48px;
}
.about-description p {
  font-size: 1rem;
  color: #004391;
  line-height: 1.7;
}

/* Value Creation Section */
.about-value {
  padding-bottom: 48px;
}
.about-value h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #004391;
  text-align: center;
  margin-bottom: 20px;
}
.about-value p {
  font-size: 1rem;
  color: #004391;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Team Management Section */
.about-team {
  padding-bottom: 48px;
}
.about-team h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #004391;
  text-align: center;
  margin-bottom: 32px;
}
.about-team-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.about-team-row:last-child {
  margin-bottom: 0;
}
.about-team-row.row-1 {
  display: flex;
  justify-content: center;
}
.about-team-row.row-1 .about-team-card {
  width: 300px;
}
.about-team-row.row-2 {
  display: flex;
  justify-content: center;
}
.about-team-row.row-2 .about-team-card {
  width: calc(25% - 12px);
}
.about-team-row.row-4 {
  grid-template-columns: repeat(3, 1fr);
}
.about-team-card {
  position: relative;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  transition: all 0.3s ease;
}
.about-team-card .team-photo {
  width: 100%;
  background: #d0d5da;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  transition: all 0.3s ease;
}
.about-team-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.about-team-card:hover .team-photo img,
.about-team-card:hover .team-photo svg {
  transform: scale(1.05);
}
.about-team-card .team-photo svg {
  width: 80px;
  height: 80px;
  color: #a0a8b0;
  transition: transform 0.3s ease;
}
.about-team-card .team-detail {
  padding: 12px 2px 0;
  text-align: left;
  transition: all 0.3s ease;
}
.about-team-card .team-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a2a5e;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.about-team-card .team-position {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.4;
  transition: all 0.3s ease;
}

/* Masterpiece Carousel Section */
.about-masterpiece {
  padding-bottom: 0;
}
.masterpiece-slide {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: #003a7d;
}
.masterpiece-slide .slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.masterpiece-slide .slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,67,145,0.92) 0%, rgba(0,67,145,0.7) 40%, rgba(0,67,145,0.15) 70%, transparent 100%);
}
.masterpiece-slide .slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.masterpiece-slide .slide-info {
  max-width: 480px;
  color: #fff;
}
.masterpiece-slide .slide-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.masterpiece-slide .slide-icon svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}
.masterpiece-slide .slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.masterpiece-slide .slide-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 12px;
  opacity: 0.95;
}
.masterpiece-slide .slide-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  opacity: 0.85;
}
.masterpiece-bottom {
  background: linear-gradient(135deg, #004391 0%, #0068c9 100%);
  color: #fff;
  padding: 16px 0;
}
.masterpiece-bottom .bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.masterpiece-bottom .project-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.masterpiece-bottom .project-number {
  font-size: 2rem;
  font-weight: 700;
  opacity: 0.6;
}
.masterpiece-bottom .project-name {
  font-size: 1.125rem;
  font-weight: 600;
}
.masterpiece-bottom .project-year {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.masterpiece-bottom .slide-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.masterpiece-bottom .slide-counter {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.masterpiece-bottom .slide-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.masterpiece-bottom .slide-btn:hover {
  background: rgba(255,255,255,0.15);
}

/* Company VDO Section */
.about-vdo {
  padding-top: 60px;
  padding-bottom: 60px;
}
.about-vdo-player {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.about-vdo-player iframe,
.about-vdo-player video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.about-vdo-player .vdo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #004391 0%, #0068c9 50%, #0c4da2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.about-vdo-player .vdo-placeholder svg {
  width: 64px;
  height: 64px;
  fill: #fff;
  opacity: 0.9;
  margin-bottom: 12px;
}
.about-vdo-player .vdo-placeholder span {
  font-size: 1rem;
  opacity: 0.8;
}

/* Download Section */
.about-download {
  padding-bottom: 60px;
  padding-top: 12px;
}
.about-download h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.dl-subtitle {
  font-size: 1rem;
  color: #444;
  margin-bottom: 20px;
}
/* download.html: same heading treatment as the about page section */
.dl-heading h3 { margin-bottom: 8px; }
.dl-result {
  font-size: 1rem;
  color: #004391;
  margin: 0 0 20px;
}
.about-dl-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}
.about-dl-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.about-dl-card .dl-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.about-dl-card .dl-icon {
  width: 48px;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-dl-card .dl-icon svg {
  width: 48px;
  height: 56px;
  color: #cddbe7;
}
.about-dl-card .dl-icon .dl-badge {
  position: absolute;
  bottom: 2px;
  left: 0;
  background: #0c4da2;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.4;
}
.about-dl-card .dl-info h6 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #004391;
  margin-bottom: 2px;
}
.about-dl-card .dl-info p {
  font-size: 0.8125rem;
  color: #999;
}
.about-dl-card .dl-action {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0c4da2;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.about-dl-card .dl-action svg {
  width: 18px;
  height: 18px;
}

/* About Page Responsive */
@media (max-width: 767px) {
  .about-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .about-stat-box .stat-number {
    font-size: 2.25rem;
  }
  .about-team-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .about-team-row.row-1 {
    display: flex !important;
  }
  .about-team-row.row-1 .about-team-card {
    width: 100%;
  }
  .about-team-row.row-2 .about-team-card {
    width: 100%;
  }
  .about-hero h1 {
    font-size: 1.375rem;
  }
  .masterpiece-slide {
    height: 400px;
  }
  .masterpiece-slide .slide-title {
    font-size: 1.75rem;
  }
  .masterpiece-slide .slide-overlay {
    background: linear-gradient(180deg, rgba(0,67,145,0.9) 0%, rgba(0,67,145,0.5) 100%);
  }
  .masterpiece-bottom .bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ============================================
   NEWS / ARTICLES TABS
   ============================================ */
.news-tabs { padding: 16px 0; margin-bottom: 32px; }
/* padding บน-ล่าง เผื่อที่ให้ปุ่มลอยขึ้นตอน hover (hvr-float) ไม่ให้โดน
   overflow-x: auto ตัดหัว แล้วหักออกด้วย margin ติดลบเพื่อให้ระยะห่างเท่าเดิม */
.news-tabs-inner { display: flex; gap: 10px; overflow-x: auto; padding: 10px 4px; margin: -10px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.news-tabs-inner::-webkit-scrollbar { display: none; }
.news-tab { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; padding: 8px 20px; border-radius: 20px; border: 1.5px solid #004391; background: #fff; color: #004391; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; flex-shrink: 0; font-family: inherit; }
.news-tab:hover { background: #f0f4f8; }
.news-tab.active { background: #004391; color: #fff; border-color: #004391; font-weight: 600; }
.news-card-grid[data-hidden="true"] { display: none !important; }

/* ============================================
   PRIVACY SETTINGS - TOGGLE SWITCH
   ============================================ */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }

/* ============================================
   RECOMMEND SWIPER - allow hover shadow
   ============================================ */
.recommend-swiper {
  overflow: clip !important;
  overflow-y: visible !important;
  overflow-x: clip !important;
  padding: 16px 0;
  margin: -16px 0;
}


/* ============================================
   ABOUT HERO BANNER — top of about.html
   ============================================ */
.about-hero-banner {
  width: 100%;
  background: #f4f7fb;
  overflow: hidden;
}
.about-hero-banner__image {
  width: 100%;
  line-height: 0;
}
.about-hero-banner__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (max-width: 768px) {
  .about-hero-banner__image img {
    min-height: 180px;
    object-fit: cover;
  }
}


/* ============================================
   ABOUT INTRO — CPAC SHO-BOND & MIT
   ============================================ */
.about-intro {
  padding: 60px 24px 48px;
  background: #fff;
}
.about-intro__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #0c4da2;
  text-align: center;
  line-height: 1.3;
  margin: 0 0 12px;
}
.about-intro__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  color: #0c4da2;
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.6;
}
.about-intro__desc {
  max-width: 920px;
  margin: 0 auto 48px;
  font-size: 1rem;
  line-height: 1.85;
  color: #334155;
  text-align: center;
}
.about-intro__desc strong { color: #0c4da2; }
.about-intro__icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.about-intro__icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 14px 22px;
  background: linear-gradient(135deg, #f4faff 0%, #e8f4fd 100%);
  border: 1px solid rgba(0, 161, 229, 0.18);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 67, 145, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.about-intro__icon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 161, 229, 0.4);
  box-shadow: 0 14px 32px rgba(0, 67, 145, 0.18);
}
.about-intro__icon-img {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 67, 145, 0.10);
}
.about-intro__icon-img img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.about-intro__icon-card p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0c4da2;
  line-height: 1.5;
}
@media (max-width: 991px) {
  .about-intro__icons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .about-intro__icons { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .about-intro { padding: 40px 16px 32px; }
  .about-intro__icon-card { padding: 18px 10px 16px; }
  .about-intro__icon-img { width: 64px; height: 64px; margin-bottom: 10px; }
  .about-intro__icon-img img { width: 42px; height: 42px; }
  .about-intro__icon-card p { font-size: 0.85rem; }
  .about-intro__desc { line-height: 1.75; font-size: 0.95rem; }
}


/* ============================================
   ABOUT PAST PROJECTS — โครงการที่ผ่านมา (slider)
   ============================================ */
.about-past-projects {
  padding: 56px 24px 64px;
  background: #fff;
}
.about-past-projects .about-page-container {
  max-width: 1240px;
  margin: 0 auto;
}
.past-projects__head {
  margin-bottom: 28px;
}
.past-projects__title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  color: #0c4da2;
  margin: 0 0 8px;
  line-height: 1.4;
}
.past-projects__subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}
.past-projects__slider {
  position: relative;
  padding: 0 72px;
}
.past-projects__swiper {
  overflow: hidden;
  /* internal padding so card shadows render fully inside the clip area (incl. hover lift) */
  padding: 18px 10px 44px;
  margin: -18px -10px -44px;
}
.past-projects__swiper .swiper-slide {
  height: auto;
  display: flex;
  padding: 0 4px;
  box-sizing: border-box;
}
.past-projects__swiper .swiper-slide .past-project-card {
  width: 100%;
}
.past-project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 30, 80, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.past-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 30, 80, 0.20);
}
.past-project-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8f4fd;
}
.past-project-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.past-project-card:hover .past-project-card__img img {
  transform: scale(1.06);
}
.past-project-card__caption {
  padding: 12px 16px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #004391;
  text-align: left;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.past-project-card__desc {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 0.9rem;
  color: #5b6b7d;
  line-height: 1.5;
}
.past-projects__nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: none;
  background: linear-gradient(135deg, #ffffff, #eef4fb);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 30, 80, 0.20);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c4da2;
  transition: background 0.25s ease, transform 0.25s ease;
}
.past-projects__nav:hover {
  background: linear-gradient(135deg, #0c4da2, #00a1e5);
  color: #fff;
}
.past-projects__nav-prev { left: 8px; }
.past-projects__nav-next { right: 8px; }
.past-projects__nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 575px) {
  .about-past-projects { padding: 40px 16px 48px; }
  .past-projects__slider { padding: 0 48px; }
  .past-projects__nav-prev { left: 4px; }
  .past-projects__nav-next { right: 4px; }
  .past-projects__nav { width: 36px; height: 36px; margin-top: -18px; }
  .past-project-card__caption { font-size: 0.9rem; padding: 10px 12px; }
}


/* ============================================
   ABOUT TRUST BANNER — ต่อยอดความเชื่อมั่นจาก CPAC
   (Text overlay on background image)
   ============================================ */
.about-trust-banner {
  padding: 56px 24px 64px;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
}
.about-trust-banner .about-page-container {
  max-width: 1240px;
  margin: 0 auto;
}
.trust-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 480px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0, 30, 80, 0.18);
}
.trust-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.trust-banner__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Soft fade-to-white gradient on the LEFT half so text reads cleanly */
.trust-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.88) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0)   70%
  );
  pointer-events: none;
}
.trust-banner__text {
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 560px;
  padding: 56px 56px 56px 64px;
  text-align: center;
}
.trust-banner__logo {
  margin-bottom: 36px;
  text-align: center;
}
.trust-banner__logo img {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.trust-banner__title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  color: #0c4da2;
  margin: 0 0 22px;
  line-height: 1.5;
}
.trust-banner__brand {
  color: #0c4da2;
  font-weight: 800;
}
.trust-banner__desc {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.95;
  color: #334155;
  margin: 0;
}
.trust-banner__desc strong { color: #0c4da2; }

@media (max-width: 991px) {
  .trust-banner__inner {
    min-height: 0;
  }
  .trust-banner__inner::before {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.82) 55%,
      rgba(255,255,255,0)   100%
    );
  }
  .trust-banner__text {
    width: 100%;
    max-width: 100%;
    padding: 36px 28px 220px;
  }
  .trust-banner__logo { text-align: center; }
  .trust-banner__logo img { margin: 0 auto; width: 150px; }
}
@media (max-width: 575px) {
  .about-trust-banner { padding: 40px 16px 48px; }
  .trust-banner__text { padding: 28px 20px 180px; }
  .trust-banner__logo img { width: 130px; }
  .trust-banner__title { line-height: 1.45; margin-bottom: 16px; }
  .trust-banner__desc { line-height: 1.85; }
}


/* ============================================
   BLOCK-SERVICES-INTRO — บริการของเรา (index.html)
   ============================================ */
.block-services-intro {
  padding: 64px 24px 72px;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%);
  text-align: center;
}
.services-intro__inner {
  max-width: 880px;
  margin: 0 auto;
}
.services-intro__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #0c4da2;
  margin: 0 0 18px;
  line-height: 1.4;
}
.services-intro__desc {
  font-size: 1rem;
  line-height: 1.95;
  color: #334155;
  margin: 0 0 28px;
}
.services-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 36px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0c4da2, #00a1e5);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 67, 145, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, letter-spacing 0.25s ease;
  letter-spacing: 0.01em;
}
.services-intro__btn:hover {
  transform: translateY(-2px);
  letter-spacing: 0.04em;
  box-shadow: 0 14px 32px rgba(0, 67, 145, 0.42);
}
.services-intro__btn svg {
  transition: transform 0.25s ease;
}
.services-intro__btn:hover svg { transform: translateX(3px); }
@media (max-width: 575px) {
  .block-services-intro { padding: 48px 16px 56px; }
  .services-intro__btn { padding: 11px 28px; font-size: 0.95rem; }
}

/* ============================================
   BLOCK-INFRA-001 — ประเภทโครงสร้างที่เราดูแล (index.html)
   การ์ดภาพประกอบต่อท้ายบล็อก "บริการของเรา"
   ============================================ */
.block-infra-001 {
  padding: 16px 24px 72px;
  /* ไล่สีต่อจาก .block-services-intro ให้ดูเป็นบล็อกเดียวกัน */
  background: #fff;
  text-align: center;
}
.block-infra-001__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.block-infra-001__title {
  /* ขนาดเดียวกับหัวข้อ "บริการของเรา" (.services-intro__title) */
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.4;
  color: #0c4da2;
}
.block-infra-001__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.infra-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 67, 145, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infra-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 67, 145, 0.16);
}
.infra-card__title {
  margin: 0;
  padding: 16px 18px 12px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0c4da2;
  line-height: 1.35;
}
/* ภาพประกอบชิดขอบล่างของการ์ด เหมือนต้นแบบ */
.infra-card__img {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.infra-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 991px) {
  .block-infra-001__grid { gap: 12px; }
  .infra-card__title { font-size: 0.95rem; padding: 14px 14px 10px; }
}
@media (max-width: 767px) {
  /* จอแคบ: เรียงเป็นคอลัมน์เดียว ชื่อการ์ดยาว ๆ จะได้ไม่ตกบรรทัดจนการ์ดสูงไม่เท่ากัน */
  .block-infra-001 { padding: 0 16px 56px; }
  .block-infra-001__grid { grid-template-columns: 1fr; gap: 14px; }
  .infra-card__title { font-size: 1rem; }
  .infra-card__img { aspect-ratio: 16 / 9; }
}

/* ============================================
   BLOCK-PROCESS-001 — ขั้นตอนการทำงาน (index.html)
   แถวยาว 3 แถว: หัวข้อซ้าย ภาพประกอบขวา
   ============================================ */
.block-process-001 {
  padding: 40px 24px 76px;
  background: #fff;
  text-align: center;
}
.block-process-001__inner {
  max-width: 900px;
  margin: 0 auto;
}
.block-process-001__title {
  /* ขนาดเดียวกับหัวข้อ "บริการของเรา" (.services-intro__title) */
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.4;
  color: #0c4da2;
}
.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* สัดส่วนการ์ดตามเรฟ 275x40 — ภาพประกอบสูงเต็มการ์ดชิดขวา หัวข้ออยู่ซ้าย */
.process-row {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 275 / 40;
  padding: 10px 32px 10px 30px;
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 67, 145, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 67, 145, 0.14);
}
.process-row__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: #0c4da2;
  line-height: 1.35;
  text-align: left;
}
.process-row__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.process-row__img img {
  height: 100%;
  width: auto;
  display: block;
}
@media (max-width: 767px) {
  .block-process-001 { padding: 4px 16px 56px; }
  .process-row {
    padding: 8px 16px 8px 18px;
  }
  /* จอแคบ: การ์ดเตี้ยลงแต่หัวข้อยาวเท่าเดิม จนเกือบชนภาพ จึงไล่สีขาวรองไว้ */
  .process-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.96) 46%,
      rgba(255, 255, 255, 0) 66%);
  }
  .process-row__title { font-size: 1rem; }
}

/* ============================================
   BLOCK-CTA-001 — การ์ดลิงก์ 2 ใบ (index.html)
   ภาพด้านบน + ปุ่มด้านล่าง ใช้แทน BLOCK-CONCRETE-001
   ============================================ */
.block-cta-001 {
  padding: 56px 24px 64px;
  background: #fff;
}
.block-cta-001__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 67, 145, 0.14);
}
.cta-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cta-card:hover .cta-card__media img { transform: scale(1.05); }

/* ปุ่ม — โทนเดียวกับปุ่มเดิมของ BLOCK-CONCRETE-001 */
.cta-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #004391;
  text-decoration: none;
  border: 2px solid rgba(0, 67, 145, 0.15);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 67, 145, 0.10);
}
.cta-card__btn:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 67, 145, 0.22);
}
.cta-card__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00a1e5;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .block-cta-001 { padding: 40px 16px 48px; }
  .block-cta-001__inner { grid-template-columns: 1fr; gap: 22px; }
  .cta-card__btn { font-size: 0.875rem; padding: 7px 8px 7px 18px; }
  .cta-card__btn-icon { width: 28px; height: 28px; }
}

/* ============================================
   BLOCK-CONCRETE-001 — คอนกรีตซีแพค (index.html)
   ============================================ */
.block-concrete-001 {
  position: relative;
  /* top padding in vw so the title position tracks the background image as it scales */
  padding: 6.5vw 24px 0;
  text-align: center;
  overflow: hidden;
  background-image: url('../images/day-city-view-3.jpg');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* image is 2:1, sized to 100% width → its height is ~50vw; lock section height to match so nothing detaches */
  min-height: 50vw;
}
.block-concrete-001__inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  z-index: 2;
}
.block-concrete-001__title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  color: #004391;
  margin: 0 0 18px;
  line-height: 1.3;
}
.block-concrete-001__desc {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.85;
  color: #475569;
  margin: 0 0 6px;
}
.block-concrete-001__highlight {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: #0c4da2;
  margin: 0;
}
.block-concrete-001__watermark {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'CPAC Modern', 'CPAC Loop', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(6rem, 14vw, 16rem);
  color: rgba(0, 161, 229, 0.14);
  letter-spacing: 0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
  white-space: nowrap;
}
.block-concrete-001__trucks {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  max-width: 1280px;
  width: 90%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.block-concrete-001__cta {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.block-concrete-001__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #004391;
  text-decoration: none;
  border: 2px solid rgba(0,67,145,0.15);
  border-radius: 999px;
  padding: 8px 10px 8px 24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,67,145,0.10);
  transition: all 0.2s ease;
}
.block-concrete-001__btn:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,67,145,0.22);
}
.block-concrete-001__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00a1e5;
  flex-shrink: 0;
}
@media (max-width: 991px) {
  .block-concrete-001 { padding: 40px 20px 80px; min-height: 480px; }
}
@media (max-width: 767px) {
  .block-concrete-001 { padding: 28px 20px 72px; min-height: 370px; }
  .block-concrete-001__title { font-size: 1.5rem; margin: 0 0 10px; line-height: 1.35; }
  .block-concrete-001__watermark { font-size: 5rem; top: 24%; }
  .block-concrete-001__trucks { bottom: 56px; width: 96%; }
  .block-concrete-001__cta { bottom: 18px; }
  .block-concrete-001__btn { font-size: 0.875rem; padding: 7px 8px 7px 20px; gap: 10px; }
  .block-concrete-001__btn-icon { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .block-concrete-001 { padding: 16px 16px 60px; min-height: 240px; }
  .block-concrete-001__title { font-size: 1.25rem; margin: 0 0 8px; }
  .block-concrete-001__cta { bottom: 14px; }
  .block-concrete-001__btn { font-size: 0.8125rem; padding: 6px 6px 6px 16px; gap: 8px; }
  .block-concrete-001__btn-icon { width: 26px; height: 26px; }
}

/* ============================================
   DOWNLOAD PAGE - Document type dropdown
   ============================================ */
.cpac-doctype-control {
  display: flex;
  align-items: center;
  min-width: 210px;
}
.cpac-doctype-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: #1a1a1a;
  padding: 6px 28px 6px 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 20px;
}
.cpac-doctype-select:focus { color: #004391; }
@media (max-width: 600px) {
  .cpac-doctype-control { min-width: 0; }
}

.about-dl-grid { margin-top: 24px; }

.about-dl-panel { padding: 24px 20px; }

/* ============================================
   PAGE TRANSITION - Skeleton loading
   Shown when navigating between pages (not first visit).
   ============================================ */
.cpac-skeleton {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.cpac-skeleton.hide { opacity: 0; pointer-events: none; }
.cpac-skeleton .sk-topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  border-bottom: 1px solid #eef2f6;
}
.cpac-skeleton .sk-logo { width: 130px; height: 38px; border-radius: 8px; }
.cpac-skeleton .sk-nav { display: flex; gap: 20px; }
.cpac-skeleton .sk-nav span { width: 72px; height: 14px; border-radius: 6px; display: inline-block; }
.cpac-skeleton .sk-hero { height: 340px; width: 100%; }
.cpac-skeleton .sk-container { max-width: 1152px; margin: 36px auto 0; padding: 0 16px; }
.cpac-skeleton .sk-line { height: 16px; border-radius: 6px; margin: 0 0 14px; }
.cpac-skeleton .sk-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.cpac-skeleton .sk-card { height: 250px; border-radius: 14px; }
@media (max-width: 900px) {
  .cpac-skeleton .sk-cards { grid-template-columns: repeat(2, 1fr); }
  .cpac-skeleton .sk-hero { height: 220px; }
}
@media (max-width: 600px) {
  .cpac-skeleton .sk-nav { display: none; }
}
.cpac-skeleton .sk-shimmer {
  background: #e8edf2;
  background-image: linear-gradient(90deg, #e8edf2 25%, #f3f8fc 37%, #e8edf2 63%);
  background-size: 400% 100%;
  animation: cpacSkShimmer 1.4s ease infinite;
}
@keyframes cpacSkShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ============================================
   HEADER NAV — CPAC Modern, 18px, SemiBold 600
   Header-only rule (does not affect body, footer, or content blocks).
   Applied to:
   - Top-level menu items (หน้าหลัก, เกี่ยวกับเรา, สินค้าและบริการ ▾,
     ข่าวสาร ▾, ติดต่อเรา)
   - Language switcher button (ภาษาไทย ▾)
   font-size is set on the link/button itself, not on children, so the
   chevron icon (.css-7j8jl uses rem) stays the original size.
   Note: CPAC Modern ships 300/500/700; the browser picks the nearest for 600.
   ============================================ */
header .MuiToolbar-root [role="navigation"] .MuiStack-root > a,
header .MuiToolbar-root [role="navigation"] .MuiStack-root > a > span,
header .MuiToolbar-root [role="navigation"] .MuiStack-root > .nav-btn-wrap > a,
header .MuiToolbar-root [role="navigation"] .MuiStack-root > .nav-btn-wrap > a > span,
header .MuiToolbar-root [role="navigation"] .MuiStack-root > .nav-btn-wrap > button,
header .MuiToolbar-root [role="navigation"] .MuiStack-root > .nav-btn-wrap > button > span,
header .MuiToolbar-root .css-19muecv > .nav-btn-wrap > button#lang-button {
  font-family: 'CPAC Modern', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

/* ============================================
   HEADER SUB-MENUS — CPAC Modern, 18px, Regular 400 (thin)
   Applied to dropdown panels:
   - .cpac-dropdown (news + language)
   - .cpac-mega / .cpac-mega-panel (products mega-menu)
   The JS-injected styles in common.js set 0.95rem / weight 500; this
   !important rule overrides them.
   ============================================ */
header .cpac-dropdown a,
header .cpac-dropdown a span,
header .cpac-mega a,
header .cpac-mega a span,
header .cpac-mega-panel a,
header .cpac-mega-panel a span {
  font-family: 'CPAC Modern', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
}

/* ============================================
   HEADER DROPDOWNS
   These rules were previously injected by common.js at DOMContentLoaded,
   which caused every page load to briefly show all dropdowns expanded
   before the JS ran. Defining them in the static stylesheet means the
   hidden state applies before first paint.
   Behavior handlers (mega-menu panel switching) still live in common.js.
   ============================================ */
.nav-btn-wrap {
  position: relative;
  white-space: nowrap;
}
header .MuiToolbar-root > a:first-child {
  flex-shrink: 0 !important;
}

/* Simple dropdown (single column) — news & language */
.cpac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  min-width: 240px;
  padding: 10px 0;
  z-index: 1300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  margin-top: 4px;
}
.nav-btn-wrap:hover .cpac-dropdown {
  opacity: 1;
  visibility: visible;
}
.cpac-dropdown a {
  position: relative;
  display: block;
  padding: 14px 20px;
  margin: 1px 10px;
  color: #004391;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s;
}
.cpac-dropdown a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s;
}
.cpac-dropdown a:hover,
.cpac-dropdown a.active {
  background: #eef8ff;
  color: #0c4da2;
}
.cpac-dropdown a:hover::before,
.cpac-dropdown a.active::before {
  background: #0c4da2;
}
.cpac-dropdown a.lang-disabled,
.cpac-drawer-lang-sub a.lang-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* Mega menu container — products */
.cpac-mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-top: 4px;
}
.nav-btn-wrap:hover .cpac-mega {
  opacity: 1;
  visibility: visible;
}

/* Each mega-menu panel is a separate card */
.cpac-mega-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 10px 0;
  min-width: 320px;
}
.cpac-mega-panel.panel-hidden { display: none; }
.cpac-mega-panel.panel-visible { display: block; }

.cpac-mega-panel a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin: 1px 10px;
  color: #004391;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
}
.cpac-mega-panel a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s;
}
.cpac-mega-panel a:hover,
.cpac-mega-panel a.active {
  background: #eef8ff;
  color: #0c4da2;
}
.cpac-mega-panel a:hover::before,
.cpac-mega-panel a.active::before {
  background: #0c4da2;
}
.cpac-mega-panel a .arrow {
  font-size: 1.2rem;
  font-weight: 700;
  color: #b0b8c0;
  transition: color 0.2s;
  margin-left: 16px;
}
.cpac-mega-panel a:hover .arrow,
.cpac-mega-panel a.active .arrow {
  color: #0c4da2;
}

/* Language dropdown variant — right-aligned */
.lang-dropdown {
  right: 0;
  left: auto;
  min-width: 160px;
}

/* ============================================
   PROJECT LIGHTBOX (block-thumbs-001 "ผลงานของเรา")
   Clickable thumbnail cards + full-screen image/description popup
   ============================================ */

/* --- Clickable variant of .thumb-card (base card is pointer-events:none) --- */
.thumb-card--clickable {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.thumb-card--clickable:hover,
.thumb-card--clickable:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.thumb-card--clickable:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* Hover veil + magnifier hint over the image */
.thumb-card--clickable .thumb-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 67, 145, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.thumb-card--clickable:hover .thumb-card__img::after,
.thumb-card--clickable:focus-visible .thumb-card__img::after { opacity: 1; }

/* --- การ์ด "โครงการที่ผ่านมา" ใช้ลูกเล่นชุดเดียวกัน (การ์ดฐานมี hover อยู่แล้ว) --- */
.past-project-card--clickable {
  cursor: pointer;
}
.past-project-card--clickable:focus-visible {
  outline: 3px solid #0c4da2;
  outline-offset: 3px;
}
.past-project-card--clickable .past-project-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 67, 145, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.past-project-card--clickable:hover .past-project-card__img::after,
.past-project-card--clickable:focus-visible .past-project-card__img::after { opacity: 1; }

/* --- Overlay --- */
.proj-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.proj-lb.is-open { opacity: 1; visibility: visible; }
body.proj-lb-lock { overflow: hidden; }

/* --- Dialog --- */
.proj-lb__dialog {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.proj-lb.is-open .proj-lb__dialog { transform: scale(1); }

.proj-lb__title {
  margin: 0 0 10px;
  padding-right: 48px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

/* --- Image stage --- */
.proj-lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 0;
}
/* The image keeps its own aspect ratio and the dialog is sized to match it
   (see initProjectLightbox), so portrait photos get no black side bars. */
.proj-lb__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 260px);
  margin: 0 auto;
  border-radius: 2px;
}

/* --- Prev / next --- */
.proj-lb__nav {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #004391;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.proj-lb__nav:hover { background: #fff; }
.proj-lb__nav--prev { left: 12px; }
.proj-lb__nav--next { right: 12px; }
.proj-lb__nav[hidden] { display: none; }

/* --- Close --- */
.proj-lb__close {
  position: absolute;
  top: -6px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #004391;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.proj-lb__close:hover { background: #fff; }

/* --- Counter + description --- */
.proj-lb__counter {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}
.proj-lb__counter[hidden] { display: none; }
.proj-lb__desc {
  margin: 12px 0 0;
  max-height: 25vh;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}
.proj-lb__desc[hidden] { display: none; }

@media (max-width: 767px) {
  .proj-lb { padding: 16px; }
  .proj-lb__dialog { max-height: calc(100vh - 32px); }
  .proj-lb__title { font-size: 0.95rem; padding-right: 40px; }
  .proj-lb__img { max-height: calc(100vh - 240px); }
  .proj-lb__nav { width: 34px; height: 34px; margin-top: -17px; font-size: 19px; }
  .proj-lb__nav--prev { left: 6px; }
  .proj-lb__nav--next { right: 6px; }
  .proj-lb__close { width: 32px; height: 32px; top: -4px; }
  .proj-lb__desc { font-size: 0.875rem; }
}

/* การ์ดข่าว (block-content-003) ที่อยู่นอกกรอบสไลเดอร์ — ซ่อนไม่ให้ล้นออกนอก
   คอนเทนเนอร์ (สไลเดอร์ตั้ง overflow: visible เพราะปุ่มลูกศรอยู่นอกกรอบ)
   คลาสนี้ถูกใส่/ถอดโดย _guardNewsOverflow() ใน common.js */
.block-content-003 .swiper-slide.news-slide--offframe {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ============================================
   HOVER.CSS — hvr-float
   ที่มา: https://ianlunn.github.io/Hover/ (MIT License)
   คัดมาเฉพาะเอฟเฟกต์ "Float" แล้วนำไปใช้กับลิงก์เมนูและปุ่มทั้งเว็บ
   ============================================ */

/* คลาสมาตรฐานของ Hover.css — ใส่ class="hvr-float" กับ element ไหนก็ได้ที่อยาก
   ให้ลอยขึ้นตอน hover */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  transform: translateY(-8px);
}

/* ใช้เอฟเฟกต์เดียวกันกับเมนูและปุ่มที่มีอยู่แล้วทั้งเว็บ
   - ไม่แตะ display / vertical-align ของคอมโพเนนต์เดิม (หลายปุ่มเป็น flex อยู่)
   - คง transition ของสี/เงา/เส้นขอบเดิมไว้ แล้วเพิ่ม transform เข้าไป
   ไม่รวม: เมนูบนเฮดเดอร์ (ดูรูปถัดล่าง) ลูกศรสไลเดอร์ ปุ่มควบคุม lightbox
   ปุ่มค้นหาที่อยู่ในช่องฟอร์ม (css-gb2xl8 / css-tg04mt) และเมนู drawer บนมือถือ
   — ปุ่มพวกนี้วางแบบ absolute หรืออยู่ในกรอบฟอร์ม ลอยขึ้นแล้วหลุดตำแหน่ง */
footer .MuiLink-root,
.MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt),
.news-tab,
.btn,
.services-intro__btn,
.block-concrete-001__btn {
  transform: perspective(1px) translateZ(0);
  transition: transform 0.3s ease-out,
              background-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease,
              letter-spacing 0.25s ease;
}
footer .MuiLink-root:hover,
footer .MuiLink-root:focus,
footer .MuiLink-root:active,
.MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):hover,
.MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):focus,
.MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):active,
.news-tab:hover,
.news-tab:focus,
.news-tab:active,
.btn:hover,
.btn:focus,
.btn:active,
.services-intro__btn:hover,
.services-intro__btn:focus,
.services-intro__btn:active,
.block-concrete-001__btn:hover,
.block-concrete-001__btn:focus,
.block-concrete-001__btn:active {
  transform: translateY(-8px);
}

/* เมนูบนเฮดเดอร์ไม่ต้องลอย — ย้ายเอฟเฟกต์ไปไว้ที่ลิงก์ใน footer แทน
   (ลิงก์เมนูบนเฮดเดอร์เป็น .MuiButton-root ด้วย จึงต้องปิดทับตรงนี้) */
header .MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt),
header .MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):hover,
header .MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):focus,
header .MuiButton-root:not(.css-gb2xl8):not(.css-tg04mt):active {
  transform: none;
}