.let-space-003{letter-spacing: 0.03em;}

#cpr-profile{display: flex; gap: 6rem; flex-direction: column;}
.corp-profile-h{min-height: 48px;}
.corp-profile-h div:first-child{font-size: 40px;}
.corp-profile-h div:last-child{font-size: 24px;}
#cpr-profile .coporate-intro-secL{max-width: 752px;}
/* .text-read-more,.text-read-more:hover  {
  color: #ff1111;
  text-decoration: none;
  display: none;
  position:absolute;
  right: 0;
  bottom: 0;
  font-weight: normal !important;
  z-index: 1;
  padding-left: 5px;
  background-color: #fff;
  text-indent: 0;
} */



.grid-product-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 8px;
  padding-bottom: 24px;
  /*grid-auto-rows: 1fr; */
  /* ให้ทุกแถวสูงเท่ากัน */
}
.grid-product-container.only-product-vdo{grid-template-columns: repeat(1, 1fr);}
/* Video spans 2 columns and 2 rows */
.video-section {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  align-items: stretch;
}

/* ใช้ aspect-ratio เพื่อควบคุมสัดส่วน */
.video-responsive {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}

.video-responsive iframe {
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* Side Cards */
.card {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.card img, .video-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #DBDFEC;
}


#company-vision .coporate-container{gap: 3rem; flex-direction: row; justify-content: space-between;}
.vision-secL{ background: url(../images/vision-tile.png); }
.vision-secL-inner{padding-block: 6rem;  max-width: 763px; padding-right: 30px; display: flex; justify-content: end; gap: 16px; }
.vision-secL-inner .left-picprof{margin-top: 136px; left: 0;}
.vision-secL-inner .mid-picprof{margin-left: 8px;}
.vision-secL-inner .right-picprof{margin-top:85px;}
.vision-secR{padding-block: 6rem; max-width: 684px; display: flex; flex-direction: column; gap: 2rem;}
.vision-secR .detail-text{font-size: 24px; text-indent: 50px;}

.director-prof {
  border-radius: 20px;
}
.director-prof img {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 300px;/**/
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid #DBDFEC;
  aspect-ratio: 2 / 3;
}

.short-border {
  position: relative;
  padding-bottom: 10px; /* เว้นระยะห่างระหว่างเนื้อหากับเส้น */
}

.short-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 40px;
  /*left: 50%;*/          /* เริ่มที่กึ่งกลาง */
  transform: translateX(-50%); /* ดึงกลับมาให้กึ่งกลางพอดี */
  width: 80px;         /* กำหนดความยาวเส้นที่ต้องการ */
  height: 2px;         /* ความหนาของเส้น */
  background-color: #DBDFEC; /* สีของเส้น */
}

