/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    min-width: auto;
    max-width: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Top Bar */

.header {
    position: relative;
    width: 100%;
    z-index: 1000;
}

.top-bar {
    background: #000;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* không cho xuống dòng */
    overflow: hidden;
}

.top-bar-left {
    white-space: nowrap;
    font-weight: 600;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap; /* ép 1 dòng */
}

.top-bar-right span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.social-icons-top {
    display: flex;
    gap: 10px;
}

.social-icons-top a {
    color: #fff;
    text-decoration: none;
}






.social-icons-top a:hover {
    color: #2ecc71;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo h1 {
    color: #2ecc71;
    font-size: 24px;
}

.navbar ul {
    display: flex;
    list-style: none;
}

.navbar ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    transition: color 0.3s;
}

.navbar ul li a:hover {
    color: #2ecc71;
}

.hero {
    width: 100%;
    aspect-ratio: 1920 / 900; /* luôn giữ tỷ lệ 3:2 */
    position: relative;
    background: #000;
    overflow: hidden;
}

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

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    width: 100%;   /* co theo chiều rộng màn hình */
    height: 100%;  /* tự scale theo aspect-ratio */
    object-fit: contain; /* đảm bảo ảnh ko bị crop */
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

/* Container cho nội dung */
.hero .container {
    text-align: left;
    padding: 0 20px;
    max-width: 900px;
    z-index: 3; /* Đảm bảo nội dung luôn trên các slide */
}

.hero h2 {
    font-size: 48px;
    margin-bottom: 20px;
    max-width: 600px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 600px;
}

.btn {
    display: inline-block;
    background: #2ecc71;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
    font-weight: bold;
}

.btn:hover {
    background: #27ae60;
}

.btn-secondary {
    background: #333;
    color: #fff;
}

.btn-secondary:hover {
    background: #555;
}

.btn-primary {
    background: #2ecc71;
    color: #fff;
}

.btn-primary:hover {
    background: #27ae60;
}

/* Các nút điều hướng (dots) */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.dot.active, .dot:hover {
    background-color: #717171;
}

/* Social icons */
.hero-social-follow {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5; /* Đảm bảo hiển thị trên mọi thứ */
}

.follow-icon {
    font-size: 20px;
    color: #fff;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.follow-icon:hover {
    transform: translateY(-3px);
}

.follow-line {
    width: 2px;
    height: 80px;
    background: #fff;
    margin: 15px 0;
}

.follow-text {
    color: #fff;
    font-size: 14px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}


/* Floating Social Follow Bar */
.hero-social-follow {
    position: absolute; /* Vẫn là absolute so với .hero */
    left: 30px; /* Khoảng cách từ lề trái */
    top: 50%; /* Bắt đầu từ giữa theo chiều dọc của hero */
    transform: translateY(-50%); /* Dịch chuyển lên để căn giữa thực sự */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #fff;
    z-index: 50;
}

.hero-social-follow .follow-icon {
    color: #fff;
    font-size: 20px;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.hero-social-follow .follow-icon:hover {
    color: #2ecc71;
}

.hero-social-follow .follow-line {
    width: 2px;
    height: 60px;
    background-color: #fff;
    margin-bottom: 10px;
}

.hero-social-follow .follow-text {
    font-size: 14px;
    font-weight: bold;
    transform: rotate(-90deg);
    white-space: nowrap;
    transform-origin: center;
}


/* Marquee Bar */
.marquee-bar {
    background-color: #2ecc71;
    color: white;
    padding: 15px 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    font-size: 18px;
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

.marquee-content span {
    display: inline-block;
    margin: 0 40px;
    position: relative;
}

.marquee-content span::after {
    content: "•";
    position: absolute;
    right: -30px;
    color: rgba(255, 255, 255, 0.7);
}

.marquee-content span:last-child::after {
    display: none;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* youtube video */

.video_youtube {
    height: 750px;
    padding: 70px 0;
    background: url('../images/backgroud-youtube.png') no-repeat center center;
    background-size: cover;
}
.video_youtube iframe{
    width: 100%;
    height: 600px !important;
}

@media (max-width: 992px) {
    .video_youtube {
        height: 250px;
        padding: 20px 0;
    }
    .video_youtube iframe{
        width: 100%;
        height: 200px !important;
    }
}


.video-content {
    display: flex;
    flex-wrap: wrap; /* Responsive fallback */
    gap: 40px;
    align-items: center;
}

.title-video {
    flex: 1;
    color: #2ecc71;
}

.title-video h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.title-video p {
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.title-video .btn {
    padding: 10px 20px;
    font-size: 16px;
}

.video-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 400px;
}

.video-wrapper iframe {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .video-content {
        flex-direction: column;
    }

    .title-video, .video-wrapper {
        flex: unset;
        width: 100%;
        text-align: center;
    }
}


/* Section Header (reusable for many sections) */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2, .section-header h3 {
    font-size: 36px;
    color: #2ecc71;
    margin-bottom: 15px;
}

.section-header .tagline {
    font-size: 20px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* diagram */
.diagram-section {
    padding: 40px 0px 0px 0px;
}
.diagram h2 {
    font-size: 36px;
    color: #1c1818;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .diagram h2 {
        font-size: 15px;
    }
    .diagram img {
        display: block;
        width: 100% !important;
    }
}

.diagram img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Đảm bảo hình ảnh chiếm toàn bộ chiều rộng của container */
}


/* About Echofy Section */
.about-echofy {
    padding: 80px 0;
    background: url('../images/about-bg.jpg');
}

.about-content {
    display: flex;
    align-items: center; /* Căn giữa các cột theo chiều dọc */
    justify-content: space-between; /* Đẩy hình ảnh sang trái và văn bản sang phải */
    gap: 60px; /* Khoảng cách giữa hình ảnh và văn bản */
}


.about-image {
    flex: 1; /* Chiếm 1 phần không gian */
    position: relative; /* Để định vị award badge */
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* Keyframe animation cho hiệu ứng lên xuống của award badge */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Áp dụng animation vào award badge */
.award-badge {
    animation: float 3s ease-in-out infinite;
}
.award-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #000; /* Màu đen như trong template */
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: bold;
    position: absolute;
    bottom: 30px;
    left: -10px;
    z-index: 10; /* Đảm bảo badge nằm trên hình ảnh */
}

.award-badge i {
    font-size: 20px;
}

.about-text {
    flex: 1; /* Chiếm 1 phần không gian còn lại */
    padding-top: 30px;
}

.about-text .section-header {
    text-align: left; /* Căn lề trái cho tiêu đề */
    margin-bottom: 30px;
}

.about-text .section-header h3 {
    font-size: 20px;
    color: #777; /* Màu xám nhạt cho "ABOUT ECHOFY" */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.about-text .section-header h2 {
    font-size: 36px;
    color: #333; /* Màu đen cho tiêu đề chính */
    margin-bottom: 20px;
    line-height: 1.3;
}

.about-benefits {
    margin-bottom: 30px;
}

.about-benefits .benefit-item {
    display: flex;
    align-items: flex-start; /* Căn chỉnh theo đầu */
    gap: 20px;
    margin-bottom: 20px;
}

.about-benefits .benefit-item img { /* Style cho ICON HÌNH ẢNH */
    width: 30px; /* Kích thước icon, điều chỉnh nếu cần */
    height: auto;
    flex-shrink: 0; /* Đảm bảo hình ảnh không bị co lại */
}

.about-benefits .benefit-item > div { /* Style cho DIV bao quanh H4 và P */
    flex-grow: 1; /* Cho phép phần text chiếm không gian còn lại */
}

.about-benefits .benefit-item h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
    margin-top: 0; /* Loại bỏ margin top mặc định */
}

.about-benefits .benefit-item p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

.about-text .btn-more {
    background: #2ecc71; /* Màu xanh lá cây cho nút */
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.about-text .btn-more:hover {
    background: #27ae60;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Chuyển sang bố cục dọc trên màn hình nhỏ */
        text-align: center;
        gap: 40px;
    }

    .about-text .section-header {
        text-align: center; /* Căn giữa tiêu đề trên màn hình nhỏ */
    }

    .about-benefits .benefit-item {
        flex-direction: column; /* Xếp chồng lợi ích trên màn hình nhỏ */
        align-items: center;
        text-align: center;
    }

    .about-benefits .benefit-item img { /* Điều chỉnh trên màn hình nhỏ */
        margin-bottom: 10px;
        margin-right: 0; /* Loại bỏ margin right khi xếp chồng */
    }
}

/* More About Button */
.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #333;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-more:hover {
    background: #2ecc71;
}

