/* css/style.css */

/* 1. Định nghĩa biến màu sắc (Từ banner VIIFM) và Font */
:root {
    --vii-orange: #f7941d; /* Màu cam chính */
    --vii-blue: #004a99;   /* Màu xanh đậm chính */
    --vii-white: #ffffff;
    --vii-dark-text: #212529;
    --vii-light-bg: #f8f9fa;
    --font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
}

/* 2. Ghi đè màu sắc Bootstrap */
.btn-primary {
    background-color: var(--vii-blue);
    border-color: var(--vii-blue);
    font-weight: 500;
}
.btn-primary:hover {
    background-color: #003366; /* Xanh đậm hơn khi hover */
    border-color: #003366;
}

.btn-outline-primary {
    color: var(--vii-blue);
    border-color: var(--vii-blue);
    font-weight: 500;
}
.btn-outline-primary:hover {
    background-color: var(--vii-blue);
    color: var(--vii-white);
}

.text-primary-orange {
    color: var(--vii-orange) !important;
}
.text-dark-blue {
    color: var(--vii-blue) !important;
}

/* Banner Slider */
.banner-slider {
    margin-bottom: 0; /* Xóa margin thừa nếu muốn liền mạch */
    position: relative;
}

/* 1. Thiết lập cơ bản cho Desktop (Mặc định) */
.banner-slider .carousel-item {
    height: 90vh; /* Full màn hình đẹp trên desktop */
    min-height: 600px;
    position: relative;
}

.banner-slider .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: center; /* Đảm bảo ảnh luôn căn giữa */
}

/* Lớp phủ Gradient mặc định */
.banner-slider .carousel-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0, 74, 153, 0.85) 0%, rgba(0, 74, 153, 0.6) 50%, rgba(247, 148, 29, 0.3) 100%);
    z-index: 1;
}

.banner-slider .carousel-control-prev,
.banner-slider .carousel-control-next {
    z-index: 10; /* Đặt cao hơn lớp caption (z-index: 2) để bấm được */
    width: 5%;   /* Vùng bấm rộng 5% màn hình */
    opacity: 0.5; /* Hiển thị rõ hơn một chút */
}

.banner-slider:hover .carousel-control-prev,
.banner-slider:hover .carousel-control-next {
    opacity: 1;
}

/* 2. Style cho Caption (Giữ nguyên để căn giữa đẹp) */
.banner-slider .carousel-caption {
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2; /* Thấp hơn nút bấm (10) */
    padding-left: 6rem;
    padding-right: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    pointer-events: none; /* CỰC KỲ QUAN TRỌNG: Cho phép click xuyên qua vùng trống của caption */
}

/* Cho phép click vào nội dung bên trong caption (text, nút button) */
.banner-slider .carousel-caption > * {
    pointer-events: auto;
}

/* =============================================
   MOBILE FIRST OPTIMIZATION
============================================= */

/* TABLET (Màn hình dưới 992px) */
@media (max-width: 991.98px) {
    .banner-slider .carousel-item {
        height: 70vh;
        min-height: 500px;
    }
    
    .banner-slider .carousel-caption {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .banner-slider .display-4 {
        font-size: 3rem;
    }
}

/* MOBILE (Màn hình dưới 768px) */
@media (max-width: 767.98px) {
    /* Tăng chiều cao tối thiểu trên mobile để chứa đủ nội dung */
    .banner-slider .carousel-item {
        height: 85vh; 
        min-height: 550px; 
    }

    /* Thay đổi Gradient để tối hơn trên mobile, giúp chữ dễ đọc hơn */
    .banner-slider .carousel-item::after {
        background: linear-gradient(to bottom, rgba(0, 74, 153, 0.4) 0%, rgba(0, 40, 85, 0.9) 100%);
    }

    /* Căn giữa nội dung */
    .banner-slider .carousel-caption {
        align-items: center; /* Căn giữa các phần tử flex */
        text-align: center;
        padding: 0 1.5rem;
        padding-bottom: 3rem; /* Đẩy nội dung lên trên indicators một chút */
    }

    /* Giảm kích thước chữ Tiêu đề */
    .banner-slider .title-mobile {
        font-size: 2rem !important; /* ~32px */
        line-height: 1.3;
    }

    /* Giảm kích thước chữ mô tả */
    .banner-slider .desc-mobile {
        font-size: 1rem;
        margin-bottom: 1.5rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Giới hạn 3 dòng mô tả nếu quá dài */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Nút bấm full chiều rộng trên mobile */
    .banner-slider .btn {
        width: 100%; 
        padding: 0.8rem 1rem; /* Nút to hơn cho dễ bấm */
    }
    
    /* Ẩn bớt nút Prev/Next trên mobile để đỡ rối, người dùng sẽ vuốt */
    .banner-slider .carousel-control-prev,
    .banner-slider .carousel-control-next {
        display: flex;
        
    }
}

/* 4. Tùy chỉnh Hero Section */
.hero-section {
    background-color: var(--vii-white);
    overflow: hidden;
    padding-top: 30px;
}

.btn-servieces{
    background-color: #fff0e6; /* Nền cam nhạt cho badge */
    color: var(--vii-orange);
    border-color: var(--vii-orange);
}

.btn-about{
    
}

.hero-section h1{
    font-size: 2.5rem;
    
}

.hero-badge {
    background-color: #fff0e6; /* Nền cam nhạt cho badge */
    color: var(--vii-orange);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
}
.hero-image-placeholder {
    /* Gradient mờ từ ảnh mẫu */
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 40%, #e0e7ff 100%);
    border-radius: 20px;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}

/* 5. TÙY CHỈNH SERVICES SECTION (ĐÃ CẬP NHẬT) */
.services-section {
    /* background-color: var(--vii-light-bg); */
}

.mvv-section {
    
}

/* 6. TÙY CHỈNH ROLE MANAGEMENT SECTION */
.role-card {
    background: var(--vii-white);
    border-radius: 16px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
}

.role-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 74, 153, 0.08);
}

