/* ===================================================================== */
/* BẢN TỐI ƯU TRANG LIÊN HỆ - FIX ĐÈ NỘI DUNG & HIỂN THỊ ĐỦ THÔNG TIN   */
/* ===================================================================== */

/* Hero Banner */
.contact-hero { 
    position: relative; 
    background-image: url('../images/about-hero.jpg'); 
    background-size: cover;
    background-position: top 30% center; 
    background-color: #1a633a;
    color: white; 
    /* Padding-top lớn để Header không đè vào chữ */
    padding: 120px 20px 180px 20px; 
    text-align: center; 
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}

.contact-hero .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 99, 58, 0.7); 
    z-index: 0;
}

.contact-hero .hero-content {
    position: relative;
    z-index: 1;
}

.contact-hero h1 { font-size: 40px; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; }

/* Card chính - Đẩy lên vừa đủ để đẹp mà không che mất nội dung */
.contact-container { 
    max-width: 1000px; 
    margin: -100px auto 50px auto; /* Margin âm vừa đủ kéo card lên */
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.contact-card { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); 
    overflow: hidden;
}

/* Cột thông tin xanh đậm */
.card-info-side { background: #1a633a; color: white; padding: 40px; }
.card-info-side h2 { color: white; margin-bottom: 25px; font-size: 24px; }
.info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; font-size: 15px; }
.info-item i { margin-top: 4px; color: #ff9800; }

/* Cột form bên phải */
.card-form-side { padding: 40px; }
.card-form-side h2 { margin-bottom: 20px; color: #1a633a; font-size: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-form-side input, .card-form-side textarea {
    width: 100%; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px;
}
.meditech-btn-orange { 
    background: #ff9800; color: white; border: none; padding: 15px 30px; 
    border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; font-size: 16px; transition: 0.3s;
}
.meditech-btn-orange:hover { background: #e68a00; }

/* Mobile */
@media (max-width: 768px) {
    .contact-card { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contact-container { margin-top: -50px; }
    .contact-hero { padding: 80px 20px 120px 20px; }
}