body {
    background-color: var(--theme-bg-dark); 
    color: var(--theme-text-light); 
    font-family: var(--font-base);
}

/* Các section có nền sáng */
.section-intro, 
.section-categories, 
.section-project {
    background-color: var(--theme-bg-light);
    color: var(--theme-text-dark); 
}

/* Các section có nền tối */
.section-why,
.section-services,
.section-news {
    background-color: var(--theme-bg-dark);
    color: var(--theme-text-light);
}

/* Tiêu đề chung cho các section */
.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem; 
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--theme-accent-red); /* Màu gạch chân đỏ */
}

/* Mục "Tại sao chọn chúng tôi" */
.choose-item .choose-number {
    color: var(--theme-accent-red); /* Số thứ tự màu đỏ */
    font-size: 5rem;
    font-weight: 700;
    margin-right: 20px;
}
.choose-item .choose-text strong {
    color: var(--theme-text-light);
    font-size: .9rem;
}

/* Item chung trên nền tối */
.category-item, .services-item, .project-item, .new-item {
    background-color: var(--theme-bg-dark-secondary); /* Nền xám đậm hơn */
    padding: 2px;
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-speed);
    margin-bottom: 20px;
}
.category-item:hover, .services-item:hover, .project-item:hover, .new-item:hover {
    transform: translateY(-10px);
}

/* Tên item chung trên nền tối */
.category-name a, .services-name a, .project-name a, .new-name a {
    color: var(--theme-text-light);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-speed);
    font-size: 1.45rem;
}
.category-name a:hover, .services-name a:hover, .project-name a:hover, .new-name a:hover {
    color: var(--theme-accent-red);
}
.category-name {
    text-align: center;
    padding: 15px 0px;
}

/* Style riêng cho các item trên nền sáng */
.section-categories .category-item {
    background-color: var(--theme-bg-light); 
    border: 1px solid var(--theme-border-light);
}
.section-categories .category-name a {
    color: var(--theme-text-dark);
}
.section-categories .category-name a:hover {
    color: var(--theme-accent-red);
}
.choose-item {
    display: flex;
    align-items: center;
}

/* Container chính để tạo hiệu ứng tràn lề */
.project-slider-container {
    position: relative;
    overflow-x: clip; 
}

/* Định dạng Swiper */
.project-slider {
    width: 100%;
    padding: 20px 0;
    overflow: visible;
}

/* KHÔNG còn hiệu ứng thu nhỏ hay mờ nữa */
.swiper-slide {
    width: 30%; /* Chiều rộng mỗi slide, có thể điều chỉnh trong JS breakpoints */
}

/* Định dạng cho từng item dự án */
.project-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    /* ĐÃ BỎ: border-radius: 8px; */
}

.project-item img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.project-item:hover img {
    transform: scale(1.05); /* Thêm hiệu ứng zoom nhẹ khi hover */
}

.project-item a {
    display: block;
    position: relative;
}

/* Lớp phủ màu tối để chữ nổi bật */
.project-item .project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.project-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Định dạng cho 2 mũi tên điều hướng (vẫn giữ nguyên) */
.swiper-button-prev,
.swiper-button-next {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}
.section-intro-overlap {
    padding: 80px 0;
    background-color: var(--theme-bg-light);
}

/* Container chung, rất quan trọng để định vị khối text */
.intro-overlap-container {
    position: relative;
    display: flex;
    align-items: center; /* Căn các item con theo chiều dọc */
}

.intro-image-wrapper {
    /* Ảnh sẽ chiếm khoảng 60% chiều rộng container */
    flex: 0 0 60%;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border-radius: 8px;
}

.intro-image-wrapper img {
    width: 100%;
    display: block;
    border-radius: 8px;
    aspect-ratio: 4 / 3; /* QUAN TRỌNG: Ép ảnh theo tỷ lệ 4:3 */
    object-fit: cover;   /* Đảm bảo ảnh luôn lấp đầy khung mà không bị méo */
}

