html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
}
img {
    max-width: 100%;
    height: auto;
}
.service-banner {
    position: relative;
    overflow: hidden; 
    z-index: 10; 
    background-color: #1a1a1a;
}

.service-banner .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 310px 20px 60px 20px;
    position: relative;
    z-index: 2;
}
.service-content-banner {
    color: #ffffff;
}
.service-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/home/img-banner-home-1.webp'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0; 
    transition: all 0.4s ease-in-out; 
}
.service-banner.bg-vendor::after {
    background-image: url('../../assets/images/home/img-banner-home-2.webp'); 
}

.service-banner.bg-factoring::after {
    background-image: url('../../assets/images/home/img-banner-home-3.webp'); 
}

.service-banner.bg-energy::after {
    background-image: url('../../assets/images/home/img-banner-home-4.webp'); 
}
.service-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgb(0 0 0 / 36%) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1; 
    pointer-events: none; 
}
.service-subtitle {
    display: block;
    font-weight: 300;
    margin-bottom: 10px;
    opacity: 0.9;
}

.service-title {
    font-size: 64px; 
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.service-title span{
    font-size: 96px;
}

.bg-service-right{
    position: relative;
    background: url('../../assets/images/our-services/bg-service-right.webp')top right no-repeat #fff; 
    background-size: contain;
    padding-top: 80px;
    padding-bottom: 80px;
    z-index: 10;
}

.intro-text {
    font-size: 20px;
    color: #666;
    margin: 0;
    text-align: left;
    font-weight: 400;
}
  .service-title-40 {
    font-size: 40px;
    color: #006CAF; 
    text-align: center;
    font-weight: 400;
    margin-top: 60px;
    margin-bottom: 60px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }


  .diagram {
    display: block;
    margin: 0 auto;
    }
      .icon-car {
    display: block;
    margin: 0 auto;
    }
.services-item {
    border-top: 2px dashed #cccccc;
    /*border-bottom: 2px dashed #cccccc;*/
    position: relative;
    z-index: 10;
    background: #fff;
}


.stats-grid {
    display: flex;
    align-items: stretch; 
    justify-content: center;
}

.stat-item {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center; 
    border-right: 1px dotted #cccccc; 
    padding: 35px;
    text-align: center;
}

.stat-item:last-child {
    border-right: none;
}
.stat-item p {
    font-size: 24px;
    padding-top: 20px;
    line-height: 1.3;
    font-weight: 400;
    color: #111;
}
.stat-item:not(:last-child) {
    border-right: 2px dashed #cccccc;
}


.type-of-service-wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 60px;
    overflow: hidden;
    padding-top: 80px;
}
.service-wrapper-bg-left{
    background: url('../../assets/images/our-services/bg-service-left.webp') no-repeat top left #F2F2F2; 
    background-size: contain;
}
.service-wrapper-bg-right{
    background: url('../../assets/images/our-services/bg-service-right-2.webp') no-repeat top right #F2F2F2; 
    background-size: contain;
}

.main-title {
    text-align: center;
    color: #006CAF;
    font-size: 28px;
    font-weight: 500;
    margin: 60px 0;
    text-transform: uppercase;
}

.service-content h3 {
    color: #E22723;
    font-size: 32px;
    font-weight: 500;
    text-transform: uppercase;
}
.service-content p {
    color: #565656;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-weight: 300;
}
.service-content ul, .service-content li{
    color: #565656;
    font-size: 16px;
    line-height: 1.4;
}
.service-row-bg {
    width: 100%;
    padding: 0 0 30px 0;
}

.service-item {
    display: flex;
    align-items: center;  
    justify-content: space-between;
    gap: 60px;            
}

.service-item.reverse {
    flex-direction: row-reverse; 
}

.service-image {
    flex: 0 0 50%; 
    max-width: 50%;
}

.service-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    object-fit: cover;
}

.service-content {
    flex: 0 0 45%; 
    max-width: 45%;
}

.full-dotted-line {
    width: 100%;
    height: 1px;
    border-top: 1px dotted #cccccc; 
}

.benefits-section {
    width: 100%;
    max-width: 1920px;     
    margin: 0 auto;
    
    background-image: url('../../assets/images/our-services/bg-benefits.webp'); 
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: 100px 0 150px 0; 
    position: relative;
    overflow: hidden;      
}

