/* 1. Reset & Base Font */
.contact-page-modern {
    background-color: #f4f7f9;
    padding-bottom: 100px;
    font-family: 'Inter', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* 2. Hero Section - Chữ "LIÊN HỆ TƯ VẤN" ở giữa */
.contact-hero {
    position: relative;
    background-color: #1a202c; /* Màu xanh đen đồng bộ Header */
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa theo chiều ngang */
    overflow: hidden;
}

.hero-inner {
    text-align: center; /* Căn giữa dòng chữ */
    z-index: 5;
}

.hero-inner h1 {
    color: #ffffff;
    font-size: 56px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 3. Card Nội Dung (Trắng) */
.content-wrapper {
    max-width: 1140px;
    margin: -100px auto 0 auto; /* Đẩy khối trắng đè lên nền tối */
    position: relative;
    z-index: 10;
    padding: 0 15px;
}

.contact-grid {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 4. Cột Trái (Sidebar) - Đã thêm Email */
.info-sidebar {
    flex: 0 0 380px;
    background-color: #1a202c; /* Trùng màu với nền Header */
    color: #ffffff;
    padding: 60px 40px;
}

.logo-contact {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 25px;
}

.logo-contact .text-gold {
    color: #c5a02d; /* Màu vàng Gold đặc trưng */
}

.info-sidebar .desc {
    color: #cbd5e0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.info-items .item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    font-size: 16px;
}

.info-items i {
    color: #c5a02d; /* Màu vàng Gold cho biểu tượng */
    margin-right: 15px;
    font-size: 20px;
    width: 25px;
    text-align: center;
}

/* 5. Cột Phải (Form) */
.form-body {
    flex: 1;
    padding: 60px;
    background-color: #ffffff;
}

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

.f-group input, 
.f-group textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 16px;
    outline: none;
    transition: 0.3s;
}

.f-group input:focus, 
.f-group textarea:focus {
    border-color: #c5a02d;
    box-shadow: 0 0 0 3px rgba(197, 160, 45, 0.1);
}

/* 6. Nút Gửi */
.btn-submit {
    width: 100%;
    background-color: #c5a02d; /* Màu vàng Gold */
    color: #ffffff;
    border: none;
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-submit:hover {
    background-color: #b08d25;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid { flex-direction: column; }
    .info-sidebar { flex: none; }
    .hero-inner h1 { font-size: 38px; }
}

/* --- Hero Section với ảnh nền --- */
.contact-hero {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ảnh nền pháp luật */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giúp ảnh không bị méo */
    z-index: 1;
}

/* Lớp phủ tối để làm nổi bật chữ */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 32, 44, 0.7); /* Màu xanh đen mờ 70% */
    z-index: 2;
}

.hero-inner {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-inner h1 {
    color: #ffffff;
    font-size: 56px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Thêm bóng đổ cho chữ cực nét */
}

/* --- Các phần khác giữ nguyên như bản trước --- */


/* --- Định nghĩa hiệu ứng trượt vào --- */
@keyframes slideFromLeft {
    0% { opacity: 0; transform: translateX(-100px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromRight {
    0% { opacity: 0; transform: translateX(100px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Áp dụng hiệu ứng ghép vào các thành phần --- */

/* Tiêu đề bay lên từ dưới */
.hero-inner h1 {
    animation: fadeInUp 1s ease-out forwards;
}

/* Cột thông tin trượt từ trái sang */
.info-sidebar {
    animation: slideFromLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Form trượt từ phải sang để "ghép" lại với cột trái */
.form-body {
    animation: slideFromRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Các ô nhập liệu hiện lên từ từ sau khi form đã khớp */
.f-group {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.f-group:nth-child(1) { animation-delay: 0.5s; }
.f-group:nth-child(2) { animation-delay: 0.7s; }
.f-group:nth-child(3) { animation-delay: 0.9s; }
.f-group:nth-child(4) { animation-delay: 1.1s; }

/* Nút gửi xuất hiện cuối cùng */
.btn-submit {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 1.3s;
}