/* Global Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fcfcfc;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* Header Styles */
.site-header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background-color: #008037; /* Màu xanh lá ecoba */
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    margin-right: 20px;
}

.contact-info i {
    margin-right: 6px;
}

.header-main {
    padding: 15px 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.logo img {
    max-height: 60px; /* Giảm nhẹ chiều cao để thanh thoát hơn */
    width: auto;
    display: block;
}

.main-menu ul {
    display: flex;
    align-items: center;
    gap: 15px; /* Giảm khoảng cách giữa các item menu để không bị tràn hàng */
    margin: 0;
}

.main-menu ul li a {
    font-weight: 700;
    font-size: 13px; /* Giảm nhẹ font size */
    color: #333;
    letter-spacing: 0.3px;
    padding: 10px 5px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.main-menu ul li a:hover,
.main-menu ul li.active a {
    color: #008037;
    border-bottom-color: #008037;
}

/* Hero / Banner Area */
.hero-slider {
    position: relative;
    height: 500px;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/banner_xaydung.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}

.hero-slider .container {
    max-width: 800px;
}

.hero-content h1 {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.btn-primary {
    display: inline-block;
    background-color: #008037;
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #005f28;
    transform: translateY(-2px);
}

/* Home Section General */
.section-padding {
    padding: 70px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #008037;
}

.section-header p {
    color: #666;
    margin-top: 15px;
    font-size: 16px;
}

/* Feature / Linh vuc section */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-box {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.feature-box:hover {
    transform: translateY(-10px);
}

.feature-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.feature-info {
    padding: 25px;
}

.feature-info h3 {
    font-size: 20px;
    color: #222;
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-info p {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.read-more {
    color: #008037;
    font-weight: 700;
    font-size: 14px;
}

.read-more i {
    margin-left: 5px;
    transition: transform 0.3s;
}

.read-more:hover i {
    transform: translateX(5px);
}

/* Counters Section */
.counter-section {
    background-color: #111;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('../images/bg_counter.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.counter-box i {
    font-size: 40px;
    color: #008037;
    margin-bottom: 15px;
}

.counter-box h3 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 5px;
}

.counter-box p {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #bbb;
}

/* Project list styles */
.project-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.project-img {
    position: relative;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s;
}

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

.project-meta {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #008037;
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
}

.project-desc {
    padding: 20px;
}

.project-desc h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #222;
}

.project-desc .location {
    color: #888;
    font-size: 13px;
    margin-bottom: 10px;
}

.project-desc .location i {
    margin-right: 5px;
}

/* About Us styling */
.about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text h2 {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    margin-bottom: 20px;
}

.about-text .sub-title {
    color: #008037;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.about-text p {
    color: #555;
    margin-bottom: 20px;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.about-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-feature-item i {
    color: #008037;
    font-size: 20px;
}

.about-img {
    position: relative;
}

.about-img img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-experience {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background-color: #008037;
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,128,55,0.3);
}

.about-experience h4 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

.about-experience p {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

/* Contact form & Information page */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
}

.contact-info-box {
    background-color: #f7f9f8;
    padding: 30px;
    border-radius: 8px;
}

.contact-info-box h3 {
    margin-bottom: 20px;
    font-size: 22px;
    color: #222;
    border-left: 4px solid #008037;
    padding-left: 15px;
}

.info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item i {
    font-size: 22px;
    color: #008037;
    margin-top: 5px;
}

.info-item h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.info-item p {
    color: #666;
    font-size: 14px;
}

.contact-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.form-control:focus {
    border-color: #008037;
}

/* News/Blog Grid */
.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.news-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-date {
    color: #999;
    font-size: 12px;
    margin-bottom: 8px;
}

.news-date i {
    margin-right: 5px;
}

.news-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.news-title a:hover {
    color: #008037;
}

.news-excerpt {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* Detail view pages */
.page-title-bar {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/page_title_bg.jpg') no-center;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.page-title-bar h1 {
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 800;
}

.breadcrumb {
    margin-top: 10px;
    font-size: 14px;
}

.breadcrumb a {
    color: #ccc;
}

.breadcrumb span {
    color: #008037;
    margin-left: 5px;
}

.detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    padding: 50px 0;
}

.detail-main {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.detail-img {
    margin-bottom: 25px;
    border-radius: 6px;
    overflow: hidden;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.detail-info-item span {
    font-weight: 700;
    color: #444;
}

.detail-body {
    font-size: 16px;
    line-height: 1.8;
}

.detail-body p {
    margin-bottom: 20px;
}

.sidebar {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    height: fit-content;
}

.sidebar-widget {
    margin-bottom: 35px;
}

.widget-title {
    font-size: 18px;
    font-weight: 700;
    border-left: 4px solid #008037;
    padding-left: 12px;
    margin-bottom: 20px;
}

.related-list li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.related-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.related-list a {
    display: flex;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.related-list img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

/* Recruitment jobs */
.job-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.02);
    transition: all 0.3s;
}

.job-item:hover {
    border-color: #008037;
    box-shadow: 0 5px 15px rgba(0,128,55,0.08);
}

.job-meta-left h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #222;
}

.job-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.job-tag {
    font-size: 13px;
    color: #666;
}

.job-tag i {
    margin-right: 5px;
    color: #008037;
}

/* Site Footer */
.site-footer {
    background-color: #1a1a1a;
    color: #ccc;
    padding-top: 60px;
    font-size: 14px;
}

.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid #2e2e2e;
}

.footer-top .grid-3 {
    gap: 40px;
}

.footer-logo img {
    max-height: 60px;
    margin-bottom: 20px;
}

.footer-widget h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-widget h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #008037;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a:hover {
    color: #008037;
    padding-left: 5px;
}

.footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.footer-contact i {
    color: #008037;
    font-size: 16px;
    margin-top: 4px;
}

.footer-bottom {
    background-color: #111;
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
}

/* Responsive design */
@media (max-width: 991px) {
    .about-wrapper {
        grid-template-columns: 1fr;
    }
    .about-img {
        margin-top: 40px;
    }
    .detail-layout {
        grid-template-columns: 1fr;
    }
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-top {
        display: none;
    }
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .hero-content h1 {
        font-size: 30px;
    }
    .hero-content p {
        font-size: 15px;
    }
    .job-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .btn-primary {
        width: 100%;
        text-align: center;
    }
    
}


/* 1. Xử lý Header: Trong suốt toàn bộ (cả topbar và menu) */
.site-header {
    position: absolute !important; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: transparent !important; 
    border-bottom: none !important;
    box-shadow: none !important; /* Xóa bóng mờ của header cũ */
}
.header-top {
    background-color: transparent !important; /* Xóa nền xanh của topbar */
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.site-header .main-menu ul li a,
.site-header .logo-text,
.header-top {
    color: #ffffff !important; /* Ép toàn bộ chữ trên header thành màu trắng */
}

/* 2. Xử lý khối Banner: Phá giới hạn 800px cũ */
.hero-ecoba-style {
    background-color: #004d28 !important; /* Màu nền xanh đậm chuẩn chỉ */
    padding-top: 170px !important; /* Đẩy nội dung xuống tránh Topbar */
    padding-bottom: 80px !important;
    min-height: 85vh !important;
    display: flex;
    align-items: center;
}

/* Ép container của banner phải mở rộng tối đa 1200px */
.hero-slider.hero-ecoba-style .container {
    max-width: 1200px !important; 
    width: 90% !important;
}

.banner-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
}

/* 3. Cột Chữ (Chiếm 50%, Ép căn trái) */
.hero-slider.hero-ecoba-style .banner-content {
    width: 50% !important;
    text-align: left !important; /* Xóa căn giữa của css cũ */
}
.banner-content h1 {
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 25px !important;
    color: #ffffff !important;
    text-align: left !important;
}
.banner-content .highlight-text {
    color: #f1c40f !important;
}
.banner-content p {
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
    margin-bottom: 35px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
.btn-banner {
    background-color: #ffffff !important;
    color: #004d28 !important;
    font-weight: 800;
    padding: 12px 30px;
    border-radius: 4px;
}
.btn-banner:hover {
    background-color: #f1c40f !important;
    color: #fff !important;
}

/* 4. Cột Ảnh (Chiếm 45%) */
.banner-image {
    width: 45% !important;
    text-align: right !important;
}
.banner-img-style {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}


/* Phóng to Logo ở góc trái */
.site-header .logo {
    flex-shrink: 0 !important; /* Không cho logo bị bóp méo */
}
.site-header .logo img {
    max-height: 140px !important; /* Bạn có thể tăng lên 140px, 150px tùy vào độ vừa mắt */
    width: auto !important;
    margin-top: 10px !important; /* Đẩy nhẹ logo xuống một chút cho cân đối với menu */
}

/* Ép khối Menu và Tìm kiếm dồn hết sang phải */
.site-header .main-menu {
    display: flex !important;
    justify-content: flex-end !important; 
    align-items: center !important;
    flex-grow: 1 !important; /* Chiếm toàn bộ không gian còn lại để đẩy sang phải */
}

/* Dàn hàng ngang cho các mục chữ trong Menu */
.site-header .main-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important; /* Tạo khoảng cách thoáng giữa các chữ */
    margin-bottom: 0 !important;
}

/* Căn chỉnh lại thanh Topbar nhỏ ở trên cùng cho khớp trục 1200px */
.header-top .container {
    display: flex !important;
    justify-content: space-between !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
.site-header .navbar,
.header-top .container {
    width: 90% !important; /* Thu nhỏ khung để hở lề 2 bên */
    max-width: 1200px !important; /* Giới hạn độ rộng tối đa bằng đúng khối chữ banner */
    margin: 0 auto !important; /* Tự động chia đều lề trái/phải để căn giữa */
    padding-left: 15px !important; /* Tạo một khoảng đệm an toàn bên trái */
    padding-right: 15px !important; /* Tạo một khoảng đệm an toàn bên phải */
}
/* ==================================================
   7. NỚI RỘNG TOÀN BỘ KHUNG WEB (GIỐNG ecoba)
================================================== */

/* Tăng độ rộng của khung chứa từ 1200px lên 1440px để giảm lề 2 bên */
.container,
.header-top .container,
.site-header .navbar,
.hero-slider.hero-ecoba-style .container {
    width: 95% !important; /* Chiếm 95% màn hình */
    max-width: 1440px !important; /* Mở rộng tối đa lên 1440px */
}

/* ==================================================
   8. FIX LỖI LOGO KHỔNG LỒ & MENU BỊ RỚT DÒNG
================================================== */

/* Thu nhỏ Logo lại cho tinh tế và chừa chỗ cho Menu */
.site-header .logo img {
    max-height: 120px !important; /* 140px là quá to khiến form bị vỡ */
    width: auto !important;
    margin-top: 5px !important;
}

/* Ép các chữ trong Menu nằm trên 1 hàng ngang, tuyệt đối cấm rớt dòng */
.site-header .main-menu ul li {
    white-space: nowrap !important; 
}

/* Tinh chỉnh lại khoảng cách menu cho vừa vặn */
.site-header .main-menu ul {
    gap: 15px !important; 
}

/* Căn chỉnh lại form tìm kiếm để không bị trồi sụt */
.site-header .main-menu form {
    margin-left: 10px !important;
}
/* ==================================================
   9. HIỆU ỨNG TÌM KIẾM SỔ XUỐNG (HOVER DROP DOWN)
================================================== */

/* Khối cha chứa kính lúp và hộp dropdown */
.search-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%; /* Chiếm hết chiều cao để bắt hover dễ hơn */
    padding: 10px 0;
}

/* Icon kính lúp mặc định */
.search-icon-trigger {
    font-size: 16px;
    color: #ffffff !important; /* Chữ trắng cho tiệp với menu */
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-icon-trigger:hover {
    color: #f1c40f !important; /* Đổi màu vàng khi trỏ vào */
}

/* Hộp tìm kiếm (Ẩn đi theo mặc định) */
.search-dropdown {
    position: absolute;
    top: 150%; /* Đẩy tụt xuống dưới */
    right: 0;
    background-color: #ffffff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    opacity: 0; /* Làm trong suốt */
    visibility: hidden; /* Vô hiệu hóa tính tương tác */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt */
    transform: translateY(-15px); /* Hiệu ứng trượt nhẹ */
    min-width: 260px;
    z-index: 1000;
}

/* Cầu nối vô hình giúp chuột không bị mất hover khi di chuyển từ icon xuống hộp */
.search-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    right: 0;
    width: 100%;
    height: 20px;
}

/* HIỆU ỨNG XỔ XUỐNG KHI HOVER */
.search-menu-item:hover .search-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    top: 100%; /* Trượt lên đúng vị trí sát viền menu */
}

/* Style cho input và nút bấm bên trong dropdown */
.search-dropdown form {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.search-dropdown input {
    border: none;
    padding: 10px 15px;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #333;
}

.search-dropdown button {
    background-color: #004d28; /* Xanh ecoba */
    color: #fff;
    border: none;
    padding: 0 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-dropdown button:hover {
    background-color: #008037;
}
/* ==================================================
   10. HIỆU ỨNG MENU NGÔN NGỮ (LANGUAGE DROPDOWN) - BẢN ĐÈ MỌI CSS GỐC
================================================== */

/* Khối cha chứa nút bấm và dropdown */
.lang-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%; 
    padding: 10px 0;
    margin-left: 10px;
}

/* Nút hiển thị mặc định */
.lang-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #ffffff !important;
    gap: 5px;
}

.lang-trigger img {
    width: 22px;
    height: auto;
    border-radius: 2px;
}

.lang-trigger i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.lang-menu-item:hover .lang-trigger i {
    transform: rotate(180deg);
}

/* Hộp dropdown ngôn ngữ */
.lang-dropdown {
    position: absolute;
    top: 150%;
    right: 0;
    background-color: #ffffff !important;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(-15px);
    min-width: 140px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.lang-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    right: 0;
    width: 100%;
    height: 20px;
}

.lang-menu-item:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    top: 100%;
}