.check-icon {
    font-size: 18px;
    color: #2ecc71;
}
/* Out Service */

/* Đảm bảo container có max-width và căn giữa để nội dung không bị tràn */
.container {
    max-width: 1140px; /* Hoặc kích thước phù hợp với thiết kế của bạn */
    margin: 0 auto;
    padding: 0 15px; /* Thêm padding ngang để nội dung không bị dính vào cạnh màn hình */
}

.our-services-section {
    padding: 0px 0px 50px 0px;
    background: url('../images/our-services-section.jpg');
    background-repeat: no-repeat; /* Ngăn hình nền lặp lại */
    background-size: cover; /* Đảm bảo hình nền bao phủ toàn bộ phần */
    background-position: center center; /* Căn giữa hình nền */
}
@media (max-width: 768px) {
    .our-services-section {
        margin-top: 10px;
    }
}
.service-card h2 {
    float: left;
    margin: 10px;
    font-size: 38px;
    color: #2ecc71 !important;
    line-height: 1.2;
}

.section-header.services-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-right: 120px; /* Thêm padding để tạo không gian cho các nút điều hướng */
    padding-left: 120px; /* Nếu muốn các nút nằm trong header content */
}

.section-header .services-header h2 {
    font-size: 18px;
    color: #2ecc71; /* Màu xanh lá cây */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-header.services-header h2 {
    font-size: 38px;
    color: #333;
    line-height: 1.2;
    margin-bottom: 0;
}

/* Style cho các nút điều hướng */
.carousel-nav-btns {
    position: absolute;
    top: 50%; /* Điều chỉnh vị trí vertical */
    right: 0; /* Đặt ở bên phải */
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    /* Đảm bảo các nút không bị ảnh hưởng bởi padding của header nếu chúng nằm bên ngoài nội dung text */
    /* Nếu bạn muốn chúng nằm bên ngoài phần text của header, hãy đặt position: absolute; cho .carousel-nav-btns
       và bỏ padding-right/left của .section-header.services-header, sau đó điều chỉnh top/right/left cho .carousel-nav-btns */
}