/* Khối nội dung được định vị tuyệt đối */
.intro-content-box {
    position: absolute;
    z-index: 10;
    left: 50%; /* Bắt đầu từ 50% vị trí của container */
    width: 50%; /* Chiều rộng khối text bằng 50% container */
    max-width: 550px; /* Chiều rộng tối đa để chữ không quá dài */
    
    background-color: var(--theme-bg-dark, #1a1a1a);
    color: var(--theme-text-light, #e0e0e0);
    padding: 40px;
    border-left: 5px solid var(--theme-accent-red, #c30000);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.intro-content-box .section-title {
    text-align: left;
    margin-bottom: 15px;
}
.intro-content-box .section-title::after {
    left: 0;
    transform: none;
}

/* Responsive cho mobile */
@media (max-width: 991px) {
    .intro-overlap-container {
        flex-direction: column;
    }
    .intro-image-wrapper {
        width: 100%;
        flex: none;
    }
    .intro-content-box {
        position: static; /* Trả về vị trí bình thường */
        width: 90%; /* Chiếm 90% chiều rộng */
        margin: -50px auto 0 auto; /* Đẩy lên để chồng lên ảnh một chút */
    }
}

/* --- Section Header (Tiêu đề + nút Xem tất cả) --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px; /* Ghi đè margin-bottom của .section-title */
}

.section-header .section-title {
    margin-bottom: 0; /* Xóa margin-bottom của riêng tiêu đề */
    text-align: left;
}

.section-header .section-title::after {
    left: 0; /* Gạch chân căn lề trái */
    transform: none;
}

/* Nút bấm "Xem tất cả" */
.btn-outline-light {
    border: 2px solid var(--theme-border-dark, #444444);
    color: var(--theme-text-light, #e0e0e0);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: var(--theme-accent-red, #c30000);
    border-color: var(--theme-accent-red, #c30000);
    color: #fff;
}


/* --- News Card (Thẻ tin tức) --- */
.news-card {
    background-color: var(--theme-bg-dark-secondary, #2a2a2a);
    border: 1px solid var(--theme-border-dark, #444444);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.news-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Giữ tỷ lệ ảnh 16:9 cho đồng bộ */
    overflow: hidden;
}

.news-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-image-wrapper img {
    transform: scale(1.05);
}

.news-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-meta {
    margin-bottom: 10px;
}

.news-date {
    font-size: 0.85rem;
    color: #a0a0a0;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    /* Giới hạn 2 dòng cho tiêu đề */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-title a {
    color: var(--theme-text-light, #e0e0e0);
    text-decoration: none;
}
.news-title a:hover {
    color: var(--theme-accent-red, #c30000);
}

.news-excerpt {
    font-size: 0.95rem;
    color: #c0c0c0;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Đẩy link "Xem chi tiết" xuống dưới */
    /* Giới hạn 3 dòng cho mô tả */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-more {
    color: var(--theme-accent-red, #c30000);
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start; /* Căn link về bên trái */
}

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

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

/* --- Section Header (Dùng chung) --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px; 
}

.section-header .section-title {
    margin-bottom: 0; 
    text-align: left;
}

.section-header .section-title::after {
    left: 0;
    transform: none;
}

.btn-outline-light {
    border: 2px solid var(--theme-border-dark, #444444);
    color: var(--theme-text-light, #e0e0e0);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; 
}

.btn-outline-light:hover {
    background-color: var(--theme-accent-red, #c30000);
    border-color: var(--theme-accent-red, #c30000);
    color: #fff;
}


/* --- Service Card (Layout Ảnh với Overlay) --- */
.service-card-image {
    position: relative;
    display: block;
    height: 320px; /* Chiều cao cố định cho mỗi card */
    overflow: hidden;
    border-radius: 8px; /* Bo góc nhẹ cho card ảnh */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    color: #fff;
    transition: transform 0.3s ease;
}

.service-card-image:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
}

.service-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    z-index: 1;
}

.service-card-image:hover .service-bg-image {
    transform: scale(1.08); /* Zoom ảnh nhẹ khi hover */
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Đẩy nội dung xuống dưới */
    padding: 25px;
    z-index: 2;
    transition: background 0.4s ease;
}

.service-card-image:hover .service-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.service-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #ffffff;
}

.service-description {
    font-size: 0.95rem;
    color: #c0c0c0;
    margin-bottom: 15px;
    line-height: 1.6;
    /* Ẩn mô tả khi chưa hover, hoặc giới hạn số dòng */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.service-card-image:hover .service-description {
    opacity: 1;
    max-height: 100px; /* Cho phép hiển thị mô tả khi hover */
}

.service-action-link {
    font-weight: 600;
    color: var(--theme-accent-red, #c30000);
    transition: transform 0.3s ease;
    display: inline-block;
}

.service-action-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.service-card-image:hover .service-action-link i {
    transform: translateX(5px);
}

.section-cta {
    background-color: var(--theme-accent-red, #c30000);
    padding: 60px 0;
}
.cta-title {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.cta-subtitle {
    color: #e0e0e0;
    font-size: 1.1rem;
    margin-bottom: 30px;
}
/* Nút CTA trạng thái bình thường (Giữ nguyên) */
.btn-cta {
    background-color: #fff;
    color: var(--theme-accent-red, #c30000);
    padding: 15px 35px;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: all 0.3s ease; /* Thêm transition để hiệu ứng mượt hơn */
    border: 2px solid #fff; /* Thêm viền trắng */
}

/* ĐÃ SỬA LẠI: Hiệu ứng hover cho nút trên nền đỏ */
.btn-cta:hover {
    background-color: var(--theme-bg-dark, #1a1a1a); /* Đổi sang nền đen */
    color: #fff; /* Chữ màu trắng */
    border-color: var(--theme-bg-dark, #1a1a1a); /* Viền cùng màu nền */
    transform: translateY(-3px); /* Hiệu ứng nhấc lên nhẹ */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Đổ bóng */
}

/* --- Button "Khám phá câu chuyện" trong section Intro --- */

.intro-more.btn-primary {
    display: inline-flex; /* Sử dụng flexbox để căn chỉnh chữ và icon */
    align-items: center;
    justify-content: center;
    
    background-color: var(--theme-accent-red, #c30000);
    color: #fff;
    
    padding: 12px 30px;
    border-radius: 50px; /* Bo tròn thành hình con nhộng */
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    
    border: 2px solid var(--theme-accent-red, #c30000);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột vào */
.intro-more.btn-primary:hover {
    background-color: var(--theme-accent-red-hover, #e60000);
    border-color: var(--theme-accent-red-hover, #e60000);
    color: #fff;
    transform: translateY(-4px); /* Hiệu ứng nhấc lên */
    box-shadow: 0 12px 25px rgba(195, 0, 0, 0.3); /* Thêm hiệu ứng đổ bóng màu đỏ */
}

/* Thêm icon mũi tên vào sau chữ bằng CSS */
.intro-more.btn-primary::after {
    /* Mã unicode cho icon mũi tên phải của Font Awesome */
    content: '\f061'; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Icon di chuyển nhẹ khi hover */
.intro-more.btn-primary:hover::after {
    transform: translateX(5px);
}