/* ÉP TOÀN BỘ MỌI THÀNH PHẦN BÊN TRONG DROPDOWN PHẢI NHẬN MÀU ĐEN */
.lang-dropdown,
.lang-dropdown *,
.lang-dropdown a,
.lang-dropdown span {
    color: #000000 !important;
}

/* Định dạng từng dòng lựa chọn */
.lang-dropdown .lang-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: all 0.2s ease;
}

.lang-dropdown .lang-option img {
    width: 20px !important;
    height: auto !important;
    display: inline-block !important;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/* Hiệu ứng khi rê chuột vào dòng */
.lang-dropdown .lang-option:hover,
.lang-dropdown .lang-option:hover * {
    background-color: #f4f6f5 !important;
    color: #004d28 !important;
}

/* ==================================================
   11. ĐỔI MÀU VÀNG CHO MENU ĐANG CHỌN (ACTIVE) VÀ HOVER
================================================== */

/* Đổi màu vàng khi di chuột vào hoặc khi đang ở đúng trang đó */
.site-header .main-menu ul li a:hover,
.site-header .main-menu ul li.active a {
    color: #f1c40f !important; /* Màu vàng sang trọng (cùng tone với chữ banner) */
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.3); /* Phủ thêm một lớp sáng mờ nhẹ (Glow) */
}
/* ==================================================
   12. TĂNG ĐỘ DÀY (CHIỀU DỌC) CHO HEADER
================================================== */