.carousel-nav-btns button {
    background-color: #f0f0f0; /* Màu nền nút */
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-nav-btns button:hover {
    background-color: #2ecc71;
    color: white;
}

/* Ẩn các nút điều hướng mặc định của Owl Carousel nếu không cần */
.owl-carousel .owl-nav {
    display: none;
}

/* Ẩn dots mặc định của Owl Carousel nếu không cần */
.owl-carousel .owl-dots {
    display: none;
}

/* Style cho từng thẻ dịch vụ */
.service-card {
    background-color: #F7F6EE; /* Nền xanh lá nhạt hơn một chút */
    border: 1px solid #e0ffe0; /* Viền xanh lá nhạt */
    border-radius: 10px;
    padding-top: 30px; /* Padding trên để tạo khoảng cách cho icon */
    padding-bottom: 20px; /* Padding dưới cho ảnh */
    padding-left: 0; /* Xóa padding left/right mặc định */
    padding-right: 0; /* Xóa padding left/right mặc định */
    text-align: left; /* Căn trái toàn bộ nội dung trong card */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    margin: 20px 10px; /* Khoảng cách giữa các card trong carousel */
    min-height: 450px; /* Điều chỉnh lại chiều cao tối thiểu cho card nếu cần */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Đẩy nội dung lên và ảnh xuống */
    position: relative; /* Cần thiết cho việc định vị leaf-decoration */
    overflow: hidden; /* Đảm bảo mọi thứ bên trong card không tràn ra ngoài */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hiệu ứng hover cho service card */
.service-card:hover {
    transform: translateY(-5px); /* Nhích lên một chút */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Thêm bóng đổ nhẹ */
}

/* Di chuyển icon tròn xanh lá cây qua góc trái */
.service-icon-wrapper {
    width: 60px; /* Kích thước khung icon */
    height: 60px;
    background-color: #e0ffe0; /* Nền icon */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px 30px; /* Top: 0, Right: 0, Bottom: 20px, Left: 30px */
}

.service-icon-wrapper img {
    width: 40px; /* Kích thước icon bên trong */
    height: 40px;
    object-fit: contain;
}

.service-card .service-title {
    font-size: 22px;
    color: #2ecc71;
    margin-bottom: 10px;
    padding-left: 10px; /* Căn lề trái cho tiêu đề */
}

.service-card .service-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Cho phép đoạn văn bản chiếm không gian */
    padding-left: 20px; /* Căn lề trái cho mô tả */
    padding-right: 20px; /* Thêm padding phải nếu cần để tránh tràn text */
}

.service-image {
    padding: 0 20px; /* Padding cho hình ảnh bên trong card */
}

.service-image img {
    width: 100%;
    border-radius: 8px;
    height: 150px; /* Chiều cao cố định cho ảnh */
    object-fit: cover; /* Đảm bảo ảnh vừa khung */
}

/* Style cho hình chiếc lá trang trí */
.leaf-decoration {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px; /* Điều chỉnh kích thước lá nếu cần */
    height: auto;
    z-index: 1; /* Đảm bảo chiếc lá nằm trên các phần tử khác nếu cần */
    transition: transform 0.3s ease-in-out; /* Thêm transition cho leaf */
}

.leaf-decoration img {
    width: 100%;
    height: auto;
}

/* Đảm bảo leaf decoration không bị ảnh hưởng bởi hover transform của card */
.service-card:hover .leaf-decoration {
    transform: translateY(-5px); /* Đối kháng lại transform của card */
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .section-header.services-header h2 {
        font-size: 28px;
    }
    .carousel-nav-btns {
        position: static; /* Đưa nút xuống dưới trên màn hình nhỏ */
        margin-top: 20px;
        justify-content: center;
        width: 100%; /* Choán hết chiều rộng */
        text-align: center;
        transform: translateY(0); /* Reset transform */
    }
    .section-header.services-header {
        padding-right: 15px; /* Giảm padding trên mobile */
        padding-left: 15px;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .service-card {
        padding-top: 25px;
        min-height: auto;
    }
    .section-header.services-header h2 {
        font-size: 28px;
    }
    .service-icon-wrapper {
        margin-left: 20px; /* Điều chỉnh lề trái nhỏ hơn trên mobile */
    }
    .service-card .service-title,
    .service-card .service-description {
        padding-left: 20px; /* Điều chỉnh padding trái nhỏ hơn trên mobile */
        padding-right: 20px;
    }
}
/* Services Section */
.services {
    padding: 80px 0;
    text-align: center;
    background: #f9f9f9;
}

.services-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.service-item {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    flex: 1 1 300px;
    transition: transform 0.3s;
}

.service-item:hover {
    transform: translateY(-10px);
}

.service-item i {
    font-size: 50px;
    color: #2ecc71;
    margin-bottom: 20px;
}

.service-item h4 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.service-item p {
    color: #666;
    line-height: 1.6;
}

/* Our Skills Section */
.our-skills-section {
    padding: 80px 0;
    background-color: #F6F6EE; /* Màu nền xanh lá nhạt */
}

.skills-content {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 60px; /* Khoảng cách giữa hai cột */
}

.skills-text-content {
    flex: 1; /* Chiếm 1 phần không gian */
}

.section-header.skills-header {
    text-align: left; /* Căn trái tiêu đề */
    margin-bottom: 30px;
}

.section-header.skills-header h3 {
    font-size: 18px;
    color: #2ecc71; /* Màu xanh lá cây */
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-header.skills-header h2 {
    font-size: 38px;
    color: #333;
    line-height: 1.2;
    margin-bottom: 0;
}

.skills-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.skill-checkboxes {
    display: flex; /* Hiển thị các checkbox cạnh nhau */
    gap: 30px; /* Khoảng cách giữa các checkbox */
    margin-bottom: 30px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    background-color: white;
    padding: 10px;
    border-radius: 2px;
}

.checkbox-item i {
    color: #2ecc71; /* Màu xanh lá cây cho icon check */
    font-size: 20px;
}


/* projects-section */

.projects-section {
    margin: 0px auto 180px auto;
}

.banner {
    width: 100%;
    padding: 60px 0;
  }

  .banner .container {
    max-width: 1220px;
    margin: 0 auto;
    text-align: center;
  }

  .banner-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
@media (max-width: 992px) {
    .banner {
        padding: 30px 0;
    }
}

/* slide */

.intro-container {
  position: relative; /* Quan trọng để ảnh lá dùng absolute */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 40px 0;
  overflow: hidden; /* Ẩn phần ảnh tràn nếu cần */
}

/* Ảnh chiếc lá */
.leaf-overlay {
  position: absolute;
  top: 470px;    /* Điều chỉnh vị trí tùy ảnh */
  left: 1150px;
  width: 100px;  /* Kích thước ảnh */
  z-index: 10;   /* Đảm bảo nằm trên cùng */
  pointer-events: none; /* Không cản chuột */
}
.left-panel img {
  width: 100%;
  height: 600px !important;
  border-radius: 10px;
}
.left-panel, .right-panel {
  flex: 1 1 45%;
  max-width: 600px;
}

.right-panel {
    /* background-color: #49AE44; */
    background: url('../images/slide-bg-right.png');
    background-size: cover;
    height: 600px;
}

.right-panel img {
    width: 500px;
    height: 500px;
    border-radius: 10px;
    margin-top: -100px; /* Khoảng cách giữa ảnh và nội dung bên dưới */
    margin-left: 50px;
    box-shadow: 0 0 10px 10px white;
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .right-panel {
        height: auto;
    }
    .right-panel img {
        width: 360px;
        height: 360px;
        margin-left: 120px;
        margin-top: -136px;
    }
    .intro-container {
        padding: 0px 0 !important;
    }
}

.swiper {
  width: 100%;
}

.mySwiper {
    padding: 150px 10px 0px 0px !important;
}



/* Progress Bars */
.progress-bars {
    width: 100%;
}

.progress-item {
    margin-bottom: 25px; /* Khoảng cách giữa các thanh progress */
}

.progress-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between; /* Đẩy label và percent ra hai đầu */
    align-items: flex-end;
}

.progress-percent {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.progress-bar-container {
    width: 100%;
    height: 8px; /* Chiều cao thanh progress */
    background-color: #e0e0e0; /* Màu nền thanh progress */
    border-radius: 5px;
    overflow: hidden; /* Đảm bảo thanh màu xanh không tràn */
}

.progress-bar {
    height: 100%;
    background-color: #2ecc71; /* Màu của thanh progress */
    border-radius: 5px;
    transition: width 0.5s ease-in-out; /* Hiệu ứng khi % thay đổi */
}

/* Hình ảnh bên phải */
.skills-image-content {
    flex: 1; /* Chiếm 1 phần không gian */
    position: relative; /* Để định vị badge */
    text-align: center; /* Căn giữa hình ảnh nếu nó nhỏ hơn container */
}

.main-skills-image {
    width: 100%;
    max-width: 450px; /* Điều chỉnh kích thước tối đa của hình ảnh chính */
    height: auto;
    border-radius: 230px;
}

/* Keyframe animation cho hiệu ứng lên xuống của save-the-planet-badge */
@keyframes float-planet {
    0% { transform: translateY(0) rotate(15deg); } /* Giữ độ xoay ban đầu */
    50% { transform: translateY(-10px) rotate(15deg); } /* Lên 10px, giữ độ xoay */
    100% { transform: translateY(0) rotate(15deg); } /* Về vị trí ban đầu, giữ độ xoay */
}

/* Áp dụng animation vào save-the-planet-badge và điều chỉnh vị trí */
.save-the-planet-badge {
    position: absolute;
    top: -10px; /* Vị trí từ trên xuống, bạn có thể điều chỉnh */
    left: 60px; /* Đặt ở góc bên trái */
    right: auto; /* Đảm bảo không bị kéo từ bên phải */
    width: 120px; /* Kích thước của badge */
    height: auto;
    transform: rotate(15deg); /* Xoay badge một góc nhẹ */
    z-index: 1; /* Đảm bảo nó nằm trên các phần tử khác nếu cần */
    animation: float-planet 3s ease-in-out infinite; /* Thời gian 3 giây, hiệu ứng mượt mà, lặp vô hạn */
}


/* Container bao quanh hình */
.main-skills-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 50%;
}

/* Ảnh chính */
.main-skills-wrapper img.main-skills-image {
    display: block;
    border-radius: 50%; /* cho tròn theo border */
    max-width: 100%;
    height: auto;
}

/* Border xoay vòng */
.main-skills-wrapper::before {
    content: "";
    position: absolute;
    top: -10px;   /* khoảng cách viền so với ảnh */
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 5px dashed var(--primary-color); /* viền đứt khúc */
    border-radius: 50%;
    animation: spinBorder 28s linear infinite;
}

/* Animation quay */
@keyframes spinBorder {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.save-the-planet-badge img {
    width: 100%;
    height: auto;
    display: block;

    /* Thêm animation xoay vòng */
    animation: spinBadge 12s linear infinite;
}

@keyframes spinBadge {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments cho .save-the-planet-badge trên màn hình nhỏ */
@media (max-width: 992px) {
    .save-the-planet-badge {
        position: static; /* Đặt lại vị trí badge trên mobile nếu cần */
        margin: 20px auto 0; /* Căn giữa badge dưới ảnh trên mobile */
        transform: none; /* Bỏ xoay ban đầu cho mobile */
        animation: none; /* Tắt animation trên mobile nếu không muốn */
    }
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .skills-content {
        flex-direction: column; /* Chuyển sang bố cục dọc trên màn hình nhỏ */
        gap: 40px;
    }
    .skills-text-content,
    .skills-image-content {
        flex: none; /* Bỏ flex để chúng chiếm toàn bộ chiều rộng */
        width: 100%;
        text-align: center; /* Căn giữa nội dung text trên mobile */
    }
    .section-header.skills-header {
        text-align: center; /* Căn giữa tiêu đề trên mobile */
    }
    .skills-description {
        text-align: center; /* Căn giữa mô tả trên mobile */
    }
    .skill-checkboxes {
        justify-content: center; /* Căn giữa các checkbox trên mobile */
    }
    .progress-bars {
        max-width: 400px; /* Giới hạn chiều rộng progress bars trên mobile */
        margin: 0 auto;
    }
    .save-the-planet-badge {
        position: static; /* Đặt lại vị trí badge trên mobile nếu cần */
        margin: -70px auto 0; /* Căn giữa badge dưới ảnh trên mobile */
        transform: none; /* Bỏ xoay ban đầu cho mobile */
        animation: none; /* Tắt animation trên mobile nếu không muốn */
    }
}


/* Stats Section */
.stats {
    padding: 60px 0 150px 0;
    color: #fff;
    text-align: center;
    background: url("../images/stats-bg.jpg");
    background-repeat: no-repeat; /* Ngăn hình nền lặp lại */
    background-size: cover; /* Đảm bảo hình nền bao phủ toàn bộ phần */
    background-position: center center; /* Căn giữa hình nền */
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}
.stats-grid img {
    width: 95px;
    height: 95px;
}
.stat-item h4 {
    font-size: 48px;
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 18px;
    opacity: 0.9;
}

/* contacts */
.combined-contact-projects-section {
    padding: 80px 0;
    background-color: var(--light-grey-bg); /* Sử dụng màu nền nhạt */
}

.contact-content-wrapper {
    display: flex;
    gap: 30px; /* Khoảng cách giữa ảnh và nội dung */
    align-items: center; /* Căn giữa theo chiều dọc */
    max-width: 1200px; /* Giới hạn chiều rộng */
    margin: -150px auto 0px auto; /* Căn giữa section */
    /* padding: 0 20px; Padding hai bên */
    background-color: #F6F6EE;
    border-radius: 10px;
}

.contact-image {
    flex: 1; /* Chiếm một nửa không gian */
}

.contact-image img {
    width: 100%;
    display: block;
    /* border-radius: 10px; */
}

.contact-text-content {
    flex: 1; /* Chiếm một nửa không gian còn lại */
    text-align: left; /* Căn trái nội dung */
    padding-right:15px;
}

.contact-header {
    text-align: left;
    margin-bottom: 20px;
}

.contact-header h4 {
    color: #49AF45;
}
.contact-description {
    color: var(--grey-text);
    margin-bottom: 30px;
    font-size: 24px;
}

.btn-contact-us {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    color: var(--dark-color);
    transition: color 0.3s;
    background-color: #49AF45; /* Thêm màu nền cho nút */
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
}

.btn-contact-us:hover {
    color: var(--light-color);
    background-color: var(--primary-color-darker);
}

/* Responsive cho Contact Us */
@media (max-width: 768px) {
    .contact-content-wrapper {
        flex-direction: column; /* Chuyển sang bố cục dọc trên mobile */
        text-align: center;
    }

    .contact-text-content {
        text-align: center;
    }
    .contact-text-content .contact-description {
        font-size: 20px;
    }
    .contact-text-content .contact-header h2 {
        font-size: 20px;
    }
    .contact-text-content .section-header{
       margin-bottom: 10px !important;
    }

    .contact-header {
        text-align: center;
    }
}
/* our projects */
.projects-section-inner-wrapper {
    padding-top: 60px; /* Thêm padding trên để tách biệt với Contact Us */
    max-width: 1200px;
    margin: 50px auto -180px auto;
    padding: 0 20px;
}

.projects-header {
    /* display: flex; */
    justify-content: space-between; /* Đẩy tiêu đề sang trái và nút sang phải */
    align-items: flex-end; /* Căn chỉnh theo đáy */
    margin-bottom: 30px;
    text-align: left;
}

.projects-header h4 {
    margin-top: 30px;
    color: #49af45 !important; /* Màu xanh lá cây */
}

.projects-header h2 {
    color: #1d1d1a !important; /* Màu xanh lá cây */
}

.projects-header .section-header {
    text-align: left; /* Căn trái tiêu đề */
    margin-bottom: 0;
}

.projects-header .section-header h3,
.projects-header .section-header h2 {
    text-align: left; /* Đảm bảo các heading bên trong cũng căn trái */
}

.carousel-nav-btns.projects-nav {
    display: flex;
    gap: 10px;
}

.carousel-nav-btns.projects-nav button {
    background-color: #f0f0f0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: var(--dark-color);
}

.carousel-nav-btns.projects-nav button:hover {
    background-color: var(--primary-color);
    color: var(--light-color);
}

.owl-carousel.projects-carousel {
    /* Không cần thêm style đặc biệt ở đây nếu bạn muốn hiển thị theo carousel */
}

.owl-carousel.projects-carousel .owl-stage-outer {
    padding-bottom: 30px; /* Thêm padding dưới để thấy rõ nút view details nếu có */
}

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.project-card img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.project-card:hover img {
    transform: scale(1.05);
}

.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FEFEFE;
    padding: 5px 20px;
    color: #001819;
    transition: opacity 0.3s ease-in-out;
    border-left: 10px solid #49af45;
    border-radius: 6px;
    min-height: 130px;
}

.project-info span {
    color: #868681;
}

.project-card:hover .project-info {
    opacity: 1;
}

.project-category {
    font-size: 34px;
    color: #ffbe0a !important;
    margin-bottom: 5px;
    font-weight: bold;
}

.project-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.view-details-btn {
    display: inline-block;
    color: var(--light-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s;
}

.view-details-btn:hover {
    color: var(--primary-color);
}

/* Responsive cho Projects */
@media (max-width: 768px) {
    .projects-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .projects-header .section-header {
        text-align: center;
    }
}


/* Working Process Section */
/* Variables - Đặt ở đầu file CSS của bạn */
:root {
    --primary-color: #2ecc71; /* Xanh lá cây */
    --text-color: #555; /* Màu chữ mô tả */
    --heading-color: #333; /* Màu chữ tiêu đề */
    --background-color: #f8f8f8; /* Màu nền của section */
}

/* General Body/Base Styles (có thể đã có trong project của bạn) */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* Sử dụng font chữ bạn mong muốn */
    box-sizing: border-box;
}

/* Reusable Section Header (nếu bạn có) */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2, .section-header h3, .section-header h4 {
    color: var(--heading-color); /* Màu tiêu đề chung */
    margin-bottom: 15px;
    line-height: 1.2;
}

/* ------------------------------------------- */
/* Working Process Section Specific Styles */
/* ------------------------------------------- */

.working-process-section {
    padding: 80px 20px; /* Padding trên dưới và hai bên */
    background-color: #F6F6EE;
}

/* Header Section for Working Process */
.working-process-section .process-header {
    text-align: center;
    margin-top: 80px;
    margin-bottom: 20px;
}

.working-process-section .process-header h4 {
    font-size: 16px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.working-process-section .process-header h4 img {
    height: 16px;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.working-process-section .process-header h2 {
    font-size: 40px;
    color: var(--heading-color);
    margin-top: 0;
    line-height: 1.2;
}

/* Process Steps Container - Flexbox Layout */
.process-steps-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual Process Step Card */
.process-step {
    flex-basis: 300px;
    flex-grow: 1;
    text-align: center;
    padding: 20px;
}

.process-step h3 {
    font-size: 24px;
    color: var(--heading-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.process-step p {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.6;
}

/* Icon Wrapper and Circles */
.process-step .icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.process-step .icon-circle {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--primary-color); /* Viền màu xanh đứt khúc */
    border-radius: 50%; /* Hình tròn */
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 50px; /* Dòng này không còn cần thiết cho Font Awesome icon */
    color: var(--primary-color); /* Màu này cũng không còn tác dụng trực tiếp cho img */
    
    /* Animation cho viền xoay */
    animation: rotateBorder 8s linear infinite; 
}

/* Cập nhật CSS cho ảnh icon trung tâm */
.process-step .icon-circle .central-icon {
    max-width: 90%; /* Điều chỉnh kích thước ảnh icon cho phù hợp */
    max-height: 90%; /* Điều chỉnh kích thước ảnh icon cho phù hợp */
    height: auto;
    display: block; /* Đảm bảo hình ảnh được căn giữa tốt */
    /* Áp dụng animation xoay ngược lại để giữ ảnh đứng yên */
    animation: counterRotateBorder 8s linear infinite; 
}


.process-step .leaf-overlay {
    position: absolute;
    top: -10px;
    right: -10px; 
    width: 40px;
    height: auto;
    z-index: 1;
}


.section-header.contact-header{
  box-shadow: 0 0 20px #2ecc71;
  transition: box-shadow 0.3s ease-in-out;
  border-radius: 10px;
  padding:7px 0 0 0;
}

.section-header.contact-header:hover {
  box-shadow: 0 8px 16px #2ecc71;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .contact-text-content {
       padding: 10px;
    }
}


/* Process Arrows (Sử dụng pseudo-elements) */
.process-arrow {
    position: relative;
    width: 80px;
    height: 2px;
    background-color: var(--primary-color);
    align-self: center;
    margin-top: 30px;
}

.process-arrow::after {
    content: '';
    position: absolute;
    right: -10px;
    top: -8px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--primary-color);
}

/* ------------------------------------------- */
/* Animations */
/* ------------------------------------------- */

/* Keyframes cho hiệu ứng xoay viền thuận chiều kim đồng hồ */
@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Keyframes cho hiệu ứng xoay ngược chiều kim đồng hồ */
@keyframes counterRotateBorder {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg); /* Xoay ngược chiều 360 độ */
    }
}


/* ------------------------------------------- */
/* Responsive - Giữ 3 icon 1 dòng, không scroll */
/* ------------------------------------------- */
@media (max-width: 992px) {
    .process-steps-container {
        flex-wrap: nowrap;            /* Luôn nằm 1 hàng */
        justify-content: space-between;
        transform: scale(0.85);       /* Thu nhỏ toàn bộ khối */
        transform-origin: center top; /* Co từ giữa ra để không lệch */
    }

    .process-step {
        flex: 1;                      /* Chia đều 3 phần */
        padding: 10px;
    }

    .process-step .icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .process-step h3 {
        font-size: 18px;
        margin-top: 10px;
    }

    .process-step p {
        font-size: 13px;
        line-height: 1.4;
    }

    .process-arrow {
        width: 40px;
        height: 2px;
        margin-top: 25px;
    }

    .process-arrow::after {
        top: -6px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 8px solid var(--primary-color);
    }
    
    .working-process-section {
        padding: 10px;
    }
}



/* Testimonials Section */
/* Base styles for testimonials section */
.testimonials-section {
    padding: 80px 20px;
    /* background: url('../images/testi-shape.png'); <-- BỎ DÒNG NÀY */
    /* background-repeat: no-repeat; <-- BỎ DÒNG NÀY */
    /* background-size: cover; <-- BỎ DÒNG NÀY */
    /* background-position: center center; <-- BỎ DÒNG NÀY */
    
    position: relative; /* Quan trọng để định vị pseudo-element */
    overflow: hidden; /* Để đảm bảo các lá và background xoay không tràn ra ngoài */
    background-color: var(--light-grey-bg); /* Giữ màu nền section nếu testi-shape không phủ hết */
    z-index: 0; /* Đảm bảo section có z-index */
}
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/testi-shape.png'); /* Đặt hình nền vào đây */
    background-repeat: no-repeat;
    background-size: contain; /* Hoặc contain, hoặc một kích thước cụ thể */
    background-position: center center;
    z-index: -1; /* Đảm bảo nó nằm phía sau nội dung chính của section */
    
    /* Animation để xoay background */
    animation: rotateBackground 20s linear infinite; /* Điều chỉnh thời gian và kiểu xoay */
}
/* Keyframes cho hiệu ứng xoay background */
@keyframes rotateBackground {
    from {
        transform: rotate(0deg) scale(1); /* Bắt đầu từ 0 độ, không phóng to */
    }
    to {
        transform: rotate(360deg) scale(1.1); /* Xoay 360 độ, phóng to nhẹ để tránh lộ viền */
    }
}

/* Container (giả định bạn có class này để căn giữa nội dung) */
.testimonials-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Padding hai bên */
    position: relative; /* Cho z-index nếu cần */
    z-index: 1; /* Đảm bảo nội dung nằm trên các lá trang trí */
}

