/* ==========================================================================
   MỤC LỤC CSS
   01. Biến cục bộ (Variables) & Font chữ toàn cục
   02. Các class tiện ích (Utilities & Colors)
   03. Header & Navigation (Thanh điều hướng)
   04. Hero Section (Phần biểu ngữ chính)
   05. Service Section (Phần dịch vụ)
   06. Project Section (Phần dự án)
   07. Partner Section (Đối tác)
   08. News Section (Tin tức & Phân trang)
   09. Process Section (Quy trình)
   10. Footer Section (Chân trang)
   ========================================================================== */

/* ==========================================================================
   01. BIẾN CỤC BỘ & FONT CHỮ TOÀN CỤC
   ========================================================================== */
/* Custom Variable Palette based on Asian Brand Identity */
:root {
    --primary-blue: #0a2540;
    --secondary-blue: #0056b3;
    --accent-yellow: #ffd100;
    --accent-orange: #ff9900;
    --dark-bg: #0d1b2a;
    --light-bg: #f8f9fa;
    --text-dark: #212529;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .fw-bold {
    font-family: var(--font-heading);
}

/* ==========================================================================
   02. CÁC CLASS TIỆN ÍCH (UTILITIES & COLORS)
   ========================================================================== */
/* Color Classes */
.bg-dark-custom { background-color: var(--dark-bg); }
.text-yellow { color: var(--accent-yellow) !important; }
.bg-yellow { background-color: var(--accent-yellow) !important; }

/* Page Spacing */
.page-padding {
    padding-top: 80px;
}

/* Z-index utility */
.z-index-2 { z-index: 2; }

/* Line tiêu đề */
.title-line {
    width: 60px;
    height: 3px;
    background-color: var(--accent-yellow);
    margin-top: 10px;
}

/* Nút Vàng (Buttons) 
   *LƯU Ý: Khai báo này đang bị lặp lại trong code gốc. Phần khai báo dưới sẽ ghi đè phần trên. */