.stat-card ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; justify-content: center;}
.stat-card ul li{padding: 20px 12px; background-color: #fff; border-radius: 20px; border: 1px solid #DBDFEC; display: flex; flex-direction: column; align-items: center;}
.stat-card ul li:hover{border: 1px solid #E80F0F;box-shadow: 2px 4px 20px rgba(154, 170, 207, 50%); transition: ease-in 0.3s, visibility 0s linear 0s; }
.stat-card ul li div{color: #E80F0F;font-size: 48px;}
.stat-card ul li span{font-size: 18px;}
.benefit-hightlight ul{display: flex; flex-wrap: wrap; gap: 0.8rem; }
.benefit-hightlight ul li {
    padding: 4px 12px 4px 40px; /* เพิ่ม padding ซ้ายเพื่อเว้นที่ให้วงกลม */
    background-color: #fff;
    border-radius: 32px;
    border: 1px solid #DBDFEC;
    display: flex;             /* ยังคงไว้ได้ถ้าต้องการจัดตำแหน่งภายใน */
    align-items: center;
    position: relative;        /* สำคัญ: เพื่อให้วงกลมเทียบตำแหน่งกับ li */
}

/* สร้างวงกลมด้วย ::before */
.benefit-hightlight ul li::before {
    content: "";
    width: 4px;                /* ปรับขนาดความกว้างวงกลม */
    height: 4px;               /* ปรับขนาดความสูงวงกลม */
    background-color: #333;    /* เปลี่ยนสีวงกลมที่นี่ */
    border-radius: 50%;        /* ทำให้เป็นวงกลม */
    position: absolute;
    left: 20px;                /* ตำแหน่งวงกลมจากด้านซ้าย */
}

.benefit-hightlight ul li:hover {
    background-color: #EAEDF0;
    transition: ease-in 0.3s, visibility 0s linear 0s; 
}

.contact-secL{max-width: 590px;}
.contact-secR{max-width: 650px;}
.contact-secL img{min-height: 32px; min-width: 32px;}

.transit-logo ul{display: grid; grid-template-columns: repeat(5, 20%); /*gap: 16rem;*/padding-inline: 12rem;  justify-content: space-between; margin-inline: auto; padding-block: 2rem;}
.transit-logo ul li{min-height: 110px;}
.transit-logo ul li div{background-color: #F1F4F8; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px;}
.transit-logo ul li div img{
  width: 100%;
  height: 100%;
  max-width: 56px;
  max-height: 56px;
  object-fit: cover;
}
.ju-corporate-page .JUQ-button{white-space: nowrap;}

#text-container {
    display: block;
}

#longTextElement {
    display: block;
    line-height: 1.1;
    /*transition: max-height 0.5s ease, padding 0.5s ease;*/
    overflow: hidden; /* ซ่อนข้อความที่เกิน */
    /*max-height: 6em;*/  /* แสดงข้อความแค่ 3 บรรทัดแรก */
}

@media (max-width: 1400px) {
  .vision-sec-L-inner{max-width: 676px;}
  .vision-sec-R{max-width: 450px;}
}



@media (max-width: 1160px) {
  #cpr-profile .coporate-intro-secL{max-width: 570px;}
}

@media (max-width: 991px) {
  #cpr-profile .coporate-intro-secL{max-width: unset;}
  #company-vision .coporate-container{ flex-direction: column; justify-content: start;}
  .coporate-intro-secL {
        padding-right: 0;
    }
  .vision-secL-inner,.vision-secR{max-width: unset; width: 100%;}
  .vision-secL-inner{padding-right: 0; justify-content: center; padding-block: unset; padding-top: 4rem; padding-bottom: 0;}
  .vision-secR{padding-block: unset; padding-top: 0; padding-bottom: 4rem;}
  .contact-secL{max-width: 320px;}
.contact-secR{max-width: 450px;}
#cpr-profile .coporate-intro {
        gap: 0;
    }
}

@media (max-width: 767px) {
  #cpr-profile{gap: 4rem;}
    .coporate-intro-secL .detail-text{position: relative;}
    .coporate-intro-secL .detail-text span{
    /*display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8; */
    
    /* Number of lines to show */


    /*overflow: hidden;
    text-overflow: ellipsis; */
    
    
    /* Fallback for single-line behavior if necessary, but handled by line-clamp */

    /*max-width: 400px;*/
    /*text-indent: 50px;
    transition: max-height 0.5s ease, opacity 0.3s ease;
    max-height: 100px;*/

    }

    .coporate-intro-secL .detail-text span{
      
    /*transition: height 0.3s ease, opacity 0.3s ease;*/ /* Smooth transition */
    /*height: 0;*/ /* Start hidden */
  
    }

    .coporate-intro-secL .detail-text span.expanded{
    /*-webkit-line-clamp: unset;*/ 
    /* Number of lines to show */
    /*white-space: normal; */
    /* allow wrapping when expanded */ 
    /*overflow: visible; 
    text-overflow: clip;
    height: auto;
    max-height: 2000px; */
    
    /* Large enough to fit all text */
    /*opacity: 1;*/

    }

    /* .text-read-more {
    display: inline;
    } */
/*
.coporate-intro-secL .detail-text span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8; 
        overflow: hidden;
        
        
        transition: max-height 0.5s ease-in-out;
        max-height: 200px; 
    }

    .coporate-intro-secL .detail-text span.expanded {
        -webkit-line-clamp: unset;
        max-height: 1000px; 
    }

  .text-read-more {
    display: inline-block;
  }
*/

    .grid-container {
      grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
    }
    .grid-product-container {grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;}
    .video-section {
      grid-row: span 1;
    }  /**/  
    
    .vision-sec-L-inner{padding-block: unset; padding-top: 40px; padding-bottom: 20px; gap: 9px;}
    .vision-secL-inner .mid-picprof{margin-left: 0;} 
    .contact-sec-both.justify-content-between{flex-direction: column;}
    .contact-secL,.contact-secR{max-width: unset; width: 100%;}
    .transit-logo ul{padding-inline: 0;}
    /* #longTextElement:not(.expanded) {
        -webkit-line-clamp: 4;
        max-height: 8em;     
    }*/

#text-container {
    position: relative;
    overflow: hidden;
}

#longTextElement {
    display: block;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease;
    /* แนะนำให้ตั้ง line-height เป็นตัวเลขคงที่เพื่อให้คำนวณง่าย */
    line-height: 1.1; 
    padding-bottom: 20px; 
     white-space: normal; /* ให้ข้อความไหลตามบรรทัด */
    text-overflow: ellipsis; /* ใช้ '...' ที่ท้ายข้อความ */
    -webkit-line-clamp: 8; /* จำนวนบรรทัดที่ต้องการแสดง (ใช้กับ CSS Grid/Flex) */

    -webkit-box-orient: vertical; /* กำหนดให้เป็นแนวตั้ง */
}
/* .expanded .text-read-more{bottom: 20px;} */

/* จุดไข่ปลา (...) วางไว้ที่บรรทัดสุดท้าย */
/*#longTextElement.is-truncated::after {
    content: "...";
    position: absolute;
    bottom: 2px; 
    right: 0;
    width: 35px;
    background: linear-gradient(to right, transparent, white 30%); 
    text-align: right;
}*/





}    
@media (max-width: 576px) {
  .stat-card ul{grid-template-columns: repeat(1,1fr);}
  .transit-logo ul{grid-template-columns: repeat(3, 1fr); gap: 2rem;}
  .ju-corporate-page .JUQ-button{font-size: 24px !important; width: 217px !important;}
  /* #longTextElement:not(.expanded) {
        -webkit-line-clamp: 2; 
        max-height: 4.5em;    
    } */
}

@media (max-width: 480px) {
  .fontsize-40-shrink{font-size: 38px !important; }
  .grid-container {
    grid-template-columns: 1fr; /* 1 column on phones */
  }
  /*.video-section {
    grid-column: span 1;
  }*/
}

@media (max-width: 388px) {
  .corp-profile-h{flex-direction: column;} 
  .corp-profile-h.align-items-center{align-items: start !important;}
}

.description_text {
    /* display: -webkit-box; */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

/* PC: 4 บรรทัด */
@media (min-width: 992px) {
    .description_text {
        -webkit-line-clamp: 4;
        max-height: 6.4em; /* 4 x 1.6 line-height */
    }
}

/* Mobile: 7 บรรทัด */
@media (max-width: 991px) {
    .stat-card ul{grid-template-columns: repeat(2,1fr);}
    .description_text {
        -webkit-line-clamp: 7;
        max-height: 11.2em; /* 7 x 1.6 line-height */
    }
}