.role-card.border-primary {
    border-color: var(--vii-blue);
    box-shadow: 0 4px 15px rgba(0, 74, 153, 0.1);
}

.role-card .role-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(247, 148, 29, 0.1);
}

.role-card.border-primary .role-icon {
    background: rgba(0, 74, 153, 0.1);
}

.role-card ul li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* 7. TÙY CHỈNH TEAM SECTION */
.team-member {
    text-align: center;
}
.team-member img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--vii-white);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.team-member img:hover {
    transform: scale(1.05);
}
.team-member h5 {
    color: var(--vii-blue);
}

/* Tùy chỉnh Connection Section */
.connection-item {
    padding: 2rem;
    transition: all 0.3s ease;
    border-radius: 50px;
}

.connection-item:hover {
    transform: translateY(-5px);
}

.connection-icon {
    margin-bottom: 1.5rem;
}

.connection-item h4 {
    color: var(--vii-blue);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.connection-item p {
    font-size: 1rem;
    line-height: 1.6;
}

/* ===============================================
13. TIN TỨC & SỰ KIỆN (ĐÃ CẬP NHẬT THIẾT KẾ CARD)
=============================================== */
.news-events-section .nav-pills .nav-link {
    color: var(--vii-dark-text);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.news-events-section .nav-pills{
    border: 1px solid var(--vii-blue);
    padding: 5px;
    border-radius: 30px;
}

.news-events-section .nav-pills .nav-link:hover {
    border-color: var(--vii-orange);
}

.news-events-section .nav-pills .nav-link.active {
    background-color: var(--vii-blue);
    color: var(--vii-white);
}

.news-card {
    background-color: var(--vii-light-bg); /* Màu nền nhẹ phòng khi ảnh không tải kịp */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 74, 153, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative; /* Để định vị nội dung bên trong */
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 74, 153, 0.12);
    cursor: pointer;
}

.news-card-img {
    width: 100%;
    height: 480px; /* <<< ĐÃ TĂNG CHIỀU CAO THẺ TẠI ĐÂY */
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.news-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.75rem;
    /* <<< ĐÃ THAY ĐỔI GRADIENT SANG MÀU CAM VÀNG */
    background: linear-gradient(to top, rgba(247, 148, 29, 0.85) 10%, rgba(247, 148, 29, 0.6) 50%, transparent 100%);
    color: var(--vii-white);
    text-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Thêm bóng đổ cho chữ để dễ đọc hơn */
}

.news-card-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--vii-white);
}

.news-card-link {
    color: var(--vii-white);
    text-decoration: none;
    font-weight: 600; /* Tăng độ đậm cho link */
    transition: color 0.3s ease;
}

.news-card-link:hover {
    color: #fff;
    opacity: 0.9;
}

.news-card-link i {
    transition: transform 0.3s ease;
    display: inline-block;
}

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