/* 1. Tăng khoảng trống trên/dưới cho thanh thông tin nhỏ (Topbar) */
.header-top {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* 2. Tạo không gian "thở" cho khối Logo & Menu chính */
.site-header .navbar {
    padding-top: 20px !important; /* Đẩy menu cách xa topbar ra một chút */
    padding-bottom: 25px !important; /* Mở rộng lề dưới cho thanh thoát */
}

/* 3. Tăng nhẹ chiều cao dải ảnh nền ở các trang phụ (Giới thiệu, Lĩnh vực...) 
   để đảm bảo ảnh nền phủ kín được Header vừa được làm dày lên */
.page-title-bar {
    min-height: 220px !important;
    padding-top: 150px !important; /* Đẩy chữ tiêu đề (nếu có) xuống dưới để không bị Header đè */
}
.site-header .navbar {
    /* Tạo đường kẻ chấm bi (dotted) màu trắng mờ (độ sáng 40%) */
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4) !important;
}
.site-header .navbar {
    position: relative !important;
}
/* ==================================================
   13 & 14. ĐƯỜNG KẺ VÀ TÒA NHÀ "PIXEL" (CHUẨN ecoba 100%)
================================================== */

/* ==================================================
   13 & 14. ĐƯỜNG KẺ VÀ TÒA NHÀ "PIXEL" (BẢN MỞ RỘNG 420PX)
================================================== */

