/* สร้างเงาดำไล่ระดับด้านล่าง เพื่อรองรับตัวหนังสือ */
#fadeCaptionCarousel .carousel-item::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%; /* กินพื้นที่ครึ่งล่าง */
   background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
   pointer-events: none;
   z-index: 0;
}
/*#fadeCaptionCarousel .carousel-item .carousel-caption {
  position: absolute; width: 60%;
  left: 60px;        /* ระยะห่างจากด้านซ้าย
  bottom: 50px;      /* ระยะห่างจากด้านล่าง
  text-align: left;  /* จัดข้อความชิดซ้าย
  right: auto;       /* ยกเลิกค่าเดิมที่เป็นชิดขวา
} */
#fadeCaptionCarousel .carousel-item .carousel-caption {
   height: 250px;
}
.caption-bottom-left {
   position: absolute; width: 60%;
   text-align: left;
   left: 3%;
   bottom: 2%px;
   z-index: 10;
}
.caption-top-left {
   position: absolute; width: 60%;
   text-align: left;
   left: 3%;
   top: 15%;
   right: auto;
   bottom: auto;
   z-index: 10;
}
.caption-bottom-right {
   position: absolute; width: 83%;
   text-align: right;
   right: 0%;
   bottom: 2%;
   z-index: 10;
}
.caption-top-right {
   position: absolute; width: 83%;
   text-align: right;
   right: 0%;
   top: 5%;
   z-index: 10;
}
#fadeCaptionCarousel .carousel-item .carousel-caption h2 {
   font-size: 3.0em; text-transform: uppercase; font-weight: 600;
   color: #FFFFFF; margin-bottom: 0px;
}
#fadeCaptionCarousel .carousel-item .carousel-caption p {
   font-size: 1.3em; color: #FFFFFF; margin-top: -20px;
}
/*.carousel-item .carousel-caption h2 {
   font-size: 3.0em; text-transform: uppercase; font-weight: 600;
   background-color: rgba(0, 0, 0, 0.4); /* สีดำโปร่งแสง 50% 
   color: #fff;
   padding: 5px 10px; /* เว้นระยะขอบข้อความ
   
   /* คำสั่งสำคัญ: ทำให้พื้นหลังแยกชิ้นตามบรรทัด
   display: inline; 
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   
   /* ปรับระยะห่างบรรทัด 
   line-height: 1.75;
}

.carousel-item .carousel-caption p {
   font-size: 1.3em;     /* ลดขนาด font
   line-height: 2.2em;    /* ระยะห่างบรรทัดสบายตา
   background-color: rgba(0, 0, 0, 0.4); /* สีดำโปร่งแสง 50%
   color: #fff;
   padding: 5px 10px; /* เว้นระยะขอบข้อความ
   
   /* คำสั่งสำคัญ: ทำให้พื้นหลังแยกชิ้นตามบรรทัด
   display: inline; 
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
}*/

@media (max-width: 767.98px) {
   /* สร้างเงาดำไล่ระดับด้านล่าง เพื่อรองรับตัวหนังสือ */
   #fadeCaptionCarousel .carousel-item::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%; /* กินพื้นที่ครึ่งล่าง */
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      pointer-events: none;
   }
   #fadeCaptionCarousel .carousel-item .carousel-caption {
      left: 0px; width: 80%;
      text-align: left;
      bottom: 20px; /* เลื่อนข้อความขึ้นเล็กน้อย */
      padding: 0 10px; /* ขอบซ้ายขวาไม่ติดจอ */
   }
   
   #fadeCaptionCarousel .carousel-item .carousel-caption h2 {
      font-size: 1.3em; text-transform: uppercase; font-weight: 600;
      color: #FFFFFF; z-index: 10; position: absolute;
      bottom: 55px;
   }
   #fadeCaptionCarousel .carousel-item .carousel-caption p {
      font-size: 0.8em; color: #FFFFFF; z-index: 10; position: absolute;
      bottom: 0px;
   }

   .carousel-control-prev,
   .carousel-control-next {
      width: 10%;   /* ให้ปุ่มแคบลง */
   }
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
      transform: scale(0.7); /* ย่อ icon */
   }
}


/* explore */
#explore {
   background: #f5f6f8; padding-top: 60px; padding-bottom: 60px;
}
#explore .card-container {
   position: relative;
   width: 100%;
   height: auto;
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.card-image {
   width: 100%;
   height: 100%;
   object-fit: cover;    /* ปรับภาพให้เต็มโดยไม่บิดเบี้ยว */
   display: block;
}

.card-overlay {
   position: absolute;
   inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
   background: rgba(0, 0, 0, 0.4);
}

.card-content {
   position: absolute;       /* ทับบนรูป */
   left: 40px; bottom: 30px;
   color: white;
   max-width: 60%;
}

.card-content h2 {
   font-size: 3.0em;
   margin-bottom: 20px;
}

.card-content p {
   font-size: 1.2em; font-weight: 300;
   line-height: 1.5;
   margin-bottom: 25px;
}