/* Decorative Leaves (trang trí) */
.testimonial-decor-leaf {
    position: absolute;
    width: 100px; /* Kích thước lá lớn */
    height: auto;
    z-index: 0; /* Đảm bảo nằm dưới nội dung chính */
}

.testimonial-decor-leaf img {
    width: 100%;
    height: auto;
}

.testimonial-decor-leaf.left-leaf {
    top: 150px;
    left: 180px; /* Điều chỉnh để nó thò ra ngoài */
    transform: rotate(10deg);
}

.testimonial-decor-leaf.right-leaf {
    bottom: 50px;
    right: 80px; /* Điều chỉnh để nó thò ra ngoài */
    transform: rotate(-10deg);
}

.testimonial-small-leaf {
    position: absolute;
    width: 30px; /* Kích thước lá nhỏ */
    height: auto;
    z-index: 0;
}

.testimonial-small-leaf img {
    width: 100%;
    height: auto;
}

.testimonial-small-leaf.top-right-1 {
    top: 20px;
    right: 150px; /* Vị trí lá nhỏ 1 */
    transform: rotate(20deg);
}

.testimonial-small-leaf.top-right-2 {
    top: 60px;
    right: 50px; /* Vị trí lá nhỏ 2 */
    transform: rotate(-15deg);
}


