/* =======================================================
   PHẦN 1: CÀI ĐẶT CHUNG & NAVBAR
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,800&family=Nunito:wght@400;600;700&display=swap');

html { scroll-behavior: smooth; }
body { background-color: #f9f9f9; font-family: 'Nunito', sans-serif; padding-top: 80px; }

.navbar { border-top: 4px solid #2D6A4F; background-color: rgba(255,255,255,0.98) !important; }
.navbar-brand { font-family: 'Playfair Display', serif; color: #1B4332 !important; font-size: 28px !important; letter-spacing: 0.5px; }
.navbar-brand span { font-family: 'Nunito', sans-serif; color: #D4A373 !important; font-weight: 600 !important; }
.nav-link { color: #555 !important; transition: all 0.3s ease; }
.nav-link:hover, .nav-link.active { color: #2D6A4F !important; transform: translateY(-1px); }

/*Responsive */
@media (min-width: 1200px) { .dropdown:hover .dropdown-menu { display: block; margin-top: 0; } }
.dropdown-menu-center { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
.custom-dropdown-item { transition: all 0.2s ease; }
.custom-dropdown-item i { color: #2D6A4F !important; transition: all 0.2s ease; }
.custom-dropdown-item:hover { background-color: #EBF3F0 !important; color: #198754 !important; }
.custom-dropdown-item:hover i { transform: scale(1.1); color: #198754 !important; }

.btn-dark { background-color: #2D6A4F !important; border-color: #2D6A4F !important; box-shadow: 0 4px 10px rgba(45,106,79,0.15); transition: all 0.3s ease; }
.btn-dark:hover { background-color: #1B4332 !important; border-color: #1B4332 !important; transform: translateY(-2px); }
.btn-outline-dark { color: #2D6A4F !important; border-color: #2D6A4F !important; transition: all 0.3s ease; }
.btn-outline-dark:hover { background-color: #2D6A4F !important; color: #fff !important; }

.nav-tabs .nav-link { color: #6c757d; }
.nav-tabs .nav-link.active { color: #2D6A4F !important; border-bottom: 2px solid #2D6A4F !important; }

/*Responsive */
@media (max-width: 768px) {
    .slider-container { height: 350px; }
    .slider-container .card { width: 200px; height: 300px; }
    .slider-container .prev { left: 10px; z-index: 110;}
    .slider-container .next { right: 10px; z-index: 110;}
}

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(33,37,41,0.7); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.custom-footer-link { transition: all 0.3s ease; }
.custom-footer-link:hover { color: #ffc107 !important; padding-left: 5px; }

/* =======================================================
   PHẦN 2: TRANG CHỦ & CHI TIẾT
   ======================================================= */
.search-form { width: 100%; max-width: 600px; }
.explore-btn { transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255,193,7,0.4); }
.explore-btn:hover { transform: translateY(-3px) scale(1.05); background-color: #ffc107; color: #000 !important; }

.carousel-img { height: 80vh; min-height: 500px; object-fit: cover; filter: brightness(0.65); }
.carousel-caption { bottom: 0; top: 0; z-index: 10; }
.custom-title { font-family: 'Playfair Display', serif; letter-spacing: 1px; }
.shadow-text { text-shadow: 2px 2px 8px rgba(0,0,0,0.8); }

.section-title { font-family: 'Playfair Display', serif; color: #1B4332; position: relative; display: inline-block; }
.section-title::after { content: ''; position: absolute; width: 50%; height: 3px; background-color: #D4A373; bottom: -10px; left: 25%; }
.tour-card { transition: all 0.3s ease; border-radius: 12px; overflow: hidden; }
.tour-card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(45,106,79,0.15) !important; }
.img-wrapper { overflow: hidden; }
.tour-card img { transition: all 0.5s ease; }
.tour-card:hover img { transform: scale(1.1); }

/* =======================================================
   PHẦN 3: FORM ĐẶT TOUR (FIX GIAO DIỆN ĐẸP, KHÔNG CUỘN)
   ======================================================= */
.booking-form-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.05);
}

.booking-form-card hr { border-color: #e0e0e0; }
.booking-form-card .form-control, 
.booking-form-card .form-select {
    border: 1px solid #ced4da;
    padding: 10px 15px;
    font-size: 0.95rem;
}
.booking-form-card .form-control:focus, 
.booking-form-card .form-select:focus {
    border-color: #2D6A4F;
    box-shadow: 0 0 0 0.2rem rgba(45, 106, 79, 0.15);
}
.country-code-select { max-width: 110px; background-color: #f8f9fa; font-weight: bold; color: #555; }

/* =======================================================
   PHẦN 4: HIỆU ỨNG PREMIUM KỲ QUAN NỔI BẬT
   ======================================================= */
.premium-title-bg {
    background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=2074&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.premium-overlay {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,253,244,0.7) 100%);
    backdrop-filter: blur(3px);
    position: absolute;
    inset: 0;
}

.gradient-container {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.tour-card-premium {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 16px;
    overflow: hidden;
}

.tour-card-premium:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.12) !important;
}

.tour-card-premium .img-wrapper {
    overflow: hidden;
}

.tour-card-premium .img-wrapper img {
    transition: transform 0.6s ease;
}

.tour-card-premium:hover .img-wrapper img {
    transform: scale(1.1);
}

.btn-xem {
    transition: all 0.3s ease;
}

.tour-card-premium:hover .btn-xem {
    background-color: #198754;
    color: white;
    border-color: #198754;
}

/* =======================================================
   PHẦN 5: TRANG KHÁM PHÁ (3D SLIDER - DARK THEME)
   ======================================================= */
.explore-page-wrapper {
    background-color: #0b0b0b; 
    color: #ffffff;
    min-height: 100vh;
    padding-top: 40px; 
    padding-bottom: 60px;
    overflow-x: hidden;
}

.hero-section { text-align: center; padding: 40px 20px; }

.hero-section .title { 
    font-size: 48px; 
    font-family: 'Playfair Display', serif; 
    color: #D4A373; 
    margin-bottom: 15px; 
}
.hero-section .subtitle { font-size: 16px; color: #aaa; margin-bottom: 60px; }

.slider-container input[type=radio] { display: none; }

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 450px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-container .cards {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
}

.slider-container .card {
    position: absolute;
    width: 260px;
    height: 380px;
    left: 0; right: 0;
    margin: auto;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s, z-index 0.6s;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
    opacity: 0; 
    pointer-events: none;
    transform: translate3d(0, 0, -150px) scale(0.5); 
}

.slider-container .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.slider-container .card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    transition: background 0.6s;
    border-radius: 16px;
}

.slider-container .card-title {
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    opacity: 0;
    transition: opacity 0.4s;
    line-height: 1.3;
}

#item-1:checked ~ .cards #pic-1 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-1:checked ~ .cards #pic-1::after { background: transparent; } #item-1:checked ~ .cards #pic-1 .card-title { opacity: 1; }
#item-1:checked ~ .cards #pic-2 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-1:checked ~ .cards #pic-3 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-1:checked ~ .cards #pic-11 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-1:checked ~ .cards #pic-10 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-2:checked ~ .cards #pic-2 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-2:checked ~ .cards #pic-2::after { background: transparent; } #item-2:checked ~ .cards #pic-2 .card-title { opacity: 1; }
#item-2:checked ~ .cards #pic-3 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-2:checked ~ .cards #pic-4 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-2:checked ~ .cards #pic-1 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-2:checked ~ .cards #pic-11 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-3:checked ~ .cards #pic-3 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-3:checked ~ .cards #pic-3::after { background: transparent; } #item-3:checked ~ .cards #pic-3 .card-title { opacity: 1; }
#item-3:checked ~ .cards #pic-4 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-3:checked ~ .cards #pic-5 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-3:checked ~ .cards #pic-2 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-3:checked ~ .cards #pic-1 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-4:checked ~ .cards #pic-4 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-4:checked ~ .cards #pic-4::after { background: transparent; } #item-4:checked ~ .cards #pic-4 .card-title { opacity: 1; }
#item-4:checked ~ .cards #pic-5 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-4:checked ~ .cards #pic-6 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-4:checked ~ .cards #pic-3 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-4:checked ~ .cards #pic-2 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-5:checked ~ .cards #pic-5 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-5:checked ~ .cards #pic-5::after { background: transparent; } #item-5:checked ~ .cards #pic-5 .card-title { opacity: 1; }
#item-5:checked ~ .cards #pic-6 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-5:checked ~ .cards #pic-7 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-5:checked ~ .cards #pic-4 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-5:checked ~ .cards #pic-3 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-6:checked ~ .cards #pic-6 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-6:checked ~ .cards #pic-6::after { background: transparent; } #item-6:checked ~ .cards #pic-6 .card-title { opacity: 1; }
#item-6:checked ~ .cards #pic-7 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-6:checked ~ .cards #pic-8 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-6:checked ~ .cards #pic-5 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-6:checked ~ .cards #pic-4 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-7:checked ~ .cards #pic-7 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-7:checked ~ .cards #pic-7::after { background: transparent; } #item-7:checked ~ .cards #pic-7 .card-title { opacity: 1; }
#item-7:checked ~ .cards #pic-8 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-7:checked ~ .cards #pic-9 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-7:checked ~ .cards #pic-6 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-7:checked ~ .cards #pic-5 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-8:checked ~ .cards #pic-8 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-8:checked ~ .cards #pic-8::after { background: transparent; } #item-8:checked ~ .cards #pic-8 .card-title { opacity: 1; }
#item-8:checked ~ .cards #pic-9 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-8:checked ~ .cards #pic-10 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-8:checked ~ .cards #pic-7 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-8:checked ~ .cards #pic-6 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-9:checked ~ .cards #pic-9 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-9:checked ~ .cards #pic-9::after { background: transparent; } #item-9:checked ~ .cards #pic-9 .card-title { opacity: 1; }
#item-9:checked ~ .cards #pic-10 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-9:checked ~ .cards #pic-11 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-9:checked ~ .cards #pic-8 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-9:checked ~ .cards #pic-7 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-10:checked ~ .cards #pic-10 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-10:checked ~ .cards #pic-10::after { background: transparent; } #item-10:checked ~ .cards #pic-10 .card-title { opacity: 1; }
#item-10:checked ~ .cards #pic-11 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-10:checked ~ .cards #pic-1 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-10:checked ~ .cards #pic-9 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-10:checked ~ .cards #pic-8 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

#item-11:checked ~ .cards #pic-11 { transform: translate3d(0, 0, 120px) scale(1.05); opacity: 1; z-index: 10; pointer-events: auto; }
#item-11:checked ~ .cards #pic-11::after { background: transparent; } #item-11:checked ~ .cards #pic-11 .card-title { opacity: 1; }
#item-11:checked ~ .cards #pic-1 { transform: translate3d(210px, 0, 20px) rotateY(-25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-11:checked ~ .cards #pic-2 { transform: translate3d(390px, 0, -80px) rotateY(-40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }
#item-11:checked ~ .cards #pic-10 { transform: translate3d(-210px, 0, 20px) rotateY(25deg) scale(0.95); opacity: 0.9; z-index: 5; pointer-events: auto; }
#item-11:checked ~ .cards #pic-9 { transform: translate3d(-390px, 0, -80px) rotateY(40deg) scale(0.8); opacity: 0.45; z-index: 2; pointer-events: auto; }

.slider-container .arrow {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    color: rgba(255, 255, 255, 0.4);
    font-size: 36px; 
    cursor: pointer; 
    z-index: 100; 
    transition: color 0.3s, transform 0.2s;
    display: none; 
    padding: 10px; 
    user-select: none;
}
.slider-container .arrow:hover { 
    color: #dfb15b; 
}
.slider-container .prev { 
    left: -70px; 
}
.slider-container .next { 
    right: -70px; 
}

#item-1:checked ~ .arrows #prev-1, #item-1:checked ~ .arrows #next-1 { display: block; }
#item-2:checked ~ .arrows #prev-2, #item-2:checked ~ .arrows #next-2 { display: block; }
#item-3:checked ~ .arrows #prev-3, #item-3:checked ~ .arrows #next-3 { display: block; }
#item-4:checked ~ .arrows #prev-4, #item-4:checked ~ .arrows #next-4 { display: block; }
#item-5:checked ~ .arrows #prev-5, #item-5:checked ~ .arrows #next-5 { display: block; }
#item-6:checked ~ .arrows #prev-6, #item-6:checked ~ .arrows #next-6 { display: block; }
#item-7:checked ~ .arrows #prev-7, #item-7:checked ~ .arrows #next-7 { display: block; }
#item-8:checked ~ .arrows #prev-8, #item-8:checked ~ .arrows #next-8 { display: block; }
#item-9:checked ~ .arrows #prev-9, #item-9:checked ~ .arrows #next-9 { display: block; }
#item-10:checked ~ .arrows #prev-10, #item-10:checked ~ .arrows #next-10 { display: block; }
#item-11:checked ~ .arrows #prev-11, #item-11:checked ~ .arrows #next-11 { display: block; }

/* =======================================================
   PHẦN 6: TRANG ABOUT US (GIỚI THIỆU NHÓM & CỘT MỐC)
   ======================================================= */
.about-page-wrapper {
    background: linear-gradient(rgba(12, 12, 30, 0.85), rgba(12, 12, 30, 0.9)), 
                url('https://tse2.mm.bing.net/th/id/OIP.ksWB8LjhCxKkJ2EiZmihMQHaE7?rs=1&pid=ImgDetMain&o=7&rm=3') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 80px; 
}

.main-content {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.intro-section {
    width: 100%; padding: 60px 0; 
    display: flex; justify-content: center; align-items: center;
    text-align: center; position: relative; z-index: 2;
}
.intro-container { max-width: 800px; padding: 0 20px; }

.intro-tag {
    color: #3bc9d9; font-weight: 600; text-transform: uppercase;
    letter-spacing: 2px; font-size: 14px; display: inline-block; margin-bottom: 15px;
}
.intro-title {
    color: #fff; font-size: 45px; line-height: 1.2; margin-bottom: 20px;
    font-family: 'Playfair Display', serif; transition: color 0.3s ease;
}
.intro-desc { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 1.8; }

.btn-team-trigger {
    background: linear-gradient(45deg, #3bc9d9, #ea8716); color: white;
    border: none; padding: 10px 25px; border-radius: 25px; font-weight: 600;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(59, 201, 217, 0.4);
}
.btn-team-trigger:hover {
    transform: translateY(-3px); box-shadow: 0 6px 20px rgba(234, 135, 22, 0.6); color: white;
}

.team-modal-content {
    background: linear-gradient(rgba(12, 12, 30, 0.9), rgba(12, 12, 30, 0.95)), 
                url('https://images.unsplash.com/photo-1552832230-c0197dd311b5?q=80&w=1996') no-repeat center center !important;
    background-size: cover !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important; padding: 20px; overflow: hidden;
}

.team-cards-container {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 20px; position: relative; padding: 40px 0; min-height: 500px;
}

/* THAY ĐỔI: Tăng chiều cao của card để chứa đủ chữ đóng góp mà không tràn khung */
.team-cards-container .card {
    position: relative; 
    width: 300px; 
    height: 465px !important; 
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important; 
    border-radius: 15px !important;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    z-index: 1; 
    margin: 0;
}
.team-cards-container .card .content {
    position: relative; display: flex; justify-content: center; align-items: center;
    flex-direction: column; transition: 0.5s;
}
.team-cards-container .card:hover .content { transform: translateY(-20px); }

.team-cards-container .card .content .imgBx {
    position: relative; width: 150px; height: 150px; overflow: hidden; border-radius: 50%;
    border: 10px solid rgba(255, 255, 255, 0.1);
}
.team-cards-container .card .content .imgBx img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

.team-cards-container .card .content .contentBx h3 {
    color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px;
    text-align: center; margin: 20px 0 10px; line-height: 1.1em;
}
.team-cards-container .card .content .contentBx h3 span {
    font-size: 12px; font-weight: 300; text-transform: initial; color: #aaa;
}

/* THAY ĐỔI: Chuyển badge sang màu xanh lá cao cấp và dịch nhẹ sang bên phải */
.badge-contrib {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: #2ecc71 !important;
    border: 1px solid #2ecc71 !important;
    font-size: 0.75rem;
    margin-top: 6px;
    margin-left: 12px;
    display: inline-block;
}

.contribution-details {
    font-size: 0.85rem;
    color: #ddd;
    margin-top: 10px;
    padding: 0 15px;
    line-height: 1.4;
}

/* THAY ĐỔI: Hạ thấp vị trí tuyệt đối của các icon mạng xã hội xuống sát đáy card một chút */
.team-cards-container .card .sci {
    position: absolute; 
    bottom: 35px; 
    display: flex; 
    justify-content: center;
    align-items: center; 
    list-style: none; 
    padding: 0; 
    margin: 0;
}
.team-cards-container .card .sci li {
    transition: 0.5s; transform: translateY(40px); opacity: 0;
    transition-delay: calc(0.1s * var(--i)); margin: 0 10px; list-style-type: none !important;
}
.team-cards-container .card:hover .sci li { transform: translateY(0px); opacity: 1; }
.team-cards-container .card .sci li a { color: #fff; font-size: 24px; transition: 0.5s; text-decoration: none; }
.team-cards-container .card .sci li a:hover { color: #3bc9d9; }

.about-footer {
    width: 100%; padding: 20px 0; text-align: center; background: #070714;
    color: rgba(255, 255, 255, 0.4); font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); position: relative; z-index: 2;
    flex-shrink: 0; margin-top: auto; clear: both;
}
/*index fix loi giao dien */
/* Tăng padding-top của body lên khoảng 100px - 120px */
body {
    background-color: #f9f9f9;
    font-family: 'Nunito', sans-serif;
    padding-top: 110px; /* Sửa từ 80px thành 110px hoặc 120px */
}

/* Hoặc cách an toàn hơn là đặt thẳng vào phần main */
.main-content {
    padding-top: 20px; 
}

/* Index.html */
.team-card-dark {
    min-height: 450px; /* Đảm bảo thẻ luôn cao, không bị co lại */
    padding-bottom: 30px !important;
}

.contrib-text {
    margin-bottom: 20px; /* Đẩy icon xuống dưới */
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Thêm đường kẻ mờ tạo điểm nhấn */
}


.social-icons {
    margin-top: auto; /* Đẩy hẳn xuống dưới cùng của thẻ */
    padding-top: 20px;
}