/* Responsive cho nút "Xem thêm" */
@media (max-width: 576px) {
    .news-events-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .news-events-section .nav-pills {
        margin-bottom: 1rem;
    }
    .btn-view-more {
       align-self: flex-end;
    }
}

/* ===============================================
14. BẢN ĐỒ
=============================================== */
.map-section {
    /* Bạn có thể thêm màu nền nếu muốn, ví dụ: background-color: var(--vii-light-bg); */
}

.map-container {
    border-radius: 16px;
    overflow: hidden; /* Đảm bảo iframe bên trong cũng được bo góc */
    border: 1px solid #dee2e6;
}

.map-container iframe {
    display: block; /* Loại bỏ khoảng trống thừa mặc định bên dưới iframe */
}

/* 8. Responsive (Mobile-First đã được Bootstrap xử lý, đây là tinh chỉnh) */
@media (max-width: 991.98px) {
    .hero-section .display-4 {
        font-size: 2.5rem; /* Giảm cỡ chữ heading trên tablet */
    }
    .hero-image-placeholder {
        min-height: 300px;
        margin-top: 2rem;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        text-align: center;
    }
    .navbar .navbar-nav {
        padding-top: 1rem;
        text-align: center;
    }
} 

/* ===============================================
CÁC CLASS MỚI THÊM VÀO
===============================================
*/

/* 9. Tùy chỉnh Tab MVV (Sứ mệnh - Tầm nhìn) */
.mvv-section .nav-pills .nav-link {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: var(--vii-blue);
    border: 2px solid transparent;
    border-radius: 50px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

/* .mvv-section .nav-pills {
    border: 1px solid var(--vii-blue);
    padding: 5px;
    border-radius: 30px;
    
} */

.mvv-section .nav-pills .nav-link:hover {
    
    border: 1px solid #f7941d;
}

.mvv-section .nav-pills .nav-link.active {
    background-color: var(--vii-blue);
    color: var(--vii-white);
    border-color: var(--vii-blue);
    box-shadow: 0 4px 12px rgba(0, 74, 153, 0.2);
}

.mvv-section .tab-content {
    padding-top: 2.5rem;
    /* background-color: var(--vii-white); */
    padding: 2.5rem;
    border-radius: 15px;
    /* box-shadow: 0 8px 25px rgba(0,0,0,0.07); */
}

/* 10. THIẾT KẾ THẺ CARD MỚI (Theo hình mẫu) */
.card-style-guide {
    background-color: var(--vii-white);
    border: 1px solid var(--vii-blue); /* Viền màu Xanh */
    border-radius: 16px;
    padding: 2rem 1.75rem;
    text-align: left;
    box-shadow: none; /* Thiết kế "sạch" không shadow */
    transition: all 0.3s ease;
    height: 100%;
}

.card-style-guide:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 74, 153, 0.08); /* Shadow nhẹ khi hover */
}

.card-icon-guide {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    color: var(--vii-blue); /* Icon màu Xanh */
    text-align: center;
}