.btn-yellow {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #000;
}
.btn-yellow:hover {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

/* Nút Vàng tư vấn/chi tiết (Khai báo lặp trong mã gốc) */
.btn-yellow {
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-yellow:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/* ==========================================================================
   03. HEADER & NAVIGATION (THANH ĐIỀU HƯỚNG)
   ========================================================================== */
/* Header 2 mảng màu Chuyển tiếp */
.bg-header-custom {
    /* Mảng 1: Xanh lá sáng | Mảng 2: Xanh lam / Xanh đậm */
    background: linear-gradient(90deg, rgba(14, 210, 112, 0.95) 40%, rgba(103, 138, 209, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.navbar-brand:hover .logo-img {
    transform: scale(1.06) rotate(-1deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.nav-link {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0.8rem 1rem !important;
}

.nav-link:hover, .nav-link.active {
    color: var(--accent-yellow) !important;
}
/* Bổ sung từ Gemini*/
/* --- BẮT ĐẦU: BỔ SUNG MAGIC NAVIGATION (Desktop) --- */
@media (min-width: 992px) {
    .magic-nav {
        position: relative;
        display: flex;
        background: transparent; /* Nền tối cho thanh menu */
        border-radius: 20px;
        height: 70px;
        padding: 0 60px;
        align-items: center;
        margin-top: 15px; /* Tạo khoảng trống phía trên cho icon nảy lên */
    }

    .magic-nav .nav-item {
        position: relative;
        list-style: none;
        height: 70px;
        z-index: 2;
        padding: 0 15px; /* Giúp các mục co giãn theo độ dài chữ */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .magic-nav .nav-link {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-decoration: none;
        padding: 0 !important; /* Ghi đè padding cũ */
    }

    .magic-nav .icon {
        position: relative;
        display: block;
        line-height: 70px;
        font-size: 1.5em;
        text-align: center;
        transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        color: rgba(255, 255, 255, 0.6);
    }

    /* Khi active, icon trồi lên */
    .magic-nav .nav-item.active .icon {
        transform: translateY(-32px);
        color: #fff;
    }

    /* Chữ bên dưới icon */
    .magic-nav .text {
        position: absolute;
        color: #fff;
        font-weight: 600;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        transition: 0.5s;
        opacity: 0;
        transform: translateY(20px);
        white-space: nowrap; /* Giữ chữ trên 1 dòng */
    }

    /* Khi active, chữ hiện lên */
    .magic-nav .nav-item.active .text {
        opacity: 1;
        transform: translateY(16px);
    }

    /* Thanh trượt Indicator */
    .indicator {
        position: absolute;
        top: -15px; /* Chỉnh lại top một chút cho cân đối vì đã bỏ viền */
        height: 50px; /* Giảm chiều cao xuống một chút vì đã bỏ viền */
        background: var(--accent-yellow); 
        border-radius: 30px;
        /* ĐÃ XÓA DÒNG BORDER Ở ĐÂY */
        transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* Góc bo lõm bên trái */
    .indicator::before {
        display: none; /* THÊM DÒNG NÀY ĐỂ ẨN GÓC LÕM */
        /* ... các dòng cũ giữ nguyên hoặc xóa đi đều được ... */
    }

    /* Góc bo lõm bên phải */
    .indicator::after {
        display: none; /* THÊM DÒNG NÀY ĐỂ ẨN GÓC LÕM */
        /* ... các dòng cũ giữ nguyên hoặc xóa đi đều được ... */
    }
    
    /* Hiệu ứng Glow ánh sáng màu mờ phía sau icon */
    .magic-nav .nav-item .icon::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 35px;
        background: var(--clr); 
        border-radius: 50%;
        filter: blur(12px);
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        z-index: -1;
    }
    .magic-nav .nav-item.active .icon::before {
        opacity: 0.8;
        transform: translateX(-50%) scale(1.2);
    }
}

/* --- XỬ LÝ RESPONSIVE (MOBILE) --- 
   Trên điện thoại sẽ tắt magic effect, chuyển về dạng list chuẩn Bootstrap */
@media (max-width: 991px) {
    .indicator { display: none; }
    .magic-nav .icon { display: none; } /* Ẩn icon trên mobile cho gọn */
    .magic-nav .text {
        position: relative;
        opacity: 1;
        transform: none;
        font-size: 0.95rem;
        color: var(--text-dark);
    }
    .magic-nav .nav-item {
        padding: 10px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .magic-nav .nav-item.active .text {
        color: var(--accent-yellow) !important;
    }
}
/* --- KẾT THÚC: BỔ SUNG MAGIC NAVIGATION --- */
/* ==========================================================================
   04. HERO SECTION (PHẦN BIỂU NGỮ CHÍNH)
   ========================================================================== */
/* Hero Section Styling */
.hero-section {
    min-height: 100vh;
    background: url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
    padding-top: 100px;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(10, 37, 64, 0.88) 0%, rgba(13, 27, 42, 0.7) 100%);
}

/* ==========================================================================
   05. SERVICE SECTION (PHẦN DỊCH VỤ)
   ========================================================================== */
/* Service Card Hover 
   *LƯU Ý: Có 2 khai báo .service-card bị lặp/chồng trong mã gốc */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

/* Styling cho các thẻ dịch vụ (Khai báo lặp trong mã gốc) */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Xử lý ảnh trong thẻ Service (Có 2 kiểu class wrapper) */
.card-img-wrapper {
    height: 200px;
    overflow: hidden;
}
.card-img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.service-card:hover .card-img-wrapper img {
    transform: scale(1.08);
}

/* Khung ảnh và hiệu ứng phóng to nhẹ khi hover (Kiểu class wrapper thứ 2) */
.service-img-box {
    height: 200px;
}
.service-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.service-card:hover .service-img {
    transform: scale(1.08);
}

/* ==========================================================================
   06. PROJECT SECTION (PHẦN DỰ ÁN)
   ========================================================================== */
/* Project Cards 
   *LƯU Ý: Khai báo ảnh và overlay của Project bị lặp và ghi đè nhau trong mã gốc */
.project-img-box {
    height: 240px;
    overflow: hidden;
}
.project-img-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.project-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 37, 64, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.project-card:hover .project-overlay {
    opacity: 1;
}
.project-card:hover .project-img-box img {
    transform: scale(1.1);
}

/* Hiệu ứng hiển thị nút "Chi Tiết" khi di chuột vào ảnh (Khai báo lặp trong mã gốc) */
.project-img-box {
    overflow: hidden;
}
.project-img-box img {
    transition: transform 0.3s ease;
}
.project-card:hover .project-img-box img {
    transform: scale(1.05);
}
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.project-card:hover .project-overlay {
    opacity: 1;
}

/* ==========================================================================
   07. PARTNER SECTION (ĐỐI TÁC)
   ========================================================================== */
/* Khung chứa logo cố định kích thước và căn giữa */
.partner-logo-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ép ảnh vừa vặn trong khung viền mà không bị méo */
.partner-img {
    max-height: 150%;
    max-width: 150%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Hiệu ứng phóng nhẹ khi di chuột (tùy chọn) */
.partner-logo-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   08. NEWS SECTION (TIN TỨC & PHÂN TRANG)
   ========================================================================== */
/* Card Tin Tức */
.news-card {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Xử lý hình ảnh không bị méo tỉ lệ & hiệu ứng Zoom */
.news-img-box {
    position: relative;
    overflow: hidden;
    height: 220px; /* Chiều cao cố định cho ảnh trong grid */
}

.featured-news .news-img-box {
    height: 100%;
    min-height: 320px; /* Chiều cao ảnh cho bài nổi bật */
}

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

.news-card:hover .news-img {
    transform: scale(1.06);
}

/* Tiêu đề tin tức */
.news-title {
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card:hover .news-title {
    color: var(--bs-primary);
}

/* Phân trang */
.pagination .page-link {
    border: none;
    margin: 0 4px;
    border-radius: 6px;
    color: #495057;
    font-weight: 600;
}

.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    color: #ffffff;
}

/* ==========================================================================
   09. PROCESS SECTION (QUY TRÌNH)
   ========================================================================== */
/* Process Step Numbers */
.process-num {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* ==========================================================================
   10. FOOTER SECTION (CHÂN TRANG)
   ========================================================================== */
/* Footer Links */
.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    line-height: 2;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-yellow);
}
/* HIỆU ỨNG TƯƠNG TÁC CHO NÚT "NHẬN TƯ VẤN" */
    .btn-yellow {
        background-color: var(--accent-yellow, #feca57);
        color: var(--dark-bg, #1a202c) !important;
        border: none;
        border-radius: 30px; /* Bo tròn để đồng bộ với menu */
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 4px 15px rgba(254, 202, 87, 0.3); /* Quầng sáng mờ ban đầu */
    }

    /* Tạo dải ánh sáng trắng ảo chờ sẵn bên ngoài nút */
    .btn-yellow::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
        transition: left 0.6s ease;
        z-index: -1;
    }

    /* Khi di chuột vào nút */
    .btn-yellow:hover {
        transform: translateY(-4px); /* Nút nảy nhẹ lên */
        box-shadow: 0 10px 25px rgba(254, 202, 87, 0.7); /* Quầng sáng rực lên */
    }

    /* Dải ánh sáng trắng lướt quét ngang qua nút */
    .btn-yellow:hover::before {
        left: 100%;
    }
    /* Css cho phần section 4 */
    /* --- KIỂU DÁNG CHO CỤM NÚT LỌC DỰ ÁN --- */
    #project-filters {
        position: relative;
        z-index: 1;
    }

    #project-filters .btn {
        border-radius: 30px; /* Bo tròn như viên thuốc */
        padding: 8px 25px;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--text-dark, #333);
        border: 2px solid #e2e8f0; /* Viền xám nhạt mặc định */
        background: #fff;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    #project-filters .btn:hover {
        border-color: var(--secondary-blue, #48dbfb);
        color: var(--secondary-blue, #48dbfb);
        transform: translateY(-3px);
        background: #fff;
    }

    #project-filters .btn.active {
        background: var(--secondary-blue, #48dbfb);
        color: #fff !important;
        border-color: var(--secondary-blue, #48dbfb);
        box-shadow: 0 6px 18px rgba(72, 219, 251, 0.4); /* Quầng sáng khi được chọn */
        transform: translateY(0);
    }

    /* Hiệu ứng mờ dần khi lọc phần tử */
    @keyframes fadeScale {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
    .project-item.show-project {
        animation: fadeScale 0.4s ease-out forwards;
    }
/* Class được HTML dùng nhưng trước đây chưa định nghĩa */
.bg-primary-dark { background-color: var(--primary-blue); }
.bg-white-custom { background-color: #fff; }