.benefits-section .container {
    width: 100%;
    max-width: 1200px;    
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.section-title {
    text-align: center;
    color: #ffffff;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 80px;
    letter-spacing: 1px;
}

.benefits-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.benefit-item {
    flex: 1;               
    position: relative;
    padding-left: 25px;    
    padding-right: 15px;
}
/* สั่งให้กล่องที่เป็น "เลขคี่" (อันที่ 1, 3, 5) อยู่ด้านบน */
.benefit-item:nth-child(odd) {
    margin-top: 50px;
}

/* สั่งให้กล่องที่เป็น "เลขคู่" (อันที่ 2, 4) ถูกดันลงมาด้านล่าง */
.benefit-item:nth-child(even) {
    margin-top: 150px;
}

.icon svg {
    width: 45px;
    height: 45px;
    stroke: #ffffff;
    margin-bottom: 20px;
}
.benefit-item p {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
    max-width: 250px;
    padding-top: 20px;
    font-weight: 300;
}


.benefit-item::before {
    content: '';
    position: absolute;
    left: 0;               
    top: 10px;             
    width: 1px;
    height: 1500px;        
    border-left: 2px dashed #9090908f; 
}

.cta-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-image: url('../../assets/images/our-services/bg-enquiry.webp'); 
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.cta-section .container {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

/*.cta-section .container::after {
    content: '';
    position: absolute;
    top: -200px;     
    bottom: -200px;  
    left: 50%;       
    border-left: 2px dashed #ccc;
    transform: translateX(-50%);
    z-index: 1;
}*/

/* 1. จัดการคอลัมน์ให้แบ่ง 3 ส่วนเท่าๆ กัน */
.cta-col {
    flex: 1; /* 🎯 เปลี่ยนจาก 2 เป็น 1 เพื่อให้แชร์พื้นที่เท่ากัน 1:1:1 */
    text-align: center;
    
    /* 🎯 ลด padding ซ้าย-ขวาลง เพื่อไม่ให้ตัวหนังสือบีบกันเกินไปเมื่อมี 3 กล่อง */
    padding: 200px 0; 
    
    position: relative;
    z-index: 2;
}

/* 2. จัดการเส้นประคั่นระหว่างคอลัมน์ */
.col-border {
    /* ปรับสีและขนาดเส้นประตามดีไซน์ของคุณ */
    border-right: 2px dashed #cccccc; 
}

/* 3. Responsive สำหรับหน้าจอมือถือ/แท็บเล็ต (ถ้ายังไม่มี) */
@media (max-width: 992px) {
    .container {
        flex-direction: column; /* ให้กล่องตกลงมาเรียงบน-ล่าง */
    }
    .cta-col {
        padding: 40px 20px; /* ปรับระยะห่างใหม่ */
    }
    .col-border {
        border-right: none; /* เอาเส้นประด้านขวาออก */
       
    }
}

/* หัวข้อ */
.cta-col h2 {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 20px;
}

.title-blue { color: #006CAF; } 
.title-red { color: #D32F2F; }  


.cta-col p {
    color: #565656;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px; 
}

.custom-modal {
    width: 800px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 12px;
}
.modal-title {
    color: #0078D4;         
    font-size: 22px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 25px;
}
.title-grey {
    color: #5d5d60;
}





body, html {
    margin: 0 auto;
    padding: 0;
}

.stacked-wrapper {
    position: relative;
    width: 100%;
}

.stacked-section {
    position: sticky;
    top: 0;
    width: 100% !important; 
    left: 0; 
    margin-top: -1px;

}

#leasing .section-1, #vendor .section-1, #account .section-1, #energy .section-1 {
    min-height: 64vh;
    background-color: #ffffff; 
    color: #ffffff;
    z-index: 1;
}


#leasing .section-2 {
    color: #333333;
    z-index: 2;
    height: auto;
}

#leasing .section-3 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 3;
    height: auto;
}

#leasing .section-4 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 4;
    height: auto;
}
#leasing .section-5 {
    color: #333333;
    z-index: 5;
    height: auto;
}


/*--------------------------------------*/
#vendor .section-1 {
    min-height: 64vh;
    background-color: #ffffff; 
    color: #ffffff;
    z-index: 1;
}


#vendor .section-2 {
    color: #333333;
    z-index: 2;
    height: auto;
}

#vendor .section-3 {
    color: #333333;
    z-index: 3;
    height: auto;
}

#vendor .section-4 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 4;
    height: auto;
}
#vendor .section-5 {
    color: #333333;
    z-index: 5;
    height: auto;
}

/*------------------------------------*/
#account .section-1 {
    min-height: 64vh;
    background-color: #ffffff; 
    color: #ffffff;
    z-index: 1;
}


#account .section-2 {
    color: #333333;
    z-index: 2;
    height: auto;
}

#account .section-3 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 3;
    height: auto;
}

#account .section-4 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 4;
    height: auto;
}
#account .section-5 {
    color: #333333;
    z-index: 5;
    height: auto;
}


