/* ============================================
   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
   ============================================ */
html, body, * {
  font-family: 'CPAC Loop', 'Noto Sans Thai', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'CPAC Modern', 'CPAC Loop', 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 — sits on top of the hero image */
.block-carousel-001 .hero-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: clamp(24px, 5vw, 72px) clamp(24px, 6vw, 96px) 0;
  pointer-events: none;
  z-index: 2;
}
.block-carousel-001 .hero-caption--left  { justify-content: flex-end; }
.block-carousel-001 .hero-caption--right { justify-content: flex-end; }

/* Subtle side gradient — adds extra readability without competing with the frosted box */
.block-carousel-001 .hero-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.block-carousel-001 .hero-caption--left::before {
  background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, transparent 45%);
}
.block-carousel-001 .hero-caption--right::before {
  background: linear-gradient(270deg, rgba(0,0,0,0.25) 0%, transparent 45%);
}

/* Caption text block — faint white frosted-glass rounded panel, CPAC blue text */
.block-carousel-001 .hero-caption__inner {
  position: relative;
  max-width: 820px;
  padding: clamp(26px, 2.8vw, 40px) clamp(30px, 3.2vw, 46px);
  color: #004391;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;

  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}
.block-carousel-001 .hero-caption__title {
  margin: 0 0 0.3em;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #0a3d7a;
}


.block-carousel-001 .hero-caption__desc {
  margin: 0;
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.5;
  font-weight: 400;
  color: #1a1a1a;
}

/* Mobile (≤767px): bottom-aligned, centered, full-width — gradient flips to bottom */
@media (max-width: 767px) {
  .block-carousel-001 .hero-caption,
  .block-carousel-001 .hero-caption--left,
  .block-carousel-001 .hero-caption--right {
    align-items: flex-end;
    justify-content: center;
    padding: 0 24px 36px;
    text-align: center;
  }
  .block-carousel-001 .hero-caption--left::before,
  .block-carousel-001 .hero-caption--right::before {
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.30) 100%);
  }
  .block-carousel-001 .hero-caption__inner {
    max-width: 100%;
    padding: 18px 20px;
    border-radius: 0;
  }
  .block-carousel-001 .hero-caption__title { font-size: 1.4rem; line-height: 1.25; margin-bottom: 0.4em; }
  .block-carousel-001 .hero-caption__desc  { font-size: 0.9rem; line-height: 1.55; }
}

/* 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: 18px;
  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: 16px;
  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: 13px; }
}
/* 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;
}

/* 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: 18px !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 {
    max-width: 720px;
    padding: 32px 40px 22px;
    border-radius: 20px;
  }
}
@media (min-width: 1441px) {
  .bc002__overlay-card {
    max-width: 860px;
    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: 16px;
  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: 64px 0;
  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;
}

/* --- 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;
}
.bl001-image {
  flex: 1;
  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.75rem;
  font-weight: 400;
  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, #5dd8fc 0%, #00a8e8 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;
  object-fit: cover;
  max-height: 500px;
}
.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;
}
.about-download .dl-subtitle {
  font-size: 1rem;
  color: #444;
  margin-bottom: 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; }
.news-tabs-inner { display: flex; gap: 10px; overflow-x: auto; padding: 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.news-tabs-inner::-webkit-scrollbar { display: none; }
.news-tab { 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-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 — Noto Sans Thai, 16px, SemiBold 600
   Header-only rule (does not affect body, footer, or content blocks).
   Applied to:
   - Top-level menu items (หน้าหลัก, เกี่ยวกับเรา, สินค้าและบริการ ▾,
     ข่าวสารและกิจกรรม ▾, ติดต่อเรา)
   - Language switcher button (ภาษาไทย ▾)
   Overrides the global "html, body, * { font-family: 'CPAC Loop' !important }"
   reset above. 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: Only weights 400 and 700 of Noto Sans Thai are self-hosted;
   the browser synthesizes 600 from the available files.
   ============================================ */
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: 'Noto Sans Thai', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* ============================================
   HEADER SUB-MENUS — Noto Sans Thai, 16px, 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 both that and the global CPAC Loop reset.
   ============================================ */
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: 'Noto Sans Thai', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !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;
}

/* 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;
}