/**
 * Custom Styles for Contact Form 7 Plugin
 *
 * File: contact-form-7.css
 * Theme: FKSE Block Theme
 */

/* Vùng chứa toàn bộ form */
div.wpcf7 {
    background-color: #f7f7f7;
    padding: 30px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
}

/* Tiêu đề "NEW INQUIRIES" */
.wpcf7 h2 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Các dòng chứa ô nhập liệu */
.wpcf7 p {
    margin: 0 0 15px;
}

/* Tất cả các ô nhập liệu (input, textarea) */
.wpcf7-form-control {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 12px 15px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box; /* Quan trọng để padding không làm vỡ layout */
    transition: border-color 0.3s ease;
}

/* Khi người dùng nhấp vào ô nhập liệu */
.wpcf7-form-control:focus {
    border-color: #E48500; /* Đổi màu viền sang màu cam thương hiệu */
    outline: none; /* Bỏ viền xanh mặc định của trình duyệt */
}

/* Ô nhập message */
.wpcf7-textarea {
    height: 150px;
    resize: vertical; /* Cho phép người dùng thay đổi chiều cao */
}

/* Nút "SEND" */
.wpcf7-submit {
    background-color: #E48500 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 30px !important;
    width: 100%;
    font-size: 16px;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

/* Khi di chuột vào nút "SEND" */
.wpcf7-submit:hover {
    background-color: #d17900 !important; /* Làm màu cam đậm hơn một chút */
}

/* Xử lý các thông báo của form (thành công, lỗi...) */
.wpcf7-response-output {
    margin: 20px 0 0 0;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

/* Thông báo khi có lỗi xác thực (ví dụ: chưa nhập email) */
div.wpcf7-validation-errors {
    border: 1px solid #f00; /* Viền đỏ */
    background: #ffebeb; /* Nền hồng nhạt */
}

/* Thông báo khi gửi thành công */
div.wpcf7-mail-sent-ok {
    border: 1px solid #28a745; /* Viền xanh lá */
    background: #e6ffed; /* Nền xanh lá nhạt */
}

/* Biểu tượng loading xoay tròn (spinner) */
.wpcf7 .ajax-loader {
    display: none; /* Mặc định ẩn đi */
}