.site-header .navbar {
    border-bottom: none !important; 
    position: relative !important;
}

/* 1. Đường chấm vuông (Đã lùi lại 420px để nhường chỗ cho thành phố) */
.site-header .navbar::before {
    content: '';
    position: absolute;
    right: 420px; /* Tăng khoảng cách chừa ra thành 420px (bội số của 6 để khớp nhịp) */
    bottom: 0;
    left: 0;
    height: 3px;
    background-image: linear-gradient(to left, transparent 3px, rgba(255, 255, 255, 0.4) 3px);
    background-size: 6px 3px;
    background-position: right bottom;
    background-repeat: repeat-x;
}

/* 2. Tổ hợp nhiều Tòa nhà Pixel (Nhân bản và trải dài 420px) */
.site-header .navbar::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 420px; /* Trải dài cụm tòa nhà ra chiếm 1/3 màn hình */
    height: 30px;
    /* Mã SVG đã được căn chỉnh khung hình chuẩn 138px để khi lặp lại sẽ khớp khít 100% */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='30'%3E%3Cstyle%3E.d%7Bfill:rgba(255,255,255,0.4)%7D%3C/style%3E%3Cpath class='d' d='M0,27h3v3H0z M6,27h3v3H6z M12,27h3v3H12z M18,27h3v3H18z M24,27h3v3H24z M30,27h3v3H30z M36,27h3v3H36z M42,27h3v3H42z M48,27h3v3H48z M54,27h3v3H54z M60,27h3v3H60z M66,27h3v3H66z M72,27h3v3H72z M78,27h3v3H78z M84,27h3v3H84z M90,27h3v3H90z M96,27h3v3H96z M102,27h3v3H102z M108,27h3v3H108z M114,27h3v3H114z M120,27h3v3H120z M126,27h3v3H126z M132,27h3v3H132z M12,21h3v3H12z M18,21h3v3H18z M12,15h3v3H12z M18,15h3v3H18z M30,21h3v3H30z M36,21h3v3H36z M30,15h3v3H30z M36,15h3v3H36z M30,9h3v3H30z M36,9h3v3H36z M30,3h3v3H30z M54,21h3v3H54z M60,21h3v3H60z M66,21h3v3H66z M54,15h3v3H54z M60,15h3v3H60z M60,9h3v3H60z M84,21h3v3H84z M90,21h3v3H90z M90,15h3v3H90z M108,21h3v3H108z M114,21h3v3H114z M108,15h3v3H108z'/%3E%3C/svg%3E");
    background-repeat: repeat-x; /* Cho phép các tòa nhà lặp lại liên tục lấp đầy 420px */
    background-position: right bottom;
}
/* ==================================================
   15. HEADER CỐ ĐỊNH (STICKY) & ĐỔI MÀU TRẮNG KHI CUỘN
================================================== */

/* Vẫn giữ nguyên lệnh ghim Header */
.site-header {
    position: fixed !important; 
    transition: all 0.4s ease !important; 
}

/* --- TRẠNG THÁI KHI CUỘN TRANG (.scrolled) --- */

/* 1. Đổi nền thành màu trắng, thêm bóng mờ để tách biệt với nội dung dưới */
.site-header.scrolled {
    background-color: #ffffff !important; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important; 
}

/* 2. Đổi toàn bộ chữ, icon sang màu xám đen để hiển thị rõ trên nền trắng */
.site-header.scrolled .header-top,
.site-header.scrolled .main-menu ul li a,
.site-header.scrolled .search-icon-trigger,
.site-header.scrolled .lang-trigger {
    color: #333333 !important; 
}