/* Header Section */
.testimonials-section .section-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex; /* Để căn giữa icon và chữ H4 */
    flex-direction: column;
    align-items: center;
}

.testimonials-section .section-header h4 {
    font-size: 16px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.testimonials-section .section-header h4 img {
    height: 16px;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.testimonials-section .section-header h2 {
    font-size: 40px;
    color: var(--heading-color);
    margin-top: 0;
    line-height: 1.2;
}
/* nếu tagline là p */
.testimonials-section .section-header .tagline {
    font-size: 40px; /* Kích thước chữ cho tagline */
    color: var(--heading-color);
    margin-top: 0;
    line-height: 1.2;
    font-weight: bold; /* Để tagline đậm như hình */
}


/* Testimonial Slider (Nếu bạn dùng slider, đây là container cho các item) */
.testimonial-slider {
    display: flex; /* Dùng flexbox để các item nằm ngang */
    justify-content: center; /* Căn giữa các item */
    gap: 30px; /* Khoảng cách giữa các testimonial item */
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
}

/* Individual Testimonial Item */
.testimonial-item {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ nhàng */
    flex-basis: 450px; /* Kích thước cơ bản của mỗi card */
    max-width: 45%; /* Để 2 item trên 1 hàng trên màn hình lớn */
    position: relative; /* Quan trọng để định vị quote-icon */
    display: flex; /* Dùng flexbox cho bố cục bên trong */
    flex-direction: column;
    justify-content: space-between; /* Đẩy nội dung và category ra hai đầu */
    background-color: #fff;
}
/* Quote Icon (dấu nháy lớn) */
.testimonial-item .quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 60px; /* Kích thước icon dấu nháy */
    color: #e0e0e0; /* Màu xám nhạt cho icon dấu nháy */
    line-height: 1; /* Đảm bảo không có khoảng trống thừa */
}

/* Testimonial Author (avatar, name, role) */
.testimonial-item .testimonial-author {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Khoảng cách với phần text */
}

.testimonial-item .testimonial-author img {
    width: 70px; /* Kích thước avatar */
    height: 70px;
    border-radius: 50%; /* Làm tròn avatar */
    margin-right: 15px;
    object-fit: cover; /* Đảm bảo ảnh không bị méo */
    border: 2px solid var(--primary-color); /* Viền xanh cho avatar */
}

.testimonial-item .testimonial-author .author-info {
    display: flex;
    flex-direction: column;
    text-align: left; /* Căn trái thông tin tác giả */
}

.testimonial-item .testimonial-author .author-info h4 {
    font-size: 20px;
    color: var(--heading-color);
    margin: 0 0 5px 0;
    font-weight: bold;
}

.testimonial-item .testimonial-author .author-info span {
    font-size: 14px;
    color: var(--text-color);
    font-weight: normal; /* Đảm bảo không bị đậm */
}

/* Rating stars */
.testimonial-item .testimonial-author .author-info .rating {
    margin-bottom: 5px; /* Khoảng cách giữa sao và tên */
}

.testimonial-item .testimonial-author .author-info .rating .fas.fa-star {
    color: #FFAA16; /* Màu vàng cho sao */
    font-size: 14px;
    margin-right: 2px;
}


/* Testimonial Text (nội dung phản hồi) */
.testimonial-item .testimonial-text p {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 20px; /* Khoảng cách với category */
    text-align: left; /* Căn trái nội dung */
}

/* Testimonial Category (Supports, Service Quality) */
.testimonial-item .testimonial-category {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: bold;
    text-align: right; /* Căn phải như hình mẫu */
    margin-top: auto; /* Đẩy xuống dưới cùng trong flex container */
}


/* Responsive Adjustments */
@media (max-width: 992px) {
    .testimonial-slider {
        flex-direction: column; /* Xếp chồng các item trên màn hình nhỏ */
        align-items: center;
    }

    .testimonial-item {
        max-width: 90%; /* Mỗi item chiếm phần lớn chiều rộng */
        flex-basis: auto; /* Để không bị giới hạn chiều rộng cứng */
    }

    /* Ẩn các lá trang trí lớn trên màn hình nhỏ nếu chúng gây rối */
    .testimonial-decor-leaf {
        display: none;
    }
    .testimonials-section .section-header h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .testimonials-section .section-header .tagline {
        font-size: 32px;
    }
    .testimonial-item .quote-icon {
        font-size: 40px;
    }
    .testimonial-item {
        padding: 25px;
    }
    /* Ẩn các lá nhỏ trên màn hình rất nhỏ nếu cần */
    .testimonial-small-leaf {
        display: none;
    }
}

/* Partners Section */
.partners-session {
    background: url('../images/brand-bg.png');
    background-repeat: no-repeat;
    background-size: cover; /* Hoặc contain, hoặc một kích thước cụ thể */
    background-position: center center;
    padding: 50px;
    border-radius: 10px;
}
.partners {
    padding: 60px 0;
    background: #fff;
    text-align: center;
}

.partners .tagline {
    color: #fff !important;
    font-weight: bold;
}

@media (max-width: 992px) {
    .partners .section-header .tagline {
        font-size: 22px !important;
    }
}

/* Style để định vị chiếc lá ở góc trên bên phải */
.partners .partner-leaf {
    position: absolute;
    top: -20px; /* Di chuyển chiếc lá lên trên một chút */
    right: 0; /* Đặt ở góc phải */
    width: 100px; /* Điều chỉnh kích thước lá cho phù hợp */
    height: auto;
    z-index: 1; /* Đảm bảo chiếc lá nằm trên các phần tử khác */
    transform: rotate(15deg); /* Tùy chọn: xoay nhẹ để giống hình */
}

/* Phần mặc định */
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap; /* Mặc định: wrap khi màn hình lớn */
    margin-top: 40px;
}

