/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Comment Form Styling */

/* Chỉ áp dụng cho form có class custom-form-style */
/* Định dạng form */
.custom-form-style {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    margin: auto;
    color: #fff; /* Font color for labels */
}

/* Sắp xếp 2 cột */
.custom-form-style .form-group {
    width: 48%;
    float: left;
    margin-bottom: 15px;
}

.custom-form-style .form-group:nth-child(odd) {
    margin-right: 4%; /* Khoảng cách giữa 2 cột */
}

/* Label */
.custom-form-style label {
    display: block;
    margin-bottom: -15px;
    font-weight: bold;
    color: #fff; /* Màu chữ trắng */
}

/* Trường nhập liệu */
.custom-form-style input[type="text"],
.custom-form-style textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

/* Nút submit */
.custom-form-style .submit-container {
    text-align: center; /* Canh chỉnh nút submit ở giữa */
    margin-top: 20px; /* Khoảng cách từ form lên nút submit */
}

.custom-form-style .wpcf7-submit {
    background-color: #fe9700;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-form-style .wpcf7-submit:hover {
    background-color: #fe9700;
}

/* Đảm bảo layout ổn định */
.custom-form-style::after {
    content: "";
    display: table;
    clear: both;
}

/* Chỉ áp dụng cho form có class "form-dang-ky" */
.form-dang-ky {
    padding: 5px;
    border-radius: 8px;
    max-width: 600px;
    margin: auto;
    color: #fff; /* Font color for labels */
}


/* Trường nhập liệu */
.form-dang-ky input[type="text"],
.form-dang-ky input[type="tel"] {
    width: 100%;
    padding: 0px;
    border: none;
    border-bottom: 1px solid #fff; /* Viền dưới mỏng */
    font-size: 14px;
    background-color: transparent; /* Background trong suốt */
}

/* Nút submit */
.form-dang-ky .submit-container {
    text-align: center; /* Canh chỉnh nút submit ở giữa */
    margin-top: 20px; /* Khoảng cách từ form lên nút submit */
}

.form-dang-ky .wpcf7-submit {
    background-color: #fe9703;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-dang-ky .wpcf7-submit:hover {
    background-color: #fe9700;
}
/* Màu placeholder */
.form-dang-ky input[type="text"]::placeholder,
.form-dang-ky input[type="tel"]::placeholder {
    color: #fff; /* Màu xám nhạt */
    opacity: 1; /* Đảm bảo opacity không bị giảm */
}
/* Chỉ áp dụng cho form có class "form-dang-ky" */
.form-dang-ky input[type="text"][required]::placeholder,
.form-dang-ky input[type="tel"][required]::placeholder {
    color: red !important;
    opacity: 1;
    font-weight: bold;
}

/* Thay đổi placeholder nếu muốn thêm ký tự * vào cuối */
.form-dang-ky input[type="text"][required]::placeholder::after,
.form-dang-ky input[type="tel"][required]::placeholder::after {
    content: " *";
    color: red;
}

/* === Chỉ áp dụng cho form có class .form-nhan-tu-van === */
.form-nhan-tu-van {
    padding: 0px 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: auto;
}

/* === Các nhóm nhập liệu === */
.form-nhan-tu-van .form-group {
    margin-bottom: 15px;
}

/* === Trường nhập liệu === */
.form-nhan-tu-van input[type="text"],
.form-nhan-tu-van input[type="tel"],
{
    width: 100%;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: #333;
}
.form-nhan-tu-van textarea {
    width: 100%;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: #333;
	height: 60px;
}
/* === Placeholder mặc định === */
.form-nhan-tu-van ::placeholder {
    color: #999;
    opacity: 1;
    font-weight: normal;
}

/* === Đổi màu * trong placeholder thành đỏ cho các trường bắt buộc === */


/* === Nút Submit === */
.form-nhan-tu-van .submit-container {
    text-align: center;
    margin-top: 20px;
	margin-right: -40px;
}

.form-nhan-tu-van .wpcf7-submit {
    background-color: #f17e1a;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-nhan-tu-van .wpcf7-submit:hover {
    background-color: #fe9700;
}

/* === Hình ảnh === */
.form-nhan-tu-van .image-container {
    text-align: center;
    margin: 20px 0;
}

.form-nhan-tu-van img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.submit-container {
    text-align: center;
    margin-top: 20px;
	margin-right: -40px;
}

.wpcf7-submit {
    background-color: #fe9700;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wpcf7-submit:hover {
    background-color: #fe9700;
}