/* Làm mờ vạch kẻ của topbar cho tinh tế */
.site-header.scrolled .header-top {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* 3. Màu khi di chuột (Hover) & mục Đang chọn (Active) đổi sang Xanh lá ecoba */
.site-header.scrolled .main-menu ul li a:hover,
.site-header.scrolled .main-menu ul li.active a {
    color: #008037 !important; 
    text-shadow: none !important; /* Tắt viền sáng màu vàng cũ */
}

/* 4. Khôi phục lại màu gốc của Logo (hiện rõ chữ xanh ecoba) */
.site-header.scrolled .logo img {
    
    filter: none !important; /* Xóa mọi bộ lọc màu */
    /* Đường dẫn này tính từ vị trí của file style.css */
    content: url('../images/logo_scroll.png') !important; 
}

/* 5. Đổi màu đường chấm bi thành xanh lá nhạt */
.site-header.scrolled .navbar::before {
    background-image: linear-gradient(to left, transparent 3px, rgba(0, 128, 55, 0.3) 3px) !important;
}

/* 6. Đổi màu cụm Tòa nhà Pixel thành xanh lá nhạt (Mã SVG đã đổi màu fill) */
.site-header.scrolled .navbar::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='30'%3E%3Cstyle%3E.d%7Bfill:rgba(0,128,55,0.3)%7D%3C/style%3E%3Cpath class='d' d='M0,27h3v3H0z M6,27h3v3H6z M12,27h3v3H12z M18,27h3v3H18z M24,27h3v3H24z M30,27h3v3H30z M36,27h3v3H36z M42,27h3v3H42z M48,27h3v3H48z M54,27h3v3H54z M60,27h3v3H60z M66,27h3v3H66z M72,27h3v3H72z M78,27h3v3H78z M84,27h3v3H84z M90,27h3v3H90z M96,27h3v3H96z M102,27h3v3H102z M108,27h3v3H108z M114,27h3v3H114z M120,27h3v3H120z M126,27h3v3H126z M132,27h3v3H132z M12,21h3v3H12z M18,21h3v3H18z M12,15h3v3H12z M18,15h3v3H18z M30,21h3v3H30z M36,21h3v3H36z M30,15h3v3H30z M36,15h3v3H36z M30,9h3v3H30z M36,9h3v3H36z M30,3h3v3H30z M54,21h3v3H54z M60,21h3v3H60z M66,21h3v3H66z M54,15h3v3H54z M60,15h3v3H60z M60,9h3v3H60z M84,21h3v3H84z M90,21h3v3H90z M90,15h3v3H90z M108,21h3v3H108z M114,21h3v3H114z M108,15h3v3H108z'/%3E%3C/svg%3E") !important;
}

/* 7. Thu nhỏ Header một chút khi cuộn để tiết kiệm không gian */
/* 7. Nới rộng lề Header khi cuộn để bảo toàn đường kẻ & tòa nhà */
.site-header.scrolled .navbar {
    padding-top: 15px !important; /* Nới rộng lề trên cho thoáng đãng */
    padding-bottom: 25px !important; /* Nới rộng lề dưới để chứa trọn vẹn 30px chiều cao của tòa nhà */
    transition: padding 0.4s ease !important;
}

/* Đẩy đường kẻ và tòa nhà nhích lên trên 1px để tách hẳn khỏi lớp bóng mờ */
.site-header.scrolled .navbar::before,
.site-header.scrolled .navbar::after {
    bottom: 1px !important;
}
/* ==================================================
   16. KÉO DÀI LỀ TRÊN CỦA PHẦN ẢNH NỀN (BANNER)
================================================== */

/* Kéo dài phần lề trên của các khối chứa ảnh nền để chừa chỗ cho Header */
.page-title-bar, 
.slider-area,
.hero-wrap {
    padding-top: 183px !important; /* Bơm lề trên rộng ra. Bạn có thể tăng lên 200px hoặc 220px nếu muốn nó dài hơn nữa */
}
/* ==================================================
   17. GIỮ NGUYÊN KÍCH THƯỚC LOGO KHI CUỘN TRANG
================================================== */

.site-header.scrolled .logo img {
    max-height: 120px !important; /* 140px là quá to khiến form bị vỡ */
    width: auto !important;
    margin-top: 10px !important; /* Đảm bảo tỷ lệ không bị méo */
}
/* ==================================================
   18. CÂN ĐỐI LẠI DROPDOWN NGÔN NGỮ
================================================== */

/* 1. Thu gọn hộp Dropdown, bo góc và đổ bóng mượt mà */
.site-header .language-dropdown, 
.site-header .lang-dropdown,
.site-header .dropdown-language,
.site-header .header-lang ul {
    min-width: 110px !important;      /* Thu hẹp chiều rộng vừa vặn với nội dung */
    width: auto !important;
    padding: 8px 0 !important;        /* Thu mỏng lề trên/dưới */
    border: none !important;          /* Xóa viền cứng (nếu có) */
    border-radius: 8px !important;    /* Bo góc mềm mại giống các web hiện đại */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important; /* Bóng đổ nhẹ, sang trọng */
    right: -10px !important;          /* Neo vị trí thẳng hàng với cờ bên trên */
    left: auto !important;
}