.partner-logos img {
    max-width: 150px;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 992px) {
    .section-header .tagline {
        font-size: 25px !important;
    }
    .partner-logos {
        flex-wrap: nowrap;          /* Không cho xuống dòng */
        justify-content: space-between; /* Dàn đều ngang */
        gap: 10px;
        overflow: hidden;           /* Ẩn mọi tràn ngang */
        width: 120%;
    }

    .partner-logos img {
        flex: 1 1 auto;             /* Cho phép tự co */
        max-width: calc(12.5% - 10px); /* 8 logo = 12.5% mỗi cái */
        height: auto;
        object-fit: contain;
    }
}

/* Our Team Section */
.our-team {
    padding: 80px 0;
    background: url('../images/team-bg.jpg'); /* Điều chỉnh đường dẫn nếu cần */
    text-align: center;
}

.section-header h3 {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.section-header .tagline {
    font-size: 28px;
    color: #666;
    margin-bottom: 50px;
}

.team-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.team-member {
    flex: 0 1 250px; /* Điều chỉnh kích thước item nhỏ hơn */
    max-width: 280px; /* Đảm bảo không quá lớn */
    background: #fff;
    padding: 20px; /* Giảm padding để phù hợp với kích thước mới */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
}

.team-member .img-container {
    position: absolute;
    top: -40px; /* Đẩy lên trên để tạo hiệu ứng nửa trong nửa ngoài */
    left: 50%;
    transform: translateX(-50%);
    width: 120px; /* Điều chỉnh kích thước avatar nhỏ hơn */
    height: 120px;
    border-radius: 50%;
    overflow: hidden; /* Cắt hình tròn */
    border: 4px solid #2ecc71;
    box-shadow: 0 0 0 5px rgba(46, 204, 113, 0.3);
    background-color: white; /* Để che phần thừa của ảnh */
}

.team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.volunteer-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2ecc71;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.team-member h4 {
    font-size: 18px; /* Giảm kích thước font */
    color: #333;
    margin-top: 80px; /* Tạo khoảng trống cho avatar */
    margin-bottom: 5px;
}

.team-member p {
    font-size: 14px; /* Giảm kích thước font */
    color: #2ecc71;
    margin-bottom: 15px; /* Giảm margin */
}

.member-social-icons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Giảm khoảng cách icon */
}

