/* --- FILE: contact.css --- */

/* Màu nền riêng cho trang liên hệ */
.contact-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f2f6;
    padding: 100px 20px 40px; /* Padding trên cao hơn để tránh menu */
}

.contact-wrapper {
    display: flex;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

/* --- Cột bên trái: Thông tin --- */
.contact-info {
    flex: 1;
    background: #2f3542; /* Dùng cứng mã màu hoặc biến var(--dark-bg) nếu đã link style.css */
    color: white;
    padding: 40px;
    position: relative;
}

.contact-info h2 { font-size: 1.8rem; margin-bottom: 20px; }
.contact-info p { color: #ccc; margin-bottom: 40px; font-size: 0.9rem; }

.info-item { display: flex; align-items: center; margin-bottom: 20px; }
.info-item i { font-size: 1.2rem; color: #ff4757; margin-right: 15px; }

.social-icons-contact { margin-top: 50px; }
.social-icons-contact a {
    display: inline-flex; width: 40px; height: 40px;
    background: rgba(255,255,255,0.1); color: white;
    justify-content: center; align-items: center;
    border-radius: 50%; margin-right: 10px; transition: 0.3s;
}
.social-icons-contact a:hover { background: #ff4757; transform: translateY(-3px); }

/* --- Cột bên phải: Form --- */
.contact-form {
    flex: 1.5;
    padding: 40px;
    background: white;
}

.contact-form h2 { color: #ff4757; margin-bottom: 30px; }

/* Hiệu ứng ô nhập liệu (Input) */
.input-box { position: relative; width: 100%; margin-bottom: 35px; }

.input-box input, 
.input-box textarea {
    width: 100%; padding: 10px;
    border: 1px solid #ccc; background: none;
    border-radius: 5px; outline: none;
    font-size: 1rem; color: #333; transition: 0.3s;
}

.input-box textarea { height: 100px; resize: none; }

/* Hiệu ứng focus */
.input-box input:valid, .input-box input:focus,
.input-box textarea:valid, .input-box textarea:focus {
    border-color: #ff4757;
}

/* Hiệu ứng chữ gợi ý bay lên */
.input-box span {
    position: absolute; left: 10px; top: 10px;
    color: #888; pointer-events: none; transition: 0.3s; font-size: 1rem;
}

.input-box input:valid ~ span, .input-box input:focus ~ span,
.input-box textarea:valid ~ span, .input-box textarea:focus ~ span {
    color: #ff4757;
    transform: translateX(-10px) translateY(-25px);
    font-size: 0.85rem;
    background: white; padding: 0 5px; font-weight: bold;
}

/* Nút gửi */
.btn-send {
    background: #ff4757; color: white;
    border: none; padding: 12px 30px;
    cursor: pointer; font-weight: bold;
    border-radius: 30px; transition: 0.3s; width: 100%;
}
.btn-send:hover { background: #2f3542; }

/* Responsive mobile */
@media (max-width: 768px) {
    .contact-wrapper { flex-direction: column; }
    .contact-info, .contact-form { padding: 30px; }
}