/* 2. Căn giữa lá cờ và chữ số trên cùng một hàng ngang */
.site-header .language-dropdown li a,
.site-header .lang-dropdown li a,
.site-header .dropdown-language li a,
.site-header .header-lang ul li a {
    display: flex !important;         /* Dùng Flexbox để căn chỉnh chuẩn xác */
    align-items: center !important;   /* Ép cờ và chữ nằm giữa theo chiều dọc */
    justify-content: flex-start !important; 
    padding: 8px 20px !important;     /* Căn lề hai bên cho chữ không sát mép */
    gap: 12px !important;             /* Khoảng cách cố định cực đẹp giữa cờ và chữ */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    text-transform: uppercase !important; /* Viết hoa VI, EN cho đồng bộ */
    transition: all 0.3s ease !important;
}

/* 3. Chuẩn hóa kích thước lá cờ (Không bị to/nhỏ thất thường) */
.site-header .language-dropdown li a img,
.site-header .lang-dropdown li a img,
.site-header .dropdown-language li a img,
.site-header .header-lang ul li a img {
    width: 22px !important;           /* Chốt cứng chiều rộng cờ */
    height: auto !important;
    margin: 0 !important;             /* Xóa các khoảng lề thừa của template cũ */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Thêm chút bóng cho lá cờ nổi bật */
}

/* 4. Hiệu ứng Hover: Đổi nền mờ và chuyển chữ sang màu Xanh ecoba */
.site-header .language-dropdown li a:hover,
.site-header .lang-dropdown li a:hover,
.site-header .dropdown-language li a:hover,
.site-header .header-lang ul li a:hover {
    background-color: rgba(0, 128, 55, 0.05) !important; 
    color: #008037 !important;
}
/* ==================================================
   FOOTER PHONG CÁCH ecoba (TỐI ƯU CỘT & 1 DÒNG TIÊU ĐỀ)
================================================== */

.site-footer-ecoba {
    background-color: #f4f6f5 !important;
    color: #333333 !important;
    padding: 100px 0 40px 0 !important;
    border-top: 1px solid #e0e0e0;
    font-family: inherit;
}

/* Gom các cột về bên trái, đặt khoảng cách gần nhau giữa cột 1 và cột 2 */
.footer-container {
    max-width: 1380px !important;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; /* Không rải đều mà gom về bên trái */
    flex-wrap: wrap;
    gap: 70px; /* Khoảng cách vừa phải giữa cột 1 và cột 2 */
    padding: 0 40px !important;
}

.footer-col {
    flex: 0 0 300px; /* Thu nhỏ cột 1 lại một chút */
}

/* Riêng cột thông tin liên hệ (Cột 2) được nới rộng ra để địa chỉ không bị tràn dòng thứ 3 */
.footer-col-contact {
    flex: 0 0 400px !important; 
}

/* Cột 3 đẩy sang phải */
.footer-col-partners {
    margin-left: auto; 
}

/* Tiêu đề các cột - Bắt buộc nằm trên 1 dòng duy nhất */
.footer-company-name, 
.footer-heading {
    font-size: 21px !important; /* Cỡ chữ vừa vặn để không bị tràn khung */
    font-weight: 700;
    text-transform: uppercase;
    color: #111111;
    margin-bottom: 25px;
    letter-spacing: 0.3px;
    white-space: nowrap !important; /* Cấm xuống dòng tuyệt đối */
}

/* Cột 1: Đăng ký email */
.footer-newsletter {
    margin-bottom: 30px;
}

.newsletter-title {
    font-size: 20px !important;
    font-weight: 600;
    color: #555;
    margin-bottom: 12px;
}

.newsletter-form {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    max-width: 320px;
}

.newsletter-form input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 20px !important;
    color: #333;
}

.newsletter-form button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px !important;
    color: #333;
    transition: color 0.3s;
}

.newsletter-form button:hover {
    color: #008037;
}

/* Mạng xã hội */
.footer-socials {
    display: flex;
    gap: 16px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    background-color: #ffffff;
    color: #333;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    background-color: #008037;
    color: #ffffff;
}

/* Cột 2: Thông tin liên hệ */
.footer-col-contact p {
    font-size: 20px !important;
    line-height: 1.9;
    color: #555;
    margin-bottom: 12px;
}

.footer-col-contact strong {
    color: #222;
}

/* Cột 3: Công ty thành viên */
.partner-logos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partner-item img {
    max-height: 70px !important;
    width: auto;
    object-fit: contain;
}
/* ==================================================
   BANNER TRANG CHỦ - BỐ CỤC CHUẨN PHONG CÁCH ecoba
================================================== */

.hero-ecoba-style {
    position: relative;
    width: 100%;
    min-height: 990px !important; /* Tăng chiều cao banner để tạo khoảng trống thoáng đãng */
    background-color: #004d28;
    display: flex;
    align-items: flex-start !important;
    padding-top: 250px !important;
    padding-bottom: 60px;
    overflow: hidden;
    
}

/* 1. Lớp ảnh nền với độ rõ vừa phải (0.45) */
.hero-ecoba-style .banner-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    opacity: 5; 
    z-index: 1;
}

/* 2. Lớp phủ màu xanh nhận diện thương hiệu */
.hero-ecoba-style .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,77,40,0.97) 42%, rgba(0,77,40,0.65) 85%);
    z-index: 2;
}