.member-social-icons a {
    color: #333;
    font-size: 16px; /* Giảm kích thước icon */
    transition: color 0.3s;
}

.member-social-icons a:hover {
    color: #2ecc71;
}


@media (max-width: 992px) {
    .our-team .hide {
        display: none;
    }
    .team-grid .team-member {
        margin: 20px;
    }
}



/* Latest Blog Section */
.latest-blog {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.blog-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 50px;
}

.blog-post {
    flex: 1 1 300px;
    max-width: 380px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-align: left;
}

.blog-post img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    margin-bottom: 15px;
}

.blog-post h4 {
    font-size: 20px;
    color: #2ecc71;
    padding: 0 20px;
    margin-bottom: 10px;
}

.blog-post p {
    font-size: 16px;
    color: #666;
    padding: 0 20px;
    margin-bottom: 20px;
}

.blog-post .read-more {
    display: inline-flex;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    padding: 0 20px 20px;
    transition: color 0.3s;
}
.blog-post span {
    width: 35px !important;
    height: 35px !important;
    background-color: #2ecc71;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    display: inline-block;
    line-height: 35px; /* Căn giữa chữ trong vòng tròn */
    margin-right: 10px; /* Khoảng cách giữa số và chữ "Read More" */
    font-weight: bold; /* Làm cho số đậm hơn */
}
.blog-post .read-more i {
    margin-left: 8px;
}

.blog-post .read-more:hover {
    color: #2ecc71;
}

.view-all-blog {
    margin-top: 30px;
}


@media (max-width: 992px) {
    .latest-blog .section-header {
        margin-bottom: 30px;
    }
    .latest-blog .section-header h3 {
        font-size: 24px;
    }
    .blog-grid .blog-post img {
        height: 140px;
    }
}



/* Contacts  */

/* Tổng thể Section */
.contact {
    padding: 80px 0;
    background: #f9f9f9;
    text-align: center;
}

/* Header */
.section-header h3 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.section-header .tagline,
.contact-description {
    max-width: 800px;
    margin: 0 auto 15px;
    color: #666;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Nội dung Contact */
.contact-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 40px;
}

/* Ảnh */
.contact-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 280px;
}