.card-style-guide .card-title {
    color: var(--vii-blue); /* Tiêu đề màu Xanh */
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-style-guide .card-text {
    font-size: 0.9rem;
    color: var(--vii-dark-text);
}

/* Biến thể màu Cam */
.card-style-guide.card-color-orange {
    border-color: var(--vii-orange);
}
.card-style-guide.card-color-orange .card-icon-guide {
    color: var(--vii-orange);
}
.card-style-guide.card-color-orange .card-title {
    color: var(--vii-orange);
}

/* 11. ĐƯỜNG PHÂN CÁCH SECTION */
.section-divider {
    border: 1;
    height: 0.5px;
    /* Gradient mờ màu xanh */
    background: linear-gradient(to right, 
        rgba(0, 74, 153, 0), 
        rgba(0, 74, 153, 0.15), 
        rgba(0, 74, 153, 0));
    margin: 0 auto;
    max-width: 75%;
    margin-bottom: 50px;
}

/* =================================================================
   12. HIỆU ỨNG TIÊU ĐỀ MỜ (GHOST TITLE) - FIX TOÀN DIỆN
================================================================= */

.section-title-wrapper {
    position: relative;
    z-index: 1;
    /* Đảm bảo khung bao đủ rộng để chứa chữ nền */
    padding: 10px 0;
    margin-bottom: 1.5rem;
}

/* Nội dung chính (Về Chúng Tôi, Dịch Vụ...) nằm đè lên trên */
.section-title-wrapper .section-title-main,
.section-title-wrapper .lead {
    position: relative;
    z-index: 2;
    margin-bottom: 0; /* Reset margin để canh chỉnh chính xác hơn */
}

/* Chữ nền mờ phía sau */
.section-title-background {
    position: absolute;
    z-index: -1;
    font-weight: 900;
    text-transform: uppercase;
    font-family: var(--font-family);
    white-space: nowrap; /* Không xuống dòng */
    line-height: 1;
    user-select: none;
    
    /* MÀU SẮC CHUẨN: Tăng độ đậm để nhìn rõ hơn trên cả Mobile và Desktop */
    color: rgba(0, 74, 153, 0.08); 
}

.section-title-background::before {
    content: attr(data-text);
}

/* =============================================
   A. CẤU HÌNH CHO DESKTOP (Màn hình > 992px)
============================================= */
@media (min-width: 992px) {
    .section-title-background {
        font-size: 5rem; /* Kích thước chữ nền chuẩn trên PC */
        top: 50%; /* Căn giữa theo chiều dọc so với tiêu đề chính */
    }

    /* TRƯỜNG HỢP 1: Nếu tiêu đề căn giữa (text-center) - Ví dụ: Dịch vụ, Đội ngũ */
    .section-title-wrapper.text-center .section-title-background {
        left: 50%;
        transform: translate(-50%, -90%); /* Căn giữa tuyệt đối */
    }

    /* TRƯỜNG HỢP 2: Nếu tiêu đề căn trái (text-start) - Ví dụ: Hero, Về chúng tôi */
    .section-title-wrapper.text-start .section-title-background {
        left: 0;
        top: 50%;
        transform: translate(-5%, -120%); /* Dịch nhẹ để khớp với lề trái */
    }
    
    /* Riêng phần Hero section (căn trái) chữ cần to hơn chút */
    .hero-section .section-title-background {
        font-size: 6.5rem;
        left: -20px; /* Đẩy sang trái một chút cho nghệ thuật */
    }

    #mission-vision .section-title-background{
        transform: translate(-50%, -110%);
    }

    #services .section-title-background{
        transform: translate(-50%, -150%);
    }

    #role-management .section-title-background{
        transform: translate(-50%, -110%);
    }

    #connection .section-title-background{
        transform: translate(-50%, -110%);
    }

    #team .section-title-background{
        transform: translate(-50%, -110%);
        
    }

    #news-events .section-title-background{
        transform: translate(-50%, -110%);
        
    }

    #contact-map .section-title-background{
        transform: translate(-50%, -110%);
    }
}

/* =============================================
   B. CẤU HÌNH CHO MOBILE & TABLET (Màn hình < 992px)
   Mục tiêu: Giống hình mẫu "Về Chúng Tôi" bạn gửi
============================================= */
@media (max-width: 991.98px) {
    .section-title-wrapper {
        text-align: center !important; /* BẮT BUỘC căn giữa tiêu đề trên mobile cho đẹp */
        margin-bottom: 2rem;
    }

    .section-title-wrapper .section-title-main {
        font-size: 2rem; /* Cỡ chữ tiêu đề chính vừa phải */
        display: inline-block; /* Để căn giữa chuẩn */
    }

    .section-title-background {
        /* Dùng vw để chữ tự co giãn theo độ rộng màn hình điện thoại */
        font-size: 12vw; 
        
        /* Căn giữa tuyệt đối trên mobile */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -90%); /* -60% để đẩy chữ nền lên cao hơn chữ chính một chút */
        
        /* Tăng màu đậm hơn chút nữa riêng cho mobile để dễ nhìn như bạn yêu cầu */
        color: rgba(0, 74, 153, 0.12); 
        width: 100%; /* Đảm bảo ko bị tràn */
        text-align: center;
    }

    #hero .section-title-background{
        transform: translate(-50%, -150%);
    }

    #mission-vision .section-title-background{
        transform: translate(-50%, -150%);
    }

    #services .section-title-background{
        transform: translate(-50%, -175%);
    }

    #role-management .section-title-background{
        transform: translate(-50%, -150%);
    }

    #connection .section-title-background{
        transform: translate(-50%, -150%);
    }

    #team .section-title-background{
        transform: translate(-50%, -130%);
        font-size: 14vw;
    }

    #news-events .section-title-background{
        transform: translate(-50%, -120%);
        font-size: 9vw;
    }

    #contact-map .section-title-background{
        transform: translate(-50%, -150%);
    }
}

footer .nav-link{
    border: none;
}