.card-content .btn {
   display: inline-block;
   color: #ffffff;
   padding: 10px 20px;
   border-radius: 6px;
   font-weight: 500;
   text-decoration: none;
   transition: 0.3s;
}

.card-content .btn:hover {
   background: #f0f0f0;
   color: #000000;
}

@media (max-width: 767.98px) {
   #explore {
      padding-top: 20px; padding-bottom: 10px;
   }   
   .card-content {
      position: absolute;       /* ทับบนรูป */
      left: 20px; bottom: 20px;
      color: white;
      max-width: 80%;
   }
   .card-container {
      margin-bottom: 20px;
   }
   .card-content h2 {
      font-size: 1.4em;
      margin-bottom: 10px;
   }
   .card-content p {
      font-size: 1.0em; font-weight: 300;
      line-height: 1.5;
      margin-bottom: 25px;
      display: none;
   }
}
/* /explore */

/* steelcanopy */
#steelcanopy {
   /*position: relative;
   background: #ffffff; padding-top: 60px; padding-bottom: 60px;
   border-radius: 20px 20px 0 0; /* โค้งขอบสวย ๆ */
   position: relative;
   background: #ffffff; /* สีพื้นหลังข้อความ */
   z-index: 2;
   /*margin-bottom: -100px;  ดันให้ทับเข้ามาบนรูปนิดหน่อย */
   padding-top: 60px; padding-bottom: 60px;
   border-radius: 0 0 0px 0px ; /* โค้งขอบสวย ๆ */
}
#steelcanopy .steelcanopy-text {
   margin-top: 50px;
   padding: 0px 0%;
}
#steelcanopy h2 {
   font-size: 3.2em; margin-bottom: 30px;
}
#steelcanopy p {
   font-size: 1.2em; line-height: 1.6em; color: #5d5d5d; font-weight: 300;
}
.youtube {
   width: 100%; height: 100%; border-radius: 10px;
}

#steelcanopy .card-container {
   position: relative;
   width: 100%;
   height: auto;
   border-radius: 15px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}
#steelcanopy .card-container p {
   color: #ffffff; font-size: 1.2em; font-weight: 300;
   line-height: 1.5;
   margin-bottom: 25px;
}
/* /steelcanopy */

/* certificate */
#certificate {
   position: relative;
   z-index: 2;
   background: #fff7ed; /* สีพื้นหลังข้อความ */
   padding: 60px 0 80px 0;
   margin-bottom: 0px;
}

#certificate h2 {
   font-size: 3.6em; margin-bottom: 1.2em;
   text-transform: uppercase;
}

#certificate .card-certificate {
   border: 1px solid #dddddd;
   border-radius: 10px;
   margin-bottom: 10px;
   overflow: hidden;
}
#certificate .card-certificate:hover {
   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   transform: translateY(-4px);
}
#certificate .card-certificate img {
   width: 100%;
}
/* certificate */

@media (max-width: 767.98px) {
   .youtube {
      width: 100%; height: 240px;
   }
   #steelcanopy {
      padding-top: 15px; padding-bottom: 30px;
   }
   #steelcanopy .steelcanopy-text {
      padding-left: 10px; padding-right: 10px;
      margin-top: 20px;
   }
   #steelcanopy h2 {
      font-size: 1.6em; margin-top: 0px;
   }
   #steelcanopy p {
      font-size: 0.9em;
   }
   #steelcanopy .card-container {
      border-radius: 0px;
   }

   /* certificate */
   #certificate {
      position: relative;
      z-index: 2;
      background: #fff7ed; /* สีพื้นหลังข้อความ */
      padding: 40px 0 40px 0;
      margin-bottom: 0px;
   }
   #certificate h2 {
      font-size: 2.2em; margin-bottom: 0.8em;
      text-transform: uppercase;
   }
   /* certificate */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* Small Laptop */
@media (min-width: 992px) and (max-width: 1279.98px) {}

/* Standard Desktop (1280+) */
@media (min-width: 1280px) and (max-width: 1439.98px) {
   #steelcanopy h2 {
      font-size: 1.6em; margin-bottom: 20px;
   }
   #steelcanopy p {
      font-size: 0.8em; line-height: 1.6em; color: #5d5d5d; font-weight: 300;
   }
}

/* Large Desktop (1440+) */
@media (min-width: 1440px) and (max-width: 1536px) {
   #steelcanopy h2 {
      font-size: 1.6em; margin-bottom: 20px;
   }
   #steelcanopy p {
      font-size: 0.9em; line-height: 1.6em; color: #5d5d5d; font-weight: 300;
   }
}

/* /steelcanopy */

/* features */
#features {
   /*background: #fff7ed;*/
   position: relative;
   background: #fff7ed; /* สีพื้นหลังข้อความ */
   z-index: 2;
   margin-top: -50px; /* ดันให้ทับเข้ามาบนรูปนิดหน่อย */
   padding-top: 80px; padding-bottom: 80px;
   border-radius: 0px 0px 0 0; /* โค้งขอบสวย ๆ */
}
#features h2 {
   font-size: 3.0em; margin-bottom: 1.2em;
   text-transform: uppercase;
}