/* 3. Khung chứa nội dung phân tầng dọc */
.hero-ecoba-style .container {
    position: relative;
    z-index: 3;
    max-width: 2480px !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
}

/* 4. Phân bổ bố cục: Tiêu đề ở trên, đoạn văn đẩy xuống dưới */
.hero-ecoba-style .banner-content {
    max-width: 1500px !important; /* Mở rộng khung chứa chữ để không bị bó hẹp */
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 300px;
}

.hero-ecoba-style .banner-content h1 {
    font-size: 50px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0;
}

.hero-ecoba-style .banner-content .highlight-text {
    color: #ffffff !important;
}

.hero-ecoba-style .banner-content p {
    font-size: 25px !important;
    color: #e2e8f0 !important;
    line-height: 1.7 !important;
    font-weight: 400;
    margin: 0;
    max-width: 620px;
}
/* ==================================================
   CỤM BIỂU TƯỢNG NỔI LỀ PHẢI (LẮC LƯ MẠNH - LIÊN TỤC)
================================================== */

/* Định nghĩa chuyển động lắc lư mạnh (tăng góc xoay so với cũ) */
@keyframes strong-wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-15deg); } /* Tăng từ -6deg lên -15deg */
    30% { transform: rotate(13deg); } /* Tăng từ 5deg lên 13deg */
    45% { transform: rotate(-10deg); } /* Tăng từ -4deg lên -10deg */
    60% { transform: rotate(7deg); }  /* Tăng từ 2deg lên 7deg */
    75% { transform: rotate(-4deg); } /* Tăng từ -1deg lên -4deg */
    100% { transform: rotate(0deg); }
}

.ecoba-floating-sidebar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ecoba-floating-sidebar .float-icon {
    width: 52px;
    height: 52px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    font-size: 21px;
    transform-origin: center center;
    
    /* Áp dụng hiệu ứng lắc lư mạnh, liên tục, thời gian nhanh hơn (2s) để tạo cảm giác giật */
    animation: strong-wobble 2s ease-in-out infinite;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Màu sắc cho từng nút */
.ecoba-floating-sidebar .float-icon.phone {
    background-color: #28a745;
    color: #ffffff;
}

.ecoba-floating-sidebar .float-icon.email {
    background-color: #004d28;
    color: #ffffff;
}

.ecoba-floating-sidebar .float-icon.youtube {
    background-color: #ff0000;
    color: #ffffff;
}

.ecoba-floating-sidebar .float-icon.facebook {
    background-color: #1877f2;
    color: #ffffff;
}

/* Hiệu ứng khi rê chuột vào (phóng to nhẹ lên để người dùng dễ thao tác) */
.ecoba-floating-sidebar .float-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    animation-play-state: paused; /* Tạm dừng lắc lư khi đang rê chuột vào để dễ bấm */
}
/* ==================================================
   1. MẶC ĐỊNH CHO TRANG CHỦ (GIỮ NGUYÊN ĐỘ ĐẬM CŨ)
================================================== */
.hero-ecoba-style .banner-overlay {
    background-color: #004d28 !important;
    opacity: 0.85 !important; /* Hoặc mức độ đậm cũ mà trang chủ đang dùng */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ==================================================
   2. RIÊNG CHO 3 TRANG (GIẢM ĐỘ MỜ ĐỂ THẤY RÕ ẢNH NỀN)
================================================== */
.page-gioi-thieu .banner-overlay,
.page-linh-vuc .banner-overlay,
.page-du-an .banner-overlay {
    opacity: 0.45 !important; /* Chỉ làm mờ ở 3 trang này */
}

/* Khai báo ảnh nền riêng cho từng trang */
.page-gioi-thieu.hero-ecoba-style {
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80') !important;
    background-size: cover;
    background-position: center;
}

.page-linh-vuc.hero-ecoba-style {
    background-image: url('https://images.unsplash.com/photo-1581094288338-2314dddb7ece?auto=format&fit=crop&w=1600&q=80') !important;
    background-size: cover;
    background-position: center;
}

.page-du-an.hero-ecoba-style {
    background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1600&q=80') !important;
    background-size: cover;
    background-position: center;
}

/* Đảm bảo thứ tự hiển thị chữ */
.hero-ecoba-style .banner-grid {
    position: relative;
    z-index: 2;
}
/* ==================================================
   CHỈ TĂNG LỀ TRÁI CHO 3 TRANG CON (KHÔNG ẢNH HƯỞNG TRANG CHỦ)
================================================== */
.page-gioi-thieu.hero-ecoba-style .banner-content,
.page-linh-vuc.hero-ecoba-style .banner-content,
.page-du-an.hero-ecoba-style .banner-content {
    padding-left: 230px !important; /* Tạo khoảng cách thoáng, không bị dính sát mép trái */
}

/* Đảm bảo trên màn hình nhỏ vẫn hiển thị cân đối */
@media (max-width: 768px) {
    .page-gioi-thieu.hero-ecoba-style .banner-content,
    .page-linh-vuc.hero-ecoba-style .banner-content,
    .page-du-an.hero-ecoba-style .banner-content {
        padding-left: 20px !important;
    }
}
/* ==================================================
   CĂN CHỈNH RIÊNG CHO TRANG DỰ ÁN (ĐẨY CHỮ XUỐNG GIỮA)
================================================== */
.page-du-an.hero-ecoba-style {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc của toàn bộ banner */
}

.page-du-an.hero-ecoba-style .banner-grid {
    width: 100%;
}

.page-du-an.hero-ecoba-style .banner-content {
    padding-left: 230px !important;
    padding-top: 300px; /* Tăng khoảng cách đẩy chữ "Dự án" xuống thấp hơn cho cân đối */
}

/* Đảm bảo responsive trên thiết bị di động */
@media (max-width: 768px) {
    .page-du-an.hero-ecoba-style .banner-content {
        padding-left: 20px !important;
        padding-top: 300px;
    }
}
/* ==================================================
   TĂNG CỠ CHỮ RIÊNG CHO TIÊU ĐỀ TRANG DỰ ÁN
================================================== */
.page-du-an.hero-ecoba-style .hero-title {
    font-size: 80px !important; /* Bạn có thể tăng/giảm số này (ví dụ: 60px, 64px) tùy ý */
    font-weight: 700;
    line-height: 1.2;
}
/* ==================================================
   MENU DỌC TRÊN BANNER GIỚI THIỆU (XẾP TỪ TRÊN XUỐNG)
================================================== */
.banner-about-menu {
    display: flex;
    flex-direction: column; /* Sắp xếp các mục theo chiều dọc từ trên xuống */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px; /* Khoảng cách giữa các dòng mục */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Căn giữa theo chiều dọc của banner */
    left: 250px; /* Khoảng cách cách lề trái */
    z-index: 10;
}

.banner-about-menu li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    font-weight: 600;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
}