#leasing .section-6, #vendor .section-6, #account .section-6, #energy .section-6   {
    color: #333333;
    z-index: 6;
    height: auto;
}
/*-----------------------------------*/

#energy .section-1 {
    min-height: 64vh;
    background-color: #ffffff; 
    color: #ffffff;
    z-index: 1;
}


#energy .section-2 {
    color: #333333;
    z-index: 2;
    height: auto;
}

#energy .section-3 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 3;
    height: auto;
}

#energy .section-4 {
    border-top: 2px dashed #cccccc;
    color: #333333;
    z-index: 4;
    height: auto;
}
#energy .section-5 {
    color: #333333;
    z-index: 5;
    height: auto;
}


.process-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #fff;  
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.process-section .container {
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.process-section .container::after {
    content: '';
    position: absolute;
    top: -200px;     
    bottom: -200px;  
    left: 50%;       
    border-left: 2px dashed #ccc; 
    transform: translateX(-50%);
    z-index: 1;
}

.process-col {
    flex: 1;
    text-align: center;
    padding: 0 0 80px 0;
    position: relative;
    z-index: 2;
}
.process-col img {
    padding: 0 20px;
}
.process-section-mb {
    margin-bottom: 35px!important;
}
@media (max-width: 1800px) {

}

@media (max-width: 1700px) {

}
@media (max-width: 1680px) {

.cta-col {padding: 190px 0;}


}


@media (max-width: 1536px) {
.type-of-service-wrapper {padding-bottom: 35px;padding-top: 65px;}
.service-banner .container {padding: 280px 23px 40px 60px;}
.service-title {font-size: 55px;}
.service-title span {font-size: 80px;}
.bg-service-right {padding-top: 70px;padding-bottom: 70px;}
.intro-text {font-size: 16px;padding-top: 0;}
.service-title-40{font-size: 30px;margin-top: 60px;margin-bottom: 35px;}
.diagram {max-width: 600px;}
.icon-car {max-width: 95px;}
.stat-item p {font-size: 16px;}
.service-content h3 {font-size: 27px;}
.section-title {font-size: 30px;}
.benefits-section {padding: 80px 0 80px 0;}
.benefit-item .icon img{height: 55px;}
.benefit-item p {font-size: 16px;line-height: 1.4;margin: 20px 0 0 0;}
.cta-col h2 {font-size: 30px;margin-bottom: 15px;}
.cta-col {padding: 175px 0;}
.benefits-section .container {max-width: 1100px;padding: 0;}
.custom-modal {max-width: 700px;}

}

@media (max-width: 1366px) {
.cta-col {padding: 150px 0;}
}

@media (max-width: 1280px) {
.service-banner .container {padding: 210px 0 40px 0;max-width: 900px;}
.service-title {font-size: 40px;}
.service-title span {font-size: 55px;}
.intro-text {font-size: 14px;}   
.service-title-40 {font-size: 25px;margin-top: 60px;margin-bottom: 30px;}
.diagram {max-width: 465px;}
.bg-service-right {padding-top: 55px;padding-bottom: 55px;}
.icon-car {max-width: 80px;}
.service-content h3 {font-size: 23px;}
.service-content p {font-size: 14px;line-height: 1.3;}
.type-of-service-wrapper {padding-bottom: 30px;padding-top: 55px;}
.benefits-section .container { max-width: 900px;}
.benefits-section {padding: 55px 0 55px 0;}
.section-title {font-size: 25px;margin-bottom: 45px;}
.benefit-item .icon img {height: 50px;}
.benefit-item p {font-size: 14px;}
.benefit-item {padding-top: 10px;}
.cta-col {padding: 110px 0;}
.cta-col h2 {font-size: 25px;margin-bottom: 10px;}
.cta-col p {font-size: 14px;line-height: 1.4;}
.service-content ul, .service-content li {font-size: 14px;font-weight: 300;}
}

@media (max-width: 1270px) {
 #leasing .section-1, #vendor .section-1, #account .section-1, #energy .section-1 {min-height: 50vh;}   
.stacked-section {position: relative; }
.stacked-section.section-1 {position: sticky;}
#leasing .section-2, #leasing .section-3, #leasing .section-4, #leasing .section-5, #leasing .section-6{height: auto !important;min-height:auto;}
#vendor .section-2, #vendor .section-3, #vendor .section-4, #vendor .section-5, #vendor .section-6{height: auto !important;min-height:auto;}
 #account .section-2, #account .section-3, #account .section-4, #account .section-5, #account .section-6{height: auto !important;min-height:auto;}
#energy .section-2, #energy .section-3, #energy .section-4, #energy .section-5, #energy .section-6{height: auto !important;min-height:auto;}


#leasing .section-2, #leasing .section-3, #leasing .section-4{margin-bottom: -1px !important;padding-bottom: 1px !important;}
#vendor .section-2, #vendor .section-3, #vendor .section-4{margin-bottom: -1px !important;padding-bottom: 1px !important;}
 #account .section-2, #account .section-3, #account .section-4{margin-bottom: -1px !important;padding-bottom: 1px !important;}
#energy .section-2, #energy .section-3, #energy .section-4{margin-bottom: -1px !important;padding-bottom: 1px !important;}

}
@media (max-width: 1080px) and (max-height: 820px) {
    
}
@media (max-width: 1024px) {
    
    
    .service-item, 
    .service-item.reverse {flex-direction: column; gap: 30px;}
    .service-image, .service-content {flex: 0 0 100%;max-width: 100%;}
    .service-content {text-align: left;}
    .cta-section .container {flex-direction: column; gap: 50px;}
    .cta-col {padding: 0 20px; }
    .cta-col{padding: 30px 0 60px 0;}
    .cta-section .container {gap: 0;}
    .left-col {padding-bottom: 50px;}
    .cta-section .container::after {display: none; }
    .col-border {
        border-right: none;
        position: relative; /* 🎯 สำคัญมาก: เพื่อให้เส้นอ้างอิงตำแหน่งจากกล่องนี้ */
    }

    /* 2. สร้างเส้นประแนวนอนที่ด้านล่าง ให้กว้างทะลุขอบจอ */
    .col-border::after {
        content: '';
        position: absolute;
        bottom: 0; /* ให้อยู่ด้านล่างสุดของกล่อง */
        left: 50%; /* เริ่มที่กึ่งกลาง */
        transform: translateX(-50%); /* ดึงกลับมาตรงกลางเป๊ะๆ */
        width: 100vw; /* 🎯 กว้าง 100% ของหน้าจอ (ทะลุ padding ของ container) */
        border-bottom: 2px dashed #ccc; /* ปรับขนาดและสีเส้นประตรงนี้ได้เลย */
    }
    .col-border {border-bottom: unset;}
    .service-banner .container {padding: 210px 20px 40px 20px;}
    .intro-text, .intro-text, .benefit-item p, .service-content p, .cta-col p {font-size: 16px;}
    .bg-service-right {padding-top: 50px;padding-bottom: 50px;}
    .service-title-40 {margin-top: 50px;margin-bottom: 25px;}
    .service-row-bg {padding: 0 0 40px 0;}
    .icon-car { max-width: 65px;}
    .type-of-service-wrapper {padding-top: 50px;padding-bottom: 5px;}
    .process-section .container {display: block;}
    .process-section .container::after {border-left: unset;}
    .process-col {padding: 0 0 45px 0;}
    .left-col-border {border-bottom: 2px dashed #9090908f;}
    .service-title {font-size: 24px;line-height: 1.5;}
    .service-title span {font-size: 36px;}
    body {font-size: 16px;}
    .service-title-40, .section-title, .cta-col h2 {font-size: 24px;        padding-left: 15px;
        padding-right: 15px;}
    .service-content h3 {font-size: 20px;}
    .cta-col p {line-height: 1.4;}

    #leasing .section-1, #vendor .section-1, #account .section-1, #energy .section-1 {
        min-height: 48vh;
    }
}
@media (max-width: 820px) {
    #leasing .section-1, #vendor .section-1, #account .section-1, #energy .section-1 {
        min-height: 36vh;
}
  @media (max-width: 768px) {
    .bg-service-right, .service-wrapper-bg-left, .service-wrapper-bg-right{background-size: cover;}
    .benefit-item::before {height: 100%; }
    .benefit-item p {margin: 0}
    .benefit-item:nth-child(odd) {margin-top: 0;}
    .benefit-item:nth-child(even) {margin-top: 0;}
    .custom-modal {
        max-width: 500px;
        width: 100%;}
    .benefits-section {padding: 55px 0 20px 0;}
    .benefits-grid {flex-direction: column;gap: 0px;margin-left: 30px;}
    .benefit-item {padding-bottom: 30px;}
    .item-1, .item-2, .item-3, .item-4 {margin-top: 0; }
    .services-container-item {flex-direction: column;gap: 40px;}
    .diagram {max-width: 100%;}
  }
  @media (max-width: 568px) {
  .icon-car {max-width: 45px;}
  .stat-item {padding: 20px 20px  0 20px;}
  .stat-item p {padding-top: 10px;}
  .cta-col p {margin-bottom: 10px;}
  #leasing .section-1, #vendor .section-1, #account .section-1, #energy .section-1 {min-height: 46vh;}

    }