.contact-image img {
    width: 100%;
    /* max-width: 500px; */
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Form */
.contact-form-wrapper {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    margin: 0 auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
}

.contact-form label {
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
}

.contact-form textarea {
    height: 140px;
    resize: vertical;
}

.contact-form button.btn {
    padding: 14px;
    background-color: #2ecc71;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button.btn:hover {
    background-color: #27ae60;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        align-items: center;
    }

    .contact-image img {
        height: auto;
        max-width: 80%;
    }
}



/* Footer */
.footer {
    background: url('../images/footer-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* Hoặc contain, hoặc một kích thước cụ thể */
    background-position: center center;
    background-size: 100% auto;
    padding: 80px 20px;
    color: #fff;
    padding: 50px 0 0; /* Adjust padding-bottom for the new bar */
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px; /* Space before bottom bar */
}

.footer-item {
    flex: 1 1 200px; /* Adjust for 5 columns */
}

.footer-item h4 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #2ecc71; /* Footer headings green */
}

.footer-item p {
    font-size: 14px;
    color: #ccc;
    line-height: 1.8;
}

.footer-item ul {
    list-style: none;
}

.footer-item ul li {
    margin-bottom: 10px;
}

.footer-item ul li a {
    text-decoration: none;
    color: #ccc;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-item ul li a:hover {
    color: #2ecc71;
}

.social-icons-footer {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons-footer a {
    color: #fff;
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons-footer a:hover {
    color: #2ecc71;
}

.footer-contact p i {
    margin-right: 10px;
    color: #2ecc71;
}

.footer-newsletter input[type="email"] {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
}

.footer-newsletter input[type="email"]::placeholder {
    color: #aaa;
}

.footer-newsletter .btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 14px;
}

.footer-bottom-bar {
    background-color: #000; /* Darker bar at the bottom */
    height: 50px;
    margin-top: 30px;
    /* Add any copyright text here if needed */
}

/* Responsive */
@media (max-width: 992px) {
    

    .top-bar-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .top-bar-right {
        flex-direction: column;
        gap: 5px;
    }

    .top-bar-right .address {
        font-size: 12px;
    }

    .top-bar-right .email, .top-bar-right .phone {
        display: none; /* Ẩn biểu tượng mail trên thanh trên cùng trên mobile */
    }

    .top-bar-right .social-icons-top {
        display: none; /* Ẩn biểu tượng mạng xã hội trên thanh trên cùng trên mobile */
    }

    .hero {
        margin-top: 0; /* tăng nếu top bar cao hơn khi xuống dòng */
    }


    .navbar ul {
        flex-direction: column;
        align-items: center;
    }

    .main-header {
        flex-direction: column;
        gap: 15px;
    }

    .hero h2 {
        font-size: 38px;
    }

    .hero p {
        font-size: 18px;
    }

    .hero-social-follow {
        left: 15px; /* Giảm khoảng cách từ lề trái trên mobile */
        /* display: none; */ /* Có thể cân nhắc ẩn đi nếu màn hình quá nhỏ và gây chật chội */
    }

    .hero .container {
        padding-left: 20px; /* Trả lại padding mặc định nếu social bar ẩn hoặc nhỏ hơn */
        text-align: center; /* Có thể căn giữa nội dung chính nếu thanh social bar bị ẩn */
    }

    .hero h2.hero-text-animate {
        font-size: 32px;
        max-width: 90%; /* Cho phép tiêu đề chiếm nhiều không gian hơn */
    }
    .hero p.hero-text-animate {
        font-size: 16px;
        max-width: 90%;
    }
    .hero-buttons {
        justify-content: center; /* Căn giữa các nút nếu thanh social bar ẩn */
        max-width: 90%;
    }

    .services-grid, .about-columns, .skills-content, .stats-grid,
    .projects-grid, .process-grid, .testimonial-slider,
    .team-grid, .blog-grid, .footer-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-item, .about-column, .skill-bars, .skills-image,
    .stat-item, .project-item, .process-item, .testimonial-item,
    .team-member, .blog-post, .footer-item {
        flex: 1 1 100%; /* Full width on small screens */
        max-width: 90%; /* Adjust max-width as needed */
    }

    .testimonial-author {
        position: static; /* Reset position for smaller screens */
        margin-top: 20px;
        justify-content: center;
    }

    .testimonial-rating {
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .hero-social-follow {
        display: none; /* Ẩn hoàn toàn trên các màn hình rất nhỏ */
    }
    .hero .container {
        padding-left: 20px; /* Trả lại padding mặc định nếu social bar ẩn */
        text-align: center; /* Căn giữa nội dung chính nếu thanh social bar bị ẩn */
    }
    .hero h2.hero-text-animate {
        font-size: 32px;
        max-width: 90%;
    }
    .hero p.hero-text-animate {
        font-size: 16px;
        max-width: 90%;
    }
    .hero-buttons {
        justify-content: center; /* Căn giữa các nút nếu thanh social bar ẩn */
        max-width: 90%;
    }
}


/* Animations */
.animate-fade .about-column {
    animation: fadeIn 1s ease-in-out forwards; /* 'forwards' keeps the end state */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sticky header effect (add this to your CSS for the JS to work) */
.header.sticky {
    background: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    padding: 0; /* Remove top padding for smaller sticky header */
}

.header.sticky .top-bar {
    display: none; /* Hide top bar when sticky */
}

.header.sticky .main-header {
    padding: 10px 20px; /* Smaller padding when sticky */
}
/* Floating Call-to-Action Buttons */
.cta-floating-buttons {
    position: fixed;
    bottom: 30px; /* Khoảng cách từ dưới lên */
    right: 30px; /* Khoảng cách từ phải vào */
    display: flex;
    flex-direction: column; /* Xếp các nút theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa các nút */
    z-index: 1000; /* Đảm bảo nổi trên các phần tử khác */
}

.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* Kích thước nút */
    height: 55px;
    border-radius: 50%; /* Nút tròn */
    color: white;
    font-size: 24px; /* Kích thước icon */
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.1); /* Phóng to nhẹ khi hover */
}

/* Specific colors for each button */
.cta-button.phone {
    background-color: #2ecc71; /* Màu xanh lá cây cho điện thoại */
}

.cta-button.zalo {
    background-color: #0088cc; /* Màu xanh Zalo, hoặc tùy chỉnh */
}

.cta-button.facebook {
    background-color: #1877f2; /* Màu xanh Facebook */
}

/* Custom Zalo icon styling if using image */
.cta-button .zalo-custom-icon {
    width: 60%; /* Kích thước icon Zalo */
    height: 60%;
    object-fit: contain; /* Đảm bảo hình ảnh vừa khít mà không bị biến dạng */
}

/* Responsive adjustments for floating buttons */
@media (max-width: 768px) {
    .cta-floating-buttons {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    .cta-button {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}