/* ================================
   GIAO DIỆN LIÊN HỆ – VN168
   Phong cách: Khoa học – Hiện đại – AI UI
================================ */

/* ----- Background tổng thể ----- */
body {
    background: #f4f6fa; /* ➜ Nền trắng hoàn toàn */
    font-family: "Inter", sans-serif;
}


/* ----- Tiêu đề trang ----- */
.contact-title {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(
        90deg,
        #fb7185,  /* hồng */
        #3b82f6,  /* xanh */
        #a855f7,  /* tím */
        #fb923c   /* cam */
    );
    background-clip: text; /* thuộc tính chuẩn */
    -webkit-background-clip: text; /* hỗ trợ Chrome/Safari */
    -webkit-text-fill-color: transparent;
}

.contact-subtitle {
    font-size: 17px;
    color: #475569;
}

/* ======= BỐ CỤC CÂN ĐỐI ======= */
.contact-wrapper {
    max-width: 1200px;
    margin: auto;
}

.contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% – 50% */
    gap: 40px;
}

/* ----- CARD FORM GLASS UI ----- */
.contact-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 35px;
    border: 1px solid rgba(180, 192, 255, 0.35);
    box-shadow: 0 8px 35px rgba(15, 23, 42, 0.08);
    transition: .25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 45px rgba(15, 23, 42, 0.14);
}

/* ----- Form input ----- */
.form-control,
textarea {
    padding: 13px 18px;
    border-radius: 14px !important;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 15px;
}

.form-control:focus {
    border-color: #fb7185; /* hồng chủ đạo */
    box-shadow: 0 0 0 3px rgba(251, 113, 133, .18);
}

/* ----- Button gửi ----- */
.btn-primary {
    background: linear-gradient(
        120deg,
        #fb7185,  /* hồng */
        #3b82f6,  /* xanh */
        #a855f7,  /* tím */
        #fb923c   /* cam */
    );
    border: none;
    padding: 12px 34px;
    border-radius: 50px;
    font-weight: 600;
    transition: .25s ease;
}

.btn-primary:hover {
    background: linear-gradient(
        120deg,
        #f97373,
        #2563eb,
        #7c3aed,
        #ea580c
    );
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(148, 163, 184, 0.45);
}

/* ----- Icon công nghệ ----- */
.tech-icon {
    color: #fb7185; /* đồng bộ với accent */
    font-size: 20px;
    margin-right: 6px;
}

/* ----- Thông tin địa chỉ ----- */
.contact-info p {
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 8px;
}

.contact-info strong {
    font-size: 16px;
}

/* ----- Map ----- */
.contact-map iframe {
    width: 100% !important;
    height: 330px !important;
    border-radius: 20px;
    box-shadow: 0 6px 22px rgba(15,23,42,0.18);
    border: 0;
}

/* ------------------------------
   RESPONSIVE – MOBILE & TABLET
------------------------------ */
@media (max-width: 992px) {
    .contact-section {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 576px) {
    .contact-card {
        padding: 22px;
    }

    .contact-title {
        font-size: 28px;
    }
}