/* จัดคอลัมภ์ไอคอน */
#features .icon-column {
   display: flex;
   /*align-items: flex-start; /* ให้ icon อยู่บนสุด */
   margin-bottom: 15px;
}
#features .icon-column i {
   margin-right: 8px; /* ระยะห่างไอคอนกับข้อความ */
   margin-top: 2px;   /* ปรับให้อยู่กลางแนวแรก */
}
#features .icon-column span {
   display: block; font-size: 1.35em; line-height: 1.35em; font-weight: 300; 
   padding-top: 4px; color: #565656;
}
#features .bi {
   font-size: 1.4em; color: #ed1c24; font-weight: 700;
}

@media (max-width: 767.98px) {
   #features {
      padding-top: 40px; padding-bottom: 40px;
   }
   #features h2 {
      font-size: 2.0em; margin-bottom: 20px;
   }
   #features .icon-column span {
       font-size: 1.1em; padding-top: 8px;
   }
}
/* /จัดคอลัมภ์ไอคอน */
/* /features */

/* feedback */
#feedback {
   background: #f5f6f8; padding-top: 100px; padding-bottom: 140px;
   background-image: url('../img/about-middle-bg.jpg');
   background-size: cover;        /* ให้รูปเต็มพื้นที่ */
   background-position: center;   /* จัดกึ่งกลางรูป */
   background-repeat: no-repeat; overflow: hidden;
}
#feedback h2 {
   font-size: 3.0em;
   text-transform: uppercase;
}
#feedback .text-secondary {
   font-size: 1.2em;
}

#feedback .testimonial-card {
   background: #ffffff;
   border-radius: 10px;
   min-height: 200px;
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
   position: relative;
   height: 100%;
}
#feedback .testimonial-card .quote-icon {
   position: absolute;
   right: 20px;
   bottom: 20px;
   font-size: 3.0em; line-height: 0.2em; border: 0px solid #000000;
   color: #e60000;
}
#feedback .testimonial-card .star {
   font-size: 1.2em;
}
#feedback .testimonial-card .review {
   height: 110px; overflow: auto;
}
#feedback .testimonial-card .reviewer {
   margin-top: 20px;
}
#feedback .testimonial-card p {
   font-size: 1.2em; line-height: 1.4em; font-weight: 300;
}

#feedback .carousel-control-prev,
#feedback .carousel-control-next {
   width: 50px;
   height: 50px;
   background-color: #c4c4c4;
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.9;
}

#feedback .carousel-control-prev {
   left: -100px;   /* ขยับออกนอก slide */
}

#feedback .carousel-control-next {
   right: -100px;  /* ขยับออกนอก slide */
}

#feedback .carousel-control-prev-icon,
#feedback .carousel-control-next-icon {
   filter: invert(1);
}

/* แก้เฉพาะจอเล็ก */
@media (max-width: 767.98px) {

  /* container ของการ์ดในแต่ละ slide */
  #testimonialCarousel .carousel-item .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;   /* เปิดใช้ snap ตามแนวนอน */
  }

  /* การ์ดแต่ละใบ */
  #testimonialCarousel .carousel-item .col-md-4 {
    flex: 0 0 85%;                   /* หรือจะใช้ 100% ก็ได้ */
    max-width: 85%;
    scroll-snap-align: start;        /* ให้ขอบซ้ายตรงกันเวลา snap */
    scroll-snap-stop: always;        /* หยุดทุกใบ ไม่ให้ข้ามหลายใบ */
    margin-right: 15px;              /* ระยะห่างระหว่างใบ (ถ้าต้องการ) */
  }
}

@media (max-width: 768px) {
   #feedback {
      padding-top: 40px; padding-bottom: 40px;
   }
   #feedback h2 {
      font-size: 2.0em;
   }
}
/* /feedback */

/* ให้ภาพเป็นพื้นหลังเต็มจอ */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-bg {
  background: url('../img/factory.webp') center/cover no-repeat;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-attachment: fixed;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
   .hero-section {
      position: relative;
      height: 50vh;
      overflow: hidden;
   }
   .hero-bg {
      background-size: 100% auto; /* ขยายกว้างสุด */
      background-repeat: no-repeat;
      background-position: center;
   }
}
/* mobile */
@media (max-width: 767.98px) {
   #steelcanopy {
      margin-bottom: 0px;
   }
   .hero-section {
      position: relative;
      height: 30vh;
      overflow: hidden;
   }  
   .hero-bg {
      background-attachment: scroll; /* ปิด parallax ที่มือถือไม่รองรับ */
       background-size: 100% 100%; /* ขยายกว้างสุด */
      background-position: center;
   }

   #features {
      margin-top: 0px;
   }
}

/* Section เนื้อหา */
.content-section {
  position: relative;
  background: #fff; /* สีพื้นหลังข้อความ */
  z-index: 2;
  margin-top: -100px; /* ดันให้ทับเข้ามาบนรูปนิดหน่อย */
  padding: 100px 20px;
  border-radius: 20px 20px 0 0; /* โค้งขอบสวย ๆ */
}

.content-inner {
  max-width: 900px;
  margin: auto;
}