html{
    scroll-behavior: smooth;
}
.rooftop-solar-solutions{
    	        margin-top: 70px;
    	    }
	    .rooftop-solar-solutions #intro-section{
	        background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom center;
            padding-top: 220px;
	    }
	    .rooftop-solar-solutions h2{
	        font-size: 40px !important;
            line-height: 50px !important;
	        font-weight: 500 !important;
	        color: #000;
	    }
	    .rooftop-solar-solutions h1{
            font-size: 23px;
            line-height: 33px !important;
            margin: -10px 0 10px 0;
	    }
	    .rooftop-solar-solutions .intro-box img{
	        width: 300px;
            margin: auto 50px auto auto;
	    }
	    .rooftop-solar-solutions .intro-box{
	        display: grid;
	        grid-template-columns: 1fr 1fr;
            max-width: 1000px;
            margin: 0 auto;
            /*backdrop-filter: blur(8px);*/
	    }
	    .rooftop-solar-solutions .intro-description{
	        padding-left: 50px;
	        border-left: 3px solid #0031a7;
	    }
	    .rooftop-solar-solutions .intro-description b{
	        color: #0031a7;
	    }
	    .rooftop-solar-solutions .intro-description p{
	        color: #000;
	        margin-bottom: 0;
	    }
	    .rooftop-solar-solutions .intro-description .btn-intro{
	        background-color: #0031a7;
	        color: #fff;
            display: inline-flex;
            margin-top: 15px;
            align-items: center;
            font-size: 22px;
            font-weight: 600;
            padding: 0 10px 8px 15px;
	    }
	    .rooftop-solar-solutions .intro-description,
	    .rooftop-solar-solutions .services-description{
	        font-size: 25px;
            line-height: 40px;
            color: #000;
	    }
	    .rooftop-solar-solutions #services-section{
	        padding: 60px 0 0 0;
	    }
	    
	    .rooftop-solar-solutions .service-title{
	        font-size: 40px;
	        line-height: 50px;
	        color: #0031a7;
            margin: 0 auto;
            max-width: 600px;
            text-align: center;
            padding: 50px 0;
	    }
	    .rooftop-solar-solutions .service-description{
	        font-size: 16px;
            line-height: 26px;
            font-weight: 500;
            color: #000;
            text-align: justify;
            text-align-last: center;
            margin: 0 auto 30px auto;
	    }
	    .rooftop-solar-solutions .service-description p{
	        color: #000;
	        text-align: center;
	    }
	    .rooftop-solar-solutions .services-title{
	        height: 70px;
	        font-size: 25px;
	        line-height: 35px;
            text-align: center;
            font-weight: 600 !important;
            margin-bottom: 10px;
	    }
	    .rooftop-solar-solutions .services-description{
	        font-size: 16px;
            line-height: 26px;
	    }
	    .rooftop-solar-solutions .services img{
	        width: 120px;
            height: 120px;
            object-fit: contain;
            margin-bottom: 10px;
	    }
	    .rooftop-solar-solutions .service-box{
	        background-size: cover;
            background-position: bottom center;
            padding: 50px 0 150px 0;
	    }
	    .rooftop-solar-solutions .advantages-title,
	    .rooftop-solar-solutions .benefits-title{
	        position: relative;
	        padding-bottom: 20px;
	        margin-bottom: 30px;
	    }
	    .rooftop-solar-solutions .advantages-title span{
	        color: #0031a7;
	    }
	    
	    .rooftop-solar-solutions .advantages-title:after,
	    .rooftop-solar-solutions .benefits-title:after{
	        content:"";
	        position: absolute;
	        height: 10px;
	        width: 200px;
	        left: 0;
	        bottom: 0;
	        background-color: #0031a7;
	    }
	   
	    .rooftop-solar-solutions .services-content .services-title-background{
	        background-size: contain;
            background-position: center;
	    }
	    
        .service-list {
          display: grid;
          grid-template-columns: repeat(6, 1fr); /* 6 cột bằng nhau */
          gap: 40px 20px;                        /* row-gap x col-gap */
          justify-items: center;                 /* căn giữa nội dung mỗi ô */
        }
        
        .service-list .services {
          text-align: center;
        }
        
        /* Hàng 1 - 2 box nằm giữa */
        .service-list .services:nth-child(1) {
          grid-column: 2 / span 2;  /* chiếm cột 2-3 */
        }
        .service-list .services:nth-child(2) {
          grid-column: 4 / span 2;  /* chiếm cột 4-5 */
        }
        
        /* Hàng 2 - 3 box */
        .service-list .services:nth-child(3) {
          grid-column: 1 / span 2;           /* cột 2 */
        }
        .service-list .services:nth-child(4) {
          grid-column: 3 / span 2;  /* cột 3-4 */
        }
        .service-list .services:nth-child(5) {
          grid-column: 5 / span 2;           /* cột 5 */
        }
            
        .services {
            text-align: center; 
        }
	    
        
        /* Phần tiêu đề gồm số thứ tự và tiêu đề dịch vụ */
        /*.rooftop-solar-solutions .services-box-title {*/
        /*  background-color: #1e429f;*/
        /*  color: white;*/
        /*  display: flex;*/
        /*  align-items: center;*/
        /*  padding: 25px 25px 35px 25px;*/
        /*  position: relative;*/
          /*margin-bottom: 10px;*/
          /*box-shadow: 7px 6px 4px 0px rgb(0 0 0 / 20%);*/
          /*overflow: hidden;*/
        /*  background: url("/wp-content/uploads/2025/06/EDM_PEB_Pebsol-16.png");*/
        /*  background-size: 100% 100%;*/
        /*}*/
        
        /* Số thứ tự dạng hình lục giác */
        /*.rooftop-solar-solutions .service-number {*/
        /*  background: white;*/
        /*  color: #1e429f;*/
        /*  font-size: 16px;*/
        /*  line-height: 26px;*/
        /*  font-weight: 500 !important;*/
        /*  width: 25px;*/
        /*  height: 25px;*/
        /*  display: flex;*/
        /*  align-items: end;*/
        /*  justify-content: center;*/
        /*  margin-right: 10px;*/
        /*  clip-path: polygon(40% 0%, 64% 0%, 100% 40%, 100% 64%, 64% 100%, 40% 100%, 0% 64%, 0% 40%);*/
        /*}*/
        
        .rooftop-solar-solutions .services-box-title h3 {
            margin: 0;
            margin-top: -7px;
            font-weight: 500 !important;
            color: #fff;
            font-size: 26px;
            line-height: 36px;
        }
        
        
        /* Danh sách các mục */
        .rooftop-solar-solutions .service-items {
          list-style: none;
          margin: 0;
          padding: 25px;
          background: white;
          /*box-shadow: 7px 6px 4px 0px rgb(0 0 0 / 20%);*/
          min-height: 176px;
          /*background: url("/wp-content/uploads/2025/06/EDM_PEB_Pebsol-17.png");*/
          background-size: 100% 100%;
        }
        
        /* Từng item */
        /*.rooftop-solar-solutions .service-item {*/
        /*  position: relative;*/
        /*  padding-left: 30px;*/
        /*  margin-bottom: 12px;*/
        /*  font-size: 23px;*/
        /*  line-height: 33px;*/
        /*}*/
        
        /* Biểu tượng hình thoi phía trước */
        /*.rooftop-solar-solutions .service-item::before {*/
        /*  content: '';*/
        /*  position: absolute;*/
        /*  left: 0;*/
        /*  top: 12px;*/
        /*    width: 14px;*/
        /*    height: 14px;*/
        /*    background-color: #1e429f;*/
        /*    clip-path: polygon(40% 0%, 64% 0%, 100% 40%, 100% 64%, 64% 100%, 40% 100%, 0% 64%, 0% 40%);*/
        /*}*/
        .rooftop-solar-solutions .advantages-box-description{
            display: flex;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
        }
        .rooftop-solar-solutions .advantages-box-description .advantages-icon{
            width: 130px;
            margin-right: -44px;
        }
        .rooftop-solar-solutions .advantages-box-description .advantages-description strong{
            font-size: 20px;
            line-height: 30px;
        }
        .rooftop-solar-solutions .advantages-box-description .advantages-description{
            font-size: 16px;
            line-height: 24px;
            background: url("/wp-content/uploads/2025/06/EDM_PEB_Pebsol-21.png");
            background-size: 100% 100%;
            padding: 20px 50px 30px 100px;
        }
        .rooftop-solar-solutions .advantages-list{
            margin: 60px 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .rooftop-solar-solutions .advantages-list .advantages{
            display: flex;
            align-items: stretch;
            gap: 0px;
        }
        .rooftop-solar-solutions .advantages-list .advantages .advantages-image{
            width: 250px;
            height: 100%;
            position: relative;
            filter: drop-shadow(4px 5px 1px #b9b9b9);
        }
        .rooftop-solar-solutions .advantages-list .advantages .advantages-image .advantage-image{
            position: relative;
            overflow: hidden;
        }
        /*.rooftop-solar-solutions .advantages-list .advantages .advantages-box .advantage-image:before{*/
        /*    content: "";*/
        /*    position: absolute;*/
        /*    right: -13px;*/
        /*    top: -3px;*/
        /*    display: inline-block;*/
        /*    transform: rotate(45deg);*/
        /*    width: 0;*/
        /*    height: 0;*/
        /*    border-left: 20px solid transparent;*/
        /*    border-right: 20px solid transparent;*/
        /*    border-bottom: 20px solid white;*/
        /*}*/
        .rooftop-solar-solutions .advantages-list .advantages .advantages-box{
            width: calc(100% - 210px);
            margin-right: -40px;
            font-size: 15px;
            line-height: 25px;
            text-align: justify;
        }
        .rooftop-solar-solutions .advantages-list .advantages:not(:nth-child(4n+1)):not(:nth-child(4n+2)) .advantages-box{
            margin-right: 0;
            margin-left: -40px;
        }
        /*.rooftop-solar-solutions .advantages-list .advantages .advantages-box img{*/
        /*    transform: translate(0, -100px);*/
        /*}*/
        
        .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3{
            color: #1e4396;
            padding: 0 0 10px 0;
            font-size: 20px;
            line-height: 25px;
            margin-bottom: 10px;
            font-weight: 500 !important;
            z-index: 1;
            position: relative;
        }
        .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3:after{
            content: "";
            position: absolute;
            bottom: 0;
            width: 80%;
            height: 2px;
            background: #1e4396;
            left: 0;
        }
        /* ====== ZIG-ZAG ORDER ======
           Mặc định: ảnh TRÁI – box PHẢI
           Đảo cho 1-2, 5-6, 9-10... (tức 4n+1 và 4n+2)
        */
        .advantages:nth-child(4n+1) .advantages-image,
        .advantages:nth-child(4n+2) .advantages-image{ order:2; }
        .advantages:nth-child(4n+1) .advantages-box,
        .advantages:nth-child(4n+2) .advantages-box{ order:1; }
        
        /* ẢNH TRÁI (mặc định): vát mép phải — ĐỔI sang dạng “/” (đỉnh rộng trên) */
        .advantages:not(:nth-child(4n+1)):not(:nth-child(4n+2)) .advantages-image img{
          /* 0 0 -> 100 0 -> 100 100 -> 15 100 */
          clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
        }
        
        /* ẢNH PHẢI (các item đảo): vát mép trái — ĐỔI sang dạng “/” đối xứng */
        .advantages:nth-child(4n+1) .advantages-image img,
        .advantages:nth-child(4n+2) .advantages-image img{
          /* 0 0 -> 85 0 -> 100 100 -> 0 100 */
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
          
        }
        
        .advantages:not(:nth-child(4n+1)):not(:nth-child(4n+2)) .advantages-box h3{
            text-align: right;
        }
        .advantages:not(:nth-child(4n+1)):not(:nth-child(4n+2)) .advantages-box h3:after{
            left: auto;
            right: 0;
        }
        
        .advantages img{
          height: 100%;
          object-fit: cover;
        }
        .advantages-box {
          position: relative;
        }
        
        /* LỚP NỀN: chính nó có clip-path + shadow */
        .advantages-shape {
          position: absolute;
          inset: 0;
          background: #d1d1d161;
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%);
          z-index: 0;
          bottom: -4px;
          right: -4px;
          backdrop-filter: blur(10px);
        }
        
        /* NỘI DUNG: chữ nằm trên, không bóng */
        .advantages-content {
          position: relative;
          z-index: 1;
          padding: 10px 20px 10px 60px;
          background: #f8f8f8;
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%);
          text-align: right;
          height: 100%;
        }
        .advantages-description{
            font-size: 15px;
            line-height: 21px;
        }
        
        /* Zig-zag: đổi chiều vát khi box ở bên phải */
        .advantages:nth-child(4n+1) .advantages-box .advantages-shape,
        .advantages:nth-child(4n+2) .advantages-box .advantages-shape,
        .advantages:nth-child(4n+1) .advantages-box .advantages-content, 
        .advantages:nth-child(4n+2) .advantages-box .advantages-content{
          clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
        }

        .advantages:nth-child(4n+1) .advantages-box .advantages-content,
        .advantages:nth-child(4n+2) .advantages-box .advantages-content{
            padding: 10px 60px 10px 20px;
            text-align: left;
        }
        .rooftop-solar-solutions #benefits-section{
            background-size: cover;
            padding: 50px 0;
        }
        .rooftop-solar-solutions .benefit{
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .rooftop-solar-solutions .benefits-list{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .rooftop-solar-solutions .benefit h3{
            font-size: 22px;
            font-weight: 600 !important;
            line-height: 26px;
            border-left: 5px solid #1e4396;
            padding-left: 15px;
            margin-top: -10px;
        }
        .rooftop-solar-solutions .benefit img{
            margin: 0;
            width: 150px; 
        }
        .section-contact {
            margin-top: 20px;
            background-color: #ededed;
            padding: 50px 0;
        }
        .section-contact .row-formbecome {
            margin-bottom: 15px;
        }
        .section-contact .form-become-select p{
            margin-bottom: 0;
        }
        .section-contact .contact-form {
            background-color: #fff;
            padding: 40px;
        }
        .section-contact > .global-container {
            display: grid;
            gap: 40px;
            grid-template-columns: 0.6fr 1fr;
        }
        .section-contact .form-become-label {
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 150%;
            color: #737373;
            margin-bottom: 8px;
        }
        .section-contact .form-become-input-select {
            width: 100%;
            border: none;
            outline: none;
            border-bottom: 1px solid #b3b3b3;
            padding-bottom: 8px;
        }
        .section-contact .form-drag {
            border: 1px dashed #b3b3b3;
            box-sizing: border-box;
            border-radius: 4px;
            padding: 24px;
        }
        .section-contact .form-drag-label-text-label {
            text-decoration: underline;
        }
        .section-contact .form-drag-label {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: normal;
            font-size: 16px;
            line-height: 26px;
            color: #737373;
            margin-bottom: 0 !important;
        }
        .section-contact .form-drag-svg {
            margin-right: 10px;
        }
        .section-contact .form-drag-result.hide {
            display: none;
        }
        .section-contact .form-drag-result-close {
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
        }
        .section-contact #form-drag-file {
            display: none;
        }
        .wpcf7 input[type="file"] {
            cursor: pointer;
        }
        .section-contact .button_submit_wrapper {
            position: relative;
            margin-top: 16px;
            width: fit-content;
        }
        .section-contact #form-submit {
            display: flex;
            align-items: center;
            padding: 8px 16px 12px;
            background-color: #0031a7 !important;
            font-weight: 500;
            font-size: 18px;
            line-height: 24px;
            color: #fff;
            transition: all .15s ease-in-out;
            border: none;
            box-shadow: none;
            padding-right: 44px;
            border-radius: 0 !important;
        }
        .section-contact .button_submit_wrapper svg {
            position: absolute;
            top: 9px;
            right: 14px;
            transition: all .15s ease-in-out;
            fill: #fff;
        }
        .section-contact .form-drag-result {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-contact .form-drag-result-text {
            font-weight: normal;
            font-size: 16px;
            line-height: 26px;
            margin-right: 8px;
        }
        .section-contact .form-drag-result-size {
            font-weight: normal;
            font-size: 16px;
            line-height: 26px;
            color: #737373;
        }
        .section-contact .form-drag-result-close {
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
        }
        .section-contact .form-drag-label.hide {
            display: none;
        }
        .section-contact .form-select p{
            margin-bottom: 0;
        }
        .select2-container--default .select2-selection--single .select2-selection__placeholder{
            font-size: 15px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            padding-bottom: 3px;
        }
        @media screen and (max-width: 992px) {
            .rooftop-solar-solutions .intro-box{
    	        display: grid;
    	        grid-template-columns: 1fr;
                gap: 20px;
    	    }
            .rooftop-solar-solutions {
                margin-top: 40px;
            }
            
            .rooftop-solar-solutions .benefit h3 {
                font-size: 24px;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3{
                font-size: 18px;
                line-height: 28px;
                height: auto;
            }
            .rooftop-solar-solutions .advantages-box-description .advantages-box{
                padding: 25px 60px;
                font-size: 20px;
                line-height: 30px;
                padding: 25px 50px 30px 70px;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box img {
                transform: translate(0, -46px);
            }
            .rooftop-solar-solutions .advantages-box-description .advantages-icon{
                width: 120px;
                margin-right: -44px;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box{
                font-size: 20px;
                line-height: 30px;
            }
            .rooftop-solar-solutions .intro-description, .rooftop-solar-solutions .services-description{
                font-size: 20px;
                line-height: 30px;
            }
            .rooftop-solar-solutions h1, .rooftop-solar-solutions h2{
                font-size: 30px !important;
                line-height: 40px !important;
            }
            .rooftop-solar-solutions h1 img{
                width: 110px;
            }
            .rooftop-solar-solutions .services-box-title h3{
                font-size: 20px;
                line-height: 30px;
            }
            .rooftop-solar-solutions .service-item{
                font-size: 18px;
                line-height: 28px;
            }
        }
        @media screen and (max-width: 768px) {
            .rooftop-solar-solutions .service-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0;
                row-gap: 20px;
            }
            .service-list .services:nth-child(1),
            .service-list .services:nth-child(2),
            .service-list .services:nth-child(3),
            .service-list .services:nth-child(4),
            .service-list .services:nth-child(5){
                grid-column: 1 / span 6;
            }
            .rooftop-solar-solutions .advantages-box-description{
                flex-direction: column;
                gap: 20px;
            }
            .rooftop-solar-solutions .advantages-box-description .advantages-icon {
                width: 160px;
                margin-right: auto;
            }
            .rooftop-solar-solutions .advantages-box-description .advantages-description {
                font-size: 14px;
                line-height: 26px;
                padding: 15px 20px 20px 60px;
            }
            .rooftop-solar-solutions .advantages-list .advantages {
                flex-direction: column;
                gap: 5px;
                margin-bottom: 20px;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box {
                width: 100%;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3{
                font-size: 16px;
                line-height: 26px;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-description {
                width: 100%;
                font-size: 14px;
                line-height: 24px;
            }
            .rooftop-solar-solutions .benefit {
                display: flex;
                align-items: center;
                gap: 20px;
            }
            .rooftop-solar-solutions .intro-description, .rooftop-solar-solutions .services-description{
                font-size: 14px;
                line-height: 24px;
            }
            .rooftop-solar-solutions .benefit h3 {
                font-size: 18px;
                line-height: 28px;
            }
            
            .rooftop-solar-solutions h1, .rooftop-solar-solutions h2 {
                font-size: 25px !important;
                line-height: 35px !important;
            }
            .rooftop-solar-solutions .services-box-title h3 {
                font-size: 16px;
                line-height: 26px;
            }
            .rooftop-solar-solutions .services-box-title{
                padding: 15px 18px 25px 20px;
            }
            .rooftop-solar-solutions .service-item {
                font-size: 14px;
                line-height: 24px;
                padding-left: 20px;
                margin-bottom: 8px;
            }
            
            .rooftop-solar-solutions .service-item::before{
                top: 10px;
                width: 10px;
                height: 10px;
            }
            /*.rooftop-solar-solutions .service-number{*/
            /*    font-size: 12px;*/
            /*    line-height: 22px;*/
            /*    width: 20px;*/
            /*    height: 20px;*/
            /*}*/
            .rooftop-solar-solutions #intro-section{
                padding-top: 150px;
            }
            .rooftop-solar-solutions .benefits-list{
                grid-template-columns: 1fr;
            }
            .rooftop-solar-solutions .benefit img {
                width: 100px;
            }
            .advantages-content{
                clip-path: none !important;
                padding: 10px !important;
                text-align: left !important;
            }
            .advantages img{
                clip-path: none !important;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-image {
                width: 100% !important;
                aspect-ratio: 4 / 3;
                height: auto;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box{
                margin: 0 !important;
                height: 100%;
            }
            .advantages .advantages-image {
                order: 0 !important;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3{
                text-align: left !important;
            }
            .rooftop-solar-solutions .advantages-list .advantages .advantages-box h3:after{
                left: 0 !important;
                right: auto !important;
            }
            .advantages-shape{
                clip-path: none !important;
            }
            .section-contact > .global-container{
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .rooftop-solar-solutions .advantages-list{
                margin: 30px 0;
            }
            .section-contact {
                margin-top: 30px;
                padding: 20px 0;
            }
            .rooftop-solar-solutions .service-box {
                padding: 30px 0 40px 0;
            }
            .rooftop-solar-solutions #benefits-section{
                padding: 35px 0;
            }
            .section-contact{
                margin-top: 40px;
                padding: 30px 0;
            }
            .rooftop-solar-solutions .services-title {
                font-size: 20px;
                line-height: 30px;
                margin-bottom: 5px;
            }
            .rooftop-solar-solutions .services img {
                width: 90px;
                height: 90px;
            }
            .section-contact .contact-form {
                padding: 20px;
            }
            .rooftop-solar-solutions .advantages-title:after, .rooftop-solar-solutions .benefits-title:after{
                height: 5px;
            }
            .rooftop-solar-solutions .intro-description{
                padding-left: 20px;
            }
        }