.banner-about-menu li a:hover,
.banner-about-menu li a.active {
    color: #00ff66; /* Màu sáng nổi bật khi chọn */
    padding-left: 10px; /* Hiệu ứng dịch nhẹ sang phải khi active/hover */
}

.banner-about-menu li a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px; /* Thanh gạch chân ngắn tạo điểm nhấn */
    height: 3px;
    background-color: #00ff66;
}

/* Đảm bảo banner có chiều cao cố định và vị trí tương đối */
.hero-ecoba-style.page-gioi-thieu {
    position: relative;
    height: 420px !important;
    display: flex;
    align-items: center;
}
/* ==================================================
    TIÊU ĐỀ CHO MENU DỌC TRÊN BANNER
================================================== */
.banner-menu-title {
    color: #fff;
    font-size: 80px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    letter-spacing: 1px;
}

    /* ==================================================
       4 ẢNH DỌC TRẢI FULL CHIỀU NGANG & CHẠM SÁT FOOTER
    ================================================== */
    .gv-container {
        display: flex; 
        width: 100vw; /* Trải rộng 100% chiều ngang màn hình */
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw; /* Kéo lệch để phá vỡ giới hạn container thu nhỏ */
        margin-right: -50vw;
        height: 750px; /* Tăng chiều cao dọc để ảnh dài hơn */
        gap: 0; 
        overflow: hidden;
        box-shadow: none;
        border-radius: 0; /* Bỏ bo góc để bám sát lề */
        margin-bottom: -80px; /* Kéo phần tử dịch xuống âm để đẩy cạnh dưới chạm sát vào footer */
    }

    .gv-card {
        flex: 1; 
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: flex 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Khi hover phóng to ngang */
    .gv-card:hover {
        flex: 1.35; 
    }

    .gv-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.7s ease;
    }

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

    /* Phủ gradient mờ ở đáy */
    .gv-card::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 50%;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
        pointer-events: none;
    }

    /* Khung nội dung chữ */
    .gv-content {
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 100%;
        padding: 50px 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        z-index: 2;
    }

    /* Nền xanh trượt lên */
    .gv-content::before {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 100%;
        
        /* Đã giảm độ đậm và tăng độ trong suốt để nhìn thấy ảnh nền */
        background: rgba(0, 140, 60, 0.75); 
        
        /* Thêm hiệu ứng kính mờ nhẹ để chữ vẫn cực kỳ sắc nét dễ đọc */
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        
        transform: translateY(100%);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: -1;
    }
    .gv-card:hover .gv-content::before {
        transform: translateY(0);
    }

    /* Tiêu đề & Icon */
    .gv-header {
        transform: translateY(0);
        transition: transform 0.4s ease;
    }

    .gv-card:hover .gv-header {
        transform: translateY(-15px);
    }

    .gv-header i {
        font-size: 34px;
        color: #00ff66;
        margin-bottom: 15px;
        display: block;
    }

    .gv-header h3 {
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        margin: 0;
        text-transform: uppercase;
        line-height: 1.4;
    }

    /* Nội dung chi tiết */
    .gv-body {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
    }

    .gv-card:hover .gv-body {
        max-height: 250px;
        opacity: 1;
        margin-top: 15px;
    }

    .gv-body p {
        font-size: 25px;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.7;
        margin: 0;
    }

    /* Responsive cho màn hình nhỏ */
    @media (max-width: 992px) {
        .gv-container { flex-direction: column; height: auto; width: 100%; margin-left: 0; left: 0; margin-bottom: 0; }
        .gv-card { height: 350px; flex: 1 !important; }
    }